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/ProgramActions.tsx

@@ -4,10 +4,8 @@ import {
   FlaskConical,
   Hammer,
   Loader2,
-  Plug,
   ShieldCheck,
   Sparkles,
-  Unplug,
   type LucideIcon,
 } from "lucide-react"
 import { useProgramAction } from "@/services/api/hooks"
@@ -20,14 +18,15 @@ interface ActionConfig {
   borderColor: string
 }
 
+// Dev verbs only — operations on the program's *source*. Deployment lifecycle
+// (install/uninstall a tool, start/stop a service, …) belongs to the deployment,
+// not the program, so it lives in the Deployment section, never here.
 const ACTION_CONFIG: Record<string, ActionConfig> = {
   build:        { icon: Hammer,       label: "Build",      color: "text-blue-400",   hoverBg: "hover:bg-blue-800/30",   borderColor: "border-blue-800" },
   test:         { icon: FlaskConical, label: "Test",       color: "text-purple-400", hoverBg: "hover:bg-purple-800/30", borderColor: "border-purple-800" },
   lint:         { icon: Sparkles,     label: "Lint",       color: "text-amber-400",  hoverBg: "hover:bg-amber-800/30",  borderColor: "border-amber-800" },
   "type-check": { icon: FileCheck,    label: "Type Check", color: "text-cyan-400",   hoverBg: "hover:bg-cyan-800/30",   borderColor: "border-cyan-800" },
   check:        { icon: ShieldCheck,  label: "Check All",  color: "text-green-400",  hoverBg: "hover:bg-green-800/30",  borderColor: "border-green-800" },
-  install:      { icon: Plug,         label: "Install",    color: "text-green-400",  hoverBg: "hover:bg-green-800/30",  borderColor: "border-green-800" },
-  uninstall:    { icon: Unplug,       label: "Uninstall",  color: "text-red-400",    hoverBg: "hover:bg-red-800/30",    borderColor: "border-red-800" },
 }
 
 const DEV_ACTIONS = ["build", "test", "lint", "type-check", "check"]
@@ -41,67 +40,20 @@ export interface ActionOutput {
 interface ProgramActionsProps {
   name: string
   actions: string[]
-  active?: boolean | null
-  kind?: string | null
   compact?: boolean
   onOutput?: (output: ActionOutput) => void
 }
 
-/** install/uninstall (activate) is meaningful only for a tool (a PATH deployment).
- * Services, jobs, and static (caddy) deployments are managed through their
- * deployment — never install/uninstall here. */
-function showsActivation(kind: string | null | undefined): boolean {
-  return kind === "tool"
-}
-
-function visibleActions(
-  actions: string[],
-  active: boolean | null | undefined,
-  compact: boolean,
-): string[] {
-  // `active` is the uniform lifecycle state (on PATH / running / served), not a
-  // PATH lookup — so it's correct for tools, services, jobs, and static frontends.
-  if (compact) {
-    // Table: only the activate/deactivate toggle based on state
-    if (active === true) return actions.includes("uninstall") ? ["uninstall"] : []
-    if (active === false) return actions.includes("install") ? ["install"] : []
-    // null — show install if available
-    return actions.includes("install") ? ["install"] : []
-  }
-
-  // Detail page: dev actions always, activate/deactivate based on state
-  const visible: string[] = []
-  for (const a of DEV_ACTIONS) {
-    if (actions.includes(a)) visible.push(a)
-  }
-  if (active === true) {
-    if (actions.includes("uninstall")) visible.push("uninstall")
-  } else if (active === false) {
-    if (actions.includes("install")) visible.push("install")
-  } else {
-    // null — show both if available
-    if (actions.includes("install")) visible.push("install")
-    if (actions.includes("uninstall")) visible.push("uninstall")
-  }
-  return visible
-}
-
 export function ProgramActions({
   name,
   actions,
-  active,
-  kind,
   compact,
   onOutput,
 }: ProgramActionsProps) {
   const { mutate, isPending } = useProgramAction()
   const [runningAction, setRunningAction] = useState<string | null>(null)
 
-  // Drop install/uninstall for kinds that activate via a deployment.
+  const visible = DEV_ACTIONS.filter((a) => actions.includes(a))
-  const allowed = showsActivation(kind)
-    ? actions
-    : actions.filter((a) => a !== "install" && a !== "uninstall")
-  const visible = visibleActions(allowed, active, !!compact)
 
   const handleAction = (action: string) => {
     setRunningAction(action)
@@ -111,13 +63,13 @@ export function ProgramActions({
       {
         onSuccess: (data) => {
           setRunningAction(null)
-          if (!compact && DEV_ACTIONS.includes(action) && data.output) {
+          if (!compact && data.output) {
             onOutput?.({ action, text: data.output, ok: true })
           }
         },
         onError: (err) => {
           setRunningAction(null)
-          if (!compact && DEV_ACTIONS.includes(action)) {
+          if (!compact) {
             let text = String(err)
             try {
               const parsed = JSON.parse((err as Error).message)

app/src/components/ProgramCard.tsx

@@ -2,16 +2,29 @@ import { Link } from "react-router-dom"
 import type { ProgramSummary } from "@/types"
 import { KindBadge } from "./KindBadge"
 import { StackBadge } from "./StackBadge"
-import { ProgramActions } from "./ProgramActions"
 
 interface ProgramCardProps {
   program: ProgramSummary
 }
 
 export function ProgramCard({ program }: ProgramCardProps) {
+  // The dot reflects the uniform lifecycle state (a tool on PATH, a service
+  // running, a static site served). Lifecycle controls live on the detail page's
+  // Deployment section, not here — a card just shows state and links through.
+  const dot =
+    program.active === true
+      ? "bg-green-500"
+      : program.active === false
+        ? "bg-[var(--muted)]"
+        : "bg-transparent border border-[var(--muted)]"
+
   return (
     <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 hover:border-[var(--primary)] transition-colors">
-      <div className="flex items-start justify-between mb-2">
+      <div className="flex items-center gap-2 mb-2">
+        <span
+          className={`h-2 w-2 rounded-full shrink-0 ${dot}`}
+          title={program.active === true ? "active" : program.active === false ? "inactive" : "no deployment"}
+        />
         <Link
           to={`/programs/${program.id}`}
           className="text-base font-semibold hover:text-[var(--primary)] transition-colors after:absolute after:inset-0"
@@ -26,18 +39,8 @@ export function ProgramCard({ program }: ProgramCardProps) {
       </div>
 
       {program.description && (
-        <p className="text-sm text-[var(--muted)] mb-3">{program.description}</p>
+        <p className="text-sm text-[var(--muted)]">{program.description}</p>
       )}
-
-      <div className="relative z-10">
-        <ProgramActions
-          name={program.id}
-          actions={program.actions}
-          active={program.active}
-          kind={program.kind}
-          compact
-        />
-      </div>
     </div>
   )
 }

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;
+/** How a program is deployed, and its lifecycle. A program → 0-N deployments.
- * these are convenience links, not ownership (a deployment can run anything,
+ * Its own path (tool) / caddy (static) deployment is 1:1 with the program, so its
- * program-backed or not). The Create button prefills the kind-aware wizard. */
+ * 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 ? (
+      {/* Service/job deployments — managed on their own detail pages. */}
-        <p className="text-sm text-[var(--muted)]">
+      {none ? (
-          {kind === "service"
+        (kind === "tool" || kind === "static") ? null : (
-            ? "No service yet — this program isn't deployed."
+          <p className="text-sm text-[var(--muted)]">
-            : kind === "tool"
+            {kind === "service"
-              ? "Installed on PATH. Add a job to also run it on a timer."
+              ? "No service yet — this program isn't deployed."
-              : "None."}
+              : "No deployment yet."}
-        </p>
+          </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>
+  )
+}

app/src/pages/ProgramDetail.tsx

@@ -48,8 +48,6 @@ export function ProgramDetailPage() {
         <ProgramActions
           name={deployment.id}
           actions={deployment.actions}
-          active={deployment.active}
-          kind={deployment.kind}
           onOutput={setActionOutput}
         />
       </DetailHeader>