spinuptui 1.3.0-alpha.1 → 1.3.0-alpha.3

package/src/ui/store.tsx

@@ -51,7 +51,7 @@ import { carrySiteSettings, type SettingsCarryResult } from "../lib/cloneSetting
 import { syncAdditionalDomains } from "../lib/cloneDomains.ts"
 import { parseRepo, deployKeysSettingsUrl, ghAvailable, ghDeployKeyPresent, ghAddDeployKey, generateDeployKeypair, type RepoHost } from "../lib/gitDeployKey.ts"
 import { keychainAvailable, setSudoPassword, getSudoPassword, deleteSudoPassword } from "../lib/keychain.ts"
-import { StackCache, siteSignature, type CachedProbe } from "../lib/stackCache.ts"
+import { StackCache, siteSignature, isRecheckDue, type CachedProbe } from "../lib/stackCache.ts"
 import { resolvePhpEolDates, refreshPhpEolDates, isPhpEol as isPhpEolWith, offeredPhpVersions as offeredPhpVersionsWith, type PhpEolDates } from "../lib/phpEol.ts"
 import { resolveUbuntuEolDates, refreshUbuntuEolDates, isUbuntuEol as isUbuntuEolWith, type UbuntuEolDates } from "../lib/ubuntuEol.ts"
 import { wpCoreBusy } from "./wpCoreJobs.tsx"
@@ -748,6 +748,15 @@ interface StoreValue extends DataState {
   // Beacon's guided setup overlay, opened from the Modules tab.
   beaconSetupOpen: boolean
   setBeaconSetupOpen: (v: boolean) => void
+  // Scheduler's install plan + confirm overlay, opened from the Modules tab.
+  schedulerInstallOpen: boolean
+  setSchedulerInstallOpen: (v: boolean) => 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
   // 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
@@ -822,6 +831,14 @@ interface StoreValue extends DataState {
   enableLocalSync: () => void
   // SpinupWP account slug (from env/config) for building web deep links.
   accountSlug: string | null
+  // Open a page in the SpinupWP web app. Deep links need the account slug, which
+  // the API doesn't expose; with none saved this asks for it (slugPrompt) and
+  // opens the page once it's given, rather than landing on the dashboard root.
+  // Returns true when the page opened straight away.
+  openInSpinupWP: (build: (slug: string) => string) => boolean
+  slugPrompt: { build: (slug: string) => string } | null
+  setSlugPrompt: (p: { build: (slug: string) => string } | null) => void
+  saveAccountSlug: (slug: string) => void
   // The account (profile) this store is mounted for — see config.ts "Accounts".
   // Switching remounts the whole store, so these never change under a view.
   profileId: string
@@ -1035,6 +1052,24 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     })
   }, [])
   const [profileLabel, setProfileLabel] = useState(cfgRef.current.profileLabel)
+  const [accountSlug, setAccountSlug] = useState(cfgRef.current.accountSlug)
+  const [slugPrompt, setSlugPrompt] = useState<{ build: (slug: string) => string } | null>(null)
+  const saveAccountSlug = useCallback((slug: string) => {
+    cfgRef.current.accountSlug = slug
+    setAccountSlug(slug)
+    void saveProfileConfig({ accountSlug: slug })
+  }, [])
+  const openInSpinupWP = useCallback(
+    (build: (slug: string) => string) => {
+      if (accountSlug) {
+        openUrl(build(accountSlug))
+        return true
+      }
+      setSlugPrompt({ build })
+      return false
+    },
+    [accountSlug],
+  )
   const [route, setRoute] = useState<Route>("dashboard")
   const [inputMode, setInputMode] = useState(false)
   const [overlayOpen, setOverlayOpen] = useState(false)
@@ -1118,6 +1153,9 @@ export function StoreProvider({ children }: { children: ReactNode }) {
   const [localRoots, setLocalRoots] = useState<string[]>(() => [...cfgRef.current.localRoots])
   const [discoverOpen, setDiscoverOpen] = useState(false)
   const [beaconSetupOpen, setBeaconSetupOpen] = useState(false)
+  const [schedulerInstallOpen, setSchedulerInstallOpen] = useState(false)
+  const [homeSyncOpen, setHomeSyncOpen] = useState(false)
+  const [heartbeatSetupOpen, setHeartbeatSetupOpen] = useState(false)
   const [forgottenOpen, setForgottenOpen] = useState(false)
   const [forgottenStack, setForgottenStack] = useState<Stack | null>(null)
   const [linkReturnToForgotten, setLinkReturnToForgotten] = useState(false)
@@ -1254,7 +1292,7 @@ export function StoreProvider({ children }: { children: ReactNode }) {
   }, [])
 
   const probeOne = useCallback(
-    async (site: Site) => {
+    async (site: Site): Promise<boolean> => {
       const cache = cacheRef.current!
       setProbingIds((prev) => new Set(prev).add(site.id))
       setProbeErrors((prev) => {
@@ -1276,6 +1314,7 @@ export function StoreProvider({ children }: { children: ReactNode }) {
         next.delete(site.id)
         return next
       })
+      return outcome.ok
     },
     [servers],
   )
@@ -1309,6 +1348,41 @@ export function StoreProvider({ children }: { children: ReactNode }) {
 
   const isProbeStale = useCallback((site: Site) => cacheRef.current!.isStale(site.id, siteSignature(site)), [])
 
+  // Re-check WordPress versions that have gone old, whenever the site list loads
+  // (launch, and every `r`). Only sites already probed successfully: an unprobed
+  // site's stack is the user's call (`d`/`D`), and it may not be reachable at all.
+  // Each site gets at most one automatic attempt per max-age window, recorded in
+  // the cache so it holds across launches: a site whose probe now fails keeps its
+  // old reading (shown with its age) instead of being retried on every launch or
+  // refresh. Dev Mode's servers aren't real.
+  //
+  // Unattended SSH must not trip fail2ban, which bans the source IP after a few
+  // failed logins on one server. So each server's sites go one at a time, and the
+  // first failure on a server ends that server's run for this window: at most one
+  // failed login per server per day. Servers run in parallel, a few at a time.
+  useEffect(() => {
+    if (isDevMode() || servers.length === 0) return
+    const cache = cacheRef.current!
+    const now = Date.now()
+    const due = sites.filter((s) => isRecheckDue(cache.get(s.id), now))
+    if (due.length === 0) return
+    // Marked up front, all of them: a reload mid-run must not queue these again,
+    // and a server's sites after its first failure are skipped for the window too.
+    void cache.noteRecheck(due.map((s) => s.id))
+    const byServer = new Map<number, Site[]>()
+    for (const s of due) byServer.set(s.server_id, [...(byServer.get(s.server_id) ?? []), s])
+    const queues = [...byServer.values()]
+    let cursor = 0
+    const worker = async () => {
+      while (cursor < queues.length) {
+        for (const site of queues[cursor++]) if (!(await probeOne(site))) break
+      }
+    }
+    for (let i = 0; i < Math.min(3, queues.length); i++) void worker()
+    // probeOne changes identity with `servers`, which reloads together with
+    // `sites` — this should only re-run when the site list itself is reloaded.
+  }, [sites, servers])
+
   const isPhpEol = useCallback((version: string | null | undefined) => isPhpEolWith(version, phpEolDates), [phpEolDates])
   const offeredPhpVersions = useCallback(
     (current?: string | null) => offeredPhpVersionsWith(phpEolDates, current),
@@ -4540,6 +4614,12 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     setDiscoverOpen,
     beaconSetupOpen,
     setBeaconSetupOpen,
+    schedulerInstallOpen,
+    setSchedulerInstallOpen,
+    homeSyncOpen,
+    setHomeSyncOpen,
+    heartbeatSetupOpen,
+    setHeartbeatSetupOpen,
     forgottenOpen,
     setForgottenOpen,
     forgottenStack,
@@ -4581,7 +4661,11 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     enableLocalSyncSite,
     setEnableLocalSyncSite,
     enableLocalSync,
-    accountSlug: cfgRef.current.accountSlug,
+    accountSlug,
+    openInSpinupWP,
+    slugPrompt,
+    setSlugPrompt,
+    saveAccountSlug,
     profileId: cfgRef.current.profileId,
     profileLabel,
     setProfileLabel,

package/src/ui/views/AccountSlugPrompt.tsx

@@ -0,0 +1,102 @@
+// Ask for the SpinupWP account slug the first time `w` needs it.
+//
+// Deep links into the web app are account-scoped (spinupwp.app/{slug}/sites/{id})
+// and the API doesn't expose the slug, so without one `w` could only open the
+// dashboard root. Instead of that, `w` opens this prompt: the user pastes the
+// slug (or any dashboard URL), it's saved to the current account, and the page
+// they asked for opens. Every later `w` goes straight there.
+
+import { useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { openUrl } from "../../lib/open.ts"
+import { parseAccountSlug } from "../../lib/spinupweb.ts"
+import { Panel, Centered } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { toast } from "../toast.ts"
+
+const INPUT_STYLE = { backgroundColor: theme.bgAlt, focusedBackgroundColor: theme.bgAlt, textColor: theme.text }
+
+export function AccountSlugPrompt() {
+  const { slugPrompt, setSlugPrompt, saveAccountSlug, setInputMode } = useStore()
+  const [value, setValue] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  // The input owns the keyboard while this is open.
+  useEffect(() => {
+    setInputMode(true)
+    return () => setInputMode(false)
+  }, [setInputMode])
+
+  const close = () => setSlugPrompt(null)
+
+  const submit = () => {
+    if (!slugPrompt) return
+    const slug = parseAccountSlug(value)
+    if (!slug) {
+      setError(value.trim() ? "That doesn't look like a slug — paste the part after spinupwp.app/, or the whole URL." : "Paste your account slug, or Esc to cancel.")
+      return
+    }
+    saveAccountSlug(slug)
+    openUrl(slugPrompt.build(slug))
+    toast.success(`Saved “${slug}” — opening in SpinupWP…`)
+    close()
+  }
+
+  // Esc reaches us even with the input focused (it doesn't consume it).
+  useKeyboard((key) => {
+    if (key.name === "escape") close()
+  })
+
+  if (!slugPrompt) return null
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        backgroundColor: theme.bg,
+        zIndex: 300,
+      }}
+    >
+      <Centered>
+        <Panel title=" Open in SpinupWP " active>
+          <box style={{ flexDirection: "column", width: 68, paddingTop: 1, paddingBottom: 1 }}>
+            <text content="To open the right page, SpinupTUI needs your SpinupWP account slug:" fg={theme.text} wrapMode="none" />
+            <text content="the part after spinupwp.app/ in your dashboard's address." fg={theme.text} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="SpinupWP's API doesn't provide it, so this asks once and saves it." fg={theme.textDim} wrapMode="none" />
+            <text content="Pasting any dashboard URL works too." fg={theme.textDim} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Account slug" fg={theme.accent} />
+            <input
+              focused
+              value={value}
+              placeholder="acme-agency"
+              onInput={(v: string) => {
+                setValue(v)
+                setError(null)
+              }}
+              onSubmit={submit}
+              style={INPUT_STYLE}
+            />
+            <box style={{ height: 1 }} />
+            {error ? <text content={"✕ " + error} fg={theme.bad} wrapMode="none" /> : <text content="Saved to this account in config.json." fg={theme.textFaint} wrapMode="none" />}
+          </box>
+        </Panel>
+      </Centered>
+      <StatusBar
+        hints={[
+          { key: "⏎", label: "save & open" },
+          { key: "esc", label: "cancel" },
+        ]}
+        showGlobal={false}
+      />
+    </box>
+  )
+}

package/src/ui/views/Browser.tsx

@@ -24,7 +24,7 @@ type Focus = "servers" | "sites"
 
 export function Browser({ rows }: { rows: number }) {
   const store = useStore()
-  const { servers, sitesForServer, route, inputMode, overlayOpen, setHealthServer, setWpInventorySite, runProbe, probes, accountSlug, setPhpUpgradeSite, phpUpgrades, setHttpsToggleSite, setPurgeCacheSite, setSiteOfflineSite, setGrantKeySite, setSudoConnectServer, isSudoConnected, setServerActionsServer, serverOps, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setNewServerSource, setNewServerOpen, setVanityServer, vanityJob, beginClone, isServerOsEol, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setDbSyncSite, localSync, localLinks, setDbBackupSite, setMediaFallbackSite, setEnableLocalSyncSite } = store
+  const { servers, sitesForServer, route, inputMode, overlayOpen, setHealthServer, setWpInventorySite, runProbe, probes, openInSpinupWP, setPhpUpgradeSite, phpUpgrades, setHttpsToggleSite, setPurgeCacheSite, setSiteOfflineSite, setGrantKeySite, setSudoConnectServer, isSudoConnected, setServerActionsServer, serverOps, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setNewServerSource, setNewServerOpen, setVanityServer, vanityJob, beginClone, isServerOsEol, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setDbSyncSite, localSync, localLinks, setDbBackupSite, setMediaFallbackSite, setEnableLocalSyncSite } = store
 
   const [serverIndex, setServerIndex] = useState(0)
   const [siteIndex, setSiteIndex] = useState(0)
@@ -283,11 +283,11 @@ export function Browser({ rows }: { rows: number }) {
         // Open the focused server/site in the SpinupWP web app — useful for
         // actions the API can't do (e.g. running a pending server upgrade).
         if (focus === "sites" && sites[siteIndex]) {
-          openUrl(siteWebUrl(sites[siteIndex].id, accountSlug))
-          setFlash(accountSlug ? "Opening in SpinupWP…" : "Set accountSlug for deep links — opening dashboard")
+          const id = sites[siteIndex].id
+          if (openInSpinupWP((slug) => siteWebUrl(id, slug))) setFlash("Opening in SpinupWP…")
         } else if (server) {
-          openUrl(serverWebUrl(server.id, accountSlug))
-          setFlash(accountSlug ? "Opening in SpinupWP…" : "Set accountSlug for deep links — opening dashboard")
+          const id = server.id
+          if (openInSpinupWP((slug) => serverWebUrl(id, slug))) setFlash("Opening in SpinupWP…")
         }
         setTimeout(() => setFlash(null), 2000)
         return

package/src/ui/views/HeartbeatSetup.tsx

@@ -0,0 +1,284 @@
+// The station heartbeat overlay (Modules tab, `h` on Scheduler): the same flow
+// as `spinuptui scheduler heartbeat setup`, with the confirm-before-firing
+// pattern. With a saved Kuma login it finds or creates this station's push
+// monitor; without one it takes a push URL made by hand. Once set, it shows the
+// last ping and can send a test or remove it.
+
+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 { readLastTick } from "../../lib/schedulerJobs.ts"
+import { stationName } from "../../lib/schedulerGit.ts"
+import {
+  applyStationPlan,
+  connectHeartbeat,
+  loadStationPlan,
+  pagerProblem,
+  removeHeartbeat,
+  sendHeartbeat,
+  stationPlanText,
+  tickHeartbeat,
+  type StationMonitorPlan,
+} from "../../lib/heartbeat.ts"
+
+type Phase = "status" | "loading" | "choose" | "confirm" | "manual" | "working" | "done" | "error" | "confirmRemove"
+
+const INPUT_STYLE = { backgroundColor: theme.bgAlt, focusedBackgroundColor: theme.bgAlt, textColor: theme.text }
+const WIDTH = 76
+
+export function HeartbeatSetup() {
+  const { setHeartbeatSetupOpen, setInputMode } = useStore()
+  const host = stationName()
+  const [current, setCurrent] = useState(() => loadConfig().scheduler?.heartbeat ?? null)
+  const hasKuma = !!loadConfig().uptimeKuma
+  const [phase, setPhase] = useState<Phase>(current ? "status" : hasKuma ? "loading" : "manual")
+  const [plan, setPlan] = useState<StationMonitorPlan | null>(null)
+  const [pick, setPick] = useState(0)
+  const [url, setUrl] = useState("")
+  const [message, setMessage] = useState<{ text: string; remedy?: string; good?: boolean } | null>(null)
+
+  const close = () => setHeartbeatSetupOpen(false)
+
+  const startPlan = () => {
+    setPhase("loading")
+    void loadStationPlan(host).then((r) => {
+      if (!r.ok) {
+        setMessage({ text: r.message, remedy: r.remedy })
+        return setPhase("error")
+      }
+      setPlan(r.plan)
+      setPick(0)
+      setPhase(!r.plan.existing && r.plan.needChoice ? "choose" : "confirm")
+    })
+  }
+
+  useEffect(() => {
+    if (phase === "loading" && !plan) startPlan()
+    // Only the first load; later loads go through startPlan directly.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (phase !== "manual") return
+    setInputMode(true)
+    return () => setInputMode(false)
+  }, [phase, setInputMode])
+
+  const finish = (text: string, status: "up" | "down") => {
+    setCurrent(loadConfig().scheduler?.heartbeat ?? null)
+    const why = status === "down" ? ` It says "down" because ${pagerProblem()}; the next tick says "up" once that's fixed.` : ""
+    const tail = loadConfig().scheduler?.dispatcher ? " Every dispatcher tick pings it from now on." : " This machine has no dispatcher yet: install Scheduler (⏎ on its card) so ticks ping it."
+    setMessage({ text: text + why + tail, good: true })
+    setPhase("done")
+  }
+
+  const apply = () => {
+    if (!plan) return
+    setPhase("working")
+    void applyStationPlan(plan, host).then((r) => {
+      if (!r.ok) {
+        setMessage({ text: r.message, remedy: r.remedy })
+        return setPhase("error")
+      }
+      finish(`${r.created ? `Created "${plan.name}" (#${r.created})` : `Reused "${plan.name}"`} and sent the first ping (status ${r.status}).`, r.status)
+    })
+  }
+
+  const submitUrl = () => {
+    if (!url.trim()) return
+    setPhase("working")
+    void connectHeartbeat(url.trim(), host).then((r) => {
+      if (!r.ok) {
+        setMessage({ text: r.message, remedy: r.remedy })
+        return setPhase("error")
+      }
+      finish(`Saved. Kuma took the ping (status ${r.status}).`, r.status)
+    })
+  }
+
+  const test = () => {
+    if (!current) return
+    setPhase("working")
+    const t = tickHeartbeat(0, [], pagerProblem())
+    void sendHeartbeat(current.url, t.status, `${host}: test ping (${t.msg})`).then((r) => {
+      setMessage(r.ok ? { text: `Kuma took the test ping (status ${t.status}).`, good: true } : { text: `Kuma didn't take the ping: ${r.error}`, remedy: "Check that the monitor is active and that this machine can reach Kuma." })
+      setPhase(r.ok ? "done" : "error")
+    })
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (phase === "manual") {
+      if (name === "escape") close()
+      return
+    }
+    if (phase === "working" || phase === "loading") return
+    if (name === "escape" || name === "q") return phase === "confirmRemove" ? setPhase("status") : close()
+    if (phase === "status") {
+      if (name === "t") return test()
+      if (name === "s" && hasKuma) return startPlan()
+      if (name === "x") return setPhase("confirmRemove")
+    }
+    if (phase === "confirmRemove" && name === "y") {
+      void removeHeartbeat().then(() => {
+        setCurrent(null)
+        setMessage({ text: "Removed. Pause or delete the monitor in Kuma too, or it will report this station as down.", good: true })
+        setPhase("done")
+      })
+      return
+    }
+    if (phase === "choose" && plan) {
+      if (name === "up" || name === "k") return setPick((i) => Math.max(0, i - 1))
+      if (name === "down" || name === "j") return setPick((i) => Math.min(plan.available.length - 1, i + 1))
+      if (name === "return") {
+        setPlan({ ...plan, chosen: [plan.available[pick]!], needChoice: null })
+        return setPhase("confirm")
+      }
+    }
+    if (phase === "confirm" && name === "y") return apply()
+    if (phase === "error" || phase === "done") {
+      if (name === "u") {
+        setUrl("")
+        return setPhase("manual")
+      }
+      if (name === "r" && hasKuma) return startPlan()
+    }
+  })
+
+  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="♥ Station heartbeat  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content="know when this machine stops, from somewhere else" fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+      <Centered>{body()}</Centered>
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function intro() {
+    return (
+      <>
+        <text content="If this machine is off, its spinuptui is broken, or Scheduler's LaunchAgent is gone, nothing here can page you. So every Scheduler tick pings an Uptime Kuma push monitor running on another machine, and when the pings stop, Kuma alerts you itself." fg={theme.textDim} />
+        <box style={{ height: 1 }} />
+      </>
+    )
+  }
+
+  function body() {
+    if (phase === "loading" || phase === "working") {
+      return (
+        <box style={{ flexDirection: "row" }}>
+          <Spinner />
+          <text content={phase === "loading" ? "  Asking Uptime Kuma…" : "  Talking to Uptime Kuma…"} fg={theme.textDim} wrapMode="none" />
+        </box>
+      )
+    }
+    if (phase === "status" && current) {
+      const last = readLastTick()?.heartbeat ?? null
+      const pager = pagerProblem()
+      return (
+        <Panel title=" Station heartbeat " active>
+          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={`✓ Pings ${new URL(current.url).host} at the end of every Scheduler tick.`} fg={theme.good} wrapMode="none" />
+            <text content={`Set ${current.setAt.slice(0, 10)}.`} fg={theme.textDim} />
+            <box style={{ height: 1 }} />
+            <text
+              content={last ? `Last ping: ${last.ok ? "accepted" : `failed (${truncate(last.error ?? "", 50)})`}, status ${last.status}.` : "No Scheduler tick has pinged it yet."}
+              fg={last && !last.ok ? theme.bad : theme.text}
+            />
+            {pager && <text content={`Pings say "down" right now: ${pager}.`} fg={theme.warn} />}
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "choose" && plan) {
+      return (
+        <Panel title=" Who should Kuma alert? " active>
+          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
+            {intro()}
+            <text content="This Kuma has several notifications and none is the default. Pick the one that should wake you when this station goes quiet:" fg={theme.text} />
+            <box style={{ height: 1 }} />
+            {plan.available.map((n, i) => (
+              <text key={n.id} content={`${i === pick ? "▸ " : "  "}${n.name}`} fg={i === pick ? theme.accent : theme.text} wrapMode="none" />
+            ))}
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "confirm" && plan) {
+      const { steps, notes } = stationPlanText(plan)
+      return (
+        <Panel title=" The plan " active>
+          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
+            {intro()}
+            {steps.map((s, i) => (
+              <text key={s} content={`${i + 1}. ${s}`} fg={theme.text} />
+            ))}
+            <box style={{ height: 1 }} />
+            {notes.map((n) => (
+              <text key={n} content={n} fg={theme.textFaint} />
+            ))}
+            <box style={{ height: 1 }} />
+            <text content="Press y to do it · Esc to cancel" fg={theme.text} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "manual") {
+      return (
+        <Panel title=" Connect a Kuma push monitor " active>
+          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
+            {intro()}
+            <text content="SpinupTUI has no Kuma login to create the monitor with (connect one with M on any site). Or make it yourself: in Kuma, Add New Monitor → Monitor Type: Push, Heartbeat Interval 900 seconds, with a notification. Then paste its push URL:" fg={theme.text} />
+            <box style={{ height: 1 }} />
+            <input focused value={url} placeholder="https://kuma.example.com/api/push/…" onInput={(v: string) => setUrl(v)} onSubmit={submitUrl} style={INPUT_STYLE} />
+            <box style={{ height: 1 }} />
+            <text content="SpinupTUI pings it once and saves it only if Kuma accepts the ping." fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "confirmRemove") {
+      return (
+        <Panel title=" Remove the heartbeat? " active>
+          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
+            <text content="Scheduler stops pinging Kuma. The monitor stays in Kuma and will report this station as down, so pause or delete it there too." fg={theme.text} />
+            <box style={{ height: 1 }} />
+            <text content="Press y to remove · Esc to keep it" fg={theme.text} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+    const good = phase === "done" && message?.good
+    return (
+      <Panel title={good ? " Done " : " Didn't work "} active>
+        <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
+          <text content={`${good ? "✓" : "✕"} ${message?.text ?? ""}`} fg={good ? theme.good : theme.bad} />
+          {message?.remedy && (
+            <>
+              <box style={{ height: 1 }} />
+              <text content={message.remedy} fg={theme.textDim} />
+            </>
+          )}
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    const esc = { key: "esc", label: "close" }
+    if (phase === "status") return [{ key: "t", label: "test ping" }, ...(hasKuma ? [{ key: "s", label: "redo setup" }] : []), { key: "x", label: "remove" }, esc]
+    if (phase === "choose") return [{ key: "↑↓", label: "choose" }, { key: "⏎", label: "use it" }, esc]
+    if (phase === "confirm") return [{ key: "y", label: "do it" }, { key: "esc", label: "cancel" }]
+    if (phase === "manual") return [{ key: "⏎", label: "ping & save" }, { key: "esc", label: "cancel" }]
+    if (phase === "confirmRemove") return [{ key: "y", label: "remove" }, { key: "esc", label: "keep" }]
+    if (phase === "error") return [...(hasKuma ? [{ key: "r", label: "try again" }] : []), { key: "u", label: "paste a URL instead" }, esc]
+    return [esc]
+  }
+}