diff --git a/app/src/components/Layout.tsx b/app/src/components/Layout.tsx index e369642..e5d29e6 100644 --- a/app/src/components/Layout.tsx +++ b/app/src/components/Layout.tsx @@ -1,6 +1,8 @@ import { useEffect, useState } from "react" import { Link, NavLink, Outlet } from "react-router-dom" import { + Boxes, + ChevronDown, ChevronLeft, ChevronRight, Clock, @@ -12,46 +14,121 @@ import { Share2, Wrench, X, + type LucideIcon, } from "lucide-react" import { cn } from "@/lib/utils" import { useEventStream } from "@/services/api/hooks" -const NAV = [ +type NavLeaf = { to: string; label: string; icon: LucideIcon; end?: boolean } +type NavGroup = { label: string; icon: LucideIcon; children: NavLeaf[] } + +// Services, Scheduled, and Tools are all deployment lenses — grouped under a +// "Deployments" parent. Programs (the catalog) stays top-level. +const NAV: (NavLeaf | NavGroup)[] = [ { to: "/", label: "Overview", icon: LayoutDashboard, end: true }, - { to: "/gateway", label: "Gateway", icon: Globe, end: false }, - { to: "/services", label: "Services", icon: Server, end: false }, - { to: "/scheduled", label: "Scheduled", icon: Clock, end: false }, - { to: "/tools", label: "Tools", icon: Wrench, end: false }, - { to: "/programs", label: "Programs", icon: Package, end: false }, - { to: "/mesh", label: "Mesh", icon: Share2, end: false }, + { to: "/gateway", label: "Gateway", icon: Globe }, + { + label: "Deployments", + icon: Boxes, + children: [ + { to: "/services", label: "Services", icon: Server }, + { to: "/scheduled", label: "Scheduled", icon: Clock }, + { to: "/tools", label: "Tools", icon: Wrench }, + ], + }, + { to: "/programs", label: "Programs", icon: Package }, + { to: "/mesh", label: "Mesh", icon: Share2 }, ] const COLLAPSE_KEY = "castle-nav-collapsed" +function NavLeafLink({ + leaf, + collapsed, + indent, + onNavigate, +}: { + leaf: NavLeaf + collapsed: boolean + indent?: boolean + onNavigate?: () => void +}) { + const Icon = leaf.icon + return ( + + cn( + "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors", + collapsed && "justify-center px-0", + indent && !collapsed && "pl-9", + isActive + ? "bg-[var(--primary)]/10 text-[var(--foreground)] font-medium" + : "text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--card)]", + ) + } + > + + {!collapsed && {leaf.label}} + + ) +} + +function NavGroupItem({ + group, + collapsed, + onNavigate, +}: { + group: NavGroup + collapsed: boolean + onNavigate?: () => void +}) { + const [open, setOpen] = useState(true) + // On the icon rail there's no room for a group header — show the children flat. + if (collapsed) { + return ( + <> + {group.children.map((c) => ( + + ))} + + ) + } + const Icon = group.icon + return ( +
+ + {open && ( +
+ {group.children.map((c) => ( + + ))} +
+ )} +
+ ) +} + function NavItems({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) { return ( ) } diff --git a/app/src/components/detail/ConfigPanel.tsx b/app/src/components/detail/ConfigPanel.tsx index 19ab21a..26ea2a2 100644 --- a/app/src/components/detail/ConfigPanel.tsx +++ b/app/src/components/detail/ConfigPanel.tsx @@ -3,14 +3,22 @@ import { useNavigate } from "react-router-dom" import { useQueryClient } from "@tanstack/react-query" import { Check, RefreshCw } from "lucide-react" import { apiClient } from "@/services/api/client" -import type { AnyDetail, ProgramDetail, ServiceDetail, JobDetail } from "@/types" +import type { + AnyDetail, + DeploymentDetail, + ProgramDetail, + ServiceDetail, + JobDetail, +} from "@/types" import { ProgramFields } from "./ProgramFields" import { ServiceFields } from "./ServiceFields" import { JobFields } from "./JobFields" +import { ToolFields } from "./ToolFields" +import { StaticFields } from "./StaticFields" interface ConfigPanelProps { - deployment: AnyDetail - configSection: "services" | "jobs" | "programs" + deployment: AnyDetail | DeploymentDetail + configSection: "services" | "jobs" | "programs" | "tools" | "static" onRefetch: () => void } @@ -139,6 +147,18 @@ export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPane onSave={handleSave} onDelete={handleDelete} /> + ) : configSection === "tools" ? ( + + ) : configSection === "static" ? ( + ) : ( d.kind === "tool" || d.kind === "static") - const linked = deployments.filter((d) => d.kind === "service" || d.kind === "job") + const detailPath = (name: string, kind: string) => + kind === "tool" ? `/tools/${name}` : kind === "job" ? `/jobs/${name}` : `/services/${name}` return (

- Deployment + Deployments

-
- ) -} - -/** A static (caddy) deployment: served by the gateway from its built dir. */ -function StaticStatus({ name, active }: { name: string; active: boolean | null }) { - const url = subdomainUrl(name) - const served = active === true - return ( -
-
- - {served ? "Served by the gateway" : "Not built yet"} - manager: caddy -
- {url && served && ( - - {name} - - )}
) diff --git a/app/src/components/detail/StaticFields.tsx b/app/src/components/detail/StaticFields.tsx new file mode 100644 index 0000000..8a671a5 --- /dev/null +++ b/app/src/components/detail/StaticFields.tsx @@ -0,0 +1,86 @@ +import { useState } from "react" +import type { DeploymentDetail } from "@/types" +import { Field, TextField, FormFooter, useEnvSecrets } from "./fields" + +interface Props { + static_: DeploymentDetail + onSave: (name: string, config: Record) => Promise + onDelete?: (name: string) => Promise +} + +type Obj = Record +const obj = (v: unknown): Obj => (v as Obj) ?? {} + +/** Edit a static (caddy) deployment: the built dir it serves (`root`), whether it's + * also public (via the tunnel), a description, and env. No launcher/port/schedule. */ +export function StaticFields({ static_: dep, onSave, onDelete }: Props) { + const m = dep.manifest + const [saving, setSaving] = useState(false) + const [saved, setSaved] = useState(false) + const [description, setDescription] = useState((m.description as string) ?? "") + const [root, setRoot] = useState((m.root as string) ?? "dist") + const [isPublic, setIsPublic] = useState(m.public === true) + const { element: envEditor, merged } = useEnvSecrets( + obj(obj(m.defaults).env) as Record, + ) + + const handleSave = async () => { + setSaving(true) + setSaved(false) + try { + const config: Record = JSON.parse(JSON.stringify(m)) + delete config.id + config.description = description || undefined + config.root = root || "dist" + if (isPublic) config.public = true + else delete config.public + const env = merged() + if (Object.keys(env).length > 0) config.defaults = { ...obj(config.defaults), env } + else if (config.defaults) delete (config.defaults as Obj).env + await onSave(dep.id, config) + setSaved(true) + setTimeout(() => setSaved(false), 2000) + } finally { + setSaving(false) + } + } + + return ( +
+ + + + + + {envEditor} + onDelete(dep.id) : undefined} + deleteLabel="Remove static deployment" + confirmMessage={`Remove the static deployment "${dep.id}"? Its gateway route is dropped on the next deploy. (The program stays.)`} + /> +
+ ) +} diff --git a/app/src/components/detail/ToolFields.tsx b/app/src/components/detail/ToolFields.tsx new file mode 100644 index 0000000..8404389 --- /dev/null +++ b/app/src/components/detail/ToolFields.tsx @@ -0,0 +1,57 @@ +import { useState } from "react" +import type { DeploymentDetail } from "@/types" +import { TextField, FormFooter, useEnvSecrets } from "./fields" + +interface Props { + tool: DeploymentDetail + onSave: (name: string, config: Record) => Promise + onDelete?: (name: string) => Promise +} + +type Obj = Record +const obj = (v: unknown): Obj => (v as Obj) ?? {} + +/** Edit a tool's (path) deployment config. A path deployment has no launcher, + * port, or schedule — only a description and env, plus its manager. */ +export function ToolFields({ tool, onSave, onDelete }: Props) { + const m = tool.manifest + const [saving, setSaving] = useState(false) + const [saved, setSaved] = useState(false) + const [description, setDescription] = useState((m.description as string) ?? "") + const { element: envEditor, merged } = useEnvSecrets( + obj(obj(m.defaults).env) as Record, + ) + + const handleSave = async () => { + setSaving(true) + setSaved(false) + try { + const config: Record = JSON.parse(JSON.stringify(m)) + delete config.id + config.description = description || undefined + const env = merged() + if (Object.keys(env).length > 0) config.defaults = { ...obj(config.defaults), env } + else if (config.defaults) delete (config.defaults as Obj).env + await onSave(tool.id, config) + setSaved(true) + setTimeout(() => setSaved(false), 2000) + } finally { + setSaving(false) + } + } + + return ( +
+ + {envEditor} + onDelete(tool.id) : undefined} + deleteLabel="Remove tool deployment" + confirmMessage={`Remove the tool deployment "${tool.id}"? It will be uninstalled from PATH on the next deploy. (The program stays.)`} + /> +
+ ) +} diff --git a/app/src/pages/Overview.tsx b/app/src/pages/Overview.tsx index 5c80997..a06bdd8 100644 --- a/app/src/pages/Overview.tsx +++ b/app/src/pages/Overview.tsx @@ -1,5 +1,5 @@ import { Link } from "react-router-dom" -import { Clock, Globe, Package, Server, Share2 } from "lucide-react" +import { Clock, Globe, Package, Server, Share2, Wrench } from "lucide-react" import { useGateway, useJobs, @@ -15,6 +15,7 @@ import { PageHeader } from "@/components/PageHeader" export function Overview() { const { data: services } = useServices() const { data: jobs } = useJobs() + const { data: tools } = usePrograms("tool") const { data: programs } = usePrograms() const { data: statusResp } = useStatus() const { data: gateway } = useGateway() @@ -43,6 +44,13 @@ export function Overview() { value: jobs?.length ?? 0, detail: jobs ? `${jobs.length === 1 ? "job" : "jobs"}` : "", }, + { + to: "/tools", + icon: Wrench, + label: "Tools", + value: tools?.length ?? 0, + detail: tools ? "on PATH" : "", + }, { to: "/programs", icon: Package, @@ -72,7 +80,7 @@ export function Overview() { {nodes && } -
+
{tiles.map(({ to, icon: Icon, label, value, detail }) => ( -
- {health && } - -
+ {!isStatic && ( +
+ {health && } + +
+ )}
@@ -53,6 +61,32 @@ export function ServiceDetailPage() { Overview
+ {isStatic && ( + <> + Status + + ● served by the gateway + · manager: caddy + + {servedUrl && ( + <> + Served at + + {deployment.subdomain ?? deployment.id} + + + )} + {root && ( + <> + Root + {root} + + )} + + )} {deployment.port && ( <> Port @@ -128,7 +162,11 @@ export function ServiceDetailPage() {
)} - + {deployment.managed && (
diff --git a/app/src/pages/ToolDetail.tsx b/app/src/pages/ToolDetail.tsx new file mode 100644 index 0000000..f3ae599 --- /dev/null +++ b/app/src/pages/ToolDetail.tsx @@ -0,0 +1,106 @@ +import { useParams, Link } from "react-router-dom" +import { Loader2, Package } from "lucide-react" +import { useDeployment, useProgramAction } from "@/services/api/hooks" +import { DetailHeader } from "@/components/detail/DetailHeader" +import { ConfigPanel } from "@/components/detail/ConfigPanel" + +export function ToolDetailPage() { + const { name } = useParams<{ name: string }>() + const { data: deployment, isLoading, error, refetch } = useDeployment(name ?? "") + + if (isLoading) { + return
Loading...
+ } + + if (error || !deployment) { + return ( +
+ +

Tool not found

+
+ ) + } + + const program = (deployment.manifest?.program as string | undefined) ?? deployment.id + + return ( +
+ + + {deployment.description && ( +

{deployment.description}

+ )} + + {/* A tool's PATH deployment: install/uninstall is its start/stop. */} + + +
+

+ Program +

+

+ This tool is installed from a program — its source, dev verbs, and catalog + config live there. +

+ + {program} + +
+ + +
+ ) +} + +/** Install/uninstall a tool on PATH — the path deployment's lifecycle. */ +function PathLifecycle({ + name, + active, + onDone, +}: { + name: string + active: boolean | null + onDone: () => void +}) { + const { mutate, isPending } = useProgramAction() + const installed = active === true + const dot = + active === true + ? "bg-green-500" + : active === false + ? "bg-[var(--muted)]" + : "bg-transparent border border-[var(--muted)]" + return ( +
+
+ + {installed ? "Installed on PATH" : "Not installed"} + manager: path +
+ +
+ ) +} diff --git a/app/src/router/routes.tsx b/app/src/router/routes.tsx index a6d7870..29ebb9a 100644 --- a/app/src/router/routes.tsx +++ b/app/src/router/routes.tsx @@ -9,6 +9,7 @@ import { GatewayPage } from "@/pages/GatewayPage" import { MeshPage } from "@/pages/MeshPage" import { ServiceDetailPage } from "@/pages/ServiceDetail" import { ScheduledDetailPage } from "@/pages/ScheduledDetail" +import { ToolDetailPage } from "@/pages/ToolDetail" import { ProgramDetailPage } from "@/pages/ProgramDetail" import { ProgramRedirect } from "@/pages/ProgramRedirect" import { NodeDetailPage } from "@/pages/NodeDetail" @@ -27,6 +28,7 @@ export const router = createBrowserRouter([ { path: "mesh", element: }, { path: "services/:name", element: }, { path: "jobs/:name", element: }, + { path: "tools/:name", element: }, { path: "programs/:name", element: }, { path: "deployment/:name", element: }, { path: "node/:hostname", element: },