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

@@ -1,7 +1,7 @@
-import { ExternalLink, Play, RefreshCw, Server, Square, Terminal } from "lucide-react"
+import { ExternalLink, Power, RefreshCw, Server, Terminal } from "lucide-react"
 import { Link } from "react-router-dom"
 import type { ServiceSummary, HealthStatus } from "@/types"
-import { useServiceAction } from "@/services/api/hooks"
+import { useServiceAction, useSetEnabled } from "@/services/api/hooks"
 import { launcherLabel, subdomainUrl } from "@/lib/labels"
 import { HealthBadge } from "./HealthBadge"
 import { StackBadge } from "./StackBadge"
@@ -14,13 +14,9 @@ interface ServiceCardProps {
 
 export function ServiceCard({ service, health }: ServiceCardProps) {
   const hasHttp = service.port != null
-  const { mutate, isPending } = useServiceAction()
-
-  const doAction = (action: string) => {
-    mutate({ name: service.id, action })
-  }
-
-  const isDown = health?.status === "down"
+  const restart = useServiceAction()
+  const setEnabled = useSetEnabled()
+  const busy = restart.isPending || setEnabled.isPending
 
   return (
     <div className="relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-5 hover:border-[var(--primary)] transition-colors">
@@ -82,32 +78,26 @@ export function ServiceCard({ service, health }: ServiceCardProps) {
 
         {service.managed && (
           <div className="relative z-10 flex items-center gap-1">
-            {isDown && (
-              <button
-                onClick={() => doAction("start")}
-                disabled={isPending}
-                className="p-1 rounded hover:bg-green-800/30 text-green-400 transition-colors disabled:opacity-40"
-                title="Start"
-              >
-                <Play size={14} />
-              </button>
-            )}
             <button
-              onClick={() => doAction("restart")}
-              disabled={isPending}
-              className="p-1 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
-              title="Restart"
+              onClick={() => setEnabled.mutate({ name: service.id, enabled: !service.enabled })}
+              disabled={busy}
+              className={`p-1 rounded transition-colors disabled:opacity-40 ${
+                service.enabled
+                  ? "hover:bg-red-800/30 text-red-400"
+                  : "hover:bg-green-800/30 text-green-400"
+              }`}
+              title={service.enabled ? "Disable" : "Enable"}
             >
-              <RefreshCw size={14} />
+              <Power size={14} />
             </button>
-            {!isDown && (
+            {service.enabled && (
               <button
-                onClick={() => doAction("stop")}
-                disabled={isPending}
-                className="p-1 rounded hover:bg-red-800/30 text-red-400 transition-colors disabled:opacity-40"
-                title="Stop"
+                onClick={() => restart.mutate({ name: service.id, action: "restart" })}
+                disabled={busy}
+                className="p-1 rounded hover:bg-blue-800/30 text-blue-400 transition-colors disabled:opacity-40"
+                title="Restart"
               >
-                <Square size={14} />
+                <RefreshCw size={14} className={restart.isPending ? "animate-spin" : ""} />
               </button>
             )}
           </div>