spinuptui 0.21.1 → 0.22.0

package/src/ui/Details.tsx

@@ -3,17 +3,18 @@
 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 { Field, StatusBadge, ControlPanel, siteGroups, 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 { resolveLocalLink, type LocalLink } from "../lib/local.ts"
 import { normalizeDomain } from "../lib/dns.ts"
+import { isVanityPair } from "../lib/vanitySite.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()
+export function ServerDetail({ server, siteCount }: { server: Server; siteCount: number }) {
+  const { rebootInfo, serverOps, isServerOsEol } = useStore()
   const ds = server.disk_space
   const pct = diskUsedPct(ds?.used, ds?.total)
   const op = serverOps.get(server.id)
@@ -74,48 +75,53 @@ export function ServerDetail({ server, siteCount, showControl = false }: { serve
         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))
-  }
+// Server Control groups, rendered by the Browser's bottom ControlStrip (layout
+// "flow") or Search's Actions pane (layout "list", the default). Search's
+// query-focus Details still shows ServerDetail without this.
+export function ServerControl({ server, layout }: { server: Server; layout?: "list" | "flow" }) {
+  const { vanityJob, sitesForServer } = useStore()
+  return <ControlPanel heading="Server Control" groups={serverControlGroups(server, vanityJob, sitesForServer)} layout={layout} />
 }
 
+// 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(
+  server: Server,
+  vanityJob: ReturnType<typeof useStore>["vanityJob"],
+  sitesForServer: ReturnType<typeof useStore>["sitesForServer"],
+): 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 build" : "Vanity at hostname"]
+  return SERVER_CONTROL.map((g) => (g.title === "Manage" ? { ...g, items: [...g.items, vanityItem] } : g))
+}
+
+// Labels stay terse and avoid repeating their group's title — see siteGroups().
 export const SERVER_CONTROL: ActionGroup[] = [
-  { title: "Clone", items: [["C", "Clone this server →"]] },
-  { title: "Access", items: [["S", "Connect sudo"]] },
+  { title: "Clone", items: [["C", "Clone →"]] },
+  { title: "Access", items: [["S", "Sudo"]] },
   {
     title: "Manage",
     items: [
-      ["a", "Reboot / restart services"],
-      ["h", "Server health"],
-      ["N", "DNS records (migrate lens)"],
+      ["a", "Reboot / restart"],
+      ["h", "Health"],
+      ["N", "DNS"],
     ],
   },
-  { title: "Open", items: [["w", "Open in SpinupWP"]] },
+  { title: "Open", items: [["w", "In SpinupWP"]] },
 ]
 
 export function SiteDetail({ site, serverName }: { site: Site; serverName: string }) {
-  const { probes, probingIds, isProbeStale, phpUpgrades, httpsToggles, purgeCacheProgress, localLinks, grantedKeyKinds, kumaStatus, kumaMonitorFor } = useStore()
+  const { probes, probingIds, isProbeStale, phpUpgrades, httpsToggles, purgeCacheProgress, localLinks, grantedKeyKinds, kumaStatus, kumaMonitorFor, kumaOps, localSync } = useStore()
+  const isVanity = isVanityPair(site.domain, serverName)
+  const reseedOp = kumaOps.get(site.id)
   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
@@ -195,6 +201,8 @@ export function SiteDetail({ site, serverName }: { site: Site; serverName: strin
       <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} />
+      {isVanity && reseedOp?.status === "running" && <Field label="Refresh" value="publishing…" valueColor={theme.warn} />}
+      {isVanity && reseedOp?.status === "error" && <Field label="Refresh" value={`failed: ${reseedOp.error ?? "unknown error"}`} valueColor={theme.bad} />}
       <Field label="Local" value={linkValue} valueColor={linkColor} />
       <SiteDnsSection site={site} />
       <Field
@@ -265,6 +273,16 @@ export function SiteDetail({ site, serverName }: { site: Site; serverName: strin
   )
 }
 
+// Site Control groups — see ServerControl above. Recomputes stack/vanity
+// itself since it's not a child of SiteDetail; both derivations are cheap.
+export function SiteControl({ site, serverName, layout }: { site: Site; serverName: string; layout?: "list" | "flow" }) {
+  const { probes, localSync } = useStore()
+  const stack = effectiveStack(site, probes.get(site.id)?.result.kind)
+  const isWordPress = stack !== "Non-WP"
+  const isVanity = isVanityPair(site.domain, serverName)
+  return <ControlPanel heading="Site Control" groups={siteGroups(isWordPress, localSync, isVanity)} layout={layout} />
+}
+
 // 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.
@@ -325,6 +343,38 @@ function Act({ keyName, label, on }: { keyName: string; label: string; on: boole
   )
 }
 
+// Shared status line: the selected site's local-link state (not linked / missing
+// / linked, with path + local URL + git drift). Used by both SiteContextStrip
+// (Stacks — status + inline t/v/L only) and ControlStrip (Browser — status +
+// the full action-group list) so the two don't drift apart.
+function siteLinkStatusLine(site: Site, link: LocalLink | undefined, state: ReturnType<typeof resolveLocalLink> | null, d: Drift | null | undefined) {
+  if (!link) {
+    return (
+      <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>
+    )
+  }
+  if (!state!.exists) {
+    return (
+      <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>
+    )
+  }
+  return (
+    <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>
+  )
+}
+
 // 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).
@@ -335,6 +385,10 @@ export const SITE_CONTEXT_STRIP_HEIGHT = 4
 // 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.
+//
+// Used by views (Stacks) whose keyboard handler only implements a subset of
+// siteGroups()'s keys — ControlStrip below, which advertises the FULL action
+// list, would be misleading there (hints for keys that don't actually fire).
 export function SiteContextStrip({ site }: { site: Site | null }) {
   const { localLinks, drift, ensureDrift } = useStore()
   const link = site ? localLinks.get(site.id) : undefined
@@ -364,28 +418,8 @@ export function SiteContextStrip({ site }: { site: Site | null }) {
           <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>
+        siteLinkStatusLine(site, link, state, d)
       )}
 
       {/* Line 2 — inline actions (fired by the host view on the selection) */}
@@ -401,3 +435,67 @@ export function SiteContextStrip({ site }: { site: Site | null }) {
     </box>
   )
 }
+
+// Height (incl. border) of the bottom control strip — views subtract this from
+// their list viewport so the panes shrink to make room. `ControlPanel`'s
+// layout="flow" skips its own heading (the strip's box title already says
+// "Site Control"/"Server Control") and puts each group's title in its own
+// column rather than its own line — both to keep this budget small even
+// though every group also gets a 1-row marginBottom for breathing room.
+// Sized for the worst realistic case (a WP + local-sync + vanity site — 5
+// groups: Open/Remote/Local/Vanity/Server, each ≤1 line of items given how
+// terse the labels are + its trailing blank row): 2 border + 1 status + 1
+// spacer + 5 groups × 2 (content + blank). A lighter site/server just leaves
+// blank rows — fixed and generous beats measuring actual wrapped height,
+// which would need a measure-then-rerender pass this app has no precedent for.
+export const CONTROL_STRIP_HEIGHT = 14
+
+// A full-width strip below the three panes (Browser's Servers tab only — see
+// the SiteContextStrip note above for why) showing whichever action list
+// applies to what's focused: the selected site's Site Control (status line +
+// Open/Remote/Local/Vanity/Server, `layout="flow"`) or, with focus on the
+// Servers pane, the selected server's Server Control (status line + Clone/
+// Access/Manage/Open). The space is always reserved (a placeholder when
+// nothing is selected) so the layout doesn't jump as the cursor moves.
+export function ControlStrip({ site, server, serverName }: { site: Site | null; server: Server | null; serverName: string }) {
+  const { localLinks, drift, ensureDrift } = useStore()
+  const link = site ? localLinks.get(site.id) : undefined
+  const state = link ? resolveLocalLink(link) : null
+  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={site ? " Site Control " : server ? " Server Control " : " Control "}
+      titleColor={theme.brand}
+      border
+      borderColor={link && !state!.exists ? theme.bad : theme.border}
+      style={{ height: CONTROL_STRIP_HEIGHT, flexDirection: "column", paddingLeft: 1, paddingRight: 1 }}
+    >
+      {/* Status line */}
+      {site ? (
+        siteLinkStatusLine(site, link, state, d)
+      ) : server ? (
+        <box style={{ flexDirection: "row" }}>
+          <text content={truncate(server.name, 44)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+          <text content={"  " + (server.ip_address ?? "—")} fg={theme.accent} wrapMode="none" style={{ flexShrink: 0 }} />
+          <text content={"  · " + server.connection_status} fg={statusColor(server.connection_status)} wrapMode="none" style={{ flexShrink: 0 }} />
+        </box>
+      ) : (
+        <text content="Select a server or site to see what you can do with it" fg={theme.textFaint} wrapMode="none" />
+      )}
+      <box style={{ height: 1 }} />
+
+      {/* Action groups */}
+      {site ? (
+        <SiteControl site={site} serverName={serverName} layout="flow" />
+      ) : server ? (
+        <ServerControl server={server} layout="flow" />
+      ) : null}
+    </box>
+  )
+}

package/src/ui/Onboarding.tsx

@@ -55,7 +55,7 @@ export function Onboarding({ onComplete }: { onComplete: () => void }) {
       >
         <text content="Let's connect this tool to your SpinupWP account." fg={theme.text} />
         <box style={{ height: 1 }} />
-        <text content="1. Open https://spinupwp.app/account/api/" fg={theme.textDim} />
+        <text content="1. In SpinupWP: Settings → API Tokens" fg={theme.textDim} />
         <text content="2. Create a token (Read Only to browse; Read/Write to upgrade PHP)" fg={theme.textDim} />
         <text content="3. Paste it below and press Enter" fg={theme.textDim} />
         <box style={{ height: 1 }} />

package/src/ui/components.tsx

@@ -368,25 +368,95 @@ export function Centered({ children }: { children: ReactNode }) {
   )
 }
 
+// Widest group title ("REMOTE"/"SERVER"/"VANITY"/"ACCESS"/"MANAGE" = 6 chars)
+// plus a little padding — the fixed label column width for layout="flow".
+const FLOW_LABEL_WIDTH = 8
+
 // A grouped, key-chipped action legend ("Site Control" / "Server Control"): a heading,
-// then dim group titles each over a list of `key → outcome` rows. Shared by the Search
-// actions pane and the Servers detail pane so the suite reads the same everywhere.
+// then dim group titles each over its `key → outcome` items. Shared by the Search
+// actions pane and the Servers tab's bottom Control strip so the suite reads the
+// same everywhere. `layout="list"` (default) puts the title on its own line above
+// one item per line — right for a narrow column. `layout="flow"` puts the title in
+// its own fixed-width left column (`alignItems: "flex-start"` keeps it pinned to
+// the top rather than stretching/centering when the row wraps) with items flowing
+// and wrapping in the remaining width — right for a full-width strip, where a long
+// group (e.g. REMOTE) can fit several items per line instead of one. Each item is
+// always its own box so "flow" wraps between whole items, never mid-label.
 export type ActionGroup = { title: string; items: [string, string][] }
-export function ControlPanel({ heading, groups }: { heading: string; groups: ActionGroup[] }) {
+export function ControlPanel({ heading, groups, layout = "list" }: { heading: string; groups: ActionGroup[]; layout?: "list" | "flow" }) {
   return (
     <box style={{ flexDirection: "column" }}>
-      <text content={heading} fg={theme.accent} />
-      {groups.map((group) => (
-        <box key={group.title} style={{ flexDirection: "column" }}>
-          <text content={group.title.toUpperCase()} fg={theme.textFaint} wrapMode="none" />
-          {group.items.map(([k, label]) => (
-            <box key={k} style={{ flexDirection: "row" }}>
-              <text content={` ${k} `} fg={theme.bg} bg={theme.brandDim} style={{ flexShrink: 0 }} />
-              <text content={`  ${label}`} fg={theme.text} wrapMode="none" />
+      {/* "flow" is only ever used inside a bordered box whose own title already
+          says "Site Control"/"Server Control" — skip the redundant heading line. */}
+      {layout === "list" && <text content={heading} fg={theme.accent} />}
+      {groups.map((group) =>
+        layout === "flow" ? (
+          <box key={group.title} style={{ flexDirection: "row", alignItems: "flex-start", marginBottom: 1 }}>
+            <box style={{ width: FLOW_LABEL_WIDTH, flexShrink: 0 }}>
+              <text content={group.title.toUpperCase()} fg={theme.textFaint} wrapMode="none" />
             </box>
-          ))}
-        </box>
-      ))}
+            <box style={{ flexDirection: "row", flexWrap: "wrap", flexGrow: 1 }}>
+              {group.items.map(([k, label]) => (
+                <box key={k} style={{ flexDirection: "row", marginRight: 2 }}>
+                  <text content={` ${k} `} fg={theme.bg} bg={theme.brandDim} style={{ flexShrink: 0 }} />
+                  <text content={`  ${label}`} fg={theme.text} wrapMode="none" />
+                </box>
+              ))}
+            </box>
+          </box>
+        ) : (
+          <box key={group.title} style={{ flexDirection: "column" }}>
+            <text content={group.title.toUpperCase()} fg={theme.textFaint} wrapMode="none" />
+            {group.items.map(([k, label]) => (
+              <box key={k} style={{ flexDirection: "row" }}>
+                <text content={` ${k} `} fg={theme.bg} bg={theme.brandDim} style={{ flexShrink: 0 }} />
+                <text content={`  ${label}`} fg={theme.text} wrapMode="none" />
+              </box>
+            ))}
+          </box>
+        ),
+      )}
     </box>
   )
 }
+
+// Site Control groups for ControlPanel — shared by Search's Actions pane and the
+// Browser tab's Details pane so the suite reads the same, and is discoverable,
+// everywhere a site can be selected. Labels are kept terse and avoid repeating
+// their group's title (e.g. "In browser" under OPEN, not "Open site in browser")
+// since the group label is always visible right next to them (as its own column
+// in layout="flow", or its own line in layout="list").
+//
+// The DB backup/sync use wp-cli, so they only apply to WordPress sites — omitted
+// for non-WP sites (their `d`/`p` keypresses are also guarded in the handler). DNS
+// (`n`) and the rest apply to any site. `isVanity` (the site's domain equals its
+// own server's name, per `isVanityPair`) adds the one-off page-refresh action —
+// vanity pages seeded before this app existed need a way to pick up the current
+// bundled HTML.
+export function siteGroups(isWordpress: boolean, localSync: boolean, isVanity: boolean): ActionGroup[] {
+  const remote: [string, string][] = [
+    ["s", "SSH"],
+    ["n", "DNS"],
+  ]
+  if (isWordpress) {
+    remote.push(["d", "↓ DB backup"])
+    if (localSync) remote.push(["p", "Pull prod. DB"])
+  }
+  const local: [string, string][] = [
+    ["t", "Terminal"],
+    ["v", "Local URL"],
+    ["L", "Link / edit"],
+  ]
+  if (isWordpress) local.push(["m", "Media fallback"])
+  remote.push(["u", "PHP ver."])
+  remote.push(["H", "Toggle HTTPS"])
+  remote.push(["P", "Purge cache"])
+  remote.push(["M", "Monitoring"])
+  return [
+    { title: "Open", items: [["o", "In browser"], ["w", "In SpinupWP"]] },
+    { title: "Remote", items: remote },
+    { title: "Local", items: local },
+    ...(isVanity ? [{ title: "Vanity", items: [["R", "Refresh"]] as [string, string][] }] : []),
+    { title: "Server", items: [["a", "Reboot / restart"], ["h", "Health"]] },
+  ]
+}

package/src/ui/store.tsx

@@ -45,7 +45,7 @@ import { withKuma, KumaClient, registerMonitors, registerFingerprintMonitor, reg
 import { deriveFingerprint } from "../lib/siteFingerprint.ts"
 import type { StoredProviders } from "../config.ts"
 import { fetchRebootInfo, grantSiteSshKey, revokeSiteSshKey, verifySudo, ensureSpinupKey, listPersonalKeys, keyBody, type RebootInfo } from "../lib/ssh.ts"
-import { estimateSourceSiteSizes, runStandardWpPull, runBedrockPull, runFilesOnlyPull, verifyClone, verifyFilesClone, type SudoCtx, type CloneStage, type CloneExecRecord, type VerifyResult as CloneVerifyResult } from "../lib/serverClone.ts"
+import { estimateSourceSiteSizes, runStandardWpPull, runBedrockPull, runFilesOnlyPull, verifyClone, verifyFilesClone, preflightBedrockSource, type SudoCtx, type CloneStage, type CloneExecRecord, type VerifyResult as CloneVerifyResult } from "../lib/serverClone.ts"
 import { CloneLogger } from "../lib/cloneLog.ts"
 import { syncAdditionalDomains } from "../lib/cloneDomains.ts"
 import { parseRepo, deployKeysSettingsUrl, ghAvailable, ghDeployKeyPresent, ghAddDeployKey, generateDeployKeypair, type RepoHost } from "../lib/gitDeployKey.ts"
@@ -3679,6 +3679,15 @@ export function StoreProvider({ children }: { children: ReactNode }) {
       }
       try {
         if (site.stack === "bedrock" && !site.gitRepo) return fail("create", "the source Bedrock site has no git repo to clone from.")
+        // Cheap pre-flight, before creating anything: catches a source whose actual
+        // files don't match its own configured Public Folder — the same mismatch
+        // runBedrockPull's own detect step would hit later, just before wasting a
+        // site-creation + auth cycle on a clone that can't succeed. Not a guarantee
+        // (see preflightBedrockSource) — the real check is still the one after create.
+        if (site.stack === "bedrock") {
+          const pre = await preflightBedrockSource(source, { domain: site.domain, publicFolder: site.publicFolder })
+          if (!pre.ok) return fail("create", pre.error)
+        }
         // create — Bedrock → `git` site (SpinupWP clones the repo); Standard WP →
         // blank + database; files-only → blank with NO database (nothing to import).
         set((s) => ({ ...s, step: "create", error: undefined, failedStep: undefined, detail: undefined, stageStartedAt: Date.now() }))
@@ -3803,7 +3812,7 @@ export function StoreProvider({ children }: { children: ReactNode }) {
         const onExec = logger ? (e: CloneExecRecord) => logger.log({ event: "exec", ...e }) : undefined
         const res =
           site.stack === "bedrock"
-            ? await runBedrockPull(source, dest, { domain: site.domain, sourceSiteUser: site.siteUser, destSiteUser: site.siteUser, destDbName: dbName, destDbUser: dbName, destDbPassword: dbPw, excludeUploads: site.excludeUploads }, onProgress, onExec, onTransfer)
+            ? await runBedrockPull(source, dest, { domain: site.domain, sourceSiteUser: site.siteUser, destSiteUser: site.siteUser, destDbName: dbName, destDbUser: dbName, destDbPassword: dbPw, excludeUploads: site.excludeUploads, publicFolder: site.publicFolder }, onProgress, onExec, onTransfer)
             : site.stack === "files"
               ? await runFilesOnlyPull(source, dest, { domain: site.domain, sourceSiteUser: site.siteUser, destSiteUser: site.siteUser, approxFilesBytes: site.sizeWebBytes }, onProgress, onExec, onTransfer)
               : await runStandardWpPull(source, dest, { domain: site.domain, sourceSiteUser: site.siteUser, destSiteUser: site.siteUser, destDbName: dbName, destDbUser: dbName, destDbPassword: dbPw, publicFolder: site.publicFolder, approxFilesBytes: site.sizeWebBytes }, onProgress, onExec, onTransfer)

package/src/ui/views/Browser.tsx

@@ -10,9 +10,9 @@ import { useKeyboard } from "@opentui/react"
 import { theme, statusColor, statusDot } from "../../lib/theme.ts"
 import { effectiveStack, stackColor, stackTag } from "../../lib/stack.ts"
 import { truncate } from "../../lib/format.ts"
-import { Panel, PhpVersionCell, Spinner, SiteStatusColumn } from "../components.tsx"
+import { Panel, PhpVersionCell, Spinner } from "../components.tsx"
 import { List, moveSelection } from "../List.tsx"
-import { ServerDetail, SiteDetail, SiteContextStrip, SITE_CONTEXT_STRIP_HEIGHT } from "../Details.tsx"
+import { ServerDetail, SiteDetail, ControlStrip, CONTROL_STRIP_HEIGHT } from "../Details.tsx"
 import { StatusBar } from "../StatusBar.tsx"
 import { openUrl } from "../../lib/open.ts"
 import { serverWebUrl, siteWebUrl } from "../../lib/spinupweb.ts"
@@ -23,7 +23,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, grantedKeyKinds, setServerActionsServer, serverOps, setLocalLinkSite, openLocalTerminal, openLocalUrl, localLinks, sshSite, setDnsInventoryServer, setNewServerSource, setNewServerOpen, setVanityServer, vanityJob, beginClone, isServerOsEol, setKumaSite } = store
+  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 } = store
 
   const [serverIndex, setServerIndex] = useState(0)
   const [siteIndex, setSiteIndex] = useState(0)
@@ -117,6 +117,17 @@ export function Browser({ rows }: { rows: number }) {
         // is taken), so the capital works everywhere.
         if (focus === "sites" && sites[siteIndex]) setKumaSite(sites[siteIndex])
         return
+      case "R": {
+        // Refresh a vanity page's HTML — only the one site per server whose
+        // domain equals the server's own name. Same binding/behavior as the
+        // m-overlay's R (KumaSite.tsx): fires directly, no confirm, since it
+        // just republishes the same bundled page that's already live.
+        const s = sites[siteIndex]
+        if (focus === "sites" && s && server && isVanityPair(s.domain, server.name)) {
+          return kumaConfigured ? startKumaSetup(s, { reseed: true }) : startVanityReseed(s)
+        }
+        return
+      }
       case "K":
         // Grant Spinup's machine key to the selected site over SSH (privileged
         // write via the server's sudo user — the API can't do this). Capital K
@@ -217,41 +228,32 @@ export function Browser({ rows }: { rows: number }) {
     }
   })
 
-  const listRows = Math.max(3, rows - 6 - SITE_CONTEXT_STRIP_HEIGHT)
+  const listRows = Math.max(3, rows - 6 - CONTROL_STRIP_HEIGHT)
   const focusedSite = sites[Math.min(siteIndex, Math.max(0, sites.length - 1))]
 
   const hints =
     focus === "servers"
       ? [
+          // The Control strip's Server Control list now shows every per-server
+          // key (S/a/N/h/w) — only nav + list-level actions stay here so the
+          // two can't drift out of sync. `c` isn't in Server Control (it's not
+          // an action ON the selected server, it creates a new one).
           { key: "↑↓/jk", label: "select" },
           { key: "→/⏎", label: "view sites" },
           { key: "c", label: "new server" },
-          { key: "S", label: "connect sudo" },
-          { key: "a", label: "server actions" },
-          { key: "N", label: "DNS hosts" },
-          { key: "h", label: "health" },
-          { key: "w", label: "SpinupWP" },
         ]
       : [
+          // The Control strip's Site Control list now shows every per-site
+          // key — this footer is nav-only so the two can't drift out of sync.
           { key: "↑↓/jk", label: "select site" },
           { key: "←/esc", label: "back" },
-          { key: "d", label: "identify app" },
-          { key: "n", label: "DNS host" },
-          { key: "u", label: "change PHP" },
-          { key: "m", label: "monitoring" },
-          { key: "K", label: "grant key" },
-          { key: "p", label: "plugins" },
-          { key: "o", label: "open" },
-          { key: "w", label: "SpinupWP" },
-          { key: "s", label: "ssh" },
-          { key: "h", label: "health" },
         ]
 
   return (
     <box style={{ flexGrow: 1, flexDirection: "column" }}>
       <box style={{ flexGrow: 1, flexDirection: "row", padding: 1, gap: 1 }}>
         {/* Servers pane */}
-        <Panel title={` Servers (${sortedServers.length}) `} active={focus === "servers"} width={44}>
+        <Panel title={` Servers (${sortedServers.length}) `} active={focus === "servers"} width="18%">
           <List
             items={sortedServers}
             selectedIndex={serverIndex}
@@ -291,11 +293,7 @@ export function Browser({ rows }: { rows: number }) {
 
         {/* Sites pane */}
         <Panel
-          title={
-            server
-              ? ` Sites · ${truncate(server.name, 20)} (${sites.length})   👤🔑 keys · H·C·B https/cache/backup `
-              : " Sites "
-          }
+          title={server ? ` Sites · ${truncate(server.name, 20)} (${sites.length}) ` : " Sites "}
           active={focus === "sites"}
           flexGrow={1}
         >
@@ -307,13 +305,11 @@ export function Browser({ rows }: { rows: number }) {
             keyFor={(s) => s.id}
             emptyText="No sites yet — press V to create a vanity site and connect this server"
             renderRow={(s, selected) => {
-              const updates = (s.wp_plugin_updates || 0) + (s.wp_theme_updates || 0) + (s.wp_core_update ? 1 : 0)
               // Use the DETECTED stack (probe result) so the tag reflects `d identify`
               // — SpinupWP's is_wordpress/git shape misclassifies some sites (e.g. a
               // /public/ WP install shown as "app" until probed). Falls back to the
               // API classification when unprobed. Matches the Stacks / Forgotten views.
               const stack = effectiveStack(s, probes.get(s.id)?.result.kind)
-              const keyKinds = grantedKeyKinds(s.id)
               // The server's own vanity/health page blends in perfectly when servers
               // are named like domains — mark it (⌂ + brand tint) so it can't hide.
               const vanity = !!server && isVanityPair(s.domain, server.name)
@@ -326,19 +322,11 @@ export function Browser({ rows }: { rows: number }) {
                     wrapMode="none"
                     style={{ flexGrow: 1, flexShrink: 1 }}
                   />
-                  <SiteStatusColumn
-                    linked={localLinks.has(s.id)}
-                    personalKey={keyKinds.personal > 0}
-                    machineKey={keyKinds.machine > 0}
-                    https={!!s.https?.enabled}
-                    cache={!!s.page_cache?.enabled}
-                    backup={!!(s.backups?.files || s.backups?.database)}
-                    updates={updates}
-                    selected={selected}
-                  />
-                  {/* Fixed-width stack column (widest tag = "bedrock" = 7) so the
-                      icon columns to its left, and the PHP column to its right,
-                      stay vertically aligned across every row regardless of tag. */}
+                  {/* Fixed-width stack column (widest tag = "bedrock" = 7) so it and
+                      the PHP column stay vertically aligned across every row. Per-site
+                      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. */}
                   <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} />
                 </>
@@ -348,17 +336,21 @@ export function Browser({ rows }: { rows: number }) {
         </Panel>
 
         {/* Detail pane */}
-        <Panel title=" Details " width={44}>
+        <Panel title=" Details " width="32%">
           {focus === "sites" && focusedSite ? (
             <SiteDetail site={focusedSite} serverName={server?.name ?? "—"} />
           ) : server ? (
-            <ServerDetail server={server} siteCount={sites.length} showControl />
+            <ServerDetail server={server} siteCount={sites.length} />
           ) : (
             <text content="No data" fg={theme.textFaint} />
           )}
         </Panel>
       </box>
-      <SiteContextStrip site={focus === "sites" ? focusedSite ?? null : null} />
+      <ControlStrip
+        site={focus === "sites" ? focusedSite ?? null : null}
+        server={focus === "servers" ? server ?? null : null}
+        serverName={server?.name ?? "—"}
+      />
       <StatusBar hints={hints} message={flash ?? undefined} messageColor={theme.brand} />
     </box>
   )