@tokenoftrust/storefront-runner 0.1.0

package/apps/storefront/src/pages/api/dashboard/vendor-search.ts

@@ -0,0 +1,120 @@
+/**
+ * GET|POST /api/dashboard/vendor-search?q=<prefix> — the ToT-STAFF vendor search
+ * proxy (#8425 staff access). Phase 1 of two-phase staff admission: a staff viewer
+ * finds a vendor by prefix; there is no silent access to every host.
+ *
+ * AUTHORIZATION — two independent axes:
+ *   NEAR (this endpoint): a valid `tot_session` that carries ToT-STAFF scope
+ *     (`staff[]` non-empty). No session → 401; a session without staff scope →
+ *     403 (a plain member has nothing to search across — they use their picker).
+ *   FAR (tot20): storefront calls `/clients/vendorSearch` as its OWN operator
+ *     identity, presenting a storefront-signed staff broker assertion in the
+ *     `X-ToT-Broker-Assertion` header (minted from the verified session email);
+ *     tot20 verifies it, derives the staff actor from its `sub`, and scopes results
+ *     to that user's staffRoles. No spoofable plaintext email crosses the wire.
+ *
+ * GET reads `q` (+ optional `limit`) from the query; POST reads them from a JSON
+ * body — the autocomplete client uses GET, but POST is accepted so a no-JS/form
+ * path works too. Returns `{ vendors: [{ appDomain, displayName }] }`.
+ */
+import type { APIContext } from "astro";
+import { readViewerSession } from "@/lib/auth/route";
+import { isStaffSession } from "@/lib/dashboard/staffAdmission";
+import {
+  createStaffVendorAccessClient,
+  staffAccessHttpStatus,
+  StaffVendorAccessClientError,
+} from "@/lib/dashboard/staffVendorAccess";
+import { mintBrokerAssertion, BrokerAssertionError } from "@/lib/auth/brokerAssertion";
+import {
+  parseVendorQuery,
+  ANCHORED_FETCH_LIMIT,
+  ANCHORED_DISPLAY_LIMIT,
+} from "@/lib/dashboard/vendorQuery";
+
+export const prerender = false;
+
+/** JSON response with no-store (staff access state must never be edge-cached). */
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json", "cache-control": "no-store" },
+  });
+}
+
+async function handle(context: APIContext, q: string, limit: number | undefined): Promise<Response> {
+  const session = await readViewerSession(context);
+  if (!session) return json({ error: "not signed in" }, 401);
+  if (!isStaffSession(session)) {
+    return json({ error: "staff access required", reason: "notStaff" }, 403);
+  }
+
+  let client;
+  try {
+    client = await createStaffVendorAccessClient();
+  } catch (err) {
+    if (err instanceof StaffVendorAccessClientError) {
+      return json({ error: "staff-access integration not configured" }, 503);
+    }
+    throw err;
+  }
+
+  // #8453 `staff-invite-proof-via-broker`: prove the staff actor with a fresh
+  // storefront-signed assertion minted from the VERIFIED session email — tot20
+  // derives the actor + scopes results from it. Fail closed (503) if unconfigured.
+  let brokerAssertion: string;
+  try {
+    brokerAssertion = await mintBrokerAssertion(session.email);
+  } catch (err) {
+    if (err instanceof BrokerAssertionError) {
+      return json({ error: "staff-proof signing not configured" }, 503);
+    }
+    throw err;
+  }
+
+  // Anchor syntax (^prefix / suffix$ / ^exact$) narrows tot20's substring search.
+  // Send the anchor-stripped CORE term upstream (with a widened cap so the exact hit
+  // is in the set), then post-filter by the anchor against appDomain. A plain query
+  // is unchanged: sent as-is, no post-filter. See @/lib/dashboard/vendorQuery.
+  const parsed = parseVendorQuery(q);
+  const upstreamQuery = parsed.anchored ? parsed.core : q;
+  const upstreamLimit = parsed.anchored ? ANCHORED_FETCH_LIMIT : limit;
+
+  const result = await client.searchVendors(brokerAssertion, upstreamQuery, upstreamLimit);
+  if (!result.ok) {
+    return json(
+      { error: result.message, reason: result.reason, code: result.code },
+      staffAccessHttpStatus(result.reason, result.status),
+    );
+  }
+  const vendors = parsed.anchored
+    ? result.vendors
+        .filter((v) => parsed.matches(v.appDomain))
+        .slice(0, limit && limit > 0 ? limit : ANCHORED_DISPLAY_LIMIT)
+    : result.vendors;
+  return json({ vendors });
+}
+
+function parseLimit(raw: string | null | undefined): number | undefined {
+  if (raw == null || raw === "") return undefined;
+  const n = Number(raw);
+  return Number.isFinite(n) && n > 0 ? Math.floor(n) : undefined;
+}
+
+export async function GET(context: APIContext): Promise<Response> {
+  const url = new URL(context.request.url);
+  const q = (url.searchParams.get("q") ?? "").trim();
+  return handle(context, q, parseLimit(url.searchParams.get("limit")));
+}
+
+export async function POST(context: APIContext): Promise<Response> {
+  let body: { q?: unknown; limit?: unknown };
+  try {
+    body = (await context.request.json()) as typeof body;
+  } catch {
+    return json({ error: "invalid JSON body" }, 400);
+  }
+  const q = typeof body.q === "string" ? body.q.trim() : "";
+  const limit = typeof body.limit === "number" ? body.limit : undefined;
+  return handle(context, q, limit);
+}

package/apps/storefront/src/pages/api/dev/cli-signin-code.ts

@@ -0,0 +1,44 @@
+/**
+ * POST /api/dev/cli-signin-code — mint a browserless CLI sign-in command for the
+ * SIGNED-IN developer (DevAccess #8425). The /dev getting-started page calls this to
+ * render a copyable `tot login --code <token>` so the developer's terminal signs in with
+ * no second browser round-trip and no OTP.
+ *
+ * AUTHORIZATION: the viewer's own session (the `tot_session` cookie). 401 if not signed
+ * in, 403 if the session carries no developer capability (nothing to sign a CLI into).
+ * The minted-for email is the VERIFIED session email — NEVER read from the body — so a
+ * developer can only mint a code for themselves.
+ *
+ * The response `command` CONTAINS the single-use token; it is returned only to this
+ * authenticated developer's own browser and is never logged server-side.
+ */
+import type { APIContext } from "astro";
+import { readViewerSession } from "@/lib/auth/route";
+import { mintCliSignInCommand } from "@/lib/dev/cliSignInCode";
+
+export const prerender = false;
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+export async function POST(context: APIContext): Promise<Response> {
+  const session = await readViewerSession(context);
+  if (!session) return json({ error: "not signed in" }, 401);
+  // Same gate the /dev page applies (canUseAI): a real developer capability. A
+  // no-capability session has no scoped CLI session to mint.
+  if (!session.capability || session.capability === "none") {
+    return json({ error: "no developer access on this session", reason: "notEligible" }, 403);
+  }
+
+  const result = await mintCliSignInCommand(session.email);
+  if (!result.ok) {
+    // 503 = seam not configured / MCP route unmounted; 502 = MCP fault. Surface neither
+    // the token nor internal detail beyond a terse reason.
+    return json({ error: "CLI sign-in code unavailable", reason: result.reason }, result.status);
+  }
+  return json({ command: result.command, expiresAt: result.expiresAt });
+}

package/apps/storefront/src/pages/api/newsletter.ts

@@ -0,0 +1,104 @@
+/**
+ * Newsletter signup endpoint.
+ *
+ * ASSUMPTION (Phase 1): there is no ESP integration yet. We persist the email to
+ * the TENANT_CACHE KV namespace when the Cloudflare runtime binding is present
+ * (key `newsletter:<email>`), and otherwise just log. Wiring a real ESP
+ * (Klaviyo/Mailchimp) is a documented Phase 2 swap at the marked spot below.
+ *
+ * Robustness: a signup must NEVER 500. All failures degrade to a friendly
+ * thank-you so the visitor is never shown an error for handing us their email.
+ */
+import type { APIContext } from "astro";
+import { readKv } from "@/lib/env";
+
+// Minimal, permissive email shape check — we are not the source of truth for
+// deliverability; the ESP validates properly downstream.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function thankYou(message: string, status = 200): Response {
+  const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>Thank you</title>
+    <style>
+      :root { color-scheme: light dark; }
+      body { font-family: ui-serif, Georgia, serif; margin: 0; min-height: 100vh;
+        display: grid; place-items: center; padding: 2rem; text-align: center;
+        background: #f4f1ea; color: #2f3a34; }
+      .card { max-width: 30rem; }
+      h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.75rem; }
+      p { color: #5a655e; line-height: 1.6; }
+      a { color: #2f3a34; font-weight: 600; }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <h1>You're on the list.</h1>
+      <p>${message}</p>
+      <p><a href="/">Back to the shop →</a></p>
+    </div>
+  </body>
+</html>`;
+  return new Response(html, {
+    status,
+    headers: { "content-type": "text/html; charset=utf-8" },
+  });
+}
+
+export async function POST(context: APIContext): Promise<Response> {
+  // Off for marketing tenants — they capture leads via external CTAs.
+  if (!context.locals.features.newsletter) {
+    return new Response(null, { status: 404 });
+  }
+  try {
+    const form = await context.request.formData();
+    const email = String(form.get("email") ?? "").trim().toLowerCase();
+    const source = String(form.get("source") ?? "unknown").trim();
+
+    if (!EMAIL_RE.test(email)) {
+      return thankYou(
+        "That address didn't look quite right — head back and try again.",
+        200,
+      );
+    }
+
+    // Persist. Phase 1: KV stub. Phase 2: replace with an ESP API call here.
+    const kv = await readKv("TENANT_CACHE");
+    if (kv) {
+      await kv.put(
+        `newsletter:${email}`,
+        JSON.stringify({ email, source, at: new Date().toISOString() }),
+      );
+    } else {
+      // No KV binding (local/dev): log and move on.
+      console.log(`[newsletter] signup ${email} (source: ${source})`);
+    }
+
+    // Redirect back where they came from (or home) with a success flag, so the
+    // page can show its own confirmation in-context. Falls back to the
+    // thank-you page if there's no usable referer.
+    const referer = context.request.headers.get("referer");
+    if (referer) {
+      try {
+        const back = new URL(referer);
+        back.searchParams.set("subscribed", "1");
+        return Response.redirect(back.toString(), 303);
+      } catch {
+        // fall through to thank-you
+      }
+    }
+    return thankYou("We'll send word when something worth knowing lands.");
+  } catch {
+    // Never 500 on a signup.
+    return thankYou("We'll send word when something worth knowing lands.");
+  }
+}
+
+export async function GET(context: APIContext): Promise<Response> {
+  // Nothing to render here directly — bounce back to the shop.
+  return context.redirect("/", 303);
+}

package/apps/storefront/src/pages/api/request-access.ts

@@ -0,0 +1,172 @@
+/**
+ * POST /api/request-access — early-access lead capture for the `home` landing page.
+ *
+ * The browser form (tenants/home) POSTs here same-origin (CSP `connect-src 'self'`
+ * + `form-action 'self'`). This route forwards the lead to tot20's generic
+ * messaging endpoint SERVER-SIDE — the storefront's ToT credentials never reach
+ * the browser. The message emails the Trello Success board so a card is created.
+ *
+ * tot20 auth wire: like `@/lib/auth/totAccessClient`, tot20's swagger reads
+ * machine creds from the request BODY fields `totApiKey`/`totSecretKey` (NOT
+ * headers). So we merge those into the JSON POST body.
+ *
+ * GRACEFUL FALLBACK: the tot20 `/api/messages` endpoint is being built in a
+ * parallel workstream (Claim A) and isn't live yet. Until it is — or whenever the
+ * send fails / creds are unset — we still return `{ ok: true }` with a
+ * `fallback: "mailto"` + a prefilled `mailto:` so the client opens the user's mail
+ * client to the board. The form is never a dead end. Once A lands + creds are set,
+ * the server-side send just works and no mailto is returned.
+ *
+ * Deliberately NOT gated on `context.locals.features.*` — unlike newsletter.ts,
+ * this must work on the `home` marketing tenant.
+ */
+import type { APIContext } from "astro";
+import { readEnv } from "@/lib/env";
+
+export const prerender = false;
+
+// Trello Success board — a card is created from the forwarded email.
+// Kept in sync with the mailto: fallback in tenants/home/public/js/storefront.js.
+const BOARD_EMAIL = "darrin84+l6gajmvvoo1x4edew5qs@boards.trello.com";
+
+// Permissive email shape — tot20 / the mail system is the real deliverability authority.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface RequestAccessFields {
+  email: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  details: string;
+}
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json; charset=utf-8" },
+  });
+}
+
+/** Read fields from either a JSON body (the fetch form) or urlencoded/multipart (no-JS). */
+async function readFields(request: Request): Promise<RequestAccessFields> {
+  const ct = request.headers.get("content-type") || "";
+  const pick = (v: unknown) => String(v ?? "").trim();
+  if (ct.includes("application/json")) {
+    const b = (await request.json().catch(() => ({}))) as Record<string, unknown>;
+    return {
+      email: pick(b.email),
+      firstName: pick(b.firstName),
+      lastName: pick(b.lastName),
+      phone: pick(b.phone),
+      details: pick(b.details),
+    };
+  }
+  const form = await request.formData();
+  return {
+    email: pick(form.get("email")),
+    firstName: pick(form.get("firstName")),
+    lastName: pick(form.get("lastName")),
+    phone: pick(form.get("phone")),
+    details: pick(form.get("details")),
+  };
+}
+
+/** Escape user text before it lands in the HTML email body. */
+function esc(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function buildHtml(f: RequestAccessFields): string {
+  const rows: Array<[string, string]> = [
+    ["Name", `${f.firstName} ${f.lastName}`],
+    ["Email", f.email],
+  ];
+  if (f.phone) rows.push(["Phone", f.phone]);
+  if (f.details) rows.push(["What they sell", f.details]);
+  const body = rows
+    .map(([k, v]) => `<p style="margin:0 0 8px"><strong>${esc(k)}:</strong> ${esc(v)}</p>`)
+    .join("\n");
+  return `<div style="font-family:system-ui,sans-serif;line-height:1.5">
+<h2 style="margin:0 0 12px">Storefront early-access request</h2>
+${body}
+<hr style="margin:16px 0;border:none;border-top:1px solid #ddd">
+<p style="color:#888;font-size:12px;margin:0">Sent from the Storefront landing page (tokenoftrust.com).</p>
+</div>`;
+}
+
+/** Prefilled mailto: to the board — the fallback so the lead is never dropped. */
+function mailtoFallback(f: RequestAccessFields): string {
+  const lines = [
+    `First name: ${f.firstName}`,
+    `Last name: ${f.lastName}`,
+    `Email: ${f.email}`,
+    f.phone ? `Phone: ${f.phone}` : null,
+    f.details ? `\nDetails:\n${f.details}` : null,
+  ]
+    .filter(Boolean)
+    .join("\n");
+  const subject = `Early-access request — ${f.firstName} ${f.lastName}`;
+  return `mailto:${BOARD_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(lines)}`;
+}
+
+export async function POST(context: APIContext): Promise<Response> {
+  let f: RequestAccessFields;
+  try {
+    f = await readFields(context.request);
+  } catch {
+    return json({ ok: false, error: "invalid_body" }, 400);
+  }
+
+  // Validate: email + first + last required.
+  if (!EMAIL_RE.test(f.email) || !f.firstName || !f.lastName) {
+    return json({ ok: false, error: "missing_required_fields" }, 400);
+  }
+
+  const subject = `Early-access request — ${f.firstName} ${f.lastName}`;
+
+  // Try the server-side send via tot20. Any shortfall (unconfigured creds,
+  // endpoint not live yet, non-2xx, network error) degrades to the mailto fallback.
+  const baseUrl = (await readEnv("TOT_CORE_URL"))?.replace(/\/+$/, "");
+  const apiKey = await readEnv("TOT_API_KEY");
+  const secretKey = await readEnv("TOT_SECRET_KEY");
+
+  if (baseUrl && apiKey) {
+    try {
+      const res = await fetch(`${baseUrl}/api/messages`, {
+        method: "POST",
+        headers: { "content-type": "application/json", accept: "application/json" },
+        body: JSON.stringify({
+          totApiKey: apiKey,
+          ...(secretKey ? { totSecretKey: secretKey } : {}),
+          channel: "email",
+          to: BOARD_EMAIL,
+          subject,
+          replyTo: f.email,
+          html: buildHtml(f),
+        }),
+      });
+      if (res.ok) {
+        return json({ ok: true });
+      }
+      console.warn(`[request-access] tot20 /api/messages returned ${res.status}; using mailto fallback`);
+    } catch (err) {
+      console.warn("[request-access] tot20 /api/messages send failed; using mailto fallback", {
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+  } else {
+    console.log("[request-access] TOT_CORE_URL/TOT_API_KEY unset; using mailto fallback");
+  }
+
+  // Fallback: acknowledge success and hand the client a prefilled mailto so the
+  // request still reaches the board via the user's own mail client.
+  return json({ ok: true, fallback: "mailto", mailto: mailtoFallback(f) });
+}
+
+export async function GET(context: APIContext): Promise<Response> {
+  return context.redirect("/", 303);
+}

package/apps/storefront/src/pages/auth/login.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * /auth/login — "Sign in with Token of Trust" for a gated preview host.
+ *
+ * Two-step, no-JS-friendly, all on the tenant's own branded host:
+ *   step 1: enter your email  → POST /api/auth/send
+ *   step 2: enter the 6-digit code you were emailed → POST /api/auth/verify
+ *
+ * The page renders instructions + forms only; every auth decision is server-side
+ * (tot20 sends/verifies the code, the storefront mints the session). No secrets
+ * reach the browser. Inline style carries the per-request CSP nonce.
+ */
+export const prerender = false;
+
+const cspNonce = Astro.locals.cspNonce;
+const url = new URL(Astro.request.url);
+const sent = url.searchParams.get("sent") === "1";
+const email = (url.searchParams.get("email") ?? "").trim();
+const errorCode = url.searchParams.get("error");
+const next = (() => {
+  const n = url.searchParams.get("next") ?? "/";
+  return n.startsWith("/") && !n.startsWith("//") ? n : "/";
+})();
+
+const ERROR_MESSAGES: Record<string, string> = {
+  bad_email: "That email doesn't look right — please try again.",
+  unconfigured: "Sign-in isn't available right now. Please try again shortly.",
+  invalid: "That code didn't match. Check it and try again.",
+  expired: "That code has expired — request a fresh one.",
+  too_many_attempts: "Too many attempts. Request a new code to continue.",
+  verify_failed: "We couldn't verify your sign-in. Please request a fresh code and try again.",
+};
+const errorMessage = errorCode ? (ERROR_MESSAGES[errorCode] ?? "Something went wrong — try again.") : null;
+// A stale/failed code should drop back to the email step so a new code can be requested.
+const showCodeStep = sent && errorCode !== "expired" && errorCode !== "too_many_attempts";
+// Local-dev banner (statically dropped from prod). The message depends on the mode:
+// DEV_AUTH=1 → the console bypass is active (no email; code printed to the server console);
+// DEV_AUTH=0 → the REAL path is active (a code IS emailed by the configured tot20/qa, but
+// only to an address that already holds a role). Read the toggle so the banner never lies.
+const devMode = import.meta.env.DEV;
+let devAuthOn = false;
+if (devMode) {
+  const { readEnv } = await import("@/lib/env");
+  devAuthOn = (await readEnv("DEV_AUTH")) === "1";
+}
+---
+
+<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>Sign in — Regulated Storefront by Token of Trust©</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body {
+        font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; display: grid; place-items: center;
+        padding: 2rem 1.25rem; background: #f5f4f0; color: #1c1c1c;
+      }
+      @media (prefers-color-scheme: dark) {
+        body { background: #14141a; color: #ececf1; }
+      }
+      .card {
+        width: 100%; max-width: 26rem; background: #fff; border: 1px solid #e6e4de;
+        border-radius: 14px; padding: 2rem 1.75rem; box-shadow: 0 6px 24px rgba(0,0,0,.06);
+      }
+      @media (prefers-color-scheme: dark) {
+        .card { background: #1e1e28; border-color: #33333f; box-shadow: none; }
+      }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em;
+        text-transform: uppercase; color: #8a7f66; margin: 0 0 .75rem; }
+      h1 { font-size: 1.4rem; letter-spacing: -.01em; margin: 0 0 .4rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1.5rem; font-size: .95rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      label { display: block; font-weight: 600; font-size: .82rem; margin: 0 0 .4rem; }
+      input[type=email], input[type=text] {
+        width: 100%; padding: .7rem .8rem; font-size: 1rem; border-radius: 9px;
+        border: 1px solid #cfccc4; background: #fff; color: inherit;
+      }
+      @media (prefers-color-scheme: dark) {
+        input[type=email], input[type=text] { background: #14141a; border-color: #40404d; }
+      }
+      input[type=text].code { letter-spacing: .4em; font: 600 1.25rem ui-monospace, monospace; text-align: center; }
+      button {
+        width: 100%; margin-top: 1rem; padding: .75rem 1rem; border: 0; border-radius: 9px;
+        background: #1a1a1a; color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer;
+      }
+      @media (prefers-color-scheme: dark) { button { background: #ececf1; color: #14141a; } }
+      button:hover { opacity: .92; }
+      .err { background: #fdecec; border: 1px solid #f5c2c2; color: #9a1c1c;
+        border-radius: 9px; padding: .6rem .8rem; font-size: .88rem; margin: 0 0 1.15rem; }
+      @media (prefers-color-scheme: dark) { .err { background: #3a1f22; border-color: #6b2f34; color: #f6b9b9; } }
+      .dev { background: #eef4ff; border: 1px solid #c3d4f5; color: #234; border-radius: 9px;
+        padding: .6rem .8rem; font-size: .82rem; margin: 0 0 1.15rem; }
+      .dev code { font: 600 .8em ui-monospace, monospace; }
+      @media (prefers-color-scheme: dark) { .dev { background: #1b2740; border-color: #2f4468; color: #cfe0ff; } }
+      .note { font-size: .82rem; color: #8a8a8a; margin: 1.1rem 0 0; }
+      .who { font-weight: 600; }
+      a { color: inherit; }
+      .foot { margin-top: 1.5rem; font-size: .72rem; color: #9a9a9a; text-align: center; }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+      <p class="eyebrow">Token of Trust© · Regulated Storefront</p>
+      {devMode && (devAuthOn ? (
+        <p class="dev"><strong>Local dev — console bypass</strong> (<code>DEV_AUTH=1</code>). No email is sent;
+        your sign-in code is printed to the <strong>server console</strong>. Set <code>DEV_AUTH=0</code> to use real emails.</p>
+      ) : (
+        <p class="dev"><strong>Local dev — live email</strong> (<code>DEV_AUTH=0</code>). A code is emailed by the
+        configured tot20 (<code>TOT_CORE_URL</code>), but only to an address that already holds a role. Set
+        <code>DEV_AUTH=1</code> for offline console codes.</p>
+      ))}
+      {errorMessage && <p class="err">{errorMessage}</p>}
+
+      {showCodeStep ? (
+        <>
+          <h1>Check your email</h1>
+          <p class="sub">We sent a 6-digit code to <span class="who">{email}</span> if it has access to this preview. Enter it below.</p>
+          <form method="post" action="/api/auth/verify" autocomplete="one-time-code">
+            <input type="hidden" name="email" value={email} />
+            <input type="hidden" name="next" value={next} />
+            <label for="code">Access code</label>
+            <input class="code" id="code" name="code" type="text" inputmode="numeric"
+              pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" required autofocus />
+            <button type="submit">Verify &amp; view preview</button>
+          </form>
+          <p class="note"><a href={`/auth/login${next !== "/" ? `?next=${encodeURIComponent(next)}` : ""}`}>Use a different email</a> · <a href="mailto:darrin84+l6gajmvvoo1x4edew5qs@boards.trello.com?subject=Regulated%20Storefront%20early%20access%20request">Don't have access? Request early access →</a></p>
+        </>
+      ) : (
+        <>
+          <h1>Sign in</h1>
+          <p class="sub"><span class="who">Token of Trust© Regulated Storefront</span> is in early access. Enter your email — if you have access, we'll send a one-time code.</p>
+          <form method="post" action="/api/auth/send">
+            <input type="hidden" name="next" value={next} />
+            <label for="email">Work email</label>
+            <input id="email" name="email" type="email" value={email}
+              autocomplete="email" placeholder="you@company.com" required autofocus />
+            <button type="submit">Email me a code</button>
+          </form>
+          <p class="note">Access is granted by role — no signup needed. Don't have access yet? <a href="mailto:darrin84+l6gajmvvoo1x4edew5qs@boards.trello.com?subject=Regulated%20Storefront%20early%20access%20request">Request early access →</a></p>
+        </>
+      )}
+      <p class="foot">Token of Trust© Regulated Storefront</p>
+    </main>
+  </body>
+</html>