spinuptui 0.19.0

package/src/ui/views/LocalLink.tsx

@@ -0,0 +1,220 @@
+// Local working-copy link overlay — Phase 1 (link + view, no mutation).
+//
+// Opened with `L` on a selected site (Browser / Search results). Two modes:
+//   • view — the site is linked: shows the validated status (Bedrock / WordPress
+//     / missing) and offers open-locally actions: `t` opens a terminal at the
+//     path, `v` opens the stored local URL in the browser. `e` edits, `x` unlinks.
+//   • edit — a small form to enter the local path + local URL (manual entry).
+//
+// Per the locked spec these are LOCAL conveniences only: we open a terminal and
+// the local URL — we never launch an editor and never run composer/git here.
+// The mutating maintenance loop (composer update → push → deploy) is a later phase.
+
+import { useEffect, 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"
+import { resolveLocalLink, type LocalKind } from "../../lib/local.ts"
+
+type Mode = "view" | "edit"
+type EditField = "path" | "url"
+
+function kindColor(kind: LocalKind, exists: boolean): string {
+  if (!exists) return theme.bad
+  if (kind === "bedrock") return theme.good
+  if (kind === "wp") return theme.accent
+  return theme.warn
+}
+
+export function LocalLinkOverlay() {
+  const store = useStore()
+  const { localLinkSite: site, setLocalLinkSite, localLinks, linkSite, unlinkSite, setInputMode, openLocalTerminal, openLocalUrl, linkReturnToForgotten, setLinkReturnToForgotten, setForgottenOpen } = store
+
+  const existing = site ? localLinks.get(site.id) : undefined
+
+  const [mode, setMode] = useState<Mode>(() => (existing ? "view" : "edit"))
+  const [field, setField] = useState<EditField>("path")
+  const [pathInput, setPathInput] = useState(existing?.path ?? "")
+  const [urlInput, setUrlInput] = useState(existing?.localUrl ?? "")
+  const [flash, setFlash] = useState<string | null>(null)
+
+  // The form owns the keyboard while editing (suppresses global shortcuts so
+  // typing a path doesn't trigger navigation). Always release on unmount.
+  useEffect(() => {
+    setInputMode(mode === "edit")
+    return () => setInputMode(false)
+  }, [mode, setInputMode])
+
+  const close = () => {
+    setInputMode(false)
+    setLocalLinkSite(null)
+    // If we arrived here from the "needs a local copy" report, return to it.
+    if (linkReturnToForgotten) {
+      setLinkReturnToForgotten(false)
+      setForgottenOpen(true)
+    }
+  }
+
+  const save = () => {
+    const path = pathInput.trim()
+    if (!site || !path) return // a path is required; the local URL is optional
+    linkSite(site.id, { domain: site.domain, path, localUrl: urlInput.trim() })
+    setMode("view")
+  }
+
+  const note = (msg: string) => {
+    setFlash(msg)
+    setTimeout(() => setFlash(null), 1800)
+  }
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+
+    if (mode === "edit") {
+      // Esc backs out: to the view mode if a link already exists, else closes.
+      if (name === "escape") return existing ? setMode("view") : close()
+      // ↑/↓ switch fields (Enter advances/saves via the inputs' onSubmit).
+      if (name === "up") return setField("path")
+      if (name === "down") return setField("url")
+      return
+    }
+
+    // view mode
+    switch (name) {
+      case "escape":
+      case "q":
+        return close()
+      case "t":
+        if (site) note(openLocalTerminal(site.id))
+        return
+      case "v":
+        if (site) note(openLocalUrl(site.id))
+        return
+      case "e":
+        setPathInput(existing?.path ?? "")
+        setUrlInput(existing?.localUrl ?? "")
+        setField("path")
+        return setMode("edit")
+      case "x":
+        if (site) unlinkSite(site.id)
+        return close()
+    }
+  })
+
+  if (!site) return null
+
+  const state = existing ? resolveLocalLink(existing) : null
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        flexDirection: "column",
+        backgroundColor: theme.bg,
+        zIndex: 210,
+      }}
+    >
+      {/* Title bar */}
+      <box
+        style={{
+          flexDirection: "row",
+          height: 1,
+          backgroundColor: theme.bgAlt,
+          paddingLeft: 1,
+          paddingRight: 1,
+          alignItems: "center",
+        }}
+      >
+        <text content="🔗 Local copy  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 40)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+        <text content={existing ? "linked" : "not linked"} fg={existing ? theme.good : theme.textFaint} style={{ flexShrink: 0 }} />
+      </box>
+
+      <Centered>{mode === "edit" ? renderEdit() : renderView()}</Centered>
+
+      <StatusBar hints={hints()} message={flash ?? undefined} messageColor={theme.brand} showGlobal={false} />
+    </box>
+  )
+
+  function renderView() {
+    return (
+      <Panel title=" Linked working copy " active>
+        <box style={{ flexDirection: "column", width: 64, paddingTop: 1, paddingBottom: 1 }}>
+          <box style={{ flexDirection: "row" }}>
+            <text content="Status  " fg={theme.textDim} style={{ flexShrink: 0 }} />
+            <text
+              content={state?.exists ? state.label : "missing — path not found"}
+              fg={kindColor(state?.kind ?? "unknown", state?.exists ?? false)}
+              wrapMode="none"
+            />
+          </box>
+          <box style={{ flexDirection: "row" }}>
+            <text content="Path    " fg={theme.textDim} style={{ flexShrink: 0 }} />
+            <text content={existing?.path ?? "—"} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+          </box>
+          <box style={{ flexDirection: "row" }}>
+            <text content="URL     " fg={theme.textDim} style={{ flexShrink: 0 }} />
+            <text content={existing?.localUrl || "—"} fg={existing?.localUrl ? theme.accent : theme.textFaint} wrapMode="none" style={{ flexShrink: 1 }} />
+          </box>
+          <box style={{ height: 1 }} />
+          <text content="t — open a terminal here    v — open the local URL" fg={theme.textDim} wrapMode="none" />
+          <text content="e — edit the link           x — unlink" fg={theme.textDim} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+
+  function renderEdit() {
+    return (
+      <Panel title={existing ? " Edit local link " : " Link a local copy "} active>
+        <box style={{ flexDirection: "column", width: 64, paddingTop: 1, paddingBottom: 1 }}>
+          <text content="Local path to the working copy (~ allowed)" fg={field === "path" ? theme.accent : theme.textDim} />
+          <input
+            focused={field === "path"}
+            value={pathInput}
+            placeholder="~/code/example.com"
+            onInput={setPathInput}
+            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={urlInput}
+            placeholder="https://example.test"
+            onInput={setUrlInput}
+            onSubmit={save}
+            style={{ backgroundColor: theme.bgAlt, focusedBackgroundColor: theme.bgAlt, textColor: theme.text }}
+          />
+          <box style={{ height: 1 }} />
+          <text content="↑↓ switch field · Enter on the URL saves · Esc cancels" fg={theme.textFaint} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+
+  function hints() {
+    if (mode === "edit")
+      return [
+        { key: "↑↓", label: "field" },
+        { key: "⏎", label: "next / save" },
+        { key: "esc", label: "cancel" },
+      ]
+    return [
+      { key: "t", label: "terminal" },
+      { key: "v", label: "local URL" },
+      { key: "e", label: "edit" },
+      { key: "x", label: "unlink" },
+      { key: "esc", label: "close" },
+    ]
+  }
+}

package/src/ui/views/MediaFallback.tsx

@@ -0,0 +1,180 @@
+// Production media fallback overlay.
+//
+// Opened with `m` on a linked WordPress site (Search), or from the `p` sync Done
+// screen. Toggles a small mu-plugin in the local copy that serves missing-locally
+// uploads from production — so a synced site's images resolve without pulling the
+// whole media library. The plugin's presence IS the on/off state (no config), so
+// this is just a file write/remove; nothing runs in the background.
+
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+import { theme } from "../../lib/theme.ts"
+import { truncate } from "../../lib/format.ts"
+import { Panel, Centered, DestPath, Sparkle } from "../components.tsx"
+import { StatusBar } from "../StatusBar.tsx"
+import { useStore } from "../store.tsx"
+import { enableMediaFallback, disableMediaFallback } from "../../lib/mediaFallback.ts"
+
+export function MediaFallback() {
+  const { mediaFallbackSite: site, setMediaFallbackSite, planMediaFallbackFor } = useStore()
+  // Re-resolve every render so the panel reflects the file on disk after a toggle.
+  const planResult = site ? planMediaFallbackFor(site) : null
+  const [changed, setChanged] = useState<"enabled" | "disabled" | "updated" | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const plan = planResult && planResult.ok ? planResult.plan : null
+
+  const close = () => setMediaFallbackSite(null)
+
+  useKeyboard((key) => {
+    const name = key.name ?? ""
+    if (name === "escape" || name === "q") return close()
+    if (!plan) return
+    try {
+      if (!plan.enabled && (name === "return" || name === "y")) {
+        enableMediaFallback(plan)
+        setChanged("enabled")
+        setError(null)
+      } else if (plan.enabled && plan.updateAvailable && name === "u") {
+        enableMediaFallback(plan) // overwrite in place with the current version
+        setChanged("updated")
+        setError(null)
+      } else if (plan.enabled && name === "x") {
+        disableMediaFallback(plan)
+        setChanged("disabled")
+        setError(null)
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Couldn't update the media-fallback plugin.")
+    }
+  })
+
+  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="🖼 Production media fallback  " fg={theme.brand} style={{ flexShrink: 0 }} />
+        <text content={truncate(site.domain, 38)} fg={theme.text} wrapMode="none" style={{ flexShrink: 1 }} />
+        <box style={{ flexGrow: 1 }} />
+        <text content="local only" fg={theme.textFaint} style={{ flexShrink: 0 }} />
+      </box>
+
+      <Centered>{renderBody()}</Centered>
+
+      <StatusBar hints={hints()} showGlobal={false} />
+    </box>
+  )
+
+  function renderBody() {
+    if (!plan) {
+      return (
+        <Panel title=" Can't set up media fallback " active>
+          <box style={{ flexDirection: "column", width: 66, paddingTop: 1, paddingBottom: 1 }}>
+            <text content={planResult && !planResult.ok ? planResult.error : "Unavailable."} fg={theme.warn} wrapMode="none" />
+            <box style={{ height: 1 }} />
+            <text content="Esc to close" fg={theme.textFaint} />
+          </box>
+        </Panel>
+      )
+    }
+
+    return (
+      <Panel title=" Serve missing images from production " active>
+        <box style={{ flexDirection: "column", width: 68, paddingTop: 1, paddingBottom: 1 }}>
+          {plan.enabled && plan.updateAvailable && changed !== "updated" ? (
+            <box
+              title=" ✨ Update available "
+              titleColor={theme.brand}
+              border
+              borderColor={theme.brand}
+              style={{ flexDirection: "column", width: 66, paddingLeft: 1, paddingRight: 1, marginBottom: 1 }}
+            >
+              <box style={{ flexDirection: "row" }}>
+                <Sparkle />
+                <text content={`  Newer missing-images plugin ready (v${plan.installedVersion} → v${plan.version}).`} fg={theme.text} wrapMode="none" />
+              </box>
+              <text content="Now covers legacy /wp-content/uploads paths, CDN/S3" fg={theme.textDim} wrapMode="none" />
+              <text content="redirects, and Elementor gallery URLs." fg={theme.textDim} wrapMode="none" />
+              <box style={{ flexDirection: "row" }}>
+                <text content="Press " fg={theme.textDim} />
+                <text content="u" fg={theme.brand} />
+                <text content=" to update in place." fg={theme.textDim} />
+              </box>
+            </box>
+          ) : null}
+          <text content="When an upload is missing locally, its URL is rewritten to" fg={theme.textDim} wrapMode="none" />
+          <text content="production — so images resolve without syncing the library." fg={theme.textDim} wrapMode="none" />
+          <box style={{ height: 1 }} />
+          <box style={{ flexDirection: "row" }}>
+            <text content="source " fg={theme.textFaint} />
+            <text content={plan.prodOrigin} fg={theme.accent} wrapMode="none" />
+            <text content={`  (${plan.stack === "bedrock" ? "Bedrock" : "Standard WP"})`} fg={theme.textFaint} wrapMode="none" />
+          </box>
+          <text content="plugin" fg={theme.textFaint} />
+          <DestPath path={plan.pluginPath} fileColor={plan.enabled ? theme.good : theme.textDim} width={64} />
+          <box style={{ height: 1 }} />
+          {renderStatus()}
+          <box style={{ height: 1 }} />
+          <text content="Needs production reachable + hotlinking allowed (no staging" fg={theme.textFaint} wrapMode="none" />
+          <text content="Basic-Auth / hotlink protection). Read-only on production." fg={theme.textFaint} wrapMode="none" />
+        </box>
+      </Panel>
+    )
+  }
+
+  function renderStatus() {
+    if (error) return <text content={`✕ ${error}`} fg={theme.bad} />
+    if (plan!.enabled) {
+      const note =
+        changed === "updated"
+          ? `  — updated to v${plan!.version}. Reload the local site.`
+          : changed === "enabled"
+            ? "  — enabled. Reload the local site; images now load from production."
+            : "  — missing images load from production."
+      return (
+        <>
+          <box style={{ flexDirection: "row" }}>
+            <text content="● ON" fg={theme.good} />
+            <text content={note} fg={theme.text} wrapMode="none" />
+          </box>
+          <text content="Press x to turn off" fg={theme.textFaint} />
+        </>
+      )
+    }
+    return (
+      <>
+        <box style={{ flexDirection: "row" }}>
+          <text content="○ OFF" fg={theme.textDim} />
+          <text content={changed === "disabled" ? "  — removed. Missing images will 404 locally again." : "  — missing images 404 locally."} fg={theme.text} wrapMode="none" />
+        </box>
+        <text content="Press y / ⏎ to turn on" fg={theme.textFaint} />
+      </>
+    )
+  }
+
+  function hints() {
+    if (!plan) return [{ key: "esc", label: "close" }]
+    if (!plan.enabled)
+      return [
+        { key: "y/⏎", label: "turn on" },
+        { key: "esc", label: "close" },
+      ]
+    return [
+      ...(plan.updateAvailable && changed !== "updated" ? [{ key: "u", label: "update" }] : []),
+      { key: "x", label: "turn off" },
+      { key: "esc", label: "close" },
+    ]
+  }
+}