@tokenoftrust/storefront-runner 1.4.2-rc.0 → 2.0.0

package/apps/storefront/src/lib/dev/cockpit/files.ts

@@ -0,0 +1,249 @@
+/**
+ * Files tab — in-browser file tree + LIVE EDITOR. Rendered only when
+ * isLocalDevLoop; reads /__tot/tree + /__tot/file and writes /__tot/write
+ * (dev-plugins/dev-file-browser + dev-write). Writable files (content HTML +
+ * theme.json) become an editable textarea with ~600ms debounce autosave +
+ * Cmd/Ctrl+S; the save carries the baseVersion so a concurrent
+ * $EDITOR/git change is caught (409) instead of clobbered. Dynamic values go
+ * through .value / textContent (never innerHTML).
+ * Imported from a processed `<script>` in cockpit.astro (ADR 0013). apiBase
+ * and isDev are read from `document.body.dataset` (cp-env: same client JS,
+ * environment-aware endpoint base — see resolveDevApiBase).
+ */
+export function initFiles(): void {
+  const apiBase = document.body.dataset.cockpitApiBase || "";
+  const isDev = document.body.dataset.cockpitIsDev === "true";
+  const offlineMsg = isDev ? "Could not reach the dev server." : "Not available on the hosted panel yet — check back soon.";
+  const treeEl: any = document.getElementById("filesTree");
+  const viewEl: any = document.getElementById("filesView");
+  const pathEl = document.getElementById("filesPath");
+  const editbar = document.getElementById("filesEditbar");
+  const statusEl: any = document.getElementById("filesStatus");
+  const conflictEl = document.getElementById("filesConflict");
+  const reloadBtn = document.getElementById("filesReload");
+  const forceBtn = document.getElementById("filesForce");
+  const diffBtn: any = document.getElementById("filesDiffBtn");
+  const diffEl: any = document.getElementById("filesDiff");
+  const publishBtn: any = document.getElementById("filesPublishBtn");
+  if (!treeEl || !viewEl) return;
+  let selected: any = null;
+  let cur: { path: string; baseVersion: number | null; writable: boolean } | null = null;
+  let saveTimer: ReturnType<typeof setTimeout> | null = null;
+  let diffOn = false;
+  let rowByPath: Record<string, any> = {}; // path -> tree row element, for programmatic open
+
+  function setStatus(txt: string, cls?: string) {
+    if (!statusEl) return;
+    statusEl.textContent = txt || "";
+    statusEl.className = "df-status" + (cls ? " " + cls : "");
+  }
+  function showConflict(show: boolean) { if (conflictEl) (conflictEl as any).hidden = !show; }
+  function showBar(show: boolean) { if (editbar) (editbar as any).hidden = !show; }
+
+  function openFile(path: string, row: any, afterLoad?: () => void) {
+    if (selected) selected.classList.remove("sel");
+    selected = row; row.classList.add("sel");
+    if (pathEl) pathEl.textContent = path;
+    showConflict(false); showBar(true);
+    setDiffMode(false); if (diffBtn) diffBtn.hidden = true;
+    if (publishBtn) publishBtn.hidden = true;
+    viewEl.readOnly = true;
+    setStatus("Loading…");
+    fetch(apiBase + "/file?path=" + encodeURIComponent(path))
+      .then((r) => r.json())
+      .then((d) => {
+        if (!d || !d.ok) { viewEl.value = ""; cur = null; setStatus((d && d.message) || "Could not open that file.", "warn"); return; }
+        if (d.binary) { viewEl.value = "(binary file — " + (d.size || 0) + " bytes)"; cur = null; setStatus("Binary — not editable"); return; }
+        if (d.tooBig) { viewEl.value = "(file too large to show — " + (d.size || 0) + " bytes)"; cur = null; setStatus("Too large — not editable"); return; }
+        viewEl.value = d.content == null ? "" : d.content;
+        cur = { path: path, baseVersion: (typeof d.mtimeMs === "number" ? d.mtimeMs : null), writable: !!d.writable };
+        viewEl.readOnly = !cur.writable;
+        if (diffBtn) diffBtn.hidden = false;
+        if (publishBtn) publishBtn.hidden = !cur.writable;
+        setStatus(cur.writable ? "Editable — edits save + reload your store" : "Read-only");
+        if (typeof afterLoad === "function") afterLoad();
+      })
+      .catch(() => { viewEl.value = ""; cur = null; setStatus(offlineMsg, "warn"); });
+  }
+
+  // Place the textarea caret at a 1-based line:col and scroll it into view. Used by
+  // the click-to-source jump; a textarea has no CodeMirror EditorView, so we map
+  // (line,col) to a character offset + setSelectionRange, then center by scrollTop.
+  function placeCursor(line: number, col: number) {
+    const text = viewEl.value;
+    const lines = text.split("\n");
+    const ln = Math.min(Math.max(1, line || 1), lines.length);
+    let offset = 0;
+    for (let i = 0; i < ln - 1; i++) offset += lines[i].length + 1; // +1 for the newline
+    offset += Math.min(Math.max(1, col || 1), (lines[ln - 1] || "").length + 1) - 1;
+    viewEl.focus();
+    try { viewEl.setSelectionRange(offset, offset); } catch (e) { /* not focusable yet */ }
+    // Center the target line: approximate line height from the rendered content.
+    const lh = viewEl.scrollHeight / Math.max(1, lines.length);
+    viewEl.scrollTop = Math.max(0, (ln - 1) * lh - viewEl.clientHeight / 2);
+  }
+
+  // Capstone entry point: open <path> and drop the caret at line:col. Invoked by
+  // the cockpit's origin-checked tot:locate listener when a click lands in the
+  // live-preview iframe. Finds the file's tree row (built by renderNodes); if the
+  // tree hasn't loaded yet, no-ops gracefully.
+  (window as any).__totOpenFileAt = function (path: string, line: number, col: number) {
+    const row = rowByPath[path];
+    if (!row) return false;
+    if (typeof row.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
+    openFile(path, row, () => { placeCursor(line, col); });
+    return true;
+  };
+
+  function doSave(force?: boolean) {
+    if (!cur || !cur.writable) return;
+    setStatus("Saving…");
+    const body: any = { path: cur.path, content: viewEl.value };
+    if (!force && typeof cur.baseVersion === "number") body.baseVersion = cur.baseVersion;
+    fetch(apiBase + "/write", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) })
+      .then((r) => r.json().then((j) => ({ s: r.status, j: j })))
+      .then((res) => {
+        if (res.s === 200 && res.j && res.j.ok) { cur!.baseVersion = res.j.mtimeMs; showConflict(false); setStatus("Saved ✓", "ok"); return; }
+        if (res.s === 409) { showConflict(true); setStatus("Changed on disk since you opened it", "warn"); return; }
+        if (res.s === 403) { setStatus("This file isn't editable.", "warn"); return; }
+        setStatus((res.j && res.j.message) || "Save failed", "warn");
+      })
+      .catch(() => { setStatus(isDev ? "Save failed — dev server unreachable" : offlineMsg, "warn"); });
+  }
+
+  viewEl.addEventListener("input", () => {
+    if (!cur || !cur.writable) return;
+    setStatus("Editing…");
+    if (saveTimer) clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => { doSave(false); }, 600);
+  });
+  viewEl.addEventListener("keydown", (e: KeyboardEvent) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === "s" || e.key === "S")) {
+      e.preventDefault();
+      if (saveTimer) clearTimeout(saveTimer);
+      doSave(false);
+    }
+  });
+  if (reloadBtn) reloadBtn.addEventListener("click", () => { if (cur && selected) openFile(cur.path, selected); });
+  if (forceBtn) forceBtn.addEventListener("click", () => { showConflict(false); doSave(true); });
+
+  function setDiffMode(on: boolean) {
+    diffOn = on;
+    if (diffEl) diffEl.hidden = !on;
+    viewEl.hidden = on;
+    if (diffBtn) diffBtn.textContent = on ? "Edit" : "Diff";
+  }
+  function renderDiffText(t: string) { if (diffEl) diffEl.textContent = t; }
+  function lineDiff(before: string, after: string): [string, string][] | null {
+    const a = before.split("\n"), b = after.split("\n");
+    const m = a.length, n = b.length;
+    if (m * n > 4000000) return null;
+    const dp: number[][] = []; for (let i = 0; i <= m; i++) { dp.push(new Array(n + 1).fill(0)); }
+    for (let i = m - 1; i >= 0; i--) for (let j = n - 1; j >= 0; j--) dp[i]![j] = a[i] === b[j] ? dp[i + 1]![j + 1]! + 1 : (dp[i + 1]![j]! >= dp[i]![j + 1]! ? dp[i + 1]![j]! : dp[i]![j + 1]!);
+    const out: [string, string][] = []; let x = 0, y = 0;
+    while (x < m && y < n) {
+      if (a[x] === b[y]) { out.push([" ", a[x]!]); x++; y++; }
+      else if (dp[x + 1]![y]! >= dp[x]![y + 1]!) { out.push(["-", a[x]!]); x++; }
+      else { out.push(["+", b[y]!]); y++; }
+    }
+    while (x < m) { out.push(["-", a[x]!]); x++; }
+    while (y < n) { out.push(["+", b[y]!]); y++; }
+    return out;
+  }
+  function renderDiff(before: string, after: string) {
+    if (!diffEl) return;
+    diffEl.textContent = "";
+    const rows = lineDiff(before, after);
+    if (!rows) { renderDiffText("(file too large to diff)"); return; }
+    const frag = document.createDocumentFragment();
+    rows.forEach((row) => {
+      const ln = document.createElement("span");
+      ln.className = "dl " + (row[0] === "+" ? "add" : row[0] === "-" ? "del" : "ctx");
+      ln.textContent = row[0] + " " + row[1];
+      frag.appendChild(ln);
+    });
+    diffEl.appendChild(frag);
+  }
+  function doDiff() {
+    if (!cur) return;
+    if (diffOn) { setDiffMode(false); setStatus(cur.writable ? "Editable" : "Read-only"); return; }
+    setStatus("Loading diff…");
+    fetch(apiBase + "/diff?path=" + encodeURIComponent(cur.path))
+      .then((r) => r.json())
+      .then((d) => {
+        if (!d || !d.ok) { setStatus((d && d.message) || "Could not diff.", "warn"); return; }
+        if (!d.shown) { renderDiffText("(diff not shown — " + (d.reason || "") + ")"); setDiffMode(true); setStatus(d.status); return; }
+        renderDiff(d.before || "", d.after || "");
+        setDiffMode(true);
+        setStatus(d.status === "unchanged" ? "No changes vs your last commit" : (d.status + " vs HEAD"));
+      })
+      .catch(() => { setStatus(offlineMsg, "warn"); });
+  }
+  if (diffBtn) diffBtn.addEventListener("click", doDiff);
+
+  // cp-publish: draft -> PR-backed candidate for review — never straight to
+  // live, and no longer straight to the test channel either; it opens/updates
+  // a pull request an owner reviews and accepts. Confirm-before-submit.
+  function doPublish() {
+    if (!cur || !cur.writable || !publishBtn) return;
+    if (!window.confirm("Submit your saved edit for review? (Opens/updates a pull request — not your live site.)")) return;
+    const prevLabel = publishBtn.textContent;
+    publishBtn.disabled = true;
+    setStatus("Submitting…");
+    fetch(apiBase + "/publish", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ path: cur.path }) })
+      .then((r) => r.json().then((j) => ({ s: r.status, j: j })))
+      .then((res) => {
+        if (res.s === 200 && res.j && res.j.ok) { setStatus("Submitted for review ✓" + (res.j.prNumber ? " (PR #" + res.j.prNumber + ")" : ""), "ok"); return; }
+        if (res.s === 409 && res.j && res.j.status === "no_draft") { setStatus("No unpublished edit to submit.", "warn"); return; }
+        setStatus((res.j && res.j.message) || "Submit failed", "warn");
+      })
+      .catch(() => { setStatus(offlineMsg, "warn"); })
+      .then(() => { publishBtn.disabled = false; publishBtn.textContent = prevLabel; });
+  }
+  if (publishBtn) publishBtn.addEventListener("click", doPublish);
+
+  function renderNodes(nodes: any[], parentUl: any, depth: number) {
+    nodes.forEach((n) => {
+      const li = document.createElement("li");
+      li.className = "ft-" + n.type;
+      const row: any = document.createElement("div");
+      row.className = "ft-row";
+      row.style.paddingLeft = (depth * 12 + 10) + "px";
+      const icon = document.createElement("span");
+      icon.className = "ft-ic";
+      icon.textContent = n.type === "dir" ? "📁" : "📄";
+      const label = document.createElement("span");
+      label.className = "ft-name";
+      label.textContent = n.name;
+      row.appendChild(icon); row.appendChild(label); li.appendChild(row);
+      if (n.type === "dir") {
+        const childUl = document.createElement("ul");
+        childUl.className = "ft-children";
+        renderNodes(n.children || [], childUl, depth + 1);
+        li.appendChild(childUl);
+      } else {
+        row.tabIndex = 0;
+        rowByPath[n.path] = row; // for the programmatic jump
+        row.addEventListener("click", () => { openFile(n.path, row); });
+        row.addEventListener("keydown", (e: KeyboardEvent) => { if (e.key === "Enter") { e.preventDefault(); openFile(n.path, row); } });
+      }
+      parentUl.appendChild(li);
+    });
+  }
+
+  function load() {
+    fetch(apiBase + "/tree")
+      .then((r) => r.json())
+      .then((d) => {
+        treeEl.textContent = "";
+        rowByPath = {}; // rebuild the path→row index for this fresh tree
+        if (!d || !d.ok) { treeEl.textContent = (d && d.message) || "Could not load your files."; return; }
+        const ul = document.createElement("ul");
+        ul.className = "ft-root";
+        renderNodes(d.tree || [], ul, 0);
+        treeEl.appendChild(ul);
+      })
+      .catch(() => { treeEl.textContent = offlineMsg; });
+  }
+  load();
+}