spinuptui 0.24.4 → 0.26.0

package/src/ui/views/LocalSetup.tsx

@@ -0,0 +1,256 @@
+// Clone a brand-new local working copy from production — the guided
+// alternative to `L`'s manual "enter a path" form, offered when a site has no
+// local link yet. Opened from LocalLink.tsx's choose screen.
+//
+// Gets the code down (git clone, or an rsync pull over SSH excluding uploads/
+// for non-git sites), runs `composer install` for Bedrock/Radicle, then links
+// the result exactly like the manual form would. It deliberately stops there —
+// the local database and webserver config are NOT touched here. On success it
+// hands off to the existing dbSync (`p`) flow unchanged (which itself gates on
+// `localSync` being enabled), then that flow's own done screen already nudges
+// into mediaFallback (`m`). Three existing, already-reviewed screens chained
+// by keypresses, not one new mega state machine.
+
+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 type { LocalSetupStage } from "../../lib/localSetup.ts"
+
+const SETUP_STEPS: { stage: LocalSetupStage; label: string }[] = [
+  { stage: "fetch", label: "Get the code (clone / pull)" },
+  { stage: "build", label: "composer install" },
+]
+
+export function LocalSetupOverlay() {
+  const { localSetupSite: site, setLocalSetupSite, serverById, planLocalSetupFor, localSetups, startLocalSetup, clearLocalSetup, localSync, setEnableLocalSyncSite, setDbSyncSite } = useStore()
+
+  const progress = site ? localSetups.get(site.id) : undefined
+  const [path, setPath] = useState("")
+  const [url, setUrl] = useState("")
+  const [field, setField] = useState<"path" | "url">("path")
+  const [formError, setFormError] = useState<string | null>(null)
+
+  const dp: "form" | "running" | "done" | "error" =
+    !progress ? "form" : progress.stage === "done" ? "done" : progress.stage === "error" ? "error" : "running"
+
+  const close = () => {
+    if (site && (progress?.stage === "done" || progress?.stage === "error")) clearLocalSetup(site.id)
+    setLocalSetupSite(null)
+  }
+
+  const submit = () => {
+    if (!site) return
+    const res = planLocalSetupFor(site, path, url)
+    if (!res.ok) {
+      setFormError(res.error)
+      return
+    }
+    setFormError(null)
+    startLocalSetup(site, path, url)
+  }
+
+  const pullDb = () => {
+    if (!site) return
+    close()
+    if (!localSync) setEnableLocalSyncSite(site)
+    else setDbSyncSite(site)
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+
+    if (dp === "form") {
+      if (name === "up") return setField("path")
+      if (name === "down") return setField("url")
+      return
+    }
+    if (dp === "error") {
+      if (name === "r" && site) {
+        clearLocalSetup(site.id)
+        setFormError(null)
+      }
+      return
+    }
+    if (dp === "done") {
+      if (name === "return" || name === "p") return pullDb()
+      return
+    }
+  })
+
+  if (!site) return null
+  const server = serverById(site.server_id)
+  const isGit = !!site.git?.repo
+
+  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="⇩ Clone fullsite (DB + files) from production  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 38)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function renderBody() {
+    if (dp === "form") {
+      return (
+        <Panel title=" Clone from production " active>
+          <box style={{ flexDirection: "column", width: 68, paddingTop: 1, paddingBottom: 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={isGit ? "source: git clone (this site's repo)" : "source: file pull over SSH (excludes uploads/)"} fg={theme.textFaint} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Local path for the new working copy" fg={field === "path" ? theme.accent : theme.textDim} />
+            <input
+              focused={field === "path"}
+              value={path}
+              placeholder={`~/code/${site!.domain}`}
+              onInput={setPath}
+              onSubmit={() => setField("url")}
+              style={{ backgroundColor: theme.bgAlt, focusedBackgroundColor: theme.bgAlt, textColor: theme.text }}
+            />
+            <box style={{ height: 1 }} />
+            <text content="Local URL (optional) — Valet, Cove, LocalWP, Herd, DDEV…" fg={field === "url" ? theme.accent : theme.textDim} />
+            <input
+              focused={field === "url"}
+              value={url}
+              placeholder="https://example.test"
+              onInput={setUrl}
+              onSubmit={submit}
+              style={{ backgroundColor: theme.bgAlt, focusedBackgroundColor: theme.bgAlt, textColor: theme.text }}
+            />
+            {formError ? (
+              <>
+                <box style={{ height: 1 }} />
+                <text content={`✕ ${formError}`} fg={theme.bad} wrapMode="none" />
+              </>
+            ) : null}
+            <box style={{ height: 1 }} />
+            <text content="This only pulls code — your local DB/webserver aren't touched." fg={theme.textFaint} wrapMode="none" />
+            <text content="↑↓ switch field · Enter on the URL starts · Esc cancels" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    // "build" (composer install) only applies to Bedrock/Radicle — unknown
+    // until the fetch stage finishes, so it stays out of the list entirely
+    // (like DbSync's optional hook row) until we actually know, rather than
+    // rendering a row that never ran as if it had.
+    const buildApplies =
+      progress?.stage === "build" ||
+      (progress?.stage === "done" && !!progress.ranComposer) ||
+      (progress?.stage === "error" && progress.failedStage === "build")
+    const steps = SETUP_STEPS.filter((s) => s.stage !== "build" || buildApplies)
+    const order = steps.map((s) => s.stage)
+    const curIdx = order.indexOf((progress?.stage ?? "fetch") as LocalSetupStage)
+    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=" Cloning from production " 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="Files are down and linked." fg={theme.text} wrapMode="none" />
+              </box>
+              <box style={{ height: 1 }} />
+              <DestPath path={middleTruncate(progress?.destPath ?? "", 62)} fileColor={theme.good} width={62} />
+              {progress?.ranComposer ? <text content="composer install ran" fg={theme.textFaint} wrapMode="none" /> : null}
+              <box style={{ height: 1 }} />
+              <text content="Next: create a local database and point your local tool at it." fg={theme.textFaint} wrapMode="none" />
+              {/* The file pull copies the site's real wp-config.php, production
+                  DB credentials and all. Nothing local can reach production's
+                  database through them (its DB_HOST is localhost), but local
+                  wp-cli authenticates as the production user, so the DB pull
+                  below is denied until they're localized. Say so here rather
+                  than letting it surface as a bare "Access denied" later. */}
+              {isGit ? null : (
+                <>
+                  <text content="wp-config.php came down with production's DB credentials —" fg={theme.warn} wrapMode="none" />
+                  <text content="update DB_NAME / DB_USER / DB_PASSWORD / DB_HOST to match," fg={theme.warn} wrapMode="none" />
+                  <text content="or the DB pull is denied as production's user." fg={theme.warn} wrapMode="none" />
+                </>
+              )}
+              {/* The mirror image on the git path: Bedrock/Radicle keep DB
+                  credentials and WP_HOME in .env, which is deliberately not in
+                  the repo — so a fresh clone has none and wp-cli runs with
+                  empty settings. composer install having run is the signal. */}
+              {progress?.ranComposer ? (
+                <>
+                  <text content=".env isn't in the repo, so this checkout has none — copy" fg={theme.warn} wrapMode="none" />
+                  <text content=".env.example to .env and set DB_* + WP_HOME before pulling." fg={theme.warn} wrapMode="none" />
+                </>
+              ) : null}
+              <text content="Press ⏎ / p to pull production's database now, once that's ready." fg={theme.purple} wrapMode="none" />
+              <text content="Esc to finish here" fg={theme.textFaint} wrapMode="none" />
+            </>
+          ) : 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 — it keeps running in the background." fg={theme.textFaint} wrapMode="none" />
+          )}
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    switch (dp) {
+      case "form":
+        return [
+          { key: "↑↓", label: "field" },
+          { key: "⏎", label: "start" },
+          { key: "esc", label: "cancel" },
+        ]
+      case "error":
+        return [
+          { key: "r", label: "retry" },
+          { key: "esc", label: "close" },
+        ]
+      case "done":
+        return [
+          { key: "⏎/p", label: "pull DB" },
+          { key: "esc", label: "close" },
+        ]
+      default:
+        return [{ key: "esc", label: "close" }]
+    }
+  }
+}

package/src/ui/views/Search.tsx

@@ -9,11 +9,11 @@ import { useKeyboard } from "@opentui/react"
 import { theme, statusColor, statusDot } from "../../lib/theme.ts"
 import { classifyStack, stackColor, stackTag } from "../../lib/stack.ts"
 import { truncate } from "../../lib/format.ts"
-import { Panel, Field, StatusBadge, SiteMetaCell, Spinner, ControlPanel, siteGroups } from "../components.tsx"
+import { Panel, SiteMetaCell, Spinner } from "../components.tsx"
 import { isDbBackupInFlight } from "../../lib/dbBackup.ts"
 import { isDbSyncInFlight } from "../../lib/dbSync.ts"
 import { List, moveSelection } from "../List.tsx"
-import { ServerDetail, SiteDetail, SERVER_CONTROL } 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"
@@ -35,11 +35,12 @@ function score(haystack: string, q: string): number | null {
 
 export function Search({ rows }: { rows: number }) {
   const store = useStore()
-  const { servers, sites, serverById, setInputMode, setRoute, route, overlayOpen, setHealthServer, setPhpUpgradeSite, setHttpsToggleSite, setPurgeCacheSite, setServerActionsServer, accountSlug, localLinks, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setDbBackupSite, dbBackups, setDbSyncSite, dbSyncs, localSync, setMediaFallbackSite, beginClone, setSudoConnectServer, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setWpInventorySite, setGrantKeySite, runProbe, setEnableLocalSyncSite } = store
+  const { servers, sites, serverById, sitesForServer, setInputMode, setRoute, route, overlayOpen, setHealthServer, setPhpUpgradeSite, setHttpsToggleSite, setPurgeCacheSite, setServerActionsServer, accountSlug, localLinks, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setDbBackupSite, dbBackups, setDbSyncSite, dbSyncs, localSync, setMediaFallbackSite, beginClone, setSudoConnectServer, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setWpInventorySite, setGrantKeySite, runProbe, setEnableLocalSyncSite, setVanityServer, vanityJob } = store
   const [query, setQuery] = useState("")
   const [selected, setSelected] = useState(0)
   // "query" = typing/filtering (input focused); "actions" = input blurred so the
-  // selected result's single-key actions (o/w/u/h) fire. Tab/→ enters, ←/Esc exits.
+  // selected result's single-key actions fire — listed in the Site/Server
+  // Control drawer below, same as the Servers tab. Tab/→ enters, ←/Esc exits.
   const [focus, setFocus] = useState<"query" | "actions">("query")
   const [flash, setFlash] = useState<string | null>(null)
   const flashMsg = (m: string) => {
@@ -160,11 +161,15 @@ export function Search({ rows }: { rows: number }) {
       case "L":
         if (current?.kind === "site") setLocalLinkSite(current.site)
         return
-      case "K":
-        // Grant Spinup's machine key to the selected site over SSH — matches
-        // Browser's K binding, which was already in the shared legend here.
-        if (current?.kind === "site") setGrantKeySite(current.site)
+      case "K": {
+        // Grant Spinup's machine key over SSH — matches Browser's K binding,
+        // which is site-anchored but works on a server result too (falls back
+        // to the server's first key-eligible site, mirroring Browser.tsx).
+        const anchor =
+          current?.kind === "site" ? current.site : current?.kind === "server" ? sitesForServer(current.server.id).find((s) => s.site_user) : undefined
+        if (anchor) setGrantKeySite(anchor)
         return
+      }
       case "s":
         if (current?.kind === "site") flashMsg(sshSite(current.site.id))
         return
@@ -262,6 +267,17 @@ export function Search({ rows }: { rows: number }) {
       case "N":
         if (current?.kind === "server") setDnsInventoryServer(current.server)
         return
+      case "V": {
+        // Create the vanity site at the server's own hostname, or resume an
+        // unfinished build — same gating as Browser's V.
+        if (current?.kind === "server") {
+          const s = current.server
+          const resumable = vanityJob && vanityJob.step !== "done" && vanityJob.serverId === s.id
+          const hasVanity = sitesForServer(s.id).some((site) => site.domain.toLowerCase() === s.name.toLowerCase())
+          if (resumable || !hasVanity) setVanityServer(s)
+        }
+        return
+      }
     }
   })
 
@@ -273,22 +289,14 @@ export function Search({ rows }: { rows: number }) {
           { key: "Tab/→", label: "actions" },
           { key: "esc", label: "dashboard" },
         ]
-      : current?.kind === "server"
-        ? [
-            { key: "↑↓", label: "select" },
-            { key: "w", label: "SpinupWP" },
-            { key: "a", label: "actions" },
-            { key: "h", label: "health" },
-            { key: "←/esc", label: "back" },
-          ]
-        : [
-            // The Actions panel (Details pane) already lists every per-site key —
-            // this footer is nav-only now, so the two can't drift out of sync.
-            { key: "↑↓", label: "select" },
-            { key: "←/esc", label: "back" },
-          ]
+      : [
+          // The Control drawer below already lists every key for the selected
+          // result — this footer stays nav-only so the two can't drift out of sync.
+          { key: "↑↓", label: "select" },
+          { key: "←/esc", label: "back" },
+        ]
 
-  const listRows = Math.max(3, rows - 8) // input box (3) + status bar (1) + chrome
+  const listRows = Math.max(3, rows - 9 - CONTROL_STRIP_HEIGHT) // input box (3) + status bar (1) + chrome + control drawer
 
   return (
     <box style={{ flexGrow: 1, flexDirection: "column" }}>
@@ -374,14 +382,9 @@ export function Search({ rows }: { rows: number }) {
           />
         </Panel>
 
-        <Panel title={focus === "actions" ? " Actions " : " Details "} active={focus === "actions"} width={64}>
+        <Panel title=" Details " width={64}>
           {!current ? (
             <text content="No selection" fg={theme.textFaint} />
-          ) : focus === "actions" ? (
-            <ActionsCard
-              result={current}
-              serverName={current.kind === "site" ? (serverById(current.site.server_id)?.name ?? "—") : current.server.name}
-            />
           ) : current.kind === "server" ? (
             <ServerDetail server={current.server} siteCount={store.sitesForServer(current.server.id).length} />
           ) : (
@@ -390,44 +393,13 @@ export function Search({ rows }: { rows: number }) {
         </Panel>
       </box>
 
-      <StatusBar hints={hints} message={flash ?? undefined} showGlobal={false} />
-    </box>
-  )
-}
+      <ControlStrip
+        site={current?.kind === "site" ? current.site : null}
+        server={current?.kind === "server" ? current.server : null}
+        serverName={current?.kind === "site" ? (serverById(current.site.server_id)?.name ?? "—") : current?.kind === "server" ? current.server.name : "—"}
+      />
 
-function ActionsCard({ result, serverName }: { result: Result; serverName: string }) {
-  const isSite = result.kind === "site"
-  const name = isSite ? result.site.domain : result.server.name
-  const status = isSite ? result.site.status : result.server.connection_status
-  // Server results reuse the SAME Server Control suite as the Browser detail pane.
-  const groups = isSite ? siteGroups(result.site.is_wordpress, isVanityPair(result.site.domain, serverName)) : SERVER_CONTROL
-  return (
-    <box style={{ flexDirection: "column" }}>
-      <box style={{ flexDirection: "row" }}>
-        <text content={truncate(name, 30)} fg={theme.text} attributes={1} wrapMode="none" />
-        <box style={{ flexGrow: 1 }} />
-        <StatusBadge status={status} />
-      </box>
-      {isSite ? (
-        <>
-          <text content={(result.site.https?.enabled ? "https://" : "http://") + result.site.domain} fg={theme.accent} wrapMode="none" />
-          <box style={{ height: 1 }} />
-          <Field label="Server" value={truncate(serverName, 28)} labelWidth={8} />
-          <Field label="PHP" value={result.site.php_version ?? "—"} labelWidth={8} />
-          <Field label="Stack" value={classifyStack(result.site)} valueColor={stackColor(classifyStack(result.site))} labelWidth={8} />
-        </>
-      ) : (
-        <>
-          <text content={result.server.ip_address ?? "—"} fg={theme.accent} wrapMode="none" />
-          <box style={{ height: 1 }} />
-          <Field label="Provider" value={result.server.provider_name ?? "—"} labelWidth={9} />
-          <Field label="Region" value={result.server.region ?? "—"} labelWidth={9} />
-        </>
-      )}
-      <box style={{ height: 1 }} />
-      <ControlPanel heading={isSite ? "Site Control" : "Server Control"} groups={groups} />
-      <box style={{ height: 1 }} />
-      <text content="↑↓ select · ←/Esc back to search" fg={theme.textFaint} wrapMode="none" />
+      <StatusBar hints={hints} message={flash ?? undefined} showGlobal={false} />
     </box>
   )
 }

package/src/ui/views/ServerActions.tsx

@@ -15,6 +15,9 @@ import { Panel, Spinner, Centered } from "../components.tsx"
 import { StatusBar } from "../StatusBar.tsx"
 import { useStore } from "../store.tsx"
 import { moveSelection } from "../List.tsx"
+import { openUrl } from "../../lib/open.ts"
+import { serverWebUrl } from "../../lib/spinupweb.ts"
+import { toast } from "../toast.ts"
 import type { RebootInfo } from "../../lib/ssh.ts"
 import type { ServerOpKind } from "../store.tsx"
 
@@ -56,9 +59,11 @@ export function ServerActions() {
     rebootInfoLoading,
     rebootInfoErrors,
     loadRebootInfo,
+    accountSlug,
   } = store
 
   const rebootRequired = !!server?.reboot_required
+  const upgradeRequired = !!server?.upgrade_required
   const [phase, setPhase] = useState<Phase>("pick")
   // Cursor starts on Reboot when one is pending, else on the first restart.
   const [index, setIndex] = useState(() => (server?.reboot_required ? 0 : 1))
@@ -108,6 +113,12 @@ export function ServerActions() {
           setTarget(ACTIONS[index])
           setPhase("confirm")
           return
+        case "w":
+          if (upgradeRequired && server) {
+            openUrl(serverWebUrl(server.id, accountSlug))
+            toast.success(accountSlug ? "Opening in SpinupWP…" : "Set accountSlug for deep links — opening dashboard")
+          }
+          return
       }
       return
     }
@@ -179,17 +190,17 @@ export function ServerActions() {
             {/* Reboot "why" context */}
             {rebootRequired && (
               <>
-                <box style={{ flexDirection: "row", height: 1 }}>
-                  <text content="⚠ reboot pending — " fg={theme.warn} style={{ flexShrink: 0 }} />
+                <box style={{ flexDirection: "column" }}>
+                  <text content="⚠ reboot pending" fg={theme.warn} wrapMode="none" />
                   {infoLoading ? (
                     <box style={{ flexDirection: "row" }}>
                       <Spinner interval={120} />
                       <text content=" checking what's pending…" fg={theme.textDim} wrapMode="none" />
                     </box>
                   ) : info ? (
-                    <text content={rebootSummary(info)} fg={theme.textDim} wrapMode="none" style={{ flexShrink: 1 }} />
+                    <text content={rebootSummary(info)} fg={theme.textDim} />
                   ) : infoError ? (
-                    <text content="couldn't read detail over SSH" fg={theme.textFaint} wrapMode="none" />
+                    <text content={infoError} fg={theme.textFaint} />
                   ) : (
                     <text content="reboot required" fg={theme.textDim} wrapMode="none" />
                   )}
@@ -197,6 +208,20 @@ export function ServerActions() {
                 <box style={{ height: 1 }} />
               </>
             )}
+            {/* SpinupWP platform upgrade — the API only exposes this as a flag,
+                no detail; the only actionable path is the web app. Two lines
+                (not a height:1 row) so the explanation can wrap instead of
+                overflowing the panel — see the flexGrow/flexShrink gotcha in
+                CLAUDE.md. */}
+            {upgradeRequired && (
+              <>
+                <box style={{ flexDirection: "column" }}>
+                  <text content="⬆ SpinupWP upgrade pending" fg={theme.warn} wrapMode="none" />
+                  <text content="Not doable from here — press w to open it in SpinupWP." fg={theme.textDim} />
+                </box>
+                <box style={{ height: 1 }} />
+              </>
+            )}
             {ACTIONS.map((a, i) => {
               const selected = i === index
               const recommended = a.kind === "reboot" && rebootRequired
@@ -308,6 +333,7 @@ export function ServerActions() {
         return [
           { key: "↑↓/jk", label: "action" },
           { key: "⏎", label: "choose" },
+          ...(upgradeRequired ? [{ key: "w", label: "open in SpinupWP" }] : []),
           { key: "esc", label: "cancel" },
         ]
       case "confirm":