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

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

@@ -11,7 +11,7 @@ import { getTenantResolver } from "@/config/resolver";
 import { referenceTheme } from "@/themes/reference";
 import { mergeTheme, themeToCssVars } from "@/themes/schema";
 import { createToTClient } from "@/lib/tot/ToTClient";
-import { readEnv, readKv, readD1 } from "@/lib/env";
+import { readEnv, readKv, readD1, readR2 } from "@/lib/env";
 import { resolveTenantRouting } from "@/lib/tenantRouting";
 import { createContentProvider, DevDraftContentProvider } from "@/lib/storyblok/provider";
 import { DEV_DRAFT_COOKIE, devDraftKey, verifyDevDraftToken } from "@/lib/dev/devDraft";
@@ -21,6 +21,7 @@ import {
   readCacheVersion,
   getCachedPage,
   putCachedPage,
+  staticBundleCacheKey,
 } from "@/lib/edgeCache";
 import { STATIC_SCRIPT_HASHES, STATIC_STYLE_HASHES } from "@/lib/cspStaticHashes";
 import { applySecurityHeaders } from "@/lib/securityHeaders";
@@ -38,8 +39,12 @@ import {
   resolveTenantFeatures,
   resolveCapabilities,
   capabilitiesArtifactPath,
+  resolveChannelDigest,
+  resolveServableChannelVersion,
+  channelFromEnv,
+  serveStaticBundle,
 } from "@tot/public-runtime";
-import type { CapabilityConfig } from "@tot/public-runtime";
+import type { CapabilityConfig, StaticBundleR2BucketLike } from "@tot/public-runtime";
 import { resolveTenantCommerce } from "@/lib/checkoutCommerce";
 import { evaluateDemoGate, hostInGateList } from "@/lib/demoGate";
 import {
@@ -54,6 +59,9 @@ 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 { observeDeployVersion } from "@/lib/activity/deployVersion";
+import { recordActivity } from "@/lib/activity/recordActivity";
+import { primeActivityKillSwitch } from "@/lib/activity/killSwitch";
 import type { DeepPartial, ThemeTokens } from "@tot/public-runtime";
 
 export const onRequest = defineMiddleware(async (context, next) => {
@@ -62,6 +70,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
@@ -147,6 +170,14 @@ export const onRequest = defineMiddleware(async (context, next) => {
     }
     const nowSeconds = Math.floor(Date.now() / 1000);
     const admitted = sessionAdmitsHost(viewerRecord, tenant.appDomain, nowSeconds);
+    // QA content-bypass: only when the server has configured DEMO_GATE_BYPASS_TOKEN
+    // (never in a prod slot) AND the request presents a matching X-Demo-Gate-Bypass
+    // header. Unset token ⇒ false ⇒ fully inert; a client cannot self-grant. The
+    // public-content-only restriction (admin/cockpit/api excluded) is enforced
+    // inside evaluateLoginGate via isBypassPrivilegedPath.
+    const bypassToken = await readEnv("DEMO_GATE_BYPASS_TOKEN");
+    const qaBypass =
+      !!bypassToken && request.headers.get("x-demo-gate-bypass") === bypassToken;
     const decision = evaluateLoginGate({
       host,
       pathname: url.pathname,
@@ -155,6 +186,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
       gatedHosts: demoGateHosts,
       hasValidSession: admitted,
       tenantExempt,
+      qaBypass,
     });
     if (decision.action === "redirect") {
       // Withhold content but offer sign-in (carrying the intended destination).
@@ -188,6 +220,79 @@ export const onRequest = defineMiddleware(async (context, next) => {
   // signature, expiry, tenant binding — before the overlay is applied further down.
   const draftCookie = context.cookies.get(DEV_DRAFT_COOKIE)?.value ?? null;
 
+  // ---- Digest-addressed static-bundle serving (ADR 0012) --------------------
+  // For a static-publish tenant's PRODUCTION reads only (never preview/test — the
+  // "Worker serves interactive preview, R2 serves prod" split), read the live
+  // bundle straight out of R2 instead of falling through to SSR. Deliberately
+  // BEFORE the edge page cache / catalog / theme / customization machinery below:
+  // none of that applies to bundle bytes served verbatim, and this path must
+  // never SSR-fallthrough once it's eligible (a missing digest/object fails
+  // closed, see `serveStaticBundle`), so it has to fully own the response, not
+  // degrade into the normal render.
+  // Host-resolved reads only (`basePath === ""`): bundle bytes are served
+  // VERBATIM with root-absolute links, so a path-prefixed view
+  // (/<domain>/… on the shared .store host) would escape its prefix on every
+  // href — those views keep SSR, which rewrites hrefs through basePath.
+  const staticBundleEligible =
+    tenant.staticPublish != null &&
+    tenant.staticPublish.enabled !== false &&
+    basePath === "" &&
+    request.method.toUpperCase() === "GET" &&
+    !isPreviewHost &&
+    !queryToken &&
+    !cookieToken &&
+    !draftCookie &&
+    !url.pathname.startsWith("/api/");
+  if (staticBundleEligible) {
+    const bundleBucket = await readR2("STATIC_BUNDLES");
+    if (bundleBucket) {
+      const kvGet = kv ? (key: string) => kv.get(key) : async () => null;
+      // The R2 bundle key is the `treeDigest`, NOT the `live` channel versionId
+      // (the Gitea sha). Read the reconciled digest companion (`channelDigests.live`)
+      // — `gatedPromote`/`rollbackCandidateAtomic` write it in the same CAS flip as
+      // the versionId. No digest = this tenant has never staged a bundle — SSR
+      // serves it (a static-publish tenant must be able to bootstrap, and its
+      // app surfaces must never be downed by an unstaged static plane).
+      const digest = await resolveChannelDigest(kvGet, tenant.tenant_id, "live");
+      if (digest) {
+        const bundleCacheKey = cache
+          ? staticBundleCacheKey(tenant.tenant_id, digest, url.pathname, url.search)
+          : null;
+        if (bundleCacheKey && cache) {
+          const hit = await getCachedPage(cache, bundleCacheKey);
+          if (hit) return hit;
+        }
+        const bundleResponse = await serveStaticBundle(
+          {
+            bucket: bundleBucket as unknown as StaticBundleR2BucketLike,
+            digest,
+            onFailClosed: (detail) => {
+              console.error(
+                `[static-bundle] fail-closed for ${tenant.tenant_id} ${url.pathname}: ${detail}`,
+              );
+            },
+          },
+          url.pathname,
+        );
+        // `null` = the manifest proves this path is outside the bundle's static
+        // surface (an app surface like /admin) — SSR owns it below.
+        if (bundleResponse) {
+          if (bundleCacheKey && cache) {
+            await putCachedPage(cache, bundleCacheKey, bundleResponse);
+          }
+          return bundleResponse;
+        }
+      } else {
+        console.error(
+          `[static-bundle] no live digest for ${tenant.tenant_id} — SSR until a bundle is staged`,
+        );
+      }
+    }
+    // No STATIC_BUNDLES binding (plain `astro dev`, or unconfigured) —
+    // degrading to SSR here rather than a hard failure keeps `astro dev`/tests
+    // usable without provisioning R2.
+  }
+
   // ---- Edge page cache (D1): short-circuit production browse reads on a hit,
   // BEFORE building the client / theme / rendering. Misses store the final
   // response at the end of this middleware.
@@ -245,6 +350,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
     token: previewToken,
     secret: previewSecret,
     nowSeconds,
+    pathname: url.pathname,
   });
   if (customization.reject) {
     return new Response(customization.reject.message, {
@@ -273,6 +379,28 @@ export const onRequest = defineMiddleware(async (context, next) => {
   // pointer fall back to the legacy per-path selection — no behavior change.
   const kvGet = kv ? (key: string) => kv.get(key) : async () => null;
 
+  // Self-heal a DANGLING channel pointer: the pointer for this env's channel may
+  // name a version that was never built (or whose manifest was evicted).
+  // `readVersionedArtifact` already serves last-built content instead of emptying
+  // the surface; here we do the once-per-request detection to ENQUEUE a rebuild of
+  // the dangling version. Fail-open: a KV hiccup never blocks the render (the reads
+  // below still run).
+  if (kv) {
+    const channel = channelFromEnv(customization.env);
+    await resolveServableChannelVersion(kvGet, tenant.tenant_id, channel, ({ versionId }) => {
+      recordActivity({
+        action: "preview.build.requested",
+        actor: { kind: "system", id: "storefront" },
+        source: "server",
+        outcome: { status: "succeeded" },
+        scope: { tenantId: tenant.tenant_id },
+        payload: { args: { changeId: versionId } },
+      });
+    }).catch(() => {
+      /* fail-open: self-heal detection never breaks the request */
+    });
+  }
+
   // Verify the developer-draft cookie (signature + expiry + tenant binding) — the
   // overlay below only engages for the developer who minted the draft, on THIS
   // tenant. Same secret + trust model as the preview token; invalid/expired/foreign

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>