spinuptui 1.2.0-alpha.1 → 1.2.1

package/src/ui/views/BeaconSetup.tsx

@@ -1,268 +0,0 @@
-// Beacon setup overlay, opened with ⏎ on Beacon in the Modules tab. The same
-// guided flow as `spinuptui beacon setup` (lib/beaconSetup.ts): paste a bot
-// token, message the bot so Beacon can find the chat, then a test page — and
-// only then is anything saved.
-
-import { useEffect, useRef, useState } from "react"
-import { useKeyboard } from "@opentui/react"
-import { theme } from "../../lib/theme.ts"
-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 {
-  BOTFATHER_STEPS,
-  BOTFATHER_URL,
-  botLink,
-  channelExists,
-  discoverChat,
-  saveBeaconChannel,
-  sendConnectedMessage,
-  setupChannelName,
-  verifyBotToken,
-  type FoundChat,
-} from "../../lib/beaconSetup.ts"
-
-type Phase = "token" | "verifying" | "waiting" | "found" | "saving" | "done" | "error"
-
-const WIDTH = 70
-
-export function BeaconSetup() {
-  const { setBeaconSetupOpen, setInputMode } = useStore()
-  const [name] = useState(setupChannelName)
-  const [replacing] = useState(() => channelExists(name))
-  const [phase, setPhase] = useState<Phase>("token")
-  const [token, setToken] = useState("")
-  const [username, setUsername] = useState("")
-  const [chat, setChat] = useState<FoundChat | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [retryFrom, setRetryFrom] = useState<Phase>("token")
-  const abort = useRef<AbortController | null>(null)
-
-  useEffect(() => {
-    setInputMode(phase === "token")
-    return () => setInputMode(false)
-  }, [phase, setInputMode])
-
-  // Stop any long-poll when the overlay goes away.
-  useEffect(() => () => abort.current?.abort(), [])
-
-  const close = () => {
-    abort.current?.abort()
-    setInputMode(false)
-    setBeaconSetupOpen(false)
-  }
-
-  const fail = (message: string, from: Phase) => {
-    setError(message)
-    setRetryFrom(from)
-    setPhase("error")
-  }
-
-  const listen = (tok: string) => {
-    abort.current?.abort()
-    const ctrl = new AbortController()
-    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")
-    })
-  }
-
-  const submitToken = () => {
-    const tok = token.trim()
-    if (!tok) return
-    setPhase("verifying")
-    void verifyBotToken(tok).then((me) => {
-      if (!me.ok) return fail(me.error ?? "Telegram rejected the token.", "token")
-      setUsername(me.username ?? "")
-      listen(tok)
-    })
-  }
-
-  const save = () => {
-    if (!chat) return
-    const channel = { type: "telegram" as const, botToken: token.trim(), chatId: chat.chatId }
-    setPhase("saving")
-    void sendConnectedMessage(name, channel).then(async (r) => {
-      if (!r.ok) return fail(`Couldn't send the test message: ${r.message}. Nothing was saved.`, "found")
-      await saveBeaconChannel(name, channel, false)
-      setToken("") // don't keep the secret in component state once it's saved
-      setPhase("done")
-    })
-  }
-
-  useKeyboard((key) => {
-    const k = key.name ?? ""
-    if (k === "escape") return close()
-    if (phase === "token") return // SecretInput owns typing; Enter submits
-    if (phase === "waiting") {
-      if (k === "o" && username) return openUrl(botLink(username))
-      return
-    }
-    if (phase === "found") {
-      if (k === "return") return save()
-      if (k === "r") return listen(token.trim())
-      return
-    }
-    if (phase === "error") {
-      if (k === "r") {
-        setError(null)
-        if (retryFrom === "waiting") return listen(token.trim())
-        if (retryFrom === "found" && chat) return setPhase("found")
-        setToken("") // a rejected token is replaced, not edited
-        return setPhase("token")
-      }
-      if (k === "q") return close()
-      return
-    }
-    if (phase === "done" && (k === "return" || k === "q")) return close()
-  })
-
-  return (
-    <box
-      style={{
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        flexDirection: "column",
-        backgroundColor: theme.bg,
-        zIndex: 200,
-      }}
-    >
-      <box style={{ flexDirection: "row", height: 1, backgroundColor: theme.bgAlt, paddingLeft: 1, paddingRight: 1 }}>
-        <text content="Beacon  " fg={theme.brand} style={{ flexShrink: 0 }} />
-        <text content="connect a Telegram pager" fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
-        <box style={{ flexGrow: 1 }} />
-        <text content={`channel “${name}”`} fg={theme.textFaint} style={{ flexShrink: 0 }} />
-      </box>
-      <Centered>{body()}</Centered>
-      <StatusBar hints={hints()} showGlobal={false} />
-    </box>
-  )
-
-  function body() {
-    if (phase === "token") {
-      return (
-        <Panel title=" 1 · Your bot " active>
-          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
-            <text content="Beacon pages you through your own Telegram bot. Making one is free:" fg={theme.textDim} />
-            <box style={{ height: 1 }} />
-            {BOTFATHER_STEPS.map((s, i) => (
-              <text key={i} content={`  ${i + 1}. ${s}`} fg={theme.text} />
-            ))}
-            <box style={{ height: 1 }} />
-            <text content="Then paste the token here (it's hidden as you type):" fg={theme.textDim} />
-            <SecretInput focused value={token} placeholder="123456789:AAE…" onChange={setToken} onSubmit={submitToken} width={WIDTH - 2} />
-            {replacing && (
-              <>
-                <box style={{ height: 1 }} />
-                <text content={`⚠ This replaces the existing “${name}” channel once the new one is tested.`} fg={theme.warn} />
-              </>
-            )}
-            <box style={{ height: 1 }} />
-            <text content={`⏎ continue · Esc cancel · BotFather: ${BOTFATHER_URL}`} fg={theme.textFaint} wrapMode="none" />
-          </box>
-        </Panel>
-      )
-    }
-
-    if (phase === "verifying" || phase === "saving") {
-      return (
-        <box style={{ flexDirection: "row" }}>
-          <Spinner />
-          <text content={phase === "verifying" ? "  Checking the token with Telegram…" : "  Sending a test message…"} fg={theme.textDim} />
-        </box>
-      )
-    }
-
-    if (phase === "waiting") {
-      return (
-        <Panel title=" 2 · Say hello to your bot " active>
-          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
-            <box style={{ flexDirection: "row" }}>
-              <text content="✓ Bot " fg={theme.good} wrapMode="none" />
-              <text content={username ? `@${username}` : "found"} fg={theme.accent} wrapMode="none" />
-            </box>
-            <box style={{ height: 1 }} />
-            <text content="Now open Telegram and send your bot any message, so Beacon knows which" fg={theme.text} />
-            <text content="chat to page." fg={theme.text} />
-            {username && <text content={`  ${botLink(username)}   (press o to open it)`} fg={theme.accent} wrapMode="none" />}
-            <box style={{ height: 1 }} />
-            <text content="To page a group instead, add the bot to the group and send /start there." fg={theme.textFaint} />
-            <box style={{ height: 1 }} />
-            <box style={{ flexDirection: "row" }}>
-              <Spinner />
-              <text content="  Waiting for your message (up to 5 minutes)…" fg={theme.textDim} />
-            </box>
-          </box>
-        </Panel>
-      )
-    }
-
-    if (phase === "found" && chat) {
-      return (
-        <Panel title=" 3 · Confirm the chat " active>
-          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
-            <box style={{ flexDirection: "row" }}>
-              <text content="✓ Message received from " fg={theme.good} wrapMode="none" />
-              <text content={chat.label} fg={theme.accent} wrapMode="none" style={{ flexShrink: 1 }} />
-            </box>
-            <text content={`  a ${chat.kind} chat`} fg={theme.textFaint} />
-            <box style={{ height: 1 }} />
-            <text content="Beacon will page this chat. Press ⏎ to send a test message and save." fg={theme.text} />
-            <text content="Wrong chat? Press r, then message the bot from the right one." fg={theme.textDim} />
-          </box>
-        </Panel>
-      )
-    }
-
-    if (phase === "done") {
-      return (
-        <Panel title=" Beacon connected " active>
-          <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
-            <text content={`● Channel “${name}” is set up, and a test message is on its way.`} fg={theme.good} />
-            <box style={{ height: 1 }} />
-            <text content="Anything on this machine can page you now:" fg={theme.textDim} />
-            <text content={`  spinuptui beacon send "web1 is down"`} fg={theme.accent} wrapMode="none" />
-            <text content={`  some-report | spinuptui beacon send --silent`} fg={theme.accent} wrapMode="none" />
-            <box style={{ height: 1 }} />
-            <text content="⏎ done" fg={theme.textFaint} />
-          </box>
-        </Panel>
-      )
-    }
-
-    return (
-      <Panel title=" Not connected yet " active>
-        <box style={{ flexDirection: "column", width: WIDTH, paddingTop: 1, paddingBottom: 1 }}>
-          <text content={`✕ ${error ?? "Something went wrong."}`} fg={theme.bad} />
-          <box style={{ height: 1 }} />
-          <text content="Nothing was saved. r — try again · Esc — close" fg={theme.textDim} />
-        </box>
-      </Panel>
-    )
-  }
-
-  function hints() {
-    if (phase === "token") return [{ key: "⏎", label: "continue" }, { key: "esc", label: "cancel" }]
-    if (phase === "waiting")
-      return [...(username ? [{ key: "o", label: "open the bot" }] : []), { key: "esc", label: "cancel" }]
-    if (phase === "found")
-      return [
-        { key: "⏎", label: "test & save" },
-        { key: "r", label: "different chat" },
-        { key: "esc", label: "cancel" },
-      ]
-    if (phase === "error") return [{ key: "r", label: "try again" }, { key: "esc", label: "close" }]
-    if (phase === "done") return [{ key: "⏎", label: "done" }]
-    return [{ key: "esc", label: "cancel" }]
-  }
-}

package/src/ui/views/Modules.tsx

@@ -1,196 +0,0 @@
-// 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"
-
-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 } = 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.
-  const [tick, setTick] = useState(0)
-  useEffect(() => {
-    if (beaconSetupOpen) 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, 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)
-        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" }] : []),
-          ...(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} />
-      )}
-    </box>
-  )
-}