@tokenoftrust/storefront-runner 1.3.2 → 1.3.4-rc.1

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

@@ -0,0 +1,2365 @@
+---
+/**
+ * /cockpit — the developer's first-run shell (what a granted developer lands on after
+ * sign-in). Renamed from /dev 2026-07-20; middleware 302-redirects old /dev links here.
+ *
+ * Deliberately NOT the operator/reconcile control plane, and — post U1 (strip-to-shell) —
+ * deliberately NOT the old marketing home either. This is the guided-cockpit's Step 1: a
+ * single dominant action (copy the one command that gets your store running) plus the
+ * developer's own tenant identity and an ⓘ explainer. The staged flow, live Monitor,
+ * in-browser file tree/diff/editor, "Stuck? Ask", and the "coming soon" shelf land on top
+ * of this shell in later chunks (U2/U3/U4, C1+) — this file is the frame they mount into.
+ *
+ * Brand: a STANDALONE document (bypasses Layout.astro) that ports the canonical /dev cockpit
+ * mockup's visual system — the tokenoftrust tenant theme (navy ink #0A2540 + trust teal
+ * #0E9F8E on cool-white #F7F9FC), Plus Jakarta Sans / Inter / JetBrains Mono, rounded cards —
+ * now with full dark-mode (system + manual toggle) and reduced-motion support. Same CSP as
+ * every storefront response (googleapis/gstatic allowlisted, so the shared typefaces load);
+ * inline style/script carry this request's nonce.
+ *
+ * The one command honours the shipped browserless-signin fastpath: a developer who reached
+ * this page from their magic link already has a session here, so the Copy button mints a
+ * single-use `tot login --code … && tot start` command (via /api/dev/cli-signin-code) and
+ * copies the whole thing — no browser sign-in in the terminal. Everyone else copies the
+ * generic `npm i -g @tokenoftrust/cli && tot start`.
+ */
+import { readViewerSession } from "@/lib/auth/route";
+import { staticTenants } from "@/config/tenants";
+import { resolveDevApiBase } from "@/lib/dev/apiBase";
+import { normalizeEmailHint, redactEmailForHint } from "@/lib/privacy/emailHint";
+
+export const prerender = false;
+const cspNonce = Astro.locals.cspNonce;
+const url = new URL(Astro.request.url);
+const isCredentialRecovery = url.searchParams.get("recover") === "cli";
+const legacyRecoveryEmail = (url.searchParams.get("email") ?? "").trim();
+const recoveryEmailHint =
+  normalizeEmailHint(url.searchParams.get("email_hint")) ??
+  redactEmailForHint(legacyRecoveryEmail) ??
+  "";
+if (isCredentialRecovery && url.searchParams.has("email")) {
+  const canonical = new URLSearchParams(url.searchParams);
+  canonical.delete("email");
+  if (recoveryEmailHint) canonical.set("email_hint", recoveryEmailHint);
+  return Astro.redirect(
+    `/cockpit${canonical.toString() ? `?${canonical.toString()}` : ""}`,
+    302,
+  );
+}
+const cockpitNext = isCredentialRecovery ? "/cockpit?recover=cli" : "/cockpit";
+const loginParams = new URLSearchParams({ next: cockpitNext });
+if (recoveryEmailHint) loginParams.set("email_hint", recoveryEmailHint);
+const loginHref = `/auth/login?${loginParams.toString()}`;
+
+const session = await readViewerSession({ cookies: Astro.cookies });
+const signedIn = !!session;
+// The fastpath (browserless terminal sign-in) is gated behind the developer's own session +
+// capability — the same gate /api/dev/cli-signin-code enforces. Mirror it here so a
+// logged-out / no-capability visitor gets the generic command, never a broken mint.
+const hasStoreAccess = signedIn && !!session?.capability && session.capability !== "none";
+
+// Resolve the developer's tenant from their first membership (or ?tenant= for an
+// ANONYMOUS preview only — never override a signed-in developer's own tenant with
+// caller-supplied input; the mint/activity endpoints already derive tenant solely
+// from the session/token, but letting the query param win here still meant a
+// signed-in dev could be shown another vendor's branding + `tot checkout <theirs>`
+// instructions, which is confusing/spoofable chrome even though nothing privileged
+// leaked).
+const wanted = (
+  session
+    ? (session?.tenants?.[0]?.resource ?? session?.resource ?? "")
+    : (url.searchParams.get("tenant") ?? "")
+).toLowerCase();
+const tenant =
+  (wanted
+    ? staticTenants.find((t) =>
+        [t.appDomain, t.tenant_id, t.canonicalDomain, ...t.domains].some(
+          (d) => d?.toLowerCase() === wanted,
+        ),
+      )
+    : null) ??
+  staticTenants.find((t) => t.tenant_id === "tokenoftrust") ??
+  staticTenants[0];
+
+const appDomain = tenant?.appDomain ?? "tokenoftrust.com";
+// Signed in, but the account carries no developer capability on any store — an honest
+// recovery state (not a 401): show what to do, not the fastpath.
+const noStoreAccess = signedIn && !hasStoreAccess;
+// The generic command shown (and copied) when we can't mint a personalised one.
+// Pinned to the EXACT CLI version this build was cut alongside (`@tokenoftrust/cli@<version>`,
+// astro.config Vite define) so the paste installs precisely the CLI this cockpit expects —
+// never a floating dist-tag the terminal resolves. Used in the "prefer the steps" hint +
+// (env-derived) the minted fastpath command.
+const cliInstallSpec = __CLI_INSTALL_SPEC__;
+
+// isLocalDevLoop === "the STOREFRONT app itself is running under `astro dev`" (a
+// storefront engineer's local rig) — NOT the invited developer's dev loop (that's
+// `tot dev`, the runner, which excludes this page entirely). It gates ONLY the
+// local astro-dev cockpit — the Monitor/loopbar, in-browser Files editor, live
+// preview + click-to-source, and the local stepper — all of which read the
+// /__tot/* dev-plugins that exist ONLY under `astro dev`. import.meta.env.DEV is
+// statically replaced with false in the production Cloudflare Worker build, so all
+// of that is tree-shaken away there. Nothing that should reach a real developer on
+// the deployed panel may hang off this flag — hosted product surface is either
+// unconditional (see the "coming soon" shelf) or gated on `hostedActivity` below.
+const isLocalDevLoop = import.meta.env.DEV;
+
+// hostedActivity === the deployed hosted panel's activity-fed cockpit — the actual
+// product surface the invited developer sees. It renders on the Worker (never under
+// `astro dev`) for a signed-in developer with capability, and reflects what they're
+// doing in their LOCAL dev loop via the activity bridge (POST /api/dev/activity →
+// polled here). This is the "magic": the developer watches their own local rig work
+// on our hosted surface. It is NOT a port of the local-only Monitor/Files/preview
+// panels (those depend on /__tot/* endpoints that exist only under `astro dev`;
+// bringing those hosted is cp-tree/cp-file/cp-preview, tracked separately).
+const hostedActivity = !isLocalDevLoop && hasStoreAccess;
+
+// 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
+// /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);
+
+// 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 -> TEST channel (never live — see decision
+  // cp-publish-scope-correction). Confirm-before-publish per the card.
+  function doPublish() {
+    if (!cur || !cur.writable || !publishBtn) return;
+    if (!window.confirm("Publish your saved edit to the test channel? (Not your live site.)")) return;
+    var prevLabel = publishBtn.textContent;
+    publishBtn.disabled = true;
+    setStatus("Publishing\\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(res.j.applied ? "Published to test \\u2713" : "Published (not persisted \\u2014 no storage configured)", "ok"); return; }
+        if (res.s === 409 && res.j && res.j.status === "no_draft") { setStatus("No unpublished edit to publish.", "warn"); return; }
+        setStatus((res.j && res.j.message) || "Publish 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;
+
+  // ?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("/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 doneRunMeta = document.getElementById("doneRunMeta");
+  function updateBridge(rt) {
+    if (!bridge) return;
+    if (!rt || !rt.url) { bridge.hidden = true; return; }
+    var live = !!rt.live;
+    if (live) sawLive = true;
+    // 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("/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); // same poll drives the bridge strip
+        render(events);
+        var last = events.length ? events[events.length - 1] : null;
+        var latest = last ? last.at : 0;
+        var lastIsEdit = last && last.event !== "up"; // "up" = a server-running ping, not an edit
+        // 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(latest); // first poll primes the watermark — no edit inferred yet
+        } else if (latest > baseline) {
+          setBaseline(latest);
+          // Step 2 completes only on a real FILE edit landing (not a running ping).
+          // completeStep flips + persists once, returning true on that first poll only.
+          if (lastIsEdit && completeStep("edit")) {
+            celebrate(last && last.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
+})();
+`;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Get your store running — {appDomain}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+    />
+    <style nonce={cspNonce}>
+      :root {
+        --bg: #f7f9fc; --bg-2: #eef3f9; --surface: #ffffff;
+        --ink: #0a2540; --ink-2: #33415b; --muted: #55637a; --faint: #8593a8;
+        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
+        --border: #e3e8ef; --border-2: #eef2f7;
+        --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
+        --amber: #b7791f; --amber-wash: #fdf6e7; --amber-line: #f0dcae;
+
+        --term: #0a1a2f; --term-2: #071426; --term-fg: #dbe6f2; --term-dim: #5f7189;
+        --term-prompt: #2dd4bf; --term-ok: #34d399; --term-line: #14263f;
+
+        --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
+        --sh-sm: 0 1px 2px rgba(10,37,64,.06), 0 2px 6px -2px rgba(10,37,64,.08);
+        --sh-md: 0 8px 28px -10px rgba(10,37,64,.16);
+        --sh-lg: 0 28px 64px -26px rgba(10,37,64,.28);
+
+        /* Guided-flow motion tokens (Steps 1–3 choreography). One place to retune
+           the whole open/collapse/reveal feel — a future reskin changes the motion
+           here, not rule-by-rule. Theme-independent, so declared once. */
+        --flow-ease: cubic-bezier(.2, .9, .3, 1);
+        --flow-dur: .42s;
+        --flow-rise: 8px; /* how far a newly-revealed block settles in from */
+
+        --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
+        color-scheme: light;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --bg: #071320; --bg-2: #0a1a2b; --surface: #0e2134;
+          --ink: #eaf1f8; --ink-2: #bdccdc; --muted: #90a3b7; --faint: #6c8098;
+          --accent: #2fd4bf; --accent-ink: #7fe7da; --accent-wash: #0f2e30; --accent-line: #1e514b;
+          --border: #1b3348; --border-2: #16293c;
+          --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
+          --amber: #f0c56b; --amber-wash: #2a2110; --amber-line: #5a481f;
+          color-scheme: dark;
+        }
+      }
+      :root[data-theme="dark"] {
+        --bg: #071320; --bg-2: #0a1a2b; --surface: #0e2134;
+        --ink: #eaf1f8; --ink-2: #bdccdc; --muted: #90a3b7; --faint: #6c8098;
+        --accent: #2fd4bf; --accent-ink: #7fe7da; --accent-wash: #0f2e30; --accent-line: #1e514b;
+        --border: #1b3348; --border-2: #16293c;
+        --warn: #f2857f; --warn-wash: #2a1414; --warn-line: #5a2626;
+        --amber: #f0c56b; --amber-wash: #2a2110; --amber-line: #5a481f;
+        color-scheme: dark;
+      }
+      :root[data-theme="light"] {
+        --bg: #f7f9fc; --bg-2: #eef3f9; --surface: #ffffff;
+        --ink: #0a2540; --ink-2: #33415b; --muted: #55637a; --faint: #8593a8;
+        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
+        --border: #e3e8ef; --border-2: #eef2f7;
+        --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
+        --amber: #b7791f; --amber-wash: #fdf6e7; --amber-line: #f0dcae;
+        color-scheme: light;
+      }
+
+      * { box-sizing: border-box; }
+      html { -webkit-text-size-adjust: 100%; }
+      body {
+        margin: 0;
+        background:
+          radial-gradient(50rem 28rem at 100% -8%, var(--accent-wash) 0%, transparent 55%),
+          var(--bg);
+        background-repeat: no-repeat;
+        color: var(--ink-2); font-family: var(--body); font-size: 16px; line-height: 1.6;
+        letter-spacing: -.011em; -webkit-font-smoothing: antialiased;
+        padding: 0 1.25rem 6rem;
+      }
+      a { color: var(--accent-ink); }
+      a:focus-visible, button:focus-visible, summary:focus-visible {
+        outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
+      }
+      .wrap { max-width: 58rem; margin: 0 auto; }
+
+      /* ---- top bar (tenant identity) ---- */
+      .topbar {
+        display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
+        padding: 1.15rem 0 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.8rem;
+      }
+      .brand { display: flex; align-items: center; gap: .65rem; }
+      .brand .mark {
+        width: 30px; height: 30px; border-radius: 9px;
+        background: linear-gradient(150deg, var(--accent), var(--accent-ink));
+        display: grid; place-items: center; color: #fff; flex: none;
+        box-shadow: 0 3px 10px -3px rgba(14,159,142,.6);
+      }
+      .brand .mark svg { width: 17px; height: 17px; }
+      .brand .who { display: flex; flex-direction: column; line-height: 1.15; }
+      .brand .dom { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: .98rem; letter-spacing: -.01em; }
+      .brand .sub { font-family: var(--mono); font-size: .7rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
+      .topbar .right { display: flex; align-items: center; gap: .9rem; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
+      .topbar .right .sess { display: inline-flex; align-items: center; gap: .45rem; }
+      .topbar .right .sess::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
+      .themetog {
+        font-family: var(--mono); font-size: .72rem; background: var(--surface); color: var(--muted);
+        border: 1px solid var(--border); border-radius: var(--r-full); padding: .3rem .7rem; cursor: pointer;
+      }
+      .themetog:hover { color: var(--ink); border-color: var(--accent-line); }
+
+      /* ---- recovery notice (signed out / no store access) ---- */
+      .notice {
+        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
+        box-shadow: var(--sh-sm); padding: 1.15rem 1.4rem; margin: 0 0 1.6rem;
+        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.4rem;
+      }
+      .notice p { margin: 0; color: var(--ink-2); font-size: .95rem; }
+      .notice a.action {
+        flex: none; display: inline-flex; align-items: center; gap: .4rem; background: var(--accent);
+        color: #fff; text-decoration: none; font: 700 .92rem/1 var(--display); padding: .66rem 1.15rem;
+        border-radius: var(--r-full); transition: background .18s ease, transform .12s ease;
+      }
+      .notice a.action:hover { background: var(--accent-ink); transform: translateY(-1px); }
+
+      /* ---- hosted activity ledger (hosted-dev-activity-bridge) — reskinned to the
+             signal-rail "activity" look: a compact 3-col table (time | action | file)
+             with the newest row accented (.is-new). ---- */
+      .hosted-activity {
+        margin-top: .4rem; background: var(--surface); border: 1px solid var(--border);
+        border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 1rem 1.2rem .9rem; margin-bottom: 1.6rem;
+      }
+      .ha-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
+      .ha-head h2 { font-family: var(--display); font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0; }
+      .ha-sub { font-size: .78rem; color: var(--muted); }
+      .ha-sub code { font-family: var(--mono); }
+      /* Activity TABLE — three real columns (time | action | file) with row spacing,
+         so the fields are always visually separated and never run together. */
+      .ha-table { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; margin: 0; }
+      .ha-row > td {
+        padding: .55rem .8rem; background: var(--bg-2); font-size: .85rem; color: var(--ink-2);
+        vertical-align: baseline;
+      }
+      .ha-row > td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
+      .ha-row > td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
+      .ha-row.is-new > td { background: var(--accent-wash); }
+      td.ha-when { font-family: var(--mono); font-size: .74rem; color: var(--faint); width: 6.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
+      td.ha-desc { font-weight: 600; white-space: nowrap; width: 1%; padding-right: 1.1rem; }
+      td.ha-file { font-family: var(--mono); font-size: .74rem; color: var(--muted); max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .ha-toggle {
+        margin-top: .5rem; background: none; border: none; padding: .3rem .1rem; cursor: pointer;
+        font: 600 .8rem var(--body); color: var(--accent-ink); text-decoration: underline;
+      }
+      .ha-toggle:hover { color: var(--accent); }
+      /* Encouragement banner shown atop Step 2 when you arrive. */
+      .ha-encourage {
+        display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
+        padding: .7rem .9rem; border-radius: var(--r-md);
+        background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent-ink);
+        font-weight: 600; font-size: .92rem;
+      }
+      .ha-encourage .chk { flex: none; }
+      .ha-empty { margin: .2rem 0 .3rem; font-size: .84rem; color: var(--muted); }
+      .ha-empty code { font-family: var(--mono); }
+
+      /* ---- bridge strip (replaces the big live-dev-link card): the rail's power
+             source, slimmed to a strip. Fed by the SAME activity poll's runtime. ---- */
+      .bridge {
+        display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
+        border: 1px solid var(--accent-line); background: var(--surface);
+        border-radius: var(--r-lg); padding: .7rem 1rem; margin-bottom: 1.4rem;
+        box-shadow: var(--sh-sm);
+      }
+      .bridge[data-live="1"] { border-color: var(--accent); animation: bridgeGlow 2.6s ease-in-out infinite; }
+      @keyframes bridgeGlow {
+        0%, 100% { box-shadow: 0 0 0 1px var(--accent-line), 0 0 12px -4px rgba(14,159,142,.3); }
+        50% { box-shadow: 0 0 0 2px var(--accent), 0 0 22px -2px rgba(14,159,142,.45); }
+      }
+      .bridge[data-live="0"] { border-color: var(--amber-line); background: var(--amber-wash); }
+      .beacon { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--accent); }
+      .bridge[data-live="1"] .beacon { animation: beat 1.6s ease-in-out infinite; }
+      .bridge[data-live="0"] .beacon { background: var(--amber); }
+      .b-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+      .b-kicker { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: var(--accent-ink); }
+      .bridge[data-live="0"] .b-kicker { color: var(--amber); }
+      .b-url { font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--accent-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .b-url:hover { text-decoration: underline; }
+      .bridge[data-live="0"] .b-url { color: var(--muted); }
+      .b-diag { margin-left: auto; font-family: var(--mono); font-size: .68rem; color: var(--faint); white-space: nowrap; }
+      .b-go {
+        flex: none; display: inline-flex; align-items: center; gap: .35rem;
+        font: 700 .8rem/1 var(--display); background: var(--accent); color: #fff; text-decoration: none;
+        padding: .5rem .95rem; border-radius: var(--r-full); transition: background .12s, transform .12s;
+      }
+      .b-go:hover { background: var(--accent-ink); transform: translateY(-1px); }
+      .b-hint { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--amber); }
+      .b-hint code { font-family: var(--mono); }
+      @media (prefers-reduced-motion: reduce) { .bridge[data-live="1"], .beacon, .b-go { animation: none !important; transition: none; } }
+      @media (max-width: 34rem) { .b-diag { display: none; } }
+
+      /* ---- the signal rail: breadcrumb + done-bars merged into stations on one
+             spine. NO single .rail wrapper — each station is a top-level element and
+             carries its own liveness flow via data-attributes on its .seg. ---- */
+      .station { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 1rem; position: relative; }
+      .station .nodecol { display: flex; flex-direction: column; align-items: center; }
+      .node {
+        width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; z-index: 1;
+        display: grid; place-items: center; position: relative;
+        font-family: var(--mono); font-weight: 600; font-size: .85rem;
+        background: var(--surface); border: 1.5px solid var(--border); color: var(--faint);
+        transition: background .3s, border-color .3s, color .3s;
+      }
+      .node svg { width: 15px; height: 15px; display: none; }
+      .station[data-st="done"] .node { background: var(--accent); border-color: var(--accent); color: #fff; }
+      .station[data-st="done"] .node svg { display: block; }
+      .station[data-st="done"] .node .num { display: none; }
+      .station[data-st="open"] .node { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-wash); }
+      .station[data-st="next"] .node { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-wash); animation: nodeBreathe 1.8s ease-in-out infinite; }
+      @keyframes nodeBreathe {
+        0%, 100% { box-shadow: 0 0 0 3px var(--accent-wash); }
+        50% { box-shadow: 0 0 0 8px var(--accent-wash); }
+      }
+      .station[data-st="locked"] .node { opacity: .55; }
+      /* the segment of rail below each node — liveness flows down each lit segment */
+      .seg { flex: 1; width: 2px; min-height: 1.2rem; background: var(--border); margin: 4px 0; border-radius: 1px; }
+      #st-next .seg { visibility: hidden; } /* last station: no line below */
+      .seg[data-lit="1"] { background: var(--accent-line); }
+      .seg[data-lit="1"][data-flow="1"] {
+        background: repeating-linear-gradient(180deg, var(--accent) 0 5px, var(--accent-line) 5px 11px);
+        animation: flow 1.1s linear infinite;
+      }
+      @keyframes flow { to { background-position: 0 11px; } }
+      .seg[data-lit="1"][data-flow="0"] {
+        background: repeating-linear-gradient(180deg, var(--faint) 0 4px, transparent 4px 10px);
+        opacity: .5;
+      }
+      .s-body { padding-bottom: 1.5rem; min-width: 0; }
+
+      /* spark burst on celebration — radiates from the node itself */
+      .spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 2px; pointer-events: none; opacity: 0; }
+      .station.celebrating .spark { animation: sparkOut .9s ease-out forwards; }
+      @keyframes sparkOut {
+        0% { opacity: 1; transform: translate(-50%, -50%); }
+        100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 34px), calc(-50% + var(--dy) * 34px)) rotate(140deg); }
+      }
+      .station.celebrating .node { animation: stamp .5s cubic-bezier(.2,.9,.3,1.4); }
+      @keyframes stamp { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
+
+      /* collapsed done row — lives IN sequence on the rail (replaces the done-bars) */
+      .s-done {
+        display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left;
+        background: none; border: none; border-radius: var(--r-sm); padding: .35rem .4rem .35rem 0; cursor: pointer;
+        font-family: var(--body);
+      }
+      .s-done .lab { font-family: var(--display); font-weight: 600; color: var(--ink-2); font-size: .92rem; }
+      .s-done .meta { font-family: var(--mono); font-size: .74rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .s-done .reopen { margin-left: auto; flex: none; font-family: var(--mono); font-size: .7rem; color: var(--accent-ink); opacity: 0; transition: opacity .12s; }
+      .s-done:hover .reopen, .s-done:focus-visible .reopen { opacity: 1; }
+      .s-done:hover .lab { color: var(--ink); }
+
+      /* locked label */
+      .s-locked { padding: .38rem 0; font-family: var(--display); font-weight: 600; font-size: .92rem; color: var(--faint); }
+      .s-locked .sub { display: block; font: 400 .76rem/1.4 var(--body); color: var(--faint); }
+
+      /* next-up teaser — sits at its own station on the rail */
+      .s-tease {
+        background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-lg);
+        padding: 1rem 1.15rem; box-shadow: var(--sh-sm); animation: flowRise var(--flow-dur) var(--flow-ease);
+      }
+      .t-kick { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; color: var(--accent-ink); }
+      .s-tease h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: .3rem 0 .25rem; letter-spacing: -.02em; }
+      .s-tease p { font-size: .88rem; color: var(--ink-2); margin: 0 0 .9rem; max-width: 46ch; }
+      .s-tease p code { font-family: var(--mono); font-size: .86em; background: var(--bg-2); border-radius: var(--r-sm); padding: .06rem .3rem; color: var(--ink); }
+      .t-cta {
+        display: inline-flex; align-items: center; gap: .5rem;
+        font: 700 .88rem/1 var(--display); background: var(--accent); color: #fff; border: none;
+        padding: .66rem 1.15rem; border-radius: var(--r-full); cursor: pointer;
+        box-shadow: 0 8px 22px -10px rgba(14,159,142,.8); transition: background .12s, transform .12s;
+        animation: ctaPulse 1.8s ease-in-out infinite;
+      }
+      .t-cta:hover { background: var(--accent-ink); transform: translateY(-1px); }
+
+      /* the Step-1 "went quiet" note, ported from the mockup (sits above the re-inflated Step 1) */
+      .quiet-note { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--amber-wash); border: 1px solid var(--amber-line); color: var(--amber); font-size: .86rem; }
+      .quiet-note code { font-family: var(--mono); }
+
+      @media (prefers-reduced-motion: reduce) {
+        .station[data-st="next"] .node, .seg[data-lit="1"][data-flow="1"],
+        .t-cta, .s-tease, .station.celebrating .node, .station.celebrating .spark { animation: none !important; }
+      }
+
+      /* ---- Step 2 "lay it beside your editor" tip ---- */
+      .tip-lay { margin: 1rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
+
+      /* ---- Guided accordion: a step body animates IN when opened (collapse is instant
+             + synchronous so the flow can't get stuck). Shared with isLocalDevLoop —
+             left on its original timing so that variant is untouched. ---- */
+      .stage.expanding { animation: stageExpand .42s ease; }
+      @keyframes stageExpand {
+        from { opacity: 0; transform: translateY(-8px); }
+        to { opacity: 1; transform: none; }
+      }
+
+      /* Hosted guided-flow reveal (flowRise): the activity ledger settles into place
+         with the same motion a step body uses to open — so moving between Steps 1–3
+         reads as a single, deliberate transition. Scoped to the hosted id, so the
+         shared isLocalDevLoop variant is left untouched. */
+      #hostedActivity {
+        animation: flowRise var(--flow-dur) var(--flow-ease);
+      }
+      @keyframes flowRise {
+        from { opacity: 0; transform: translateY(calc(var(--flow-rise) * -1)); }
+        to { opacity: 1; transform: none; }
+      }
+
+      /* CTA pulse — used by the rail teaser CTAs (.t-cta). */
+      @keyframes ctaPulse {
+        0%, 100% { box-shadow: 0 0 0 0 rgba(14,159,142,.5); }
+        50% { box-shadow: 0 0 0 8px rgba(14,159,142,0); }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .stage.expanding, #hostedActivity { animation: none; }
+      }
+
+      /* ---- "coming soon" dialog (Step 3 "Submit for preview") ---- */
+      .cs-dialog {
+        border: 1px solid var(--border); border-radius: var(--r-xl); padding: 0;
+        max-width: 30rem; width: calc(100% - 2rem);
+        background: var(--surface); color: var(--ink);
+        box-shadow: var(--sh-lg, 0 24px 60px -20px rgba(10,37,64,.5));
+      }
+      .cs-dialog::backdrop { background: rgba(10,37,64,.42); }
+      .cs-body { padding: 1.8rem 1.7rem; text-align: center; }
+      .cs-emoji { font-size: 2rem; display: block; margin-bottom: .5rem; }
+      .cs-body h2 { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ink); }
+      .cs-body p { font-size: .92rem; color: var(--muted); line-height: 1.55; margin: 0 0 1.3rem; }
+
+      /* ---- Make an Edit (G2 — experimental, collapsed in-browser editor) ---- */
+      .exp-badge {
+        align-self: center; font-family: var(--mono); font-size: .6rem; font-weight: 500;
+        text-transform: uppercase; letter-spacing: .12em; color: var(--amber);
+        background: var(--amber-wash); border: 1px solid var(--amber-line);
+        border-radius: var(--r-full); padding: .18rem .55rem;
+      }
+      .reveal-btn {
+        margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .5rem;
+        font: 700 .9rem/1 var(--display); background: var(--accent); color: #fff; border: none;
+        padding: .72rem 1.25rem; border-radius: var(--r-full); cursor: pointer;
+        box-shadow: 0 8px 22px -10px rgba(14,159,142,.8); transition: background .12s, transform .12s;
+      }
+      .reveal-btn:hover { background: var(--accent-ink); transform: translateY(-1px); }
+      .reveal-btn svg { width: 15px; height: 15px; }
+      @media (prefers-reduced-motion: reduce) { .reveal-btn:hover { transform: none; } }
+
+      /* ---- stage card ---- */
+      .stage {
+        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
+        box-shadow: var(--sh-md); overflow: hidden; position: relative;
+      }
+      .stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-line)); }
+      .stage-body { padding: 1.6rem 1.6rem 1.7rem; }
+      @media (max-width: 34rem) { .stage-body { padding: 1.2rem 1.1rem 1.3rem; } }
+      .kicker {
+        font-family: var(--mono); font-size: .72rem; font-weight: 500; text-transform: uppercase;
+        letter-spacing: .15em; color: var(--accent-ink); display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
+      }
+      .stage h1 {
+        font-family: var(--display); font-weight: 800; color: var(--ink); letter-spacing: -.03em;
+        font-size: clamp(1.5rem, 3.4vw, 1.95rem); margin: 0; text-wrap: balance;
+        display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
+      }
+      .stage .goal { margin: .55rem 0 1.3rem; color: var(--muted); max-width: 48ch; }
+
+      /* info icon + popover */
+      .info { position: relative; display: inline-flex; }
+      .info-btn {
+        width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid var(--border);
+        background: var(--surface); color: var(--muted); font-family: var(--display); font-weight: 700;
+        font-size: .82rem; cursor: pointer; display: grid; place-items: center; line-height: 1;
+      }
+      .info-btn:hover { border-color: var(--accent-line); color: var(--accent-ink); }
+      .info-pop {
+        position: absolute; top: calc(100% + .5rem); left: 0; width: min(21rem, 78vw); z-index: 30;
+        background: var(--ink); color: #e7eef6; font-size: .82rem; line-height: 1.55;
+        border-radius: var(--r-md); padding: .85rem 1rem; box-shadow: var(--sh-lg);
+        opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s, visibility .16s;
+      }
+      .info-pop code { font-family: var(--mono); font-size: .78rem; color: var(--term-prompt); }
+      .info.open .info-pop { opacity: 1; visibility: visible; transform: translateY(0); }
+      @media (prefers-color-scheme: dark) { .info-pop { background: #04101c; } }
+      :root[data-theme="dark"] .info-pop { background: #04101c; }
+      :root[data-theme="light"] .info-pop { background: var(--ink); }
+
+      /* ---- terminal ---- */
+      .term {
+        background: linear-gradient(180deg, var(--term) 0%, var(--term-2) 100%);
+        border: 1px solid var(--term-line); border-radius: var(--r-lg); box-shadow: var(--sh-md);
+        overflow: hidden; font-family: var(--mono); font-size: .82rem; line-height: 1.7;
+      }
+      .term-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-bottom: 1px solid var(--term-line); background: rgba(255,255,255,.02); }
+      .term-bar .dots { display: flex; gap: .4rem; }
+      .term-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
+      .dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }
+      .term-bar .ttl { margin-left: .4rem; font-size: .72rem; color: var(--term-dim); }
+      .term-body { padding: 1rem 1.05rem 1.1rem; color: var(--term-fg); white-space: pre-wrap; word-break: break-word; }
+      /* block, not inline — Astro trims the whitespace text node between the spans, so the
+         line break must be structural or the comment + command collapse onto one line. */
+      .term-body .c { display: block; color: var(--term-dim); }
+      .term-body .cmd { display: block; color: #fff; }
+
+      .cta {
+        display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
+        font-family: var(--display); font-weight: 700; font-size: .95rem; background: var(--accent); color: #fff;
+        border: none; padding: .82rem 1.3rem; border-radius: var(--r-full); cursor: pointer;
+        box-shadow: 0 8px 22px -10px rgba(14,159,142,.8); transition: transform .12s, background .12s; width: 100%;
+      }
+      .cta:hover { transform: translateY(-1px); background: var(--accent-ink); }
+      .cta:disabled { opacity: .7; cursor: default; transform: none; }
+      .cta svg { width: 16px; height: 16px; }
+      .cmd-actions { margin-top: .85rem; }
+      .cmd-note { margin: .8rem 0 0; font: 500 .8rem/1.5 var(--mono); color: var(--muted); }
+      .cmd-note em { color: var(--ink-2); font-style: normal; font-weight: 600; }
+      .cmd-steps { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
+      .cmd-steps code { font-family: var(--mono); font-size: .86em; background: var(--bg-2); border-radius: var(--r-sm); padding: .08rem .34rem; color: var(--ink); }
+      .cmd-steps a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
+
+      /* ---- live loop status bar (the Monitor — C1) ---- */
+      .loopbar {
+        margin-top: 1.4rem; background: var(--surface); border: 1px solid var(--border);
+        border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden;
+        max-height: 0; opacity: 0; transition: max-height .4s ease, opacity .3s ease, margin .3s;
+      }
+      .loopbar.live { max-height: 40rem; opacity: 1; }
+      .lb-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; cursor: pointer; }
+      .lb-head .pill {
+        display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .74rem;
+        padding: .32rem .7rem; border-radius: var(--r-full); border: 1px solid var(--accent-line);
+        background: var(--accent-wash); color: var(--accent-ink); white-space: nowrap;
+      }
+      .lb-head .pill .beat { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+      .loopbar[data-state="running"] .pill .beat { animation: beat 1.6s ease-in-out infinite; }
+      .loopbar[data-state="reloading"] .pill .beat { animation: beat .5s ease-in-out infinite; }
+      .loopbar[data-state="stale"] .pill { border-color: var(--amber-line); background: var(--amber-wash); color: var(--amber); }
+      .loopbar[data-state="stale"] .pill .beat { background: var(--amber); }
+      @keyframes beat { 0%,100% { box-shadow: 0 0 0 0 rgba(14,159,142,.5); } 50% { box-shadow: 0 0 0 5px rgba(14,159,142,0); } }
+      .lb-head .lu { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
+      .lb-head .lu b { color: var(--ink); font-weight: 500; }
+      .lb-head .chev { margin-left: auto; color: var(--faint); transition: transform .18s; }
+      .loopbar.open .lb-head .chev { transform: rotate(90deg); }
+      .lb-detail { display: none; padding: 0 1.1rem; }
+      .loopbar.open .lb-detail { display: block; padding-bottom: .9rem; }
+      .lb-row { display: grid; grid-template-columns: 1rem 8rem 1fr; gap: .6rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--border-2); }
+      .lb-row .ic { color: var(--accent); font-size: .78rem; }
+      .lb-row .k { font-size: .8rem; color: var(--muted); }
+      .lb-row .v { font-family: var(--mono); font-size: .8rem; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-all; }
+      .lb-row .v.dim { color: var(--faint); }
+      @media (prefers-reduced-motion: reduce) { .loopbar .pill .beat { animation: none !important; } }
+
+      /* ---- stepper (U2) ---- */
+      .stepper { display: flex; align-items: stretch; gap: 0; margin-bottom: 2rem; }
+      .snode {
+        flex: 1; display: flex; align-items: center; gap: .6rem; background: none; border: none;
+        font-family: var(--body); text-align: left; cursor: default; padding: .2rem 0; position: relative; color: var(--faint);
+      }
+      .snode .dot {
+        width: 2rem; height: 2rem; border-radius: 50%; flex: none; display: grid; place-items: center;
+        font-family: var(--mono); font-weight: 600; font-size: .85rem;
+        background: var(--surface); border: 1.5px solid var(--border); color: var(--faint);
+        transition: background .25s ease, border-color .25s ease, color .25s ease;
+      }
+      .snode .lab { display: flex; flex-direction: column; line-height: 1.2; }
+      .snode .lab .t { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--muted); transition: color .25s; }
+      .snode .lab .s { font-size: .72rem; color: var(--faint); }
+      .snode .line { position: absolute; top: 1rem; left: 2.6rem; right: .4rem; height: 1.5px; background: var(--border); z-index: -1; }
+      .snode:last-child .line { display: none; }
+      .snode[data-st="active"] .dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-wash); }
+      .snode[data-st="active"] .lab .t { color: var(--ink); }
+      .snode[data-st="done"] { cursor: pointer; }
+      .snode[data-st="done"] .dot { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-ink); }
+      .snode[data-st="done"] .line { background: var(--accent-line); }
+      .snode[data-st="done"] .lab .t { color: var(--ink-2); }
+      .snode[data-st="done"]:hover .dot { border-color: var(--accent); }
+      .snode[data-st="locked"] { opacity: .65; }
+
+      /* ---- collapsed step bar (U2) ---- */
+      .done-bar {
+        display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
+        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
+        padding: .8rem 1rem; margin-bottom: 1rem; cursor: pointer; font-family: var(--body);
+        transition: border-color .12s;
+      }
+      .done-bar:hover { border-color: var(--accent-line); }
+      .done-bar .chk { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent-ink); display: grid; place-items: center; font-size: .8rem; flex: none; }
+      .done-bar .lab { font-family: var(--display); font-weight: 600; color: var(--ink-2); font-size: .9rem; }
+      .done-bar .meta { font-family: var(--mono); font-size: .75rem; color: var(--faint); }
+      .done-bar .reopen { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--accent-ink); }
+
+      /* ---- waiting / detect panel (U2) ---- */
+      .detect {
+        margin-top: 1.1rem; border: 1px dashed var(--border); border-radius: var(--r-md);
+        padding: .95rem 1.05rem; display: flex; align-items: center; gap: .8rem; background: var(--bg-2);
+      }
+      .detect .radar { width: 12px; height: 12px; border-radius: 50%; background: var(--faint); flex: none; position: relative; }
+      .detect .radar::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--faint); opacity: 0; }
+      .detect[data-listening="true"] .radar { background: var(--accent); }
+      .detect[data-listening="true"] .radar::after { border-color: var(--accent); animation: ping 1.6s ease-out infinite; }
+      @keyframes ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
+      .detect .txt { font-size: .86rem; color: var(--muted); flex: 1; }
+      .detect .txt b { color: var(--ink-2); font-weight: 600; }
+
+      /* ---- celebrate banner (U2) ---- */
+      .celebrate {
+        display: flex; align-items: center; gap: .7rem; background: var(--accent-wash);
+        border: 1px solid var(--accent-line); color: var(--accent-ink); border-radius: var(--r-md);
+        padding: .8rem 1rem; margin-bottom: 1.2rem; font-weight: 500; font-size: .92rem;
+      }
+      .celebrate .chk {
+        width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: #fff; flex: none;
+        display: grid; place-items: center; font-size: .85rem;
+      }
+      .pop-in { animation: popin .4s cubic-bezier(.2,.9,.3,1.3); }
+      @keyframes popin { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+
+      /* ---- stage nav buttons (U2) ---- */
+      .btnrow { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; align-items: center; }
+      .btn {
+        font-family: var(--display); font-weight: 600; font-size: .85rem; background: var(--surface); color: var(--ink-2);
+        cursor: pointer; border: 1px solid var(--border); border-radius: var(--r-full); padding: .6rem 1rem;
+        display: inline-flex; align-items: center; gap: .45rem; transition: border-color .12s, color .12s, background .12s;
+      }
+      .btn:hover { border-color: var(--accent-line); color: var(--ink); }
+      .btn.ghost { background: transparent; }
+      .btn:disabled { opacity: .5; cursor: not-allowed; }
+      .btn svg { width: 15px; height: 15px; }
+      .navspace { margin-left: auto; }
+
+      /* ---- future / roadmap note (U2) ---- */
+      .future {
+        margin-top: 1.2rem; border: 1px dashed var(--accent-line); background: var(--accent-wash);
+        border-radius: var(--r-md); padding: .85rem 1rem; font-size: .84rem; color: var(--accent-ink);
+        display: flex; gap: .6rem; align-items: flex-start;
+      }
+      .future b { font-weight: 700; }
+      .future .tag { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: .1rem .45rem; flex: none; }
+
+      /* C8 · live-preview iframe — click an element here to jump to its source */
+      .preview-embed { margin-top: 1.1rem; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
+      .pe-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-bottom: 1px solid var(--border-2); background: var(--bg-2); }
+      .pe-bar .dots { display: flex; gap: .35rem; }
+      .pe-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
+      .pe-url { flex: 1; font-family: var(--mono); font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .pe-expand { font-family: var(--display); font-weight: 600; font-size: .74rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: .3rem .7rem; cursor: pointer; }
+      .pe-expand:hover { border-color: var(--accent-line); color: var(--ink); }
+      .pe-frame { width: 100%; height: 320px; border: 0; background: #fff; display: block; }
+      .pe-hint { padding: .5rem .8rem; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border-2); background: var(--bg-2); }
+      .pe-hint b { color: var(--ink-2); font-weight: 600; }
+      dialog.pe-dialog { width: min(94vw, 1200px); height: min(90vh, 820px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); background: var(--surface); }
+      dialog.pe-dialog[open] { display: flex; flex-direction: column; }
+      dialog.pe-dialog::backdrop { background: rgba(10, 37, 64, .55); }
+      .ped-frame { flex: 1; width: 100%; border: 0; background: #fff; }
+
+      /* C3 · Files tab — in-browser file tree + read-only viewer */
+      .devfiles { margin-top: 1.1rem; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
+      .df-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .55rem .85rem; border-bottom: 1px solid var(--border-2); background: var(--bg-2); }
+      .df-title { font-weight: 700; font-size: .82rem; color: var(--ink); }
+      .df-path { font-family: var(--mono); font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .df-body { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; min-height: 260px; max-height: 420px; }
+      .df-tree { overflow: auto; border-right: 1px solid var(--border-2); padding: .35rem 0; font-size: .8rem; }
+      .df-main { display: flex; flex-direction: column; min-width: 0; background: var(--term); }
+      .df-editbar { flex: none; display: flex; gap: .7rem; align-items: center; min-height: 30px; padding: .35rem .8rem; border-bottom: 1px solid var(--term-line); background: var(--term-2); font-size: .72rem; color: var(--term-dim); }
+      .df-status { font-family: var(--mono); }
+      .df-status.ok { color: var(--term-ok); }
+      .df-status.warn { color: #f6b0b0; }
+      .df-conflict { display: inline-flex; gap: .4rem; align-items: center; color: #f6b0b0; }
+      .df-mini { font-family: var(--mono); font-size: .7rem; padding: .1rem .45rem; border-radius: var(--r-sm); border: 1px solid var(--term-line); background: transparent; color: var(--term-fg); cursor: pointer; }
+      .df-mini:hover { background: var(--term-line); }
+      .df-view { flex: 1 1 auto; width: 100%; box-sizing: border-box; display: block; margin: 0; border: 0; resize: none; outline: none; overflow: auto; padding: .75rem .9rem; font-family: var(--mono); font-size: .76rem; line-height: 1.55; color: var(--term-fg); background: var(--term); white-space: pre; tab-size: 2; }
+      .df-view[readonly] { opacity: .9; }
+      .df-diffbtn { margin-left: auto; }
+      .df-diff { flex: 1 1 auto; margin: 0; overflow: auto; padding: .5rem 0; font-family: var(--mono); font-size: .76rem; line-height: 1.5; background: var(--term); color: var(--term-fg); }
+      .df-diff .dl { display: block; padding: 0 .9rem; white-space: pre; }
+      .df-diff .add { background: rgba(52, 211, 153, .16); color: #bff2e0; }
+      .df-diff .del { background: rgba(246, 176, 176, .15); color: #f6c2c2; }
+      .df-diff .ctx { color: var(--term-dim); }
+      .ft-root, .ft-children { list-style: none; margin: 0; padding: 0; }
+      .ft-row { display: flex; align-items: center; gap: .4rem; padding: .18rem .5rem .18rem 0; cursor: default; border-radius: var(--r-sm); }
+      .ft-file .ft-row { cursor: pointer; }
+      .ft-file .ft-row:hover { background: var(--accent-wash); }
+      .ft-row.sel { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
+      .ft-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+      .ft-ic { font-size: .78rem; flex: none; opacity: .8; }
+      .ft-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .future-note { margin-top: .8rem; font-size: .8rem; color: var(--muted); display: flex; gap: .5rem; align-items: baseline; }
+      .future-note .tag { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: .1rem .45rem; flex: none; color: var(--accent-ink); }
+      @media (max-width: 560px) { .df-body { grid-template-columns: 1fr; } .df-view { max-height: 220px; } }
+      @media (prefers-reduced-motion: reduce) {
+        .detect[data-listening="true"] .radar::after, .pop-in { animation: none !important; }
+      }
+
+      /* ---- Ask (quiet loop-recovery help, U3) ---- */
+      .ask-fab {
+        position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 50;
+        display: inline-flex; align-items: center; gap: .5rem;
+        background: var(--surface); color: var(--ink-2); border: 1px solid var(--border);
+        border-radius: var(--r-full); padding: .6rem .95rem; cursor: pointer; box-shadow: var(--sh-md);
+        font-family: var(--body); font-size: .85rem; transition: border-color .12s, color .12s;
+      }
+      .ask-fab:hover { border-color: var(--accent-line); color: var(--ink); }
+      .ask-fab .u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
+      .ask-fab svg { width: 16px; height: 16px; color: var(--accent); }
+      .ask-panel {
+        position: fixed; right: 1.4rem; bottom: 4.6rem; z-index: 51; width: min(23rem, 90vw);
+        background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
+        box-shadow: var(--sh-lg); overflow: hidden; transform-origin: bottom right;
+        opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transition: opacity .16s, transform .16s, visibility .16s;
+      }
+      .ask-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
+      .ask-head { padding: .95rem 1.1rem; border-bottom: 1px solid var(--border-2); }
+      .ask-head strong { font-family: var(--display); color: var(--ink); font-size: .98rem; display: block; }
+      .ask-head span { font-size: .8rem; color: var(--muted); }
+      .qa { padding: .3rem .5rem .6rem; max-height: 60vh; overflow-y: auto; }
+      .qa details { border-bottom: 1px solid var(--border-2); }
+      .qa details:last-child { border-bottom: none; }
+      .qa summary { list-style: none; cursor: pointer; padding: .7rem .6rem; display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--ink); }
+      .qa summary::-webkit-details-marker { display: none; }
+      .qa summary .q { font-family: var(--mono); color: var(--accent); font-size: .78rem; flex: none; }
+      .qa summary .chev { margin-left: auto; color: var(--faint); transition: transform .18s; }
+      .qa details[open] summary .chev { transform: rotate(90deg); }
+      .qa .ans { padding: 0 .6rem .85rem 1.9rem; color: var(--muted); font-size: .84rem; }
+      .qa .ans code { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); background: var(--bg-2); padding: .05em .4em; border-radius: 5px; }
+      .qa .ans b { color: var(--ink-2); font-weight: 600; }
+      .ask-foot { padding: .7rem 1.1rem; border-top: 1px solid var(--border-2); font-family: var(--mono); font-size: .68rem; color: var(--faint); }
+      @media (prefers-reduced-motion: reduce) { .ask-panel { transition: none; } }
+
+      /* ---- what's next : coming soon shelf (U4) ---- */
+      .next { margin-top: 3.4rem; padding-top: 2rem; border-top: 1px dashed var(--border); }
+      .next h3 { font-family: var(--display); font-weight: 700; color: var(--ink-2); font-size: 1.1rem; margin: 0 0 .3rem; letter-spacing: -.02em; }
+      .next .sub { margin: 0 0 1.2rem; font-size: .88rem; color: var(--muted); max-width: 52ch; }
+      .nextgrid { display: grid; gap: .7rem; }
+      @media (min-width: 40rem) { .nextgrid { grid-template-columns: 1fr 1fr; } }
+      @media (min-width: 60rem) { .nextgrid { grid-template-columns: repeat(4, 1fr); } }
+      .nextcard {
+        display: flex; flex-direction: column; gap: .3rem; background: transparent;
+        border: 1px solid var(--border); border-radius: var(--r-md); padding: .9rem 1rem; opacity: .78;
+      }
+      .nextcard .path { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
+      .nextcard .d { font-size: .8rem; color: var(--faint); }
+      .nextcard .soon { align-self: flex-start; margin-top: .3rem; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); border: 1px solid var(--border); border-radius: var(--r-full); padding: .1rem .5rem; }
+
+      /* ---- footer ---- */
+      .foot {
+        margin-top: 2.8rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
+        display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center;
+        font-family: var(--mono); font-size: .78rem; color: var(--muted);
+      }
+      .foot .sp { margin-left: auto; }
+      .foot a { color: var(--muted); text-decoration: none; }
+      .foot a:hover { color: var(--accent-ink); }
+
+      /* ---- toast ---- */
+      .toast {
+        position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%) translateY(160%);
+        /* Terminal palette (dark bg + light fg in BOTH themes) — a plain var(--ink)
+           background went white-on-white in dark mode. */
+        background: var(--term); color: var(--term-fg); border: 1px solid var(--term-line);
+        font-family: var(--mono); font-size: .8rem;
+        padding: .7rem 1.1rem; border-radius: var(--r-full); box-shadow: var(--sh-lg);
+        transition: transform .28s cubic-bezier(.2,.9,.3,1.2); z-index: 60; pointer-events: none;
+        display: inline-flex; align-items: center; gap: .5rem;
+      }
+      .toast.show { transform: translateX(-50%) translateY(0); }
+      .toast .ok { color: var(--term-ok); }
+      @media (prefers-reduced-motion: reduce) {
+        .cta, .toast, .notice a.action, .info-pop { transition: none; }
+      }
+      [hidden] { display: none !important; }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <header class="topbar">
+        <div class="brand">
+          <span class="mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none"><path d="M12 2.5 20 6v6c0 4.6-3.2 7.9-8 9.5-4.8-1.6-8-4.9-8-9.5V6l8-3.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m8.5 12 2.4 2.4L15.8 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </span>
+          <span class="who"><span class="dom">{appDomain}</span><span class="sub">Developer</span></span>
+        </div>
+        <div class="right">
+          {session?.email ? <span class="sess">{session.email}</span> : null}
+          <button class="themetog" id="themeBtn" type="button">◐ Theme</button>
+        </div>
+      </header>
+
+      {signedIn === false && (
+        <div class="notice">
+          <p>{isCredentialRecovery
+            ? recoveryEmailHint
+              ? <>Sign in with the invite email hinted as <strong>{recoveryEmailHint}</strong> to generate a fresh setup command for this machine.</>
+              : <>Sign in with the same email that accepted the invite to generate a fresh setup command for this machine.</>
+            : <>Sign in with the email your invite came to — then this page shows your store and your one command.</>}</p>
+          <a class="action" href={loginHref}>Sign in</a>
+        </div>
+      )}
+
+      {noStoreAccess && (
+        <div class="notice">
+          <p>You're signed in{session?.email ? <>{" "}as <strong>{session.email}</strong></> : null}, but this account isn't linked to a store yet. Ask whoever sent your invite to grant developer access — then reload this page.</p>
+          <a class="action" href="/auth/logout">Switch account</a>
+        </div>
+      )}
+
+      {/* Bridge strip (replaces the big live-dev-link card) — the rail's power source,
+          fed by the activity poll's `runtime`. Hidden until the store has been seen
+          live this page-view (sawLive); localhost is the developer's OWN machine, so
+          clicking is a plain navigation. Pulses teal while live; turns amber with a
+          recovery hint when the loop goes quiet (data-live="0"). */}
+      {hostedActivity && (
+        <section class="bridge" id="bridge" data-live="1" hidden>
+          <span class="beacon" aria-hidden="true"></span>
+          <div class="b-txt">
+            <span class="b-kicker" id="bKicker">Live on your machine</span>
+            <a class="b-url" id="bUrl" href="#" target="_blank" rel="noreferrer">http://localhost/</a>
+          </div>
+          <span class="b-diag" id="bDiag" hidden></span>
+          <a class="b-go" id="bGo" href="#" target="_blank" rel="noreferrer">Open your store ↗</a>
+          <p class="b-hint" id="bHint" hidden>Your store went quiet. Run <code>tot start</code> in your project to bring it back — Step 1 has the command.</p>
+        </section>
+      )}
+
+      {isLocalDevLoop && (
+        <nav class="stepper" id="stepper" aria-label="Setup progress">
+          <button class="snode" type="button" data-go="run" data-st="active">
+            <span class="dot">1</span><span class="lab"><span class="t">Get running</span><span class="s">on your machine</span></span><span class="line"></span>
+          </button>
+          <button class="snode" type="button" data-go="edit" data-st="locked">
+            <span class="dot">2</span><span class="lab"><span class="t">Make an edit</span><span class="s">see it reload</span></span><span class="line"></span>
+          </button>
+          <button class="snode" type="button" data-go="next" data-st="locked">
+            <span class="dot">3</span><span class="lab"><span class="t">What's next</span><span class="s">coming soon</span></span>
+          </button>
+        </nav>
+      )}
+
+      {isLocalDevLoop && (
+        <button class="done-bar" id="bar-run" type="button" data-go="run" hidden>
+          <span class="chk">✓</span><span class="lab">Store running</span><span class="meta" id="bar-run-meta">on your machine</span><span class="reopen">reopen</span>
+        </button>
+      )}
+      {isLocalDevLoop && (
+        <button class="done-bar" id="bar-edit" type="button" data-go="edit" hidden>
+          <span class="chk">✓</span><span class="lab">First edit landed</span><span class="meta" id="bar-edit-meta">content/home.html</span><span class="reopen">reopen</span>
+        </button>
+      )}
+
+      {/* Station 1 — SHARED across all variants. #stage-run stays rendered exactly
+          once with its inner content unchanged; class:list gives non-hosted variants
+          neutral wrappers (.strun has no CSS), while hosted gets the rail station grid
+          + node column + collapsible done row. */}
+      <section id="st-run" class:list={["strun", { station: hostedActivity }]} data-st="open">
+        {hostedActivity && (
+          <div class="nodecol">
+            <span class="node" aria-hidden="true"><span class="num">1</span><svg viewBox="0 0 24 24" fill="none"><path d="m5 12.5 4.5 4.5L19 7.5" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="spark" style="--dx:1;--dy:-.4;background:#0e9f8e"></span><span class="spark" style="--dx:-1;--dy:-.7;background:#2fd4bf"></span><span class="spark" style="--dx:.6;--dy:1;background:#f0c56b"></span><span class="spark" style="--dx:-.7;--dy:.8;background:#0e9f8e"></span><span class="spark" style="--dx:0;--dy:-1.1;background:#2fd4bf"></span><span class="spark" style="--dx:1.1;--dy:.5;background:#b7791f"></span></span>
+            <span class="seg" id="seg-run" data-lit="0" data-flow="0"></span>
+          </div>
+        )}
+        <div class:list={{ "s-body": hostedActivity }}>
+          {hostedActivity && (
+            <button class="s-done" id="done-run" type="button" hidden>
+              <span class="lab">Store running</span><span class="meta" id="doneRunMeta"></span><span class="reopen">Reopen ↓</span>
+            </button>
+          )}
+          {hostedActivity && (
+            <p class="quiet-note" id="quietNote" hidden><span aria-hidden="true">◍</span><span>Your store went quiet — it stopped answering from your machine. <code>tot start</code> brings it back.</span></p>
+          )}
+      <section class="stage" id="stage-run">
+        <div class="stage-body">
+          <span class="kicker">Step 1</span>
+          <h1>Get your store running.
+            <span class="info" id="info1">
+              <button class="info-btn" type="button" aria-label="What does this command do?">i</button>
+              <span class="info-pop" role="tooltip">Installs the <code>tot</code> command, signs your terminal in with a single-use code, checks out your store, runs it, and opens your browser. No Docker, no browser sign-in, nothing to provision. From then on it's just <code>tot start</code>.</span>
+            </span>
+          </h1>
+          <p class="goal">{hasStoreAccess
+            ? isCredentialRecovery
+              ? <>Generate a fresh personal setup command, then paste it into your terminal and press Enter.</>
+              : <>Generate your personal setup command, then paste it into your terminal and press Enter.</>
+            : <>Open the invite link we emailed you to unlock your personal setup command.</>}</p>
+
+          <div class="term">
+            <div class="term-bar"><span class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></span><span class="ttl">your terminal</span></div>
+            <div class="term-body"><span class="c"># your personal, single-use setup command</span>
+<span class="cmd is-placeholder" id="cli-cmd-text">{hasStoreAccess ? (isCredentialRecovery ? "→ click “Generate a fresh setup command” below" : "→ click “Generate my setup command” below") : "→ available once you’re signed in via your invite"}</span></div>
+          </div>
+
+          {hasStoreAccess && (
+            <div class="cmd-actions">
+              <button class="cta" id="copyCmd" type="button" data-fastpath="1">
+                <svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+                {isCredentialRecovery ? "Generate a fresh setup command" : "Generate my setup command"}
+              </button>
+            </div>
+          )}
+          <p class="cmd-note" id="cli-cmd-note">{hasStoreAccess
+            ? <>This mints a <em>single-use, short-lived</em> sign-in code, shows the full command here, and copies it to your clipboard — paste it and press Enter. It signs you in, runs your store, and opens your browser. Nothing to retype.</>
+            : <>You'll need <em>Node.js and your invite</em>. Sign in through your invite link and this page hands you a one-paste setup command — no Docker, nothing to provision.</>}</p>
+
+          <p class="cmd-steps">Prefer the steps? <code>npm i -g {cliInstallSpec}</code>, then <code>tot checkout {appDomain}</code>, <code>cd {appDomain}</code>, <code>tot dev</code>. New to Node? Get it at <a href="https://nodejs.org">nodejs.org</a> — it includes <code>npm</code>.</p>
+
+          {isLocalDevLoop && (
+            <div class="detect" id="detect" data-listening="true">
+              <span class="radar" aria-hidden="true"></span>
+              <span class="txt" id="detectTxt">Watching for your store to come online on this machine…</span>
+            </div>
+          )}
+        </div>
+      </section>
+        </div>
+      </section>
+
+      {/* Station 2 — hosted-only. Locked label → live-gated teaser → open step body →
+          collapsed done row, all on the rail. */}
+      {hostedActivity && (
+        <section class="station" id="st-edit" data-st="locked">
+          <div class="nodecol">
+            <span class="node" aria-hidden="true"><span class="num">2</span><svg viewBox="0 0 24 24" fill="none"><path d="m5 12.5 4.5 4.5L19 7.5" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="spark" style="--dx:1;--dy:-.4;background:#0e9f8e"></span><span class="spark" style="--dx:-1;--dy:-.7;background:#2fd4bf"></span><span class="spark" style="--dx:.6;--dy:1;background:#f0c56b"></span><span class="spark" style="--dx:-.7;--dy:.8;background:#0e9f8e"></span><span class="spark" style="--dx:0;--dy:-1.1;background:#2fd4bf"></span><span class="spark" style="--dx:1.1;--dy:.5;background:#b7791f"></span></span>
+            <span class="seg" id="seg-edit" data-lit="0" data-flow="0"></span>
+          </div>
+          <div class="s-body">
+            <div class="s-locked" id="lock-edit">Change one line <span class="sub">unlocks when your store is running</span></div>
+            <button class="s-done" id="done-edit" type="button" hidden>
+              <span class="lab">First edit landed</span><span class="meta" id="doneEditMeta">content/home.html</span><span class="reopen">Reopen ↓</span>
+            </button>
+            <div class="s-tease" id="tease-edit" hidden>
+              <span class="t-kick">Next up · Step 2</span>
+              <h3>Change one line.</h3>
+              <p>Open <code>content/home.html</code>, edit anything, save. Your store reloads itself and the save shows up here.</p>
+              <button class="t-cta" id="cta-edit" type="button">Make your first edit →</button>
+            </div>
+        <section class="stage" id="hosted-stage-edit" hidden>
+          <div class="stage-body">
+            <p class="ha-encourage"><span class="chk">✓</span><span>You're running locally — nice. One more step: make an edit and watch it land here.</span></p>
+            <span class="kicker">Step 2</span>
+            <h1>Change one line.</h1>
+            <p class="goal">Open <code>content/home.html</code> in your editor, change one line, and save. Your store reloads on its own, and the save shows up in <strong>Your activity</strong> below within a couple of seconds.</p>
+            <div class="term">
+              <div class="term-bar"><span class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></span><span class="ttl">open the file</span></div>
+              <div class="term-body"><span class="c"># open your homepage content to edit</span>
+<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>
+          </div>
+        </section>
+          </div>
+        </section>
+      )}
+
+      {/* Station 3 — hosted-only. Its .seg is the last on the rail (hidden via CSS). */}
+      {hostedActivity && (
+        <section class="station" id="st-next" data-st="locked">
+          <div class="nodecol">
+            <span class="node" aria-hidden="true"><span class="num">3</span><svg viewBox="0 0 24 24" fill="none"><path d="m5 12.5 4.5 4.5L19 7.5" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+            <span class="seg"></span>
+          </div>
+          <div class="s-body">
+            <div class="s-locked" id="lock-next">Send it for review <span class="sub">unlocks after your first edit</span></div>
+            <div class="s-tease" id="tease-next" hidden>
+              <span class="t-kick">Next up · Step 3</span>
+              <h3>Send your change for review.</h3>
+              <p>Bundle what you've edited into a compliance-reviewed preview build.</p>
+              <button class="t-cta" id="cta-next" type="button">Go to Step 3 →</button>
+            </div>
+        <section class="stage" id="hosted-stage-next" hidden>
+          <div class="stage-body">
+            <span class="kicker">Step 3</span>
+            <h1>Submit your change for preview.</h1>
+            <p class="goal">You've got the loop: edit locally, see it reflected here. When a change is ready, submit it for a preview build — it goes through the compliance review step before it can go live.</p>
+            <div class="term">
+              <div class="term-bar"><span class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></span><span class="ttl">preview</span></div>
+              <div class="term-body"><span class="c"># bundle your local changes into a reviewable preview</span>
+<span class="cmd">COMING SOON (tot submit)</span></div>
+            </div>
+            <div class="cmd-actions">
+              <button class="cta" id="submitPreview" type="button">
+                <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                Submit for preview
+              </button>
+            </div>
+            <p class="cmd-note">This packages your changes and kicks off a compliance-reviewed preview build.</p>
+          </div>
+        </section>
+          </div>
+        </section>
+      )}
+
+      {/* Activity ledger — positioned AFTER the stations. Keeps the ids the activity
+          renderer targets (#haTable/#haBody/#haEmpty/#haToggle). Celebration is now the
+          Step-2 node stamp + toast, so the old inline banner is gone. */}
+      {hostedActivity && (
+        <section class="hosted-activity" id="hostedActivity" hidden>
+          <div class="ha-head">
+            <h2>Your activity</h2>
+            <span class="ha-sub">reported by <code>tot dev</code> on your machine</span>
+          </div>
+          <p class="ha-empty" id="haEmpty">No saves yet — that's Step 2. Edit a file locally and it appears here.</p>
+          <table class="ha-table" id="haTable" hidden>
+            <tbody id="haBody"></tbody>
+          </table>
+          <button class="ha-toggle" id="haToggle" type="button" hidden></button>
+        </section>
+      )}
+
+      {isLocalDevLoop && (
+        <section class="stage" id="stage-edit" hidden>
+          <div class="stage-body">
+            <div class="celebrate pop-in" id="cel-run" hidden>
+              <span class="chk">✓</span><span>You're live — your store is running on this machine. Now let's change something.</span>
+            </div>
+            <span class="kicker">Step 2</span>
+            <h1>Make your first edit.</h1>
+            <p class="goal">Open a content file in your editor, change one line, and save. Your store reloads on its own — watch the loop react below.</p>
+
+            <div class="term">
+              <div class="term-bar"><span class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></span><span class="ttl">your editor</span></div>
+              <div class="term-body"><span class="c"># open your store's homepage source, edit the headline, save</span>
+<span class="cmd">content/home.html</span></div>
+            </div>
+
+            <div class="detect" id="detect-edit" data-listening="true">
+              <span class="radar" aria-hidden="true"></span>
+              <span class="txt" id="detectEditTxt">Waiting for your first save… save a watched file and it shows up here instantly.</span>
+            </div>
+
+            <div class="preview-embed" id="previewEmbed">
+              <div class="pe-bar">
+                <span class="dots"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></span>
+                <span class="pe-url" id="previewUrl">localhost preview</span>
+                <button type="button" class="pe-expand" id="previewExpand">⤢ Full screen</button>
+              </div>
+              {/* src is set client-side from /__tot/dev-loop-status (the DEV tenant) —
+                  NOT the SSR appDomain, which runs in workerd and can't see TOT_DEV_TENANT. */}
+              <iframe class="pe-frame" id="previewFrame" title="live preview" loading="lazy"></iframe>
+              <p class="pe-hint">Your running store. Open the <b>✦</b> widget inside it, hit <b>◎ Locate</b>, then click any element — its source file opens below with the cursor on that line.</p>
+            </div>
+
+            <div class="devfiles" id="devfiles">
+              <div class="df-head">
+                <span class="df-title">Your store's files</span>
+                <span class="df-path" id="filesPath">select a file to view</span>
+              </div>
+              <div class="df-body">
+                <div class="df-tree" id="filesTree">Loading your files…</div>
+                <div class="df-main">
+                  <div class="df-editbar" id="filesEditbar" hidden>
+                    <span class="df-status" id="filesStatus"></span>
+                    <span class="df-conflict" id="filesConflict" hidden>Changed on disk.
+                      <button type="button" class="df-mini" id="filesReload">Reload</button>
+                      <button type="button" class="df-mini" id="filesForce">Overwrite</button>
+                    </span>
+                    <button type="button" class="df-mini df-diffbtn" id="filesDiffBtn" hidden>Diff</button>
+                  </div>
+                  <textarea class="df-view" id="filesView" readonly spellcheck="false" wrap="off">Pick a file on the left to view its source.</textarea>
+                  <pre class="df-diff" id="filesDiff" hidden></pre>
+                </div>
+              </div>
+            </div>
+            <p class="future-note">
+              <span class="tag">Soon</span> Live editing is on. A visual diff and click-an-element-to-jump-to-source layer onto this panel next.
+            </p>
+
+            <div class="btnrow">
+              <button class="btn ghost" id="backToRun" type="button" data-go="run">← Back</button>
+              <button class="btn ghost navspace" id="toNext" type="button" data-go="next" disabled>Next: what's next →</button>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {isLocalDevLoop && (
+        <section class="stage" id="stage-next" hidden>
+          <div class="stage-body">
+            <div class="celebrate pop-in" id="cel-edit" hidden>
+              <span class="chk">✓</span><span>You changed a file and saw it on your site. That's the loop — you're in control.</span>
+            </div>
+            <span class="kicker">You're in control</span>
+            <h1>You've got the loop.</h1>
+            <p class="goal">Edit, save, see it — with no terminal round-trip. Previews, publish checks, AI assistance, and diagnostics open up from here soon.</p>
+            <div class="btnrow">
+              <button class="btn ghost" id="backToEdit" type="button" data-go="edit">← Back to editing</button>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {isLocalDevLoop && (
+        <div class="loopbar" id="loopbar" data-state="running" aria-live="polite">
+          <div class="lb-head" id="lbHead">
+            <span class="pill"><span class="beat"></span><span id="lbStatus">Connecting…</span></span>
+            <span class="lu">watching <b id="lbWatch">your content</b> · <span id="lbLast">connecting…</span></span>
+            <span class="chev">›</span>
+          </div>
+          <div class="lb-detail">
+            <div class="lb-row"><span class="ic">✓</span><span class="k">Local server</span><span class="v dim" id="lbServer">—</span></div>
+            <div class="lb-row"><span class="ic">↗</span><span class="k">Current URL</span><span class="v dim" id="lbUrl">—</span></div>
+            <div class="lb-row"><span class="ic">✎</span><span class="k">Watched file</span><span class="v dim" id="lbFile">content/*.html</span></div>
+            <div class="lb-row"><span class="ic">◷</span><span class="k">Last save seen</span><span class="v dim" id="lbSave" data-ts="">no saves yet</span></div>
+            <div class="lb-row"><span class="ic">⟳</span><span class="k">Last reload sent</span><span class="v dim" id="lbReload" data-ts="">waiting for a save</span></div>
+            <div class="lb-row"><span class="ic">≡</span><span class="k">Source</span><span class="v dim">your working tree — not published</span></div>
+          </div>
+        </div>
+      )}
+
+      {/* Static "coming soon" cards — pure /dev rendering with no dependency on the
+          isLocalDevLoop-only /__tot/* endpoints and no need for the activity bridge, so
+          it renders unconditionally on the deployed hosted panel (and locally). Not
+          gated on capability either — it's a teaser of what's next, and AI is one card
+          among several, not a prerequisite. */}
+      <section class="next">
+        <h3>The rest of the workflow</h3>
+        <p class="sub">Previews, publish checks, AI assistance, and diagnostics. These open up once you've got the loop — coming soon.</p>
+        <div class="nextgrid">
+          <div class="nextcard"><span class="path">Share a preview</span><span class="d">Put a branch or PR up at a shareable URL.</span><span class="soon">Coming soon</span></div>
+          <div class="nextcard"><span class="path">Publish readiness</span><span class="d">What happens if you publish today — checks &amp; blockers.</span><span class="soon">Coming soon</span></div>
+          <div class="nextcard"><span class="path">Edit with AI</span><span class="d">Connect Claude, Cursor, or Codex to your store.</span><span class="soon">Coming soon</span></div>
+          <div class="nextcard"><span class="path">Troubleshooting</span><span class="d">Doctor, logs, server health, and auth checks.</span><span class="soon">Coming soon</span></div>
+        </div>
+      </section>
+
+      <footer class="foot">
+        <span>{session?.email ? <>Signed in as {session.email}</> : <>Not signed in</>}</span>
+        <span class="sp"></span>
+        {signedIn ? <a href="/auth/logout">Sign out</a> : null}
+      </footer>
+    </div>
+
+    <div class="toast" id="toast"><span class="ok">✓</span><span id="toastMsg">Copied</span></div>
+
+    {/* Item 7/10 — Step 3's "Submit for preview" CTA opens this "coming soon" dialog;
+        the compliance-reviewed preview pipeline isn't wired into this panel yet. */}
+    {hostedActivity && (
+      <dialog class="cs-dialog" id="comingSoon" aria-label="Submit for preview — coming soon">
+        <div class="cs-body">
+          <span class="cs-emoji" aria-hidden="true">🚧</span>
+          <h2>Preview submissions are coming soon</h2>
+          <p>Submitting a change for a compliance-reviewed preview build isn't wired into this panel yet. For now, keep iterating locally — your saves land in <strong>Your activity</strong> above in real time.</p>
+          <button type="button" class="cta" id="comingSoonClose">Got it</button>
+        </div>
+      </dialog>
+    )}
+
+    {isLocalDevLoop && (
+      <dialog class="pe-dialog" id="previewDialog" aria-label={`${appDomain} — full-screen preview`}>
+        <div class="pe-bar">
+          <span class="pe-url">{isLocalDevLoop ? "localhost preview" : "your store"} · {appDomain}</span>
+          <button type="button" class="pe-expand" id="previewClose">✕ Close</button>
+        </div>
+        <iframe class="ped-frame" id="previewDialogFrame" title={`${appDomain} — full-screen preview`}></iframe>
+      </dialog>
+    )}
+
+    {isLocalDevLoop && (
+      <button class="ask-fab" id="askFab" type="button">
+        <svg viewBox="0 0 24 24" fill="none"><path d="M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v9a1.5 1.5 0 0 1-1.5 1.5H9l-4 3.5v-3.5H5.5A1.5 1.5 0 0 1 4 14.5v-9Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
+        <span class="u">Stuck?</span> Ask
+      </button>
+    )}
+    {isLocalDevLoop && (
+      <div class="ask-panel" id="askPanel" role="dialog" aria-label="Help with the local loop">
+        <div class="ask-head"><strong>Ask about the loop</strong><span>Quick answers for "why isn't this working."</span></div>
+        <div class="qa">
+          <details>
+            <summary><span class="q">?</span>Is my local site running?<span class="chev">›</span></summary>
+            <div class="ans"><span id="ans-running">Checking…</span></div>
+          </details>
+          <details>
+            <summary><span class="q">?</span>Why didn't my change show up?<span class="chev">›</span></summary>
+            <div class="ans"><span id="ans-change">Save a watched file and I'll compare when it was seen vs when your store reloaded.</span></div>
+          </details>
+          <details>
+            <summary><span class="q">?</span>Did the watcher see my save?<span class="chev">›</span></summary>
+            <div class="ans"><span id="ans-watcher">The Monitor's <b>Last save seen</b> updates the instant a watched file changes. If it doesn't move after you save, the watcher missed it — usually after a rename or delete. Restart to re-scan.</span></div>
+          </details>
+          <details>
+            <summary><span class="q">?</span>Am I editing the rendered source?<span class="chev">›</span></summary>
+            <div class="ans">Yes — you're editing your <b>working tree</b>, the same file the page renders from. Nothing publishes; only your local preview sees it.</div>
+          </details>
+          <details>
+            <summary><span class="q">↻</span>Restart the local preview.<span class="chev">›</span></summary>
+            <div class="ans">Reconnects this page to the dev server and re-reads loop state — fixes a preview that's gone stale. If the server is fully down, run <code>tot start</code> in your terminal.
+              <div style="margin-top:.6rem"><button class="btn primary" id="restartBtn" type="button" style="background:var(--accent);color:#fff;border-color:transparent">Reconnect preview</button></div>
+            </div>
+          </details>
+        </div>
+        <div class="ask-foot">Scoped to the local loop.</div>
+      </div>
+    )}
+
+    <script nonce={cspNonce} is:inline>
+      // Theme toggle: flip data-theme on <html>, seeded from the OS preference on first click.
+      (function () {
+        var root = document.documentElement;
+        var btn = document.getElementById("themeBtn");
+        if (!btn) return;
+        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);
+        });
+      })();
+    </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>
+
+    <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");
+        if (!btn || !textEl) return;
+        var generic = btn.getAttribute("data-generic") || "";
+        var fastpath = btn.getAttribute("data-fastpath") === "1";
+        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; }
+
+        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("/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.",
+              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 (contains the one-time code) as a pure text node, then copy it.
+          textEl.textContent = body.command;
+          var ok = await copy(body.command);
+          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>
+
+    {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} />}
+  </body>
+</html>