spinuptui 1.3.0-alpha.4 → 1.3.0-alpha.5

package/src/ui/views/Modules.tsx

@@ -18,6 +18,8 @@ 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 {
@@ -45,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, listenerSetupOpen, setListenerSetupOpen } = 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)
@@ -54,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 || listenerSetupOpen) 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])))
@@ -62,7 +64,7 @@ export function Modules({ rows }: { rows: number }) {
     return () => {
       live = false
     }
-  }, [beaconSetupOpen, schedulerInstallOpen, homeSyncOpen, heartbeatSetupOpen, listenerSetupOpen, tick])
+  }, [beaconSetupOpen, schedulerInstallOpen, homeSyncOpen, heartbeatSetupOpen, listenerSetupOpen, sentinelOverlay, tick])
 
   const isActive = route === "modules" && !inputMode && !overlayOpen
   const card = CARDS[selected]!
@@ -79,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) {
@@ -92,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)
@@ -104,6 +120,10 @@ export function Modules({ rows }: { rows: number }) {
         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
     }
   })
@@ -161,6 +181,12 @@ export function Modules({ rows }: { rows: number }) {
               ]
             : []),
           ...(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>
@@ -219,11 +245,38 @@ function ModuleDetail({ card, status }: { card: Card; status: ModuleStatus | und
           <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}
+      />
+    </>
+  )
+}