ui: Apply everywhere — power toggles, plan preview, no start/stop/install

Rework the dashboard around convergence:
- ServiceControls / ServiceCard / JobCard: replace start/restart/stop
  with a Power toggle (set enabled → apply, i.e. activate/deactivate)
  plus Restart (the one imperative bounce).
- ToolDetail: install/uninstall becomes an Enable/Disable toggle;
  `installed` stays the live state, `enabled` the desired one.
- ConfigPanel Apply and CreateDeploymentForm now POST /apply (one
  converge that renders + restarts only what changed) instead of
  /deploy + a separate start/restart.
- New ConvergePanel on Overview: a terraform-style Preview (POST /apply
  plan=true) showing would-activate/restart/deactivate, then Apply.
- useApply + useSetEnabled hooks; `enabled` added to Service/Job/
  Deployment types; both handle the self-restart connection drop.

Backend: PUT /config/deployments/{name}/enabled sets desired on/off
(edit config; caller runs apply) — the declarative toggle the UI uses.

Dashboard builds clean (tsc + vite); 59 API tests pass; live /apply and
/services?enabled verified after an api restart.

app/src/components/detail/ConfigPanel.tsx

@@ -42,7 +42,7 @@ export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPane
       setMessage({
         type: "ok",
         text: isDeployment
-          ? "Saved to castle.yaml — not live yet; apply to deploy & restart."
+          ? "Saved to castle.yaml — not live yet; apply to converge."
           : "Saved to castle.yaml",
       })
       if (isDeployment) setPendingApply(true)
@@ -58,16 +58,21 @@ export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPane
     setApplying(true)
     setMessage(null)
     try {
-      await apiClient.post(`/deploy`, { name: deployment.id })
-      if (configSection === "services") {
-        await apiClient.post(`/services/${deployment.id}/restart`, {})
-      }
+      // One converge: renders units/routes and reconciles the runtime (restarts
+      // only what changed). No separate restart call needed.
+      await apiClient.post(`/apply`, { name: deployment.id })
       setPendingApply(false)
       setMessage({ type: "ok", text: "Applied — the change is now live." })
-      qc.invalidateQueries({ queryKey: ["status"] })
-      qc.invalidateQueries({ queryKey: [configSection] })
+      qc.invalidateQueries()
       onRefetch()
     } catch (e: unknown) {
+      // A self-apply of castle-api restarts it, killing the connection — expected.
+      if (e instanceof TypeError) {
+        setPendingApply(false)
+        setMessage({ type: "ok", text: "Applied — the service is restarting." })
+        setApplying(false)
+        return
+      }
       let msg = e instanceof Error ? e.message : String(e)
       try {
         msg = JSON.parse((e as Error).message).detail ?? msg
@@ -122,11 +127,7 @@ export function ConfigPanel({ deployment, configSection, onRefetch }: ConfigPane
               className="shrink-0 flex items-center gap-1.5 px-3 py-1 text-xs rounded bg-amber-700 hover:bg-amber-600 text-white transition-colors disabled:opacity-50"
             >
               <RefreshCw size={12} className={applying ? "animate-spin" : ""} />
-              {applying
-                ? "Applying…"
-                : configSection === "services"
-                  ? "Apply (deploy & restart)"
-                  : "Apply (deploy)"}
+              {applying ? "Applying…" : "Apply"}
             </button>
           )}
         </div>

app/src/components/detail/CreateDeploymentForm.tsx

@@ -108,12 +108,9 @@ export function CreateDeploymentForm({
     try {
       setBusy("Saving…")
       await apiClient.put(`/config/deployments/${name}`, { config: buildConfig() })
-      setBusy("Deploying…")
-      await apiClient.post(`/deploy`, { name })
-      if (kind === "service") {
-        setBusy("Starting…")
-        await apiClient.post(`/services/${name}/start`, {})
-      }
+      // Converge: render + activate the new deployment in one step.
+      setBusy("Applying…")
+      await apiClient.post(`/apply`, { name })
       qc.invalidateQueries({ queryKey: ["services"] })
       qc.invalidateQueries({ queryKey: ["jobs"] })
       qc.invalidateQueries({ queryKey: ["programs"] })

app/src/components/detail/ServiceControls.tsx

@@ -1,44 +1,40 @@
-import { Play, RefreshCw, Square } from "lucide-react"
-import { useServiceAction } from "@/services/api/hooks"
-import type { HealthStatus } from "@/types"
+import { Power, RefreshCw } from "lucide-react"
+import { useServiceAction, useSetEnabled } from "@/services/api/hooks"
 
 interface ServiceControlsProps {
   name: string
-  health?: HealthStatus
+  enabled: boolean
 }
 
-export function ServiceControls({ name, health }: ServiceControlsProps) {
-  const { mutate, isPending } = useServiceAction()
-  const isDown = health?.status === "down"
+// Lifecycle is convergence: the Power toggle sets desired on/off state and applies
+// (activate/deactivate); Restart is the one imperative bounce. No raw start/stop.
+export function ServiceControls({ name, enabled }: ServiceControlsProps) {
+  const restart = useServiceAction()
+  const setEnabled = useSetEnabled()
+  const busy = restart.isPending || setEnabled.isPending
 
   return (
     <div className="flex items-center gap-1">
-      {isDown && (
-        <button
-          onClick={() => mutate({ name, action: "start" })}
-          disabled={isPending}
-          className="p-1.5 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
-          title="Start"
-        >
-          <Play size={16} />
-        </button>
-      )}
       <button
-        onClick={() => mutate({ name, action: "restart" })}
-        disabled={isPending}
-        className="p-1.5 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
-        title="Restart"
+        onClick={() => setEnabled.mutate({ name, enabled: !enabled })}
+        disabled={busy}
+        className={`p-1.5 rounded transition-colors disabled:opacity-40 ${
+          enabled
+            ? "hover:bg-red-800/30 text-red-400"
+            : "hover:bg-green-800/30 text-green-400"
+        }`}
+        title={enabled ? "Disable (stop & keep off)" : "Enable (start)"}
       >
-        <RefreshCw size={16} />
+        <Power size={16} />
       </button>
-      {!isDown && (
+      {enabled && (
         <button
-          onClick={() => mutate({ name, action: "stop" })}
-          disabled={isPending}
-          className="p-1.5 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
-          title="Stop"
+          onClick={() => restart.mutate({ name, action: "restart" })}
+          disabled={busy}
+          className="p-1.5 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
+          title="Restart"
         >
-          <Square size={16} />
+          <RefreshCw size={16} className={restart.isPending ? "animate-spin" : ""} />
         </button>
       )}
     </div>