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.
2026-07-02 11:49:54 -07:00
parent 5d15d18e1d
commit f422c1879d
13 changed files with 292 additions and 121 deletions
--- a/app/src/components/ConvergePanel.tsx
+++ b/app/src/components/ConvergePanel.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { Check, GitCompare, Loader2, Play } from "lucide-react"
+import { apiClient } from "@/services/api/client"
+import type { ApplyResult } from "@/services/api/hooks"
+
+// A terraform-style "plan then apply" for the whole node: preview the diff the
+// converge would enact (activate/restart/deactivate), then apply it.
+export function ConvergePanel() {
+  const qc = useQueryClient()
+  const [plan, setPlan] = useState<ApplyResult | null>(null)
+  const [busy, setBusy] = useState<"plan" | "apply" | null>(null)
+  const [msg, setMsg] = useState<string | null>(null)
+
+  const preview = async () => {
+    setBusy("plan")
+    setMsg(null)
+    try {
+      setPlan(await apiClient.post<ApplyResult>("/apply", { plan: true }))
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const apply = async () => {
+    setBusy("apply")
+    setMsg(null)
+    try {
+      await apiClient.post<ApplyResult>("/apply", {})
+      setPlan(null)
+      setMsg("Applied — the node is converged.")
+      qc.invalidateQueries()
+    } catch (e) {
+      // A self-apply restarts castle-api, dropping the connection — expected.
+      if (e instanceof TypeError) {
+        setPlan(null)
+        setMsg("Applied — services are restarting.")
+      } else {
+        setMsg(`Apply failed: ${e instanceof Error ? e.message : String(e)}`)
+      }
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const row = (label: string, names: string[], color: string) =>
+    names.length > 0 && (
+      <div className="flex gap-2 text-sm">
+        <span className={`w-24 shrink-0 ${color}`}>{label}</span>
+        <span className="font-mono text-[var(--muted)]">{names.join(", ")}</span>
+      </div>
+    )
+
+  return (
+    <div className="mt-6 rounded-lg border border-[var(--border)] bg-[var(--card)] p-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm text-[var(--muted)]">
+          <GitCompare size={16} />
+          <span>Convergence</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={preview}
+            disabled={busy !== null}
+            className="flex items-center gap-1.5 px-2.5 py-1 text-sm rounded border border-[var(--border)] hover:border-[var(--primary)] transition-colors disabled:opacity-40"
+          >
+            {busy === "plan" ? <Loader2 size={14} className="animate-spin" /> : <GitCompare size={14} />}
+            Preview
+          </button>
+          {plan?.changed && (
+            <button
+              onClick={apply}
+              disabled={busy !== null}
+              className="flex items-center gap-1.5 px-2.5 py-1 text-sm rounded bg-[var(--primary)] text-white hover:opacity-90 transition-opacity disabled:opacity-40"
+            >
+              {busy === "apply" ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
+              Apply
+            </button>
+          )}
+        </div>
+      </div>
+
+      {msg && (
+        <div className="mt-3 flex items-center gap-1.5 text-sm text-green-400">
+          <Check size={14} /> {msg}
+        </div>
+      )}
+
+      {plan && (
+        <div className="mt-3 space-y-1">
+          {plan.changed ? (
+            <>
+              {row("activate", plan.activated, "text-green-400")}
+              {row("restart", plan.restarted, "text-blue-400")}
+              {row("deactivate", plan.deactivated, "text-red-400")}
+            </>
+          ) : (
+            <div className="text-sm text-[var(--muted)]">In sync — nothing to converge.</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/app/src/components/JobCard.tsx
+++ b/app/src/components/JobCard.tsx
@@ -1,7 +1,7 @@
-import { Clock, Play, RefreshCw, Square, Terminal } from "lucide-react"
+import { Clock, Power, RefreshCw, Terminal } from "lucide-react"
 import { Link } from "react-router-dom"
 import type { JobSummary, HealthStatus } from "@/types"
-import { useServiceAction } from "@/services/api/hooks"
+import { useServiceAction, useSetEnabled } from "@/services/api/hooks"
 import { launcherLabel } from "@/lib/labels"
 import { StackBadge } from "./StackBadge"

@@ -11,12 +11,9 @@ interface JobCardProps {
 }

 export function JobCard({ job, health }: JobCardProps) {
-  const { mutate, isPending } = useServiceAction()
-  const isDown = health?.status === "down"
-
-  const doAction = (action: string) => {
-    mutate({ name: job.id, action })
-  }
+  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">
@@ -60,32 +57,26 @@ export function JobCard({ job, health }: JobCardProps) {

        {job.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: job.id, enabled: !job.enabled })}
+              disabled={busy}
+              className={`p-1 rounded transition-colors disabled:opacity-40 ${
+                job.enabled
+                  ? "hover:bg-red-800/30 text-red-400"
+                  : "hover:bg-green-800/30 text-green-400"
+              }`}
+              title={job.enabled ? "Disable" : "Enable"}
            >
-              <RefreshCw size={14} />
+              <Power size={14} />
            </button>
-            {!isDown && (
+            {job.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: job.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>
--- a/app/src/components/ServiceCard.tsx
+++ b/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>
--- a/app/src/components/detail/ConfigPanel.tsx
+++ b/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>
--- a/app/src/components/detail/CreateDeploymentForm.tsx
+++ b/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"] })
--- a/app/src/components/detail/ServiceControls.tsx
+++ b/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>
--- a/app/src/pages/Overview.tsx
+++ b/app/src/pages/Overview.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/services/api/hooks"
 import { NodeBar } from "@/components/NodeBar"
 import { PageHeader } from "@/components/PageHeader"
+import { ConvergePanel } from "@/components/ConvergePanel"

 export function Overview() {
  const { data: services } = useServices()
@@ -96,6 +97,8 @@ export function Overview() {
          </Link>
        ))}
      </div>
+
+      <ConvergePanel />
    </div>
  )
 }
--- a/app/src/pages/ScheduledDetail.tsx
+++ b/app/src/pages/ScheduledDetail.tsx
@@ -1,6 +1,6 @@
 import { useParams } from "react-router-dom"
 import { Clock } from "lucide-react"
-import { useJob, useStatus } from "@/services/api/hooks"
+import { useJob } from "@/services/api/hooks"
 import { LogViewer } from "@/components/LogViewer"
 import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ServiceControls } from "@/components/detail/ServiceControls"
@@ -10,8 +10,6 @@ import { ConfigPanel } from "@/components/detail/ConfigPanel"
 export function ScheduledDetailPage() {
  const { name } = useParams<{ name: string }>()
  const { data: deployment, isLoading, error, refetch } = useJob(name ?? "")
-  const { data: statusResp } = useStatus()
-  const health = statusResp?.statuses.find((s) => s.id === name)

  if (isLoading) {
    return (
@@ -38,7 +36,7 @@ export function ScheduledDetailPage() {
        stack={deployment.stack}
        source={deployment.source}
      >
-        <ServiceControls name={deployment.id} health={health} />
+        <ServiceControls name={deployment.id} enabled={deployment.enabled} />
      </DetailHeader>

      {deployment.schedule && (
--- a/app/src/pages/ServiceDetail.tsx
+++ b/app/src/pages/ServiceDetail.tsx
@@ -51,7 +51,7 @@ export function ServiceDetailPage() {
        {!isStatic && (
          <div className="flex items-center gap-2">
            {health && <HealthBadge status={health.status} latency={health.latency_ms} />}
-            <ServiceControls name={deployment.id} health={health} />
+            <ServiceControls name={deployment.id} enabled={deployment.enabled} />
          </div>
        )}
      </DetailHeader>
--- a/app/src/pages/ToolDetail.tsx
+++ b/app/src/pages/ToolDetail.tsx
@@ -1,6 +1,6 @@
 import { useParams, Link } from "react-router-dom"
 import { Loader2, Package } from "lucide-react"
-import { useDeployment, useProgramAction } from "@/services/api/hooks"
+import { useDeployment, useSetEnabled } from "@/services/api/hooks"
 import { DetailHeader } from "@/components/detail/DetailHeader"
 import { ConfigPanel } from "@/components/detail/ConfigPanel"

@@ -38,9 +38,14 @@ export function ToolDetailPage() {
        <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. Its
-          live state is `installed` (on PATH), which the endpoint sets directly. */}
-      <PathLifecycle name={deployment.id} installed={deployment.installed} onDone={refetch} />
+      {/* A tool's PATH deployment: enabling converges it onto PATH, disabling
+          removes it. `installed` is the live state; `enabled` the desired one. */}
+      <PathLifecycle
+        name={deployment.id}
+        enabled={deployment.enabled}
+        installed={deployment.installed}
+        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">
@@ -63,17 +68,19 @@ export function ToolDetailPage() {
  )
 }

-/** Install/uninstall a tool on PATH — the path deployment's lifecycle. */
+/** Enable/disable a tool — convergence installs it onto PATH or removes it. */
 function PathLifecycle({
  name,
+  enabled,
  installed: installedState,
  onDone,
 }: {
  name: string
+  enabled: boolean
  installed: boolean | null
  onDone: () => void
 }) {
-  const { mutate, isPending } = useProgramAction()
+  const { mutate, isPending } = useSetEnabled()
  const installed = installedState === true
  const dot =
    installedState === true
@@ -86,21 +93,20 @@ function PathLifecycle({
      <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>
+        {!enabled && <span className="text-xs text-amber-400">disabled</span>}
        <span className="text-xs text-[var(--muted)]">manager: path</span>
      </div>
      <button
-        onClick={() =>
-          mutate({ name, action: installed ? "uninstall" : "install" }, { onSuccess: onDone })
-        }
+        onClick={() => mutate({ name, enabled: !enabled }, { 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
+          enabled
            ? "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"}
+        {enabled ? "Disable" : "Enable"}
      </button>
    </div>
  )
--- a/app/src/services/api/hooks.ts
+++ b/app/src/services/api/hooks.ts
@@ -154,6 +154,65 @@ export function useServiceAction() {
  })
 }

+export interface ApplyResult {
+  status: string
+  planned: boolean
+  changed: boolean
+  activated: string[]
+  restarted: string[]
+  deactivated: string[]
+  unchanged: string[]
+  messages: string[]
+}
+
+// Converge the running system to config. Pass a name to converge one deployment,
+// or plan:true for a dry-run diff. Handles the API restarting itself mid-apply.
+export function useApply() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ name, plan }: { name?: string; plan?: boolean } = {}) => {
+      try {
+        return await apiClient.post<ApplyResult>("/apply", { name, plan })
+      } catch (err) {
+        if (err instanceof TypeError) {
+          // Self-restart killed the connection — treat as accepted, wait + refresh.
+          await waitForApi()
+          return {
+            status: "ok", planned: false, changed: true,
+            activated: [], restarted: name ? [name] : [], deactivated: [],
+            unchanged: [], messages: [],
+          } as ApplyResult
+        }
+        throw err
+      }
+    },
+    onSuccess: (data) => {
+      if (!data.planned) qc.invalidateQueries()
+    },
+  })
+}
+
+// Set a deployment's desired on/off state, then converge it. One click = "make it
+// so": edit config (declarative), then apply that single deployment.
+export function useSetEnabled() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ name, enabled }: { name: string; enabled: boolean }) => {
+      await apiClient.put(`/config/deployments/${name}/enabled`, { enabled })
+      try {
+        return await apiClient.post<ApplyResult>("/apply", { name })
+      } catch (err) {
+        if (err instanceof TypeError) {
+          await waitForApi()
+          return null
+        }
+        throw err
+      }
+    },
+    onSuccess: () => qc.invalidateQueries(),
+  })
+}
+
 export function useProgramAction() {
  const qc = useQueryClient()
  return useMutation({
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -19,6 +19,7 @@ export interface ServiceSummary {
  systemd: SystemdInfo | null
  program: string | null
  source: string | null
+  enabled: boolean // declared desired state; `apply` converges to it
  node: string | null
 }

@@ -37,6 +38,7 @@ export interface JobSummary {
  systemd: SystemdInfo | null
  program: string | null
  source: string | null
+  enabled: boolean // declared desired state; `apply` converges to it
  node: string | null
 }

@@ -98,6 +100,7 @@ export interface DeploymentSummary {
  schedule: string | null
  installed: boolean | null
  active: boolean | null
+  enabled: boolean // declared desired state; `apply` converges to it
  node: string | null
 }