spinuptui 0.24.3 → 0.25.0

package/CHANGELOG.md

@@ -11,6 +11,41 @@ versions; such changes are called out here.
 
 ## [Unreleased]
 
+## [0.25.0] - 2026-08-12
+
+### Added
+- **Server actions now surfaces a pending SpinupWP platform upgrade**, not just
+  a silent badge. The overlay (`a`) shows a banner explaining the API only
+  exposes it as a flag with no actionable detail, and `w` jumps straight to the
+  server's page in the SpinupWP web app to run it.
+- **App version on the splash screen**, shown below the tagline while the first
+  batch of data loads.
+
+### Fixed
+- **The reboot-pending detail line now shows the real reason when the SSH probe
+  fails**, instead of a generic "couldn't read detail over SSH" message — e.g.
+  an SSH auth failure now shows the actual error. Both this and the new upgrade
+  banner wrap across lines instead of overflowing the panel on longer text.
+
+## [0.24.4] - 2026-08-06
+
+### Fixed
+- **The `Unknown component type: toaster` startup crash is now actually
+  fixed for real installs**, not just local project installs. `0.24.3`'s
+  `package.json` `overrides` only take effect when this repo's own
+  `package.json` is the root of the install — they're silently ignored when
+  spinuptui is installed as a dependency of something else, which is exactly
+  what a global `bun add -g` / `npm install -g` does, so the crash persisted
+  for every real user. Root cause traces back to the toast library
+  (`@opentui-ui/toast`) itself: it's stuck on a peer-dependency range from
+  opentui's `0.1.x` days, and no version pin on our side can bind how a
+  downstream install resolves *its* transitive dependencies. Every call site
+  in this app only ever fires a single-line success message, so it's
+  replaced with a small first-party toast implementation (`src/ui/toast.ts`
+  + `src/ui/ToastStack.tsx`) built directly on the `@opentui/core`/
+  `@opentui/react` we already depend on — no external package, no peer-
+  dependency surface for a future version bump to break again.
+
 ## [0.24.3] - 2026-08-06
 
 ### Fixed
@@ -1280,7 +1315,9 @@ Initial tagged release.
 ### Notes
 - Read-only release: works with a SpinupWP **Read Only** API token.
 
-[Unreleased]: https://github.com/mwender/spinupwp-tui/compare/v0.24.3...HEAD
+[Unreleased]: https://github.com/mwender/spinupwp-tui/compare/v0.25.0...HEAD
+[0.25.0]: https://github.com/mwender/spinupwp-tui/compare/v0.24.4...v0.25.0
+[0.24.4]: https://github.com/mwender/spinupwp-tui/compare/v0.24.3...v0.24.4
 [0.24.3]: https://github.com/mwender/spinupwp-tui/compare/v0.24.2...v0.24.3
 [0.24.2]: https://github.com/mwender/spinupwp-tui/compare/v0.24.1...v0.24.2
 [0.24.1]: https://github.com/mwender/spinupwp-tui/compare/v0.24.0...v0.24.1

package/README.md

@@ -320,8 +320,10 @@ Full details: [docs/php-upgrade.md](docs/php-upgrade.md).
 ## Server actions
 
 `a` on a server reboots it or restarts a service (Nginx/PHP-FPM/MySQL/Redis),
-and shows *why* a reboot is pending (the actual OS packages, read over SSH).
-Needs a Read/Write token. Full details: [docs/server-actions.md](docs/server-actions.md).
+shows *why* a reboot is pending (the actual OS packages, read over SSH), and for
+a pending SpinupWP platform upgrade — which the API can't act on — offers `w` to
+jump straight to it in the SpinupWP web app. Needs a Read/Write token. Full
+details: [docs/server-actions.md](docs/server-actions.md).
 
 ## Site monitoring
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spinuptui",
-  "version": "0.24.3",
+  "version": "0.25.0",
   "description": "SpinupTUI — a terminal dashboard for browsing, monitoring, and managing your SpinupWP servers and sites.",
   "type": "module",
   "bin": {
@@ -41,9 +41,8 @@
   "author": "Michael Wender",
   "license": "MIT",
   "dependencies": {
-    "@opentui-ui/toast": "^0.0.5",
-    "@opentui/core": "0.4.2",
-    "@opentui/react": "0.4.2",
+    "@opentui/core": "^0.4.1",
+    "@opentui/react": "^0.4.1",
     "react": "^19.0.0",
     "socket.io-client": "^4.8.3"
   },
@@ -51,9 +50,5 @@
     "@types/bun": "^1.3.14",
     "@types/react": "^19.0.0",
     "typescript": "^5.6.0"
-  },
-  "overrides": {
-    "@opentui/core": "0.4.2",
-    "@opentui/react": "0.4.2"
   }
 }

package/src/ui/App.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
-import { Toaster } from "@opentui-ui/toast/react"
+import { ToastStack } from "./ToastStack.tsx"
 import { theme } from "../lib/theme.ts"
 import { useStore } from "./store.tsx"
 import { Splash } from "./Splash.tsx"
@@ -262,10 +262,7 @@ export function App() {
       {store.connectZoneTarget && <ProviderConnect />}
       {store.dnsRecordsTarget && <DnsRecords />}
       {store.kumaSite && <KumaSite />}
-      {/* Async-completion toasts (PHP upgrade, server reboot/restart). Mounted last
-          so it draws over every view + overlay; top-right, nudged clear of the
-          2-row Header. It never takes keyboard focus. */}
-      <Toaster position="top-right" offset={{ top: 2, right: 2 }} />
+      <ToastStack />
     </box>
   )
 }

package/src/ui/Splash.tsx

@@ -4,6 +4,7 @@
 import { useEffect, useState } from "react"
 import { theme } from "../lib/theme.ts"
 import { Spinner } from "./components.tsx"
+import { APP_VERSION } from "../version.ts"
 
 const TAGLINE = "Terminal control center for your SpinupWP fleet"
 
@@ -40,6 +41,8 @@ export function Splash({ status }: { status: string }) {
       <box style={{ height: 1 }} />
       <text content={TAGLINE} fg={theme.text} />
       <box style={{ height: 1 }} />
+      <text content={`Version ${APP_VERSION}`} fg={theme.brand} />
+      <box style={{ height: 1 }} />
       <Pulse />
       <box style={{ height: 2 }} />
       <box style={{ flexDirection: "row" }}>

package/src/ui/ToastStack.tsx

@@ -0,0 +1,33 @@
+// Renders the toast queue from ./toast.ts. See that file for why this is
+// first-party instead of a dependency. Mounted last in App.tsx so it draws
+// over every view + overlay; top-right, nudged clear of the 2-row Header.
+// It never takes keyboard focus.
+
+import { useSyncExternalStore } from "react"
+import { theme } from "../lib/theme.ts"
+import { getToasts, subscribeToasts } from "./toast.ts"
+
+const TOAST_WIDTH = 60
+
+export function ToastStack() {
+  const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <box style={{ position: "absolute", top: 2, right: 2, flexDirection: "column", gap: 1, zIndex: 300 }}>
+      {toasts.map((t) => (
+        <box
+          key={t.id}
+          border
+          borderColor={theme.good}
+          backgroundColor={theme.bgPanel}
+          style={{ flexDirection: "row", gap: 1, maxWidth: TOAST_WIDTH, paddingLeft: 1, paddingRight: 1 }}
+        >
+          <text content="✓" fg={theme.good} />
+          <text content={t.message} fg={theme.text} />
+        </box>
+      ))}
+    </box>
+  )
+}

package/src/ui/store.tsx

@@ -6,7 +6,7 @@
 // trigger a refresh.
 
 import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react"
-import { toast } from "@opentui-ui/toast"
+import { toast } from "./toast.ts"
 import { SpinupWPClient, ApiError, type ServerService, type SpinupWPClientLike } from "../api/client.ts"
 import { isDevMode } from "../dev/devMode.ts"
 import { createMockClient } from "../dev/mockClient.ts"

package/src/ui/toast.ts

@@ -0,0 +1,49 @@
+// Minimal first-party toast notifications.
+//
+// Replaces the @opentui-ui/toast package, which is stuck on a peer-dependency
+// range from opentui's 0.1.x days and breaks against the @opentui/core 0.4.x
+// line we're on (see CHANGELOG v0.24.2/v0.24.3). Every call site in this app
+// only ever fires a single-line success message, so a small first-party
+// implementation is simpler — and immune to upstream drift — than depending
+// on a package built for a much larger feature set we don't use.
+//
+// A plain module-level subscriber list (rather than React state) so callers
+// outside the component tree — store.tsx's async completion handlers — can
+// fire a toast without needing a ref or context. ToastStack.tsx reads this
+// via useSyncExternalStore.
+
+export interface ToastItem {
+  id: number
+  message: string
+}
+
+const TOAST_DURATION_MS = 4000
+
+let nextId = 1
+let toasts: ToastItem[] = []
+const listeners = new Set<() => void>()
+
+function notify() {
+  for (const listener of listeners) listener()
+}
+
+export function subscribeToasts(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => listeners.delete(listener)
+}
+
+export function getToasts(): ToastItem[] {
+  return toasts
+}
+
+export const toast = {
+  success(message: string) {
+    const id = nextId++
+    toasts = [...toasts, { id, message }]
+    notify()
+    setTimeout(() => {
+      toasts = toasts.filter((t) => t.id !== id)
+      notify()
+    }, TOAST_DURATION_MS)
+  },
+}

package/src/ui/views/ServerActions.tsx

@@ -15,6 +15,9 @@ 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"
 import type { ServerOpKind } from "../store.tsx"
 
@@ -56,9 +59,11 @@ export function ServerActions() {
     rebootInfoLoading,
     rebootInfoErrors,
     loadRebootInfo,
+    accountSlug,
   } = store
 
   const rebootRequired = !!server?.reboot_required
+  const upgradeRequired = !!server?.upgrade_required
   const [phase, setPhase] = useState<Phase>("pick")
   // Cursor starts on Reboot when one is pending, else on the first restart.
   const [index, setIndex] = useState(() => (server?.reboot_required ? 0 : 1))
@@ -108,6 +113,12 @@ export function ServerActions() {
           setTarget(ACTIONS[index])
           setPhase("confirm")
           return
+        case "w":
+          if (upgradeRequired && server) {
+            openUrl(serverWebUrl(server.id, accountSlug))
+            toast.success(accountSlug ? "Opening in SpinupWP…" : "Set accountSlug for deep links — opening dashboard")
+          }
+          return
       }
       return
     }
@@ -179,17 +190,17 @@ export function ServerActions() {
             {/* Reboot "why" context */}
             {rebootRequired && (
               <>
-                <box style={{ flexDirection: "row", height: 1 }}>
-                  <text content="⚠ reboot pending — " fg={theme.warn} style={{ flexShrink: 0 }} />
+                <box style={{ flexDirection: "column" }}>
+                  <text content="⚠ reboot pending" fg={theme.warn} wrapMode="none" />
                   {infoLoading ? (
                     <box style={{ flexDirection: "row" }}>
                       <Spinner interval={120} />
                       <text content=" checking what's pending…" fg={theme.textDim} wrapMode="none" />
                     </box>
                   ) : info ? (
-                    <text content={rebootSummary(info)} fg={theme.textDim} wrapMode="none" style={{ flexShrink: 1 }} />
+                    <text content={rebootSummary(info)} fg={theme.textDim} />
                   ) : infoError ? (
-                    <text content="couldn't read detail over SSH" fg={theme.textFaint} wrapMode="none" />
+                    <text content={infoError} fg={theme.textFaint} />
                   ) : (
                     <text content="reboot required" fg={theme.textDim} wrapMode="none" />
                   )}
@@ -197,6 +208,20 @@ export function ServerActions() {
                 <box style={{ height: 1 }} />
               </>
             )}
+            {/* SpinupWP platform upgrade — the API only exposes this as a flag,
+                no detail; the only actionable path is the web app. Two lines
+                (not a height:1 row) so the explanation can wrap instead of
+                overflowing the panel — see the flexGrow/flexShrink gotcha in
+                CLAUDE.md. */}
+            {upgradeRequired && (
+              <>
+                <box style={{ flexDirection: "column" }}>
+                  <text content="⬆ SpinupWP upgrade pending" fg={theme.warn} wrapMode="none" />
+                  <text content="Not doable from here — press w to open it in SpinupWP." fg={theme.textDim} />
+                </box>
+                <box style={{ height: 1 }} />
+              </>
+            )}
             {ACTIONS.map((a, i) => {
               const selected = i === index
               const recommended = a.kind === "reboot" && rebootRequired
@@ -308,6 +333,7 @@ export function ServerActions() {
         return [
           { key: "↑↓/jk", label: "action" },
           { key: "⏎", label: "choose" },
+          ...(upgradeRequired ? [{ key: "w", label: "open in SpinupWP" }] : []),
           { key: "esc", label: "cancel" },
         ]
       case "confirm":