spinuptui 0.24.3 → 0.24.4

package/CHANGELOG.md

@@ -11,6 +11,25 @@ versions; such changes are called out here.
 
 ## [Unreleased]
 
+## [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 +1299,8 @@ 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.24.4...HEAD
+[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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spinuptui",
-  "version": "0.24.3",
+  "version": "0.24.4",
   "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/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)
+  },
+}