spinuptui 0.26.1 → 0.28.0

package/src/ui/views/Stacks.tsx

@@ -3,56 +3,83 @@
 // Left pane: selectable composition groups. The three top-level buckets
 // (Standard WP / Bedrock / Non-WP) use the EFFECTIVE stack — a conclusive Tier-2
 // probe overrides the API heuristic — so counts drift toward reality as you
-// probe. Non-WP expands into named sub-rows (WHMCS / Laravel / Static HTML /
-// Unknown / unprobed) from cached probes.
+// probe. The WordPress buckets (Standard WP / Bedrock / Radicle) expand into one
+// sub-row per probed core version, newest first — the "who still needs the
+// security release" view; Non-WP expands into named sub-rows (WHMCS / Laravel /
+// Static HTML / Vanity Site / Unknown / unprobed). Both come from cached probes,
+// except Vanity Site, which is derived with no SSH (see `nonWpSub`).
 //
 // Middle pane: the sites in the selected group. `d` probes the selected site;
 // `D` probes the whole selected group (bounded concurrency). Right pane: the
 // fleet-wide PHP version distribution with EOL versions flagged.
 
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { useKeyboard } from "@opentui/react"
 import { theme, statusColor, statusDot } from "../../lib/theme.ts"
 import { bar, truncate } from "../../lib/format.ts"
 import { STACKS, effectiveStack, stackColor, type Stack } from "../../lib/stack.ts"
 import { phpSortKey } from "../../lib/phpEol.ts"
 import { probeKindColor, type ProbeKind } from "../../lib/probe.ts"
+import { compareVersions } from "../../lib/wpCore.ts"
 import { Panel, Spinner, PhpVersionCell, SiteMetaCell } from "../components.tsx"
+import { WpCoreRowMark, clearBulk, peekBulk, useWpCoreJobs } from "../wpCoreJobs.tsx"
 import { List, moveSelection } from "../List.tsx"
 import { StatusBar } from "../StatusBar.tsx"
 import { SiteContextStrip, SITE_CONTEXT_STRIP_HEIGHT } from "../Details.tsx"
 import { openUrl } from "../../lib/open.ts"
 import { siteWebUrl } from "../../lib/spinupweb.ts"
+import { isVanityPair } from "../../lib/vanitySite.ts"
 import { useStore } from "../store.tsx"
 import type { Site } from "../../api/types.ts"
 
 type Focus = "groups" | "sites"
 
 // A selectable row in the composition pane: a top-level bucket (level 0) or a
-// Non-WP sub-category (level 1).
+// sub-row (level 1) — a WP core version under a WordPress stack, or a Non-WP
+// sub-category.
 interface Group {
   id: string
   label: string
+  title?: string // sites-pane title when the bare label lacks context ("7.0.2" → "Bedrock · WP 7.0.2")
   level: 0 | 1
   color: string
   sites: Site[]
 }
 
-// Non-WP sub-categories, in display order. `kind: null` = not yet probed.
-const NONWP_SUBS: { kind: ProbeKind | null; label: string }[] = [
+const WP_STACKS: Stack[] = ["Standard WP", "Bedrock", "Radicle"]
+
+
+// Non-WP sub-categories, in display order. `kind: null` = not yet probed;
+// "vanity" is the site at its server's own hostname (see `nonWpSub`).
+type NonWpSub = ProbeKind | "vanity" | null
+const NONWP_SUBS: { kind: NonWpSub; label: string }[] = [
   { kind: "whmcs", label: "WHMCS" },
   { kind: "laravel", label: "Laravel" },
   { kind: "static", label: "Static HTML" },
+  { kind: "vanity", label: "Vanity Site" },
   { kind: "unknown", label: "Unknown" },
   { kind: null, label: "unprobed" },
 ]
+const VANITY_COLOR = theme.info
+
+// Which Non-WP sub-row a site belongs in. A vanity site is known from the API
+// alone (domain === its server's hostname, the same `isVanityPair` every other
+// vanity feature keys off), so it claims the site whether it's unprobed or the
+// probe came back Unknown/Static — the placeholder page reads as neither. A
+// positively identified app (WHMCS/Laravel) living at the hostname still wins.
+function nonWpSub(kind: ProbeKind | null, vanity: boolean): NonWpSub {
+  if (vanity && (kind === null || kind === "unknown" || kind === "static")) return "vanity"
+  return kind
+}
 
 export function Stacks({ rows }: { rows: number }) {
   const store = useStore()
-  const { sites, serverById, route, inputMode, overlayOpen, probes, probingIds, probeErrors, runProbe, runProbeMany, isProbeStale, isPhpEol, accountSlug, setPhpUpgradeSite, phpUpgrades, setHttpsToggleSite, setPurgeCacheSite, setLocalLinkSite, openLocalTerminal, openLocalUrl, localLinks, setDiscoverOpen, setForgottenOpen, setForgottenStack, sshSite, setKumaSite } =
+  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 } =
     store
 
   const [groupIndex, setGroupIndex] = useState(0)
+  const groupTopRef = useRef(0)
   const [siteIndex, setSiteIndex] = useState(0)
   const [focus, setFocus] = useState<Focus>("groups")
   const [flash, setFlash] = useState<string | null>(null)
@@ -75,19 +102,54 @@ export function Stacks({ rows }: { rows: number }) {
     }
     for (const list of byStack.values()) list.sort((a, b) => a.domain.localeCompare(b.domain))
 
+    // The newest core version seen anywhere in the fleet — the one every
+    // version row is measured against (highlighted; older rows are dimmed).
+    let newestWp: string | null = null
+    for (const st of WP_STACKS) {
+      for (const site of byStack.get(st)!) {
+        const v = probes.get(site.id)?.result.version
+        if (v && (!newestWp || compareVersions(v, newestWp) > 0)) newestWp = v
+      }
+    }
+
     const groups: Group[] = []
     for (const st of STACKS) {
       const bucket = byStack.get(st)!
       groups.push({ id: st, label: st, level: 0, color: stackColor(st), sites: bucket })
+      if (WP_STACKS.includes(st)) {
+        const byVersion = new Map<string, Site[]>()
+        const noVersion: Site[] = []
+        for (const site of bucket) {
+          const v = probes.get(site.id)?.result.version
+          if (v) byVersion.set(v, [...(byVersion.get(v) ?? []), site])
+          else noVersion.push(site)
+        }
+        for (const v of [...byVersion.keys()].sort((a, b) => compareVersions(b, a))) {
+          groups.push({
+            id: `wp:${st}:${v}`,
+            label: `WP ${v}`,
+            title: `${st} · WP ${v}`,
+            level: 1,
+            color: v === newestWp ? theme.good : theme.textDim,
+            sites: byVersion.get(v)!,
+          })
+        }
+        // Only worth a row when some are versioned — otherwise it'd just repeat the bucket.
+        if (noVersion.length && byVersion.size) {
+          groups.push({ id: `wp:${st}:none`, label: "no version", title: `${st} · version unknown`, level: 1, color: theme.textFaint, sites: noVersion })
+        }
+      }
       if (st === "Non-WP") {
         for (const sub of NONWP_SUBS) {
-          const subSites = bucket.filter((site) => (probes.get(site.id)?.result.kind ?? null) === sub.kind)
+          const subSites = bucket.filter(
+            (site) => nonWpSub(probes.get(site.id)?.result.kind ?? null, isVanityPair(site.domain, serverById(site.server_id)?.name ?? "")) === sub.kind,
+          )
           if (subSites.length === 0) continue
           groups.push({
             id: `nonwp:${sub.label}`,
             label: sub.label,
             level: 1,
-            color: sub.kind ? probeKindColor(sub.kind) : theme.textFaint,
+            color: sub.kind === "vanity" ? VANITY_COLOR : sub.kind ? probeKindColor(sub.kind) : theme.textFaint,
             sites: subSites,
           })
         }
@@ -95,12 +157,14 @@ export function Stacks({ rows }: { rows: number }) {
     }
     const php = [...phpCounts.entries()].sort((a, b) => phpSortKey(b[0]) - phpSortKey(a[0]))
     return { groups, php }
-  }, [sites, probes])
+  }, [sites, probes, serverById])
 
   // Keep selection in range as groups appear/disappear with probing.
   const safeGroupIndex = Math.min(groupIndex, groups.length - 1)
   const selectedGroup = groups[safeGroupIndex]
   const groupSites = selectedGroup?.sites ?? []
+  // A "WP x.y.z" (or "no version") row under a WordPress stack — bulk-updatable.
+  const isVersionGroup = !!selectedGroup && selectedGroup.id.startsWith("wp:")
   const total = sites.length || 1
 
   useEffect(() => {
@@ -167,8 +231,20 @@ export function Stacks({ rows }: { rows: number }) {
         }
         return
       case "u":
-        // Upgrade the selected site's PHP version (sites pane only).
+        // Sites pane: the selected site's Update menu. Groups pane, on a WP
+        // version row: bulk-update that whole group (a running or unseen bulk
+        // run takes over the overlay instead — only one exists at a time).
         if (focus === "sites" && groupSites[siteIndex]) setPhpUpgradeSite(groupSites[siteIndex])
+        else if (focus === "groups" && isVersionGroup && groupSites.length) {
+          const title = selectedGroup.title ?? selectedGroup.label
+          // A finished run's summary belongs to its own group: reopening THAT
+          // group shows it, any other group starts fresh (and the old summary is
+          // dropped). A run still in progress takes over regardless — one at a time.
+          const prev = peekBulk()
+          if (prev?.phase === "done" && prev.title !== title) clearBulk()
+          setBulkWpGroup({ title, sites: groupSites })
+        }
+        else if (focus === "groups") flashMsg("u updates a WordPress version group — pick a “WP x.y.z” row, or a site")
         return
       case "H":
         // Enable/disable HTTPS on the selected site (sites pane only).
@@ -224,6 +300,13 @@ export function Stacks({ rows }: { rows: number }) {
   })
 
   const listRows = Math.max(3, rows - 6 - SITE_CONTEXT_STRIP_HEIGHT)
+  // Version sub-rows can outgrow a short terminal — scroll the groups pane just
+  // enough to keep the selection visible (same viewport as the sites list).
+  // Only moves when the selection leaves the viewport, like List does.
+  let groupTop = Math.min(groupTopRef.current, Math.max(0, groups.length - listRows))
+  if (safeGroupIndex < groupTop) groupTop = safeGroupIndex
+  else if (safeGroupIndex >= groupTop + listRows) groupTop = safeGroupIndex - listRows + 1
+  groupTopRef.current = groupTop
   const maxPhp = Math.max(1, ...php.map(([, n]) => n))
 
   const hints =
@@ -231,6 +314,7 @@ export function Stacks({ rows }: { rows: number }) {
       ? [
           { key: "↑↓/jk", label: "select" },
           { key: "→/⏎", label: "view sites" },
+          ...(isVersionGroup ? [{ key: "u", label: `update ${groupSites.length} ${groupSites.length === 1 ? "site" : "sites"}` }] : []),
           { key: "D", label: "identify all" },
           { key: "S", label: "find local copies" },
           { key: "f", label: "needs local copy" },
@@ -239,7 +323,7 @@ export function Stacks({ rows }: { rows: number }) {
           { key: "↑↓/jk", label: "select site" },
           { key: "←/esc", label: "back" },
           { key: "d", label: "identify app" },
-          { key: "u", label: "change PHP" },
+          { key: "u", label: "update" },
           { key: "o", label: "open" },
           { key: "w", label: "SpinupWP" },
           { key: "s", label: "ssh" },
@@ -257,7 +341,8 @@ export function Stacks({ rows }: { rows: number }) {
         {/* Composition groups (top-level buckets + Non-WP sub-rows) */}
         <Panel title={` Stacks (${sites.length}) `} active={focus === "groups"} width={36}>
           <box style={{ flexGrow: 1, flexDirection: "column" }}>
-            {groups.map((grp, i) => {
+            {groups.slice(groupTop, groupTop + listRows).map((grp, j) => {
+              const i = groupTop + j
               const n = grp.sites.length
               const selected = i === safeGroupIndex
               const sel = selected && focus === "groups"
@@ -291,7 +376,7 @@ export function Stacks({ rows }: { rows: number }) {
         </Panel>
 
         {/* Sites in the selected group */}
-        <Panel title={` ${selectedGroup?.label ?? "—"} · sites (${groupSites.length}) `} active={focus === "sites"} flexGrow={1}>
+        <Panel title={` ${selectedGroup?.title ?? selectedGroup?.label ?? "—"} · sites (${groupSites.length}) `} active={focus === "sites"} flexGrow={1}>
           <List
             items={groupSites}
             selectedIndex={siteIndex}
@@ -303,7 +388,13 @@ export function Stacks({ rows }: { rows: number }) {
               const cached = probes.get(s.id)
               const probing = probingIds.has(s.id)
               const errored = probeErrors.has(s.id)
+              const wpRunning = wpCoreJobs.get(s.id)?.result === null
               const faint = selected ? theme.text : theme.textFaint
+              // Vanity rows say so instead of the probe's "Unknown"/"Static HTML"
+              // (or "· press d" — there's nothing to identify).
+              const vanity =
+                effectiveStack(s, cached?.result.kind) === "Non-WP" &&
+                nonWpSub(cached?.result.kind ?? null, isVanityPair(s.domain, serverById(s.server_id)?.name ?? "")) === "vanity"
               const updates = (s.wp_plugin_updates || 0) + (s.wp_theme_updates || 0) + (s.wp_core_update ? 1 : 0)
               return (
                 <>
@@ -318,8 +409,13 @@ export function Stacks({ rows }: { rows: number }) {
                     <SiteMetaCell linked={localLinks.has(s.id)} updates={updates} selected={selected} />
                   </box>
                   <box style={{ flexShrink: 0, flexDirection: "row", marginLeft: 1 }}>
-                    {probing ? (
+                    {wpRunning ? (
+                      // A core update in flight replaces the version it's about to change.
+                      <WpCoreRowMark siteId={s.id} selected={selected} />
+                    ) : probing ? (
                       <Spinner color={selected ? theme.text : theme.brand} />
+                    ) : vanity ? (
+                      <text content="Vanity Site" fg={selected ? theme.text : VANITY_COLOR} wrapMode="none" />
                     ) : cached ? (
                       <text
                         content={truncate(cached.result.label, 20) + (isProbeStale(s) ? "*" : "")}
@@ -331,6 +427,8 @@ export function Stacks({ rows }: { rows: number }) {
                     ) : (
                       <text content="· press d" fg={faint} wrapMode="none" />
                     )}
+                    {/* Failed: keep the (unchanged) version, flag it — like PHP's ⬆!. */}
+                    {!wpRunning && <WpCoreRowMark siteId={s.id} selected={selected} />}
                   </box>
                   <text
                     content={truncate(serverById(s.server_id)?.name ?? "", 16)}

package/src/ui/views/WpCoreUpdate.tsx

@@ -0,0 +1,322 @@
+// WordPress core update — the "WordPress core" branch of the `u` Update menu.
+//
+// check (SSH, read-only) → pick a version → confirm → update → done/failed. The
+// work itself lives in lib/wpCore.ts; the job is tracked in ../wpCoreJobs.tsx, so
+// Esc doesn't abandon it: the SSH run keeps going, a toast reports the outcome,
+// and reopening the overlay on the same site picks the job back up.
+
+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 { moveSelection } from "../List.tsx"
+import type { Site } from "../../api/types.ts"
+import { checkWpCore, type WpCoreStatus } from "../../lib/wpCore.ts"
+import { setCoreJob, startCoreUpdate, useWpCoreJob } from "../wpCoreJobs.tsx"
+
+// ---- view -------------------------------------------------------------------
+
+type Phase = "checking" | "checkError" | "upToDate" | "pick" | "confirm"
+
+export function WpCoreUpdate({ site, onBack, onClose }: { site: Site; onBack: () => void; onClose: () => void }) {
+  const { serverById, sshUser, noteWpVersion } = useStore()
+  const server = serverById(site.server_id)
+  const job = useWpCoreJob(site.id)
+
+  const [phase, setPhase] = useState<Phase>("checking")
+  const [status, setStatus] = useState<WpCoreStatus | null>(null)
+  const [checkError, setCheckError] = useState("")
+  const [index, setIndex] = useState(0)
+  const [nonce, setNonce] = useState(0) // bump to re-check
+
+  useEffect(() => {
+    if (!server) {
+      setCheckError("This site's server isn't loaded.")
+      setPhase("checkError")
+      return
+    }
+    let live = true
+    setPhase("checking")
+    void checkWpCore(server, site, sshUser).then((res) => {
+      if (!live) return
+      if (!res.ok) {
+        setCheckError(`${res.error} (${res.target})`)
+        setPhase("checkError")
+        return
+      }
+      setStatus(res.status)
+      // A fresh live read — correct any stale row while we're here, update or not.
+      noteWpVersion(site, res.status.current)
+      // Land on the first minor (security/maintenance) release when there is one
+      // — the usual reason to be here — rather than a major jump.
+      const minor = res.status.offers.findIndex((o) => o.updateType === "minor")
+      setIndex(minor >= 0 ? minor : 0)
+      setPhase(res.status.offers.length ? "pick" : "upToDate")
+    })
+    return () => {
+      live = false
+    }
+    // Keyed on ids, not objects: a background store refresh hands back a new
+    // server object, and re-checking then would yank the user out of pick/confirm.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [server?.id, site.id, sshUser, nonce])
+
+  const offers = status?.offers ?? []
+  const target = offers[index]
+  // A job for this site overrides the local flow: running → progress; settled → its result.
+  const view: Phase | "running" | "done" | "failed" = job ? (job.result === null ? "running" : job.result.ok ? "done" : "failed") : phase
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") {
+      if (job?.result) setCoreJob(site.id, null) // the outcome's been seen — don't replay it next time
+      return onClose()
+    }
+    if (view === "done" || view === "failed") {
+      if (name === "r" || (view === "done" && (name === "left" || name === "h"))) {
+        setCoreJob(site.id, null)
+        setNonce((n) => n + 1)
+      }
+      return
+    }
+    if (view === "running") return
+    if (view === "checking" || view === "checkError" || view === "upToDate") {
+      if (name === "left" || name === "h") return onBack()
+      if (name === "r" && view !== "checking") setNonce((n) => n + 1)
+      return
+    }
+    if (view === "pick") {
+      switch (name) {
+        case "up":
+        case "k":
+          return setIndex((i) => moveSelection(i, -1, offers.length))
+        case "down":
+        case "j":
+          return setIndex((i) => moveSelection(i, 1, offers.length))
+        case "left":
+        case "h":
+          return onBack()
+        case "return":
+        case "right":
+        case "l":
+          if (target) setPhase("confirm")
+          return
+      }
+      return
+    }
+    if (view === "confirm") {
+      if (name === "y" && server && status && target) startCoreUpdate(server, site, sshUser, target.version, status.multisite, noteWpVersion)
+      else if (name === "left" || name === "h") 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="⬆ Update WordPress  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 40)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+        <text content={status ? `current WP ${status.current}` : ""} fg={theme.textFaint} style={{ flexShrink: 0 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function composerLines(): string[] {
+    if (!status?.composer) return []
+    const pin = status.composer.lockedVersion ? `composer.lock pins ${status.composer.lockedVersion}` : "Composer manages core"
+    return [
+      `Core is installed by Composer (${pin}). This patches the`,
+      "files on the server only — the next composer install (a deploy,",
+      "a clone) puts the locked version back. Run composer update and",
+      "commit the lock to make it stick.",
+    ]
+  }
+
+  function renderBody() {
+    if (view === "checking") {
+      return (
+        <box style={{ flexDirection: "row" }}>
+          <Spinner />
+          <text content="  Checking WordPress over SSH…" fg={theme.textDim} />
+        </box>
+      )
+    }
+
+    if (view === "checkError") {
+      return (
+        <Panel title=" Couldn't check WordPress " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={`✕ ${checkError}`} fg={theme.bad} />
+            <box style={{ height: 1 }} />
+            <text content="r to retry · ← back · Esc to close" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (view === "upToDate") {
+      return (
+        <Panel title=" Up to date " active>
+          <box style={{ flexDirection: "column", width: 56, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="✓ " fg={theme.good} />
+              <text content={`WordPress ${status?.current} is the latest version.`} fg={theme.text} wrapMode="none" />
+            </box>
+            <box style={{ height: 1 }} />
+            <text content="r to re-check · ← back · Esc to close" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (view === "pick") {
+      return (
+        <Panel title=" Choose a WordPress version " active>
+          <box style={{ flexDirection: "column", width: 56 }}>
+            {offers.map((o, i) => {
+              const selected = i === index
+              const tag = o.updateType ? `  (${o.updateType})` : ""
+              return (
+                <box key={o.version} style={{ flexDirection: "row", height: 1, backgroundColor: selected ? theme.selectedBg : undefined }}>
+                  <text content={(selected ? "❯ " : "  ") + `WordPress ${o.version}`} fg={selected ? theme.text : theme.textDim} style={{ flexGrow: 1 }} wrapMode="none" />
+                  <text content={tag} fg={selected ? theme.text : o.updateType === "major" ? theme.warn : theme.textFaint} style={{ flexShrink: 0 }} />
+                </box>
+              )
+            })}
+            <box style={{ height: 1 }} />
+            <text content={`Installed: WordPress ${status?.current}`} fg={theme.textFaint} wrapMode="none" />
+            {status?.composer ? <text content="Composer-managed core — see the note on the next screen." fg={theme.warn} wrapMode="none" /> : null}
+          </box>
+        </Panel>
+      )
+    }
+
+    if (view === "confirm" && target && status) {
+      return (
+        <Panel title=" Confirm update " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="Update " fg={theme.text} />
+              <text content={truncate(site.domain, 40)} fg={theme.accent} wrapMode="none" />
+            </box>
+            <box style={{ flexDirection: "row" }}>
+              <text content={`from WordPress ${status.current}`} fg={theme.textDim} />
+              <text content="  →  " fg={theme.textFaint} />
+              <text content={`WordPress ${target.version}`} fg={theme.good} />
+            </box>
+            <box style={{ height: 1 }} />
+            <text content={`Runs wp core update, then the database upgrade${status.multisite ? " (network-wide)" : ""}.`} fg={theme.textDim} wrapMode="none" />
+            {target.updateType === "major" ? <text content="Major release — test plugins and themes against it." fg={theme.warn} wrapMode="none" /> : null}
+            {composerLines().length ? <box style={{ height: 1 }} /> : null}
+            {composerLines().map((l) => (
+              <text key={l} content={l} fg={theme.warn} 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 (view === "running") {
+      return (
+        <box style={{ flexDirection: "column", alignItems: "center" }}>
+          <box style={{ flexDirection: "row" }}>
+            <Spinner />
+            <text content={`  Updating to WordPress ${job?.version}…`} fg={theme.textDim} />
+          </box>
+          <box style={{ height: 1 }} />
+          <text content="You can press Esc — it keeps running in the background." fg={theme.textFaint} wrapMode="none" />
+        </box>
+      )
+    }
+
+    if (view === "done" && job?.result?.ok) {
+      return (
+        <Panel title=" Done " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="✓ " fg={theme.good} />
+              <text content={truncate(site.domain, 32)} fg={theme.accent} wrapMode="none" />
+              <text content={` is now on WordPress ${job.result.after}`} fg={theme.text} wrapMode="none" />
+            </box>
+            <text content={`(was ${job.result.before})`} fg={theme.textFaint} wrapMode="none" />
+            {composerLines().length ? <box style={{ height: 1 }} /> : null}
+            {composerLines().map((l) => (
+              <text key={l} content={l} fg={theme.warn} wrapMode="none" />
+            ))}
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+
+    // failed
+    const result = job?.result && !job.result.ok ? job.result : null
+    const tail = (result?.log ?? "").split("\n").filter(Boolean).slice(-8)
+    return (
+      <Panel title=" Update failed " active>
+        <box style={{ flexDirection: "column", width: 76, paddingTop: 1, paddingBottom: 1 }}>
+          <text content={`✕ ${result?.error ?? "Something went wrong."}`} fg={theme.bad} />
+          {tail.length ? <box style={{ height: 1 }} /> : null}
+          {tail.map((l, i) => (
+            <text key={i} content={truncate(l, 74)} fg={theme.textDim} wrapMode="none" />
+          ))}
+          <box style={{ height: 1 }} />
+          <text content="Press r to re-check the site · Esc to close" fg={theme.textFaint} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    switch (view) {
+      case "pick":
+        return [
+          { key: "↑↓/jk", label: "version" },
+          { key: "⏎", label: "choose" },
+          { key: "←", label: "back" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "confirm":
+        return [
+          { key: "y", label: "confirm" },
+          { key: "←", label: "back" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "checkError":
+      case "upToDate":
+        return [
+          { key: "r", label: "re-check" },
+          { key: "←", label: "back" },
+          { key: "esc", label: "close" },
+        ]
+      case "failed":
+        return [
+          { key: "r", label: "re-check" },
+          { key: "esc", label: "close" },
+        ]
+      default:
+        return [{ key: "esc", label: "close" }]
+    }
+  }
+}