Dashboard: Deployments nav group, tool detail page, deployment links, static-aware detail

- Nav: Services/Scheduled/Tools nested under a 'Deployments' group (expandable;
  flattened to icons when the sidebar is collapsed). Programs stays top-level.
- Overview: Tools tile (Wrench, count of tool programs).
- New /tools/:name tool detail page (useDeployment): Install/Uninstall lifecycle,
  a link up to its program, and an editable ToolFields (description + env).
- ServiceDetail is static-aware: a caddy deployment shows served-by-gateway +
  URL + root, no start/stop, and edits via a new StaticFields (root + public + env)
  so a launcher is never injected into a caddy deployment.
- Program detail's Deployment section is now a clean list of links — every
  deployment (tool→/tools, service/static→/services, job→/jobs) links to its
  detail page; lifecycle controls moved onto those pages.

clean pnpm build + tsc.

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: "/gateway", label: "Gateway", icon: Globe },
-  { to: "/services", label: "Services", icon: Server, end: false },
+  {
-  { to: "/scheduled", label: "Scheduled", icon: Clock, end: false },
+    label: "Deployments",
-  { to: "/tools", label: "Tools", icon: Wrench, end: false },
+    icon: Boxes,
-  { to: "/programs", label: "Programs", icon: Package, end: false },
+    children: [
-  { to: "/mesh", label: "Mesh", icon: Share2, end: false },
+      { 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 (
+    <NavLink
+      to={leaf.to}
+      end={leaf.end}
+      onClick={onNavigate}
+      title={collapsed ? leaf.label : undefined}
+      className={({ isActive }) =>
+        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)]",
+        )
+      }
+    >
+      <Icon size={18} className="shrink-0" />
+      {!collapsed && <span>{leaf.label}</span>}
+    </NavLink>
+  )
+}
+
+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) => (
+          <NavLeafLink key={c.to} leaf={c} collapsed onNavigate={onNavigate} />
+        ))}
+      </>
+    )
+  }
+  const Icon = group.icon
+  return (
+    <div>
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="w-full flex items-center gap-3 rounded-md px-3 py-2 text-sm text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--card)] transition-colors"
+      >
+        <Icon size={18} className="shrink-0" />
+        <span className="flex-1 text-left">{group.label}</span>
+        {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+      </button>
+      {open && (
+        <div className="mt-1 space-y-1">
+          {group.children.map((c) => (
+            <NavLeafLink key={c.to} leaf={c} collapsed={false} indent onNavigate={onNavigate} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function NavItems({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: () => void }) {
   return (
     <nav className="flex-1 px-2 py-3 space-y-1 overflow-y-auto">
-      {NAV.map(({ to, label, icon: Icon, end }) => (
+      {NAV.map((item) =>
-        <NavLink
+        "children" in item ? (
-          key={to}
+          <NavGroupItem key={item.label} group={item} collapsed={collapsed} onNavigate={onNavigate} />
-          to={to}
+        ) : (
-          end={end}
+          <NavLeafLink key={item.to} leaf={item} collapsed={collapsed} onNavigate={onNavigate} />
-          onClick={onNavigate}
+        ),
-          title={collapsed ? label : undefined}
+      )}
-          className={({ isActive }) =>
-            cn(
-              "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
-              collapsed && "justify-center px-0",
-              isActive
-                ? "bg-[var(--primary)]/10 text-[var(--foreground)] font-medium"
-                : "text-[var(--muted)] hover:text-[var(--foreground)] hover:bg-[var(--card)]",
-            )
-          }
-        >
-          <Icon size={18} className="shrink-0" />
-          {!collapsed && <span>{label}</span>}
-        </NavLink>
-      ))}
     </nav>
   )
 }

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
+  deployment: AnyDetail | DeploymentDetail
-  configSection: "services" | "jobs" | "programs"
+  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" ? (
+          <ToolFields
+            tool={deployment as DeploymentDetail}
+            onSave={handleSave}
+            onDelete={handleDelete}
+          />
+        ) : configSection === "static" ? (
+          <StaticFields
+            static_={deployment as DeploymentDetail}
+            onSave={handleSave}
+            onDelete={handleDelete}
+          />
         ) : (
           <JobFields
             job={deployment as JobDetail}

app/src/components/detail/DeploymentsSection.tsx

@@ -1,15 +1,14 @@
 import { useState } from "react"
 import { Link } from "react-router-dom"
-import { Server, Clock, Plus, Loader2, ExternalLink } from "lucide-react"
+import { Plus, ChevronRight } from "lucide-react"
 import type { ProgramDetail } from "@/types"
-import { useServices, useJobs, useProgramAction } from "@/services/api/hooks"
+import { useServices, useJobs } from "@/services/api/hooks"
-import { subdomainUrl } from "@/lib/labels"
+import { KindBadge } from "@/components/KindBadge"
 import { CreateDeploymentForm, type CreatePrefill } from "./CreateDeploymentForm"
 
-/** How a program is deployed, and its lifecycle. A program → 0-N deployments.
+/** How a program is deployed. A program → 0-N deployments; each row links to its
- * Its own path (tool) / caddy (static) deployment is 1:1 with the program, so its
+ * detail page (where its config + lifecycle live). tool → /tools, static/service
- * lifecycle is shown inline here; service/job deployments link to their own pages
+ * → /services, job → /jobs. */
- * where start/stop lives. This is the single home for "how this program runs". */
 export function DeploymentsSection({ program }: { program: ProgramDetail }) {
   const { deployments } = program
   const [creating, setCreating] = useState(false)
@@ -28,16 +27,14 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
     launcher: program.stack?.startsWith("python") || !program.stack ? "python" : "command",
   }
 
-  // Tool/static deployments are 1:1 with the program (same name) — their
+  const detailPath = (name: string, kind: string) =>
-  // lifecycle is shown inline; service/job deployments link to their own pages.
+    kind === "tool" ? `/tools/${name}` : kind === "job" ? `/jobs/${name}` : `/services/${name}`
-  const inline = deployments.filter((d) => d.kind === "tool" || d.kind === "static")
-  const linked = deployments.filter((d) => d.kind === "service" || d.kind === "job")
 
   return (
     <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
       <div className="flex items-center justify-between mb-1">
         <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider">
-          Deployment
+          Deployments
         </h2>
         <button
           onClick={() => setCreating((c) => !c)}
@@ -50,15 +47,6 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
         How this program is materialized into the runtime.
       </p>
 
-      {/* The program's own path/caddy deployment — its lifecycle, inline. */}
-      {inline.map((d) =>
-        d.kind === "tool" ? (
-          <PathLifecycle key={d.name} name={program.id} active={program.active} />
-        ) : (
-          <StaticStatus key={d.name} name={program.id} active={program.active} />
-        ),
-      )}
-
       {creating && (
         <CreateDeploymentForm
           prefill={prefill}
@@ -67,90 +55,25 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
         />
       )}
 
-      {/* Service/job deployments — managed on their own detail pages. */}
       {deployments.length === 0 && !creating ? (
         <p className="text-sm text-[var(--muted)]">No deployment yet.</p>
-      ) : linked.length > 0 ? (
+      ) : (
-        <div className="space-y-1.5 mt-1">
+        <div className="space-y-1">
-          {linked.map((d) => (
+          {deployments.map((d) => (
             <Link
               key={d.name}
-              to={d.kind === "job" ? `/jobs/${d.name}` : `/services/${d.name}`}
+              to={detailPath(d.name, d.kind)}
-              className="flex items-center gap-2 text-sm hover:text-[var(--primary)] transition-colors"
+              className="flex items-center gap-2 rounded px-2 py-1.5 -mx-2 text-sm hover:bg-black/20 transition-colors group"
             >
-              {d.kind === "job" ? (
+              <span className="font-mono">{d.name}</span>
-                <Clock size={14} className="text-[var(--muted)]" />
+              <KindBadge kind={d.kind} />
-              ) : (
+              <ChevronRight
-                <Server size={14} className="text-[var(--muted)]" />
+                size={14}
-              )}
+                className="ml-auto text-[var(--muted)] group-hover:text-[var(--primary)]"
-              <span className="font-medium">{d.name}</span>
+              />
-              <span className="text-xs text-[var(--muted)]">{d.kind}</span>
             </Link>
           ))}
         </div>
-      ) : null}
-    </div>
-  )
-}
-
-function Dot({ active }: { active: boolean | null }) {
-  const cls =
-    active === true
-      ? "bg-green-500"
-      : active === false
-        ? "bg-[var(--muted)]"
-        : "bg-transparent border border-[var(--muted)]"
-  return <span className={`h-2 w-2 rounded-full shrink-0 ${cls}`} />
-}
-
-/** A tool's PATH deployment: install/uninstall is its start/stop (manager=path). */
-function PathLifecycle({ name, active }: { name: string; active: boolean | null }) {
-  const { mutate, isPending } = useProgramAction()
-  const installed = active === true
-  return (
-    <div className="flex items-center justify-between rounded border border-[var(--border)] px-3 py-2 mb-3">
-      <div className="flex items-center gap-2 text-sm">
-        <Dot active={active} />
-        <span>{installed ? "Installed on PATH" : "Not installed"}</span>
-        <span className="text-xs text-[var(--muted)]">manager: path</span>
-      </div>
-      <button
-        onClick={() => mutate({ name, action: installed ? "uninstall" : "install" })}
-        disabled={isPending}
-        className={`flex items-center gap-1.5 px-2 py-1 text-sm rounded border transition-colors disabled:opacity-40 ${
-          installed
-            ? "border-red-800 text-red-400 hover:bg-red-800/30"
-            : "border-green-800 text-green-400 hover:bg-green-800/30"
-        }`}
-      >
-        {isPending && <Loader2 size={14} className="animate-spin" />}
-        {installed ? "Uninstall" : "Install"}
-      </button>
-    </div>
-  )
-}
-
-/** 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 (
-    <div className="flex items-center justify-between rounded border border-[var(--border)] px-3 py-2 mb-3">
-      <div className="flex items-center gap-2 text-sm">
-        <Dot active={active} />
-        <span>{served ? "Served by the gateway" : "Not built yet"}</span>
-        <span className="text-xs text-[var(--muted)]">manager: caddy</span>
-      </div>
-      {url && served && (
-        <a
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 text-sm text-[var(--primary)] hover:underline"
-        >
-          {name}
-          <ExternalLink size={11} className="opacity-60" />
-        </a>
       )}
     </div>
   )

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<string, unknown>) => Promise<void>
+  onDelete?: (name: string) => Promise<void>
+}
+
+type Obj = Record<string, unknown>
+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<string, string>,
+  )
+
+  const handleSave = async () => {
+    setSaving(true)
+    setSaved(false)
+    try {
+      const config: Record<string, unknown> = 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 (
+    <div className="space-y-4">
+      <TextField label="Description" value={description} onChange={setDescription} />
+      <TextField
+        label="Root"
+        value={root}
+        onChange={setRoot}
+        mono
+        width="w-48"
+        placeholder="dist"
+        hint="The built directory the gateway serves, relative to the program source (e.g. dist, public)."
+      />
+      <Field
+        label="Public"
+        hint="Also expose this site to the public internet via the Cloudflare tunnel."
+      >
+        <label className="flex items-center gap-2 text-sm cursor-pointer">
+          <input
+            type="checkbox"
+            checked={isPublic}
+            onChange={(e) => setIsPublic(e.target.checked)}
+          />
+          <span className="font-mono text-[var(--muted)]">
+            {isPublic ? "public (via tunnel)" : "internal only"}
+          </span>
+        </label>
+      </Field>
+      {envEditor}
+      <FormFooter
+        saving={saving}
+        saved={saved}
+        onSave={handleSave}
+        onDelete={onDelete ? () => 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.)`}
+      />
+    </div>
+  )
+}

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<string, unknown>) => Promise<void>
+  onDelete?: (name: string) => Promise<void>
+}
+
+type Obj = Record<string, unknown>
+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<string, string>,
+  )
+
+  const handleSave = async () => {
+    setSaving(true)
+    setSaved(false)
+    try {
+      const config: Record<string, unknown> = 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 (
+    <div className="space-y-4">
+      <TextField label="Description" value={description} onChange={setDescription} />
+      {envEditor}
+      <FormFooter
+        saving={saving}
+        saved={saved}
+        onSave={handleSave}
+        onDelete={onDelete ? () => 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.)`}
+      />
+    </div>
+  )
+}

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 && <NodeBar nodes={nodes} />}
 
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
         {tiles.map(({ to, icon: Icon, label, value, detail }) => (
           <Link
             key={to}

app/src/pages/ServiceDetail.tsx

@@ -32,20 +32,28 @@ export function ServiceDetailPage() {
     )
   }
 
+  // A static is a caddy-served site, not a systemd unit — no start/stop, no logs;
+  // it shows its served URL and the dir it serves instead of a port/launcher.
+  const isStatic = deployment.kind === "static" || deployment.manager === "caddy"
+  const servedUrl = subdomainUrl(deployment.subdomain ?? deployment.id)
+  const root = (deployment.manifest?.root as string | undefined) ?? undefined
+
   return (
     <div className="max-w-3xl mx-auto px-6 py-8">
       <DetailHeader
         backTo="/services"
         backLabel="Back to Services"
         name={deployment.id}
-        kind="service"
+        kind={isStatic ? "static" : "service"}
         stack={deployment.stack}
         source={deployment.source}
       >
-        <div className="flex items-center gap-2">
+        {!isStatic && (
-          {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
+          <div className="flex items-center gap-2">
-          <ServiceControls name={deployment.id} health={health} />
+            {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
-        </div>
+            <ServiceControls name={deployment.id} health={health} />
+          </div>
+        )}
       </DetailHeader>
 
       <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
@@ -53,6 +61,32 @@ export function ServiceDetailPage() {
           Overview
         </h2>
         <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
+          {isStatic && (
+            <>
+              <span className="text-[var(--muted)]">Status</span>
+              <span className="text-green-400">
+                ● served by the gateway
+                <span className="text-xs text-[var(--muted)]"> · manager: caddy</span>
+              </span>
+              {servedUrl && (
+                <>
+                  <span className="text-[var(--muted)]">Served at</span>
+                  <a
+                    href={servedUrl}
+                    className="flex items-center gap-1 min-w-0 break-all text-[var(--primary)] hover:underline font-mono"
+                  >
+                    <ExternalLink size={12} className="shrink-0" />{deployment.subdomain ?? deployment.id}
+                  </a>
+                </>
+              )}
+              {root && (
+                <>
+                  <span className="text-[var(--muted)]">Root</span>
+                  <span className="font-mono break-all">{root}</span>
+                </>
+              )}
+            </>
+          )}
           {deployment.port && (
             <>
               <span className="text-[var(--muted)]">Port</span>
@@ -128,7 +162,11 @@ export function ServiceDetailPage() {
         </div>
       )}
 
-      <ConfigPanel deployment={deployment} configSection="services" onRefetch={refetch} />
+      <ConfigPanel
+        deployment={deployment}
+        configSection={isStatic ? "static" : "services"}
+        onRefetch={refetch}
+      />
 
       {deployment.managed && (
         <div className="mb-6">

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 <div className="max-w-3xl mx-auto px-6 py-8 text-[var(--muted)]">Loading...</div>
+  }
+
+  if (error || !deployment) {
+    return (
+      <div className="max-w-3xl mx-auto px-6 py-8">
+        <DetailHeader backTo="/tools" backLabel="Back to Tools" name={name ?? ""} />
+        <p className="text-red-400">Tool not found</p>
+      </div>
+    )
+  }
+
+  const program = (deployment.manifest?.program as string | undefined) ?? deployment.id
+
+  return (
+    <div className="max-w-3xl mx-auto px-6 py-8">
+      <DetailHeader
+        backTo="/tools"
+        backLabel="Back to Tools"
+        name={deployment.id}
+        kind="tool"
+        stack={deployment.stack}
+        source={deployment.source}
+      />
+
+      {deployment.description && (
+        <p className="text-sm text-[var(--muted)] -mt-4 mb-6">{deployment.description}</p>
+      )}
+
+      {/* A tool's PATH deployment: install/uninstall is its start/stop. */}
+      <PathLifecycle name={deployment.id} active={deployment.active} onDone={refetch} />
+
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 mb-6">
+        <h2 className="text-sm font-semibold text-[var(--muted)] uppercase tracking-wider mb-3">
+          Program
+        </h2>
+        <p className="text-sm text-[var(--muted)] mb-2">
+          This tool is installed from a program — its source, dev verbs, and catalog
+          config live there.
+        </p>
+        <Link
+          to={`/programs/${program}`}
+          className="inline-flex items-center gap-1.5 text-sm text-[var(--primary)] hover:underline"
+        >
+          <Package size={14} /> {program}
+        </Link>
+      </div>
+
+      <ConfigPanel deployment={deployment} configSection="tools" onRefetch={refetch} />
+    </div>
+  )
+}
+
+/** 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 (
+    <div className="flex items-center justify-between rounded-lg border border-[var(--border)] bg-[var(--card)] px-4 py-3 mb-6">
+      <div className="flex items-center gap-2 text-sm">
+        <span className={`h-2 w-2 rounded-full shrink-0 ${dot}`} />
+        <span>{installed ? "Installed on PATH" : "Not installed"}</span>
+        <span className="text-xs text-[var(--muted)]">manager: path</span>
+      </div>
+      <button
+        onClick={() =>
+          mutate({ name, action: installed ? "uninstall" : "install" }, { onSuccess: onDone })
+        }
+        disabled={isPending}
+        className={`flex items-center gap-1.5 px-2.5 py-1 text-sm rounded border transition-colors disabled:opacity-40 ${
+          installed
+            ? "border-red-800 text-red-400 hover:bg-red-800/30"
+            : "border-green-800 text-green-400 hover:bg-green-800/30"
+        }`}
+      >
+        {isPending && <Loader2 size={14} className="animate-spin" />}
+        {installed ? "Uninstall" : "Install"}
+      </button>
+    </div>
+  )
+}

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: <MeshPage /> },
       { path: "services/:name", element: <ServiceDetailPage /> },
       { path: "jobs/:name", element: <ScheduledDetailPage /> },
+      { path: "tools/:name", element: <ToolDetailPage /> },
       { path: "programs/:name", element: <ProgramDetailPage /> },
       { path: "deployment/:name", element: <ProgramRedirect /> },
       { path: "node/:hostname", element: <NodeDetailPage /> },