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/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">
-          {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
-          <ServiceControls name={deployment.id} health={health} />
-        </div>
+        {!isStatic && (
+          <div className="flex items-center gap-2">
+            {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
+            <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>
+  )
+}