@tokenoftrust/storefront-runner 1.4.1 → 2.0.0

package/apps/storefront/src/pages/cockpit.astro

@@ -27,7 +27,6 @@ import { readViewerSession } from "@/lib/auth/route";
 import { staticTenants } from "@/config/tenants";
 import { resolvePreviewTenant } from "@/config/previewTenantLookup";
 import { readTenantPreviewStatus, isStoreNotSetUp } from "@/lib/dev/previewStatus";
-import { ensureCockpitVcBinding } from "@/lib/dev/vcBinding";
 import { resolveDevApiBase } from "@/lib/dev/apiBase";
 import { resolveCockpitStoreResource } from "@/lib/dev/cockpitStore";
 import { normalizeEmailHint, redactEmailForHint } from "@/lib/privacy/emailHint";
@@ -143,9 +142,19 @@ const canSetupStore = hasStoreAccess && !noResolvableStore && !storeNotSetUp;
 // off the hot render path; the authority-seam binding + backfill remain the real
 // guarantee. Gated on canSetupStore (entitled + resolvable + provisioned), the exact
 // condition under which we render a runnable command.
+//
+// The binding itself is control-plane (authors a forge/MCP binding under the app
+// credential), so this renderer page reaches it only over the network — POST
+// /api/dev/ensure-vc-binding — never by static import (renderer-carve moat). The
+// endpoint re-derives the developer from the forwarded session cookie.
 if (canSetupStore && session && !Astro.cookies.has("tot_vc_bound")) {
-  const vcBind = await ensureCockpitVcBinding(session.email);
-  if (vcBind.ok) {
+  const vcBind = await fetch(new URL(`${basePath}/api/dev/ensure-vc-binding`, url.origin), {
+    method: "POST",
+    headers: { cookie: Astro.request.headers.get("cookie") ?? "" },
+  })
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null);
+  if (vcBind?.ok) {
     // Throttle only on a real success — a fail-open miss retries on the next load.
     Astro.cookies.set("tot_vc_bound", "1", {
       path: "/",
@@ -192,1082 +201,19 @@ const isLocalDevLoop = import.meta.env.DEV;
 const hostedActivity = !isLocalDevLoop && canSetupStore;
 
 // cp-env (cloud-dev-cockpit Phase 0): the file-tree/viewer/diff + click-to-source
-// cockpit scripts below (filesScript, c8Script) are ENVIRONMENT-AWARE — same client
-// JS, different endpoint base. Local: the astro-dev-only /__tot/* plugins. Hosted: new
+// cockpit modules (lib/dev/cockpit/files.ts, clickToSource.ts) are ENVIRONMENT-AWARE
+// — same client JS, different endpoint base. Local: the astro-dev-only /__tot/* plugins. Hosted: new
 // /api/dev/* Astro API routes, landing incrementally (cp-tree/cp-file/cp-write/cp-diff/
 // cp-locate — separate cards). Resolving it here, unconditionally, means those cards
 // don't each have to invent the same env check; on isLocalDevLoop this is a no-op
 // (resolves to the unchanged /__tot base). See decision architecture-environment-aware-cockpit.
 const apiBase = resolveDevApiBase(isLocalDevLoop, basePath);
 
-// Live loop Monitor (C1) client. Polls the dev server's /__tot/dev-loop-status
-// and renders the loopbar: server health, watched file, and the save→reload
-// timeline. Kept as a static string rendered via set:html (raw, un-escaped —
-// the JS comparison operators must not be HTML-encoded) inside an is:inline
-// nonce'd tag, gated on isLocalDevLoop so it's absent from the production build. Polling
-// (not the WS custom event) keeps this a plain inline script with no Vite-module
-// coupling, and it survives a full page reload — the server holds loopState, so
-// the bar re-hydrates to the true state on every load. All dynamic values go
-// through textContent, never innerHTML.
-const monitorScript = `
-(function () {
-  var bar = document.getElementById("loopbar");
-  if (!bar) return;
-  var elStatus = document.getElementById("lbStatus");
-  var elWatch = document.getElementById("lbWatch");
-  var elLast = document.getElementById("lbLast");
-  var elServer = document.getElementById("lbServer");
-  var elUrl = document.getElementById("lbUrl");
-  var elFile = document.getElementById("lbFile");
-  var elSave = document.getElementById("lbSave");
-  var elReload = document.getElementById("lbReload");
-  var head = document.getElementById("lbHead");
-
-  if (head) head.addEventListener("click", function () { bar.classList.toggle("open"); });
-
-  function rel(ts) {
-    var d = Math.max(0, Math.round((Date.now() - Number(ts)) / 1000));
-    return d < 2 ? "just now" : d < 60 ? d + "s ago" : Math.floor(d / 60) + "m ago";
-  }
-  function setTs(el, ts, emptyText) {
-    if (ts) {
-      el.setAttribute("data-ts", String(ts));
-      el.classList.remove("dim");
-      el.textContent = rel(ts);
-    } else {
-      el.removeAttribute("data-ts");
-      el.classList.add("dim");
-      el.textContent = emptyText;
-    }
-  }
-  setInterval(function () {
-    [elSave, elReload].forEach(function (el) {
-      var ts = el.getAttribute("data-ts");
-      if (ts) el.textContent = rel(ts);
-    });
-  }, 1000);
-
-  function render(s) {
-    bar.classList.add("live");
-    var port = s.port || null;
-    var url = port ? ("localhost:" + port + (s.tenant ? "/" + s.tenant + "/" : "/")) : "—";
-    elServer.textContent = s.server ? ("running" + (port ? " · port " + port : "")) : "not running";
-    elServer.classList.toggle("dim", !s.server);
-    elUrl.textContent = url;
-    elUrl.classList.toggle("dim", !port);
-    elFile.textContent = s.watchedFile || "content/*.html";
-    elFile.classList.toggle("dim", !s.watchedFile);
-    elWatch.textContent = s.watchedFile || "your content";
-    setTs(elSave, s.lastSaveAt, "no saves yet");
-    setTs(elReload, s.lastReloadAt, "waiting for a save");
-
-    var saved = s.lastSaveAt || 0;
-    var reloaded = s.lastReloadAt || 0;
-    var state, status, last;
-    if (!saved) {
-      state = "running"; status = "Running"; last = "reloads on save";
-    } else if (reloaded >= saved) {
-      state = "running"; status = "Running"; last = "reloaded";
-    } else if (Date.now() - saved < 3000) {
-      state = "reloading"; status = "Reloading…"; last = "change detected";
-    } else {
-      state = "stale"; status = "Stale"; last = "save not reflected — restart?";
-    }
-    bar.setAttribute("data-state", state);
-    elStatus.textContent = status;
-    elLast.textContent = last;
-    // Broadcast the snapshot so other consumers (U2 stepper, U3 Ask) share this
-    // one poll instead of each opening their own. window.__totLoop holds the
-    // latest for listeners that attach late.
-    window.__totLoop = s;
-    window.dispatchEvent(new CustomEvent("tot:loop-state", { detail: s }));
-  }
-  function offline() {
-    bar.classList.add("live");
-    bar.setAttribute("data-state", "stale");
-    elStatus.textContent = "Offline";
-    elLast.textContent = "dev server not reachable";
-    elServer.textContent = "not reachable";
-    var off = { server: false, offline: true };
-    window.__totLoop = off;
-    window.dispatchEvent(new CustomEvent("tot:loop-state", { detail: off }));
-  }
-  function poll() {
-    fetch("/__tot/dev-loop-status", { cache: "no-store" })
-      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
-      .then(render)
-      .catch(offline);
-  }
-  poll();
-  setInterval(poll, 1000);
-})();
-`;
-
-// Progressive stepper + staged flow (U2). Drives Run → Edit → What's next with
-// progressive disclosure: only the current stage shows, completed stages collapse
-// to a done-bar, and the flow AUTO-ADVANCES on C1's REAL loop signal (never a
-// timer) — Step 1 completes when the local server is live, Step 2 when a real
-// save→reload is observed since the edit step began. Consumes the shared
-// tot:loop-state event from monitorScript (one poll for the whole page).
-//
-// Progress is persisted in sessionStorage. This is REQUIRED, not a nicety: saving
-// a watched file triggers Vite's global full-reload, which reloads THIS /dev tab
-// too — resetting in-memory state and re-baselining the very save that should
-// advance Edit→Next. Persisting done-flags + current stage + the edit baseline
-// (the lastSaveAt watermark captured when the edit step began, BEFORE the
-// qualifying save) lets the flow survive that reload and credit the save.
-//
-// Dev-only, rendered via set:html inside an isLocalDevLoop-gated is:inline tag. All dynamic
-// values via textContent.
-const stepperScript = `
-(function () {
-  var stepper = document.getElementById("stepper");
-  if (!stepper) return;
-  var stages = { run: document.getElementById("stage-run"), edit: document.getElementById("stage-edit"), next: document.getElementById("stage-next") };
-  var bars = { run: document.getElementById("bar-run"), edit: document.getElementById("bar-edit") };
-  var celRun = document.getElementById("cel-run");
-  var celEdit = document.getElementById("cel-edit");
-  var toNext = document.getElementById("toNext");
-  var detect = document.getElementById("detect");
-  var detectTxt = document.getElementById("detectTxt");
-  var detectEdit = document.getElementById("detect-edit");
-  var detectEditTxt = document.getElementById("detectEditTxt");
-  var barRunMeta = document.getElementById("bar-run-meta");
-  var barEditMeta = document.getElementById("bar-edit-meta");
-  var toast = document.getElementById("toast"), toastMsg = document.getElementById("toastMsg"), tT;
-  var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-  var SS = window.sessionStorage;
-  function load(k, d) { try { var v = SS.getItem(k); return v === null ? d : JSON.parse(v); } catch (e) { return d; } }
-  function put(k, v) { try { SS.setItem(k, JSON.stringify(v)); } catch (e) {} }
-
-  function ping(m, once) {
-    if (once && load(once, false)) return;
-    if (once) put(once, true);
-    if (!toast || !toastMsg) return;
-    toastMsg.textContent = m; toast.classList.add("show");
-    clearTimeout(tT); tT = setTimeout(function () { toast.classList.remove("show"); }, 1900);
-  }
-
-  var state = {
-    unlocked: load("tot.unlocked", { run: true, edit: false, next: false }),
-    done: load("tot.done", { run: false, edit: false }),
-    current: load("tot.current", "run"),
-  };
-  var editBase = load("tot.editBase", null);
-  function persist() { put("tot.unlocked", state.unlocked); put("tot.done", state.done); put("tot.current", state.current); }
-
-  function render() {
-    Array.prototype.forEach.call(stepper.querySelectorAll(".snode"), function (n) {
-      var s = n.getAttribute("data-go");
-      n.setAttribute("data-st", state.current === s ? "active" : state.done[s] ? "done" : state.unlocked[s] ? "done" : "locked");
-    });
-    Object.keys(stages).forEach(function (s) { if (stages[s]) stages[s].hidden = state.current !== s; });
-    if (bars.run) bars.run.hidden = !(state.done.run && state.current !== "run");
-    if (bars.edit) bars.edit.hidden = !(state.done.edit && state.current !== "edit");
-    // Contextual celebrate banners reflect achieved state (survive reloads).
-    if (celRun && state.done.run) celRun.hidden = false;
-    if (celEdit && state.done.edit) celEdit.hidden = false;
-    if (toNext) toNext.disabled = !state.unlocked.next;
-  }
-  function goTo(s) {
-    if (!state.unlocked[s]) return;
-    state.current = s; persist(); render();
-    window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
-  }
-
-  function onSignal(s) {
-    if (!s || s.offline) return;
-
-    // Step 1 — local server is live.
-    if (s.server && !state.done.run) {
-      state.done.run = true; state.unlocked.edit = true;
-      if (editBase === null) { editBase = s.lastSaveAt || 0; put("tot.editBase", editBase); }
-      persist();
-      if (barRunMeta && s.port) barRunMeta.textContent = "localhost:" + s.port + (s.tenant ? "/" + s.tenant + "/" : "/");
-      if (detect) detect.setAttribute("data-listening", "false");
-      if (detectTxt) detectTxt.textContent = "Your store is live on this machine.";
-      if (state.current === "run") { goTo("edit"); } else { render(); }
-      ping("Your store is live", "tot.pinged.run");
-    }
-
-    // Step 2 — a NEW save (since the edit step began) has been reflected by a reload.
-    if (state.done.run && !state.done.edit && editBase !== null) {
-      var newSave = (s.lastSaveAt || 0) > editBase;
-      var reflected = (s.lastSaveAt || 0) > 0 && (s.lastReloadAt || 0) >= (s.lastSaveAt || 0);
-      if (newSave && !reflected && detectEditTxt) {
-        detectEditTxt.textContent = "Change detected — reloading your store…";
-      }
-      if (newSave && reflected) {
-        state.done.edit = true; state.unlocked.next = true; persist();
-        if (barEditMeta && s.watchedFile) barEditMeta.textContent = s.watchedFile;
-        if (detectEdit) detectEdit.setAttribute("data-listening", "false");
-        if (detectEditTxt) detectEditTxt.textContent = "Saved — your store reloaded. That's the loop.";
-        if (state.current === "edit") { goTo("next"); } else { render(); }
-        ping("Saved — your page reloaded", "tot.pinged.edit");
-      }
-    }
-  }
-
-  render();
-  Array.prototype.forEach.call(document.querySelectorAll("[data-go]"), function (el) {
-    el.addEventListener("click", function () { goTo(el.getAttribute("data-go")); });
-  });
-  window.addEventListener("tot:loop-state", function (e) { onSignal(e.detail); });
-  if (window.__totLoop) onSignal(window.__totLoop);
-})();
-`;
-
-// "Stuck? Ask" recovery affordance (U3). A quiet FAB that opens a scoped Q&A for
-// "why isn't the loop working" — NOT general AI editing. Static answers ship as
-// markup; the two stateful answers (is it running? / save-vs-reload) update from
-// the shared tot:loop-state signal + window.__totLoop (C1/U2 — no second poll).
-// "Reconnect preview" reloads the page, re-establishing the HMR connection and
-// re-reading loop state (recovers a stale client); a fully-down server is handled
-// by the answer text (run tot start). Dev-only, set:html in an isLocalDevLoop-gated tag.
-const askScript = `
-(function () {
-  var fab = document.getElementById("askFab");
-  var panel = document.getElementById("askPanel");
-  if (!fab || !panel) return;
-  var ansRunning = document.getElementById("ans-running");
-  var ansChange = document.getElementById("ans-change");
-  var restart = document.getElementById("restartBtn");
-
-  fab.addEventListener("click", function (e) { e.stopPropagation(); panel.classList.toggle("open"); });
-  document.addEventListener("click", function (e) {
-    if (!panel.contains(e.target) && e.target !== fab && !fab.contains(e.target)) panel.classList.remove("open");
-  });
-  if (restart) restart.addEventListener("click", function () { location.reload(); });
-
-  function rel(ts) {
-    var d = Math.max(0, Math.round((Date.now() - Number(ts)) / 1000));
-    return d < 2 ? "just now" : d < 60 ? d + "s ago" : Math.floor(d / 60) + "m ago";
-  }
-  function update(s) {
-    if (!s) return;
-    if (ansRunning) {
-      ansRunning.textContent = (s.offline || !s.server)
-        ? "Your dev server isn't reachable right now — run tot start in your terminal, then reload this page."
-        : "Yes — your server is running" + (s.port ? " on port " + s.port : "") + ". This page is connected to it.";
-    }
-    if (ansChange) {
-      if (!s.lastSaveAt) {
-        ansChange.textContent = "No saves seen yet. Edit a watched file (like content/home.html) and save — it'll show up here.";
-      } else if ((s.lastReloadAt || 0) >= s.lastSaveAt) {
-        ansChange.textContent = "Working: your last save (" + rel(s.lastSaveAt) + ") triggered a reload (" + rel(s.lastReloadAt) + "). If the page didn't visibly change, make sure you edited the file the page renders from.";
-      } else {
-        ansChange.textContent = "Your save (" + rel(s.lastSaveAt) + ") hasn't been reflected by a reload yet — the preview may be stale. Try Reconnect preview below.";
-      }
-    }
-  }
-  window.addEventListener("tot:loop-state", function (e) { update(e.detail); });
-  if (window.__totLoop) update(window.__totLoop);
-})();
-`;
-
-// C5 · Files tab — in-browser file tree + LIVE EDITOR. Dev-only, rendered via
-// set:html inside an isLocalDevLoop-gated is:inline nonce'd tag. 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 C6 baseVersion so a
-// concurrent $EDITOR/git change is caught (409) instead of clobbered. Dynamic
-// values go through .value / textContent (never innerHTML) per the C1 decision.
-const filesScript = `
-(function () {
-  var apiBase = ${JSON.stringify(apiBase)};
-  var isDev = ${JSON.stringify(isLocalDevLoop)};
-  var offlineMsg = isDev ? "Could not reach the dev server." : "Not available on the hosted panel yet \\u2014 check back soon.";
-  var treeEl = document.getElementById("filesTree");
-  var viewEl = document.getElementById("filesView");
-  var pathEl = document.getElementById("filesPath");
-  var editbar = document.getElementById("filesEditbar");
-  var statusEl = document.getElementById("filesStatus");
-  var conflictEl = document.getElementById("filesConflict");
-  var reloadBtn = document.getElementById("filesReload");
-  var forceBtn = document.getElementById("filesForce");
-  var diffBtn = document.getElementById("filesDiffBtn");
-  var diffEl = document.getElementById("filesDiff");
-  var publishBtn = document.getElementById("filesPublishBtn");
-  if (!treeEl || !viewEl) return;
-  var selected = null;
-  var cur = null;
-  var saveTimer = null;
-  var diffOn = false;
-  var rowByPath = {}; // path -> tree row element, for programmatic open (C8 jump)
-
-  function setStatus(txt, cls) {
-    if (!statusEl) return;
-    statusEl.textContent = txt || "";
-    statusEl.className = "df-status" + (cls ? " " + cls : "");
-  }
-  function showConflict(show) { if (conflictEl) conflictEl.hidden = !show; }
-  function showBar(show) { if (editbar) editbar.hidden = !show; }
-
-  function openFile(path, row, afterLoad) {
-    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\\u2026");
-    fetch(apiBase + "/file?path=" + encodeURIComponent(path))
-      .then(function (r) { return r.json(); })
-      .then(function (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 \\u2014 " + (d.size || 0) + " bytes)"; cur = null; setStatus("Binary \\u2014 not editable"); return; }
-        if (d.tooBig) { viewEl.value = "(file too large to show \\u2014 " + (d.size || 0) + " bytes)"; cur = null; setStatus("Too large \\u2014 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 \\u2014 edits save + reload your store" : "Read-only");
-        if (typeof afterLoad === "function") afterLoad();
-      })
-      .catch(function () { 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 C8 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, col) {
-    var text = viewEl.value;
-    var lines = text.split("\\n");
-    var ln = Math.min(Math.max(1, line || 1), lines.length);
-    var offset = 0;
-    for (var 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.
-    var lh = viewEl.scrollHeight / Math.max(1, lines.length);
-    viewEl.scrollTop = Math.max(0, (ln - 1) * lh - viewEl.clientHeight / 2);
-  }
-
-  // C8 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.__totOpenFileAt = function (path, line, col) {
-    var row = rowByPath[path];
-    if (!row) return false;
-    if (typeof row.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
-    openFile(path, row, function () { placeCursor(line, col); });
-    return true;
-  };
-
-  function doSave(force) {
-    if (!cur || !cur.writable) return;
-    setStatus("Saving\\u2026");
-    var body = { 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(function (r) { return r.json().then(function (j) { return { s: r.status, j: j }; }); })
-      .then(function (res) {
-        if (res.s === 200 && res.j && res.j.ok) { cur.baseVersion = res.j.mtimeMs; showConflict(false); setStatus("Saved \\u2713", "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(function () { setStatus(isDev ? "Save failed \\u2014 dev server unreachable" : offlineMsg, "warn"); });
-  }
-
-  viewEl.addEventListener("input", function () {
-    if (!cur || !cur.writable) return;
-    setStatus("Editing\\u2026");
-    if (saveTimer) clearTimeout(saveTimer);
-    saveTimer = setTimeout(function () { doSave(false); }, 600);
-  });
-  viewEl.addEventListener("keydown", function (e) {
-    if ((e.metaKey || e.ctrlKey) && (e.key === "s" || e.key === "S")) {
-      e.preventDefault();
-      if (saveTimer) clearTimeout(saveTimer);
-      doSave(false);
-    }
-  });
-  if (reloadBtn) reloadBtn.addEventListener("click", function () { if (cur && selected) openFile(cur.path, selected); });
-  if (forceBtn) forceBtn.addEventListener("click", function () { showConflict(false); doSave(true); });
-
-  function setDiffMode(on) {
-    diffOn = on;
-    if (diffEl) diffEl.hidden = !on;
-    viewEl.hidden = on;
-    if (diffBtn) diffBtn.textContent = on ? "Edit" : "Diff";
-  }
-  function renderDiffText(t) { if (diffEl) diffEl.textContent = t; }
-  function lineDiff(before, after) {
-    var a = before.split("\\n"), b = after.split("\\n");
-    var m = a.length, n = b.length;
-    if (m * n > 4000000) return null;
-    var dp = []; for (var i = 0; i <= m; i++) { dp.push(new Array(n + 1).fill(0)); }
-    for (var i = m - 1; i >= 0; i--) for (var 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]);
-    var out = [], 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, after) {
-    if (!diffEl) return;
-    diffEl.textContent = "";
-    var rows = lineDiff(before, after);
-    if (!rows) { renderDiffText("(file too large to diff)"); return; }
-    var frag = document.createDocumentFragment();
-    rows.forEach(function (row) {
-      var 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\\u2026");
-    fetch(apiBase + "/diff?path=" + encodeURIComponent(cur.path))
-      .then(function (r) { return r.json(); })
-      .then(function (d) {
-        if (!d || !d.ok) { setStatus((d && d.message) || "Could not diff.", "warn"); return; }
-        if (!d.shown) { renderDiffText("(diff not shown \\u2014 " + (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(function () { setStatus(offlineMsg, "warn"); });
-  }
-  if (diffBtn) diffBtn.addEventListener("click", doDiff);
-
-  // cp-publish: draft -> PR-backed candidate for review (unit s6, milestone
-  // "PR-Backed Hosted Review Loop") — 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 per the card.
-  function doPublish() {
-    if (!cur || !cur.writable || !publishBtn) return;
-    if (!window.confirm("Submit your saved edit for review? (Opens/updates a pull request \\u2014 not your live site.)")) return;
-    var prevLabel = publishBtn.textContent;
-    publishBtn.disabled = true;
-    setStatus("Submitting\\u2026");
-    fetch(apiBase + "/publish", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ path: cur.path }) })
-      .then(function (r) { return r.json().then(function (j) { return { s: r.status, j: j }; }); })
-      .then(function (res) {
-        if (res.s === 200 && res.j && res.j.ok) { setStatus("Submitted for review \\u2713" + (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(function () { setStatus(offlineMsg, "warn"); })
-      .then(function () { publishBtn.disabled = false; publishBtn.textContent = prevLabel; });
-  }
-  if (publishBtn) publishBtn.addEventListener("click", doPublish);
-
-  function renderNodes(nodes, parentUl, depth) {
-    nodes.forEach(function (n) {
-      var li = document.createElement("li");
-      li.className = "ft-" + n.type;
-      var row = document.createElement("div");
-      row.className = "ft-row";
-      row.style.paddingLeft = (depth * 12 + 10) + "px";
-      var icon = document.createElement("span");
-      icon.className = "ft-ic";
-      icon.textContent = n.type === "dir" ? "\\uD83D\\uDCC1" : "\\uD83D\\uDCC4";
-      var 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") {
-        var 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 C8 programmatic jump
-        row.addEventListener("click", function () { openFile(n.path, row); });
-        row.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); openFile(n.path, row); } });
-      }
-      parentUl.appendChild(li);
-    });
-  }
-
-  function load() {
-    fetch(apiBase + "/tree")
-      .then(function (r) { return r.json(); })
-      .then(function (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; }
-        var ul = document.createElement("ul");
-        ul.className = "ft-root";
-        renderNodes(d.tree || [], ul, 0);
-        treeEl.appendChild(ul);
-      })
-      .catch(function () { treeEl.textContent = offlineMsg; });
-  }
-  load();
-})();
-`;
-
-// C8 · Click-to-source capstone — the cockpit side. Runs the live-preview iframe
-// (mini + full-screen dialog) and LISTENS for the framed picker's tot:locate
-// postMessage. The picker (ai-widget-client.js, auto-injected into the same-origin
-// preview) resolves a click to {path,line,col} via /__tot/locate, then — because it
-// is framed — postMessages the result here instead of showing its own toast. We
-// verify event.origin === our origin, then hand off to the Files panel's
-// window.__totOpenFileAt to open the source + drop the caret. Only content-region
-// hits ever arrive (chrome/refused clicks stay silent in the frame), per decision
-// click-to-source-anchors-at-content-region.
-const c8Script = `
-(function () {
-  var isDev = ${JSON.stringify(isLocalDevLoop)};
-  var hostedAppDomain = ${JSON.stringify(appDomain)};
-  var dlg = document.getElementById("previewDialog");
-  var expandBtn = document.getElementById("previewExpand");
-  var closeBtn = document.getElementById("previewClose");
-  var dlgFrame = document.getElementById("previewDialogFrame");
-  var miniFrame = document.getElementById("previewFrame");
-  var urlEl = document.getElementById("previewUrl");
-
-  if (miniFrame) {
-    if (isDev) {
-      // Point the preview at the DEV tenant (TOT_DEV_TENANT), read from the server
-      // via /__tot/dev-loop-status — NOT the SSR appDomain (workerd can't see
-      // TOT_DEV_*). Same-origin, so the auto-injected picker can postMessage back.
-      fetch("/__tot/dev-loop-status")
-        .then(function (r) { return r.json(); })
-        .then(function (s) {
-          var tenant = s && s.tenant;
-          if (!tenant) return;
-          var src = "/" + tenant + "/";
-          miniFrame.src = src;
-          if (urlEl) urlEl.textContent = "localhost preview · " + tenant;
-        })
-        .catch(function () { /* dev server unreachable — preview stays blank */ });
-    } else if (hostedAppDomain) {
-      // Hosted: the SSR-resolved tenant IS the signed-in developer's own store
-      // (cp-env's capability gate already scoped it) — same-origin, so a cp-write
-      // save + this reload shows the developer's own draft overlay via the
-      // middleware's tot_dev_draft cookie check.
-      miniFrame.src = "/" + hostedAppDomain + "/";
-      if (urlEl) urlEl.textContent = "your store · " + hostedAppDomain;
-    }
-  }
-
-  if (expandBtn && dlg) {
-    expandBtn.addEventListener("click", function () {
-      if (dlgFrame && !dlgFrame.getAttribute("src") && miniFrame) dlgFrame.src = miniFrame.getAttribute("src") || miniFrame.src;
-      if (typeof dlg.showModal === "function") dlg.showModal(); else dlg.setAttribute("open", "");
-    });
-  }
-  if (closeBtn && dlg) closeBtn.addEventListener("click", function () { dlg.close ? dlg.close() : dlg.removeAttribute("open"); });
-  if (dlg) dlg.addEventListener("click", function (e) { if (e.target === dlg) { dlg.close ? dlg.close() : dlg.removeAttribute("open"); } });
-
-  // The one privileged inbound message: a source location from OUR OWN origin's
-  // framed preview. Reject any other origin, shape, or type outright.
-  window.addEventListener("message", function (e) {
-    if (e.origin !== window.location.origin) return;
-    var d = e.data;
-    if (!d || d.type !== "tot:locate" || typeof d.path !== "string") return;
-    if (typeof window.__totOpenFileAt === "function") {
-      var opened = window.__totOpenFileAt(d.path, d.line, d.col);
-      // If the preview was expanded full-screen, close it so the editor + caret are visible.
-      if (opened && dlg && dlg.open) { dlg.close ? dlg.close() : dlg.removeAttribute("open"); }
-    }
-  });
-})();
-`;
-
-// Hosted /dev activity log (hosted-dev-activity-bridge). Polls the NEW
-// GET /api/dev/activity — a translated, file-level feed of what the local dev
-// loop reported — and renders it newest-first. Also drives the "your edit
-// landed" celebration: the first poll primes a baseline (sessionStorage, same
-// survive-a-reload rationale as the local stepper's editBase), and any LATER
-// event past that baseline triggers the banner + a lightweight confetti burst.
-// POLL (not SSE): Workers are stateless per request, so a redeploy mid-session
-// needs no reconnect logic here. Rendered only when hostedActivity (never
-// alongside the isLocalDevLoop-gated local scripts above).
-const hostedActivityScript = `
-(function () {
-  var root = document.getElementById("hostedActivity");
-  if (!root) return;
-
-  // The request's tenant prefix ("" host-routed, "/<tenant>" path-routed). Every
-  // /api/dev/* call below carries it so the activity feed + the CLI sign-in-code mint
-  // run in THIS store's scope (locals.tenant on the API request) — the same store this
-  // /<tenant>/cockpit rendered for, never the session's first membership.
-  var basePath = ${JSON.stringify(basePath)};
-
-  // ?reset — a TRUE reset for re-testing the onboarding loop: clear THIS browser's
-  // stepper progress AND the server-side KV (live-runtime record + activity buffer),
-  // then reload clean. Clearing the server too means a stopped local loop stops reading
-  // as "up" immediately instead of lingering until the runtime TTL/live-window expires.
-  try {
-    if (/[?&]reset\\b/.test(location.search)) {
-      ["tot.hosted.steps", "tot.hosted.current", "tot.hosted.editBase"].forEach(function (k) {
-        try { window.sessionStorage.removeItem(k); } catch (e) {}
-      });
-      var reloaded = false;
-      var doneReset = function () { if (reloaded) return; reloaded = true; location.replace(location.pathname); };
-      setTimeout(doneReset, 2000); // fallback so a hung request still lands us fresh
-      try { fetch(basePath + "/api/dev/activity", { method: "DELETE", cache: "no-store" }).then(doneReset, doneReset); }
-      catch (e) { doneReset(); }
-      return; // the post-clear reload re-runs this script against a fresh, empty state
-    }
-  } catch (e) {}
-
-  var tableEl = document.getElementById("haTable");
-  var bodyEl = document.getElementById("haBody");
-  var emptyEl = document.getElementById("haEmpty");
-
-  // Bridge strip — the rail's power source, fed by the SAME poll's \`runtime\` object
-  // (no second poller). \`runtime\` is { cliVersion, runnerVersion, url, aliveAt, live }
-  // reported by the developer's local \`tot\` CLI; absent until its data layer lands,
-  // so every read here is defensive (missing runtime -> the strip stays hidden).
-  var bridge = document.getElementById("bridge");
-  var bUrl = document.getElementById("bUrl");
-  var bGo = document.getElementById("bGo");
-  var bKicker = document.getElementById("bKicker");
-  var bHint = document.getElementById("bHint");
-  var bDiag = document.getElementById("bDiag");
-  var bTxt = document.getElementById("bTxt");
-  var bObstacle = document.getElementById("bObstacle");
-  var bObTitle = document.getElementById("bObTitle");
-  var bObMsg = document.getElementById("bObMsg");
-  var bObCmd = document.getElementById("bObCmd");
-  var bObNote = document.getElementById("bObNote");
-  var doneRunMeta = document.getElementById("doneRunMeta");
-  function updateBridge(rt, obstacle) {
-    if (!bridge) return;
-    var live = !!(rt && rt.live);
-    if (live) sawLive = true;
-    // Obstacle lane (v2 §6): a failed \`tot start\` is the ONE reason the strip
-    // shows BEFORE the loop was ever live this page-view — the developer needs the
-    // fix, not a silent "watching…". The server returns \`obstacle\` only when there
-    // is no live heartbeat, so a live loop supersedes it. Fill from server copy.
-    if (obstacle && !live) {
-      bridge.hidden = false;
-      bridge.setAttribute("data-live", "obstacle");
-      if (bTxt) bTxt.hidden = true;
-      if (bDiag) bDiag.hidden = true;
-      if (bGo) bGo.hidden = true;
-      if (bHint) bHint.hidden = true;
-      if (bObstacle) bObstacle.hidden = false;
-      if (bObTitle) bObTitle.textContent = obstacle.title || "Setup hit a snag";
-      if (bObMsg) bObMsg.textContent = obstacle.message || "";
-      if (bObCmd) {
-        if (obstacle.fixCommand) { bObCmd.textContent = obstacle.fixCommand; bObCmd.hidden = false; }
-        else bObCmd.hidden = true;
-      }
-      if (bObNote) bObNote.textContent = obstacle.fixNote || "";
-      return;
-    }
-    // Back to the normal live/quiet strip: restore the pieces the obstacle state hid.
-    if (bObstacle) bObstacle.hidden = true;
-    if (bTxt) bTxt.hidden = false;
-    if (!rt || !rt.url) { bridge.hidden = true; return; }
-    // On FIRST arrival, a stale runtime record (offline, never seen live this
-    // page-view — e.g. left over from a prior run, still within the heartbeat TTL)
-    // must NOT show — let Step 1 "Get your store running" do the work. Only surface
-    // the strip once it's live, or after it's gone quiet HAVING been live this page-view.
-    if (!live && !sawLive) { bridge.hidden = true; return; }
-    bridge.hidden = false;
-    bridge.setAttribute("data-live", live ? "1" : "0");
-    if (bUrl) { bUrl.textContent = rt.url; bUrl.href = rt.url; }
-    // No point offering "Open your store" to a server that stopped answering.
-    if (bGo) { bGo.href = rt.url; bGo.hidden = !live; }
-    if (bKicker) bKicker.textContent = live ? "Live on your machine" : "Went quiet";
-    if (bHint) bHint.hidden = live; // recovery hint only while offline
-    if (doneRunMeta) doneRunMeta.textContent = rt.url; // the collapsed Step-1 row's meta
-    if (bDiag) {
-      if (rt.cliVersion) {
-        bDiag.textContent = "tot CLI v" + rt.cliVersion + (rt.runnerVersion ? " \\u00b7 runner v" + rt.runnerVersion : "");
-        bDiag.hidden = false;
-      } else {
-        bDiag.hidden = true;
-      }
-    }
-    updateEditHint(rt); // suggest the exact "open this file" command on Step 2
-  }
-
-  // Item 6 — once the CLI reports the developer's $EDITOR, show the EXACT command to
-  // open the first file to edit (e.g. \`code content/home.html\`); otherwise a generic
-  // \`$EDITOR content/home.html\` plus a nudge to set $EDITOR.
-  var editOpenCmd = document.getElementById("editOpenCmd");
-  var editOpenHint = document.getElementById("editOpenHint");
-  function updateEditHint(rt) {
-    if (!editOpenCmd) return;
-    var editor = rt && typeof rt.editor === "string" ? rt.editor : "";
-    var cwd = rt && typeof rt.cwd === "string" ? rt.cwd : "";
-    // Prefer the FULL path (works from any directory) when the CLI reports the
-    // project dir; else a project-relative path with a "run it from there" note.
-    var file = cwd ? (cwd.replace(/\\/+$/, "") + "/content/home.html") : "content/home.html";
-    editOpenCmd.textContent = (editor || "$EDITOR") + " " + file;
-    if (editOpenHint) {
-      editOpenHint.textContent = editor
-        ? (cwd
-            ? "Run that anywhere to open the file — then change a line and save."
-            : "Run that from your project directory — then change a line and save.")
-        : "Tip: set $EDITOR (e.g. \`export EDITOR=\\"code\\"\`) and we'll show the exact open command here.";
-    }
-  }
-
-  var SS = window.sessionStorage;
-  function load(k, d) { try { var v = SS.getItem(k); return v === null ? d : JSON.parse(v); } catch (e) { return d; } }
-  function put(k, v) { try { SS.setItem(k, JSON.stringify(v)); } catch (e) {} }
-
-  var baseline = load("tot.hosted.editBase", null); // null = not yet primed by a first poll
-  var expanded = false; // activity list: last 3 by default, expand to all
-  // Have we seen the store go live during THIS PAGE VIEW? In-memory ONLY (not
-  // persisted): a fresh land or a reload starts false, so a stale/offline record can
-  // never greet the developer with "went quiet" — Step 1 owns that moment. The
-  // recovery ("went quiet") state shows only after we actually watched it live → drop.
-  var sawLive = false;
-
-  // Guided accordion. Each step opens with its content; when its activity is detected
-  // it animates CLOSED to a reopenable done-bar, and a single "Next Up" panel at the
-  // bottom expands to tease the following step with ONE CTA that opens it.
-  //   steps   = completion flags {run, edit}
-  //   current = the OPEN step key, or null between steps (Next Up showing)
-  // Both persisted so a reload restores the exact place in the flow.
-  var steps = load("tot.hosted.steps", { run: false, edit: false });
-  // Live-driven flow. current is the EXPLICITLY-opened step ("run" when Step 1 was
-  // reopened, "edit"/"next" for those) or null — the default view, where Step 1's
-  // open/minimized state is driven by whether localhost is LIVE. NOT persisted: a
-  // refresh lands in this default view (progress in steps still persists).
-  var current = null;
-  var liveNow = false; // is localhost live right now? set each poll from runtime.live
-  var bodies = {
-    run: document.getElementById("stage-run"),
-    edit: document.getElementById("hosted-stage-edit"),
-    next: document.getElementById("hosted-stage-next"),
-  };
-  // Rail station elements — the reskin's DOM (applyView targets these).
-  var stEls = {
-    run: document.getElementById("st-run"),
-    edit: document.getElementById("st-edit"),
-    next: document.getElementById("st-next"),
-  };
-  var segRun = document.getElementById("seg-run");
-  var segEdit = document.getElementById("seg-edit");
-  var doneRunEl = document.getElementById("done-run");
-  var doneEditEl = document.getElementById("done-edit");
-  var doneEditMeta = document.getElementById("doneEditMeta");
-  var lockEditEl = document.getElementById("lock-edit");
-  var lockNextEl = document.getElementById("lock-next");
-  var teaseEditEl = document.getElementById("tease-edit");
-  var teaseNextEl = document.getElementById("tease-next");
-  var quietNoteEl = document.getElementById("quietNote");
-
-  // Persisted state mutations funnel through here so the sessionStorage write can
-  // never be forgotten at a call site (progress in steps + the edit baseline are
-  // the only things that survive a reload).
-  function completeStep(key) {
-    if (steps[key]) return false;            // already done — no-op
-    steps[key] = true; put("tot.hosted.steps", steps);
-    return true;                             // "just completed" — caller may celebrate
-  }
-  function setBaseline(v) { baseline = v; put("tot.hosted.editBase", baseline); }
-
-  // ============================================================================
-  // STATE → VIEW → DOM. The flow's behaviour is split into three layers so the
-  // rules live in ONE readable place and every render goes through one path:
-  //   1. derive  — computeView(): pure, reads state (steps/current/liveNow),
-  //                returns a view model. EVERY visibility/emphasis rule is here.
-  //   2. apply   — applyView(): the ONLY code that mutates the rail DOM (station
-  //                statuses, segment lit/flow, step bodies, done rows, locked
-  //                labels, teasers, quiet note, activity).
-  //   3. renderSteps(): apply(compute()). Call after ANY state change — never poke
-  //                an element directly from a handler or the poll.
-  // The signal-rail reskin kept layer 1's RULES verbatim (only added derived
-  // fields) and rewrote applyView() + the markup/CSS it targets.
-  // ============================================================================
-
-  // --- derive ---------------------------------------------------------------
-  function unlocked(step) {
-    return step === "run" || (step === "edit" && steps.run) || (step === "next" && steps.edit);
-  }
-  // Step 1 is OPEN while you still need to get the store running (localhost not live) or
-  // when you explicitly reopened it; it MINIMIZES to a done row once localhost is live —
-  // in opposition to revealing the Step-2 teaser.
-  function step1Open() {
-    return current === "run" || (current === null && !(steps.run && liveNow));
-  }
-  // The complete view model — no DOM access, so the rules can be read top to bottom:
-  //   open        which step BODY is expanded            {run, edit, next}
-  //   seg         which rail segment is LIT               {run, edit}
-  //   flow        do lit segments flow downward (live)    boolean
-  //   stRun/Edit/Next  each station's status  "open" | "done" | "next" | "locked"
-  //   teaseEdit/Next   is that step's forward teaser shown (live-gated)
-  //   doneRun/Edit     is that step's collapsed done row shown
-  //   lockEdit/Next    is that step's locked label shown
-  //   quietNote        the Step-1 "went quiet" note (re-inflated after a drop)
-  //   showActivity     is "Your activity" visible (NEVER while Step 1 is open)
-  function computeView() {
-    var s1 = step1Open();
-    // Forward teasers show ONLY while localhost is live — a forward CTA only makes
-    // sense while the loop is alive. When the loop goes quiet Step 1 re-inflates to own
-    // that moment, so the teaser retracts. Either is also hidden while the step it
-    // teases is already open.
-    var teaseEdit = steps.run && !steps.edit && liveNow && current !== "edit";
-    var teaseNext = steps.edit && liveNow && current !== "next";
-    return {
-      open: { run: s1, edit: current === "edit", next: current === "next" },
-      seg: { run: steps.run, edit: steps.edit },
-      flow: liveNow,
-      stRun: s1 ? "open" : "done",
-      stEdit: steps.edit ? "done" : (current === "edit") ? "open" : teaseEdit ? "next" : "locked",
-      stNext: (current === "next") ? "open" : teaseNext ? "next" : "locked",
-      teaseEdit: teaseEdit,
-      teaseNext: teaseNext,
-      doneRun: !s1 && steps.run,
-      doneEdit: steps.edit && current !== "edit",
-      lockEdit: !steps.run,
-      lockNext: !steps.edit,
-      quietNote: s1 && steps.run && !liveNow && sawLive,
-      showActivity: !s1 && steps.run,
-    };
-  }
-
-  // --- apply (targets the rail DOM; the rules live in computeView above) -----
-  function applyView(v) {
-    if (stEls.run) stEls.run.setAttribute("data-st", v.stRun);
-    if (stEls.edit) stEls.edit.setAttribute("data-st", v.stEdit);
-    if (stEls.next) stEls.next.setAttribute("data-st", v.stNext);
-    if (segRun) { segRun.setAttribute("data-lit", v.seg.run ? "1" : "0"); segRun.setAttribute("data-flow", v.flow ? "1" : "0"); }
-    if (segEdit) { segEdit.setAttribute("data-lit", v.seg.edit ? "1" : "0"); segEdit.setAttribute("data-flow", v.flow ? "1" : "0"); }
-    if (bodies.run) bodies.run.hidden = !v.open.run;
-    if (bodies.edit) bodies.edit.hidden = !v.open.edit;
-    if (bodies.next) bodies.next.hidden = !v.open.next;
-    if (doneRunEl) doneRunEl.hidden = !v.doneRun;
-    if (doneEditEl) doneEditEl.hidden = !v.doneEdit;
-    if (lockEditEl) lockEditEl.hidden = !v.lockEdit;
-    if (lockNextEl) lockNextEl.hidden = !v.lockNext;
-    if (teaseEditEl) teaseEditEl.hidden = !v.teaseEdit;
-    if (teaseNextEl) teaseNextEl.hidden = !v.teaseNext;
-    if (quietNoteEl) quietNoteEl.hidden = !v.quietNote;
-    if (root) root.hidden = !v.showActivity;
-  }
-  // Single render entry point — derive, then apply. (Named renderSteps so the
-  // existing call sites keep working; distinct from the activity render(events).)
-  function renderSteps() { applyView(computeView()); }
-
-  function expandStage(el) {
-    if (!el) return;
-    el.hidden = false;
-    el.classList.add("expanding");
-    setTimeout(function () { if (el && el.classList) el.classList.remove("expanding"); }, 420);
-  }
-
-  // Open a step (from a teaser CTA or a collapsed done row) — animates it in.
-  function goTo(step) {
-    if (!unlocked(step)) return;
-    current = step;
-    renderSteps();
-    expandStage(bodies[step]);
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  }
-
-  // Rail click wiring: done rows reopen their step; teaser CTAs open the teased step.
-  if (doneRunEl) doneRunEl.addEventListener("click", function () { goTo("run"); });
-  if (doneEditEl) doneEditEl.addEventListener("click", function () { goTo("edit"); });
-  var ctaEdit = document.getElementById("cta-edit");
-  if (ctaEdit) ctaEdit.addEventListener("click", function () { goTo("edit"); });
-  var ctaNext = document.getElementById("cta-next");
-  if (ctaNext) ctaNext.addEventListener("click", function () { goTo("next"); });
-
-  // Absolute clock time with seconds (e.g. "2:57:14 PM") — a fixed point, not a
-  // churning duration. Full date+time stays on the hover title (render()).
-  function rel(ts) {
-    try {
-      return new Date(Number(ts)).toLocaleTimeString([], { hour: "numeric", minute: "2-digit", second: "2-digit" });
-    } catch (x) {
-      return "";
-    }
-  }
-
-  // Toast — reuses the shared #toast element (also driven by the copy script).
-  var toastEl = document.getElementById("toast");
-  var toastMsgEl = document.getElementById("toastMsg");
-  var toastT;
-  function toast(msg) {
-    if (!toastEl || !toastMsgEl) return;
-    toastMsgEl.textContent = msg;
-    toastEl.classList.add("show");
-    clearTimeout(toastT);
-    toastT = setTimeout(function () { toastEl.classList.remove("show"); }, 2600);
-  }
-
-  // Celebration — replaces the full-screen confetti. Stamps the Step-2 node (spark
-  // burst + stamp, via the .celebrating class) and shows a toast. Reduced-motion
-  // disables the burst/stamp in CSS; the toast still shows.
-  function celebrate(file) {
-    var st = stEls.edit;
-    if (st) {
-      st.classList.remove("celebrating");
-      void st.offsetWidth; // restart the burst animation
-      st.classList.add("celebrating");
-      setTimeout(function () { if (st && st.classList) st.classList.remove("celebrating"); }, 1100);
-    }
-    if (doneEditMeta && file) doneEditMeta.textContent = file;
-    toast("Saved " + (file || "your file") + " \\u2014 your store reloaded. That's the loop.");
-  }
-
-  var toggleEl = document.getElementById("haToggle");
-  var VISIBLE = 3; // show the latest 3 by default; expand for the rest
-  if (toggleEl) {
-    toggleEl.addEventListener("click", function () { expanded = !expanded; render(lastEvents); });
-  }
-  var lastEvents = [];
-
-  function render(events) {
-    lastEvents = events;
-    // Item 3 — drop the "up"/"running locally" pings; the live widget at the top
-    // already conveys that. Only real FILE activity belongs in the table, and each
-    // field is its own <td> so time / action / file never run together.
-    var real = (events || []).filter(function (e) { return e && e.event !== "up"; });
-    Array.prototype.forEach.call(bodyEl.querySelectorAll(".ha-row"), function (n) { n.remove(); });
-    if (!real.length) {
-      emptyEl.hidden = false;
-      if (tableEl) tableEl.hidden = true;
-      if (toggleEl) toggleEl.hidden = true;
-      return;
-    }
-    emptyEl.hidden = true;
-    if (tableEl) tableEl.hidden = false;
-    var newestFirst = real.slice().reverse();
-    var shown = expanded ? newestFirst : newestFirst.slice(0, VISIBLE);
-    shown.forEach(function (e, i) {
-      var tr = document.createElement("tr");
-      tr.className = i === 0 ? "ha-row is-new" : "ha-row"; // accent the newest row
-      var when = document.createElement("td");
-      when.className = "ha-when";
-      when.textContent = rel(e.at);
-      try { when.title = new Date(e.at).toLocaleString(); } catch (x) {} // exact time on hover
-      var desc = document.createElement("td");
-      desc.className = "ha-desc";
-      desc.textContent = e.description;
-      var file = document.createElement("td");
-      file.className = "ha-file";
-      file.textContent = e.file || "";     // the concrete file name, e.g. content/home.html
-      tr.appendChild(when); tr.appendChild(desc); tr.appendChild(file);
-      bodyEl.appendChild(tr);
-    });
-    if (toggleEl) {
-      if (real.length > VISIBLE) {
-        toggleEl.hidden = false;
-        toggleEl.textContent = expanded ? "Show fewer" : "Show all " + real.length;
-      } else {
-        toggleEl.hidden = true;
-      }
-    }
-  }
-
-  // Adaptive poll cadence + visibility pause (2026-07-15 KV-quota incident: a
-  // single backgrounded tab, polling flat-out every 3s with no pause, burned
-  // through the ENTIRE account-wide daily KV read quota by itself and took
-  // down real customer traffic with 500s). Two rules:
-  //   1. HIDDEN tab → don't poll at all. A backgrounded/minimized tab can't be
-  //      "watching" the loop; resume (with an immediate catch-up poll) the
-  //      instant it becomes visible again.
-  //   2. VISIBLE but the loop is already fully celebrated (steps.run AND
-  //      steps.edit) → the high-stakes "is it working yet" moment has passed,
-  //      so back off to a slow cadence. Still visible AND still mid-loop →
-  //      keep the fast cadence (this is the one case where sub-second-feeling
-  //      responsiveness genuinely matters — a real developer staring at the
-  //      screen waiting to see their save land).
-  var FAST_MS = 3000;   // actively watching for the loop to prove itself
-  var SLOW_MS = 20000;  // loop already celebrated — just an occasional glance
-  var pollTimer = null;
-
-  function nextDelay() {
-    return (steps.run && steps.edit) ? SLOW_MS : FAST_MS;
-  }
-
-  function scheduleNext() {
-    if (pollTimer) { clearTimeout(pollTimer); pollTimer = null; }
-    if (document.hidden) return; // stay fully paused; visibilitychange resumes us
-    pollTimer = setTimeout(poll, nextDelay());
-  }
-
-  function poll() {
-    fetch(basePath + "/api/dev/activity", { cache: "no-store" })
-      .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
-      .then(function (d) {
-        var events = (d && d.events) || [];
-        var rt = d && d.runtime;
-        var isLive = !!(rt && rt.live);
-        liveNow = isLive; // drives Step 1 minimize + the Step-2 teaser visibility below
-        updateBridge(rt, d && d.obstacle); // same poll drives the bridge strip (+ obstacle lane)
-        render(events);
-        // b1 fix — Step-2 completion must key off the SAME events the feed shows:
-        // REAL file edits (event !== "up"), NOT the single newest buffer entry. The
-        // local loop interleaves recurring "up" liveness pings into this one ring
-        // buffer, so the newest event is frequently an "up" ping even right after a
-        // save. The old gate read events[last]: when an "up" ping landed AFTER the
-        // edit it (1) made lastIsEdit false so completeStep("edit") never fired, and
-        // (2) still advanced the baseline watermark past the edit's timestamp —
-        // permanently stranding Step 2 even though the save rendered in "Your
-        // activity". Filter to real edits (mirroring render()'s filter) and advance
-        // the watermark only from real edits, so a liveness ping can neither satisfy
-        // nor poison the gate.
-        var realEdits = events.filter(function (e) { return e && e.event !== "up"; });
-        var lastEdit = realEdits.length ? realEdits[realEdits.length - 1] : null;
-        var latestEdit = lastEdit ? lastEdit.at : 0;
-        // Step 1 "Get running" completes once localhost reports LIVE (or any activity
-        // arrives). Once complete, renderSteps() minimizes Step 1 and reveals the Step-2 nudge.
-        if (isLive || events.length) completeStep("run");
-        if (baseline === null) {
-          setBaseline(latestEdit); // first poll primes the watermark from real edits — no edit inferred yet
-        } else if (latestEdit > baseline) {
-          setBaseline(latestEdit);
-          // A real FILE edit landed after the watermark → Step 2 completes (once).
-          // completeStep flips + persists once, returning true on that first poll only.
-          if (completeStep("edit")) {
-            celebrate(lastEdit && lastEdit.file);
-            if (current === "edit") current = null; // minimize Step 2 → reveal Step-3 teaser
-          }
-        }
-        // ALWAYS re-render so a localhost drop hides the Step-2 nudge + reopens Step 1.
-        renderSteps();
-      })
-      .catch(function () {})
-      .then(scheduleNext); // reschedule (or not, if now hidden) regardless of outcome
-  }
-
-  document.addEventListener("visibilitychange", function () {
-    if (document.hidden) {
-      if (pollTimer) { clearTimeout(pollTimer); pollTimer = null; }
-    } else {
-      poll(); // catch up immediately; poll() reschedules itself at the end
-    }
-  });
-
-  // Item 7/10 — Step 3 "Submit for preview" opens the "coming soon" dialog (the
-  // compliance-reviewed preview pipeline isn't wired into this panel yet).
-  var submitBtn = document.getElementById("submitPreview");
-  var comingSoon = document.getElementById("comingSoon");
-  if (submitBtn && comingSoon) {
-    submitBtn.addEventListener("click", function () {
-      if (typeof comingSoon.showModal === "function") comingSoon.showModal();
-      else comingSoon.setAttribute("open", "");
-    });
-    var csClose = document.getElementById("comingSoonClose");
-    if (csClose) csClose.addEventListener("click", function () {
-      if (typeof comingSoon.close === "function") comingSoon.close();
-      comingSoon.removeAttribute("open");
-    });
-  }
-
-  renderSteps();
-  if (!document.hidden) poll(); // if the tab starts hidden, visibilitychange kicks it off later
-})();
-`;
+// Dev-only client widgets (Monitor, Stepper, Ask, Files, click-to-source) and
+// the hosted activity rail live in typed apps/storefront/src/lib/dev/cockpit/*
+// modules, imported from processed <script> tags below (ADR 0013) instead of
+// being hand-mirrored here as raw strings. apiBase/isLocalDevLoop/appDomain/
+// basePath cross into those modules via data-cockpit-* attrs on <body>.
 ---
 
 <html lang="en">
@@ -1595,6 +541,8 @@ const hostedActivityScript = `
 
       /* ---- Step 2 "lay it beside your editor" tip ---- */
       .tip-lay { margin: 1rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
+      .tip-branch { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
+      .tip-branch a { color: inherit; text-decoration: underline; }
 
       /* ---- Guided accordion: a step body animates IN when opened (collapse is instant
              + synchronous so the flow can't get stuck). Shared with isLocalDevLoop —
@@ -2016,7 +964,12 @@ const hostedActivityScript = `
       [hidden] { display: none !important; }
     </style>
   </head>
-  <body>
+  <body
+    data-cockpit-api-base={apiBase}
+    data-cockpit-is-dev={isLocalDevLoop ? "true" : "false"}
+    data-cockpit-app-domain={appDomain}
+    data-cockpit-base-path={basePath}
+  >
     <div class="wrap">
       <header class="topbar">
         <div class="brand">
@@ -2260,7 +1213,8 @@ const hostedActivityScript = `
 <span class="cmd" id="editOpenCmd">$EDITOR content/home.html</span></div>
             </div>
             <p class="cmd-note" id="editOpenHint">Tip: set <code>$EDITOR</code> and we'll show the exact open command here.</p>
-            <p class="tip-lay">Lay this cockpit <em>beside</em> your editor and your running store — hot reload is on, so every save reloads the store and lands in <strong>Your activity</strong> here, live.</p>
+            <p class="tip-lay">Lay this cockpit <em>beside</em> your editor (or an AI coding agent like Claude — same idea) and your running store — hot reload is on, so every save reloads the store and lands in <strong>Your activity</strong> here, live. Keep the terminal running <code>tot start</code>/<code>tot dev</code> open too, watching for build errors — need the command line for something else? Open a new terminal instead of closing that one.</p>
+            <p class="tip-branch">No need to think about git branches for this — just keep editing and running <code>tot preview</code>; it updates the same change every time. <a href="https://github.com/tokenoftrust/storefront/blob/feature/8500-storefront-integration/docs/kb/develop-ship-and-connect-domain.md#branching-is-an-advanced-feature--you-almost-never-need-it" target="_blank" rel="noopener">Working on two things at once? Read this first →</a></p>
           </div>
         </section>
           </div>
@@ -2534,291 +1488,61 @@ const hostedActivityScript = `
       </div>
     )}
 
-    <script nonce={cspNonce} is:inline>
-      // Theme toggle: flip data-theme on <html>, seeded from the OS preference on first
-      // click, and PERSISTED to localStorage so a reload stays on the manual choice (the
-      // head seed script above reads this same key before first paint). Clearing storage
-      // falls back to prefers-color-scheme again, same as a first-ever visit.
-      (function () {
-        var root = document.documentElement;
-        var btn = document.getElementById("themeBtn");
-        if (!btn) return;
-        var KEY = "tot.theme";
-        function store(v) { try { localStorage.setItem(KEY, v); } catch (e) {} }
-        btn.addEventListener("click", function () {
-          var cur = root.getAttribute("data-theme");
-          var next = cur === "dark" ? "light" : cur === "light" ? "dark"
-            : (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark");
-          root.setAttribute("data-theme", next);
-          store(next);
-        });
-      })();
+    <script>
+      import { initThemeToggle } from "@/lib/dev/cockpit/themeToggle";
+      initThemeToggle();
     </script>
 
-    <script nonce={cspNonce} is:inline>
-      // Copy the "connect the MCP" command (d3-unhold-dev-step0-connect-mcp). Static
-      // text (no minting), so unlike #copyIcon this button is visible from load.
-      (function () {
-        var copyIcon = document.getElementById("mcpCopyIcon");
-        var cmdText = document.getElementById("mcpCmdText");
-        var toast = document.getElementById("toast");
-        var toastMsg = document.getElementById("toastMsg");
-        if (!copyIcon || !cmdText) return;
-        var tT;
-        function ping(m) {
-          if (!toast || !toastMsg) return;
-          toastMsg.textContent = m; toast.classList.add("show");
-          clearTimeout(tT); tT = setTimeout(function () { toast.classList.remove("show"); }, 1900);
-        }
-        copyIcon.addEventListener("click", function () {
-          var text = cmdText.textContent;
-          var done = navigator.clipboard
-            ? navigator.clipboard.writeText(text).then(function () { return true; }).catch(function () { return false; })
-            : Promise.resolve(false);
-          done.then(function (ok) {
-            if (ok) {
-              copyIcon.setAttribute("data-copied", "1");
-              setTimeout(function () { copyIcon.removeAttribute("data-copied"); }, 1600);
-              ping("Copied");
-            } else {
-              ping("Select the command above to copy");
-            }
-          });
-        });
-      })();
+    <script>
+      import { initMcpCopy } from "@/lib/dev/cockpit/mcpCopy";
+      initMcpCopy();
     </script>
 
-    <script nonce={cspNonce} is:inline>
-      // Info popover: toggle on the ⓘ button, dismiss on outside click.
-      (function () {
-        var info1 = document.getElementById("info1");
-        if (!info1) return;
-        var openBtn = info1.querySelector(".info-btn");
-        openBtn.addEventListener("click", function (e) { e.stopPropagation(); info1.classList.toggle("open"); });
-        document.addEventListener("click", function (e) { if (!info1.contains(e.target)) info1.classList.remove("open"); });
-      })();
+    <script>
+      import { initInfoPopover } from "@/lib/dev/cockpit/infoPopover";
+      initInfoPopover();
     </script>
 
-    <script nonce={cspNonce} is:inline>
-      // 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.
-      (function () {
-        var btn = document.getElementById("copyCmd");
-        var textEl = document.getElementById("cli-cmd-text");
-        var note = document.getElementById("cli-cmd-note");
-        var toast = document.getElementById("toast");
-        var toastMsg = document.getElementById("toastMsg");
-        var copyIcon = document.getElementById("copyIcon");
-        if (!btn || !textEl) return;
-        var generic = btn.getAttribute("data-generic") || "";
-        var 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 IIFE — 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.
-        var basePath = btn.getAttribute("data-base-path") || "";
-        var tT;
-        function ping(m) {
-          if (!toast) return;
-          toastMsg.textContent = m; toast.classList.add("show");
-          clearTimeout(tT); tT = setTimeout(function () { toast.classList.remove("show"); }, 1900);
-        }
-        function copy(text) {
-          if (navigator.clipboard) return navigator.clipboard.writeText(text).then(function () { return true; }).catch(function () { return false; });
-          return Promise.resolve(false);
-        }
-        function label(s) { 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.
-        var iconT;
-        function flashCopied() {
-          if (!copyIcon) return;
-          copyIcon.setAttribute("data-copied", "1");
-          copyIcon.setAttribute("aria-label", "Copied");
-          copyIcon.setAttribute("title", "Copied");
-          clearTimeout(iconT);
-          iconT = setTimeout(function () {
-            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", function () {
-            copy(textEl.textContent).then(function (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.
-        var rzvRoot = document.getElementById("rzvApprove");
-        var rzvWait = document.getElementById("rzvWait");
-        var rzvConfirm = document.getElementById("rzvConfirm");
-        var rzvFp = document.getElementById("rzvFp");
-        var rzvApproveBtn = document.getElementById("rzvApproveBtn");
-        var rzvDenyBtn = document.getElementById("rzvDenyBtn");
-        var rzvDone = document.getElementById("rzvDone");
-        var rzvTimer = null, rzvCode = null, rzvDecided = false;
-        function rzvShow(el) { if (el) el.hidden = false; }
-        function rzvHide(el) { 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) {
-          rzvStopPoll(); rzvDecided = true;
-          rzvHide(rzvWait); rzvHide(rzvConfirm);
-          if (rzvDone) { rzvDone.textContent = msg; rzvDone.hidden = false; }
-        }
-        async function rzvPoll() {
-          if (rzvDecided) return;
-          var r, b;
-          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(function () { return {}; });
-          } 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) {
-          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) {
-          if (rzvDecided) return;
-          var fp = rzvFp ? (rzvFp.getAttribute("data-fp") || "") : "";
-          if (rzvApproveBtn) rzvApproveBtn.disabled = true;
-          if (rzvDenyBtn) rzvDenyBtn.disabled = true;
-          var r;
-          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;
-          var 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", function () { rzvDecide("approve"); });
-        if (rzvDenyBtn) rzvDenyBtn.addEventListener("click", function () { rzvDecide("deny"); });
-
-        if (!fastpath) {
-          btn.addEventListener("click", function () {
-            copy(generic).then(function (ok) {
-              label(ok ? " Copied — paste & press Enter" : " Copy the command");
-              ping(ok ? "Copied the command" : "Select the command to copy");
-              setTimeout(function () { label(" Copy the command"); }, 2600);
-            });
-          });
-          return;
-        }
-
-        var busy = false;
-        btn.addEventListener("click", async function () {
-          if (busy) return;
-          busy = true;
-          label(" …"); btn.disabled = true;
-          var res, body;
-          try {
-            res = await fetch(basePath + "/api/dev/cli-signin-code", {
-              method: "POST",
-              headers: { "content-type": "application/json" },
-              body: "{}",
-            });
-            body = await res.json().catch(function () { return {}; });
-          } 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) {
-            var byStatus = {
-              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);
-          var 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(function () { label(" Copy the command"); }, 4000);
-          busy = false;
-        });
-      })();
+    <script>
+      import { initCopyCommand } from "@/lib/dev/cockpit/copyCommand";
+      initCopyCommand();
     </script>
 
-    {hostedActivity && <script nonce={cspNonce} is:inline set:html={hostedActivityScript} />}
-    {isLocalDevLoop && <script nonce={cspNonce} is:inline set:html={stepperScript} />}
-    {isLocalDevLoop && <script nonce={cspNonce} is:inline set:html={askScript} />}
-    {isLocalDevLoop && <script nonce={cspNonce} is:inline set:html={monitorScript} />}
-    {isLocalDevLoop && <script nonce={cspNonce} is:inline set:html={filesScript} />}
-    {isLocalDevLoop && <script nonce={cspNonce} is:inline set:html={c8Script} />}
+    {hostedActivity && (
+      <script>
+        import { initHostedActivity } from "@/lib/dev/cockpit/hostedActivity";
+        initHostedActivity();
+      </script>
+    )}
+    {isLocalDevLoop && (
+      <script>
+        import { initStepper } from "@/lib/dev/cockpit/stepper";
+        initStepper();
+      </script>
+    )}
+    {isLocalDevLoop && (
+      <script>
+        import { initAsk } from "@/lib/dev/cockpit/ask";
+        initAsk();
+      </script>
+    )}
+    {isLocalDevLoop && (
+      <script>
+        import { initMonitor } from "@/lib/dev/cockpit/monitor";
+        initMonitor();
+      </script>
+    )}
+    {isLocalDevLoop && (
+      <script>
+        import { initFiles } from "@/lib/dev/cockpit/files";
+        initFiles();
+      </script>
+    )}
+    {isLocalDevLoop && (
+      <script>
+        import { initClickToSource } from "@/lib/dev/cockpit/clickToSource";
+        initClickToSource();
+      </script>
+    )}
   </body>
 </html>