spinuptui 1.3.0-alpha.3 → 1.3.0-alpha.5

package/src/ui/App.tsx

@@ -43,10 +43,12 @@ import { DnsRecords } from "./views/DnsRecords.tsx"
 import { KumaSite } from "./views/KumaSite.tsx"
 import { Accounts } from "./views/Accounts.tsx"
 import { Modules } from "./views/Modules.tsx"
+import { SentinelOverlay } from "./views/SentinelSetup.tsx"
 import { BeaconSetup } from "./views/BeaconSetup.tsx"
 import { SchedulerInstall } from "./views/SchedulerInstall.tsx"
 import { HomeSync } from "./views/HomeSync.tsx"
 import { HeartbeatSetup } from "./views/HeartbeatSetup.tsx"
+import { ListenerSetup } from "./views/ListenerSetup.tsx"
 
 const MIN_SPLASH_MS = 1200
 
@@ -98,8 +100,10 @@ export function App() {
     store.kumaSite !== null ||
     store.beaconSetupOpen ||
     store.schedulerInstallOpen ||
+    store.sentinelOverlay !== null ||
     store.homeSyncOpen ||
     store.heartbeatSetupOpen ||
+    store.listenerSetupOpen ||
     store.slugPrompt !== null
   useEffect(() => {
     store.setOverlayOpen(overlayActive)
@@ -222,8 +226,10 @@ export function App() {
     // Beacon's guided setup (Modules tab) owns the keyboard while open.
     if (store.beaconSetupOpen) return
     if (store.schedulerInstallOpen) return
+    if (store.sentinelOverlay) return
     if (store.homeSyncOpen) return
     if (store.heartbeatSetupOpen) return
+    if (store.listenerSetupOpen) return
 
     // A (Shift+a): the Accounts overlay — the header advertises it from every tab.
     if (key.shift && key.name === "a") return setShowAccounts(true)
@@ -314,8 +320,10 @@ export function App() {
       {store.kumaSite && <KumaSite />}
       {store.beaconSetupOpen && <BeaconSetup />}
       {store.schedulerInstallOpen && <SchedulerInstall />}
+      {store.sentinelOverlay && <SentinelOverlay />}
       {store.homeSyncOpen && <HomeSync />}
       {store.heartbeatSetupOpen && <HeartbeatSetup />}
+      {store.listenerSetupOpen && <ListenerSetup />}
       {showAccounts && <Accounts onClose={() => setShowAccounts(false)} />}
       {store.slugPrompt && <AccountSlugPrompt />}
       <ToastStack />

package/src/ui/store.tsx

@@ -751,12 +751,17 @@ interface StoreValue extends DataState {
   // Scheduler's install plan + confirm overlay, opened from the Modules tab.
   schedulerInstallOpen: boolean
   setSchedulerInstallOpen: (v: boolean) => void
+  sentinelOverlay: "setup" | "digest" | null
+  setSentinelOverlay: (v: "setup" | "digest" | null) => void
   // The SpinupTUI folder: where it is, and sharing it across machines (Modules tab).
   homeSyncOpen: boolean
   setHomeSyncOpen: (v: boolean) => void
   // The station heartbeat (Kuma push monitor) overlay, from the Modules tab.
   heartbeatSetupOpen: boolean
   setHeartbeatSetupOpen: (v: boolean) => void
+  // Beacon's listener (install / status / remove) overlay, from the Modules tab.
+  listenerSetupOpen: boolean
+  setListenerSetupOpen: (v: boolean) => void
   // Whether the "needs a local copy" (forgotten) report overlay is open, and an
   // optional stack filter (set from the selected Stacks group when opened).
   forgottenOpen: boolean
@@ -1154,8 +1159,10 @@ export function StoreProvider({ children }: { children: ReactNode }) {
   const [discoverOpen, setDiscoverOpen] = useState(false)
   const [beaconSetupOpen, setBeaconSetupOpen] = useState(false)
   const [schedulerInstallOpen, setSchedulerInstallOpen] = useState(false)
+  const [sentinelOverlay, setSentinelOverlay] = useState<"setup" | "digest" | null>(null)
   const [homeSyncOpen, setHomeSyncOpen] = useState(false)
   const [heartbeatSetupOpen, setHeartbeatSetupOpen] = useState(false)
+  const [listenerSetupOpen, setListenerSetupOpen] = useState(false)
   const [forgottenOpen, setForgottenOpen] = useState(false)
   const [forgottenStack, setForgottenStack] = useState<Stack | null>(null)
   const [linkReturnToForgotten, setLinkReturnToForgotten] = useState(false)
@@ -4616,10 +4623,14 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     setBeaconSetupOpen,
     schedulerInstallOpen,
     setSchedulerInstallOpen,
+    sentinelOverlay,
+    setSentinelOverlay,
     homeSyncOpen,
     setHomeSyncOpen,
     heartbeatSetupOpen,
     setHeartbeatSetupOpen,
+    listenerSetupOpen,
+    setListenerSetupOpen,
     forgottenOpen,
     setForgottenOpen,
     forgottenStack,

package/src/ui/views/BeaconSetup.tsx

@@ -10,6 +10,7 @@ import { Panel, Centered, Spinner, SecretInput } from "../components.tsx"
 import { StatusBar } from "../StatusBar.tsx"
 import { useStore } from "../store.tsx"
 import { openUrl } from "../../lib/open.ts"
+import { pauseListener } from "../../lib/beaconListenInstall.ts"
 import {
   BOTFATHER_STEPS,
   BOTFATHER_URL,
@@ -65,13 +66,16 @@ export function BeaconSetup() {
     abort.current = ctrl
     setChat(null)
     setPhase("waiting")
-    void discoverChat(tok, { signal: ctrl.signal }).then((r) => {
-      if (ctrl.signal.aborted) return
-      if (r.ok) {
-        setChat(r.chat)
-        setPhase("found")
-      } else fail(r.message, "waiting")
-    })
+    // Telegram gives a bot's messages to one reader: stop the listener meanwhile.
+    void pauseListener()
+      .then((resume) => discoverChat(tok, { signal: ctrl.signal }).finally(resume))
+      .then((r) => {
+        if (ctrl.signal.aborted) return
+        if (r.ok) {
+          setChat(r.chat)
+          setPhase("found")
+        } else fail(r.message, "waiting")
+      })
   }
 
   const submitToken = () => {

package/src/ui/views/ListenerSetup.tsx

@@ -0,0 +1,205 @@
+// Beacon's listener overlay (Modules tab, l on Beacon). Not installed: shows
+// exactly what `spinuptui beacon listener install --plan` would write and run,
+// and applies it on `y`; applying ends when the listener has started and said
+// hello on the pager. Installed: shows whether it's answering, and removes it on
+// `x` then `y`.
+
+import { useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel, Spinner, Centered } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import {
+  applyListenerInstall,
+  applyListenerUninstall,
+  binHasListener,
+  listenerHealth,
+  NO_LISTENER,
+  planListenerInstall,
+  planListenerUninstall,
+  type ListenerApplyResult,
+  type ListenerPlanResult,
+} from "../../lib/beaconListenInstall.ts"
+
+type Phase = "confirm" | "applying" | "done" | "error" | "installed" | "confirm-remove" | "removed"
+
+export function ListenerSetup() {
+  const { setListenerSetupOpen } = useStore()
+  const [health] = useState(() => listenerHealth())
+  const [plan, setPlan] = useState<ListenerPlanResult>(() => planListenerInstall())
+  const [phase, setPhase] = useState<Phase>(health ? "installed" : plan.ok ? "confirm" : "error")
+  // Same refusal as `listener install --plan`, checked once on open.
+  useEffect(() => {
+    if (!plan.ok) return
+    void binHasListener(plan).then((has) => {
+      if (has) return
+      setPlan(NO_LISTENER)
+      setPhase((p) => (p === "confirm" ? "error" : p))
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  const [stage, setStage] = useState("")
+  const [result, setResult] = useState<ListenerApplyResult | null>(null)
+  const [live, setLive] = useState(true)
+  useEffect(() => () => setLive(false), [])
+
+  const close = () => setListenerSetupOpen(false)
+
+  const apply = () => {
+    if (!plan.ok) return
+    setPhase("applying")
+    void applyListenerInstall(plan, (s) => live && setStage(s)).then((r) => {
+      setResult(r)
+      setPhase(r.ok ? "done" : "error")
+    })
+  }
+
+  const remove = () => {
+    setPhase("applying")
+    setStage("removing the listener")
+    void applyListenerUninstall(planListenerUninstall()).then(() => setPhase("removed"))
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (phase === "applying") return
+    if (name === "escape" || name === "q") return phase === "confirm-remove" ? setPhase("installed") : close()
+    if (phase === "confirm" && name === "y" && plan.ok) return apply()
+    if (phase === "installed" && name === "x") return setPhase("confirm-remove")
+    if (phase === "installed" && name === "r" && plan.ok) return setPhase("confirm")
+    if (phase === "confirm-remove" && name === "y") return remove()
+    if (phase === "error" && name === "r" && plan.ok) return setPhase("confirm")
+  })
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        backgroundColor: theme.bg,
+        zIndex: 210,
+      }}
+    >
+      <box style={{ flexDirection: "row", height: 1, backgroundColor: theme.bgAlt, paddingLeft: 1, paddingRight: 1, alignItems: "center" }}>
+        <text content="Beacon  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content="let the pager answer you" fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+      <Centered>{body()}</Centered>
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function body() {
+    if (phase === "applying") {
+      return (
+        <box style={{ flexDirection: "column", alignItems: "center" }}>
+          <box style={{ flexDirection: "row" }}>
+            <Spinner />
+            <text content={`  ${stage || "Installing…"}`} fg={theme.textDim} wrapMode="none" />
+          </box>
+          <box style={{ height: 1 }} />
+          <text content="Install finishes when the listener has started and said hello on your pager." fg={theme.textFaint} wrapMode="none" />
+        </box>
+      )
+    }
+    if (phase === "removed") {
+      return (
+        <Panel title=" Removed " active>
+          <box style={{ flexDirection: "column", width: 70, paddingTop: 1, paddingBottom: 1 }}>
+            <text content="✓ The listener is gone. The pager still sends; it just won't answer." fg={theme.good} />
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "installed" || phase === "confirm-remove") {
+      const h = health!
+      return (
+        <Panel title=" Beacon's listener " active>
+          <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={`${h.ok ? "✓" : "✗"} ${truncate(h.detail, 72)}`} fg={h.ok ? theme.good : theme.bad} />
+            <box style={{ height: 1 }} />
+            <text content="Send these to your bot in Telegram:" fg={theme.textDim} />
+            <text content="  /jobs  this station's scheduled jobs, with Extend on the ones expiring soon" fg={theme.accent} wrapMode="none" />
+            <text content="  /help  everything it answers" fg={theme.accent} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            {phase === "confirm-remove" ? (
+              <text content="Remove the listener? y to remove · Esc to keep it" fg={theme.warn} wrapMode="none" />
+            ) : (
+              <text content={`${plan.ok ? "r reinstall (repairs the unit)  ·  " : ""}x remove  ·  Esc to close`} fg={theme.textFaint} wrapMode="none" />
+            )}
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "done" && result?.ok) {
+      return (
+        <Panel title=" Installed " active>
+          <box style={{ flexDirection: "column", width: 70, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={`✓ ${result.label} is listening on "${result.channel}".`} fg={theme.good} />
+            <box style={{ height: 1 }} />
+            <text content="Try it: send /jobs to your bot in Telegram." fg={theme.text} />
+            <box style={{ height: 1 }} />
+            {result.notes.map((n) => (
+              <text key={n} content={`Note: ${n}`} fg={theme.textFaint} />
+            ))}
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "error" || !plan.ok) {
+      const r = !plan.ok ? plan : result && !result.ok ? result : null
+      return (
+        <Panel title=" Can't install " active>
+          <box style={{ flexDirection: "column", width: 72, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={`✕ ${r?.message ?? "Something went wrong."}`} fg={theme.bad} />
+            {r?.remedy && (
+              <>
+                <box style={{ height: 1 }} />
+                <text content={r.remedy} fg={theme.textDim} />
+              </>
+            )}
+            <box style={{ height: 1 }} />
+            <text content={plan.ok ? "Press r to see the plan again · Esc to close" : "Esc to close"} fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+    return (
+      <Panel title=" Install Beacon's listener " active>
+        <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+          <text content="Kept running by launchd, so you can message the pager back:" fg={theme.text} />
+          <text content={`  ${truncate(plan.programArguments.join(" "), 72)}`} fg={theme.accent} wrapMode="none" />
+          <box style={{ height: 1 }} />
+          <text content={`Unit: ${truncate(plan.unitPath, 68)}`} fg={theme.textDim} wrapMode="none" />
+          <box style={{ height: 1 }} />
+          {plan.commands.map((c) => (
+            <text key={c} content={`· ${truncate(c, 72)}`} fg={theme.textDim} wrapMode="none" />
+          ))}
+          <box style={{ height: 1 }} />
+          {plan.notes.map((n) => (
+            <text key={n} content={`Note: ${n}`} fg={theme.textFaint} />
+          ))}
+          <box style={{ height: 1 }} />
+          <text content="Press y to install · Esc to cancel" fg={theme.text} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    if (phase === "confirm" && plan.ok) return [{ key: "y", label: "install" }, { key: "esc", label: "cancel" }]
+    if (phase === "installed") return [...(plan.ok ? [{ key: "r", label: "reinstall" }] : []), { key: "x", label: "remove" }, { key: "esc", label: "close" }]
+    if (phase === "confirm-remove") return [{ key: "y", label: "remove" }, { key: "esc", label: "keep" }]
+    if (phase === "error" && plan.ok) return [{ key: "r", label: "back to plan" }, { key: "esc", label: "close" }]
+    return [{ key: "esc", label: "close" }]
+  }
+}

package/src/ui/views/Modules.tsx

@@ -16,7 +16,10 @@ import { MODULES, UPCOMING_MODULES } from "../../modules/index.ts"
 import type { ModuleId, ModuleStatus } from "../../modules/contract.ts"
 import { beaconFromConfig, beaconSend, testMessage } from "../../lib/beacon.ts"
 import { loadConfig } from "../../config.ts"
+import { listenerInstalled } from "../../lib/beaconListenInstall.ts"
 import { upcomingRuns } from "../../modules/scheduler.ts"
+import { clearPause, isWaiting, loadIncidents, loadPause, savePause } from "../../lib/sentinelState.ts"
+import { describeIncident } from "../../lib/sentinelReply.ts"
 import { describeShare, homeStatus, tilde, type HomeStatus } from "../../lib/home.ts"
 
 interface Card {
@@ -44,7 +47,7 @@ function stateLabel(card: Card, status: ModuleStatus | undefined): { dot: string
 
 export function Modules({ rows }: { rows: number }) {
   const store = useStore()
-  const { route, inputMode, overlayOpen, beaconSetupOpen, setBeaconSetupOpen, schedulerInstallOpen, setSchedulerInstallOpen, homeSyncOpen, setHomeSyncOpen, heartbeatSetupOpen, setHeartbeatSetupOpen } = store
+  const { route, inputMode, overlayOpen, beaconSetupOpen, setBeaconSetupOpen, schedulerInstallOpen, setSchedulerInstallOpen, homeSyncOpen, setHomeSyncOpen, heartbeatSetupOpen, setHeartbeatSetupOpen, listenerSetupOpen, setListenerSetupOpen, sentinelOverlay, setSentinelOverlay } = store
   const [selected, setSelected] = useState(0)
   const [statuses, setStatuses] = useState<Map<ModuleId, ModuleStatus>>(new Map())
   const [testing, setTesting] = useState(false)
@@ -53,7 +56,7 @@ export function Modules({ rows }: { rows: number }) {
   // the config). status() is cheap and never sends anything.
   const [tick, setTick] = useState(0)
   useEffect(() => {
-    if (beaconSetupOpen || schedulerInstallOpen || homeSyncOpen || heartbeatSetupOpen) return
+    if (beaconSetupOpen || schedulerInstallOpen || homeSyncOpen || heartbeatSetupOpen || listenerSetupOpen || sentinelOverlay) return
     let live = true
     void Promise.all(MODULES.map((m) => m.status())).then((list) => {
       if (live) setStatuses(new Map(list.map((s) => [s.id, s])))
@@ -61,7 +64,7 @@ export function Modules({ rows }: { rows: number }) {
     return () => {
       live = false
     }
-  }, [beaconSetupOpen, schedulerInstallOpen, homeSyncOpen, heartbeatSetupOpen, tick])
+  }, [beaconSetupOpen, schedulerInstallOpen, homeSyncOpen, heartbeatSetupOpen, listenerSetupOpen, sentinelOverlay, tick])
 
   const isActive = route === "modules" && !inputMode && !overlayOpen
   const card = CARDS[selected]!
@@ -78,6 +81,19 @@ export function Modules({ rows }: { rows: number }) {
     })
   }
 
+  const sentinelReady = card.id === "sentinel" && status !== undefined && status.state !== "not_configured"
+
+  const togglePause = () => {
+    if (loadPause()) {
+      clearPause()
+      toast.success("Sentinel is watching again")
+    } else {
+      savePause({ until: new Date(Date.now() + 2 * 3_600_000).toISOString() })
+      toast.success("Sentinel paused for 2 hours")
+    }
+    setTick((t) => t + 1)
+  }
+
   useKeyboard((key) => {
     if (!isActive) return
     switch (key.name) {
@@ -91,6 +107,7 @@ export function Modules({ rows }: { rows: number }) {
       case "s":
         if (card.id === "beacon") return setBeaconSetupOpen(true)
         if (card.id === "scheduler") return setSchedulerInstallOpen(true)
+        if (card.id === "sentinel") return setSentinelOverlay("setup")
         return
       case "f":
         if (card.id === "scheduler") return setHomeSyncOpen(true)
@@ -98,8 +115,15 @@ export function Modules({ rows }: { rows: number }) {
       case "h":
         if (card.id === "scheduler") return setHeartbeatSetupOpen(true)
         return
+      case "l":
+        if (card.id === "beacon" && status && status.state !== "not_configured") return setListenerSetupOpen(true)
+        return
       case "t":
         if (card.id === "beacon" && status && status.state !== "not_configured") return sendTest()
+        if (sentinelReady) return setSentinelOverlay("digest")
+        return
+      case "p":
+        if (sentinelReady) return togglePause()
         return
     }
   })
@@ -156,7 +180,13 @@ export function Modules({ rows }: { rows: number }) {
                 { key: "h", label: "heartbeat" },
               ]
             : []),
-          ...(beaconReady ? [{ key: "t", label: testing ? "sending…" : "test page" }] : []),
+          ...(beaconReady ? [{ key: "t", label: testing ? "sending…" : "test page" }, { key: "l", label: "listener" }] : []),
+          ...(card.id === "sentinel"
+            ? [
+                { key: "⏎", label: sentinelReady ? "reconfigure" : "set up" },
+                ...(sentinelReady ? [{ key: "t", label: "preview digest" }, { key: "p", label: loadPause() ? "resume" : "pause 2h" }] : []),
+              ]
+            : []),
         ]}
       />
     </box>
@@ -205,13 +235,48 @@ function ModuleDetail({ card, status }: { card: Card; status: ModuleStatus | und
         </>
       )}
       {card.id === "beacon" && status.state !== "not_configured" && (
-        <text content="⏎ reconfigure the pager  ·  t send a test page  ·  CLI: spinuptui beacon status" fg={theme.textFaint} />
+        <>
+          <text
+            content={listenerInstalled() ? "l the listener: answers /jobs on your pager" : "l let the pager answer you: send /jobs to see and extend this station's jobs"}
+            fg={theme.accent}
+            wrapMode="none"
+          />
+          <box style={{ height: 1 }} />
+          <text content="⏎ reconfigure the pager  ·  t send a test page  ·  CLI: spinuptui beacon status" fg={theme.textFaint} />
+        </>
       )}
+      {card.id === "sentinel" && <SentinelDetail ready={status.state !== "not_configured"} />}
       {card.id === "scheduler" && <SchedulerDetail installed={status.state !== "not_configured"} refreshKey={status} />}
     </box>
   )
 }
 
+function SentinelDetail({ ready }: { ready: boolean }) {
+  if (!ready) {
+    return (
+      <>
+        <text
+          content="When something goes down, it finds the site that really caused it and pages you the reason. A morning digest covers what monitoring can't see."
+          fg={theme.textDim}
+        />
+        <box style={{ height: 1 }} />
+        <text content="Press ⏎ to see what it would do, then confirm." fg={theme.accent} />
+      </>
+    )
+  }
+  const open = loadIncidents().filter((i) => !i.closedAt || isWaiting(i)).slice(-5)
+  return (
+    <>
+      <text content={open.length ? "Open:" : "No open incidents."} fg={theme.textDim} />
+      {open.map((i) => (
+        <text key={i.id} content={`  ${truncate(describeIncident(i), 90)}`} fg={theme.text} wrapMode="none" />
+      ))}
+      <box style={{ height: 1 }} />
+      <text content="⏎ reconfigure  ·  t preview digest  ·  p pause  ·  CLI: spinuptui sentinel status" fg={theme.textFaint} />
+    </>
+  )
+}
+
 function SchedulerDetail({ installed, refreshKey }: { installed: boolean; refreshKey: unknown }) {
   const [runs] = useState(() => upcomingRuns())
   // Level 0 of the SpinupTUI folder: always say where the work lands.

package/src/ui/views/SentinelSetup.tsx

@@ -0,0 +1,171 @@
+// Sentinel's overlay (Modules tab): guided setup on ⏎, a digest preview on `t`.
+// Setup shows what it would do and applies on `y`, the confirm-before-firing
+// pattern; attach comes first, because Sentinel watches what's in the registry.
+// Applying ends with one real tick, so "done" means it read Kuma.
+
+import { useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel, Spinner, Centered } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { loadConfig } from "../../config.ts"
+import { SpinupWPClient } from "../../api/client.ts"
+import { applySetup, loadAttachPlan, planSetup, saveAttach } from "../../lib/cliSentinel.ts"
+import { composeDigest, gatherDigest } from "../../lib/sentinelDigest.ts"
+import { loadFlags, sentinelSettings } from "../../lib/sentinelState.ts"
+import type { AttachPlan } from "../../lib/sentinelAttach.ts"
+import type { KumaMonitor } from "../../lib/uptimeKuma.ts"
+
+type Agent = "claude" | "codex" | "none"
+
+export function SentinelOverlay() {
+  const { sentinelOverlay, setSentinelOverlay } = useStore()
+  const close = () => setSentinelOverlay(null)
+  return (
+    <box style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", flexDirection: "column", backgroundColor: theme.bg, zIndex: 210 }}>
+      <box style={{ flexDirection: "row", height: 1, backgroundColor: theme.bgAlt, paddingLeft: 1, paddingRight: 1, alignItems: "center" }}>
+        <text content="◉ Sentinel  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={sentinelOverlay === "digest" ? "today's digest, not sent" : "watch the fleet"} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+      {sentinelOverlay === "digest" ? <DigestPreview close={close} /> : <Setup close={close} />}
+    </box>
+  )
+}
+
+function DigestPreview({ close }: { close: () => void }) {
+  const [text, setText] = useState<string | null>(null)
+  useEffect(() => {
+    let live = true
+    const cfg = loadConfig()
+    void gatherDigest(sentinelSettings(cfg), cfg, new SpinupWPClient(cfg), { dryRun: true })
+      .then((d) => live && setText(composeDigest(d, loadFlags()).text))
+      .catch((err: Error) => live && setText(`Couldn't build the digest: ${err.message}`))
+    return () => {
+      live = false
+    }
+  }, [])
+  useKeyboard((key) => {
+    if (key.name === "escape" || key.name === "q") close()
+  })
+  return (
+    <>
+      <Centered>
+        {text === null ? (
+          <box style={{ flexDirection: "row" }}>
+            <Spinner />
+            <text content="  Checking the fleet (this can take a minute)…" fg={theme.textDim} wrapMode="none" />
+          </box>
+        ) : (
+          <Panel title=" Digest preview " active>
+            <box style={{ flexDirection: "column", width: 84, paddingTop: 1, paddingBottom: 1 }}>
+              {text.split("\n").map((l, i) => (
+                <text key={i} content={truncate(l, 82) || " "} fg={theme.text} wrapMode="none" />
+              ))}
+            </box>
+          </Panel>
+        )}
+      </Centered>
+      <StatusBar hints={[{ key: "esc", label: "close" }]} showGlobal={false} />
+    </>
+  )
+}
+
+function Setup({ close }: { close: () => void }) {
+  const saved = loadConfig().sentinel?.diagnosis?.agent
+  const [agent, setAgent] = useState<Agent>(saved === null ? "none" : (saved ?? (Bun.which("claude") ? "claude" : Bun.which("codex") ? "codex" : "none")))
+  const [attach, setAttach] = useState<{ plan: AttachPlan; monitors: KumaMonitor[] } | null>(null)
+  const [attachError, setAttachError] = useState<string | null>(null)
+  const [likely, setLikely] = useState(false)
+  const [phase, setPhase] = useState<"confirm" | "applying" | "done" | "error">("confirm")
+  const [message, setMessage] = useState("")
+  const plan = planSetup({ agent })
+
+  useEffect(() => {
+    if (!loadConfig().uptimeKuma) return
+    let live = true
+    void loadAttachPlan()
+      .then((a) => live && setAttach(a))
+      .catch((err: Error) => live && setAttachError(err.message))
+    return () => {
+      live = false
+    }
+  }, [])
+
+  const apply = () => {
+    setPhase("applying")
+    void (async () => {
+      const attached = attach ? await saveAttach(attach.plan, attach.monitors, likely) : 0
+      const r = await applySetup(planSetup({ agent }).next)
+      setMessage(r.ok ? `${attached ? `Attached ${attached} monitor(s). ` : ""}Sentinel read Kuma and is watching from now.` : r.message)
+      setPhase(r.ok ? "done" : "error")
+    })().catch((err: Error) => {
+      setMessage(err.message)
+      setPhase("error")
+    })
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+    if (phase !== "confirm") return
+    if (name === "a") return setAgent((a) => (a === "claude" ? "codex" : a === "codex" ? "none" : "claude"))
+    if (name === "l" && attach?.plan.likely.length) return setLikely((v) => !v)
+    if (name === "y" && plan.blockers.length === 0) apply()
+  })
+
+  const a = attach?.plan
+  return (
+    <>
+      <Centered>
+        {phase === "applying" ? (
+          <box style={{ flexDirection: "row" }}>
+            <Spinner />
+            <text content="  Attaching monitors and running a first tick…" fg={theme.textDim} wrapMode="none" />
+          </box>
+        ) : phase !== "confirm" ? (
+          <Panel title={phase === "done" ? " Sentinel is on " : " Couldn't finish "} active>
+            <box style={{ flexDirection: "column", width: 72, paddingTop: 1, paddingBottom: 1 }}>
+              <text content={`${phase === "done" ? "✓" : "✕"} ${message}`} fg={phase === "done" ? theme.good : theme.bad} />
+              <box style={{ height: 1 }} />
+              <text content="Esc to close" fg={theme.textFaint} />
+            </box>
+          </Panel>
+        ) : (
+          <Panel title=" Set up Sentinel " active>
+            <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+              <text content="Runs as Scheduler jobs: a check every 5 minutes, a digest at 08:00." fg={theme.text} />
+              <box style={{ height: 1 }} />
+              <text content={`Agent: ${agent}`} fg={theme.accent} wrapMode="none" />
+              <text content={`Workspace: ${truncate(plan.next.workspace ?? "~/SpinupTUI/sentinel", 62)}`} fg={theme.textDim} wrapMode="none" />
+              <box style={{ height: 1 }} />
+              {!a && !attachError && loadConfig().uptimeKuma && <text content="Reading your Kuma monitors…" fg={theme.textDim} wrapMode="none" />}
+              {attachError && <text content={`Couldn't read Kuma: ${truncate(attachError, 58)}`} fg={theme.warn} wrapMode="none" />}
+              {a && (
+                <>
+                  <text content={`Monitors: ${a.exact.length} to attach, ${a.already} already attached (nothing changes in Kuma)`} fg={theme.text} wrapMode="none" />
+                  {a.likely.length > 0 && <text content={`  ${a.likely.length} likely match(es): ${likely ? "will attach" : "skipped"} (l to change)`} fg={theme.textDim} wrapMode="none" />}
+                  {a.unmonitored.length > 0 && <text content={`  ${a.unmonitored.length} site(s) have no monitor`} fg={theme.textDim} wrapMode="none" />}
+                </>
+              )}
+              <box style={{ height: 1 }} />
+              {plan.notes.map((n) => (
+                <text key={n} content={`Note: ${n}`} fg={theme.textFaint} />
+              ))}
+              {plan.blockers.map((b) => (
+                <text key={b} content={`✕ ${b}`} fg={theme.bad} />
+              ))}
+              <box style={{ height: 1 }} />
+              <text content={plan.blockers.length ? "Fix the above first · Esc to close" : "Press y to turn it on · a change agent · Esc to cancel"} fg={plan.blockers.length ? theme.warn : theme.text} wrapMode="none" />
+            </box>
+          </Panel>
+        )}
+      </Centered>
+      <StatusBar
+        hints={phase === "confirm" && !plan.blockers.length ? [{ key: "y", label: "turn on" }, { key: "a", label: "agent" }, { key: "esc", label: "cancel" }] : [{ key: "esc", label: "close" }]}
+        showGlobal={false}
+      />
+    </>
+  )
+}