@tokenoftrust/storefront-runner 1.3.4-rc.4 → 1.4.1

package/apps/storefront/src/middleware/index.ts

@@ -30,6 +30,7 @@ import {
   buildCsp,
   STOREFRONT_CSP_ALLOWLIST,
   checkoutCspAdditions,
+  appWidgetCspAdditions,
   CSP_REPORT_GROUP,
   CSP_REPORT_PATH,
   readPublishedArtifact,
@@ -46,13 +47,15 @@ import {
   parseGateMode,
   isAuthPath,
   sessionAdmitsHost,
+  sessionHostCapability,
   PUBLIC_HOME_TENANT_ID,
 } from "@/lib/auth/loginGate";
 import { gatedHoldingResponse } from "@/lib/auth/gatePage";
 import { readSession, KvSessionStore, SESSION_COOKIE } from "@/lib/auth/session";
 import { isMaintenanceOn, maintenanceResponse } from "@/lib/maintenance";
 import { HEALTH_PATH, healthResponse } from "@/lib/health";
-import { membershipFor } from "@/lib/dashboard/tenantSelection";
+import { observeDeployVersion } from "@/lib/activity/deployVersion";
+import { primeActivityKillSwitch } from "@/lib/activity/killSwitch";
 import type { DeepPartial, ThemeTokens } from "@tot/public-runtime";
 
 export const onRequest = defineMiddleware(async (context, next) => {
@@ -61,6 +64,21 @@ export const onRequest = defineMiddleware(async (context, next) => {
   const host =
     request.headers.get("host") ?? url.host ?? "localhost";
 
+  // ---- Activity telemetry kill switch (card D8) -----------------------------
+  // Prime the ONE `ACTIVITY_TELEMETRY_DISABLED` flag from the (async) Worker env
+  // once per isolate, BEFORE the first emit, so every telemetry chokepoint in this
+  // isolate (deploy-provenance, recordActivity, ingest) observes it. Fail-open,
+  // never throws. Off by default (unset ⇒ telemetry on).
+  await primeActivityKillSwitch();
+
+  // ---- Deploy provenance (card D2) — worker_commit / deploy.version_observed -
+  // Once per worker isolate (cold start), emit `deploy.version_observed` carrying
+  // this build's commit SHA so D5 can derive deploy skew (running build vs umbrella
+  // tip). Idempotent per isolate, best-effort, never throws — so it's safe here at
+  // the very front door, ahead of /health, and fires regardless of Host/tenant/gate.
+  // A no-op when the D8 kill switch above is set.
+  observeDeployVersion();
+
   // ---- /health — liveness + deploy-identity probe ---------------------------
   // Answered FIRST: before tenant resolution, the access gate, the maintenance
   // kill-switch, and the edge cache — so it reports the running build's commit SHA
@@ -160,17 +178,18 @@ export const onRequest = defineMiddleware(async (context, next) => {
       return gatedHoldingResponse(decision.location);
     }
     if (admitted && viewerRecord) {
-      // Surface the viewer's role FOR THIS host's tenant as chrome. A member sees
-      // their tenants[] role; a ToT-staff viewer admitted via an explicit vendor
-      // selection sees the staffRoles-scoped capability (distinct path).
-      const role = membershipFor(viewerRecord.tenants, tenant.appDomain, {
-        selection: viewerRecord.staffSelection,
-        nowSeconds,
-      })?.role;
+      // Surface the viewer's standing FOR THIS host's tenant as chrome, BOUND to
+      // the host so a capability the session holds for another tenant never leaks
+      // in: a member sees their tenants[] role; the owner of their own tenant sees
+      // the resource-scoped session's capability; a ToT-staff viewer admitted via
+      // an explicit vendor selection sees the staffRoles-scoped capability. The
+      // ship gates (u10 decideIsOwner/resolveShipPrincipal) read this capability,
+      // so binding it here keeps owner-resolution server-side + tenant-correct.
+      const hostCapability = sessionHostCapability(viewerRecord, tenant.appDomain, nowSeconds);
       locals.viewer = {
         email: viewerRecord.email,
-        roles: role ? [role] : viewerRecord.roles,
-        capability: role ?? viewerRecord.capability,
+        roles: hostCapability ? [hostCapability] : viewerRecord.roles,
+        capability: hostCapability ?? viewerRecord.capability,
       };
     }
   }
@@ -210,8 +229,14 @@ export const onRequest = defineMiddleware(async (context, next) => {
     if (hit) return hit;
   }
 
-  // Edge read replica: opt-in via USE_D1_CATALOG=1 (+ a CATALOG_DB binding). Off
-  // by default, so the bundled fixture snapshot serves reads.
+  // Catalog source selection (F17 graduation path — docs/architecture/product-catalog.md).
+  // A store's product source graduates over its life: JSON fixtures (dev default) ->
+  // D1 edge replica (staging) -> hosted ToT catalog (go-live). Here we pick the read
+  // backend: USE_D1_CATALOG=1 (+ a CATALOG_DB binding) reads the D1 edge replica;
+  // otherwise createToTClient falls back to the bundled JSON fixture snapshot. The
+  // hosted catalog graduates the SAME canonical records into the D1 read model
+  // (emitCatalogSql), so JSON/D1/hosted render identically — pinned by
+  // lib/tot/sourceSelection.test.ts.
   const d1 =
     (await readEnv("USE_D1_CATALOG")) === "1" ? await readD1("CATALOG_DB") : undefined;
   const tot = await createToTClient(tenant, d1);
@@ -360,6 +385,10 @@ export const onRequest = defineMiddleware(async (context, next) => {
   locals.canonicalBase = canonicalBase;
   locals.customizationEnv = customization.env;
   locals.cspNonce = cspNonce;
+  // Seeded here, filled in by whichever page/layout renders a widget slot
+  // (renderSlot.ts) as the page renders inside next() below — read back out
+  // after next() resolves so the CSP frame-src reflects exactly what rendered.
+  locals.activeWidgetPlacements = [];
   // Prefix that path-routed pages live under ("" for host-routed). Pages stay
   // tenant-agnostic; the Layout uses this to keep root-absolute links inside
   // the tenant prefix on the client.
@@ -427,6 +456,9 @@ export const onRequest = defineMiddleware(async (context, next) => {
   // strict policy only when this tenant has a store — so add-to-cart, the
   // sidecart iframe/XHR, and the cross-origin form POST all pass.
   const checkoutCsp = commerce ? checkoutCspAdditions(commerce.origin) : null;
+  // Private-app widget origins (D5) — read back AFTER next() so this reflects
+  // exactly the placements that rendered on THIS page, never a wildcard.
+  const widgetCsp = appWidgetCspAdditions(locals.activeWidgetPlacements ?? []);
   response.headers.set(
     cspHeader,
     buildCsp({
@@ -450,7 +482,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
         ...(checkoutCsp?.connectSrc ?? []),
       ],
       imgSrc: [...STOREFRONT_CSP_ALLOWLIST.imgSrc, ...(checkoutCsp?.imgSrc ?? [])],
-      frameSrc: checkoutCsp?.frameSrc ?? [],
+      frameSrc: [...(checkoutCsp?.frameSrc ?? []), ...widgetCsp.frameSrc],
       formAction: checkoutCsp?.formAction ?? [],
       reportGroup: CSP_REPORT_GROUP,
       reportUri: CSP_REPORT_PATH,

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

@@ -2,15 +2,25 @@
 /**
  * 404 — written in the Northwind voice, not a stub. Offers a way home and a
  * few collections to wander into so a dead link still lands somewhere useful.
+ *
+ * DELIBERATELY on-demand — do NOT prerender (audit finding "selective-prerender").
+ * Fully tenant-varying: it reads Astro.locals.tenant + tot.listCollections() and
+ * renders under locals.themeStyle, all set per-request by the middleware from the
+ * resolved Host. Prerendering would freeze a single build-time tenant AND strip the
+ * middleware-applied CSP + security headers (no static _headers fallback exists).
  */
+export const prerender = false;
+
 import Layout from "@/layouts/Layout.astro";
 import CollectionCard from "@/components/CollectionCard.astro";
 import { withBase } from "@/lib/basePath";
 
-const { tenant, tot, basePath } = Astro.locals;
+const { tenant, tot, basePath, features } = Astro.locals;
 
-// A handful of collections to redirect lost visitors toward.
-const collections = (await tot.listCollections()).slice(0, 3);
+// A handful of collections to redirect lost visitors toward. Marketing tenants
+// (features.catalog === false) have no /collections route at all — skip the
+// fetch entirely rather than trust it to come back empty.
+const collections = features.catalog ? (await tot.listCollections()).slice(0, 3) : [];
 ---
 
 <Layout
@@ -36,12 +46,14 @@ const collections = (await tot.listCollections()).slice(0, 3);
         >
           Back home
         </a>
-        <a
-          href={withBase(basePath, "/collections")}
-          class="inline-flex items-center rounded-full border border-[var(--color-border)] px-6 py-3 font-display text-sm font-medium text-[var(--color-text)] transition-colors hover:border-[var(--color-primary)]"
-        >
-          Browse collections
-        </a>
+        {features.catalog && (
+          <a
+            href={withBase(basePath, "/collections")}
+            class="inline-flex items-center rounded-full border border-[var(--color-border)] px-6 py-3 font-display text-sm font-medium text-[var(--color-text)] transition-colors hover:border-[var(--color-primary)]"
+          >
+            Browse collections
+          </a>
+        )}
       </div>
     </div>
   </section>

package/apps/storefront/src/pages/[...slug].astro

@@ -7,6 +7,8 @@
  */
 import Layout from "@/layouts/Layout.astro";
 import Breadcrumbs from "@/components/Breadcrumbs.astro";
+import ProseSections from "@/components/content/ProseSections.astro";
+import ProseToc from "@/components/content/ProseToc.astro";
 import { breadcrumbLd } from "@/lib/jsonld";
 import { truncate } from "@/lib/format";
 import { rawHtmlPolicy, rawHtmlResponse } from "@/lib/rawMarketingHtml";
@@ -56,6 +58,27 @@ const crumbs = [
 const description =
   page.seoDescription ||
   (page.intro ? truncate(page.intro, 160) : undefined);
+
+// Structured pages (F4) drive the body from `sections`; legacy pages keep the
+// sanitized `body_html`. Prefer structured whenever a page ships sections.
+const structured = (page.sections?.length ?? 0) > 0;
+
+// Reviewer-only needs-review flags render in preview/dev only — mirrors the
+// middleware's "production read" definition (no preview host / token / cookie),
+// so a real shopper never sees scaffolding but a reviewer does.
+const isPreview =
+  import.meta.env.DEV ||
+  Astro.url.hostname.toLowerCase().startsWith("preview.") ||
+  Astro.url.searchParams.has("__preview") ||
+  Astro.cookies.has("tot_preview");
+
+const updatedLabel = page.updated
+  ? new Date(page.updated).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+  : null;
 ---
 
 <Layout
@@ -80,10 +103,21 @@ const description =
         {page.intro}
       </p>
     )}
+    {updatedLabel && (
+      <p class="mt-3 text-sm text-[var(--color-muted)]">Last updated {updatedLabel}</p>
+    )}
+    {structured && <ProseToc sections={page.sections!} />}
   </header>
 
-  {/* Body — constrained to a readable measure. */}
+  {/* Body — constrained to a readable measure. Structured pages (F4) render
+      framework widgets from `sections`; legacy pages keep the sanitized HTML. */}
   <div class="container-prose pb-[clamp(3rem,7vw,6rem)] pt-8">
-    <div class="rte mx-auto max-w-[68ch] text-[var(--color-text)]" set:html={page.body_html} />
+    {structured ? (
+      <div class="mx-auto max-w-[68ch]">
+        <ProseSections sections={page.sections!} includeNeedsReview={isPreview} />
+      </div>
+    ) : (
+      <div class="rte mx-auto max-w-[68ch] text-[var(--color-text)]" set:html={page.body_html} />
+    )}
   </div>
 </Layout>

package/apps/storefront/src/pages/admin/ops-timeline.astro

@@ -0,0 +1,420 @@
+---
+/**
+ * `/admin/ops-timeline` — the operational-activity timeline VIEW (card D5).
+ *
+ * The READ surface of the actor×action telemetry spine: a chronological,
+ * tenant-scoped list of lifecycle activity answering "who shipped/rejected what,
+ * when, why — and what happened to my change/deploy". It reads the D1
+ * `activity_events` timeline cohort (DECISIONS.md §8) through the pure,
+ * tenant-scoped query module (`lib/activity/query.ts`).
+ *
+ * ROUTING / AUTH — mirrors `admin.astro`: middleware resolves the tenant, injects
+ * CSP/security headers, and already held anonymous/non-member visitors at the
+ * sign-in gate. This surface exposes operational detail, so it renders the data
+ * ONLY for a viewer with owner/admin standing for the routed tenant, or a ToT-staff
+ * session (`resolveAdminEntry` / `resolveAdminTenantMode`, the same machinery the
+ * admin shell uses). A signed-in non-owner sees the chrome + a "no standing" notice,
+ * never another tenant's rows.
+ *
+ * TENANT ISOLATION — the query is ALWAYS scoped to `Astro.locals.tenant.tenant_id`
+ * (the served tenant, never a URL value); `parseTimelineQuery` pins that tenant and
+ * ignores any `tenant`/`tenantId` query param. See `query.isolation.test.ts` for the
+ * hostile read-side proof.
+ *
+ * DEPLOY SKEW (card D2) — the page surfaces `deriveDeploySkew()`: a banner when the
+ * build serving this page (or the timeline) shows more than one live version, plus a
+ * per-row "stale build" chip on superseded `deploy.version_observed` rows.
+ *
+ * ALERTS (card D7) — the page also runs `checkActivityAlerts()` (silent-terminal,
+ * recurring preview.serve miss_no_env, reconcile-hang watchdog, and — promoting the
+ * skew signal above — a persistent deploy-skew alert) and renders an alerts banner
+ * above the deploy-skew visibility banner. Same on-demand posture: computed fresh on
+ * every page load, no cron. `GET /api/admin/activity-alerts` exposes the identical
+ * check for an external poller.
+ */
+export const prerender = false;
+
+import { readViewerSession } from "@/lib/auth/route";
+import { resolveAdminEntry } from "@/lib/auth/adminEntry";
+import { resolveAdminTenantMode } from "@/lib/adminTenantEnvelope";
+import { readD1 } from "@/lib/env";
+import { fromD1 } from "@/lib/d1/catalog";
+import {
+  parseTimelineQuery,
+  loadOpsTimeline,
+  type OpsTimelineData,
+  type ActivityTimelineRow,
+} from "@/lib/activity/query";
+import { checkActivityAlerts, type ActivityAlert } from "@/lib/activity/alerts";
+
+const { tenant, basePath, cspNonce } = Astro.locals;
+const adminPath = `${basePath || ""}/admin`;
+const timelinePath = `${adminPath}/ops-timeline`;
+const tenantLabel = tenant.displayName || tenant.appDomain || tenant.tenant_id;
+const nowSeconds = Math.floor(Date.now() / 1000);
+
+const viewerSession = await readViewerSession(Astro);
+const viewerEmail = (Astro.locals.viewer?.email ?? viewerSession?.email ?? "").toLowerCase();
+
+const adminEntry = resolveAdminEntry({
+  record: viewerSession,
+  hostResource: tenant.appDomain,
+  nowSeconds,
+});
+const { isStaff } = resolveAdminTenantMode({
+  session: viewerSession,
+  adminAppTenant: tenant.appDomain,
+  requestedTarget: null,
+  nowSeconds,
+});
+
+// Gate: a signed-in owner/admin of THIS tenant, or ToT staff. Everyone else gets
+// chrome + a notice, and the query never runs.
+const authorized = Boolean(viewerSession) && (adminEntry.isOwnerViewer || isStaff);
+
+// The query is scoped to the SERVED tenant's id — never a URL value.
+const query = parseTimelineQuery(Astro.url.searchParams, tenant.tenant_id);
+
+let data: OpsTimelineData | null = null;
+let alerts: ActivityAlert[] = [];
+let dbAvailable = true;
+if (authorized) {
+  const d1 = await readD1("STOREFRONT_APPS_DB");
+  if (d1) {
+    const db = fromD1(d1);
+    [data, alerts] = await Promise.all([
+      loadOpsTimeline(db, query),
+      checkActivityAlerts(db, tenant.tenant_id),
+    ]);
+  } else {
+    // Dev/Node or an env without the binding — the timeline lives only in D1.
+    dbAvailable = false;
+  }
+}
+
+const rows = data?.rows ?? [];
+const skew = data?.deploySkew ?? null;
+// Versions superseded by a newer observation → a "stale build" chip on those rows.
+const staleVersions = new Set(
+  (skew?.observedVersions ?? [])
+    .filter((v) => v.version !== skew?.latestObservedVersion)
+    .map((v) => v.version),
+);
+
+/** Short, non-PII actor label (the id is already an opaque pseudonym). */
+function shortActor(row: ActivityTimelineRow): string {
+  const id = row.actorId.length > 14 ? `${row.actorId.slice(0, 14)}…` : row.actorId;
+  return `${row.actorKind}:${id}`;
+}
+
+/** Map a status to a chip color class. */
+function statusClass(status: string): string {
+  switch (status) {
+    case "succeeded":
+      return "green";
+    case "failed":
+      return "red";
+    case "refused":
+      return "amber";
+    default:
+      return "blue"; // invoked
+  }
+}
+
+/** Compact, human detail line from the (already redacted) payload. */
+function detailFor(row: ActivityTimelineRow): string {
+  const parts: string[] = [];
+  const rendered = row.payload.rendered ?? {};
+  for (const [k, v] of Object.entries(rendered)) parts.push(`${k}: ${v}`);
+  const args = row.payload.args ?? {};
+  for (const [k, v] of Object.entries(args)) {
+    if (k === "changeId") continue; // shown in its own column
+    parts.push(`${k}=${String(v)}`);
+  }
+  return parts.join(" · ");
+}
+
+/** The version an event refers to (deploy.version_observed rows carry it). */
+function versionOf(row: ActivityTimelineRow): string | undefined {
+  const v = row.payload.args?.version;
+  return typeof v === "string" ? v : undefined;
+}
+
+const statusOptions = ["", "invoked", "succeeded", "failed", "refused"];
+---
+
+<!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, nofollow" />
+    <title>{tenantLabel} · Ops Timeline</title>
+    <style is:global nonce={cspNonce}>
+      :root {
+        color-scheme: light;
+        --bg: #f5f7f6;
+        --surface: #ffffff;
+        --surface-soft: #f9fbfa;
+        --ink: #16211f;
+        --muted: #64716d;
+        --line: #dce5e2;
+        --teal: #007f79;
+        --green-soft: #e3f5eb;
+        --green: #137a55;
+        --red-soft: #fde7e4;
+        --red: #b42318;
+        --amber-soft: #fff0d5;
+        --amber: #a45d00;
+        --blue-soft: #e7efff;
+        --blue: #2458c7;
+        --radius: 8px;
+        --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      * { box-sizing: border-box; }
+      body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); }
+      a { color: var(--teal); }
+      .wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }
+      header.page { margin-bottom: 18px; }
+      header.page h1 { margin: 0; font-size: 22px; font-weight: 760; }
+      header.page p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
+      header.page code { font-family: var(--mono); }
+      .notice {
+        padding: 14px 16px; border: 1px solid var(--amber); border-radius: var(--radius);
+        background: var(--amber-soft); color: #5c3600; margin-bottom: 18px; font-size: 13px;
+      }
+      .skew {
+        display: flex; align-items: flex-start; gap: 12px;
+        padding: 12px 14px; border: 1px solid #f1c883; border-radius: var(--radius);
+        background: #fff6e7; margin-bottom: 18px; font-size: 13px;
+      }
+      .skew strong { display: block; }
+      .skew .versions { color: var(--muted); font-size: 12px; margin-top: 3px; }
+      .skew code { font-family: var(--mono); }
+      .alerts { display: grid; gap: 8px; margin-bottom: 18px; }
+      .alert {
+        display: flex; align-items: flex-start; gap: 12px;
+        padding: 12px 14px; border-radius: var(--radius); font-size: 13px;
+      }
+      .alert strong { display: block; }
+      .alert .meta { color: inherit; opacity: 0.75; font-size: 12px; margin-top: 3px; }
+      .alert.page, .alert.critical {
+        border: 1px solid var(--red); background: var(--red-soft); color: var(--red);
+      }
+      .alert.warning {
+        border: 1px solid #f1c883; background: #fff6e7; color: #7a4a00;
+      }
+      .alert.info {
+        border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted);
+      }
+      form.filters {
+        display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 10px; align-items: end;
+        padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
+        background: var(--surface); margin-bottom: 18px;
+      }
+      form.filters .field { display: grid; gap: 4px; min-width: 0; }
+      form.filters label { color: var(--muted); font-size: 11px; font-weight: 760; text-transform: uppercase; }
+      form.filters input, form.filters select {
+        min-height: 36px; padding: 0 9px; font: inherit;
+        border: 1px solid var(--line); border-radius: 6px; background: #fcfdfc; color: var(--ink);
+      }
+      form.filters .actions { display: flex; gap: 8px; }
+      .btn {
+        min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px;
+        border: 1px solid var(--teal); border-radius: 6px; background: var(--teal); color: #fff;
+        font-weight: 680; text-decoration: none; cursor: pointer;
+      }
+      .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
+      .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
+      table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
+      th {
+        height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line);
+        background: var(--surface-soft); color: var(--muted); font-size: 11px;
+        font-weight: 760; text-align: left; text-transform: uppercase; white-space: nowrap;
+      }
+      td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
+      tr:last-child td { border-bottom: 0; }
+      td.at { white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
+      td.action code, td.change code, td.actor code { font-family: var(--mono); font-size: 12px; }
+      td.action small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
+      td.detail { color: var(--muted); overflow-wrap: anywhere; }
+      .chip {
+        display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px;
+        border-radius: 999px; background: var(--surface-soft); color: #3f4d49;
+        font-size: 11px; font-weight: 740; white-space: nowrap;
+      }
+      .chip.green { background: var(--green-soft); color: var(--green); }
+      .chip.red { background: var(--red-soft); color: var(--red); }
+      .chip.amber { background: var(--amber-soft); color: var(--amber); }
+      .chip.blue { background: var(--blue-soft); color: var(--blue); }
+      .chip.stale { background: #ffe0d6; color: #a5330a; margin-left: 6px; }
+      .empty { padding: 40px 16px; text-align: center; color: var(--muted); }
+      @media (max-width: 760px) {
+        form.filters { grid-template-columns: 1fr 1fr; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <header class="page">
+        <h1>Operational activity timeline</h1>
+        <p>
+          {tenantLabel} · <code>{tenant.tenant_id}</code> · lifecycle events, newest first ·
+          <a href={adminPath}>← Admin</a>
+        </p>
+      </header>
+
+      {!viewerSession && (
+        <div class="notice">
+          Sign in as an owner/admin of {tenantLabel} to view the operational activity timeline.
+          <a href="/auth/login">Sign in</a>.
+        </div>
+      )}
+
+      {viewerSession && !authorized && (
+        <div class="notice">
+          {viewerEmail} is signed in but has no owner/admin standing for {tenantLabel}. The ops
+          timeline is limited to owners/admins of this store and ToT staff.
+        </div>
+      )}
+
+      {authorized && !dbAvailable && (
+        <div class="notice">
+          The activity timeline is stored in D1 (<code>STOREFRONT_APPS_DB</code>), which isn't
+          bound in this environment — no rows to show here.
+        </div>
+      )}
+
+      {authorized && alerts.length > 0 && (
+        <div class="alerts" role="alert">
+          {alerts.map((a) => (
+            <div class={`alert ${a.severity}`}>
+              <span aria-hidden="true">{a.severity === "page" || a.severity === "critical" ? "🚨" : "⚠️"}</span>
+              <div>
+                <strong>{a.title}</strong>
+                <div>{a.summary}</div>
+                <div class="meta">
+                  {a.changeId && <>Change <code>{a.changeId}</code> · </>}
+                  since {a.since}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {authorized && skew?.skewDetected && (
+        <div class="skew" role="status">
+          <span aria-hidden="true">⚠️</span>
+          <div>
+            <strong>Deploy skew detected</strong>
+            <div class="versions">
+              {skew.runningVersion
+                ? <>Serving build <code>{skew.runningVersion}</code>. </>
+                : <>Serving build unknown. </>}
+              Observed builds:{" "}
+              {skew.observedVersions.map((v, i) => (
+                <>
+                  {i > 0 ? ", " : ""}
+                  <code>{v.version}</code>{v.env ? ` (${v.env})` : ""}
+                  {v.version === skew.latestObservedVersion ? " — latest" : " — stale"}
+                </>
+              ))}.
+              This is a visibility signal only (alerting is a separate concern).
+            </div>
+          </div>
+        </div>
+      )}
+
+      {authorized && (
+        <form class="filters" method="get" action={timelinePath}>
+          <div class="field">
+            <label for="f-changeId">Change ID</label>
+            <input id="f-changeId" type="text" name="changeId" value={query.changeId ?? ""} placeholder="chg-…" />
+          </div>
+          <div class="field">
+            <label for="f-action">Action</label>
+            <input id="f-action" type="text" name="action" value={query.action ?? ""} placeholder="change.ship" />
+          </div>
+          <div class="field">
+            <label for="f-actionPrefix">Action family</label>
+            <input id="f-actionPrefix" type="text" name="actionPrefix" value={query.actionPrefix ?? ""} placeholder="change." />
+          </div>
+          <div class="field">
+            <label for="f-actorId">Actor ID</label>
+            <input id="f-actorId" type="text" name="actorId" value={query.actorId ?? ""} placeholder="h_…" />
+          </div>
+          <div class="field">
+            <label for="f-status">Status</label>
+            <select id="f-status" name="status">
+              {statusOptions.map((s) => (
+                <option value={s} selected={query.status === s || (s === "" && !query.status)}>
+                  {s === "" ? "any" : s}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div class="field">
+            <label for="f-since">Since (ISO)</label>
+            <input id="f-since" type="text" name="since" value={query.since ?? ""} placeholder="2026-08-01" />
+          </div>
+          <div class="field">
+            <label for="f-until">Until (ISO)</label>
+            <input id="f-until" type="text" name="until" value={query.until ?? ""} placeholder="2026-08-31" />
+          </div>
+          <div class="field actions">
+            <button class="btn" type="submit">Filter</button>
+            <a class="btn ghost" href={timelinePath}>Reset</a>
+          </div>
+        </form>
+      )}
+
+      {authorized && dbAvailable && (
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>When</th>
+                <th>Actor</th>
+                <th>Action</th>
+                <th>Status</th>
+                <th>Change</th>
+                <th>Detail</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.length === 0 && (
+                <tr>
+                  <td class="empty" colspan="6">No activity matches these filters yet.</td>
+                </tr>
+              )}
+              {rows.map((row) => {
+                const version = versionOf(row);
+                const isStale = version != null && staleVersions.has(version);
+                return (
+                  <tr>
+                    <td class="at">{row.at}</td>
+                    <td class="actor"><code>{shortActor(row)}</code></td>
+                    <td class="action">
+                      <code>{row.action}</code>
+                      {row.actionDesc && <small>{row.actionDesc}</small>}
+                    </td>
+                    <td>
+                      <span class={`chip ${statusClass(row.status)}`}>{row.status}</span>
+                      {row.errorClass && <span class="chip amber">{row.errorClass}</span>}
+                      {isStale && <span class="chip stale">stale build</span>}
+                    </td>
+                    <td class="change">{row.changeId ? <code>{row.changeId}</code> : "—"}</td>
+                    <td class="detail">{detailFor(row) || "—"}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  </body>
+</html>