@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

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

@@ -1,1548 +0,0 @@
----
-/**
- * /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; the shared typefaces are self-hosted same-origin (@fontsource,
- * imported via `@/styles/fonts.css`), and 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 { resolvePreviewTenant } from "@/config/previewTenantLookup";
-import { readTenantPreviewStatus, isStoreNotSetUp } from "@/lib/dev/previewStatus";
-import { resolveDevApiBase } from "@/lib/dev/apiBase";
-import { resolveCockpitStoreResource } from "@/lib/dev/cockpitStore";
-import { normalizeEmailHint, redactEmailForHint } from "@/lib/privacy/emailHint";
-// Self-hosted web fonts (audit finding 6) — same-origin @fontsource, replacing
-// the render-blocking fonts.googleapis.com stylesheet. Covers Plus Jakarta Sans,
-// Inter, and JetBrains Mono used by this page's inline styles.
-import "@/styles/fonts.css";
-
-export const prerender = false;
-const cspNonce = Astro.locals.cspNonce;
-const url = new URL(Astro.request.url);
-// The tenant prefix ("" host-routed, "/<tenant>" path-routed) this cockpit is served
-// under — set by the middleware. Every self-link + same-store API call below carries
-// it so a `/<tenant>/cockpit` invite keeps its store across the login round-trip and
-// the command mint (see resolveCockpitStoreResource / the basePath-scoped fetches).
-const basePath = Astro.locals.basePath ?? "";
-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(
-    `${basePath}/cockpit${canonical.toString() ? `?${canonical.toString()}` : ""}`,
-    302,
-  );
-}
-const cockpitNext = `${basePath}/cockpit${isCredentialRecovery ? "?recover=cli" : ""}`;
-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;
-// d1 (board: d1-unmask-invite-email) — the FULL invite address to show its OWNER in the
-// recovery notice, never a redacted hint. Prefer the validated session email; else a full
-// `?email=` if one ever survives to render. Empty when only a redacted `email_hint` is on
-// hand (the common case — the CLI masks the address upstream before it reaches this page),
-// and the notice then falls back to neutral, non-redacted copy rather than re-showing the
-// owner a masked form of their own address. redactEmailForHint/emailHint.ts stay intact for
-// every other caller (e.g. the /auth/login hint below) — we simply stop masking HERE.
-const recoveryEmailFull =
-  session?.email ||
-  (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(legacyRecoveryEmail) ? legacyRecoveryEmail.toLowerCase() : "");
-// 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 which store this cockpit is for. The URL wins when a `/<tenant>/cockpit`
-// request named a specific store the signed-in developer can access (the trusted
-// host/path seam on `locals.tenant`, membership-checked) — this is the regression
-// fix: an invite to another store than the session's first membership no longer
-// "loses" that store. Otherwise: the developer's own first store (generic host), or
-// — for an ANONYMOUS viewer only — the path store's branding, else `?tenant=`. Never
-// a signed-in developer's store overridden by caller-supplied query input.
-// See resolveCockpitStoreResource; the same resolver gates the mint + /api/dev/*.
-const wanted = resolveCockpitStoreResource(Astro, session);
-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";
-
-// fix-staff-cockpit-403: `hasStoreAccess` above only proves the session carries SOME
-// eligible capability — the federated sign-in path stamps capability:"member"
-// unconditionally (auth/magic-exchange), so a ToT-staff viewer admitted by the
-// loginGate staff bypass (no real store membership) passes it too, even on the home
-// host where `wanted` never names a real store. Every /api/dev/* route instead gates
-// on this SAME tenant actually RESOLVING (resolvePreviewTenant — see
-// lib/dev/hostedCockpit.ts, api/dev/activity.ts) — mirror that here so we never mint a
-// setup command or start polling for a viewer who'd just 403-loop against it.
-const resolvedStoreTenant = hasStoreAccess && wanted ? await resolvePreviewTenant(wanted) : null;
-// Capability-eligible, but no store resolves for this viewer/host (the staff/home-host
-// case above). Gets its own calm "pick a store" state instead of the full flow.
-const noResolvableStore = hasStoreAccess && !resolvedStoreTenant;
-
-// STORE-NOT-SET-UP (#8425 invite-gated-auto-build): a developer WITH access + a
-// resolvable store, but whose forge repo isn't provisioned yet — the invite landed
-// before (or without) the store being set up. Offering the fastpath here would hand
-// them a `tot login --code … && tot start` that dies at checkout on "Repo … is not
-// provisioned" (James's first-run failure). Ask the credential-free MCP preview-status
-// seam; only a DEFINITIVE not-provisioned flips the state (an unconfigured / can't-answer
-// seam keeps the normal fastpath, with the CLI's own clean "not set up yet" error as the
-// backstop — so no regression on local/dev or a transient MCP blip). This is a DISTINCT
-// axis from noResolvableStore/noStoreAccess and gets its own honest notice below.
-const storeNotSetUp =
-  hasStoreAccess && !noResolvableStore && isStoreNotSetUp(await readTenantPreviewStatus(appDomain));
-
-// The gate for rendering the setup-command + activity-poll flow: eligible AND a real
-// store to point it at AND that store is actually provisioned. Use this (never the raw
-// hasStoreAccess) for anything that mints a command or starts the activity poll.
-const canSetupStore = hasStoreAccess && !noResolvableStore && !storeNotSetUp;
-
-// vc-app-binding safety-net (08-18, §5): a BROWSER-FIRST developer reached this page
-// via the storefront's own sign-in (a tot_session cookie) without ever crossing an
-// MCP binding seam (rendezvous approve / native OAuth), so `appForCaller` doesn't
-// resolve them and the `tot start` command we're about to hand them would 403 with
-// "No version-control app is bound." Ensure the binding now — on-behalf of the
-// verified session identity, via the app's private_key_jwt channel. Best-effort +
-// fail-open (never blocks render), throttled to once per browser session so it stays
-// off the hot render path; the authority-seam binding + backfill remain the real
-// guarantee. Gated on canSetupStore (entitled + resolvable + provisioned), the exact
-// condition under which we render a runnable command.
-//
-// The binding itself is control-plane (authors a forge/MCP binding under the app
-// credential), so this renderer page reaches it only over the network — POST
-// /api/dev/ensure-vc-binding — never by static import (renderer-carve moat). The
-// endpoint re-derives the developer from the forwarded session cookie.
-if (canSetupStore && session && !Astro.cookies.has("tot_vc_bound")) {
-  const vcBind = await fetch(new URL(`${basePath}/api/dev/ensure-vc-binding`, url.origin), {
-    method: "POST",
-    headers: { cookie: Astro.request.headers.get("cookie") ?? "" },
-  })
-    .then((r) => (r.ok ? r.json() : null))
-    .catch(() => null);
-  if (vcBind?.ok) {
-    // Throttle only on a real success — a fail-open miss retries on the next load.
-    Astro.cookies.set("tot_vc_bound", "1", {
-      path: "/",
-      httpOnly: true,
-      sameSite: "lax",
-      secure: true,
-      maxAge: 3600, // re-check hourly so a lost/revoked binding self-heals
-    });
-  }
-}
-
-// Signed in, but either no developer capability on any store OR (staff bypass) no store
-// resolves for this viewer/host — an honest recovery state (not a 401): show what to
-// do, not the fastpath. NOTE: storeNotSetUp is deliberately NOT folded in here — it is
-// its own state with its own notice, so this stays computed from resolvable-store only.
-const noStoreAccess = signedIn && (!hasStoreAccess || noResolvableStore);
-// 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 && canSetupStore;
-
-// cp-env (cloud-dev-cockpit Phase 0): the file-tree/viewer/diff + click-to-source
-// cockpit modules (lib/dev/cockpit/files.ts, clickToSource.ts) are ENVIRONMENT-AWARE
-// — same client JS, different endpoint base. Local: the astro-dev-only /__tot/* plugins. Hosted: new
-// /api/dev/* Astro API routes, landing incrementally (cp-tree/cp-file/cp-write/cp-diff/
-// cp-locate — separate cards). Resolving it here, unconditionally, means those cards
-// don't each have to invent the same env check; on isLocalDevLoop this is a no-op
-// (resolves to the unchanged /__tot base). See decision architecture-environment-aware-cockpit.
-const apiBase = resolveDevApiBase(isLocalDevLoop, basePath);
-
-// Dev-only client widgets (Monitor, Stepper, Ask, Files, click-to-source) and
-// the hosted activity rail live in typed apps/storefront/src/lib/dev/cockpit/*
-// modules, imported from processed <script> tags below (ADR 0013) instead of
-// being hand-mirrored here as raw strings. apiBase/isLocalDevLoop/appDomain/
-// basePath cross into those modules via data-cockpit-* attrs on <body>.
----
-
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="robots" content="noindex, nofollow" />
-    <title>Developer Cockpit — {appDomain}</title>
-    {/* cockpit-theme-persist: seed data-theme from the STORED choice before the stylesheet/
-        style below ever paint, so a reload of a manually-toggled theme doesn't flash the OS
-        default first. Runs before the theme toggle's own script (end of body) exists — it
-        only ever READS here; the toggle is what writes. No stored choice → leave the
-        attribute unset, so the `@media (prefers-color-scheme)` block keeps deciding. */}
-    <script nonce={cspNonce} is:inline>
-      (function () {
-        try {
-          var v = localStorage.getItem("tot.theme");
-          if (v === "dark" || v === "light") document.documentElement.setAttribute("data-theme", v);
-        } catch (e) {}
-      })();
-    </script>
-    {/* Web fonts are self-hosted via `@/styles/fonts.css` (imported above). */}
-    <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); }
-      .cockpit-lede { margin: -0.6rem 0 1.6rem; font-family: var(--body); font-size: .92rem; color: var(--muted); max-width: 60ch; }
-      .cockpit-lede strong { color: var(--ink); font-weight: 600; }
-      .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); }
-      /* Obstacle lane (v2 §6): a failed `tot start` — an ERROR, so it uses the
-         existing --warn (red) token triple (NO new palette values), which also sets
-         it apart from the amber "went quiet". Content is a stacked block, so the
-         beacon aligns to the top rather than centering on a tall card. */
-      .bridge[data-live="obstacle"] { align-items: flex-start; border-color: var(--warn-line); background: var(--warn-wash); }
-      .bridge[data-live="obstacle"] .beacon { background: var(--warn); }
-      .b-obstacle { flex: 1 1 100%; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
-      .b-ob-title { color: var(--warn); }
-      .b-ob-title::before { content: "\26A0  "; } /* ⚠ warning glyph */
-      .b-ob-msg { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }
-      .b-ob-fix { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
-      .b-ob-lead { color: var(--warn); font-weight: 700; }
-      .b-ob-cmd { font-family: var(--mono); font-size: .8rem; background: var(--bg-2); color: var(--ink); padding: .1rem .35rem; border-radius: var(--r-sm); }
-      /* These three set their own `display`, which (author > UA) would beat the UA
-         [hidden]{display:none} — so the script's `.hidden` toggles silently no-op on
-         them. Re-assert [hidden] at higher specificity so hidden means hidden: the
-         obstacle block and the live-strip text swap cleanly, AND the quiet-state CTA
-         (b-go) actually hides. */
-      .b-txt[hidden], .b-go[hidden], .b-obstacle[hidden] { display: none; }
-      @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; }
-      .tip-branch { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); line-height: 1.5; }
-      .tip-branch a { color: inherit; text-decoration: underline; }
-
-      /* ---- Guided accordion: a step body animates IN when opened (collapse is instant
-             + synchronous so the flow can't get stuck). Shared with isLocalDevLoop —
-             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); }
-      /* Standard "copy this code block" affordance, docked in the terminal chrome.
-         Revealed once the command is minted; its icon→check swap is the obvious,
-         inline copy confirmation (no reliance on the transient toast). */
-      .term-copy {
-        margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
-        width: 30px; height: 26px; padding: 0; border-radius: var(--r-sm); cursor: pointer;
-        background: rgba(255,255,255,.04); border: 1px solid var(--term-line);
-        color: var(--term-dim); transition: color .12s, background .12s, border-color .12s;
-      }
-      .term-copy:hover { color: var(--term-fg); background: rgba(255,255,255,.09); border-color: var(--term-dim); }
-      .term-copy svg { width: 15px; height: 15px; }
-      .term-copy .ic-check { display: none; }
-      .term-copy[data-copied="1"] { color: var(--term-ok); border-color: var(--term-ok); }
-      .term-copy[data-copied="1"] .ic-copy { display: none; }
-      .term-copy[data-copied="1"] .ic-check { display: block; }
-      /* Rendezvous approval widget — the confirm-your-terminal step after pasting. */
-      .rzv { margin-top: 14px; }
-      .rzv[hidden] { display: none; }
-      .rzv-wait { display: flex; align-items: center; gap: 10px; font-size: .92rem; opacity: .8; }
-      .rzv-confirm { border: 1px solid var(--term-ok, #0e9f8e); border-radius: 12px; padding: 16px 18px; background: color-mix(in srgb, var(--term-ok, #0e9f8e) 8%, transparent); }
-      .rzv-q { margin: 0 0 6px; font-weight: 600; }
-      .rzv-fp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.75rem; letter-spacing: .12em; text-align: center; margin: 8px 0 16px; }
-      .rzv-actions { display: flex; gap: 10px; flex-wrap: wrap; }
-      .rzv-actions .cta { margin: 0; }
-      .rzv-deny { background: none; border: 1px solid currentColor; opacity: .7; border-radius: 8px; padding: 8px 14px; cursor: pointer; color: inherit; font: inherit; }
-      .rzv-deny:hover { opacity: 1; }
-      .rzv-deny[disabled], .rzv-actions .cta[disabled] { opacity: .5; cursor: default; }
-      .rzv-done { margin-top: 12px; font-weight: 600; }
-      .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-publishbtn { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
-      .df-publishbtn:hover { background: var(--accent-wash); }
-      .df-publishbtn:disabled { opacity: .6; cursor: default; }
-      .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; } }
-
-      /* ---- connect the MCP (d3-unhold-dev-step0-connect-mcp) ---- */
-      #stage-mcp { margin-top: 2rem; }
-      /* disable ligatures so `--transport` renders as literal characters, not a glyph */
-      #mcpCmdText { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
-
-      /* ---- 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
-    data-cockpit-api-base={apiBase}
-    data-cockpit-is-dev={isLocalDevLoop ? "true" : "false"}
-    data-cockpit-app-domain={appDomain}
-    data-cockpit-base-path={basePath}
-  >
-    <div class="wrap">
-      <header class="topbar">
-        <div class="brand">
-          <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 Cockpit</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>
-
-      {/* U1 anchor — name the surface so a developer knows which page is "home". */}
-      <p class="cockpit-lede">This is your <strong>Developer Cockpit</strong> — your home base while your store spins up.</p>
-
-      {signedIn === false && (
-        <div class="notice">
-          {/* d1 (board: d1-unmask-invite-email) — the invitee owns this address (the
-              link was sent to it), so masking it back to them is pointless friction.
-              Show the FULL invite email when we actually have it; NEVER show the redacted
-              hint to its owner. This branch is signed-OUT, so there's no session.email to
-              read; the recovery link arrives carrying only a redacted `email_hint` (the
-              full address is masked UPSTREAM by the CLI before it ever reaches this page —
-              see report), so the full email is genuinely unavailable here and we fall back
-              to neutral copy rather than re-displaying the redacted form. `recoveryEmailFull`
-              lights up automatically the moment a full address is available. */}
-          <p>{isCredentialRecovery
-            ? recoveryEmailFull
-              ? <>Sign in with your invite email, <strong>{recoveryEmailFull}</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">
-          {noResolvableStore
-            ? <>
-                <p>You're signed in{session?.email ? <>{" "}as <strong>{session.email}</strong></> : null}, but this page doesn't have a store to set up yet. Pick one from your dashboard to get its setup command.</p>
-                <a class="action" href="/dashboard">Pick a store</a>
-              </>
-            : <>
-                <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>
-      )}
-
-      {/* STORE-NOT-SET-UP notice — a real, signed-in developer whose store's repo isn't
-          provisioned yet. We deliberately withhold the setup command here (canSetupStore
-          is false, so the mint fastpath + activity rail below don't render) rather than
-          hand out a `tot start` that would die at checkout. Honest, low-friction copy:
-          nothing for them to do but wait + reload. */}
-      {storeNotSetUp && (
-        <div class="notice">
-          <p>You're all set{session?.email ? <>{" "}as <strong>{session.email}</strong></> : null} — but <strong>{appDomain}</strong>'s store is still being set up. Your one-paste setup command appears here the moment it's ready. Nothing to do on your end; check back shortly, or ask your Token of Trust contact if it's urgent.</p>
-          <a class="action" href="/cockpit">Reload</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" id="bTxt">
-            <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>
-          {/* Obstacle lane (v2 §6): a failed `tot start` (wrong Node, missing pnpm,
-              install/clone error) beacons why via the setup command's activity token;
-              the strip becomes an actionable fix card. Text is set via textContent from
-              the SERVER-composed remediation copy (obstacleStore) — never innerHTML. */}
-          <div class="b-obstacle" id="bObstacle" hidden>
-            <span class="b-kicker b-ob-title" id="bObTitle">Setup hit a snag</span>
-            <p class="b-ob-msg" id="bObMsg"></p>
-            <p class="b-ob-fix"><span class="b-ob-lead">Fix:</span> <code class="b-ob-cmd" id="bObCmd" hidden></code> <span id="bObNote"></span></p>
-          </div>
-        </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 into a new <code>{appDomain}</code> folder, 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">{canSetupStore
-            ? 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.</>
-            : storeNotSetUp
-              ? <>We're finishing setting up <strong>{appDomain}</strong>. Your one-paste setup command appears here the moment it's ready — check back shortly.</>
-              : <>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>{canSetupStore && (
-              <button class="term-copy" id="copyIcon" type="button" aria-label="Copy the command" title="Copy the command" hidden>
-                <svg class="ic-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                <svg class="ic-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
-              </button>
-            )}</div>
-            <div class="term-body"><span class="c"># your personal, single-use setup command</span>
-<span class="cmd is-placeholder" id="cli-cmd-text">{canSetupStore ? (isCredentialRecovery ? "→ click “Generate a fresh setup command” below" : "→ click “Generate my setup command” below") : storeNotSetUp ? "→ available once your store finishes setting up" : "→ available once you’re signed in via your invite"}</span></div>
-          </div>
-
-          {canSetupStore && (
-            <div class="cmd-actions">
-              <button class="cta" id="copyCmd" type="button" data-fastpath="1" data-base-path={basePath}>
-                <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>
-          )}
-
-          {/* Rendezvous approval — after you paste the command, your terminal connects here and
-              you confirm the code it printed matches (the load-bearing security step: it's how
-              you prove it's YOUR terminal, not an interceptor's). Hidden until a command is
-              generated; the client script drives the wait → confirm → done states. */}
-          {canSetupStore && (
-            <div class="rzv" id="rzvApprove" hidden aria-live="polite">
-              <div class="rzv-wait" id="rzvWait" hidden>
-                <span class="radar" aria-hidden="true"></span>
-                <span>Waiting for your terminal to connect — run the pasted command, then come back here.</span>
-              </div>
-              <div class="rzv-confirm" id="rzvConfirm" hidden>
-                <p class="rzv-q">Your terminal is asking to sign in. Confirm the code it printed matches:</p>
-                <p class="rzv-fp" id="rzvFp">····-····</p>
-                <div class="rzv-actions">
-                  <button class="cta" id="rzvApproveBtn" type="button">Yes — that's my terminal, approve</button>
-                  <button class="rzv-deny" id="rzvDenyBtn" type="button">Not me — reject</button>
-                </div>
-              </div>
-              <p class="rzv-done" id="rzvDone" hidden></p>
-            </div>
-          )}
-          <p class="cmd-note" id="cli-cmd-note">{canSetupStore
-            ? <>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 <em>from the folder where you keep projects</em> — it creates a <code>{appDomain}</code> folder there with your store's code, signs you in, runs your store, and opens your browser. Nothing to retype.</>
-            : storeNotSetUp
-              ? <>Nothing to do on your end — a Token of Trust reviewer is finishing your store's first setup. Once it's ready, reload and this page hands you the one-paste command.</>
-              : <>You'll need <em>Node.js 22.12+ (24 LTS recommended) 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 clone {appDomain}</code>, <code>cd {appDomain}</code>, <code>tot dev</code>. New to Node? Get Node 24 (LTS) 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 (or an AI coding agent like Claude — same idea) and your running store — hot reload is on, so every save reloads the store and lands in <strong>Your activity</strong> here, live. Keep the terminal running <code>tot start</code>/<code>tot dev</code> open too, watching for build errors — need the command line for something else? Open a new terminal instead of closing that one.</p>
-            <p class="tip-branch">No need to think about git branches for this — just keep editing and running <code>tot preview</code>; it updates the same change every time. <a href="https://github.com/tokenoftrust/storefront/blob/feature/8500-storefront-integration/docs/kb/develop-ship-and-connect-domain.md#branching-is-an-advanced-feature--you-almost-never-need-it" target="_blank" rel="noopener">Working on two things at once? Read this first →</a></p>
-          </div>
-        </section>
-          </div>
-        </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, <code>tot preview</code> bundles it into a compliance-reviewed preview build; once that preview looks right, <code>tot ship</code> promotes it 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">tot preview</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. Once it reconciles cleanly, <code>tot ship</code> promotes it live — it always shows you the diff and asks for a confirm first.</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>
-                    <button type="button" class="df-mini df-publishbtn" id="filesPublishBtn" hidden>Publish</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>
-      )}
-
-      {/* d3-unhold-dev-step0-connect-mcp: un-held now that MCP access follows the tot20
-          developer grant (federated sign-in / 8425 Stage B is live) — an invited developer
-          already has what this needs, so it's no longer aspirational. Copy/command carried
-          over from the pre-U1-strip /dev (dev.astro @ 110f73e); the "FUNCTIONALLY PENDING"
-          caveat from e58eab5 is dropped since the prerequisite is now real. Static, renders
-          unconditionally like the "next" teaser grid below — not gated on capability. */}
-      <section class="stage" id="stage-mcp">
-        <div class="stage-body">
-          <span class="kicker">Connect the MCP</span>
-          <h1>Bring your AI assistant into the loop.</h1>
-          <p class="goal">The Regulated Storefront is a native AI platform — connecting the Token of Trust MCP lets Claude, Cursor, or any MCP-speaking assistant work your store directly. It works with every major AI platform. On Claude:</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">Claude Code</span>
-              <button class="term-copy" id="mcpCopyIcon" type="button" aria-label="Copy the command" title="Copy the command">
-                <svg class="ic-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-                <svg class="ic-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
-              </button>
-            </div>
-            <div class="term-body"><span class="c"># add the Token of Trust MCP</span>
-<span class="cmd" id="mcpCmdText">claude mcp add --transport http tot https://mcp.tokenoftrust.com/mcp</span>
-<span class="c">&nbsp;</span>
-<span class="c"># then run /mcp in Claude and sign in with your invite email</span></div>
-          </div>
-          <p class="cmd-note">Other assistants: point them at <code>https://mcp.tokenoftrust.com/mcp</code>. Sign in with the email your invite came to — your access follows your developer grant on this store.</p>
-        </div>
-      </section>
-
-      {/* 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. */}
-      <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">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>
-      import { initThemeToggle } from "@/lib/dev/cockpit/themeToggle";
-      initThemeToggle();
-    </script>
-
-    <script>
-      import { initMcpCopy } from "@/lib/dev/cockpit/mcpCopy";
-      initMcpCopy();
-    </script>
-
-    <script>
-      import { initInfoPopover } from "@/lib/dev/cockpit/infoPopover";
-      initInfoPopover();
-    </script>
-
-    <script>
-      import { initCopyCommand } from "@/lib/dev/cockpit/copyCommand";
-      initCopyCommand();
-    </script>
-
-    {hostedActivity && (
-      <script>
-        import { initHostedActivity } from "@/lib/dev/cockpit/hostedActivity";
-        initHostedActivity();
-      </script>
-    )}
-    {isLocalDevLoop && (
-      <script>
-        import { initStepper } from "@/lib/dev/cockpit/stepper";
-        initStepper();
-      </script>
-    )}
-    {isLocalDevLoop && (
-      <script>
-        import { initAsk } from "@/lib/dev/cockpit/ask";
-        initAsk();
-      </script>
-    )}
-    {isLocalDevLoop && (
-      <script>
-        import { initMonitor } from "@/lib/dev/cockpit/monitor";
-        initMonitor();
-      </script>
-    )}
-    {isLocalDevLoop && (
-      <script>
-        import { initFiles } from "@/lib/dev/cockpit/files";
-        initFiles();
-      </script>
-    )}
-    {isLocalDevLoop && (
-      <script>
-        import { initClickToSource } from "@/lib/dev/cockpit/clickToSource";
-        initClickToSource();
-      </script>
-    )}
-  </body>
-</html>