spinuptui 0.19.0

package/src/ui/App.tsx

@@ -0,0 +1,265 @@
+// Application shell: splash gating, global key routing, header/content/status layout.
+
+import { useEffect, useState } from "react"
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react"
+import { Toaster } from "@opentui-ui/toast/react"
+import { theme } from "../lib/theme.ts"
+import { useStore } from "./store.tsx"
+import { Splash } from "./Splash.tsx"
+import { Header } from "./Header.tsx"
+import { HelpOverlay } from "./Help.tsx"
+import { ExplainOverlay } from "./Explain.tsx"
+import { Dashboard } from "./views/Dashboard.tsx"
+import { Browser } from "./views/Browser.tsx"
+import { Stacks } from "./views/Stacks.tsx"
+import { Search } from "./views/Search.tsx"
+import { Events } from "./views/Events.tsx"
+import { Health } from "./views/Health.tsx"
+import { PhpUpgrade } from "./views/PhpUpgrade.tsx"
+import { HttpsToggle } from "./views/HttpsToggle.tsx"
+import { PurgeCache } from "./views/PurgeCache.tsx"
+import { ReleaseNotes } from "./views/ReleaseNotes.tsx"
+import { GrantKey } from "./views/GrantKey.tsx"
+import { SudoConnect } from "./views/SudoConnect.tsx"
+import { DbBackup } from "./views/DbBackup.tsx"
+import { DbSync } from "./views/DbSync.tsx"
+import { MediaFallback } from "./views/MediaFallback.tsx"
+import { ServerActions } from "./views/ServerActions.tsx"
+import { NewServer } from "./views/NewServer.tsx"
+import { VanityNewSite } from "./views/VanityNewSite.tsx"
+import { CloneWizard } from "./views/CloneWizard.tsx"
+import { LocalLinkOverlay } from "./views/LocalLink.tsx"
+import { Discover } from "./views/Discover.tsx"
+import { Forgotten } from "./views/Forgotten.tsx"
+import { DnsInventory } from "./views/DnsInventory.tsx"
+import { WpInventory } from "./views/WpInventory.tsx"
+import { ProviderConnect } from "./views/ProviderConnect.tsx"
+import { DnsRecords } from "./views/DnsRecords.tsx"
+import { KumaSite } from "./views/KumaSite.tsx"
+
+const MIN_SPLASH_MS = 1200
+
+export function App() {
+  const store = useStore()
+  const renderer = useRenderer()
+  const { height } = useTerminalDimensions()
+  const [splashDone, setSplashDone] = useState(false)
+  const [showHelp, setShowHelp] = useState(false)
+  const [showExplain, setShowExplain] = useState(false)
+
+  // Enforce a minimum splash duration so the intro is visible even on fast loads.
+  useEffect(() => {
+    const id = setTimeout(() => setSplashDone(true), MIN_SPLASH_MS)
+    return () => clearTimeout(id)
+  }, [])
+
+  // Keep views aware that a modal is open so they pause their own key handling.
+  const overlayActive =
+    showHelp ||
+    showExplain ||
+    store.releaseNotesInfo !== null ||
+    store.healthServer !== null ||
+    store.wpInventorySite !== null ||
+    store.phpUpgradeSite !== null ||
+    store.httpsToggleSite !== null ||
+    store.purgeCacheSite !== null ||
+    store.grantKeySite !== null ||
+    store.sudoConnectServer !== null ||
+    store.dbBackupSite !== null ||
+    store.dbSyncSite !== null ||
+    store.mediaFallbackSite !== null ||
+    store.serverActionsServer !== null ||
+    store.newServerOpen ||
+    store.vanityServer !== null ||
+    store.cloneServer !== null ||
+    store.localLinkSite !== null ||
+    store.discoverOpen ||
+    store.forgottenOpen ||
+    store.dnsInventoryServer !== null ||
+    store.connectZoneTarget !== null ||
+    store.dnsRecordsTarget !== null ||
+    store.kumaSite !== null
+  useEffect(() => {
+    store.setOverlayOpen(overlayActive)
+  }, [overlayActive, store])
+
+  function quit() {
+    try {
+      renderer.destroy?.()
+    } catch {
+      // ignore — we're exiting anyway
+    }
+    process.exit(0)
+  }
+
+  useKeyboard((key) => {
+    // Ctrl+C always quits, even while typing.
+    if (key.ctrl && key.name === "c") return quit()
+
+    // Help/Explain must close even while a text field is focused (they can open
+    // a beat BEFORE a view's input grabs focus — e.g. `4` then typing a name
+    // containing `i` faster than Search mounts — and the inputMode gate below
+    // would otherwise deadlock them open, since the overlay also deactivates the
+    // view's own handler).
+    if (showHelp) {
+      if (key.name === "escape" || key.name === "q" || key.name === "?") setShowHelp(false)
+      return
+    }
+    if (showExplain) {
+      if (key.name === "escape" || key.name === "q" || key.name === "i") setShowExplain(false)
+      return
+    }
+
+    // While a text field is focused, let it consume everything else.
+    if (store.inputMode) return
+
+    // The release-notes overlay owns the keyboard while open (any key dismisses).
+    if (store.releaseNotesInfo) return
+
+    // The health overlay owns the keyboard while open (it handles Esc/q/r/h).
+    if (store.healthServer) return
+
+    // The plugins/themes overlay owns the keyboard while open.
+    if (store.wpInventorySite) return
+
+    // The PHP-upgrade overlay owns the keyboard while open.
+    if (store.phpUpgradeSite) return
+
+    // The HTTPS-toggle overlay owns the keyboard while open.
+    if (store.httpsToggleSite) return
+
+    // The purge-cache overlay owns the keyboard while open.
+    if (store.purgeCacheSite) return
+
+    // The grant-SSH-key overlay owns the keyboard while open.
+    if (store.grantKeySite) return
+
+    // The connect-sudo overlay owns the keyboard while open.
+    if (store.sudoConnectServer) return
+
+    // The DB-backup overlay owns the keyboard while open.
+    if (store.dbBackupSite) return
+
+    // The DB-sync overlay owns the keyboard while open.
+    if (store.dbSyncSite) return
+
+    // The media-fallback overlay owns the keyboard while open.
+    if (store.mediaFallbackSite) return
+
+    // The server-actions overlay owns the keyboard while open.
+    if (store.serverActionsServer) return
+
+    // The new-server overlay owns the keyboard while open.
+    if (store.newServerOpen) return
+
+    // The vanity-site overlay owns the keyboard while open.
+    if (store.vanityServer) return
+
+    // The clone wizard owns the keyboard while open.
+    if (store.cloneServer) return
+
+    // The local-link overlay owns the keyboard while open.
+    if (store.localLinkSite) return
+
+    // The discovery overlay owns the keyboard while open.
+    if (store.discoverOpen) return
+
+    // The "needs a local copy" report owns the keyboard while open.
+    if (store.forgottenOpen) return
+
+    // The DNS inventory overlay owns the keyboard while open.
+    if (store.dnsInventoryServer) return
+
+    // The provider-connect overlay owns the keyboard while open.
+    if (store.connectZoneTarget) return
+
+    // The DNS-records overlay owns the keyboard while open.
+    if (store.dnsRecordsTarget) return
+
+    // The site-monitoring (Uptime Kuma) overlay owns the keyboard while open.
+    if (store.kumaSite) return
+
+    switch (key.name) {
+      case "q":
+        return quit()
+      case "1":
+        return store.setRoute("dashboard")
+      case "2":
+        return store.setRoute("servers")
+      case "3":
+        return store.setRoute("stacks")
+      case "4":
+        return store.setRoute("search")
+      case "5":
+        return store.setRoute("events")
+      case "r":
+        return void store.refresh()
+      case "?":
+        return setShowHelp(true)
+      case "i":
+        return setShowExplain(true)
+      case "/":
+        return store.setRoute("search")
+    }
+  })
+
+  // Splash until the minimum time has elapsed AND the first data load resolved.
+  if (!splashDone || !store.ready) {
+    const status = store.error
+      ? "Trouble reaching SpinupWP — entering anyway…"
+      : store.loading
+        ? "Fetching your servers and sites…"
+        : "Ready."
+    return <Splash status={status} />
+  }
+
+  // Rows available to the content area: total minus the header (nav + subtitle =
+  // 2 rows) and the error banner, when present. Each view renders its own status bar.
+  const contentRows = Math.max(3, height - 2 - (store.error ? 1 : 0))
+
+  return (
+    <box style={{ width: "100%", height: "100%", flexDirection: "column", backgroundColor: theme.bg }}>
+      <Header />
+      {store.error && (
+        <box style={{ height: 1, backgroundColor: theme.bad, paddingLeft: 1, paddingRight: 1, flexDirection: "row" }}>
+          <text content={`⚠ ${store.error}  —  press r to retry`} fg={theme.bg} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+        </box>
+      )}
+      <box style={{ flexGrow: 1, flexDirection: "column" }}>
+        {store.route === "dashboard" && <Dashboard rows={contentRows} />}
+        {store.route === "servers" && <Browser rows={contentRows} />}
+        {store.route === "stacks" && <Stacks rows={contentRows} />}
+        {store.route === "search" && <Search rows={contentRows} />}
+        {store.route === "events" && <Events rows={contentRows} />}
+      </box>
+      {showHelp && <HelpOverlay onClose={() => setShowHelp(false)} />}
+      {showExplain && <ExplainOverlay route={store.route} />}
+      {store.releaseNotesInfo && <ReleaseNotes />}
+      {store.healthServer && <Health />}
+      {store.wpInventorySite && <WpInventory />}
+      {store.phpUpgradeSite && <PhpUpgrade />}
+      {store.httpsToggleSite && <HttpsToggle />}
+      {store.purgeCacheSite && <PurgeCache />}
+      {store.grantKeySite && <GrantKey />}
+      {store.sudoConnectServer && <SudoConnect />}
+      {store.dbBackupSite && <DbBackup />}
+      {store.dbSyncSite && <DbSync />}
+      {store.mediaFallbackSite && <MediaFallback />}
+      {store.serverActionsServer && <ServerActions />}
+      {store.newServerOpen && <NewServer />}
+      {store.vanityServer && <VanityNewSite />}
+      {store.cloneServer && <CloneWizard />}
+      {store.localLinkSite && <LocalLinkOverlay />}
+      {store.discoverOpen && <Discover />}
+      {store.forgottenOpen && <Forgotten />}
+      {store.dnsInventoryServer && <DnsInventory />}
+      {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 }} />
+    </box>
+  )
+}

package/src/ui/Details.tsx

@@ -0,0 +1,403 @@
+// Detail panels for a server and a site. Shared by the Browser and Search views.
+
+import { useEffect } from "react"
+import { theme, statusColor, diskColor } from "../lib/theme.ts"
+import { formatBytes, diskUsedPct, bar, formatDate, timeAgo, truncate } from "../lib/format.ts"
+import { Field, StatusBadge, ControlPanel, type ActionGroup } from "./components.tsx"
+import { effectiveStack, stackColor } from "../lib/stack.ts"
+import { probeKindColor } from "../lib/probe.ts"
+import { resolveLocalLink } from "../lib/local.ts"
+import { normalizeDomain } from "../lib/dns.ts"
+import type { Drift } from "../lib/gitStatus.ts"
+import { useStore, isUpgradeInFlight, isServerOpInFlight, isHttpsToggleInFlight, isPurgeCacheInFlight, purgeCacheFailed } from "./store.tsx"
+import type { Server, Site } from "../api/types.ts"
+
+export function ServerDetail({ server, siteCount, showControl = false }: { server: Server; siteCount: number; showControl?: boolean }) {
+  const { rebootInfo, serverOps, isServerOsEol, sitesForServer, vanityJob } = useStore()
+  const ds = server.disk_space
+  const pct = diskUsedPct(ds?.used, ds?.total)
+  const op = serverOps.get(server.id)
+  const rb = rebootInfo.get(server.id)
+  const osEol = isServerOsEol(server)
+  const rebootValue =
+    op && isServerOpInFlight(op)
+      ? `${op.label}…`
+      : op?.status === "failed"
+        ? "action failed"
+        : server.reboot_required
+          ? rb?.present
+            ? `required · ${rb.kernel ? "kernel update" : "pkg updates"} (${rb.packages.length})`
+            : "required"
+          : "not needed"
+  const rebootColor =
+    op?.status === "failed" ? theme.bad : server.reboot_required || (op && isServerOpInFlight(op)) ? theme.warn : theme.good
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <box style={{ flexDirection: "row" }}>
+        <text content={truncate(server.name, 34)} fg={theme.text} attributes={1} />
+        <box style={{ flexGrow: 1 }} />
+        <StatusBadge status={server.connection_status} />
+      </box>
+      <text content={server.ip_address ?? "—"} fg={theme.accent} />
+      <box style={{ height: 1 }} />
+
+      <Field label="Provider" value={server.provider_name ?? "—"} />
+      <Field label="Region" value={server.region ?? "—"} />
+      <Field label="Size" value={server.size ?? "—"} />
+      <Field
+        label="Ubuntu"
+        value={osEol ? `${server.ubuntu_version} — EOL, clone to newer (C)` : (server.ubuntu_version ?? "—")}
+        valueColor={osEol ? theme.bad : undefined}
+      />
+      <Field label="SSH" value={`${server.ip_address ?? "—"}:${server.ssh_port ?? 22}`} />
+      <Field label="Database" value={server.database?.server ?? "—"} />
+      <Field label="Sites" value={String(siteCount)} valueColor={theme.accent} />
+      <box style={{ height: 1 }} />
+
+      <Field
+        label="Disk"
+        value={
+          <box style={{ flexDirection: "row" }}>
+            <text content={bar(pct / 100, 16)} fg={diskColor(pct)} />
+            <text content={` ${pct.toFixed(0)}%`} fg={diskColor(pct)} />
+          </box>
+        }
+      />
+      <Field label="Used / Total" value={`${formatBytes(ds?.used)} / ${formatBytes(ds?.total)}`} />
+      <Field label="Available" value={formatBytes(ds?.available)} />
+      <box style={{ height: 1 }} />
+
+      <Field label="Reboot" value={rebootValue} valueColor={rebootColor} />
+      <Field
+        label="SpinupWP upgrade"
+        value={server.upgrade_required ? "required — press w to open" : "up to date"}
+        valueColor={server.upgrade_required ? theme.warn : theme.good}
+      />
+      <Field label="Created" value={formatDate(server.created_at)} />
+
+      {/* Server Control — mirrors Search's Site Control. Only rendered where the keys
+          actually fire (the Browser's Servers pane), via showControl; Search's query
+          mode passes it off and surfaces the pressable list in its actions focus. */}
+      {showControl ? (
+        <>
+          <box style={{ height: 1 }} />
+          <ControlPanel heading="Server Control" groups={serverControlGroups()} />
+        </>
+      ) : null}
+    </box>
+  )
+
+  // The static groups, plus a Manage "V" row whenever the V key would actually do
+  // something: the server has no site at its own hostname yet (busy servers
+  // benefit from a vanity site just like empty ones), or an unfinished build for
+  // this server can be reopened.
+  function serverControlGroups(): ActionGroup[] {
+    const resumable = vanityJob != null && vanityJob.step !== "done" && vanityJob.serverId === server.id
+    const hasVanity = sitesForServer(server.id).some((s) => s.domain.toLowerCase() === server.name.toLowerCase())
+    if (!resumable && hasVanity) return SERVER_CONTROL
+    const vanityItem: [string, string] = ["V", resumable ? "Resume vanity-site build" : "Vanity site at hostname"]
+    return SERVER_CONTROL.map((g) => (g.title === "Manage" ? { ...g, items: [...g.items, vanityItem] } : g))
+  }
+}
+
+export const SERVER_CONTROL: ActionGroup[] = [
+  { title: "Clone", items: [["C", "Clone this server →"]] },
+  { title: "Access", items: [["S", "Connect sudo"]] },
+  {
+    title: "Manage",
+    items: [
+      ["a", "Reboot / restart services"],
+      ["h", "Server health"],
+      ["N", "DNS records (migrate lens)"],
+    ],
+  },
+  { title: "Open", items: [["w", "Open in SpinupWP"]] },
+]
+
+export function SiteDetail({ site, serverName }: { site: Site; serverName: string }) {
+  const { probes, probingIds, isProbeStale, phpUpgrades, httpsToggles, purgeCacheProgress, localLinks, grantedKeyKinds, kumaStatus, kumaMonitorFor } = useStore()
+  const kuma = kumaStatus.get(site.domain)
+  // The fingerprint check failing while HTTP is up means the site is answering
+  // 200 with the WRONG page (stale/corrupt page cache) — a distinct, worse state
+  // than down, so it outranks the plain up/down wording.
+  const kumaValue = kuma
+    ? kuma.up === false
+      ? "DOWN"
+      : kuma.fingerprintUp === false
+        ? "up · WRONG PAGE SERVED (M)"
+        : kuma.redisUp === false
+          ? "up · REDIS DOWN (M)"
+          : kuma.up
+            ? `up${kuma.uptime24 != null ? ` · ${(kuma.uptime24 * 100).toFixed(2)}% (24h)` : ""}`
+            : "no beats yet"
+    : kumaMonitorFor(site.domain)
+      ? "registered · awaiting poll"
+      : "not monitored · M"
+  const kumaColor = kuma ? (kuma.up === false || kuma.fingerprintUp === false || kuma.redisUp === false ? theme.bad : kuma.up ? theme.good : theme.textDim) : theme.textFaint
+  const httpsProgress = httpsToggles.get(site.id)
+  const purgeProgress = purgeCacheProgress.get(site.id)
+  const updates = (site.wp_plugin_updates || 0) + (site.wp_theme_updates || 0) + (site.wp_core_update ? 1 : 0)
+  const probe = probes.get(site.id)
+  // Prefer the DETECTED stack over SpinupWP's is_wordpress/git shape, which
+  // misclassifies some sites (a /public/ WP install shows as "Generic", Bedrock
+  // git sites report is_wordpress:false). Falls back to the API when unprobed.
+  const stack = effectiveStack(site, probe?.result.kind)
+  const isWordPress = stack !== "Non-WP"
+  const probing = probingIds.has(site.id)
+  const upgrade = phpUpgrades.get(site.id)
+  const link = localLinks.get(site.id)
+  const linkState = link ? resolveLocalLink(link) : null
+  const linkValue = !link
+    ? "not linked · L"
+    : !linkState!.exists
+      ? "missing — path not found"
+      : `${linkState!.label} · ${link.path}`
+  const linkColor = !link ? theme.textFaint : !linkState!.exists ? theme.bad : theme.good
+  // SSH keys Spinup has granted into this site user's authorized_keys, split into
+  // your personal key(s) vs the spinup-tui machine key (so it's never ambiguous).
+  const keyKinds = grantedKeyKinds(site.id)
+  const keyParts: string[] = []
+  if (keyKinds.personal > 0) keyParts.push(keyKinds.personal > 1 ? `your keys (${keyKinds.personal})` : "your key")
+  if (keyKinds.machine > 0) keyParts.push("spinup-tui")
+  const keyValue = keyParts.length ? `${keyParts.join(" + ")} · K` : "not granted · K"
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <box style={{ flexDirection: "row" }}>
+        <text content={truncate(site.domain, 34)} fg={theme.text} attributes={1} />
+        <box style={{ flexGrow: 1 }} />
+        <StatusBadge status={site.status} />
+      </box>
+      <text content={(site.https?.enabled ? "https://" : "http://") + site.domain} fg={theme.accent} />
+      <box style={{ height: 1 }} />
+
+      <Field label="Server" value={truncate(serverName, 30)} />
+      <Field label="Stack" value={stack} valueColor={stackColor(stack)} />
+      <Field
+        label="Detected"
+        value={probing ? "identifying…" : probe ? probe.result.label + (isProbeStale(site) ? " (stale)" : "") : "not identified · d"}
+        valueColor={probing ? theme.textDim : probe ? probeKindColor(probe.result.kind) : theme.textFaint}
+      />
+      <Field label="Type" value={isWordPress ? "WordPress" : "Generic"} valueColor={isWordPress ? theme.brand : theme.textDim} />
+      <Field
+        label="PHP"
+        value={
+          upgrade && isUpgradeInFlight(upgrade)
+            ? `${site.php_version ?? "—"} → ${upgrade.target} (${upgrade.status}…)`
+            : upgrade?.status === "failed"
+              ? `${site.php_version ?? "—"} (upgrade failed)`
+              : (site.php_version ?? "—")
+        }
+        valueColor={
+          upgrade && isUpgradeInFlight(upgrade) ? theme.warn : upgrade?.status === "failed" ? theme.bad : theme.text
+        }
+      />
+      <Field label="User" value={site.site_user ?? "—"} />
+      <Field label="Granted" value={keyValue} valueColor={keyParts.length ? theme.good : theme.textFaint} />
+      <Field label="Public dir" value={site.public_folder ?? "/"} />
+      <Field label="Monitor" value={kumaValue} valueColor={kumaColor} />
+      <Field label="Local" value={linkValue} valueColor={linkColor} />
+      <SiteDnsSection site={site} />
+      <Field
+        label="HTTPS"
+        value={
+          httpsProgress && isHttpsToggleInFlight(httpsProgress)
+            ? `${httpsProgress.action === "enable" ? "enabling" : "disabling"}… (${httpsProgress.status})`
+            : httpsProgress?.status === "failed"
+              ? `${site.https?.enabled ? "enabled" : "disabled"} (toggle failed)`
+              : `${site.https?.enabled ? "enabled" : "disabled"} · H`
+        }
+        valueColor={
+          httpsProgress && isHttpsToggleInFlight(httpsProgress)
+            ? theme.warn
+            : httpsProgress?.status === "failed"
+              ? theme.bad
+              : site.https?.enabled
+                ? theme.good
+                : theme.warn
+        }
+      />
+      <Field
+        label="Page cache"
+        value={
+          purgeProgress && isPurgeCacheInFlight(purgeProgress)
+            ? "purging…"
+            : purgeProgress && purgeCacheFailed(purgeProgress)
+              ? `${site.page_cache?.enabled ? "enabled" : "disabled"} (purge failed)`
+              : `${site.page_cache?.enabled ? "enabled" : "disabled"} · P purge`
+        }
+        valueColor={
+          purgeProgress && isPurgeCacheInFlight(purgeProgress)
+            ? theme.warn
+            : purgeProgress && purgeCacheFailed(purgeProgress)
+              ? theme.bad
+              : site.page_cache?.enabled
+                ? theme.good
+                : theme.textDim
+        }
+      />
+      <box style={{ height: 1 }} />
+
+      {site.is_wordpress && (
+        <Field
+          label="WP updates"
+          value={
+            updates === 0
+              ? "all up to date"
+              : `${site.wp_plugin_updates || 0} plugin · ${site.wp_theme_updates || 0} theme${site.wp_core_update ? " · core" : ""}`
+          }
+          valueColor={updates === 0 ? theme.good : theme.warn}
+        />
+      )}
+      <Field
+        label="Backups"
+        value={
+          site.backups?.files || site.backups?.database
+            ? `${site.backups?.files ? "files" : ""}${site.backups?.files && site.backups?.database ? " + " : ""}${site.backups?.database ? "db" : ""}`
+            : "none"
+        }
+        valueColor={site.backups?.files || site.backups?.database ? theme.good : theme.textDim}
+      />
+      {site.backups?.next_run_time && <Field label="Next backup" value={timeAgo(site.backups.next_run_time)} />}
+      {site.git?.repo && <Field label="Git" value={`${truncate(site.git.repo, 26)} (${site.git.branch ?? "?"})`} />}
+      {site.basic_auth?.enabled && <Field label="Basic auth" value="enabled" valueColor={theme.warn} />}
+      <Field label="Created" value={formatDate(site.created_at)} />
+    </box>
+  )
+}
+
+// DNS zone-host lines for a site's domains, populated on demand (key `n`). Each
+// distinct zone (www + apex collapsed) shows its resolved host; a separate-TLD
+// additional domain surfaces as its own line with its own host. Read-only.
+function SiteDnsSection({ site }: { site: Site }) {
+  const { zoneForDomain, isDnsResolving } = useStore()
+  const seen = new Set<string>()
+  const domains = [site.domain, ...(site.additional_domains?.map((a) => a.domain) ?? [])].filter((d) => {
+    const k = normalizeDomain(d)
+    if (!k || seen.has(k)) return false
+    seen.add(k)
+    return true
+  })
+  const anyResolved = domains.some((d) => zoneForDomain(d))
+  const anyResolving = domains.some((d) => isDnsResolving(d))
+  if (!anyResolved && !anyResolving) {
+    return <Field label="DNS" value="not checked · n" valueColor={theme.textFaint} />
+  }
+  return (
+    <box style={{ flexDirection: "column" }}>
+      <text content="DNS" fg={theme.textDim} />
+      {domains.map((d) => {
+        const c = zoneForDomain(d)
+        const resolving = isDnsResolving(d) && !c
+        const host = resolving ? "looking up…" : !c ? "—" : c.zone === null ? "no host found" : c.zone.providerLabel
+        const color = resolving ? theme.textDim : !c ? theme.textFaint : c.zone === null ? theme.warn : theme.accent
+        return (
+          <box key={d} style={{ flexDirection: "row" }}>
+            <text content={"  " + truncate(d, 22)} fg={theme.text} wrapMode="none" style={{ flexGrow: 1, flexShrink: 1 }} />
+            <text content={host} fg={color} wrapMode="none" style={{ flexShrink: 0 }} />
+          </box>
+        )
+      })}
+    </box>
+  )
+}
+
+// Color for a resolved local stack label.
+function localLabelColor(kind: "bedrock" | "wp" | "unknown"): string {
+  return kind === "bedrock" ? theme.good : kind === "wp" ? theme.accent : theme.warn
+}
+
+// Compact, self-explaining git-drift label for a linked copy's line, e.g.
+// "⇡2 unpushed  ● uncommitted". Empty when in sync.
+function driftLabel(d: Drift): string {
+  const parts: string[] = []
+  if (d.ahead > 0) parts.push(`⇡${d.ahead} unpushed`)
+  if (d.dirty) parts.push("● uncommitted")
+  return parts.join("  ")
+}
+
+// A single inline action token, e.g. "t terminal". Dimmed when not applicable.
+function Act({ keyName, label, on }: { keyName: string; label: string; on: boolean }) {
+  return (
+    <box style={{ flexDirection: "row", flexShrink: 0, marginRight: 3 }}>
+      <text content={keyName + " "} fg={on ? theme.brand : theme.textFaint} />
+      <text content={label} fg={on ? theme.textDim : theme.textFaint} wrapMode="none" />
+    </box>
+  )
+}
+
+// Height (incl. border) of the contextual strip — views subtract this from their
+// list viewport so the panes shrink to make room. Border eats 2 rows → 2 content
+// lines (status + actions).
+export const SITE_CONTEXT_STRIP_HEIGHT = 4
+
+// A full-width context strip for the selected site, sitting between the content
+// panes and the command drawer. Shows the local-link status and the inline
+// open-locally actions (which the host view's keyboard fires on the selection).
+// The space is always reserved (a placeholder when nothing is selected) so the
+// layout doesn't jump as the cursor moves.
+export function SiteContextStrip({ site }: { site: Site | null }) {
+  const { localLinks, drift, ensureDrift } = useStore()
+  const link = site ? localLinks.get(site.id) : undefined
+  const state = link ? resolveLocalLink(link) : null
+  const canOpen = !!state?.exists
+  const hasLocalUrl = !!link?.localUrl
+  const d = site ? drift.get(site.id) : undefined
+
+  // Auto-compute (and cache) git drift when a linked, on-disk copy is shown.
+  useEffect(() => {
+    if (site && link && state?.exists) ensureDrift(site.id, link.path)
+  }, [site?.id, link?.path, state?.exists, ensureDrift])
+
+  return (
+    <box
+      title=" Local "
+      titleColor={theme.brand}
+      border
+      borderColor={link && !state!.exists ? theme.bad : theme.border}
+      style={{ height: SITE_CONTEXT_STRIP_HEIGHT, flexDirection: "column", paddingLeft: 1, paddingRight: 1 }}
+    >
+      {/* Line 1 — status (or, with nothing selected, a legend for the row markers) */}
+      {!site ? (
+        <box style={{ flexDirection: "row" }}>
+          <text content="◆ " fg={theme.good} style={{ flexShrink: 0 }} />
+          <text content="linked locally    " fg={theme.textDim} style={{ flexShrink: 0 }} />
+          <text content="↑N " fg={theme.warn} style={{ flexShrink: 0 }} />
+          <text content="pending WordPress updates" fg={theme.textDim} wrapMode="none" style={{ flexShrink: 1 }} />
+        </box>
+      ) : !link ? (
+        <box style={{ flexDirection: "row" }}>
+          <text content={truncate(site.domain, 44)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+          <text content="  not linked" fg={theme.textFaint} wrapMode="none" style={{ flexShrink: 0 }} />
+        </box>
+      ) : !state!.exists ? (
+        <box style={{ flexDirection: "row" }}>
+          <text content="missing  " fg={theme.bad} style={{ flexShrink: 0 }} />
+          <text content={link.path} fg={theme.textDim} wrapMode="none" style={{ flexShrink: 1 }} />
+        </box>
+      ) : (
+        <box style={{ flexDirection: "row" }}>
+          <text content={state!.label} fg={localLabelColor(state!.kind)} style={{ flexShrink: 0 }} />
+          <text content="  ·  " fg={theme.textFaint} style={{ flexShrink: 0 }} />
+          <text content={link.path} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+          {link.localUrl ? (
+            <text content={"   " + link.localUrl} fg={theme.accent} wrapMode="none" style={{ flexShrink: 1 }} />
+          ) : null}
+          {d && (d.ahead > 0 || d.dirty) ? (
+            <text content={"   " + driftLabel(d)} fg={theme.warn} wrapMode="none" style={{ flexShrink: 0 }} />
+          ) : null}
+        </box>
+      )}
+
+      {/* Line 2 — inline actions (fired by the host view on the selection) */}
+      {site ? (
+        <box style={{ flexDirection: "row" }}>
+          <Act keyName="t" label="terminal" on={canOpen} />
+          <Act keyName="v" label="local URL" on={canOpen && hasLocalUrl} />
+          <Act keyName="L" label={link ? "edit / unlink" : "link a local copy"} on />
+        </box>
+      ) : (
+        <text content="Select a site to link a local copy and open it locally (t · v · L)" fg={theme.textFaint} wrapMode="none" />
+      )}
+    </box>
+  )
+}