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

package/src/ui/views/HomeSync.tsx

@@ -0,0 +1,299 @@
+// The SpinupTUI folder overlay (Modules tab, `f`): where your jobs and reports
+// live, and sharing that folder across machines — `spinuptui home sync` with
+// the confirm-before-firing pattern. Pick how to share it, give a name or URL,
+// see the plan, press y. Nothing runs git until then.
+
+import { useEffect, useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { openUrl } from "../../lib/open.ts"
+import { Panel, Spinner, Centered } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { applySync, describeShare, ensureHome, ghReady, homeStatus, planSync, tilde, type ApplyResult, type HomeStatus, type SyncOptions, type SyncPlan } from "../../lib/home.ts"
+
+type Phase = "loading" | "pick" | "input" | "planning" | "confirm" | "blocked" | "applying" | "done" | "error"
+
+interface Choice {
+  key: keyof SyncOptions
+  label: string
+  detail: string
+  prompt: string
+  placeholder: string
+  initial: string
+}
+
+const INPUT_STYLE = { backgroundColor: theme.bgAlt, focusedBackgroundColor: theme.bgAlt, textColor: theme.text }
+
+export function HomeSync() {
+  const { setHomeSyncOpen, setInputMode } = useStore()
+  const [phase, setPhase] = useState<Phase>("loading")
+  const [status, setStatus] = useState<HomeStatus | null>(null)
+  const [gh, setGh] = useState<string | null>(null) // why gh can't be used; null = it can
+  const [selected, setSelected] = useState(0)
+  const [value, setValue] = useState("")
+  const [plan, setPlan] = useState<SyncPlan | null>(null)
+  const [result, setResult] = useState<ApplyResult | null>(null)
+
+  const choices: Choice[] = [
+    {
+      key: "github",
+      label: "Create a private GitHub repository for it",
+      detail: gh ? `${gh} Or make one yourself and use the next option.` : "Uses the GitHub CLI you're signed in to.",
+      prompt: "Repository name (or owner/name)",
+      placeholder: "spinuptui-home",
+      initial: "spinuptui-home",
+    },
+    {
+      key: "remote",
+      label: "Use an empty private repository I've made",
+      detail: "Any git host: GitHub, GitLab, Gitea, your own server.",
+      prompt: "Repository URL",
+      placeholder: "git@github.com:you/spinuptui-home.git",
+      initial: "",
+    },
+    {
+      key: "clone",
+      label: "Set this machine up from another machine's folder",
+      detail: "For a second machine: clones the repository you shared from the first.",
+      prompt: "Repository URL",
+      placeholder: "git@github.com:you/spinuptui-home.git",
+      initial: "",
+    },
+  ]
+  const choice = choices[selected]!
+
+  const close = () => setHomeSyncOpen(false)
+
+  const makePlan = (opts: SyncOptions) => {
+    setPhase("planning")
+    void planSync(opts).then((p) => {
+      setPlan(p)
+      setPhase(p.blockers.length ? "blocked" : "confirm")
+    })
+  }
+
+  useEffect(() => {
+    void Promise.all([homeStatus(), ghReady()]).then(([s, why]) => {
+      setStatus(s)
+      setGh(why)
+      // No usable gh: start on the option that works without it.
+      if (why) setSelected(1)
+      // Already shared: the plan is "push what's pending", or nothing.
+      if (s.git && s.remote) makePlan({})
+      else setPhase("pick")
+    })
+    // Once, on open.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // The input owns the keyboard while it's showing.
+  useEffect(() => {
+    if (phase !== "input") return
+    setInputMode(true)
+    return () => setInputMode(false)
+  }, [phase, setInputMode])
+
+  const apply = () => {
+    if (!plan) return
+    setPhase("applying")
+    void applySync(plan).then(async (r) => {
+      if (r.ok) ensureHome()
+      setResult(r)
+      setStatus(await homeStatus())
+      setPhase(r.ok ? "done" : "error")
+    })
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (phase === "input") {
+      if (name === "escape") setPhase("pick")
+      return
+    }
+    if (name === "escape" || name === "q") return close()
+    if (name === "o" && status?.exists) return openUrl(status.path)
+    if (phase === "pick") {
+      if (name === "up" || name === "k") return setSelected((i) => Math.max(0, i - 1))
+      if (name === "down" || name === "j") return setSelected((i) => Math.min(choices.length - 1, i + 1))
+      if (name === "return") {
+        if (choice.key === "github" && gh) return
+        setValue(choice.initial)
+        return setPhase("input")
+      }
+    }
+    if (phase === "confirm" && name === "y" && plan && plan.steps.length) return apply()
+    if ((phase === "blocked" || phase === "error") && name === "r" && !(status?.git && status.remote)) return setPhase("pick")
+  })
+
+  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="▤ Your SpinupTUI folder  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={status ? tilde(status.path) : ""} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+      <Centered>{body()}</Centered>
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function header() {
+    if (!status) return null
+    return (
+      <>
+        <text content="Your Scheduler jobs and reports live here, and later other modules' work too." fg={theme.text} />
+        <text
+          content={`${status.exists ? "" : "Created the first time a module writes to it. "}Its README.md explains each part.`}
+          fg={theme.textDim}
+        />
+        <box style={{ height: 1 }} />
+        <box style={{ flexDirection: "row" }}>
+          <text content="Now: " fg={theme.textDim} style={{ flexShrink: 0 }} />
+          <text content={truncate(describeShare(status), 66)} fg={status.git && status.remote ? theme.good : theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        </box>
+        {status.station && (
+          <text content={`Its jobs run on ${status.station === status.thisMachine ? "this machine" : status.station}.`} fg={theme.textDim} wrapMode="none" />
+        )}
+        <box style={{ height: 1 }} />
+      </>
+    )
+  }
+
+  function body() {
+    if (phase === "loading" || phase === "planning" || phase === "applying") {
+      return (
+        <box style={{ flexDirection: "row" }}>
+          <Spinner />
+          <text content={phase === "applying" ? "  Sharing the folder…" : phase === "planning" ? "  Checking the repository…" : "  Looking at the folder…"} fg={theme.textDim} wrapMode="none" />
+        </box>
+      )
+    }
+    if (phase === "pick") {
+      return (
+        <Panel title=" Share it across machines " active>
+          <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+            {header()}
+            <text content="Shared through a private git repository, you can queue jobs from any machine" fg={theme.text} />
+            <text content="and read the reports anywhere. Scheduler pulls it before each run and pushes" fg={theme.text} />
+            <text content="the reports after." fg={theme.text} />
+            <box style={{ height: 1 }} />
+            {choices.map((c, i) => {
+              const off = c.key === "github" && !!gh
+              const sel = i === selected
+              return (
+                <box key={c.key} style={{ flexDirection: "column" }}>
+                  <text content={`${sel ? "▸ " : "  "}${c.label}`} fg={off ? theme.textFaint : sel ? theme.accent : theme.text} wrapMode="none" />
+                  {sel && <text content={`    ${c.detail}`} fg={off ? theme.warn : theme.textDim} />}
+                </box>
+              )
+            })}
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "input") {
+      return (
+        <Panel title={` ${choice.label} `} active>
+          <box style={{ flexDirection: "column", width: 72, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={choice.prompt} fg={theme.accent} />
+            <input
+              focused
+              value={value}
+              placeholder={choice.placeholder}
+              onInput={(v: string) => setValue(v)}
+              onSubmit={() => value.trim() && makePlan({ [choice.key]: value.trim() })}
+              style={INPUT_STYLE}
+            />
+            <box style={{ height: 1 }} />
+            <text content={choice.key === "clone" ? "Nothing changes until you've seen the plan." : "Keep it private: reports name your sites and clients. Nothing changes until you've seen the plan."} fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "blocked" && plan) {
+      return (
+        <Panel title=" Can't share it yet " active>
+          <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+            {plan.blockers.map((b) => (
+              <box key={b.reason + b.message} style={{ flexDirection: "column" }}>
+                <text content={`✕ ${b.message}`} fg={theme.bad} />
+                {b.remedy && <text content={`  ${b.remedy}`} fg={theme.textDim} />}
+                <box style={{ height: 1 }} />
+              </box>
+            ))}
+          </box>
+        </Panel>
+      )
+    }
+    if (phase === "confirm" && plan) {
+      if (!plan.steps.length) {
+        return (
+          <Panel title=" Shared " active>
+            <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+              {header()}
+              <text content="✓ Shared and up to date. Nothing to do." fg={theme.good} />
+              <box style={{ height: 1 }} />
+              <text content={`On another machine: spinuptui home sync --clone ${status?.remote ?? "<url>"} --plan`} fg={theme.textFaint} />
+              {plan.notes.map((n) => (
+                <text key={n} content={n} fg={theme.warn} />
+              ))}
+            </box>
+          </Panel>
+        )
+      }
+      return (
+        <Panel title=" The plan " active>
+          <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+            {header()}
+            {plan.steps.map((s, i) => (
+              <text key={s.label} content={`${i + 1}. ${truncate(s.label, 70)}`} fg={theme.text} wrapMode="none" />
+            ))}
+            <box style={{ height: 1 }} />
+            {plan.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 === "done" && result) {
+      return (
+        <Panel title=" Shared " active>
+          <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+            {result.done.map((d) => (
+              <text key={d} content={`✓ ${truncate(d, 72)}`} fg={theme.good} wrapMode="none" />
+            ))}
+            <box style={{ height: 1 }} />
+            {status && <text content={`${tilde(status.path)} is ${truncate(describeShare(status), 56)}.`} fg={theme.text} />}
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+    return (
+      <Panel title=" Stopped " active>
+        <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+          {result?.done.map((d) => (
+            <text key={d} content={`✓ ${truncate(d, 72)}`} fg={theme.good} wrapMode="none" />
+          ))}
+          <text content={`✕ ${result?.failed?.step ?? "Something went wrong"}: ${result?.failed?.message ?? ""}`} fg={theme.bad} />
+          <box style={{ height: 1 }} />
+          <text content="The steps above it are done. Fix this and run it again: it picks up where it stopped." fg={theme.textDim} />
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    const open = status?.exists ? [{ key: "o", label: "open folder" }] : []
+    if (phase === "pick") return [{ key: "↑↓", label: "choose" }, { key: "⏎", label: "next" }, ...open, { key: "esc", label: "close" }]
+    if (phase === "input") return [{ key: "⏎", label: "see the plan" }, { key: "esc", label: "back" }]
+    if (phase === "confirm" && plan?.steps.length) return [{ key: "y", label: "do it" }, ...open, { key: "esc", label: "cancel" }]
+    if (phase === "blocked" || phase === "error") return [...(status?.git && status.remote ? [] : [{ key: "r", label: "back" }]), ...open, { key: "esc", label: "close" }]
+    return [...open, { key: "esc", label: "close" }]
+  }
+}

package/src/ui/views/Modules.tsx

@@ -16,6 +16,8 @@ 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"
+import { describeShare, homeStatus, tilde, type HomeStatus } from "../../lib/home.ts"
 
 interface Card {
   id: ModuleId
@@ -42,16 +44,16 @@ function stateLabel(card: Card, status: ModuleStatus | undefined): { dot: string
 
 export function Modules({ rows }: { rows: number }) {
   const store = useStore()
-  const { route, inputMode, overlayOpen, beaconSetupOpen, setBeaconSetupOpen } = store
+  const { route, inputMode, overlayOpen, beaconSetupOpen, setBeaconSetupOpen, schedulerInstallOpen, setSchedulerInstallOpen, homeSyncOpen, setHomeSyncOpen, heartbeatSetupOpen, setHeartbeatSetupOpen } = 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 the setup overlay closes (it may have
-  // changed the config). status() is cheap and never sends anything.
+  // 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) return
+    if (beaconSetupOpen || schedulerInstallOpen || homeSyncOpen || heartbeatSetupOpen) 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])))
@@ -59,7 +61,7 @@ export function Modules({ rows }: { rows: number }) {
     return () => {
       live = false
     }
-  }, [beaconSetupOpen, tick])
+  }, [beaconSetupOpen, schedulerInstallOpen, homeSyncOpen, heartbeatSetupOpen, tick])
 
   const isActive = route === "modules" && !inputMode && !overlayOpen
   const card = CARDS[selected]!
@@ -88,6 +90,13 @@ export function Modules({ rows }: { rows: number }) {
       case "return":
       case "s":
         if (card.id === "beacon") return setBeaconSetupOpen(true)
+        if (card.id === "scheduler") return setSchedulerInstallOpen(true)
+        return
+      case "f":
+        if (card.id === "scheduler") return setHomeSyncOpen(true)
+        return
+      case "h":
+        if (card.id === "scheduler") return setHeartbeatSetupOpen(true)
         return
       case "t":
         if (card.id === "beacon" && status && status.state !== "not_configured") return sendTest()
@@ -140,6 +149,13 @@ export function Modules({ rows }: { rows: number }) {
         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" },
+                { key: "f", label: "your folder" },
+                { key: "h", label: "heartbeat" },
+              ]
+            : []),
           ...(beaconReady ? [{ key: "t", label: testing ? "sending…" : "test page" }] : []),
         ]}
       />
@@ -191,6 +207,54 @@ 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} />
       )}
+      {card.id === "scheduler" && <SchedulerDetail installed={status.state !== "not_configured"} refreshKey={status} />}
     </box>
   )
 }
+
+function SchedulerDetail({ installed, refreshKey }: { installed: boolean; refreshKey: unknown }) {
+  const [runs] = useState(() => upcomingRuns())
+  // Level 0 of the SpinupTUI folder: always say where the work lands.
+  const [home, setHome] = useState<HomeStatus | null>(null)
+  const heartbeatSet = !!loadConfig().scheduler?.heartbeat
+  useEffect(() => {
+    let live = true
+    void homeStatus().then((h) => live && setHome(h))
+    return () => {
+      live = false
+    }
+  }, [refreshKey])
+  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 }} />
+      {home && <text content={`Jobs and reports: ${tilde(home.path)}`} fg={theme.textDim} wrapMode="none" />}
+      {home && <text content={`  ${describeShare(home)}`} fg={home.git && home.remote ? theme.good : theme.textDim} wrapMode="none" />}
+      <text content={home?.git && home.remote ? "f your folder" : "f share it across machines, so you can queue jobs from anywhere"} fg={theme.accent} wrapMode="none" />
+      <text content={heartbeatSet ? "h station heartbeat" : "h get alerted from elsewhere if this machine stops (station heartbeat)"} fg={theme.accent} wrapMode="none" />
+      <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" }]
+  }
+}

package/src/ui/views/Search.tsx

@@ -36,7 +36,7 @@ function score(haystack: string, q: string): number | null {
 
 export function Search({ rows }: { rows: number }) {
   const store = useStore()
-  const { servers, sites, serverById, sitesForServer, setInputMode, setRoute, route, overlayOpen, setHealthServer, setPhpUpgradeSite, setHttpsToggleSite, setPurgeCacheSite, setSiteOfflineSite, setServerActionsServer, accountSlug, localLinks, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setDbBackupSite, dbBackups, setDbSyncSite, dbSyncs, localSync, setMediaFallbackSite, beginClone, setSudoConnectServer, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setWpInventorySite, setGrantKeySite, runProbe, setEnableLocalSyncSite, setVanityServer, vanityJob } = store
+  const { servers, sites, serverById, sitesForServer, setInputMode, setRoute, route, overlayOpen, setHealthServer, setPhpUpgradeSite, setHttpsToggleSite, setPurgeCacheSite, setSiteOfflineSite, setServerActionsServer, openInSpinupWP, localLinks, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setDbBackupSite, dbBackups, setDbSyncSite, dbSyncs, localSync, setMediaFallbackSite, beginClone, setSudoConnectServer, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setWpInventorySite, setGrantKeySite, runProbe, setEnableLocalSyncSite, setVanityServer, vanityJob } = store
   const [query, setQuery] = useState("")
   const [selected, setSelected] = useState(0)
   // "query" = typing/filtering (input focused); "actions" = input blurred so the
@@ -101,9 +101,8 @@ export function Search({ rows }: { rows: number }) {
     openUrl((s.https?.enabled ? "https://" : "http://") + s.domain)
     flashMsg(`Opening ${s.domain}…`)
   }
-  const openInSpinup = (url: string) => {
-    openUrl(url)
-    flashMsg(accountSlug ? "Opening in SpinupWP…" : "Set accountSlug for deep links — opening dashboard")
+  const openInSpinup = (build: (slug: string) => string) => {
+    if (openInSpinupWP(build)) flashMsg("Opening in SpinupWP…")
   }
 
   useKeyboard((key) => {
@@ -141,8 +140,8 @@ export function Search({ rows }: { rows: number }) {
         if (current?.kind === "site") openSite(current.site)
         return
       case "w":
-        if (current?.kind === "site") openInSpinup(siteWebUrl(current.site.id, accountSlug))
-        else if (current?.kind === "server") openInSpinup(serverWebUrl(current.server.id, accountSlug))
+        if (current?.kind === "site") openInSpinup((slug) => siteWebUrl(current.site.id, slug))
+        else if (current?.kind === "server") openInSpinup((slug) => serverWebUrl(current.server.id, slug))
         return
       case "u":
         if (current?.kind === "site") setPhpUpgradeSite(current.site)

package/src/ui/views/ServerActions.tsx

@@ -19,7 +19,6 @@ import { Panel, Spinner, Centered } from "../components.tsx"
 import { StatusBar } from "../StatusBar.tsx"
 import { useStore } from "../store.tsx"
 import { moveSelection } from "../List.tsx"
-import { openUrl } from "../../lib/open.ts"
 import { serverWebUrl } from "../../lib/spinupweb.ts"
 import { toast } from "../toast.ts"
 import type { RebootInfo } from "../../lib/ssh.ts"
@@ -67,7 +66,7 @@ export function ServerActions() {
     rebootInfoLoading,
     rebootInfoErrors,
     loadRebootInfo,
-    accountSlug,
+    openInSpinupWP,
     refresh,
   } = store
 
@@ -161,8 +160,11 @@ export function ServerActions() {
           return
         case "w":
           if (upgradeRequired && server) {
-            openUrl(serverWebUrl(server.id, accountSlug))
-            toast.success(accountSlug ? "Opening in SpinupWP…" : "Set accountSlug for deep links — opening dashboard")
+            const id = server.id
+            if (openInSpinupWP((slug) => serverWebUrl(id, slug))) toast.success("Opening in SpinupWP…")
+            // No slug yet: the prompt takes over — close this overlay so its
+            // keys don't fire underneath.
+            else close()
           }
           return
       }