spinuptui 1.2.0 → 1.3.0-alpha.2

package/src/ui/views/Modules.tsx

@@ -0,0 +1,232 @@
+// Modules tab: the parts of SpinupTUI that keep working after the TUI is closed.
+// A view over the module contract (src/modules): each shipped module's status on
+// this machine, plus the ones still to come, greyed out. This is also where a
+// module gets set up — discovery and turning it on happen in the same place.
+
+import { useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel } from "../components.tsx"
+import { List, moveSelection } from "../List.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { toast } from "../toast.ts"
+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 { upcomingRuns } from "../../modules/scheduler.ts"
+
+interface Card {
+  id: ModuleId
+  name: string
+  summary: string
+  dependsOn: ModuleId[]
+  upcoming: boolean
+}
+
+const CARDS: Card[] = [
+  ...MODULES.map((m) => ({ id: m.id, name: m.name, summary: m.summary, dependsOn: m.dependsOn, upcoming: false })),
+  ...UPCOMING_MODULES.map((m) => ({ ...m, upcoming: true })),
+]
+
+const NAMES = new Map(CARDS.map((c) => [c.id, c.name]))
+
+function stateLabel(card: Card, status: ModuleStatus | undefined): { dot: string; label: string; color: string } {
+  if (card.upcoming) return { dot: "·", label: "coming soon", color: theme.textFaint }
+  if (!status) return { dot: "○", label: "checking…", color: theme.textDim }
+  if (status.state === "ok") return { dot: "●", label: "set up", color: theme.good }
+  if (status.state === "degraded") return { dot: "●", label: "needs attention", color: theme.warn }
+  return { dot: "○", label: "not set up", color: theme.textDim }
+}
+
+export function Modules({ rows }: { rows: number }) {
+  const store = useStore()
+  const { route, inputMode, overlayOpen, beaconSetupOpen, setBeaconSetupOpen, schedulerInstallOpen, setSchedulerInstallOpen } = store
+  const [selected, setSelected] = useState(0)
+  const [statuses, setStatuses] = useState<Map<ModuleId, ModuleStatus>>(new Map())
+  const [testing, setTesting] = useState(false)
+
+  // Recompute on open and whenever a setup overlay closes (it may have changed
+  // the config). status() is cheap and never sends anything.
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    if (beaconSetupOpen || schedulerInstallOpen) 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])))
+    })
+    return () => {
+      live = false
+    }
+  }, [beaconSetupOpen, schedulerInstallOpen, tick])
+
+  const isActive = route === "modules" && !inputMode && !overlayOpen
+  const card = CARDS[selected]!
+  const status = statuses.get(card.id)
+
+  const sendTest = () => {
+    if (testing) return
+    setTesting(true)
+    void beaconSend(beaconFromConfig(loadConfig()), testMessage()).then((r) => {
+      setTesting(false)
+      setTick((t) => t + 1)
+      if (r.ok) toast.success(`Test page sent via ${r.channel}`)
+      else toast.error(r.message)
+    })
+  }
+
+  useKeyboard((key) => {
+    if (!isActive) return
+    switch (key.name) {
+      case "up":
+      case "k":
+        return setSelected((i) => moveSelection(i, -1, CARDS.length))
+      case "down":
+      case "j":
+        return setSelected((i) => moveSelection(i, 1, CARDS.length))
+      case "return":
+      case "s":
+        if (card.id === "beacon") return setBeaconSetupOpen(true)
+        if (card.id === "scheduler") return setSchedulerInstallOpen(true)
+        return
+      case "t":
+        if (card.id === "beacon" && status && status.state !== "not_configured") return sendTest()
+        return
+    }
+  })
+
+  const beaconReady = card.id === "beacon" && status !== undefined && status.state !== "not_configured"
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column" }}>
+      <box style={{ flexGrow: 1, flexDirection: "row", padding: 1, gap: 1 }}>
+        <Panel title=" Modules " active width={40}>
+          <List
+            items={CARDS}
+            selectedIndex={selected}
+            viewportRows={Math.max(3, rows - 4)}
+            focused
+            keyFor={(c) => c.id}
+            renderRow={(c, sel) => {
+              const s = stateLabel(c, statuses.get(c.id))
+              return (
+                <>
+                  <text content={s.dot + " "} fg={s.color} style={{ flexShrink: 0 }} />
+                  <text
+                    content={c.name}
+                    fg={c.upcoming ? theme.textFaint : sel ? theme.text : theme.textDim}
+                    wrapMode="none"
+                    style={{ flexGrow: 1, flexShrink: 1 }}
+                  />
+                  <text content={" " + s.label} fg={s.color} wrapMode="none" style={{ flexShrink: 0 }} />
+                </>
+              )
+            }}
+          />
+        </Panel>
+
+        <Panel title={` ${card.name} `} flexGrow={1}>
+          <box style={{ flexDirection: "column" }}>
+            <text content={card.summary} fg={card.upcoming ? theme.textDim : theme.text} />
+            <box style={{ height: 1 }} />
+            {card.dependsOn.length > 0 && (
+              <text content={`Builds on: ${card.dependsOn.map((d) => NAMES.get(d) ?? d).join(", ")}`} fg={theme.textFaint} />
+            )}
+            {card.upcoming ? <UpcomingDetail /> : <ModuleDetail card={card} status={status} />}
+          </box>
+        </Panel>
+      </box>
+      <StatusBar
+        hints={[
+          { key: "↑↓/jk", label: "select" },
+          ...(card.id === "beacon" ? [{ key: "⏎", label: beaconReady ? "reconfigure" : "set up" }] : []),
+          ...(card.id === "scheduler" ? [{ key: "⏎", label: status && status.state !== "not_configured" ? "reinstall" : "install" }] : []),
+          ...(beaconReady ? [{ key: "t", label: testing ? "sending…" : "test page" }] : []),
+        ]}
+      />
+    </box>
+  )
+}
+
+function UpcomingDetail() {
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <box style={{ height: 1 }} />
+      <text content="Coming soon" fg={theme.purple} attributes={1} />
+      <text content="Not in this version yet. It will appear here, ready to set up, when it ships." fg={theme.textFaint} />
+    </box>
+  )
+}
+
+function ModuleDetail({ card, status }: { card: Card; status: ModuleStatus | undefined }) {
+  if (!status) return <text content="Checking…" fg={theme.textDim} />
+  const s = stateLabel(card, status)
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <box style={{ height: 1 }} />
+      <box style={{ flexDirection: "row" }}>
+        <text content={`${s.dot} `} fg={s.color} style={{ flexShrink: 0 }} />
+        <text content={status.summary} fg={s.color} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+      {status.checks.length > 0 && (
+        <>
+          <box style={{ height: 1 }} />
+          {status.checks.map((c) => (
+            <box key={c.name} style={{ flexDirection: "row" }}>
+              <text content={c.ok ? "✓ " : "✗ "} fg={c.ok ? theme.good : theme.bad} style={{ flexShrink: 0 }} />
+              <text content={`${c.name}: `} fg={theme.textDim} wrapMode="none" style={{ flexShrink: 0 }} />
+              <text content={truncate(c.detail, 80)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+            </box>
+          ))}
+        </>
+      )}
+      <box style={{ height: 1 }} />
+      {card.id === "beacon" && status.state === "not_configured" && (
+        <>
+          <text content="Beacon pages you on Telegram when something needs you. Scripts, cron jobs and" fg={theme.textDim} />
+          <text content={'the other modules all send through it: spinuptui beacon send "…".'} fg={theme.textDim} />
+          <box style={{ height: 1 }} />
+          <text content="Press ⏎ to connect a Telegram bot. It takes about two minutes." fg={theme.accent} />
+        </>
+      )}
+      {card.id === "beacon" && status.state !== "not_configured" && (
+        <text content="⏎ reconfigure the pager  ·  t send a test page  ·  CLI: spinuptui beacon status" fg={theme.textFaint} />
+      )}
+      {card.id === "scheduler" && <SchedulerDetail installed={status.state !== "not_configured"} />}
+    </box>
+  )
+}
+
+function SchedulerDetail({ installed }: { installed: boolean }) {
+  const [runs] = useState(() => upcomingRuns())
+  return (
+    <>
+      <box style={{ height: 1 }} />
+      {!installed && (
+        <>
+          <text
+            content="Scheduler runs follow-ups on this machine while you're away: queue a check for tomorrow at 8 and the result arrives on your pager. It's also the clock the other modules run on, so turning it on is what makes this machine a station."
+            fg={theme.textDim}
+          />
+          <box style={{ height: 1 }} />
+          <text content="Press ⏎ to see exactly what it installs, then confirm." fg={theme.accent} />
+          <box style={{ height: 1 }} />
+        </>
+      )}
+      <text content={runs.length ? "Next up:" : "No follow-ups queued."} fg={theme.textDim} />
+      {runs.map((r) => (
+        <box key={`${r.source}/${r.id}`} style={{ flexDirection: "row" }}>
+          <text content={`  ${r.next.padEnd(17)} `} fg={theme.text} wrapMode="none" style={{ flexShrink: 0 }} />
+          <text content={`${r.source}/${r.id}`} fg={theme.textDim} wrapMode="none" style={{ flexShrink: 1 }} />
+        </box>
+      ))}
+      <box style={{ height: 1 }} />
+      <text
+        content={`${installed ? "⏎ reinstall (repairs the unit)  ·  " : ""}CLI: spinuptui scheduler add | list | status`}
+        fg={theme.textFaint}
+      />
+    </>
+  )
+}

package/src/ui/views/SchedulerInstall.tsx

@@ -0,0 +1,172 @@
+// Scheduler's install overlay (Modules tab, ⏎ on Scheduler): shows exactly what
+// `spinuptui scheduler install --plan` would write and run, and applies it on
+// `y` — the confirm-before-firing pattern. Applying ends with the proving tick
+// (a tick that really ran under launchd), so "done" here means the station's
+// clock is running, not just that a file was written.
+
+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 { applyInstall, binHasScheduler, NO_SCHEDULER, planInstall, type ApplyResult, type PlanResult } from "../../lib/schedulerInstall.ts"
+
+type Phase = "confirm" | "applying" | "done" | "error"
+
+export function SchedulerInstall() {
+  const { setSchedulerInstallOpen } = useStore()
+  const [plan, setPlan] = useState<PlanResult>(() => planInstall())
+  // Same refusal as `install --plan`: don't offer a plan whose binary has no
+  // Scheduler (it would launch the dashboard under launchd).
+  useEffect(() => {
+    if (!plan.ok) return
+    void binHasScheduler(plan).then((has) => {
+      if (!has) {
+        setPlan(NO_SCHEDULER)
+        setPhase("error")
+      }
+    })
+    // Checked once, for the plan computed on open.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  const [phase, setPhase] = useState<Phase>(plan.ok ? "confirm" : "error")
+  const [stage, setStage] = useState("")
+  const [result, setResult] = useState<ApplyResult | null>(null)
+  const [live, setLive] = useState(true)
+  useEffect(() => () => setLive(false), [])
+
+  const close = () => setSchedulerInstallOpen(false)
+
+  const apply = () => {
+    if (!plan.ok) return
+    setPhase("applying")
+    void applyInstall(plan, (s) => live && setStage(s)).then((r) => {
+      setResult(r)
+      setPhase(r.ok ? "done" : "error")
+    })
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+    if (phase === "confirm" && name === "y" && plan.ok && plan.platform === "darwin") return apply()
+    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="⏱ Scheduler  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content="install the station's clock" 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 with a real tick from launchd (up to a minute)." fg={theme.textFaint} wrapMode="none" />
+        </box>
+      )
+    }
+    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 ticking: its first run under launchd was at ${new Date(result.tickAt).toLocaleTimeString()}.`} fg={theme.good} />
+            <box style={{ height: 1 }} />
+            <text content="Queue a follow-up from any session:" fg={theme.textDim} />
+            <text content={'  spinuptui scheduler add <id> --kind spinuptui --when "YYYY-MM-DD 08:00" \\'} fg={theme.accent} wrapMode="none" />
+            <text content={'      --expires YYYY-MM-DD --created-by "…" -- incidents example.com'} fg={theme.accent} wrapMode="none" />
+            <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>
+      )
+    }
+    const darwin = plan.platform === "darwin"
+    return (
+      <Panel title=" Install Scheduler's dispatcher " active>
+        <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+          <text content="Runs at login and every 5 minutes, unattended:" 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" />
+          <text content={`PATH: ${truncate(plan.env.PATH ?? "", 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={darwin ? "Press y to install · Esc to cancel" : "Installing on Linux isn't supported yet · Esc to close"}
+            fg={darwin ? theme.text : theme.warn}
+            wrapMode="none"
+          />
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    if (phase === "confirm" && plan.ok && plan.platform === "darwin") {
+      return [
+        { key: "y", label: "install" },
+        { key: "esc", label: "cancel" },
+      ]
+    }
+    if (phase === "error" && plan.ok) {
+      return [
+        { key: "r", label: "back to plan" },
+        { key: "esc", label: "close" },
+      ]
+    }
+    return [{ key: "esc", label: "close" }]
+  }
+}