spinuptui 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -11,6 +11,19 @@ versions; such changes are called out here.
 
 ## [Unreleased]
 
+## [0.24.0] - 2026-07-15
+
+### Added
+- **`p` (Pull prod. DB) is now discoverable even when `localSync` is off.**
+  Previously the Site Control legend hid the entry entirely until `localSync`
+  was enabled in config — the only one of `p`'s three preconditions
+  (WordPress, linked copy, localSync) that hid the entry instead of flashing
+  a message on press. Now `p` always shows for WordPress sites; pressing it
+  with `localSync` off opens an in-app "Enable local sync?" confirm instead.
+  Confirming just saves the setting — you press `p` again afterward to
+  actually pull, so the destructive action itself stays behind two
+  deliberate presses, same as before.
+
 ## [0.23.0] - 2026-07-15
 
 ### Added
@@ -1226,7 +1239,8 @@ Initial tagged release.
 ### Notes
 - Read-only release: works with a SpinupWP **Read Only** API token.
 
-[Unreleased]: https://github.com/mwender/spinupwp-tui/compare/v0.23.0...HEAD
+[Unreleased]: https://github.com/mwender/spinupwp-tui/compare/v0.24.0...HEAD
+[0.24.0]: https://github.com/mwender/spinupwp-tui/compare/v0.23.0...v0.24.0
 [0.23.0]: https://github.com/mwender/spinupwp-tui/compare/v0.22.3...v0.23.0
 [0.22.3]: https://github.com/mwender/spinupwp-tui/compare/v0.22.2...v0.22.3
 [0.22.2]: https://github.com/mwender/spinupwp-tui/compare/v0.22.1...v0.22.2

package/README.md

@@ -220,6 +220,10 @@ These can be set in `config.json` or via an environment variable:
   and stack probes (see "Server health" below).
 - **`localSync`** / `SPINUPWP_LOCAL_SYNC` — opt-in for the **Pull production →
   local** DB sync (`p`); off by default because it overwrites your local database.
+  You don't need to set this by hand: pressing `p` on a WordPress site while
+  it's off opens an in-app "Enable local sync?" prompt that flips and saves it
+  for you — press `p` again afterward to actually pull. Setting it directly is
+  still supported for scripted/first-run setups.
   **Prefer `"localSync": true` in `config.json`** — it's read from a fixed path
   (`~/.config/spinupwp-tui/config.json`) so it applies wherever you launch `spinuptui`
   from. The environment variable works too, but note a `.env` is only loaded when

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spinuptui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "SpinupTUI — a terminal dashboard for browsing, monitoring, and managing your SpinupWP servers and sites.",
   "type": "module",
   "bin": {

package/src/ui/App.tsx

@@ -23,6 +23,7 @@ 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 { EnableLocalSync } from "./views/EnableLocalSync.tsx"
 import { MediaFallback } from "./views/MediaFallback.tsx"
 import { ServerActions } from "./views/ServerActions.tsx"
 import { NewServer } from "./views/NewServer.tsx"
@@ -67,6 +68,7 @@ export function App() {
     store.sudoConnectServer !== null ||
     store.dbBackupSite !== null ||
     store.dbSyncSite !== null ||
+    store.enableLocalSyncSite !== null ||
     store.mediaFallbackSite !== null ||
     store.serverActionsServer !== null ||
     store.newServerOpen ||
@@ -143,6 +145,9 @@ export function App() {
     // The DB-sync overlay owns the keyboard while open.
     if (store.dbSyncSite) return
 
+    // The "enable local sync?" confirm overlay owns the keyboard while open.
+    if (store.enableLocalSyncSite) return
+
     // The media-fallback overlay owns the keyboard while open.
     if (store.mediaFallbackSite) return
 
@@ -244,6 +249,7 @@ export function App() {
       {store.sudoConnectServer && <SudoConnect />}
       {store.dbBackupSite && <DbBackup />}
       {store.dbSyncSite && <DbSync />}
+      {store.enableLocalSyncSite && <EnableLocalSync />}
       {store.mediaFallbackSite && <MediaFallback />}
       {store.serverActionsServer && <ServerActions />}
       {store.newServerOpen && <NewServer />}

package/src/ui/Details.tsx

@@ -276,11 +276,11 @@ 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 { probes } = 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} />
+  return <ControlPanel heading="Site Control" groups={siteGroups(isWordPress, isVanity)} layout={layout} />
 }
 
 // DNS zone-host lines for a site's domains, populated on demand (key `n`). Each

package/src/ui/components.tsx

@@ -434,7 +434,14 @@ export function ControlPanel({ heading, groups, layout = "list" }: { heading: st
 // 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[] {
+//
+// `p` (Pull prod. DB) is always shown for WordPress sites, even when the
+// localSync config flag is off — pressing it then opens a confirm overlay to
+// enable the flag, rather than hiding the entry entirely. That matches how
+// the OTHER two gates on this same action already behave (is_wordpress and
+// "not linked" both flash on press instead of hiding the entry); localSync
+// used to be the odd one out.
+export function siteGroups(isWordpress: boolean, isVanity: boolean): ActionGroup[] {
   const remote: [string, string][] = [
     ["s", "SSH"],
     ["K", "Grant SSH key"],
@@ -443,7 +450,7 @@ export function siteGroups(isWordpress: boolean, localSync: boolean, isVanity: b
   ]
   if (isWordpress) {
     remote.push(["d", "↓ DB backup"])
-    if (localSync) remote.push(["p", "Pull prod. DB"])
+    remote.push(["p", "Pull prod. DB"])
     remote.push(["e", "Plugins & themes"])
   }
   const local: [string, string][] = [

package/src/ui/store.tsx

@@ -728,6 +728,12 @@ interface StoreValue extends DataState {
   sshUser: string | null
   // Opt-in for the destructive production→local DB sync (`p`); default off.
   localSync: boolean
+  // The site `p` was pressed on while localSync was off — drives the "enable
+  // local sync?" confirm overlay. null when the overlay is closed.
+  enableLocalSyncSite: Site | null
+  setEnableLocalSyncSite: (s: Site | null) => void
+  // Persists localSync=true to config.json and flips the reactive flag above.
+  enableLocalSync: () => void
   // SpinupWP account slug (from env/config) for building web deep links.
   accountSlug: string | null
   sitesForServer: (serverId: number) => Site[]
@@ -997,6 +1003,8 @@ export function StoreProvider({ children }: { children: ReactNode }) {
   const [dbBackups, setDbBackups] = useState<Map<number, DbBackupProgress>>(new Map())
   const [dbSyncSite, setDbSyncSite] = useState<Site | null>(null)
   const [dbSyncs, setDbSyncs] = useState<Map<number, DbSyncProgress>>(new Map())
+  const [localSync, setLocalSyncState] = useState<boolean>(() => cfgRef.current.localSync)
+  const [enableLocalSyncSite, setEnableLocalSyncSite] = useState<Site | null>(null)
   const [mediaFallbackSite, setMediaFallbackSite] = useState<Site | null>(null)
   const [localRoots, setLocalRoots] = useState<string[]>(() => [...cfgRef.current.localRoots])
   const [discoverOpen, setDiscoverOpen] = useState(false)
@@ -1728,6 +1736,12 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     })
   }, [])
 
+  const enableLocalSync = useCallback(() => {
+    cfgRef.current.localSync = true
+    void saveConfig({ localSync: true })
+    setLocalSyncState(true)
+  }, [])
+
   const openLocalTerminal = useCallback(
     (siteId: number) => {
       const link = localLinks.get(siteId)
@@ -4326,7 +4340,10 @@ export function StoreProvider({ children }: { children: ReactNode }) {
     rebootInfoErrors,
     loadRebootInfo,
     sshUser: cfgRef.current.sshUser,
-    localSync: cfgRef.current.localSync,
+    localSync,
+    enableLocalSyncSite,
+    setEnableLocalSyncSite,
+    enableLocalSync,
     accountSlug: cfgRef.current.accountSlug,
     sitesForServer,
     serverById,

package/src/ui/views/Browser.tsx

@@ -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, setServerActionsServer, serverOps, setLocalLinkSite, openLocalTerminal, openLocalUrl, sshSite, setDnsInventoryServer, setNewServerSource, setNewServerOpen, setVanityServer, vanityJob, beginClone, isServerOsEol, setKumaSite, kumaConfigured, startKumaSetup, startVanityReseed, setDbSyncSite, localSync, localLinks, setDbBackupSite, setMediaFallbackSite } = 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, setDbSyncSite, localSync, localLinks, setDbBackupSite, setMediaFallbackSite, setEnableLocalSyncSite } = store
 
   const [serverIndex, setServerIndex] = useState(0)
   const [siteIndex, setSiteIndex] = useState(0)
@@ -203,11 +203,14 @@ export function Browser({ rows }: { rows: number }) {
         // Pull production → local (opt-in, overwrites the local DB): needs a
         // WordPress site, localSync enabled, and a linked local copy. Same
         // gate as Search's `p` (Search.tsx) so the Site Control legend's
-        // "Pull prod. DB" label is accurate here too.
+        // "Pull prod. DB" label is accurate here too. A localSync-off site
+        // opens a confirm overlay to enable it (rather than a dead-end flash)
+        // since it's now always shown in the legend, not hidden until enabled.
         const s = focus === "sites" ? sites[siteIndex] : undefined
         if (!s) return
         if (!localSync) {
-          setFlash('Local sync is off — set "localSync": true in config to enable')
+          setEnableLocalSyncSite(s)
+          return
         } else if (!s.is_wordpress) {
           setFlash("Sync needs WordPress (wp-cli) — this isn't a WP site")
         } else if (!localLinks.has(s.id)) {

package/src/ui/views/EnableLocalSync.tsx

@@ -0,0 +1,88 @@
+// "Enable local sync?" confirm overlay — opened when `p` (Pull prod. DB) is
+// pressed on a site while the localSync config flag is off. localSync is a
+// deliberate opt-in (pulling production overwrites the local database), so
+// confirming here only flips the flag and saves it — it does NOT chain into
+// the pull itself. The user presses `p` again afterward to actually run it,
+// which still has its own confirm-before-firing step. Keeps the destructive
+// action behind two deliberate presses, same safety margin as before, while
+// making the feature discoverable instead of a silent config-file-only switch.
+
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel, Centered } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+
+type Phase = "confirm" | "done"
+
+export function EnableLocalSync() {
+  const { enableLocalSyncSite: site, setEnableLocalSyncSite, enableLocalSync } = useStore()
+  const [phase, setPhase] = useState<Phase>("confirm")
+
+  const close = () => setEnableLocalSyncSite(null)
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (phase === "confirm") {
+      if (name === "y") {
+        enableLocalSync()
+        setPhase("done")
+        return
+      }
+      if (name === "escape" || name === "q") return close()
+      return
+    }
+    // "done" — any key closes.
+    return close()
+  })
+
+  if (!site) return null
+
+  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="↓ Local sync  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 40)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={phase === "confirm" ? [{ key: "y", label: "enable" }, { key: "esc", label: "cancel" }] : [{ key: "any", label: "close" }]} showGlobal={false} />
+    </box>
+  )
+
+  function renderBody() {
+    if (phase === "confirm") {
+      return (
+        <Panel title=" Enable local sync? " active>
+          <box style={{ flexDirection: "column", width: 62, paddingTop: 1, paddingBottom: 1 }}>
+            <text content="Local sync is off — it's opt-in because pulling production" fg={theme.text} wrapMode="none" />
+            <text content="overwrites your LOCAL database." fg={theme.text} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Enabling it just flips the setting — it won't pull anything" fg={theme.textDim} wrapMode="none" />
+            <text content="yet. Press p again afterward to actually pull production." fg={theme.textDim} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Press y to enable · Esc to cancel" fg={theme.textFaint} wrapMode="none" />
+          </box>
+        </Panel>
+      )
+    }
+
+    return (
+      <Panel title=" Done " active>
+        <box style={{ flexDirection: "column", width: 56, paddingTop: 1, paddingBottom: 1 }}>
+          <box style={{ flexDirection: "row" }}>
+            <text content="✓ " fg={theme.good} />
+            <text content="Local sync enabled" fg={theme.text} wrapMode="none" />
+          </box>
+          <box style={{ height: 1 }} />
+          <text content="Press p again to pull production into your local copy." fg={theme.textDim} wrapMode="none" />
+          <box style={{ height: 1 }} />
+          <text content="Press any key to close" fg={theme.textFaint} />
+        </box>
+      </Panel>
+    )
+  }
+}

package/src/ui/views/Search.tsx

@@ -35,7 +35,7 @@ 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 } = store
+  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 [query, setQuery] = useState("")
   const [selected, setSelected] = useState(0)
   // "query" = typing/filtering (input focused); "actions" = input blurred so the
@@ -179,9 +179,11 @@ export function Search({ rows }: { rows: number }) {
         return
       case "p":
         // Pull production → local: opt-in (it overwrites the local DB), and needs
-        // a WordPress site + a local link.
+        // a WordPress site + a local link. A localSync-off site opens a confirm
+        // overlay to enable it (rather than a dead-end flash) since it's now
+        // always shown in the legend, not hidden until enabled.
         if (current?.kind === "site") {
-          if (!localSync) flashMsg('Local sync is off — set "localSync": true in config to enable')
+          if (!localSync) setEnableLocalSyncSite(current.site)
           else if (!current.site.is_wordpress) flashMsg("Sync needs WordPress (wp-cli) — this isn't a WP site")
           else if (!localLinks.has(current.site.id)) flashMsg("Not linked — press L to link a local copy")
           else setDbSyncSite(current.site)
@@ -379,7 +381,6 @@ export function Search({ rows }: { rows: number }) {
             <ActionsCard
               result={current}
               serverName={current.kind === "site" ? (serverById(current.site.server_id)?.name ?? "—") : current.server.name}
-              localSync={localSync}
             />
           ) : current.kind === "server" ? (
             <ServerDetail server={current.server} siteCount={store.sitesForServer(current.server.id).length} />
@@ -394,12 +395,12 @@ export function Search({ rows }: { rows: number }) {
   )
 }
 
-function ActionsCard({ result, serverName, localSync }: { result: Result; serverName: string; localSync: boolean }) {
+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, localSync, isVanityPair(result.site.domain, serverName)) : SERVER_CONTROL
+  const groups = isSite ? siteGroups(result.site.is_wordpress, isVanityPair(result.site.domain, serverName)) : SERVER_CONTROL
   return (
     <box style={{ flexDirection: "column" }}>
       <box style={{ flexDirection: "row" }}>