spinuptui 0.19.0

package/src/ui/views/Dashboard.tsx

@@ -0,0 +1,149 @@
+// Fleet dashboard: at-a-glance health of every server and site in the account.
+
+import { useMemo } from "react"
+import { theme, diskColor } from "../../lib/theme.ts"
+import { formatBytes, diskUsedPct, bar, truncate, timeAgo } from "../../lib/format.ts"
+import { Panel } from "../components.tsx"
+import { useStore } from "../store.tsx"
+import type { Server } from "../../api/types.ts"
+
+// A single headline metric card. Height 5 = 2 border rows + 3 content lines.
+function Stat({ label, value, color = theme.text, sub }: { label: string; value: string; color?: string; sub?: string }) {
+  return (
+    <box
+      border
+      borderColor={theme.border}
+      style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, height: 5 }}
+    >
+      <text content={label} fg={theme.textDim} />
+      <text content={value} fg={color} attributes={1} />
+      <text content={sub ?? ""} fg={theme.textFaint} />
+    </box>
+  )
+}
+
+function serverDiskFraction(s: Server): number {
+  return diskUsedPct(s.disk_space?.used, s.disk_space?.total) / 100
+}
+
+export function Dashboard({ rows }: { rows: number }) {
+  const { servers, sites, events, isServerOsEol } = useStore()
+
+  const agg = useMemo(() => {
+    const connected = servers.filter((s) => s.connection_status === "connected").length
+    const reboot = servers.filter((s) => s.reboot_required).length
+    const upgrade = servers.filter((s) => s.upgrade_required).length
+    let used = 0
+    let total = 0
+    for (const s of servers) {
+      if (s.disk_space) {
+        used += s.disk_space.used || 0
+        total += s.disk_space.total || 0
+      }
+    }
+    const wp = sites.filter((s) => s.is_wordpress).length
+    const pluginUpd = sites.reduce((n, s) => n + (s.wp_plugin_updates || 0), 0)
+    const themeUpd = sites.reduce((n, s) => n + (s.wp_theme_updates || 0), 0)
+    const coreUpd = sites.filter((s) => s.wp_core_update).length
+    const https = sites.filter((s) => s.https?.enabled).length
+    return { connected, reboot, upgrade, used, total, wp, pluginUpd, themeUpd, coreUpd, https }
+  }, [servers, sites])
+
+  // Servers sorted by disk pressure (busiest first) for the watchlist.
+  const byDisk = useMemo(
+    () => [...servers].sort((a, b) => serverDiskFraction(b) - serverDiskFraction(a)),
+    [servers],
+  )
+
+  // Things that want attention: reboots, upgrades, pending WP updates.
+  const attention = useMemo(() => {
+    const items: { text: string; color: string }[] = []
+    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 })
+      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])
+
+  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
+
+  return (
+    <box style={{ flexGrow: 1, flexDirection: "column", padding: 1 }}>
+      {/* Headline metrics */}
+      <box style={{ flexDirection: "row", gap: 1 }}>
+        <Stat label="Servers" value={String(servers.length)} color={theme.brand} sub={`${agg.connected} connected`} />
+        <Stat label="Sites" value={String(sites.length)} color={theme.accent} sub={`${agg.wp} WordPress`} />
+        <Stat
+          label="Fleet Disk"
+          value={`${diskPct.toFixed(0)}%`}
+          color={diskColor(diskPct)}
+          sub={`${formatBytes(agg.used)} / ${formatBytes(agg.total)}`}
+        />
+        <Stat
+          label="WP Updates"
+          value={String(agg.pluginUpd + agg.themeUpd + agg.coreUpd)}
+          color={agg.pluginUpd + agg.themeUpd + agg.coreUpd > 0 ? theme.warn : theme.good}
+          sub={`${agg.pluginUpd} plugin · ${agg.coreUpd} core`}
+        />
+        <Stat
+          label="Maintenance"
+          value={String(agg.reboot + agg.upgrade)}
+          color={agg.reboot + agg.upgrade > 0 ? theme.warn : theme.good}
+          sub={`${agg.reboot} reboot · ${agg.upgrade} upgrade`}
+        />
+      </box>
+
+      {/* Two columns: disk watchlist + attention/activity */}
+      <box style={{ flexGrow: 1, flexDirection: "row", gap: 1, marginTop: 1 }}>
+        <Panel title=" Disk usage by server " flexGrow={1}>
+          <box style={{ flexGrow: 1, flexDirection: "column" }}>
+            {byDisk.slice(0, listRows).map((s) => {
+              const frac = serverDiskFraction(s)
+              const pct = frac * 100
+              return (
+                <box key={s.id} style={{ flexDirection: "row", height: 1 }}>
+                  <text content={truncate(s.name, 30)} fg={theme.text} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+                  <text content={bar(frac, 10)} fg={diskColor(pct)} style={{ flexShrink: 0 }} />
+                  <text content={` ${pct.toFixed(0)}%`.padStart(5)} fg={diskColor(pct)} style={{ flexShrink: 0 }} />
+                  <text content={s.disk_space ? `  ${formatBytes(s.disk_space.used)}` : "  —"} fg={theme.textDim} style={{ flexShrink: 0 }} />
+                </box>
+              )
+            })}
+          </box>
+        </Panel>
+
+        <box style={{ flexDirection: "column", flexGrow: 1, gap: 1 }}>
+          <Panel title={` Needs attention (${attention.length}) `} flexGrow={1}>
+            <box style={{ flexGrow: 1, flexDirection: "column" }}>
+              {attention.length === 0 ? (
+                <text content="✓ All servers healthy" fg={theme.good} />
+              ) : (
+                attention.slice(0, Math.max(1, Math.floor(listRows / 2))).map((a, i) => (
+                  <box key={i} style={{ flexDirection: "row", height: 1 }}>
+                    <text content={`• ${truncate(a.text, 60)}`} fg={a.color} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+                  </box>
+                ))
+              )}
+            </box>
+          </Panel>
+          <Panel title=" Recent activity " flexGrow={1}>
+            <box style={{ flexGrow: 1, flexDirection: "column" }}>
+              {events.length === 0 ? (
+                <text content="No recent events" fg={theme.textFaint} />
+              ) : (
+                events.slice(0, Math.max(1, Math.floor(listRows / 2))).map((e) => (
+                  <box key={e.id} style={{ flexDirection: "row", height: 1 }}>
+                    <text content={truncate(e.name, 44)} fg={theme.text} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+                    <text content={" " + timeAgo(e.created_at)} fg={theme.textFaint} style={{ flexShrink: 0 }} />
+                  </box>
+                ))
+              )}
+            </box>
+          </Panel>
+        </box>
+      </box>
+    </box>
+  )
+}

package/src/ui/views/DbBackup.tsx

@@ -0,0 +1,228 @@
+// Production DB-backup overlay.
+//
+// Opened with `d` on a linked site (Search). Confirms what will run, then exports
+// the remote database, downloads it (gzipped) into the local project's sql/ dir,
+// and cleans up the remote copy. The export + download run in the store
+// (`startDbBackup`), so closing this modal (Esc/q) doesn't abandon them — the
+// download keeps going and the result is still in the store when reopened.
+//
+// The whole operation is read-only on production (an export, never a write).
+
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate, formatBytes, middleTruncate } from "../../lib/format.ts"
+import { Panel, Centered, DestPath, Steps, type StepRow } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import type { DbBackupStage } from "../../lib/dbBackup.ts"
+
+// The backup's stages in run order — rendered as a building checklist.
+const BACKUP_STEPS: { stage: DbBackupStage; label: string }[] = [
+  { stage: "export", label: "Export database on server" },
+  { stage: "download", label: "Download the backup" },
+  { stage: "cleanup", label: "Clean up remote copy" },
+]
+
+export function DbBackup() {
+  const { dbBackupSite: site, setDbBackupSite, serverById, planDbBackupFor, dbBackups, startDbBackup, clearDbBackup } = useStore()
+
+  // Resolve the plan up front so the confirm screen can show source + destination
+  // (and surface an unrunnable link before the user commits).
+  const planResult = site ? planDbBackupFor(site) : null
+  const progress = site ? dbBackups.get(site.id) : undefined
+
+  const [started, setStarted] = useState(false)
+
+  // Display phase: a planning error blocks before anything runs; otherwise the
+  // screen follows the store's progress once we've fired the backup.
+  const dp: "blocked" | "confirm" | "running" | "done" | "error" =
+    planResult && !planResult.ok && !progress
+      ? "blocked"
+      : !started && !progress
+        ? "confirm"
+        : progress?.stage === "done"
+          ? "done"
+          : progress?.stage === "error"
+            ? "error"
+            : "running"
+
+  const close = () => {
+    // Drop a settled (done/failed) entry so reopening starts fresh; leave an
+    // in-flight download running with its progress intact.
+    if (site && (progress?.stage === "done" || progress?.stage === "error")) clearDbBackup(site.id)
+    setDbBackupSite(null)
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+
+    if (dp === "confirm") {
+      if (name === "return" || name === "y") {
+        if (site) {
+          startDbBackup(site)
+          setStarted(true)
+        }
+      }
+      return
+    }
+
+    if (dp === "error") {
+      if (name === "r") {
+        if (site) clearDbBackup(site.id)
+        setStarted(false)
+      }
+      return
+    }
+  })
+
+  if (!site) return null
+  const server = serverById(site.server_id)
+
+  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="⬇ Download DB backup  " 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="read-only export" fg={theme.textFaint} style={{ flexShrink: 0 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function renderBody() {
+    if (dp === "blocked") {
+      return (
+        <Panel title=" Can't back up yet " active>
+          <box style={{ flexDirection: "column", width: 64, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={planResult && !planResult.ok ? planResult.error : "Unavailable."} fg={theme.warn} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="The backup downloads into the linked working copy's sql/ folder." fg={theme.textDim} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "confirm") {
+      const plan = planResult && planResult.ok ? planResult.plan : null
+      return (
+        <Panel title=" Download production database " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="Export " fg={theme.text} />
+              <text content={truncate(site!.domain, 36)} fg={theme.accent} wrapMode="none" />
+              <text content=" on " fg={theme.textDim} />
+              <text content={truncate(server?.name ?? "—", 24)} fg={theme.textDim} wrapMode="none" />
+            </box>
+            <box style={{ height: 1 }} />
+            <text content="from" fg={theme.textFaint} />
+            <text content={`  ${middleTruncate(plan?.docroot ?? "—", 62)}`} fg={theme.textDim} wrapMode="none" />
+            <text content="to" fg={theme.textFaint} />
+            {plan ? <DestPath path={plan.destPath} fileColor={theme.good} width={62} /> : <text content="  —" fg={theme.textDim} />}
+            <box style={{ height: 1 }} />
+            <text content="Exports with wp-cli, gzips it, downloads it, then removes the" fg={theme.textDim} wrapMode="none" />
+            <text content="remote copy. Nothing on production is modified." fg={theme.textDim} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Press y / ⏎ to download · Esc to cancel" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    // running | done | error share one bordered checklist so the whole backup
+    // reads as a building stack; the footer carries the live/result/error status.
+    const order = BACKUP_STEPS.map((s) => s.stage)
+    const curIdx = order.indexOf((progress?.stage ?? "export") as DbBackupStage)
+    const failedIdx = progress?.failedStage ? order.indexOf(progress.failedStage) : order.length - 1
+    const rows: StepRow[] = BACKUP_STEPS.map(({ label }, i) => {
+      const state: StepRow["state"] =
+        dp === "done"
+          ? "done"
+          : dp === "error"
+            ? i < failedIdx
+              ? "done"
+              : i === failedIdx
+                ? "failed"
+                : "pending"
+            : i < curIdx
+              ? "done"
+              : i === curIdx
+                ? "active"
+                : "pending"
+      return { label, state }
+    })
+
+    return (
+      <Panel title=" Download production database " active>
+        <box style={{ flexDirection: "column", width: 64, paddingTop: 1, paddingBottom: 1 }}>
+          <Steps rows={rows} />
+          <box style={{ height: 1 }} />
+          {dp === "done" ? (
+            <>
+              <box style={{ flexDirection: "row" }}>
+                <text content="✓ Done — saved " fg={theme.good} />
+                <text content={progress?.bytes != null ? formatBytes(progress.bytes) : ""} fg={theme.text} />
+              </box>
+              <box style={{ height: 1 }} />
+              {progress?.destPath ? <DestPath path={progress.destPath} fileColor={theme.accent} width={62} /> : null}
+              <box style={{ height: 1 }} />
+              <text content="Esc to close" fg={theme.textFaint} />
+            </>
+          ) : dp === "error" ? (
+            <>
+              <text content={`✕ ${progress?.error ?? "Something went wrong."}`} fg={theme.bad} />
+              <box style={{ height: 1 }} />
+              <text content="Press r to try again · Esc to close" fg={theme.textFaint} wrapMode="none" />
+            </>
+          ) : (
+            <text content="You can press Esc — the download keeps running in the background." fg={theme.textFaint} wrapMode="none" />
+          )}
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    switch (dp) {
+      case "confirm":
+        return [
+          { key: "y/⏎", label: "download" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "error":
+        return [
+          { key: "r", label: "retry" },
+          { key: "esc", label: "close" },
+        ]
+      default:
+        return [{ key: "esc", label: "close" }]
+    }
+  }
+}

package/src/ui/views/DbSync.tsx

@@ -0,0 +1,307 @@
+// Production → local DB sync overlay.
+//
+// Opened with `p` on a linked WordPress site (Search). Pulls the production
+// database into the local working copy: backs up local first, exports/downloads
+// prod (read-only), imports it, rewrites URLs, and runs an optional post-import
+// hook. DESTRUCTIVE on local — so the confirm screen says so plainly. The work
+// runs in the store (`startDbSync`), so closing the modal (Esc/q) doesn't abandon
+// it; the row keeps a spinner and reopening shows live progress.
+
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate, middleTruncate } from "../../lib/format.ts"
+import { Panel, Centered, DestPath, Steps, type StepRow } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { writeSampleHook, type DbSyncStage } from "../../lib/dbSync.ts"
+
+// The pull's stages in run order — rendered as a building checklist. The hook
+// row is included only when the plan found a bin/sync.d/post-import.sh.
+const SYNC_STEPS: { stage: DbSyncStage; label: string }[] = [
+  { stage: "local-backup", label: "Back up local database" },
+  { stage: "export", label: "Export production database" },
+  { stage: "download", label: "Download the dump" },
+  { stage: "import", label: "Import into local" },
+  { stage: "replace", label: "Rewrite production URLs → local" },
+  { stage: "hook", label: "Run post-import hook" },
+]
+
+export function DbSync() {
+  const { dbSyncSite: site, setDbSyncSite, serverById, planDbSyncFor, dbSyncs, startDbSync, clearDbSync, planMediaFallbackFor, setMediaFallbackSite } = useStore()
+
+  const planResult = site ? planDbSyncFor(site) : null
+  const progress = site ? dbSyncs.get(site.id) : undefined
+  const [started, setStarted] = useState(false)
+  // Result of scaffolding a sample post-import hook (s on the confirm screen).
+  const [scaffold, setScaffold] = useState<{ ok: true; path: string } | { ok: false; error: string } | null>(null)
+
+  const dp: "blocked" | "confirm" | "running" | "done" | "error" =
+    planResult && !planResult.ok && !progress
+      ? "blocked"
+      : !started && !progress
+        ? "confirm"
+        : progress?.stage === "done"
+          ? "done"
+          : progress?.stage === "error"
+            ? "error"
+            : "running"
+
+  const close = () => {
+    if (site && (progress?.stage === "done" || progress?.stage === "error")) clearDbSync(site.id)
+    setDbSyncSite(null)
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+    if (dp === "confirm") {
+      if (name === "return" || name === "y") {
+        if (site) {
+          startDbSync(site)
+          setStarted(true)
+        }
+        return
+      }
+      // s: scaffold a sample hook — only when none exists yet.
+      if (name === "s" && plan && !plan.hookPath) {
+        try {
+          setScaffold({ ok: true, path: writeSampleHook(plan.localRoot) })
+        } catch (e) {
+          setScaffold({ ok: false, error: e instanceof Error ? e.message : "Couldn't write the sample hook." })
+        }
+      }
+      return
+    }
+    if (dp === "error") {
+      if (name === "r") {
+        if (site) clearDbSync(site.id)
+        setStarted(false)
+      }
+      return
+    }
+    if (dp === "done") {
+      // m: hand off to the media-fallback overlay for the just-synced site.
+      if (name === "m" && site) {
+        close()
+        setMediaFallbackSite(site)
+      }
+      return
+    }
+  })
+
+  if (!site) return null
+  const server = serverById(site.server_id)
+  const plan = planResult && planResult.ok ? planResult.plan : null
+  // Whether this site already has the production media-fallback plugin (shapes the
+  // Done-screen nudge). Only meaningful on the done screen.
+  const mfPlan = dp === "done" ? planMediaFallbackFor(site) : null
+  const mediaFallbackEnabled = !!(mfPlan && mfPlan.ok && mfPlan.plan.enabled)
+
+  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="⇣ Pull production → local  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 38)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+        <text content="overwrites local DB" fg={theme.warn} style={{ flexShrink: 0 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  // The post-import-hook line(s) on the confirm screen. Three states: a fresh
+  // scaffold result (wins, so the user sees their action land), an existing hook
+  // (it'll run), or none — in which case we explain the extension point in
+  // context and offer `s` to write an inert sample.
+  function renderHookSection() {
+    if (scaffold?.ok) {
+      return (
+        <>
+          <box style={{ height: 1 }} />
+          <box style={{ flexDirection: "row" }}>
+            <text content="✓ " fg={theme.good} />
+            <text content="wrote bin/sync.d/post-import.sh — edit it, then pull." fg={theme.text} wrapMode="none" />
+          </box>
+          <text content="  (it's inert until you uncomment a command)" fg={theme.textFaint} wrapMode="none" />
+        </>
+      )
+    }
+    if (scaffold && !scaffold.ok) {
+      return (
+        <>
+          <box style={{ height: 1 }} />
+          <text content={`✕ ${scaffold.error}`} fg={theme.bad} wrapMode="none" />
+        </>
+      )
+    }
+    if (plan?.hookPath) {
+      return (
+        <>
+          <box style={{ height: 1 }} />
+          <text content="↪ post-import hook will run (your per-project tweaks)" fg={theme.purple} wrapMode="none" />
+        </>
+      )
+    }
+    return (
+      <>
+        <box style={{ height: 1 }} />
+        <text content="No post-import hook set up for this project." fg={theme.textFaint} wrapMode="none" />
+        <text content="SpinupTUI can run bin/sync.d/post-import.sh after each pull —" fg={theme.textFaint} wrapMode="none" />
+        <text content="e.g. swap Elementor URLs, toggle dev-only plugins." fg={theme.textFaint} wrapMode="none" />
+        <text content="  s  write a sample hook" fg={theme.textDim} wrapMode="none" />
+      </>
+    )
+  }
+
+  function renderBody() {
+    if (dp === "blocked") {
+      return (
+        <Panel title=" Can't sync yet " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={planResult && !planResult.ok ? planResult.error : "Unavailable."} fg={theme.warn} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+
+    if (dp === "confirm") {
+      return (
+        <Panel title=" Pull production database to local " active>
+          <box style={{ flexDirection: "column", width: 68, paddingTop: 1, paddingBottom: 1 }}>
+            <box style={{ flexDirection: "row" }}>
+              <text content="⚠ " fg={theme.warn} />
+              <text content="This OVERWRITES your local database." fg={theme.text} wrapMode="none" />
+            </box>
+            <text content="  (your local DB is backed up first, just in case)" fg={theme.textFaint} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <box style={{ flexDirection: "row" }}>
+              <text content="from " fg={theme.textFaint} />
+              <text content={truncate(site!.domain, 30)} fg={theme.accent} wrapMode="none" />
+              <text content=" on " fg={theme.textDim} />
+              <text content={truncate(server?.name ?? "—", 22)} fg={theme.textDim} wrapMode="none" />
+            </box>
+            <text content="into" fg={theme.textFaint} />
+            {plan ? <DestPath path={plan.localRoot} fileColor={theme.good} width={64} /> : null}
+            <box style={{ height: 1 }} />
+            <text content="rewrite URLs" fg={theme.textFaint} />
+            <text content={`  ${plan ? middleTruncate(`${plan.remoteOrigin} → ${plan.localOrigin}`, 64) : "—"}`} fg={theme.textDim} wrapMode="none" />
+            {renderHookSection()}
+            {plan?.prefixWarning ? (
+              <>
+                <box style={{ height: 1 }} />
+                <text content={`⚠ ${plan.prefixWarning}`} fg={theme.warn} wrapMode="none" />
+              </>
+            ) : null}
+            <box style={{ height: 1 }} />
+            <text content="Production is only read from — nothing there is modified." fg={theme.textFaint} wrapMode="none" />
+            <text content="Press y / ⏎ to pull · Esc to cancel" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    // running | done | error share one bordered checklist so the whole pull
+    // reads as a building stack; the footer carries the live/result/error status.
+    const steps = SYNC_STEPS.filter((s) => s.stage !== "hook" || !!plan?.hookPath)
+    const order = steps.map((s) => s.stage)
+    const curIdx = order.indexOf((progress?.stage ?? "local-backup") as DbSyncStage)
+    const failedIdx = progress?.failedStage ? order.indexOf(progress.failedStage) : order.length - 1
+    const rows: StepRow[] = steps.map(({ label }, i) => {
+      const state: StepRow["state"] =
+        dp === "done"
+          ? "done"
+          : dp === "error"
+            ? i < failedIdx
+              ? "done"
+              : i === failedIdx
+                ? "failed"
+                : "pending"
+            : i < curIdx
+              ? "done"
+              : i === curIdx
+                ? "active"
+                : "pending"
+      return { label, state }
+    })
+
+    return (
+      <Panel title=" Pull production → local " active>
+        <box style={{ flexDirection: "column", width: 64, paddingTop: 1, paddingBottom: 1 }}>
+          <Steps rows={rows} />
+          <box style={{ height: 1 }} />
+          {dp === "done" ? (
+            <>
+              <box style={{ flexDirection: "row" }}>
+                <text content="✓ " fg={theme.good} />
+                <text content="Done — local now mirrors production." fg={theme.text} wrapMode="none" />
+              </box>
+              <box style={{ height: 1 }} />
+              <text content="prod dump saved" fg={theme.textFaint} />
+              {progress?.downloadPath ? <DestPath path={progress.downloadPath} fileColor={theme.accent} width={62} /> : null}
+              <text content="local DB backup" fg={theme.textFaint} />
+              {progress?.localBackupPath ? <DestPath path={progress.localBackupPath} fileColor={theme.textDim} width={62} /> : null}
+              <box style={{ height: 1 }} />
+              {mediaFallbackEnabled ? (
+                <text content="✓ Missing images load from production (media fallback on)." fg={theme.textFaint} wrapMode="none" />
+              ) : (
+                <text content="Images 404ing locally? Press m to serve them from production." fg={theme.purple} wrapMode="none" />
+              )}
+              <text content="Esc to close" fg={theme.textFaint} />
+            </>
+          ) : dp === "error" ? (
+            <>
+              <text content={`✕ ${progress?.error ?? "Something went wrong."}`} fg={theme.bad} />
+              <box style={{ height: 1 }} />
+              <text content="Your local DB backup is in sql/ if you need to restore." fg={theme.textFaint} wrapMode="none" />
+              <text content="Press r to try again · Esc to close" fg={theme.textFaint} wrapMode="none" />
+            </>
+          ) : (
+            <text content="You can press Esc — it keeps running in the background." fg={theme.textFaint} wrapMode="none" />
+          )}
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    switch (dp) {
+      case "confirm":
+        return [
+          { key: "y/⏎", label: "pull" },
+          ...(plan && !plan.hookPath ? [{ key: "s", label: "sample hook" }] : []),
+          { key: "esc", label: "cancel" },
+        ]
+      case "error":
+        return [
+          { key: "r", label: "retry" },
+          { key: "esc", label: "close" },
+        ]
+      case "done":
+        return [
+          ...(mediaFallbackEnabled ? [] : [{ key: "m", label: "media fallback" }]),
+          { key: "esc", label: "close" },
+        ]
+      default:
+        return [{ key: "esc", label: "close" }]
+    }
+  }
+}