Dashboard: lifecycle is a deployment concern, not a program action

Install/Uninstall no longer live in the program's action cluster (they were a
tool's PATH-deployment lifecycle masquerading as a program action). ProgramActions
is now dev-verbs-only (build/test/lint/type-check/check). The program detail's
Deployment section owns lifecycle, keyed on kind: a tool shows Installed-on-PATH
with an Install/Uninstall toggle, a static shows served-by-gateway + its URL,
services/jobs link to their own pages. Program list cards drop the quick toggle
for a plain active dot. 'Remove program' stays as catalog deletion — no longer a
dead-end now that the blocking deployment is visible in the Deployment section.

app/src/components/detail/DeploymentsSection.tsx

@@ -1,13 +1,15 @@
 import { useState } from "react"
 import { Link } from "react-router-dom"
-import { Server, Clock, Plus } from "lucide-react"
+import { Server, Clock, Plus, Loader2, ExternalLink } from "lucide-react"
 import type { ProgramDetail } from "@/types"
-import { useServices, useJobs } from "@/services/api/hooks"
+import { useServices, useJobs, useProgramAction } from "@/services/api/hooks"
+import { subdomainUrl } from "@/lib/labels"
 import { CreateDeploymentForm, type CreatePrefill } from "./CreateDeploymentForm"
 
-/** The services and jobs that deploy a program. A program → 0-N deployments;
- * these are convenience links, not ownership (a deployment can run anything,
- * program-backed or not). The Create button prefills the kind-aware wizard. */
+/** How a program is deployed, and its lifecycle. A program → 0-N deployments.
+ * Its own path (tool) / caddy (static) deployment is 1:1 with the program, so its
+ * lifecycle is shown inline here; service/job deployments link to their own pages
+ * where start/stop lives. This is the single home for "how this program runs". */
 export function DeploymentsSection({ program }: { program: ProgramDetail }) {
   const { services, jobs, kind } = program
   const none = services.length === 0 && jobs.length === 0
@@ -31,7 +33,7 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
     <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">
-          Deployments
+          Deployment
         </h2>
         <button
           onClick={() => setCreating((c) => !c)}
@@ -41,9 +43,13 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
         </button>
       </div>
       <p className="text-xs text-[var(--muted)] mb-4">
-        Services and jobs that run this program.
+        How this program is materialized into the runtime.
       </p>
 
+      {/* The program's own path/caddy deployment — its lifecycle, inline. */}
+      {kind === "tool" && <PathLifecycle name={program.id} active={program.active} />}
+      {kind === "static" && <StaticStatus name={program.id} active={program.active} />}
+
       {creating && (
         <CreateDeploymentForm
           prefill={prefill}
@@ -52,16 +58,17 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
         />
       )}
 
-      {none && !creating ? (
-        <p className="text-sm text-[var(--muted)]">
-          {kind === "service"
-            ? "No service yet — this program isn't deployed."
-            : kind === "tool"
-              ? "Installed on PATH. Add a job to also run it on a timer."
-              : "None."}
-        </p>
+      {/* Service/job deployments — managed on their own detail pages. */}
+      {none ? (
+        (kind === "tool" || kind === "static") ? null : (
+          <p className="text-sm text-[var(--muted)]">
+            {kind === "service"
+              ? "No service yet — this program isn't deployed."
+              : "No deployment yet."}
+          </p>
+        )
       ) : (
-        <div className="space-y-1.5">
+        <div className="space-y-1.5 mt-1">
           {services.map((s) => (
             <Link
               key={s}
@@ -89,3 +96,66 @@ export function DeploymentsSection({ program }: { program: ProgramDetail }) {
     </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>
+  )
+}