@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

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

@@ -1,420 +0,0 @@
----
-/**
- * `/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>

package/apps/storefront/src/pages/admin/review-release.astro

@@ -1,265 +0,0 @@
----
-/**
- * `/admin/review-release` — the merchant Review-and-Release workspace.
- *
- * The two-decision merchant surface (`docs/review-release-ux-contract.md`): a
- * merchant only ever (1) adds a ready change to the next release, and (2) publishes
- * the next release live. Everything mechanical — candidate prep, checks, retries,
- * reconciliation, conflict handling, exact-digest pins — runs UNDERNEATH and is
- * never a merchant control. This is an ADDITIVE surface; the operator/developer
- * "Publish" tab (`AdminPublishTab.astro`) keeps the retry/reject/rollback/
- * domain controls.
- *
- * ROUTING / AUTH — mirrors `admin.astro` + `admin/ops-timeline.astro`: middleware
- * resolves the tenant, injects CSP/security headers, and holds anonymous/non-member
- * visitors at the sign-in gate. Tenant context is already resolved by the time this
- * renders. Ship capability is stamped server-side (owner/admin, or an explicit
- * ship-on-behalf grant) — the SAME model the `/api/changes` + `/api/changes/ship`
- * endpoints re-authorize on every request; this is UX mirroring only.
- *
- * The page renders a static shell (three section containers, a persistent
- * ARIA-live announcer, an undo toast, and a focus-trapped publish-confirm dialog);
- * the client controller (`reviewReleaseWorkspace/controller.ts`) fetches
- * `GET /api/changes`, derives the two-decision view model with the pure
- * `lib/publish/reviewRelease` seam, and renders it.
- */
-export const prerender = false;
-
-import { readViewerSession } from "@/lib/auth/route";
-import { resolveViewerShipCapability } from "@/lib/change";
-import { withBase } from "@/lib/basePath";
-import { isInternalTestTenant } from "@tot/public-runtime";
-
-const { tenant, basePath, cspNonce } = Astro.locals;
-const adminPath = `${basePath || ""}/admin`;
-const storeName = tenant.displayName || tenant.appDomain || tenant.tenant_id;
-
-const viewerSession = await readViewerSession(Astro);
-
-// Ship capability, mirrored from the same session model the API routes gate on.
-// UX-only: the server re-authorizes every action. Owner/admin of THIS tenant, or a
-// signed-in developer holding a LIVE ship-on-behalf grant.
-const sessionCapability =
-  viewerSession?.resource === tenant.appDomain ? viewerSession.capability : undefined;
-const viewerCapability = Astro.locals.viewer?.capability ?? sessionCapability ?? "none";
-let canShip = viewerCapability === "owner" || viewerCapability === "admin";
-if (!canShip && Astro.locals.viewer?.email) {
-  const shipGrant = await resolveViewerShipCapability(Astro.locals.viewer.email, tenant.appDomain);
-  if (shipGrant === "ship-on-behalf") canShip = true;
-}
-
-const internalTestStore = isInternalTestTenant(tenant);
-
-const changesEndpoint = withBase(basePath || "", "/api/changes");
-const acceptEndpoint = withBase(basePath || "", "/api/changes/accept");
-const shipEndpoint = withBase(basePath || "", "/api/changes/ship");
-const buildEndpoint = withBase(basePath || "", "/api/preview/build");
-const liveHref = withBase(basePath || "", "/");
----
-
-<!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>{storeName} · Review and Release</title>
-    <style is:global nonce={cspNonce}>
-      :root {
-        color-scheme: light;
-        --rr-bg: #f5f7f6;
-        --rr-surface: #ffffff;
-        --rr-surface-soft: #f9fbfa;
-        --rr-ink: #16211f;
-        --rr-muted: #5b6a65;
-        --rr-line: #dce5e2;
-        --rr-teal: #007f79;
-        --rr-green-soft: #e3f5eb;
-        --rr-green: #137a55;
-        --rr-amber-soft: #fff0d5;
-        --rr-amber: #a45d00;
-        --rr-red-soft: #fde7e4;
-        --rr-red: #b42318;
-        --rr-blue-soft: #e7efff;
-        --rr-blue: #2458c7;
-        --rr-radius: 10px;
-        --rr-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-        --rr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-      }
-      * { box-sizing: border-box; }
-      body { margin: 0; background: var(--rr-bg); color: var(--rr-ink); font: 15px/1.55 var(--rr-font); }
-      a { color: var(--rr-teal); }
-      code.rr-mono { font-family: var(--rr-mono); font-size: 0.85em; }
-      .rr-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 72px; }
-      header.rr-page { margin-bottom: 22px; }
-      header.rr-page h1 { margin: 0; font-size: 24px; font-weight: 780; letter-spacing: -0.01em; }
-      header.rr-page p { margin: 5px 0 0; color: var(--rr-muted); font-size: 13px; }
-
-      .rr-notice {
-        padding: 14px 16px; border: 1px solid var(--rr-amber); border-radius: var(--rr-radius);
-        background: var(--rr-amber-soft); color: #5c3600; margin-bottom: 18px; font-size: 14px;
-      }
-
-      .rr-section {
-        background: var(--rr-surface); border: 1px solid var(--rr-line);
-        border-radius: var(--rr-radius); padding: 18px 20px; margin-bottom: 18px;
-      }
-      .rr-section-title { margin: 0 0 4px; font-size: 17px; font-weight: 720; }
-      .rr-note { color: var(--rr-muted); font-size: 13px; margin: 8px 0 0; }
-      .rr-empty { color: var(--rr-muted); font-size: 14px; margin: 12px 0 0; }
-
-      /* Change list */
-      .rr-change-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
-      .rr-change {
-        display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
-        padding: 12px 14px; border: 1px solid var(--rr-line); border-radius: 8px;
-        background: var(--rr-surface-soft);
-      }
-      .rr-change-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-      .rr-change-title { font-weight: 640; }
-      .rr-subline { margin: 4px 0 0; color: var(--rr-muted); font-size: 13px; }
-      .rr-change-actions { display: flex; gap: 8px; flex: none; }
-
-      /* Status chips — ALWAYS carry the state WORD (never color alone, a11y §8). */
-      .rr-chip {
-        display: inline-flex; align-items: center; min-height: 20px; padding: 1px 9px;
-        border-radius: 999px; font-size: 11px; font-weight: 720; white-space: nowrap;
-        background: var(--rr-surface); border: 1px solid var(--rr-line); color: #3f4d49;
-      }
-      .rr-chip-preparing { background: var(--rr-blue-soft); color: var(--rr-blue); border-color: transparent; }
-      .rr-chip-ready-to-add { background: var(--rr-green-soft); color: var(--rr-green); border-color: transparent; }
-      .rr-chip-in-next-release { background: var(--rr-surface-soft); color: var(--rr-teal); border-color: var(--rr-teal); }
-      .rr-chip-needs-attention { background: var(--rr-amber-soft); color: var(--rr-amber); border-color: transparent; }
-      .rr-chip-published { background: var(--rr-green-soft); color: var(--rr-green); border-color: transparent; }
-
-      /* Release panel */
-      .rr-release-body { margin: 2px 0 0; color: var(--rr-muted); font-size: 14px; }
-      .rr-contents { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rr-line); }
-      .rr-contents-title { margin: 0 0 8px; font-size: 13px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rr-muted); }
-      .rr-contents-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
-      .rr-release-action { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
-      .rr-paywall { flex-direction: column; align-items: flex-start; }
-      .rr-success { margin: 12px 0 0; color: var(--rr-green); font-weight: 640; }
-      .rr-live-body { margin: 4px 0 12px; color: var(--rr-muted); font-size: 14px; }
-
-      /* Buttons */
-      .rr-btn {
-        min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
-        padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 660; font-size: 14px;
-        cursor: pointer; text-decoration: none; border: 1px solid var(--rr-teal);
-        background: var(--rr-surface); color: var(--rr-teal);
-      }
-      .rr-btn-primary { background: var(--rr-teal); color: #fff; }
-      .rr-btn-ghost { border-color: var(--rr-line); color: var(--rr-ink); }
-      .rr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-      .rr-btn:focus-visible { outline: 3px solid var(--rr-blue); outline-offset: 2px; }
-      a.rr-btn:focus-visible { outline: 3px solid var(--rr-blue); outline-offset: 2px; }
-
-      /* Announcer (SR-only) + undo toast */
-      .rr-announce {
-        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-      }
-      .rr-toast {
-        position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
-        background: var(--rr-ink); color: #fff; padding: 10px 16px; border-radius: 8px;
-        font-size: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); z-index: 40;
-      }
-
-      /* Publish-confirm dialog */
-      .rr-confirm-backdrop {
-        position: fixed; inset: 0; background: rgba(22, 33, 31, 0.45);
-        display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
-      }
-      /* `display: flex` above beats the UA `[hidden]{display:none}` rule at equal
-         specificity (author styles always win) — without this, toggling the
-         `hidden` attribute in JS has no visual effect and the dialog looks stuck. */
-      .rr-confirm-backdrop[hidden] {
-        display: none;
-      }
-      .rr-confirm-dialog {
-        background: var(--rr-surface); border-radius: var(--rr-radius); padding: 22px 24px;
-        max-width: 440px; width: 100%; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
-      }
-      .rr-confirm-dialog h2 { margin: 0 0 8px; font-size: 19px; font-weight: 740; }
-      .rr-confirm-dialog p { margin: 0 0 20px; color: var(--rr-muted); font-size: 14px; }
-      .rr-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
-
-      .rr-loading { color: var(--rr-muted); font-size: 14px; padding: 8px 0; }
-
-      @media (max-width: 560px) {
-        .rr-change { flex-direction: column; }
-        .rr-change-actions { width: 100%; }
-        .rr-btn { width: 100%; }
-      }
-      @media (prefers-reduced-motion: reduce) {
-        * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="rr-wrap">
-      <header class="rr-page">
-        <h1>Review and release</h1>
-        <p>{storeName} · review changes and publish your next release · <a href={adminPath}>← Admin</a></p>
-      </header>
-
-      {!viewerSession && (
-        <div class="rr-notice">
-          Sign in as an owner or admin of {storeName} to review changes and publish releases.
-          <a href="/auth/login">Sign in</a>.
-        </div>
-      )}
-
-      {viewerSession && (
-        <div
-          data-rr-root
-          data-changes-endpoint={changesEndpoint}
-          data-accept-endpoint={acceptEndpoint}
-          data-ship-endpoint={shipEndpoint}
-          data-build-endpoint={buildEndpoint}
-          data-live-href={liveHref}
-          data-can-ship={canShip ? "true" : "false"}
-          data-internal-test-store={internalTestStore ? "true" : "false"}
-          data-store-name={storeName}
-        >
-          <div class="rr-announce" data-rr-announce role="status" aria-live="polite"></div>
-
-          <div data-rr-workspace>
-            <p class="rr-loading" data-rr-loading>Loading your changes and next release…</p>
-          </div>
-
-          <div class="rr-toast" data-rr-toast role="status" aria-live="polite" hidden></div>
-
-          <!-- Publish-confirm dialog — a single plain-language step (the human go-live
-               gate). role=dialog, focus-trapped, Esc cancels, focus returns to the
-               invoking button. No typed-domain confirm, no digest to verify. -->
-          <div class="rr-confirm-backdrop" data-rr-confirm hidden>
-            <div
-              class="rr-confirm-dialog"
-              data-rr-confirm-dialog
-              role="dialog"
-              aria-modal="true"
-              aria-labelledby="rr-confirm-heading"
-              tabindex="-1"
-            >
-              <h2 id="rr-confirm-heading" data-rr-confirm-heading>Publish your next release?</h2>
-              <p data-rr-confirm-body></p>
-              <div class="rr-confirm-actions">
-                <button type="button" class="rr-btn rr-btn-ghost" data-rr-confirm-cancel>Cancel</button>
-                <button type="button" class="rr-btn rr-btn-primary" data-rr-confirm-ok>Publish now</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-
-    {viewerSession && (
-      <script>
-        import { initReviewReleaseWorkspace } from "@/lib/publish/reviewReleaseWorkspace/controller";
-        initReviewReleaseWorkspace();
-      </script>
-    )}
-  </body>
-</html>