npm - @tokenoftrust/storefront-runner - Versions diffs - 0.1.0 - Mend

@tokenoftrust/storefront-runner 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/apps/storefront/src/pages/dev.astro ADDED Viewed

@@ -0,0 +1,653 @@
+---
+/**
+ * /dev — the developer's getting-started home (what a granted developer lands on after
+ * sign-in). Deliberately NOT the operator/reconcile control plane: a small, on-brand view
+ * of the shipped first-run story — one command to a running store, edit-or-ask to change
+ * it, then a separate, gated "submit for review" step with a real compliance verdict.
+ *
+ * Brand: this page is a STANDALONE document (it bypasses Layout.astro), but it mirrors the
+ * marketing home's design system directly — the tokenoftrust tenant theme (tenants/
+ * tokenoftrust/theme.json): navy ink #0A2540 + trust teal #0E9F8E on cool-white #F7F9FC,
+ * Plus Jakarta Sans / Inter / JetBrains Mono, radius-16 cards, and the home hero's
+ * signature "live green-check status card" — reused here to reflect the developer's own
+ * first run. Same CSP as every storefront response (googleapis/gstatic are allowlisted, so
+ * the shared typefaces load); inline style/script carry this request's nonce.
+ *
+ * Value-first ordering mirrors the CLI's `tot start`: the running store comes first;
+ * connecting Claude is the supercharge offered after the aha, not a gate. Copy is honest to
+ * what shipped — no Docker prerequisite, no sub-second-HMR claim (checkout save→reload is a
+ * ~2–4s full page reload).
+ */
+import { readViewerSession } from "@/lib/auth/route";
+import { staticTenants } from "@/config/tenants";
+export const prerender = false;
+const cspNonce = Astro.locals.cspNonce;
+const url = new URL(Astro.request.url);
+const session = await readViewerSession({ cookies: Astro.cookies });
+const signedIn = !!session;
+// The live demo calls content_edit as the storefront operator, but it's gated behind the
+// developer's own session + capability (same gate the /api endpoint enforces). Mirror that
+// here so a logged-out / no-capability visitor sees an intentional teaser, never a 401.
+const canUseAI = signedIn && !!session?.capability && session.capability !== "none";
+// Resolve the developer's tenant from their first membership (or ?tenant= for preview).
+const wanted = (url.searchParams.get("tenant") ?? session?.tenants?.[0]?.resource ?? "").toLowerCase();
+const tenant =
+  (wanted
+    ? staticTenants.find((t) =>
+        [t.appDomain, t.tenant_id, t.canonicalDomain, ...t.domains].some(
+          (d) => d?.toLowerCase() === wanted,
+        ),
+      )
+    : null) ??
+  staticTenants.find((t) => t.tenant_id === "tokenoftrust") ??
+  staticTenants[0];
+const appDomain = tenant?.appDomain ?? "tokenoftrust.com";
+const dir = appDomain; // clone lands in a dir named after the tenant
+const localUrl = `http://localhost:4321/${appDomain}/`;
+const firstName = session?.email?.split("@")[0]?.split(/[.+]/)[0] ?? null;
+---
+<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>Ship your first change — {appDomain}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+    />
+    <style nonce={cspNonce}>
+      :root {
+        /* home tokens — tenants/tokenoftrust/theme.json */
+        --bg: #f7f9fc; --surface: #fff; --ink: #0a2540; --ink-2: #33415b; --muted: #55637a;
+        --accent: #0e9f8e; --accent-ink: #0b7a6d; --accent-wash: #e7f6f4; --accent-line: #b8e6df;
+        --border: #e3e8ef; --warn: #c23b3b; --warn-wash: #fbecec; --warn-line: #f0cccc;
+        /* dark insets — the terminals, on-brand (navy, not warm) */
+        --term: #0a1a2f; --term-fg: #dbe6f2; --term-dim: #5f7189; --term-prompt: #2dd4bf;
+        --term-ok: #34d399; --term-warn: #fbbf24; --term-line: #14263f;
+        /* Claude window — a warmer teal-navy, distinct but same family */
+        --cl-bg: #0c2233; --cl-fg: #e6eef5; --cl-dim: #6d879c; --cl-prompt: #35cfbd;
+        --cl-line: #163247; --cl-ok: #34d399;
+        --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-full: 999px;
+        --sh-md: 0 6px 24px -8px rgba(10, 37, 64, .14);
+        --sh-lg: 0 24px 60px -22px rgba(10, 37, 64, .22);
+        --display: "Plus Jakarta Sans", system-ui, sans-serif;
+        --body: "Inter", system-ui, sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        color-scheme: light;
+      }
+      * { box-sizing: border-box; }
+      html { -webkit-text-size-adjust: 100%; }
+      body {
+        margin: 0; background: var(--bg); color: var(--ink-2);
+        font: 400 16px/1.6 var(--body); letter-spacing: -.011em;
+        padding: clamp(1.25rem, 4vw, 3rem) 1.25rem 5rem;
+        -webkit-font-smoothing: antialiased;
+        /* faint teal wash top-left, echoing the home hero backdrop */
+        background-image: radial-gradient(60rem 32rem at 12% -8%, #e9f6f3 0%, transparent 60%);
+        background-repeat: no-repeat;
+      }
+      .wrap { max-width: 61rem; margin: 0 auto; }
+      .col { max-width: 44rem; }
+      .mono { font-family: var(--mono); }
+      h1, h2, h3 { font-family: var(--display); color: var(--ink); letter-spacing: -.02em; margin: 0; }
+      strong { font-weight: 600; color: var(--ink); }
+      code, .inline { font-family: var(--mono); font-size: .86em; }
+      /* --- eyebrow with the leading teal tick (home's structural motif) --- */
+      .eyebrow { display: inline-flex; align-items: center; gap: .6em; font: 600 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.1rem; }
+      .eyebrow::before { content: ""; width: 1.6em; height: 2px; background: var(--accent); flex: none; }
+      .eyebrow b { color: var(--muted); font-weight: 600; }
+      /* --- hero --- */
+      .hero { display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: start; margin: 0 0 3.25rem; }
+      @media (min-width: 52rem) { .hero { grid-template-columns: 1.08fr .92fr; align-items: center; } }
+      h1 { font-size: clamp(2rem, 5.6vw, 3.05rem); line-height: 1.02; font-weight: 800; letter-spacing: -.032em; margin: 0 0 .7rem; text-wrap: balance; }
+      h1 .accent { color: var(--accent); }
+      .lede { font-size: 1.09rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 1.5rem; max-width: 33rem; }
+      .lede code { color: var(--accent-ink); }
+      .wins { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; max-width: 33rem; }
+      .wins li { display: flex; gap: .55rem; align-items: baseline; font-size: .92rem; color: var(--ink-2); }
+      .wins .tick { flex: none; color: var(--accent); font-weight: 700; }
+      .wins .wtag { font-weight: 600; color: var(--ink); }
+      /* --- status card: the signature, mirroring the home hero's live card --- */
+      .status { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
+      .status-bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: #fbfcfe; }
+      .status-bar .host { flex: 1; font: 500 .74rem/1 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .livepill { display: inline-flex; align-items: center; gap: .35rem; font: 600 .64rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: .3rem .5rem; }
+      .livepill .blip { width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
+      .status-row { display: flex; align-items: center; gap: .7rem; padding: .72rem .95rem; border-bottom: 1px solid #eef1f6; font-size: .9rem; }
+      .status-row:last-of-type { border-bottom: 0; }
+      .status-row .ic { flex: none; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; border-radius: 50%; font: 700 .72rem/1 var(--body); }
+      .status-row .ic.ok { color: var(--accent-ink); background: var(--accent-wash); }
+      .status-row .ic.warn { color: var(--warn); background: var(--warn-wash); }
+      .status-row .k { flex: 1; color: var(--ink); font-weight: 500; }
+      .status-row .v { font: 500 .78rem/1 var(--mono); color: var(--muted); }
+      .status-row .v.warn { color: var(--warn); }
+      .status-foot { padding: .7rem .95rem; font: 500 .72rem/1.4 var(--mono); color: var(--muted); background: #fbfcfe; }
+      /* --- sign-in (inline, on-brand) --- */
+      .signin { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 1.15rem 1.4rem; margin: 0 0 2.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.4rem; }
+      .signin p { margin: 0; color: var(--ink-2); font-size: .95rem; }
+      .signin a, .cta { flex: none; display: inline-flex; align-items: center; gap: .4rem; background: var(--accent); color: #fff; text-decoration: none; font: 600 .95rem/1 var(--display); padding: .68rem 1.15rem; border-radius: var(--r-full); transition: transform .18s ease, background .18s ease; }
+      .signin a:hover, .cta:hover { background: var(--accent-ink); transform: translateY(-1px); }
+      /* --- fast-path terminal sign-in (first-class: bring your web sign-in to the terminal) ---
+         A teal-ringed white card, elevated from the plain `tot start` terminal, that reads as
+         THE accelerator for a dev already signed in here (arrived via the magic link). The
+         copy-the-whole-command button is the primary affordance — typing is never the easy path. */
+      .fastpath { background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 1.2rem 1.4rem 1.35rem; margin: 1.4rem 0 0; }
+      .fastpath-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font: 600 .66rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: .3rem .55rem; margin: 0 0 .75rem; }
+      .fastpath-eyebrow .blip { width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
+      .fastpath h3 { font-size: 1.06rem; line-height: 1.2; margin: 0 0 .4rem; }
+      .fastpath-lede { margin: 0 0 1rem; color: var(--ink-2); font-size: .95rem; }
+      .fastpath-lede code { font-family: var(--mono); font-size: .86em; background: #eef1f6; border-radius: var(--r-sm); padding: .08rem .34rem; color: var(--ink); }
+      .fastpath .term-shell { margin: 0 0 1rem; }
+      .fastpath-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.1rem; }
+      .fastpath .cta { border: 0; cursor: pointer; min-width: 12.5rem; justify-content: center; }
+      .fastpath .cta:disabled { opacity: .7; cursor: default; transform: none; }
+      .fastpath-note { flex: 1; min-width: 13rem; margin: 0; font: 500 .8rem/1.45 var(--mono); color: var(--muted); }
+      .fastpath-note em { color: var(--ink-2); font-style: normal; font-weight: 600; }
+      /* --- steps --- */
+      .step { margin: 0 0 2.75rem; }
+      .label { display: flex; align-items: center; gap: .6rem; font: 600 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .85rem; }
+      .label .n { width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--accent-line); display: grid; place-items: center; font: 700 .82rem/1 var(--display); letter-spacing: 0; flex: none; }
+      .step h2 { font-size: 1.24rem; line-height: 1.15; margin: 0 0 .35rem; }
+      .step p { margin: 0 0 .9rem; color: var(--ink-2); }
+      .step p code, .inline { background: #eef1f6; border-radius: var(--r-sm); padding: .08rem .34rem; color: var(--ink); }
+      /* --- terminal (dark navy inset) --- */
+      .term { background: var(--term); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
+      .term-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-bottom: 1px solid var(--term-line); }
+      .dot { width: .7rem; height: .7rem; border-radius: 50%; }
+      .dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }
+      .term-title { margin-left: .5rem; font: 500 .72rem/1 var(--mono); color: var(--term-dim); }
+      .term pre { margin: 0; padding: 1rem 1.1rem 1.15rem; overflow-x: auto; }
+      .term code { font-family: var(--mono); font-size: .83rem; line-height: 1.85; color: var(--term-fg); white-space: pre; }
+      .cmt { color: var(--term-dim); }
+      .prompt { color: var(--term-prompt); }
+      .arrow { color: #7f93ab; }
+      .vok { color: var(--term-ok); }
+      .vwarn { color: var(--term-warn); }
+      .vhint { color: #cbd7e6; }
+      .copy { position: absolute; top: .55rem; right: .6rem; z-index: 2; border: 1px solid var(--term-line); border-radius: var(--r-sm); background: #10233c; color: #93a6bf; font: 600 .68rem/1 var(--mono); padding: .4rem .55rem; cursor: pointer; }
+      .copy:hover { background: #16304f; color: #cfe0ee; }
+      .term-shell { position: relative; }
+      .dir { color: #7f93ab; }
+      /* --- Claude window (warm teal-navy, distinct from the shell) --- */
+      .claude { background: var(--cl-bg); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
+      .claude .term-bar { border-bottom: 1px solid var(--cl-line); }
+      .claude .term-title { color: var(--cl-dim); margin-left: .15rem; }
+      .claude pre { margin: 0; padding: 1rem 1.1rem 1.15rem; overflow-x: auto; }
+      .claude code { font-family: var(--mono); font-size: .83rem; line-height: 1.85; color: var(--cl-fg); white-space: pre; }
+      .claude .prompt { color: var(--cl-prompt); font-weight: 600; }
+      .claude .cmt { color: var(--cl-dim); }
+      .claude .ok { color: var(--cl-ok); }
+      .claude .mcp { color: var(--cl-prompt); font-weight: 600; }
+      .claude .you { color: #cbdaea; }
+      .spark { color: var(--cl-prompt); font-size: .82rem; line-height: 1; }
+      .follows { margin-top: .9rem; }
+      /* --- iteration demo (mini browser) --- */
+      .demo { margin-top: 1rem; display: grid; grid-template-columns: 1fr; gap: .9rem; }
+      @media (min-width: 40rem) { .demo { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
+      .browser { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-md); }
+      .browser-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-bottom: 1px solid var(--border); background: #fbfcfe; }
+      .browser-bar .dot { width: .58rem; height: .58rem; }
+      .url { flex: 1; font: 500 .72rem/1 var(--mono); color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: .4rem .55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .stage { padding: 1.4rem 1.1rem 1.6rem; flex: 1; display: flex; flex-direction: column; justify-content: center; transition: background .5s ease; }
+      .stage .brandline { font: 600 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .5rem; transition: color .5s ease; }
+      .stage .title { font: 800 1.35rem/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); margin: 0; transition: color .5s ease; }
+      .reload { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font: 600 .68rem/1 var(--mono); color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: .32rem .55rem; width: max-content; opacity: 0; }
+      .caption { font-size: .84rem; color: var(--muted); margin: .6rem 0 0; }
+      .caption em { color: var(--ink-2); font-style: normal; font-weight: 600; }
+      /* the AI reskin preview — the same mini-browser, gone dark */
+      .stage.dark { background: #0c2233; }
+      .stage.dark .brandline { color: var(--cl-prompt); }
+      .stage.dark .title { color: #eaf1f7; }
+      .reskin { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font: 600 .68rem/1 var(--mono); color: #eaf1f7; background: #14324a; border: 1px solid #21445f; border-radius: var(--r-full); padding: .32rem .55rem; width: max-content; }
+      /* the loop, looping: on view, the save→reload beat replays continuously —
+         type the edit in, the title reloads (fade + flash + badge), hold, erase,
+         repeat, on a calm ~6s cycle. steps(90) is high so the 5–22% typing window
+         still lands ~15 discrete "keystrokes"; the smooth beats stay on ease. */
+      @media (prefers-reduced-motion: no-preference) {
+        .demo.play .typed { animation: typeloop 6s steps(90) 0s infinite; }
+        .demo.play .title { animation: swaploop 6s ease-in-out 0s infinite; }
+        .demo.play .hl { animation: flashloop 6s ease-in-out 0s infinite; }
+        .demo.play .reload { animation: poploop 6s ease-in-out 0s infinite; }
+      }
+      @keyframes typeloop { 0%,5% { width: 0; } 22% { width: 100%; } 80% { width: 100%; } 90%,100% { width: 0; } }
+      @keyframes swaploop { 0%,20% { opacity: 1; } 24% { opacity: .35; } 30%,100% { opacity: 1; } }
+      @keyframes flashloop { 0%,22% { background: transparent; } 28% { background: #d9f3ee; } 44%,100% { background: transparent; } }
+      @keyframes poploop {
+        0%,24% { opacity: 0; transform: translateY(3px); }
+        32%,76% { opacity: 1; transform: none; }
+        86%,100% { opacity: 0; transform: translateY(3px); }
+      }
+      .hl { border-radius: 3px; padding: 0 .12em; }
+      .typed { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
+      /* --- connect + platforms notes --- */
+      .platforms { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }
+      .platforms code { font-family: var(--mono); font-size: .86em; background: #eef1f6; border-radius: var(--r-sm); padding: .08rem .34rem; color: var(--ink); }
+      .platforms a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
+      /* --- ask form (live demo) --- */
+      .ask-term { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem; }
+      .ask-prompt { color: var(--term-prompt); font-weight: 700; }
+      .ask-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--term-fg); font-family: var(--mono); font-size: .84rem; }
+      .ask-input::placeholder { color: var(--term-dim); }
+      .ask-input:disabled { color: var(--term-dim); }
+      .ask-submit { flex: none; border: 1px solid var(--term-line); border-radius: var(--r-sm); background: #10233c; color: #93a6bf; font: 600 .72rem/1 var(--mono); padding: .42rem .8rem; cursor: pointer; }
+      .ask-submit:hover:not(:disabled) { background: #16304f; color: #cfe0ee; }
+      .ask-submit:disabled { opacity: .5; cursor: default; }
+      .ask-term.busy .ask-prompt { animation: blink 1s steps(2) infinite; }
+      @keyframes blink { 50% { opacity: .35; } }
+      #ai-demo-log { min-height: 2.5rem; }
+      .ask-gate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .7rem; font-size: .86rem; color: var(--muted); }
+      .ask-gate a { color: var(--accent-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-line); }
+      .ask-gate a:hover { border-bottom-color: var(--accent); }
+      /* --- submit (a white card + teal chip; the verdict, not a warm band) --- */
+      .submit { margin-top: 3.5rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: clamp(1.3rem, 4vw, 2rem); }
+      .submit h2 { font-size: 1.24rem; margin: 0 0 .35rem; }
+      .submit p { color: var(--ink-2); margin: 0 0 .9rem; }
+      .submit p code { background: #eef1f6; border-radius: var(--r-sm); padding: .08rem .34rem; color: var(--ink); }
+      .gatechip { display: inline-flex; align-items: center; gap: .4rem; font: 600 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r-full); padding: .35rem .6rem; margin-bottom: .9rem; }
+      .foot { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
+      .foot a { color: var(--accent-ink); text-decoration: none; }
+      .foot a:hover { text-decoration: underline; }
+      a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    </style>
+  </head>
+  <body>
+    <main class="wrap">
+      <!-- HERO — copy left, the live status card right (mirrors the marketing home hero) -->
+      <section class="hero">
+        <div>
+          <p class="eyebrow">Regulated Storefront <b>·</b> Developer</p>
+          <h1>{firstName ? <>Welcome, {firstName}. </> : null}Ship your first change to <span class="accent">{appDomain}</span>.</h1>
+          <p class="lede">Copy the command below into your terminal to get going.</p>
+          <ul class="wins">
+            <li><span class="tick">✦</span><span><span class="wtag">Compliance-aware previews.</span> Every submit is checked against your customized compliance rules — so you can develop rapidly with the latest AI agents — safely.</span></li>
+            <li><span class="tick">✦</span><span><span class="wtag">Errors that explain themselves.</span> When something's off you get the exact next step — never a stack trace or a broken shared site.</span></li>
+          </ul>
+        </div>
+        <div class="status" aria-label="Your first-run status">
+          <div class="status-bar"><span class="host">{appDomain} · dev</span><span class="livepill"><span class="blip"></span> Live</span></div>
+          <div class="status-row"><span class="ic ok">✓</span><span class="k">MCP connected</span><span class="v">tot · ready</span></div>
+          <div class="status-row"><span class="ic ok">✓</span><span class="k">Store running</span><span class="v">localhost:4321</span></div>
+          <div class="status-row"><span class="ic ok">✓</span><span class="k">Ask Claude to edit</span><span class="v">content_edit</span></div>
+          <div class="status-row"><span class="ic warn">!</span><span class="k">Compliance</span><span class="v warn">2/3 · 1 fix</span></div>
+          <div class="status-foot">Everything below drives this. Not a demo dashboard — your store.</div>
+        </div>
+      </section>
+      <div class="col">
+        {signedIn === false && (
+          <div class="signin">
+            <p>Sign in with the email your invite came to — then this page shows your store and your commands.</p>
+            <a href="/auth/login?next=%2Fdev">Sign in</a>
+          </div>
+        )}
+        <!-- 1 · get it running (value-first: the running store comes before any MCP talk) -->
+        <section class="step">
+          <div class="label"><span class="n">1</span> Get it running</div>
+          <h2>Get your store running — one paste.</h2>
+          {canUseAI ? (
+            <div class="fastpath" aria-label="Get your store running in one paste, no browser">
+              <p class="fastpath-eyebrow"><span class="blip"></span> You're signed in here</p>
+              <p class="fastpath-lede">You reached this page from your magic link, so it already knows you — <strong>no Docker, nothing to provision</strong>. Copy this once: it signs your terminal in with a single-use code, then <strong>checks out your store, runs it, and opens your browser</strong> on the working site. No browser sign-in, no code to type.</p>
+              <div class="term-shell">
+                <div class="term">
+                  <div class="term-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">your terminal</span></div>
+                  <pre id="cli-signin-cmd"><code><span class="cmt"># copy both lines, paste into your terminal, press Enter</span>
+<span id="cli-signin-text">npx @tokenoftrust/cli login --code … &&
+npx @tokenoftrust/cli start</span>
+  <span class="vok">✓</span> signed in{firstName ? <> as {firstName}</> : null}
+  <span class="arrow">→</span> your store: {appDomain}
+  <span class="vok">✓</span> checked out <span class="dir">./{dir}</span>
+  <span class="arrow">→</span> {localUrl}
+  <span class="prompt">✨ You're live.</span>  <span class="cmt">edit content/home.html + save → it reloads</span></code></pre>
+                </div>
+              </div>
+              <div class="fastpath-actions">
+                <button id="cli-signin-btn" class="cta" type="button">Copy the command</button>
+                <p class="fastpath-note" id="cli-signin-note">Two lines, one copy — the sign-in code is single-use and short-lived. Paste both and press Enter; don't retype.</p>
+              </div>
+            </div>
+          ) : (
+            <>
+              <p><code class="inline">tot start</code> signs you in, checks out your store, and runs it <strong>natively — no Docker, no containers</strong>. Your browser opens on your store. The only prerequisites are <strong>Node.js and an invite</strong>.</p>
+              <div class="term-shell">
+                <button class="copy" type="button" data-copy="npx @tokenoftrust/cli start">copy</button>
+                <div class="term">
+                  <div class="term-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">your terminal</span></div>
+                  <pre><code><span class="cmt"># invite → running store, in one command</span>
+<span class="dir">~</span> <span class="prompt">$</span> npx @tokenoftrust/cli start
+  <span class="vok">✓</span> signed in{firstName ? <> as {firstName}</> : null}
+  <span class="arrow">→</span> your store: {appDomain}
+  <span class="vok">✓</span> checked out <span class="dir">./{dir}</span>
+  <span class="cmt">~ fetching the native renderer (first run only)…</span>
+  <span class="arrow">→</span> {localUrl}
+  <span class="prompt">✨ You're live.</span>  <span class="cmt">edit content/home.html + save → it reloads</span></code></pre>
+                </div>
+              </div>
+            </>
+          )}
+          <p class="platforms">Prefer the steps? <code>npm i -g @tokenoftrust/cli</code>, then <code>tot checkout {appDomain}</code>, <code>cd {dir}</code>, <code>tot dev</code>. New to Node? Get it at <a href="https://nodejs.org">nodejs.org</a> — it includes <code>npm</code>.</p>
+        </section>
+        <!-- 2 · the loop -->
+        <section class="step">
+          <div class="label"><span class="n">2</span> Make a change</div>
+          <h2>Edit → save → the page reloads. That's the loop.</h2>
+          <p>Open <code class="inline">content/home.html</code>, change the title, and save. The page reloads on its own in a couple of seconds — no rebuild, nothing published. Your edits stay private and local until you choose to submit them.</p>
+          <div class="demo" id="demo">
+            <div class="term-shell">
+              <div class="term">
+                <div class="term-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">content/home.html</span></div>
+                <pre><code>&lt;title&gt;<span class="hl">Token of Trust<span class="typed prompt"> — we verify humans</span></span>&lt;/title&gt;
+<span class="cmt"># save the file…</span>
+<span class="dir">{dir}</span> <span class="prompt">$</span> <span class="cmt">saved · page reloaded</span></code></pre>
+              </div>
+            </div>
+            <div class="browser">
+              <div class="browser-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">localhost:4321/{appDomain}/</span></div>
+              <div class="stage">
+                <p class="brandline">{appDomain}</p>
+                <p class="title"><span class="hl">Token of Trust<span class="typed"> — we verify humans</span></span></p>
+                <span class="reload">⟳ reloaded</span>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- 3 · build with Claude + the MCP (the payoff — what the shortcut tools can't do) -->
+        <section class="step">
+          <div class="label"><span class="n">3</span> Build with Claude</div>
+          <h2>Or don't touch a file — just ask.</h2>
+          <p>This is the part the shortcut tools can't do. Because Claude is connected to Token of Trust over the MCP, it doesn't guess how your site works — it <strong>asks</strong> where the theme lives and what's safe to change, then makes the edit. <strong>Content and theme only</strong>, and every change comes back as a reviewable diff. The box below is live — it calls the real <code class="inline">content_edit</code> tool against a sandbox store, not a recording.</p>
+          <form id="ai-demo-form" class="term-shell" aria-disabled={canUseAI ? undefined : "true"}>
+            <div class="term ask-term" id="ai-demo-term">
+              <span class="prompt ask-prompt">&gt;</span>
+              <input id="ai-demo-prompt" class="ask-input mono" type="text" maxlength="300"
+                value="Reskin my site — darker, but still friendly." aria-label="Describe the change"
+                disabled={canUseAI ? undefined : true} />
+              <button class="ask-submit" type="submit" disabled={canUseAI ? undefined : true}>Ask</button>
+            </div>
+          </form>
+          {canUseAI ? null : (
+            <div class="ask-gate">
+              <span>Sign in with your invite to run this live.</span>
+              <a href="/auth/login?next=%2Fdev">Sign in →</a>
+            </div>
+          )}
+          <div class="demo" id="ai-demo">
+            <div class="term-shell">
+              <div class="claude">
+                <div class="term-bar"><span class="spark">✳</span><span class="term-title">Claude</span></div>
+                <pre id="ai-demo-log"><code><span class="cmt">{canUseAI
+                  ? "Ask above — the diff Claude applies shows up here."
+                  : "Sign in to run this live. Below is what a reskin looks like."}</span></code></pre>
+              </div>
+            </div>
+            <div class="browser">
+              <div class="browser-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">sandbox store</span></div>
+              <div id="ai-demo-stage" class:list={["stage", { dark: !canUseAI }]}>
+                <p class="brandline">Sandbox Store</p>
+                <p class="title" id="ai-demo-title">Welcome to Sandbox Store</p>
+                <span class="reskin" id="ai-demo-badge" hidden={canUseAI ? true : undefined}>◐ example reskin</span>
+              </div>
+            </div>
+          </div>
+          <p class="caption">The shortcut tools hand you a theme editor. Here your assistant <em>is</em> the editor — and the MCP keeps it editing the right things, the right way.</p>
+          <p class="platforms">Not connected yet? <code>tot start</code> offers to connect Claude for you — or run <code>claude mcp add --transport http tot https://mcp.tokenoftrust.com/mcp</code>. Using another assistant? Point it at the same URL.</p>
+        </section>
+        <!-- 4 · commit -->
+        <section class="step">
+          <div class="label"><span class="n">4</span> Commit</div>
+          <h2>Save your work to your repo.</h2>
+          <p>It's a <strong>real git repo</strong> — normal <code class="inline">git</code> commands, or just ask Claude to commit for you. The <code class="inline">tot</code> CLI only wraps a couple of storefront conveniences on top; underneath, it's all git. This is yours; it doesn't touch the shared site.</p>
+          <div class="term-shell">
+            <button class="copy" type="button" data-copy={"git add .\ngit commit -m \"Update homepage title\"\ngit push"}>copy</button>
+            <div class="term">
+              <div class="term-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">your terminal</span></div>
+              <pre><code><span class="dir">{dir}</span> <span class="prompt">$</span> git add .
+<span class="dir">{dir}</span> <span class="prompt">$</span> git commit -m <span style="color:#8fe3c0">"Update homepage title"</span>
+<span class="dir">{dir}</span> <span class="prompt">$</span> git push</code></pre>
+            </div>
+          </div>
+        </section>
+        <!-- SUBMIT — gated, separate, with the real per-rule compliance verdict -->
+        <section class="submit">
+          <span class="gatechip">◆ Ready for review</span>
+          <div class="label"><span class="n">→</span> Submit for review</div>
+          <h2>When a change is ready, put it up for review.</h2>
+          <p>This is the deliberate step — separate from your edit loop on purpose. One command pushes your latest commit to the shared <span class="inline">test</span> preview and runs the compliance checks: not "did it build," but "does it meet the age &amp; identity rules" — <strong>rule by rule, with the exact fix when it doesn't</strong>.</p>
+          <div class="term-shell">
+            <button class="copy" type="button" data-copy="tot submit">copy</button>
+            <div class="term">
+              <div class="term-bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="term-title">submit for review</span></div>
+              <pre><code><span class="dir">{dir}</span> <span class="prompt">$</span> tot submit
+<span class="arrow">→</span> pushed · reconciled into the shared test preview
+<span class="arrow">→</span> compliance
+    <span class="vok">✔ age_gate</span>        verified on checkout
+    <span class="vok">✔ id_check</span>        provider wired
+    <span class="vwarn">⚠ data_retention</span>  set <span class="vhint">retention_days</span> in your config
+<span class="arrow">→</span> preview:   https://preview.{appDomain}/…
+<span class="arrow">→</span> on accept: a shareable dashboard + a branded email</code></pre>
+            </div>
+          </div>
+          <p>If anything's off, the preview stays on the last good version and <code>tot submit</code> tells you exactly what to fix — it never breaks for everyone else.</p>
+        </section>
+        <div class="foot">
+          <span>Signed in{session?.email ? <> as <span class="mono">{session.email}</span></> : null}</span>
+          <a href="/preview/dashboard">Preview status →</a>
+          <a href="/auth/logout">Sign out</a>
+        </div>
+      </div>
+    </main>
+    <script nonce={cspNonce} is:inline>
+      // copy buttons (static data-copy only; the dynamic CLI sign-in button below has its
+      // own handler that fetches a one-time token first, so exclude it here).
+      for (const btn of document.querySelectorAll(".copy[data-copy]")) {
+        btn.addEventListener("click", () => {
+          const text = btn.getAttribute("data-copy") || "";
+          navigator.clipboard?.writeText(text).then(() => {
+            const prev = btn.textContent; btn.textContent = "copied"; setTimeout(() => (btn.textContent = prev), 1200);
+          });
+        });
+      }
+      // play the reload demo once when it scrolls into view
+      const demo = document.getElementById("demo");
+      if (demo && "IntersectionObserver" in window) {
+        const io = new IntersectionObserver((es) => {
+          for (const e of es) if (e.isIntersecting) { demo.classList.add("play"); io.disconnect(); }
+        }, { threshold: 0.5 });
+        io.observe(demo);
+      } else if (demo) { demo.classList.add("play"); }
+    </script>
+    <script nonce={cspNonce} is:inline>
+      // Terminal sign-in (browserless): mint a one-time `tot login --code <token>` for the
+      // already-signed-in developer and copy the WHOLE command. The token is fetched on
+      // click (kept out of the initial HTML) from /api/dev/cli-signin-code, which mints it
+      // for THIS session's own email. Only present when signed in with a capability.
+      (function () {
+        const btn = document.getElementById("cli-signin-btn");
+        const textEl = document.getElementById("cli-signin-text");
+        const note = document.getElementById("cli-signin-note");
+        if (!btn || !textEl) return;
+        let busy = false;
+        btn.addEventListener("click", async () => {
+          if (busy) return;
+          busy = true;
+          const label = btn.textContent;
+          btn.textContent = "…"; btn.disabled = true;
+          let res, body;
+          try {
+            res = await fetch("/api/dev/cli-signin-code", {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: "{}",
+            });
+            body = await res.json().catch(() => ({}));
+          } catch (err) {
+            if (note) note.textContent = "Couldn’t reach the sign-in service — try again in a moment.";
+            btn.textContent = label; btn.disabled = false; busy = false;
+            return;
+          }
+          if (!res.ok || !body.command) {
+            const byStatus = {
+              401: "Your session expired — reload the page and sign in again.",
+              403: "This account doesn’t have developer access to a store yet.",
+              502: "The sign-in service is having a moment — try again.",
+              503: "Terminal sign-in isn’t configured on this environment.",
+            };
+            if (note) note.textContent = byStatus[res.status] || "Couldn’t mint a sign-in command — try again.";
+            btn.textContent = label; btn.disabled = false; busy = false;
+            return;
+          }
+          // Reveal the real command (contains the one-time code) and copy the WHOLE thing.
+          // textContent (never innerHTML) — the command is inserted as a pure text node.
+          textEl.textContent = body.command;
+          let copied = false;
+          try { await navigator.clipboard?.writeText(body.command); copied = true; } catch (e) { copied = false; }
+          btn.textContent = copied ? "copied ✓" : "select & copy";
+          if (note) {
+            note.textContent = copied
+              ? "Copied. Paste both lines into your terminal and press Enter — it signs you in, runs your store, and opens your browser. Single-use, short-lived code."
+              : "Select both lines above and copy them, then paste into your terminal and press Enter. Single-use, short-lived code.";
+          }
+          btn.disabled = false;
+          setTimeout(() => { btn.textContent = "Copy the command"; }, 4000);
+          busy = false;
+        });
+      })();
+    </script>
+    <script nonce={cspNonce} is:inline>
+      // The live "Build with Claude" demo: a real POST to /api/content-edit/ai-edit
+      // (tot-mcp's content_edit, against a fixed sandbox tenant — see that route's header
+      // comment). No mock, no scripted animation. Only wired up when the developer is
+      // signed in with a capability; the gated (logged-out) state stays a static teaser.
+      (function () {
+        const form = document.getElementById("ai-demo-form");
+        const input = document.getElementById("ai-demo-prompt");
+        const askTerm = document.getElementById("ai-demo-term");
+        const log = document.getElementById("ai-demo-log");
+        const stage = document.getElementById("ai-demo-stage");
+        const title = document.getElementById("ai-demo-title");
+        const badge = document.getElementById("ai-demo-badge");
+        if (!form || !input || !log || !stage || !title || !badge) return;
+        if (input.disabled) return; // gated (signed-out / no capability) — leave the teaser as-is
+        function esc(s) {
+          return String(s).replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[c]));
+        }
+        function render(lines) {
+          log.innerHTML = "<code>" + lines.join("\n") + "</code>";
+        }
+        function busy(on) {
+          const submit = form.querySelector(".ask-submit");
+          if (submit) submit.disabled = on;
+          input.disabled = on;
+          if (askTerm) askTerm.classList.toggle("busy", on);
+        }
+        // A calm line when the live path can't run (not-configured / auth / model error) —
+        // never a raw stack trace. `reason` is already trusted server copy or esc()'d.
+        function graceful(promptText, reason) {
+          render([
+            '<span class="prompt">&gt;</span> <span class="you">' + esc(promptText) + "</span>",
+            "",
+            '  <span class="cmt">' + reason + "</span>",
+            '  <span class="cmt">The live demo isn’t available right now — the edit loop still runs in <span class="mcp">tot dev</span>.</span>',
+          ]);
+        }
+        form.addEventListener("submit", async (e) => {
+          e.preventDefault();
+          const prompt = input.value.trim();
+          if (!prompt) return;
+          busy(true);
+          render([
+            '<span class="prompt">&gt;</span> <span class="you">' + esc(prompt) + "</span>",
+            "",
+            '  <span class="mcp">↳ tot</span> <span class="cmt">· asking content_edit…</span>',
+          ]);
+          let res, body;
+          try {
+            res = await fetch("/api/content-edit/ai-edit", {
+              method: "POST",
+              headers: { "content-type": "application/json" },
+              body: JSON.stringify({ prompt }),
+            });
+            body = await res.json().catch(() => ({}));
+          } catch (err) {
+            graceful(prompt, "✗ couldn’t reach the editor: " + esc(err.message || err));
+            busy(false);
+            return;
+          }
+          if (!res.ok || body.ok === false) {
+            // Map the endpoint's status codes to calm, human copy. 401/403 shouldn't
+            // happen here (the form is gated server-side) but degrade anyway.
+            const byStatus = {
+              401: "Your session expired — sign in again to run it live.",
+              403: "This account doesn’t have developer access to a store yet.",
+              400: "That prompt didn’t come through — try describing the change again.",
+              503: "The editor isn’t configured on this environment.",
+            };
+            const reason = byStatus[res.status] || esc(body.error || "content_edit couldn’t make that change.");
+            graceful(prompt, "✗ " + reason);
+            busy(false);
+            return;
+          }
+          // body.diffs[].path / .diff are model output (content_edit's diff over
+          // content/home.html) — escape before ever touching innerHTML.
+          const diffLines = (body.diffs || []).map(
+            (d) => "  " + esc(d.path) + "\n" + esc(d.diff).split("\n").map((l) => "    " + l).join("\n"),
+          );
+          // diffLines' contents are already escaped above — do not re-escape
+          // (would double-encode the entities and show literal "&lt;" etc.).
+          render([
+            '<span class="prompt">&gt;</span> <span class="you">' + esc(prompt) + "</span>",
+            "",
+            '  <span class="cmt">' + (diffLines.join("\n\n") || "(no change needed)") + "</span>",
+            '  <span class="ok">✔ ' + esc(body.summary || "done") + "</span>",
+          ]);
+          stage.classList.add("dark");
+          badge.hidden = false;
+          badge.textContent = "◐ " + (body.summary || "updated");
+          busy(false);
+        });
+      })();
+    </script>
+  </body>
+</html>