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

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

@@ -0,0 +1,500 @@
+/**
+ * Hosted /dev activity log (hosted-dev-activity-bridge). Polls
+ * 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. Imported from a processed
+ * `<script>` in cockpit.astro (ADR 0013), rendered only when hostedActivity
+ * (never alongside the isLocalDevLoop-gated local scripts). basePath is read
+ * from `document.body.dataset`.
+ */
+export function initHostedActivity(): void {
+  const root = document.getElementById("hostedActivity");
+  if (!root) return;
+
+  // The request's tenant prefix ("" host-routed, "/<tenant>" path-routed). Every
+  // /api/dev/* call below carries it so the activity feed + the CLI sign-in-code mint
+  // run in THIS store's scope (locals.tenant on the API request) — the same store this
+  // /<tenant>/cockpit rendered for, never the session's first membership.
+  const basePath = document.body.dataset.cockpitBasePath || "";
+
+  // ?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((k) => {
+        try { window.sessionStorage.removeItem(k); } catch (e) {}
+      });
+      let reloaded = false;
+      const doneReset = () => { if (reloaded) return; reloaded = true; location.replace(location.pathname); };
+      setTimeout(doneReset, 2000); // fallback so a hung request still lands us fresh
+      try { fetch(basePath + "/api/dev/activity", { method: "DELETE", cache: "no-store" }).then(doneReset, doneReset); }
+      catch (e) { doneReset(); }
+      return; // the post-clear reload re-runs this script against a fresh, empty state
+    }
+  } catch (e) {}
+
+  const tableEl: any = document.getElementById("haTable");
+  const bodyEl: any = document.getElementById("haBody");
+  const emptyEl: any = 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).
+  const bridge: any = document.getElementById("bridge");
+  const bUrl: any = document.getElementById("bUrl");
+  const bGo: any = document.getElementById("bGo");
+  const bKicker = document.getElementById("bKicker");
+  const bHint: any = document.getElementById("bHint");
+  const bDiag: any = document.getElementById("bDiag");
+  const bTxt: any = document.getElementById("bTxt");
+  const bObstacle: any = document.getElementById("bObstacle");
+  const bObTitle = document.getElementById("bObTitle");
+  const bObMsg = document.getElementById("bObMsg");
+  const bObCmd: any = document.getElementById("bObCmd");
+  const bObNote = document.getElementById("bObNote");
+  const doneRunMeta = document.getElementById("doneRunMeta");
+  let sawLive = false;
+  function updateBridge(rt: any, obstacle: any) {
+    if (!bridge) return;
+    const live = !!(rt && rt.live);
+    if (live) sawLive = true;
+    // Obstacle lane (v2 §6): a failed `tot start` is the ONE reason the strip
+    // shows BEFORE the loop was ever live this page-view — the developer needs the
+    // fix, not a silent "watching…". The server returns `obstacle` only when there
+    // is no live heartbeat, so a live loop supersedes it. Fill from server copy.
+    if (obstacle && !live) {
+      bridge.hidden = false;
+      bridge.setAttribute("data-live", "obstacle");
+      if (bTxt) bTxt.hidden = true;
+      if (bDiag) bDiag.hidden = true;
+      if (bGo) bGo.hidden = true;
+      if (bHint) bHint.hidden = true;
+      if (bObstacle) bObstacle.hidden = false;
+      if (bObTitle) bObTitle.textContent = obstacle.title || "Setup hit a snag";
+      if (bObMsg) bObMsg.textContent = obstacle.message || "";
+      if (bObCmd) {
+        if (obstacle.fixCommand) { bObCmd.textContent = obstacle.fixCommand; bObCmd.hidden = false; }
+        else bObCmd.hidden = true;
+      }
+      if (bObNote) bObNote.textContent = obstacle.fixNote || "";
+      return;
+    }
+    // Back to the normal live/quiet strip: restore the pieces the obstacle state hid.
+    if (bObstacle) bObstacle.hidden = true;
+    if (bTxt) bTxt.hidden = false;
+    if (!rt || !rt.url) { bridge.hidden = true; return; }
+    // On FIRST arrival, a stale runtime record (offline, never seen live this
+    // page-view — e.g. left over from a prior run, still within the heartbeat TTL)
+    // must NOT show — let Step 1 "Get your store running" do the work. Only surface
+    // the strip once it's live, or after it's gone quiet HAVING been live this page-view.
+    if (!live && !sawLive) { bridge.hidden = true; return; }
+    bridge.hidden = false;
+    bridge.setAttribute("data-live", live ? "1" : "0");
+    if (bUrl) { bUrl.textContent = rt.url; bUrl.href = rt.url; }
+    // No point offering "Open your store" to a server that stopped answering.
+    if (bGo) { bGo.href = rt.url; bGo.hidden = !live; }
+    if (bKicker) bKicker.textContent = live ? "Live on your machine" : "Went quiet";
+    if (bHint) bHint.hidden = live; // recovery hint only while offline
+    if (doneRunMeta) doneRunMeta.textContent = rt.url; // the collapsed Step-1 row's meta
+    if (bDiag) {
+      if (rt.cliVersion) {
+        bDiag.textContent = "tot CLI v" + rt.cliVersion + (rt.runnerVersion ? " · 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`). Without one, guess
+  // from the browser's OS (a reasonable proxy for the local dev machine in the common
+  // case of viewing the cockpit on the same laptop) and default to VS Code (`code`) —
+  // the most common case — with an alternate + AI-agent note underneath.
+  const editOpenCmd = document.getElementById("editOpenCmd");
+  const editOpenHint = document.getElementById("editOpenHint");
+  function platformOpenDirCmd(dirArg: string) {
+    const plat = String(((navigator as any).userAgentData && (navigator as any).userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+    if (/win/i.test(plat)) return "explorer " + dirArg;
+    if (/mac/i.test(plat)) return "open " + dirArg;
+    return "xdg-open " + dirArg;
+  }
+  function updateEditHint(rt: any) {
+    if (!editOpenCmd) return;
+    const editor = rt && typeof rt.editor === "string" ? rt.editor : "";
+    const 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.
+    const file = cwd ? (cwd.replace(/\/+$/, "") + "/content/home.html") : "content/home.html";
+    editOpenCmd.textContent = (editor || "code") + " " + file;
+    if (editOpenHint) {
+      if (editor) {
+        editOpenHint.textContent = 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.";
+      } else {
+        const altCmd = platformOpenDirCmd(cwd || ".");
+        editOpenHint.textContent = "Using VS Code? Run that. Prefer Cursor, another editor, or an AI coding " +
+          "agent like Claude? Same idea — open the folder (`" + altCmd + "`) or file above and edit there. " +
+          "Set $EDITOR and we'll show your exact command instead.";
+      }
+    }
+  }
+
+  const SS = window.sessionStorage;
+  function load(k: string, d: any) { try { const v = SS.getItem(k); return v === null ? d : JSON.parse(v); } catch (e) { return d; } }
+  function put(k: string, v: any) { try { SS.setItem(k, JSON.stringify(v)); } catch (e) {} }
+
+  let baseline = load("tot.hosted.editBase", null); // null = not yet primed by a first poll
+  let 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.
+
+  // 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.
+  const 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).
+  let current: string | null = null;
+  let liveNow = false; // is localhost live right now? set each poll from runtime.live
+  const bodies: any = {
+    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).
+  const stEls: any = {
+    run: document.getElementById("st-run"),
+    edit: document.getElementById("st-edit"),
+    next: document.getElementById("st-next"),
+  };
+  const segRun: any = document.getElementById("seg-run");
+  const segEdit: any = document.getElementById("seg-edit");
+  const doneRunEl: any = document.getElementById("done-run");
+  const doneEditEl: any = document.getElementById("done-edit");
+  const doneEditMeta = document.getElementById("doneEditMeta");
+  const lockEditEl: any = document.getElementById("lock-edit");
+  const lockNextEl: any = document.getElementById("lock-next");
+  const teaseEditEl: any = document.getElementById("tease-edit");
+  const teaseNextEl: any = document.getElementById("tease-next");
+  const quietNoteEl: any = 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: string) {
+    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: number) { 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: string) {
+    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() {
+    const 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.
+    const teaseEdit = steps.run && !steps.edit && liveNow && current !== "edit";
+    const 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: ReturnType<typeof computeView>) {
+    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 as any).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: any) {
+    if (!el) return;
+    el.hidden = false;
+    el.classList.add("expanding");
+    setTimeout(() => { 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: string) {
+    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", () => { goTo("run"); });
+  if (doneEditEl) doneEditEl.addEventListener("click", () => { goTo("edit"); });
+  const ctaEdit = document.getElementById("cta-edit");
+  if (ctaEdit) ctaEdit.addEventListener("click", () => { goTo("edit"); });
+  const ctaNext = document.getElementById("cta-next");
+  if (ctaNext) ctaNext.addEventListener("click", () => { 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: number | string): string {
+    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).
+  const toastEl = document.getElementById("toast");
+  const toastMsgEl = document.getElementById("toastMsg");
+  let toastT: ReturnType<typeof setTimeout>;
+  function toast(msg: string) {
+    if (!toastEl || !toastMsgEl) return;
+    toastMsgEl.textContent = msg;
+    toastEl.classList.add("show");
+    clearTimeout(toastT);
+    toastT = setTimeout(() => { 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?: string) {
+    const st = stEls.edit;
+    if (st) {
+      st.classList.remove("celebrating");
+      void st.offsetWidth; // restart the burst animation
+      st.classList.add("celebrating");
+      setTimeout(() => { if (st && st.classList) st.classList.remove("celebrating"); }, 1100);
+    }
+    if (doneEditMeta && file) doneEditMeta.textContent = file;
+    toast("Saved " + (file || "your file") + " — your store reloaded. That's the loop.");
+  }
+
+  const toggleEl: any = document.getElementById("haToggle");
+  const VISIBLE = 3; // show the latest 3 by default; expand for the rest
+  if (toggleEl) {
+    toggleEl.addEventListener("click", () => { expanded = !expanded; render(lastEvents); });
+  }
+  let lastEvents: any[] = [];
+
+  function render(events: any[]) {
+    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.
+    const real = (events || []).filter((e) => e && e.event !== "up");
+    Array.prototype.forEach.call(bodyEl.querySelectorAll(".ha-row"), (n: any) => { 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;
+    const newestFirst = real.slice().reverse();
+    const shown = expanded ? newestFirst : newestFirst.slice(0, VISIBLE);
+    shown.forEach((e, i) => {
+      const tr = document.createElement("tr");
+      tr.className = i === 0 ? "ha-row is-new" : "ha-row"; // accent the newest row
+      const 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
+      const desc = document.createElement("td");
+      desc.className = "ha-desc";
+      desc.textContent = e.description;
+      const 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).
+  const FAST_MS = 3000;   // actively watching for the loop to prove itself
+  const SLOW_MS = 20000;  // loop already celebrated — just an occasional glance
+  let pollTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function nextDelay() {
+    return (steps.run && steps.edit) ? SLOW_MS : FAST_MS;
+  }
+
+  function scheduleNext() {
+    if (pollTimer) { clearTimeout(pollTimer); pollTimer = null; }
+    if (document.hidden) return; // stay fully paused; visibilitychange resumes us
+    pollTimer = setTimeout(poll, nextDelay());
+  }
+
+  function poll() {
+    fetch(basePath + "/api/dev/activity", { cache: "no-store" })
+      .then((r) => (r.ok ? r.json() : Promise.reject()))
+      .then((d) => {
+        const events = (d && d.events) || [];
+        const rt = d && d.runtime;
+        const isLive = !!(rt && rt.live);
+        liveNow = isLive; // drives Step 1 minimize + the Step-2 teaser visibility below
+        updateBridge(rt, d && d.obstacle); // same poll drives the bridge strip (+ obstacle lane)
+        render(events);
+        // b1 fix — Step-2 completion must key off the SAME events the feed shows:
+        // REAL file edits (event !== "up"), NOT the single newest buffer entry. The
+        // local loop interleaves recurring "up" liveness pings into this one ring
+        // buffer, so the newest event is frequently an "up" ping even right after a
+        // save. The old gate read events[last]: when an "up" ping landed AFTER the
+        // edit it (1) made lastIsEdit false so completeStep("edit") never fired, and
+        // (2) still advanced the baseline watermark past the edit's timestamp —
+        // permanently stranding Step 2 even though the save rendered in "Your
+        // activity". Filter to real edits (mirroring render()'s filter) and advance
+        // the watermark only from real edits, so a liveness ping can neither satisfy
+        // nor poison the gate.
+        const realEdits = events.filter((e: any) => e && e.event !== "up");
+        const lastEdit = realEdits.length ? realEdits[realEdits.length - 1] : null;
+        const latestEdit = lastEdit ? lastEdit.at : 0;
+        // Step 1 "Get running" completes once localhost reports LIVE (or any activity
+        // arrives). Once complete, renderSteps() minimizes Step 1 and reveals the Step-2 nudge.
+        if (isLive || events.length) completeStep("run");
+        if (baseline === null) {
+          setBaseline(latestEdit); // first poll primes the watermark from real edits — no edit inferred yet
+        } else if (latestEdit > baseline) {
+          setBaseline(latestEdit);
+          // A real FILE edit landed after the watermark → Step 2 completes (once).
+          // completeStep flips + persists once, returning true on that first poll only.
+          if (completeStep("edit")) {
+            celebrate(lastEdit && lastEdit.file);
+            if (current === "edit") current = null; // minimize Step 2 → reveal Step-3 teaser
+          }
+        }
+        // ALWAYS re-render so a localhost drop hides the Step-2 nudge + reopens Step 1.
+        renderSteps();
+      })
+      .catch(() => {})
+      .then(scheduleNext); // reschedule (or not, if now hidden) regardless of outcome
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    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).
+  const submitBtn = document.getElementById("submitPreview");
+  const comingSoon: any = document.getElementById("comingSoon");
+  if (submitBtn && comingSoon) {
+    submitBtn.addEventListener("click", () => {
+      if (typeof comingSoon.showModal === "function") comingSoon.showModal();
+      else comingSoon.setAttribute("open", "");
+    });
+    const csClose = document.getElementById("comingSoonClose");
+    if (csClose) csClose.addEventListener("click", () => {
+      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
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Info popover: toggle on the ⓘ button, dismiss on outside click. Imported
+ * from a processed `<script>` in cockpit.astro.
+ */
+export function initInfoPopover(): void {
+  const info1 = document.getElementById("info1");
+  if (!info1) return;
+  const openBtn = info1.querySelector(".info-btn");
+  if (!openBtn) return;
+  openBtn.addEventListener("click", (e) => { e.stopPropagation(); info1.classList.toggle("open"); });
+  document.addEventListener("click", (e) => { if (!info1.contains(e.target as Node)) info1.classList.remove("open"); });
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Copy the "connect the MCP" command (d3-unhold-dev-step0-connect-mcp). Static
+ * text (no minting), so unlike the setup-command copy button (copyCommand.ts)
+ * this button is visible from load. Imported from a processed `<script>` in
+ * cockpit.astro.
+ */
+export function initMcpCopy(): void {
+  const copyIcon = document.getElementById("mcpCopyIcon");
+  const cmdText = document.getElementById("mcpCmdText");
+  const toast = document.getElementById("toast");
+  const toastMsg = document.getElementById("toastMsg");
+  if (!copyIcon || !cmdText) return;
+  let tT: ReturnType<typeof setTimeout>;
+  function ping(m: string) {
+    if (!toast || !toastMsg) return;
+    toastMsg.textContent = m; toast.classList.add("show");
+    clearTimeout(tT); tT = setTimeout(() => { toast.classList.remove("show"); }, 1900);
+  }
+  copyIcon.addEventListener("click", () => {
+    const text = cmdText.textContent || "";
+    const done = navigator.clipboard
+      ? navigator.clipboard.writeText(text).then(() => true).catch(() => false)
+      : Promise.resolve(false);
+    done.then((ok) => {
+      if (ok) {
+        copyIcon.setAttribute("data-copied", "1");
+        setTimeout(() => { copyIcon.removeAttribute("data-copied"); }, 1600);
+        ping("Copied");
+      } else {
+        ping("Select the command above to copy");
+      }
+    });
+  });
+}

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

@@ -0,0 +1,107 @@
+/**
+ * Live loop Monitor — polls the local dev server's /__tot/dev-loop-status
+ * and renders the loopbar: server health, watched file, and the save→reload
+ * timeline. Imported from a processed `<script>` in cockpit.astro (ADR 0013),
+ * rendered only when isLocalDevLoop (the storefront's own `astro dev`, never
+ * the hosted panel). Broadcasts window.__totLoop + the "tot:loop-state"
+ * CustomEvent so the stepper and ask widgets share this one poll instead of
+ * each opening their own. All dynamic values go through textContent, never
+ * innerHTML.
+ */
+declare global {
+  interface Window {
+    __totLoop?: Record<string, unknown>;
+  }
+}
+
+export function initMonitor(): void {
+  const bar: any = document.getElementById("loopbar");
+  if (!bar) return;
+  const elStatus: any = document.getElementById("lbStatus");
+  const elWatch: any = document.getElementById("lbWatch");
+  const elLast: any = document.getElementById("lbLast");
+  const elServer: any = document.getElementById("lbServer");
+  const elUrl: any = document.getElementById("lbUrl");
+  const elFile: any = document.getElementById("lbFile");
+  const elSave: any = document.getElementById("lbSave");
+  const elReload: any = document.getElementById("lbReload");
+  const head = document.getElementById("lbHead");
+
+  if (head) head.addEventListener("click", () => { bar.classList.toggle("open"); });
+
+  function rel(ts: number | string): string {
+    const 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: any, ts: number | undefined, emptyText: string) {
+    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(() => {
+    [elSave, elReload].forEach((el) => {
+      const ts = el.getAttribute("data-ts");
+      if (ts) el.textContent = rel(ts);
+    });
+  }, 1000);
+
+  function render(s: any) {
+    bar.classList.add("live");
+    const port = s.port || null;
+    const 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");
+
+    const saved = s.lastSaveAt || 0;
+    const reloaded = s.lastReloadAt || 0;
+    let 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 (stepper, 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";
+    const 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((r) => (r.ok ? r.json() : Promise.reject()))
+      .then(render)
+      .catch(offline);
+  }
+  poll();
+  setInterval(poll, 1000);
+}