@tokenoftrust/storefront-runner 1.4.1 → 2.0.0

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

@@ -0,0 +1,227 @@
+/**
+ * Copy the one command. Two behaviours:
+ *  · fastpath (signed-in dev): mint a single-use `tot login --code … && tot start` from
+ *    /api/dev/cli-signin-code, reveal it (textContent, never innerHTML — it carries a
+ *    live code), and copy the whole thing.
+ *  · otherwise: copy the generic install-and-run command directly.
+ *
+ * Also drives rendezvous approval: after a command is generated, the
+ * terminal ATTACHES its own PKCE key and prints a fingerprint; the developer
+ * confirms it here — the load-bearing anti-interception step, since
+ * approving the wrong fingerprint is how a hijack is caught.
+ *
+ * Imported from a processed `<script>` in cockpit.astro. The values below are
+ * carried as data-attrs on #copyCmd because this module runs standalone (not
+ * inside the same closure as hostedActivity.ts's basePath).
+ */
+export function initCopyCommand(): void {
+  const btn: any = document.getElementById("copyCmd");
+  const textEl = document.getElementById("cli-cmd-text");
+  const note = document.getElementById("cli-cmd-note");
+  const toast = document.getElementById("toast");
+  const toastMsg = document.getElementById("toastMsg");
+  const copyIcon: any = document.getElementById("copyIcon");
+  if (!btn || !textEl) return;
+  const generic = btn.getAttribute("data-generic") || "";
+  const fastpath = btn.getAttribute("data-fastpath") === "1";
+  // The request's tenant prefix ("" host-routed, "/<tenant>" path-routed). Carried
+  // as a data-attr because `basePath` is otherwise defined only inside the SEPARATE
+  // hostedActivity module (hostedActivity.ts) — referencing it here (the
+  // cli-signin-code / -status / -approve fetches below) was a ReferenceError that
+  // the mint's catch surfaced as the opaque "Couldn't reach the sign-in service"
+  // with no request ever sent.
+  const basePath = btn.getAttribute("data-base-path") || "";
+  let tT: ReturnType<typeof setTimeout>;
+  function ping(m: string) {
+    if (!toast) return;
+    if (toastMsg) toastMsg.textContent = m;
+    toast.classList.add("show");
+    clearTimeout(tT); tT = setTimeout(() => { toast.classList.remove("show"); }, 1900);
+  }
+  function copy(text: string): Promise<boolean> {
+    if (navigator.clipboard) return navigator.clipboard.writeText(text).then(() => true).catch(() => false);
+    return Promise.resolve(false);
+  }
+  function label(s: string) { btn.childNodes[btn.childNodes.length - 1].textContent = s; }
+
+  // Standard copy-icon affordance on the terminal box. Once the command is
+  // revealed, this is the obvious, always-there way to (re)copy it — the
+  // icon→check swap is its own inline confirmation, so copying no longer
+  // depends on the transient toast being noticed.
+  let iconT: ReturnType<typeof setTimeout>;
+  function flashCopied() {
+    if (!copyIcon) return;
+    copyIcon.setAttribute("data-copied", "1");
+    copyIcon.setAttribute("aria-label", "Copied");
+    copyIcon.setAttribute("title", "Copied");
+    clearTimeout(iconT);
+    iconT = setTimeout(() => {
+      copyIcon.removeAttribute("data-copied");
+      copyIcon.setAttribute("aria-label", "Copy the command");
+      copyIcon.setAttribute("title", "Copy the command");
+    }, 1600);
+  }
+  function revealIcon() {
+    if (copyIcon) copyIcon.hidden = false;
+  }
+  if (copyIcon) {
+    copyIcon.addEventListener("click", () => {
+      copy(textEl.textContent || "").then((ok) => {
+        if (ok) { flashCopied(); ping("Copied — paste & press Enter"); }
+        else ping("Select the command above to copy");
+      });
+    });
+  }
+
+  // ── Rendezvous approval: after a command is generated, the terminal ATTACHES
+  // its own PKCE key and prints a fingerprint; the developer confirms it HERE. This
+  // is the load-bearing anti-interception step — approving the wrong fingerprint is
+  // how a hijack is caught, so the confirm is an explicit, human decision.
+  const rzvRoot: any = document.getElementById("rzvApprove");
+  const rzvWait: any = document.getElementById("rzvWait");
+  const rzvConfirm: any = document.getElementById("rzvConfirm");
+  const rzvFp: any = document.getElementById("rzvFp");
+  const rzvApproveBtn: any = document.getElementById("rzvApproveBtn");
+  const rzvDenyBtn: any = document.getElementById("rzvDenyBtn");
+  const rzvDone: any = document.getElementById("rzvDone");
+  let rzvTimer: ReturnType<typeof setTimeout> | null = null;
+  let rzvCode: string | null = null;
+  let rzvDecided = false;
+  function rzvShow(el: any) { if (el) el.hidden = false; }
+  function rzvHide(el: any) { if (el) el.hidden = true; }
+  // Once the terminal has ATTACHED, the command has plainly been pasted and
+  // run — hide the copy affordances so the approve prompt is the page's
+  // single focus (DZ 2026-08-18). An EXPIRED sign-in restores the generate
+  // button (a fresh mint is needed); the stale command's copy icon stays gone.
+  function rzvHideCopyCtas() {
+    if (btn) btn.hidden = true;
+    if (copyIcon) copyIcon.hidden = true;
+  }
+  function rzvRestoreGenerate() {
+    if (btn) btn.hidden = false;
+  }
+  function rzvStopPoll() { if (rzvTimer) { clearTimeout(rzvTimer); rzvTimer = null; } }
+  function rzvFinish(msg: string) {
+    rzvStopPoll(); rzvDecided = true;
+    rzvHide(rzvWait); rzvHide(rzvConfirm);
+    if (rzvDone) { rzvDone.textContent = msg; rzvDone.hidden = false; }
+  }
+  async function rzvPoll(): Promise<void> {
+    if (rzvDecided) return;
+    let r: Response, b: any;
+    try {
+      r = await fetch(basePath + "/api/dev/cli-signin-status", {
+        method: "POST", headers: { "content-type": "application/json" },
+        body: JSON.stringify({ rendezvousCode: rzvCode }),
+      });
+      b = await r.json().catch(() => ({}));
+    } catch (e) { rzvTimer = setTimeout(rzvPoll, 2800); return; }
+    if (!r || !r.ok) { rzvTimer = setTimeout(rzvPoll, 3200); return; }
+    if (b.state === "attached" && b.fingerprint) {
+      rzvHideCopyCtas();
+      rzvHide(rzvWait); rzvShow(rzvConfirm);
+      if (rzvFp) { rzvFp.textContent = b.fingerprint; rzvFp.setAttribute("data-fp", b.fingerprint); }
+      return; // stop polling — wait for the human decision
+    }
+    if (b.state === "approved") { rzvHideCopyCtas(); rzvFinish("Signed in ✓ — your terminal is good to go."); return; }
+    if (b.state === "denied") { rzvHideCopyCtas(); rzvFinish("Rejected — that terminal wasn't approved. You're safe; generate a fresh command to try again."); return; }
+    if (b.state === "expired") { rzvRestoreGenerate(); rzvFinish("This sign-in expired. Generate a fresh setup command above."); return; }
+    rzvTimer = setTimeout(rzvPoll, 2500); // pending → keep watching
+  }
+  function rzvStart(code: string) {
+    rzvCode = code; rzvDecided = false;
+    if (rzvApproveBtn) rzvApproveBtn.disabled = false;
+    if (rzvDenyBtn) rzvDenyBtn.disabled = false;
+    rzvShow(rzvRoot); rzvShow(rzvWait); rzvHide(rzvConfirm); rzvHide(rzvDone);
+    rzvStopPoll(); rzvPoll();
+  }
+  async function rzvDecide(decision: string): Promise<void> {
+    if (rzvDecided) return;
+    const fp = rzvFp ? (rzvFp.getAttribute("data-fp") || "") : "";
+    if (rzvApproveBtn) rzvApproveBtn.disabled = true;
+    if (rzvDenyBtn) rzvDenyBtn.disabled = true;
+    let r: Response;
+    try {
+      r = await fetch(basePath + "/api/dev/cli-signin-approve", {
+        method: "POST", headers: { "content-type": "application/json" },
+        body: JSON.stringify({ rendezvousCode: rzvCode, fingerprint: fp, decision: decision }),
+      });
+    } catch (e) {
+      if (rzvApproveBtn) rzvApproveBtn.disabled = false;
+      if (rzvDenyBtn) rzvDenyBtn.disabled = false;
+      return;
+    }
+    if (decision === "deny") { rzvFinish("Rejected — that terminal wasn't approved."); return; }
+    if (r.ok) { rzvFinish("Signed in ✓ — your terminal is good to go."); return; }
+    if (rzvApproveBtn) rzvApproveBtn.disabled = false;
+    if (rzvDenyBtn) rzvDenyBtn.disabled = false;
+    const m = r.status === 403 ? "That didn't match your identity — generate a fresh command and try again."
+      : r.status === 409 ? "That code didn't match a waiting terminal — re-check it, or generate a fresh command."
+      : "Couldn't complete approval — try again.";
+    if (rzvDone) { rzvDone.textContent = m; rzvDone.hidden = false; }
+  }
+  if (rzvApproveBtn) rzvApproveBtn.addEventListener("click", () => { rzvDecide("approve"); });
+  if (rzvDenyBtn) rzvDenyBtn.addEventListener("click", () => { rzvDecide("deny"); });
+
+  if (!fastpath) {
+    btn.addEventListener("click", () => {
+      copy(generic).then((ok) => {
+        label(ok ? " Copied — paste & press Enter" : " Copy the command");
+        ping(ok ? "Copied the command" : "Select the command to copy");
+        setTimeout(() => { label(" Copy the command"); }, 2600);
+      });
+    });
+    return;
+  }
+
+  let busy = false;
+  btn.addEventListener("click", async () => {
+    if (busy) return;
+    busy = true;
+    label(" …"); btn.disabled = true;
+    let res: Response, body: any;
+    try {
+      res = await fetch(basePath + "/api/dev/cli-signin-code", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: "{}",
+      });
+      body = await res.json().catch(() => ({}));
+    } catch (err) {
+      if (note) note.textContent = "Couldn't reach the sign-in service — try again in a moment.";
+      label(" Copy the command"); btn.disabled = false; busy = false;
+      return;
+    }
+    if (!res.ok || !body.command) {
+      const byStatus: Record<number, string> = {
+        401: "Your session expired — reload the page and sign in again.",
+        403: "This account doesn't have developer access to a store yet.",
+        409: "Your store isn't set up yet — reload this page for its status.",
+        502: "The sign-in service is having a moment — try again.",
+        503: "Terminal sign-in isn't configured on this environment.",
+      };
+      if (note) note.textContent = byStatus[res.status] || "Couldn't mint a sign-in command — try again.";
+      label(" Copy the command"); btn.disabled = false; busy = false;
+      return;
+    }
+    // Reveal the real command (carries the non-secret rendezvous handle) as a pure
+    // text node, then copy it.
+    textEl.textContent = body.command;
+    textEl.classList.remove("is-placeholder");
+    revealIcon();
+    // Start watching for the terminal to attach so we can prompt for approval.
+    if (body.rendezvousCode) rzvStart(body.rendezvousCode);
+    const ok = await copy(body.command);
+    if (ok) flashCopied();
+    label(ok ? " Copied ✓" : " Select & copy");
+    ping(ok ? "Copied — paste & press Enter" : "Select the command above to copy");
+    if (note) {
+      note.textContent = ok
+        ? "Copied. Paste into your terminal and press Enter — it signs you in, runs your store, and opens your browser. Single-use, short-lived code."
+        : "Select the command above and copy it, then paste into your terminal and press Enter. Single-use, short-lived code.";
+    }
+    btn.disabled = false;
+    setTimeout(() => { label(" Copy the command"); }, 4000);
+    busy = false;
+  });
+}

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();
+}