spinuptui 0.19.0

package/src/ui/views/Forgotten.tsx

@@ -0,0 +1,165 @@
+// "Needs a local copy" report — Phase 4a (the forgotten report).
+//
+// The inverse of discovery (`S`, which finds copies that exist on disk): this
+// lists WordPress/Bedrock sites you have NO usable local copy for — either never
+// linked, or linked to a path that's gone missing. It's the direct answer to the
+// original pain ("I forget which managed sites have a local copy and miss
+// composer updates"). Read-only; from a row you jump straight into linking it.
+//
+// Defaults to the ACTIONABLE set (sites with pending updates, plus missing-path
+// links) so it's a short to-do list rather than a dump of every unlinked site;
+// `a` toggles the full list. Opened with `f` (Stacks). Drift (git ahead/behind,
+// PHP mismatch) is a later pass.
+
+import { useMemo, useState } from "react"
+import { useKeyboard, useTerminalDimensions } from "@opentui/react"
+import { theme, statusColor, statusDot } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { effectiveStack, stackColor, stackTag, type Stack } from "../../lib/stack.ts"
+import { resolveLocalLink } from "../../lib/local.ts"
+import { Panel } from "../components.tsx"
+import { List, moveSelection } from "../List.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import type { Site } from "../../api/types.ts"
+
+interface Entry {
+  site: Site
+  updates: number
+  missing: boolean // linked, but the path is gone
+}
+
+// Stack filter options the report can cycle through (← / →). null = all stacks.
+const STACK_FILTERS: (Stack | null)[] = [null, "Standard WP", "Bedrock", "Non-WP"]
+
+export function Forgotten() {
+  const { sites, localLinks, probes, setForgottenOpen, setLocalLinkSite, forgottenStack, setLinkReturnToForgotten } = useStore()
+  const { height } = useTerminalDimensions()
+  // Default shows every site in the filter without a local copy; this trims to
+  // the "needs attention" subset (pending updates or a missing path).
+  const [needsAttentionOnly, setNeedsAttentionOnly] = useState(false)
+  const [index, setIndex] = useState(0)
+  // Stack filter is adjustable in-report (← / →), seeded from the Stacks group
+  // that was selected when opened (Non-WP / no WP group → "All").
+  const [stackFilter, setStackFilter] = useState<Stack | null>(forgottenStack)
+
+  // WP/Bedrock sites without a usable local copy.
+  const all = useMemo<Entry[]>(() => {
+    const out: Entry[] = []
+    for (const s of sites) {
+      const stack = effectiveStack(s, probes.get(s.id)?.result.kind)
+      if (stackFilter && stack !== stackFilter) continue // active stack filter (adjustable)
+      const link = localLinks.get(s.id)
+      let missing = false
+      if (link) {
+        if (resolveLocalLink(link).exists) continue // has a copy → not forgotten
+        missing = true
+      }
+      const updates = (s.wp_plugin_updates || 0) + (s.wp_theme_updates || 0) + (s.wp_core_update ? 1 : 0)
+      out.push({ site: s, updates, missing })
+    }
+    // Alphabetical by domain (consistent with the discovery list).
+    out.sort((a, b) => a.site.domain.localeCompare(b.site.domain))
+    return out
+  }, [sites, localLinks, probes, stackFilter])
+
+  const actionable = useMemo(() => all.filter((e) => e.updates > 0 || e.missing), [all])
+  const shown = needsAttentionOnly ? actionable : all
+  const safeIndex = Math.min(index, Math.max(0, shown.length - 1))
+
+  const close = () => setForgottenOpen(false)
+
+  useKeyboard((key) => {
+    const raw = key.name ?? ""
+    const name = key.shift && raw.length === 1 ? raw.toUpperCase() : raw
+    switch (name) {
+      case "escape":
+      case "q":
+        return close()
+      case "up":
+      case "k":
+        return setIndex((i) => moveSelection(i, -1, shown.length))
+      case "down":
+      case "j":
+        return setIndex((i) => moveSelection(i, 1, shown.length))
+      case "left":
+      case "right": {
+        const dir = name === "right" ? 1 : -1
+        const i = STACK_FILTERS.findIndex((s) => s === stackFilter)
+        setStackFilter(STACK_FILTERS[(i + dir + STACK_FILTERS.length) % STACK_FILTERS.length])
+        return setIndex(0)
+      }
+      case "a":
+        setNeedsAttentionOnly((v) => !v)
+        return setIndex(0)
+      case "L":
+      case "return": {
+        const e = shown[safeIndex]
+        if (e) {
+          close()
+          setLinkReturnToForgotten(true) // come back here when the link overlay closes
+          setLocalLinkSite(e.site) // jump straight into linking it
+        }
+        return
+      }
+    }
+  })
+
+  const listRows = Math.max(3, height - 5)
+
+  return (
+    <box style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", flexDirection: "column", backgroundColor: theme.bg, zIndex: 215 }}>
+      <box style={{ flexDirection: "row", height: 1, backgroundColor: theme.bgAlt, paddingLeft: 1, paddingRight: 1, alignItems: "center" }}>
+        <text content={`📦 Needs a local copy · ${stackFilter ?? "All"}  `} fg={theme.brand} wrapMode="none" style={{ flexShrink: 0 }} />
+        <text content={needsAttentionOnly ? `${actionable.length} need attention` : `${all.length} without a local copy`} fg={theme.textFaint} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+      </box>
+
+      <box style={{ flexGrow: 1, flexDirection: "column", padding: 1 }}>
+        {shown.length === 0 ? (
+          <text
+            content={
+              all.length === 0
+                ? "✓ Every site here has a local copy."
+                : "✓ Nothing needs attention — press a to show all without a local copy."
+            }
+            fg={theme.good}
+            wrapMode="none"
+          />
+        ) : (
+          <List
+            items={shown}
+            selectedIndex={safeIndex}
+            viewportRows={listRows}
+            focused
+            keyFor={(e) => e.site.id}
+            emptyText="—"
+            renderRow={(e, selected) => {
+              const stack = effectiveStack(e.site, probes.get(e.site.id)?.result.kind)
+              return (
+                <>
+                  <text content={statusDot(e.site.status) + " "} fg={statusColor(e.site.status)} style={{ flexShrink: 0 }} />
+                  <text content={truncate(e.site.domain, 44)} fg={selected ? theme.text : theme.textDim} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+                  {e.missing && <text content="missing copy " fg={selected ? theme.text : theme.bad} style={{ flexShrink: 0 }} />}
+                  {e.updates > 0 && <text content={`↑${e.updates} `} fg={selected ? theme.text : theme.warn} style={{ flexShrink: 0 }} />}
+                  <text content={stackTag(stack) + " "} fg={stackColor(stack, selected)} style={{ flexShrink: 0 }} />
+                </>
+              )
+            }}
+          />
+        )}
+      </box>
+
+      <StatusBar
+        hints={[
+          { key: "↑↓/jk", label: "select" },
+          { key: "←→", label: "stack" },
+          { key: "L/⏎", label: "link this site" },
+          { key: "a", label: needsAttentionOnly ? "show all" : "needs attention only" },
+          { key: "esc", label: "close" },
+        ]}
+        showGlobal={false}
+      />
+    </box>
+  )
+}

package/src/ui/views/GrantKey.tsx

@@ -0,0 +1,504 @@
+// Grant SSH key overlay — a privileged write-over-SSH on a sudo-connected server.
+//
+// Opened with `K` on a selected site (Browser). Pick which key(s) to deploy — your
+// PERSONAL key(s) (so you can SSH/SFTP as yourself) and/or Spinup's dedicated
+// `spinup-tui` MACHINE key (for unattended automation) — choose the scope (just
+// this site, or every site on the server), confirm, and grant via the server's
+// SUDO session. Requires sudo to be connected first (press `S` on the server). The
+// grant runs in the store (`startGrantKey`), so closing the modal doesn't abandon it.
+// See docs/2026-06-26_sudo-ssh-key-provisioning-spec.md.
+
+import { useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel, Centered, Spinner } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore, isKeyGrantInFlight } from "../store.tsx"
+import { ensureSpinupKey, listPersonalKeys, buildGrantScript, buildRevokeScript, keyBody, type GrantableKey } from "../../lib/ssh.ts"
+import { moveSelection } from "../List.tsx"
+import type { Site } from "../../api/types.ts"
+
+type Phase = "disconnected" | "loading" | "pick" | "scope" | "confirm" | "running" | "done" | "error"
+
+export function GrantKey() {
+  const store = useStore()
+  const {
+    grantKeySite: site,
+    setGrantKeySite,
+    serverById,
+    sitesForServer,
+    keyGrants,
+    startGrantKey,
+    startRevokeKey,
+    clearGrantKey,
+    preferredGrantKeys,
+    setPreferredGrantKeys,
+    grantedKeys,
+    isSudoConnected,
+    sudoUserFor,
+    setSudoConnectServer,
+  } = store
+
+  const server = serverById(site?.server_id)
+  const connected = server ? isSudoConnected(server.id) : false
+  const sudoUser = server ? sudoUserFor(server.id) : undefined
+
+  // Sites on this server that can receive a key (have a site_user). The anchor
+  // site is always a valid single target.
+  const serverSites = server ? sitesForServer(server.id).filter((s) => s.site_user) : []
+  const canScope = serverSites.length > 1
+
+  const [phase, setPhase] = useState<Phase>(() => {
+    if (site && keyGrants.has(site.id)) return "running"
+    return connected ? "loading" : "disconnected"
+  })
+  const [keys, setKeys] = useState<GrantableKey[]>([])
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [index, setIndex] = useState(0)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [scope, setScope] = useState<"site" | "server">("site")
+  const [scopeIndex, setScopeIndex] = useState(0)
+  // "grant" adds the selected keys; "revoke" removes them. Toggled on the pick screen.
+  const [mode, setMode] = useState<"grant" | "revoke">("grant")
+
+  // Resolve the grantable keys once (machine key + discovered personal keys).
+  useEffect(() => {
+    if (phase !== "loading") return
+    let cancelled = false
+    void Promise.all([ensureSpinupKey(), listPersonalKeys()])
+      .then(([machine, personal]) => {
+        if (cancelled) return
+        const machineKey: GrantableKey = { id: keyBody(machine.pub), kind: "machine", label: machine.comment, line: machine.pub, source: "spinup" }
+        const list = [...personal.filter((p) => p.id !== machineKey.id), machineKey]
+        setKeys(list)
+        const remembered = list.filter((k) => preferredGrantKeys.includes(k.id)).map((k) => k.id)
+        setSelected(new Set(remembered.length > 0 ? remembered : [personal[0]?.id ?? machineKey.id]))
+        setPhase("pick")
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setKeys([])
+          setLoadError((err as Error).message)
+          setPhase("error")
+        }
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [phase])
+
+  const selectedKeys = keys.filter((k) => selected.has(k.id))
+  const targetSites: Site[] = scope === "server" ? serverSites : site ? [site] : []
+  // Keys Spinup has recorded as granted on the anchor site (for revoke defaults +
+  // the "on site" annotation).
+  const grantedForSite = site ? grantedKeys.get(site.id) ?? new Set<string>() : new Set<string>()
+
+  // Switch grant/revoke, re-defaulting the selection: grant → remembered keys;
+  // revoke → the keys recorded as granted on this site.
+  const switchMode = (m: "grant" | "revoke") => {
+    setMode(m)
+    if (m === "revoke") {
+      setSelected(new Set(keys.filter((k) => grantedForSite.has(k.id)).map((k) => k.id)))
+    } else {
+      const remembered = keys.filter((k) => preferredGrantKeys.includes(k.id)).map((k) => k.id)
+      setSelected(new Set(remembered.length ? remembered : keys[0] ? [keys[0].id] : []))
+    }
+  }
+
+  // Batch progress over the target sites.
+  const targetProgress = targetSites.map((s) => keyGrants.get(s.id))
+  const doneCount = targetProgress.filter((p) => p?.status === "done").length
+  const failedSites = targetSites.filter((s) => keyGrants.get(s.id)?.status === "error")
+  const settledCount = doneCount + failedSites.length
+  const allSettled = targetSites.length > 0 && settledCount === targetSites.length
+
+  const dp: Phase = phase !== "running" ? phase : allSettled ? "done" : "running"
+
+  const close = () => {
+    // Drop settled markers for the targets so they don't linger after close.
+    if (phase === "running" && allSettled) for (const s of targetSites) clearGrantKey(s.id)
+    setGrantKeySite(null)
+  }
+
+  const fire = (sites: Site[]) => {
+    if (sites.length > 0 && selectedKeys.length > 0) {
+      const lines = selectedKeys.map((k) => k.line)
+      if (mode === "grant") {
+        startGrantKey(sites, lines)
+        setPreferredGrantKeys(selectedKeys.map((k) => k.id)) // remember the choice
+      } else {
+        startRevokeKey(sites, lines)
+      }
+    }
+    setPhase("running")
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+
+    if (dp === "disconnected") {
+      if (name === "s" && server) {
+        setGrantKeySite(null)
+        setSudoConnectServer(server)
+      }
+      return
+    }
+
+    if (dp === "pick") {
+      switch (name) {
+        case "up":
+        case "k":
+          return setIndex((i) => moveSelection(i, -1, keys.length))
+        case "down":
+        case "j":
+          return setIndex((i) => moveSelection(i, 1, keys.length))
+        case "space": {
+          const k = keys[index]
+          if (!k) return
+          return setSelected((prev) => {
+            const next = new Set(prev)
+            if (next.has(k.id)) next.delete(k.id)
+            else next.add(k.id)
+            return next
+          })
+        }
+        case "a":
+          return switchMode("grant")
+        case "r":
+          return switchMode("revoke")
+        case "return":
+        case "right":
+        case "l":
+          if (selectedKeys.length === 0) return
+          return setPhase(canScope ? "scope" : "confirm")
+      }
+      return
+    }
+
+    if (dp === "scope") {
+      switch (name) {
+        case "up":
+        case "k":
+          setScopeIndex(0)
+          return setScope("site")
+        case "down":
+        case "j":
+          setScopeIndex(1)
+          return setScope("server")
+        case "return":
+        case "right":
+        case "l":
+          return setPhase("confirm")
+        case "left":
+        case "h":
+          return setPhase("pick")
+      }
+      return
+    }
+
+    if (dp === "confirm") {
+      if (name === "y") return fire(targetSites)
+      if (name === "left" || name === "h") return setPhase(canScope ? "scope" : "pick")
+      return
+    }
+
+    if (dp === "done") {
+      if (name === "r" && failedSites.length > 0) return fire(failedSites)
+      return
+    }
+
+    if (dp === "error") {
+      if (name === "r") {
+        setLoadError(null)
+        return setPhase("loading")
+      }
+      return
+    }
+  })
+
+  if (!site) return null
+
+  const siteUser = site.site_user ?? "(no site user)"
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        backgroundColor: theme.bg,
+        zIndex: 210,
+      }}
+    >
+      {/* Title bar */}
+      <box style={{ flexDirection: "row", height: 1, backgroundColor: theme.bgAlt, paddingLeft: 1, paddingRight: 1, alignItems: "center" }}>
+        <text content={`🔑 ${mode === "revoke" ? "Remove" : "Grant"} SSH key  `} fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 40)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+        <text content={connected ? "● " : "○ "} fg={connected ? theme.good : theme.textFaint} style={{ flexShrink: 0 }} />
+        <text content={server?.name ?? "—"} fg={theme.textFaint} wrapMode="none" style={{ flexShrink: 0 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function renderBody() {
+    if (dp === "disconnected") {
+      return (
+        <Panel title=" Sudo not connected " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="○ Sudo isn't connected on " fg={theme.warn} wrapMode="none" />
+              <text content={server?.name ?? "this server"} fg={theme.accent} wrapMode="none" />
+            </box>
+            <box style={{ height: 1 }} />
+            <text content="Why: each site runs as its own Linux user, and its SSH" fg={theme.textDim} wrapMode="none" />
+            <text content="keys live in that user's authorized_keys. Writing another" fg={theme.textDim} wrapMode="none" />
+            <text content="user's file needs root — so SpinupTUI logs in as the server's" fg={theme.textDim} wrapMode="none" />
+            <text content="sudo user. (The SpinupWP API can't manage SSH keys.)" fg={theme.textDim} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Press s to connect sudo now (or S on the server), then" fg={theme.textFaint} wrapMode="none" />
+            <text content="press K on the site again." fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "loading") {
+      return (
+        <box style={{ flexDirection: "row" }}>
+          <Spinner />
+          <text content="  Finding your SSH keys…" fg={theme.textDim} />
+        </box>
+      )
+    }
+
+    if (dp === "pick") {
+      const revoke = mode === "revoke"
+      return (
+        <Panel title={revoke ? " Choose keys to remove " : " Choose keys to grant "} active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content={revoke ? "✕ Remove mode — pick key(s) to remove" : "＋ Grant mode — pick key(s) to grant"} fg={revoke ? theme.bad : theme.good} wrapMode="none" />
+              <box style={{ flexGrow: 1 }} />
+              <text content="a/r switch" fg={theme.textFaint} wrapMode="none" />
+            </box>
+            <box style={{ height: 1 }} />
+            {keys.map((k, i) => {
+              const sel = i === index
+              const checked = selected.has(k.id)
+              const onSite = grantedForSite.has(k.id)
+              const tag = k.kind === "machine" ? "machine" : "personal"
+              const tagFg = sel ? theme.text : k.kind === "machine" ? theme.brand : theme.accent
+              const boxFg = revoke ? theme.bad : theme.good
+              return (
+                <box key={k.id} style={{ flexDirection: "row", height: 1, backgroundColor: sel ? theme.selectedBg : undefined }}>
+                  <text content={(sel ? "❯ " : "  ") + (checked ? "[x] " : "[ ] ")} fg={checked ? boxFg : theme.textDim} style={{ flexShrink: 0 }} />
+                  <text content={truncate(k.label || k.source, 38)} fg={sel ? theme.text : theme.textDim} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+                  <text content={onSite ? "✓on site " : "         "} fg={sel ? theme.text : theme.good} style={{ flexShrink: 0 }} wrapMode="none" />
+                  <text content={tag} fg={tagFg} style={{ flexShrink: 0 }} />
+                </box>
+              )
+            })}
+            <box style={{ height: 1 }} />
+            {revoke ? (
+              <>
+                <text content="Removes the checked key(s) from authorized_keys. Other keys" fg={theme.textFaint} wrapMode="none" />
+                <text content="(incl. SpinupWP-managed ones) are left untouched." fg={theme.textFaint} wrapMode="none" />
+              </>
+            ) : (
+              <>
+                <text content="Personal keys log you in as yourself; the machine key is" fg={theme.textFaint} wrapMode="none" />
+                <text content="SpinupTUI's own identity for unattended automation." fg={theme.textFaint} wrapMode="none" />
+              </>
+            )}
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "scope") {
+      const opts = [
+        { label: "Just this site", sub: site!.domain },
+        { label: `All ${serverSites.length} sites on this server`, sub: server?.name ?? "" },
+      ]
+      return (
+        <Panel title={mode === "revoke" ? " Remove from " : " Grant to "} active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            {opts.map((o, i) => {
+              const sel = i === scopeIndex
+              return (
+                <box key={i} style={{ flexDirection: "row", height: 1, backgroundColor: sel ? theme.selectedBg : undefined }}>
+                  <text content={(sel ? "❯ " : "  ") + (sel ? "(•) " : "( ) ")} fg={sel ? theme.good : theme.textDim} style={{ flexShrink: 0 }} />
+                  <text content={o.label} fg={sel ? theme.text : theme.textDim} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+                  <text content={truncate(o.sub, 26) + " "} fg={sel ? theme.text : theme.textFaint} style={{ flexShrink: 0 }} wrapMode="none" />
+                </box>
+              )
+            })}
+            <box style={{ height: 1 }} />
+            <text content="All sites: the same idempotent append runs on each — keys" fg={theme.textFaint} wrapMode="none" />
+            <text content="already present are skipped." fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "confirm") {
+      const revoke = mode === "revoke"
+      const n = targetSites.length
+      const single = n === 1
+      const displayLines = selectedKeys.map((k) => `…${k.kind === "machine" ? "spinup-tui" : "ed25519"}… ${k.label}`)
+      const script = single ? (revoke ? buildRevokeScript(siteUser, targetSites[0].domain, displayLines) : buildGrantScript(siteUser, targetSites[0].domain, displayLines)) : null
+      return (
+        <Panel title={revoke ? " Confirm — remove keys " : " Confirm — privileged write "} active>
+          <box style={{ flexDirection: "column", width: 72, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content={`${revoke ? "Remove" : "Add"} ${selectedKeys.length} key${selectedKeys.length === 1 ? "" : "s"} ${revoke ? "from" : "to"} `} fg={theme.text} wrapMode="none" />
+              <text content={single ? `${siteUser}@${targetSites[0].domain}` : `${n} sites on ${server?.name ?? ""}`} fg={theme.accent} wrapMode="none" />
+            </box>
+            <box style={{ flexDirection: "row" }}>
+              <text content="via sudo as " fg={theme.textDim} wrapMode="none" />
+              <text content={sudoUser ?? "—"} fg={theme.good} wrapMode="none" />
+            </box>
+            {selectedKeys.map((k) => (
+              <box key={k.id} style={{ flexDirection: "row" }}>
+                <text content="  • " fg={theme.textFaint} wrapMode="none" />
+                <text content={truncate(k.label || k.source, 44)} fg={theme.textDim} wrapMode="none" />
+                <text content={`  (${k.kind})`} fg={k.kind === "machine" ? theme.brand : theme.accent} wrapMode="none" />
+              </box>
+            ))}
+            <box style={{ height: 1 }} />
+            {single ? (
+              <>
+                <text content={`Runs on the server (idempotent — re-running is a no-op):`} fg={theme.textFaint} wrapMode="none" />
+                <box style={{ flexDirection: "column", backgroundColor: theme.bgAlt, paddingLeft: 1, paddingRight: 1 }}>
+                  {script!.split("\n").map((line, i) => (
+                    <text key={i} content={line} fg={theme.textDim} wrapMode="none" />
+                  ))}
+                </box>
+              </>
+            ) : (
+              <text content={`The same idempotent ${revoke ? "removal" : "append"} runs on each of the ${n} sites.`} fg={theme.textFaint} wrapMode="none" />
+            )}
+            <box style={{ height: 1 }} />
+            <text content={revoke ? "This removes SSH access for those keys. Press y to continue." : "This is SpinupTUI's most powerful write. Press y to continue."} fg={theme.warn} wrapMode="none" />
+            <text content="y confirm · ← back · Esc cancel" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "running") {
+      const revoke = mode === "revoke"
+      const n = targetSites.length
+      return (
+        <Panel title={revoke ? " Removing " : " Granting "} active>
+          <box style={{ flexDirection: "column", width: 64, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <Spinner />
+              <text content={`  ${revoke ? "Removing from" : "Granting to"} ${n} site${n === 1 ? "" : "s"} — ${settledCount}/${n} done`} fg={theme.textDim} wrapMode="none" />
+            </box>
+            {failedSites.length > 0 && (
+              <text content={`${doneCount} ok · ${failedSites.length} failed so far`} fg={theme.textFaint} wrapMode="none" />
+            )}
+            <box style={{ height: 1 }} />
+            <text content="You can press Esc — it keeps running in the background." fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "done") {
+      const n = targetSites.length
+      return (
+        <Panel title={failedSites.length > 0 ? " Done — with errors " : " Done "} active>
+          <box style={{ flexDirection: "column", width: 70, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content={failedSites.length > 0 ? "⚠ " : "✓ "} fg={failedSites.length > 0 ? theme.warn : theme.good} />
+              <text content={`${mode === "revoke" ? "Removed from" : "Granted on"} ${doneCount} of ${n} site${n === 1 ? "" : "s"}`} fg={theme.text} wrapMode="none" />
+            </box>
+            {failedSites.length > 0 && (
+              <>
+                <box style={{ height: 1 }} />
+                <text content="Failed:" fg={theme.bad} wrapMode="none" />
+                {failedSites.slice(0, 6).map((s) => (
+                  <box key={s.id} style={{ flexDirection: "row" }}>
+                    <text content={`  ✕ ${truncate(s.domain, 30)}  `} fg={theme.bad} wrapMode="none" />
+                    <text content={truncate(keyGrants.get(s.id)?.error ?? "", 30)} fg={theme.textFaint} wrapMode="none" />
+                  </box>
+                ))}
+                {failedSites.length > 6 && <text content={`  …${failedSites.length - 6} more`} fg={theme.textFaint} wrapMode="none" />}
+              </>
+            )}
+            <box style={{ height: 1 }} />
+            <text content={failedSites.length > 0 ? "r retry the failed · Esc close" : "Esc to close"} fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    // error (loading keys failed)
+    return (
+      <Panel title=" Grant failed " active>
+        <box style={{ flexDirection: "column", width: 72, paddingTop: 1, paddingBottom: 1 }}>
+          <text content={`✕ ${loadError ?? "Something went wrong."}`} fg={theme.bad} wrapMode="none" />
+          <box style={{ height: 1 }} />
+          <text content="r retry · Esc close" fg={theme.textFaint} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    switch (dp) {
+      case "disconnected":
+        return [
+          { key: "s", label: "connect sudo" },
+          { key: "esc", label: "close" },
+        ]
+      case "pick":
+        return [
+          { key: "↑↓", label: "key" },
+          { key: "space", label: "toggle" },
+          { key: "a/r", label: mode === "revoke" ? "remove mode" : "grant mode" },
+          { key: "⏎", label: canScope ? "scope" : "next" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "scope":
+        return [
+          { key: "↑↓", label: "scope" },
+          { key: "⏎", label: "next" },
+          { key: "←", label: "back" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "confirm":
+        return [
+          { key: "y", label: "confirm" },
+          { key: "←", label: "back" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "done":
+        return failedSites.length > 0
+          ? [
+              { key: "r", label: "retry failed" },
+              { key: "esc", label: "close" },
+            ]
+          : [{ key: "esc", label: "close" }]
+      case "error":
+        return [
+          { key: "r", label: "retry" },
+          { key: "esc", label: "close" },
+        ]
+      default:
+        return [{ key: "esc", label: "close" }]
+    }
+  }
+}