spinuptui 1.1.2 → 1.2.0

package/src/ui/offlineRun.tsx

@@ -0,0 +1,82 @@
+// Shared by the two places that take sites offline: the server actions menu
+// (`a`, the whole server) and the site overlay (`O`, one site). The work itself
+// is lib/offline.ts; this is the progress state and panel around it.
+//
+// It runs in the overlay rather than the store: what it changes is recorded on
+// disk as it goes, so closing the overlay mid-run loses only the progress
+// lines, never the ability to undo it.
+
+import { useState } from "react"
+import { tmpdir } from "node:os"
+import { join } from "node:path"
+import { theme } from "../lib/theme.ts"
+import { isDevMode } from "../dev/devMode.ts"
+import { Panel, Spinner } from "./components.tsx"
+import { toast } from "./toast.ts"
+
+// Dev Mode's fake servers must never land in the real account's offline record.
+export const offlineDir = () => (isDevMode() ? join(tmpdir(), "spinuptui-dev-offline") : undefined)
+
+export interface OfflineRun {
+  mode: "offline" | "online"
+  lines: string[]
+  finished: boolean
+  summary?: string
+  failed?: boolean
+}
+
+export type OfflineJob = (onProgress: (line: string) => void) => Promise<{ summary: string; failed: boolean }>
+
+// `label` prefixes the completion toast (a server or site name), since the
+// overlay may be closed by the time it finishes.
+export function useOfflineRun(refresh: () => Promise<void>) {
+  const [run, setRun] = useState<OfflineRun | null>(null)
+  const start = (mode: OfflineRun["mode"], label: string, job: OfflineJob) => {
+    const push = (line: string) => setRun((r) => (r ? { ...r, lines: [...r.lines, line] } : r))
+    setRun({ mode, lines: [], finished: false })
+    void (async () => {
+      let summary: string
+      let failed: boolean
+      try {
+        ;({ summary, failed } = await job(push))
+      } catch (err) {
+        summary = (err as Error).message
+        failed = true
+      }
+      setRun((r) => (r ? { ...r, finished: true, summary, failed } : r))
+      if (failed) toast.error(`${label}: ${summary}`)
+      else toast.success(`${label}: ${summary}`)
+      await refresh()
+    })()
+  }
+  return { run, start }
+}
+
+export function OfflineProgress({ run, plural }: { run: OfflineRun; plural: boolean }) {
+  const shown = run.lines.slice(-10)
+  const what = plural ? "sites" : "site"
+  return (
+    <Panel title={run.mode === "offline" ? ` Taking ${what} offline ` : ` Bringing ${what} back online `} active>
+      <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+        {shown.map((l, i) => (
+          <text key={i} content={l} fg={l.includes("✕") ? theme.bad : l.includes("✓") ? theme.good : theme.textDim} wrapMode="none" />
+        ))}
+        <box style={{ height: 1 }} />
+        {run.finished ? (
+          <text content={`${run.failed ? "✕" : "✓"} ${run.summary}`} fg={run.failed ? theme.bad : theme.good} />
+        ) : (
+          <box style={{ flexDirection: "row" }}>
+            <Spinner />
+            <text content={plural ? "  Working — SpinupWP runs a server's sites one at a time." : "  Working — usually a few seconds."} fg={theme.textDim} wrapMode="none" />
+          </box>
+        )}
+        <box style={{ height: 1 }} />
+        <text
+          content={run.finished ? "Esc to close" : "Esc to close — it keeps running, and each change is recorded."}
+          fg={theme.textFaint}
+          wrapMode="none"
+        />
+      </box>
+    </Panel>
+  )
+}

package/src/ui/store.tsx

@@ -569,6 +569,9 @@ interface StoreValue extends DataState {
   // poll it to completion in the background.
   startHttpsToggle: (site: Site) => void
   clearHttpsToggle: (siteId: number) => void
+  // The site whose take-offline overlay (O) is open, or null.
+  siteOfflineSite: Site | null
+  setSiteOfflineSite: (s: Site | null) => void
   // The site whose purge-cache overlay is open, or null.
   purgeCacheSite: Site | null
   setPurgeCacheSite: (s: Site | null) => void
@@ -1040,6 +1043,7 @@ export function StoreProvider({ children }: { children: ReactNode }) {
   const [httpsToggleSite, setHttpsToggleSite] = useState<Site | null>(null)
   const [httpsToggles, setHttpsToggles] = useState<Map<number, HttpsToggleProgress>>(new Map())
   const [purgeCacheSite, setPurgeCacheSite] = useState<Site | null>(null)
+  const [siteOfflineSite, setSiteOfflineSite] = useState<Site | null>(null)
   const [purgeCacheProgress, setPurgeCacheProgress] = useState<Map<number, PurgeCacheProgress>>(new Map())
   const [serverActionsServer, setServerActionsServer] = useState<Server | null>(null)
   const [serverOps, setServerOps] = useState<Map<number, ServerOpProgress>>(new Map())
@@ -4414,6 +4418,8 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     clearHttpsToggle,
     purgeCacheSite,
     setPurgeCacheSite,
+    siteOfflineSite,
+    setSiteOfflineSite,
     purgeCacheProgress,
     startPurgeCache,
     clearPurgeCache,

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, 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, 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 [serverIndex, setServerIndex] = useState(0)
   const [siteIndex, setSiteIndex] = useState(0)
@@ -128,6 +128,11 @@ export function Browser({ rows }: { rows: number }) {
         // Purge page cache + object cache on the selected site.
         if (focus === "sites" && sites[siteIndex]) setPurgeCacheSite(sites[siteIndex])
         return
+      case "O":
+        // Take the selected site offline, or bring it back. The whole server's
+        // version is in the server actions menu (a).
+        if (focus === "sites" && sites[siteIndex]) setSiteOfflineSite(sites[siteIndex])
+        return
       case "M":
         // Uptime Kuma monitoring for the selected site (connect on first use).
         // Capital because lowercase m is media fallback here, matching Search.
@@ -324,6 +329,7 @@ export function Browser({ rows }: { rows: number }) {
             emptyText="No servers yet — press c to create one"
             renderRow={(s, selected) => {
               const count = sitesForServer(s.id).length
+              const offline = sitesForServer(s.id).filter((x) => x.disabled_at).length
               const op = serverOps.get(s.id)
               return (
                 <>
@@ -340,6 +346,7 @@ export function Browser({ rows }: { rows: number }) {
                   ) : (
                     s.reboot_required && <text content=" ↻ rbt" fg={selected ? theme.text : theme.warn} style={{ flexShrink: 0 }} />
                   )}
+                  {offline > 0 && <text content={offline === count ? " ⏻ off" : ` ⏻ ${offline} off`} fg={selected ? theme.text : theme.bad} style={{ flexShrink: 0 }} />}
                   {s.upgrade_required && <text content=" ⬆ upg" fg={selected ? theme.text : theme.warn} style={{ flexShrink: 0 }} />}
                   {isServerOsEol(s) && <text content=" ⚠ os" fg={selected ? theme.text : theme.bad} style={{ flexShrink: 0 }} />}
                   {isSudoConnected(s.id) && <text content=" ● sudo" fg={selected ? theme.text : theme.good} style={{ flexShrink: 0 }} />}
@@ -388,6 +395,7 @@ export function Browser({ rows }: { rows: number }) {
                       linked/key/HTTPS/cache/backup/updates badges moved to the Details
                       pane (already shown there for the selected site) to give the
                       domain name room on narrower terminals. */}
+                  {s.disabled_at && <text content="⏻ off " fg={selected ? theme.text : theme.bad} style={{ flexShrink: 0 }} />}
                   <WpCoreRowMark siteId={s.id} selected={selected} compact />
                   <text content={stackTag(stack).padEnd(7) + " "} fg={stackColor(stack, selected)} wrapMode="none" style={{ flexShrink: 0 }} />
                   <PhpVersionCell version={s.php_version} upgrade={phpUpgrades.get(s.id)} selected={selected} />

package/src/ui/views/Dashboard.tsx

@@ -61,10 +61,12 @@ export function Dashboard({ rows }: { rows: number }) {
     for (const s of servers) {
       if (s.reboot_required) items.push({ text: `${s.name} — reboot required`, color: theme.warn })
       if (s.upgrade_required) items.push({ text: `${s.name} — SpinupWP upgrade required`, color: theme.warn })
+      const off = sites.filter((x) => x.server_id === s.id && x.disabled_at).length
+      if (off) items.push({ text: `${s.name} — ${off} site${off === 1 ? "" : "s"} offline`, color: theme.bad })
       if (isServerOsEol(s)) items.push({ text: `${s.name} — Ubuntu ${s.ubuntu_version} is EOL, clone to a newer server`, color: theme.bad })
     }
     return items
-  }, [servers, isServerOsEol])
+  }, [servers, sites, isServerOsEol])
 
   const diskPct = agg.total > 0 ? (agg.used / agg.total) * 100 : 0
   const listRows = Math.max(3, rows - 9) // minus the stat-card band (5), status bar, and panel chrome

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, 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, 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 [query, setQuery] = useState("")
   const [selected, setSelected] = useState(0)
   // "query" = typing/filtering (input focused); "actions" = input blurred so the
@@ -153,6 +153,9 @@ export function Search({ rows }: { rows: number }) {
       case "P":
         if (current?.kind === "site") setPurgeCacheSite(current.site)
         return
+      case "O":
+        if (current?.kind === "site") setSiteOfflineSite(current.site)
+        return
       case "t":
         if (current?.kind === "site") flashMsg(openLocalTerminal(current.site.id))
         return

package/src/ui/views/ServerActions.tsx

@@ -1,4 +1,5 @@
-// Server actions overlay — reboot the server or restart a single service.
+// Server actions overlay — reboot the server, restart a single service, or take
+// its sites offline.
 //
 // Opened with `a` on a selected server (Servers tab / Search). Like the PHP
 // upgrade overlay: pick an action → confirm → POST → poll the event. The actual
@@ -6,6 +7,9 @@
 // (Esc) leaves it running and the server's row keeps a spinner. When a reboot is
 // pending, we SSH-probe the *why* (Ubuntu's pending-restart packages) and show
 // it — labeled as OS context, not as SpinupWP's internal logic.
+//
+// The last row takes every site on the server offline (or brings back the ones
+// that took down) — see lib/offline.ts and ../offlineRun.tsx.
 
 import { useEffect, useState } from "react"
 import { useKeyboard } from "@opentui/react"
@@ -20,8 +24,12 @@ import { serverWebUrl } from "../../lib/spinupweb.ts"
 import { toast } from "../toast.ts"
 import type { RebootInfo } from "../../lib/ssh.ts"
 import type { ServerOpKind } from "../store.tsx"
+import { loadConfig } from "../../config.ts"
+import { isDevMode } from "../../dev/devMode.ts"
+import { loadOfflineState, takeServerOffline, bringServerOnline } from "../../lib/offline.ts"
+import { offlineDir, useOfflineRun, OfflineProgress } from "../offlineRun.tsx"
 
-type Phase = "pick" | "confirm" | "tracking" | "done" | "error"
+type Phase = "pick" | "confirm" | "tracking" | "done" | "error" | "offline"
 
 interface Action {
   kind: ServerOpKind
@@ -60,6 +68,7 @@ export function ServerActions() {
     rebootInfoErrors,
     loadRebootInfo,
     accountSlug,
+    refresh,
   } = store
 
   const rebootRequired = !!server?.reboot_required
@@ -68,6 +77,18 @@ export function ServerActions() {
   // Cursor starts on Reboot when one is pending, else on the first restart.
   const [index, setIndex] = useState(() => (server?.reboot_required ? 0 : 1))
   const [target, setTarget] = useState<Action | null>(null)
+  const { run, start } = useOfflineRun(refresh)
+
+  // The offline row sits after the service actions. It offers to bring sites
+  // back when SpinupTUI took this server offline, and to take it offline
+  // otherwise.
+  const OFFLINE_INDEX = ACTIONS.length
+  const offlineRecord = server ? loadOfflineState(offlineDir()).servers[String(server.id)] : undefined
+  const offlineMode: "offline" | "online" = offlineRecord ? "online" : "offline"
+  const liveCount = server ? sitesForServer(server.id).filter((s) => !s.disabled_at).length : 0
+  const offlineLabel = offlineRecord
+    ? `Bring ${offlineRecord.sites.length} site${offlineRecord.sites.length === 1 ? "" : "s"} back online`
+    : `Take all ${liveCount} site${liveCount === 1 ? "" : "s"} offline`
 
   const siteCount = server ? sitesForServer(server.id).length : 0
   const info = server ? rebootInfo.get(server.id) : undefined
@@ -90,6 +111,27 @@ export function ServerActions() {
           ? "error"
           : "tracking"
 
+  const startOffline = () => {
+    if (!server) return
+    setPhase("offline")
+    const cfg = loadConfig()
+    start(offlineMode, server.name, async (onProgress) => {
+      const o = { onProgress, kuma: !isDevMode(), dir: offlineDir() }
+      if (offlineMode === "offline") {
+        const r = await takeServerOffline(store.client, cfg, server, o)
+        return {
+          failed: r.failed.length > 0,
+          summary: `${r.disabled.length} taken offline${r.failed.length ? `, ${r.failed.length} failed` : ""}${r.kuma === "shielded" ? " · Kuma monitors in maintenance" : ""}`,
+        }
+      }
+      const r = await bringServerOnline(store.client, cfg, server.id, o)
+      return {
+        failed: r.failed.length > 0,
+        summary: `${r.enabled.length} back online${r.alreadyOnline.length ? `, ${r.alreadyOnline.length} already were` : ""}${r.failed.length ? `, ${r.failed.length} failed — run it again` : ""}`,
+      }
+    })
+  }
+
   const close = () => {
     if (server && progress?.status === "failed") clearServerOp(server.id)
     setServerActionsServer(null)
@@ -103,14 +145,18 @@ export function ServerActions() {
       switch (name) {
         case "up":
         case "k":
-          return setIndex((i) => moveSelection(i, -1, ACTIONS.length))
+          return setIndex((i) => moveSelection(i, -1, ACTIONS.length + 1))
         case "down":
         case "j":
-          return setIndex((i) => moveSelection(i, 1, ACTIONS.length))
+          return setIndex((i) => moveSelection(i, 1, ACTIONS.length + 1))
         case "return":
         case "right":
         case "l":
-          setTarget(ACTIONS[index])
+          if (index === OFFLINE_INDEX && offlineMode === "offline" && liveCount === 0) {
+            toast.error("Every site on this server is already offline.")
+            return
+          }
+          setTarget(index === OFFLINE_INDEX ? null : ACTIONS[index]!)
           setPhase("confirm")
           return
         case "w":
@@ -125,6 +171,7 @@ export function ServerActions() {
 
     if (dp === "confirm") {
       if (name === "y") {
+        if (!target) return startOffline()
         if (server && target) {
           startServerOp(server, target.kind, target.verb)
           setPhase("tracking")
@@ -222,7 +269,7 @@ export function ServerActions() {
                 <box style={{ height: 1 }} />
               </>
             )}
-            {ACTIONS.map((a, i) => {
+            {[...ACTIONS.map((a, i) => {
               const selected = i === index
               const recommended = a.kind === "reboot" && rebootRequired
               const fg = selected ? theme.text : recommended ? theme.warn : theme.textDim
@@ -236,12 +283,60 @@ export function ServerActions() {
                   {recommended && <text content="(recommended)" fg={selected ? theme.text : theme.warn} style={{ flexShrink: 0 }} />}
                 </box>
               )
-            })}
+            }),
+            <box key="offline" style={{ flexDirection: "row", height: 1, backgroundColor: index === OFFLINE_INDEX ? theme.selectedBg : undefined }}>
+              <text
+                content={(index === OFFLINE_INDEX ? "❯ " : "  ") + "⏻ " + offlineLabel}
+                fg={index === OFFLINE_INDEX ? theme.text : offlineRecord ? theme.warn : theme.textDim}
+                style={{ flexGrow: 1 }}
+                wrapMode="none"
+              />
+            </box>]}
           </box>
         </Panel>
       )
     }
 
+    if (dp === "confirm" && !target) {
+      const domains = offlineRecord
+        ? offlineRecord.sites.map((s) => s.domain)
+        : sitesForServer(server!.id).filter((s) => !s.disabled_at).map((s) => s.domain)
+      const skipped = offlineRecord ? 0 : siteCount - liveCount
+      return (
+        <Panel title=" Confirm " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content={offlineRecord ? "Bring sites back online on " : "Take every site offline on "} fg={theme.text} wrapMode="none" />
+              <text content={truncate(server!.name, 30)} fg={theme.accent} wrapMode="none" />
+              <text content="?" fg={theme.text} />
+            </box>
+            <box style={{ height: 1 }} />
+            {offlineRecord ? (
+              <text content="Re-enables only the sites taken offline here; anything disabled another way stays as it is." fg={theme.textDim} />
+            ) : (
+              <>
+                <text content="nginx stops answering for these domains: visitors can't connect and no request reaches PHP." fg={theme.warn} />
+                <text content="Files, databases and certificates are untouched; bring them back from this menu." fg={theme.textDim} />
+              </>
+            )}
+            <box style={{ height: 1 }} />
+            {domains.slice(0, 8).map((d) => (
+              <text key={d} content={`  • ${d}`} fg={theme.textFaint} wrapMode="none" />
+            ))}
+            {domains.length > 8 && <text content={`  • …${domains.length - 8} more`} fg={theme.textFaint} wrapMode="none" />}
+            {skipped > 0 && <text content={`  ${skipped} already offline — left alone`} fg={theme.textFaint} wrapMode="none" />}
+            {store.kumaConfigured && (
+              <text content={offlineRecord ? "Their Uptime Kuma maintenance window closes once all are back." : "Uptime Kuma monitors enter a maintenance window — no alert flood."} fg={theme.textFaint} wrapMode="none" />
+            )}
+            <box style={{ height: 1 }} />
+            <text content="Press y to confirm · ← to go back · Esc to cancel" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "offline" && run) return <OfflineProgress run={run} plural />
+
     if (dp === "confirm") {
       const isReboot = target?.kind === "reboot"
       return (

package/src/ui/views/SiteOffline.tsx

@@ -0,0 +1,171 @@
+// Take one site offline, or bring it back — opened with `O` on a selected site
+// (Servers tab, Search, Stacks). The server-wide version is the last row of the
+// server actions menu (`a`); both share lib/offline.ts and ../offlineRun.tsx,
+// and a site taken offline here is recorded under its server, so bringing the
+// server back covers it too.
+//
+// The confirm screen is honest about the limit: PHP is shared by the whole
+// server, so while any other site on it is up, PHP is still reachable.
+
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel, Centered } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { loadConfig } from "../../config.ts"
+import { isDevMode } from "../../dev/devMode.ts"
+import { loadOfflineState, takeSiteOffline, bringServerOnline } from "../../lib/offline.ts"
+import { offlineDir, useOfflineRun, OfflineProgress } from "../offlineRun.tsx"
+
+type Phase = "confirm" | "running"
+
+export function SiteOffline() {
+  const store = useStore()
+  const { siteOfflineSite, setSiteOfflineSite, sites, servers, sitesForServer, refresh, kumaConfigured } = store
+  // The overlay was opened with a snapshot; read the live row so a refresh
+  // after the run shows the new state.
+  const site = sites.find((s) => s.id === siteOfflineSite?.id) ?? siteOfflineSite
+  const server = site ? servers.find((s) => s.id === site.server_id) : undefined
+
+  const [phase, setPhase] = useState<Phase>("confirm")
+  const { run, start } = useOfflineRun(refresh)
+
+  const recorded = !!(site && loadOfflineState(offlineDir()).servers[String(site.server_id)]?.sites.some((s) => s.id === site.id))
+  // What `y` would do. A site disabled some other way isn't ours to re-enable.
+  const mode: "offline" | "online" | "foreign" = !site?.disabled_at ? "offline" : recorded ? "online" : "foreign"
+  const neighbours = site && server ? sitesForServer(server.id).filter((s) => s.id !== site.id && !s.disabled_at) : []
+
+  const close = () => setSiteOfflineSite(null)
+
+  const go = () => {
+    if (!site || !server || mode === "foreign") return
+    setPhase("running")
+    const cfg = loadConfig()
+    start(mode, site.domain, async (onProgress) => {
+      const o = { onProgress, kuma: !isDevMode(), dir: offlineDir() }
+      if (mode === "offline") {
+        const r = await takeSiteOffline(store.client, cfg, server, site.id, o)
+        const failed = r.failed.length > 0
+        return { failed, summary: failed ? r.failed[0]!.error : `offline${r.kuma === "shielded" ? " · Kuma monitors in maintenance" : ""}` }
+      }
+      const r = await bringServerOnline(store.client, cfg, server.id, { ...o, siteIds: [site.id] })
+      const failed = r.failed.length > 0
+      return { failed, summary: failed ? `${r.failed[0]!.error} Press O to retry.` : "back online" }
+    })
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+    if (phase === "confirm" && name === "y") go()
+  })
+
+  if (!site) return null
+
+  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="⏻ Site offline  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 40)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+        {server && <text content={truncate(server.name, 30)} fg={theme.textFaint} wrapMode="none" style={{ flexShrink: 0 }} />}
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar
+        hints={phase === "confirm" && mode !== "foreign" ? [{ key: "y", label: "confirm" }, { key: "esc", label: "cancel" }] : [{ key: "esc", label: "close" }]}
+        showGlobal={false}
+      />
+    </box>
+  )
+
+  function renderBody() {
+    if (phase === "running" && run) return <OfflineProgress run={run} plural={false} />
+
+    if (mode === "foreign") {
+      return (
+        <Panel title=" Already offline " active>
+          <box style={{ flexDirection: "column", width: 62, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={`${site!.domain} is disabled, but not by SpinupTUI, so it's left alone.`} fg={theme.text} />
+            <box style={{ height: 1 }} />
+            <text content="Re-enable it in SpinupWP if that's what you want (w opens the site there from the list)." fg={theme.textDim} />
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (mode === "online") {
+      return (
+        <Panel title=" Confirm " active>
+          <box style={{ flexDirection: "column", width: 62, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="Bring " fg={theme.text} wrapMode="none" />
+              <text content={truncate(site!.domain, 36)} fg={theme.accent} wrapMode="none" />
+              <text content=" back online?" fg={theme.text} wrapMode="none" />
+            </box>
+            <box style={{ height: 1 }} />
+            <text content="It serves traffic again exactly as before. Other sites on the server stay as they are." fg={theme.textDim} />
+            <box style={{ height: 1 }} />
+            <text content="Press y to confirm · Esc to cancel" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    const n = neighbours.length
+    return (
+      <Panel title=" Confirm " active>
+        <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+          <box style={{ flexDirection: "row" }}>
+            <text content="Take " fg={theme.text} wrapMode="none" />
+            <text content={truncate(site!.domain, 40)} fg={theme.accent} wrapMode="none" />
+            <text content=" offline?" fg={theme.text} wrapMode="none" />
+          </box>
+          <box style={{ height: 1 }} />
+          <text content="nginx stops answering for its domains: visitors can't connect and no request reaches PHP through this site." fg={theme.warn} />
+          <text content="Files, database and certificate are untouched; O again brings it back." fg={theme.textDim} />
+          <box style={{ height: 1 }} />
+          {n > 0 ? (
+            <>
+              <text
+                content={`${n} other site${n === 1 ? "" : "s"} on ${server?.name ?? "this server"} stay${n === 1 ? "s" : ""} up, so the server's PHP is still reachable through ${n === 1 ? "it" : "them"}.`}
+                fg={theme.textDim}
+              />
+              <text content="To protect the whole server, use a on the server instead." fg={theme.textDim} />
+            </>
+          ) : (
+            <text content="It's the only site still up on this server." fg={theme.textDim} />
+          )}
+          {kumaConfigured && <text content="Its Uptime Kuma monitors enter a maintenance window — no false alerts." fg={theme.textFaint} />}
+          <box style={{ height: 1 }} />
+          <text content="Press y to confirm · Esc to cancel" fg={theme.textFaint} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+}

package/src/ui/views/Stacks.tsx

@@ -75,7 +75,7 @@ function nonWpSub(kind: ProbeKind | null, vanity: boolean): NonWpSub {
 export function Stacks({ rows }: { rows: number }) {
   const store = useStore()
   const wpCoreJobs = useWpCoreJobs()
-  const { sites, serverById, route, inputMode, overlayOpen, probes, probingIds, probeErrors, runProbe, runProbeMany, isProbeStale, isPhpEol, accountSlug, setPhpUpgradeSite, setBulkWpGroup, phpUpgrades, setHttpsToggleSite, setPurgeCacheSite, setLocalLinkSite, openLocalTerminal, openLocalUrl, localLinks, setDiscoverOpen, setForgottenOpen, setForgottenStack, sshSite, setKumaSite } =
+  const { sites, serverById, route, inputMode, overlayOpen, probes, probingIds, probeErrors, runProbe, runProbeMany, isProbeStale, isPhpEol, accountSlug, setPhpUpgradeSite, setBulkWpGroup, phpUpgrades, setHttpsToggleSite, setPurgeCacheSite, setSiteOfflineSite, setLocalLinkSite, openLocalTerminal, openLocalUrl, localLinks, setDiscoverOpen, setForgottenOpen, setForgottenStack, sshSite, setKumaSite } =
     store
 
   const [groupIndex, setGroupIndex] = useState(0)
@@ -254,6 +254,10 @@ export function Stacks({ rows }: { rows: number }) {
         // Purge page cache + object cache on the selected site (sites pane only).
         if (focus === "sites" && groupSites[siteIndex]) setPurgeCacheSite(groupSites[siteIndex])
         return
+      case "O":
+        // Take the selected site offline / bring it back (sites pane only).
+        if (focus === "sites" && groupSites[siteIndex]) setSiteOfflineSite(groupSites[siteIndex])
+        return
       case "M":
         // Site monitoring (Uptime Kuma) — capital to match Search, where
         // lowercase m means media fallback.