@tokenoftrust/storefront-runner 1.3.4-rc.3 → 1.4.0

package/apps/storefront/src/components/admin/AdminPublishTab.astro

@@ -0,0 +1,1959 @@
+---
+/**
+ * Publish tab — the go-live surface (handoffs 2026-08-05-admin-golive-surface
+ * + 2026-08-05-domain-connect-ux). Replaces the terminal runbook for a
+ * permissioned operator:
+ *
+ *   - OPEN CHANGE QUEUE from GET /api/changes ({ current, changes }) with
+ *     per-change reconcile/compliance state, preview link, head sha, and age.
+ *   - GO LIVE (POST /api/changes/accept with expectedHeadSha — the stale-head
+ *     "superseded" refusal and the audit record are surfaced legibly) and
+ *     REJECT (with a note) per change.
+ *   - LIVE STATE: the current live version (live-channel pointer) + the
+ *     static-republish dispatch status for static-publish tenants (fired /
+ *     skipped / sink-unbound notice).
+ *   - DOMAIN section (static-publish tenants): apex connect + rollback via the
+ *     www-domain dispatch endpoints — typed-confirmation connect (owner-only),
+ *     always-visible rollback with the captured-records timestamp, in-flight
+ *     run + legible failures.
+ *
+ * PERMISSIONS (server-authoritative; mirrored here for UX only):
+ *   - Ship actions require an owner/admin session (`resolveOwnerSession`'s
+ *     OWNER_CAPABILITIES) — others see the queue read-only with a sign-in note.
+ *   - Non-premium tenants see the go-live control as a PAYWALL UPSELL — never
+ *     hidden, never "coming soon" (recorded product direction). The
+ *     entitlement signal is the existing premium model (D4): a custom-domain
+ *     tenant is premium/pilot; a `<label>.tokenoftrust.store` self-serve store
+ *     is not. TODO(paywall workstream): replace with the real billing
+ *     entitlement when one exists.
+ */
+import { readViewerSession } from "@/lib/auth/route";
+import { withBase } from "@/lib/basePath";
+import { readEnv } from "@/lib/env";
+import { resolveViewerShipCapability } from "@/lib/change";
+import { isHostedStoreDomain, isInternalTestTenant } from "@tot/public-runtime";
+
+const { envelope } = Astro.props;
+const { tenant, basePath, cspNonce } = Astro.locals;
+
+// Viewer capability, mirrored from the same session model the API routes gate
+// on (resolveOwnerSession admits capability owner|admin). UX-only: the server
+// re-authorizes every action.
+const viewerSession = await readViewerSession(Astro);
+// Session capability counts only when the session's resource IS this tenant.
+const sessionCapability =
+  viewerSession?.resource === tenant.appDomain ? viewerSession.capability : undefined;
+const viewerCapability =
+  Astro.locals.viewer?.capability ?? sessionCapability ?? "none";
+// A signed-in DEVELOPER (not owner/admin) may hold an explicit, owner-revocable
+// ship-on-behalf grant. Resolve it LIVE from the MCP subject-capability store —
+// NEVER the coarse role, NEVER a client header — so a ship-granted developer sees
+// the queue + Go-live/Reject/Retire. This MIRRORS the server (resolveShipSession /
+// effectiveShipCapability); the server re-authorizes every action. UX-only.
+let viewerCanShip = viewerCapability === "owner" || viewerCapability === "admin";
+if (!viewerCanShip && Astro.locals.viewer?.email) {
+  const shipGrant = await resolveViewerShipCapability(
+    Astro.locals.viewer.email,
+    tenant.appDomain,
+  );
+  if (shipGrant === "ship-on-behalf") viewerCanShip = true;
+}
+const viewerIsOwner = viewerCapability === "owner";
+// Apex/domain cutover is granted to owner OR admin (decision: apex-cutover =
+// owner+admin). This MIRRORS the server, whose `apexCutover` = `isOwner` over
+// OWNER_CAPABILITIES {owner, admin} (see change/route.ts decideIsOwner +
+// change/shipCapabilities.ts) — this UI gate was wrongly owner-only, stricter
+// than the gate the server actually enforces. UX-only: the server re-authorizes.
+const viewerCanApexCutover = viewerCapability === "owner" || viewerCapability === "admin";
+
+// Entitlement: the existing premium signal (custom-domain tenant = premium).
+// TODO(paywall workstream): swap for the real billing entitlement.
+const goLiveEntitled = !isHostedStoreDomain(tenant.appDomain);
+const internalTestTenant = isInternalTestTenant(tenant);
+
+const staticPublishEnabled = Boolean(
+  tenant.staticPublish && tenant.staticPublish.enabled !== false,
+);
+// Presence-only signal for the T5 dispatch sink (never the value).
+const dispatchConfigured = Boolean((await readEnv("WWW_PUBLISH_DISPATCH_TOKEN"))?.trim());
+
+const changesEndpoint = withBase(basePath || "", "/api/changes");
+const acceptEndpoint = withBase(basePath || "", "/api/changes/accept");
+// b11 — the branch-integration lifecycle SPLIT of accept from publish:
+//   - integrateEndpoint = b08's "accept = integrate into the protected preview
+//     aggregate" (POST /api/changes/integrate → TenantIntegrationQueue.enqueue).
+//     This is the candidate-queue "Accept to preview" action — it advances the
+//     shared aggregate, it does NOT go live. Returns an IntegrateOutcome
+//     (queueState/runState/statusMessage), never a bare merged:true.
+//   - shipEndpoint = b10's exact-digest go-live (POST /api/changes/ship →
+//     b09 AggregateShipOrchestrator.plan/ship). The aggregate card's "Publish"
+//     action: it ships the reviewed pinned SHA + digest, double-gated
+//     (paywall + human confirm). The read-only plan is served on GET /api/changes
+//     (`plan`), so the confirm surface never has to POST to preview it.
+// If b08/b10's exact paths differ at fold, the integrator reconciles here —
+// these are the agreed contract paths (see the unit brief).
+const integrateEndpoint = withBase(basePath || "", "/api/changes/integrate");
+const shipEndpoint = withBase(basePath || "", "/api/changes/ship");
+// U7 — retire/GC: evict a candidate's ReviewEnvironment + version (rebuildable),
+// DISTINCT from reject (which closes the change). Gated server-side by retireGate.
+const retireEndpoint = withBase(basePath || "", "/api/preview/retire");
+// dg7 — the ship-operations workspace woven into this tab: versions/promotion
+// history, per-candidate diff, and rollback (through the ONE rollback
+// orchestrator). Read endpoints mirror the change-queue's auth/scope.
+const versionsEndpoint = withBase(basePath || "", "/api/changes/versions");
+const rollbackEndpoint = withBase(basePath || "", "/api/changes/rollback");
+// The client builds `${diffEndpointBase}/<changeId>/diff` per candidate.
+const diffEndpointBase = changesEndpoint;
+const domainStatusEndpoint = withBase(basePath || "", "/api/domain/status");
+const domainDispatchEndpoint = withBase(basePath || "", "/api/domain/dispatch");
+// u9: the machine-verifiable apex-cutover readiness gate — the SAME server gate the
+// `tot go-live` CLI reads, so the admin display and the CLI never diverge.
+const domainReadinessEndpoint = withBase(basePath || "", "/api/domain/readiness");
+---
+
+<!-- agent-hook:publish-tab -->
+<section
+  id="publish"
+  class="band publish-tab"
+  aria-labelledby="admin-tab-publish publish-title"
+  data-admin-panel
+  data-agent-scope="publish"
+  role="tabpanel"
+  data-changes-endpoint={changesEndpoint}
+  data-accept-endpoint={acceptEndpoint}
+  data-integrate-endpoint={integrateEndpoint}
+  data-ship-endpoint={shipEndpoint}
+  data-retire-endpoint={retireEndpoint}
+  data-versions-endpoint={versionsEndpoint}
+  data-rollback-endpoint={rollbackEndpoint}
+  data-diff-endpoint-base={diffEndpointBase}
+  data-domain-status-endpoint={domainStatusEndpoint}
+  data-domain-dispatch-endpoint={domainDispatchEndpoint}
+  data-domain-readiness-endpoint={domainReadinessEndpoint}
+  data-repo={tenant.appDomain}
+  data-app-domain={tenant.appDomain}
+  data-can-ship={viewerCanShip ? "true" : "false"}
+  data-is-owner={viewerIsOwner ? "true" : "false"}
+  data-entitled={goLiveEntitled ? "true" : "false"}
+  data-static-publish={staticPublishEnabled ? "true" : "false"}
+  data-dispatch-configured={dispatchConfigured ? "true" : "false"}
+>
+  <div class="section-title">
+    <div>
+      <h2 id="publish-title">Publish</h2>
+      <p>Accept changes into the preview aggregate, then publish the reviewed build live.</p>
+    </div>
+    <div class="actions">
+      <button class="btn" type="button" data-publish-refresh>
+        <svg><use href="#i-refresh"></use></svg>Refresh
+      </button>
+    </div>
+  </div>
+
+  {internalTestTenant && (
+    <div class="ship-gate amber">
+      <div class="ship-gate-main">
+        <span class="seal"><svg><use href="#i-alert"></use></svg></span>
+        <div>
+          <b>Internal test store</b>
+          <span>This store exists for testing only and is blocked from going live.</span>
+        </div>
+      </div>
+    </div>
+  )}
+
+  {!goLiveEntitled && (
+    <div class="ship-gate amber" data-publish-paywall>
+      <div class="ship-gate-main">
+        <span class="seal"><svg><use href="#i-card"></use></svg></span>
+        <div>
+          <b>Publishing to your live store is part of the paid plan</b>
+          <span>
+            Previewing and reviewing changes stays free. Upgrade to take changes live
+            and publish your public site.
+          </span>
+        </div>
+      </div>
+      <a class="btn primary" href="mailto:success@tokenoftrust.com?subject=Upgrade%20store%20publishing">
+        Upgrade to publish
+      </a>
+    </div>
+  )}
+
+  {goLiveEntitled && !viewerCanShip && (
+    <div class="ship-gate amber">
+      <div class="ship-gate-main">
+        <span class="seal"><svg><use href="#i-shield"></use></svg></span>
+        <div>
+          <b>Read-only view</b>
+          <span>Going live requires an owner or admin sign-in for this store.</span>
+        </div>
+      </div>
+    </div>
+  )}
+
+  <div class="grid cols-3">
+    <div class="metric">
+      <span>Live version</span>
+      <strong data-publish-live-version>—</strong>
+      <small data-publish-live-source>What shoppers see right now</small>
+    </div>
+    <div class="metric">
+      <span>Published</span>
+      <strong data-publish-live-at>—</strong>
+      <small>When the live version last changed</small>
+    </div>
+    <div class="metric">
+      <span>Open changes</span>
+      <strong data-publish-queue-count>—</strong>
+      <small>Waiting for review or go-live</small>
+    </div>
+  </div>
+
+  {staticPublishEnabled && !dispatchConfigured && (
+    <div class="risk-alert" data-publish-sink-unbound>
+      <div class="risk-alert-main">
+        <svg><use href="#i-alert"></use></svg>
+        <div>
+          <b>Automatic public-site republish is not yet enabled on this environment</b>
+          <span>
+            Going live updates the hosted store immediately; the public-site republish
+            job is dispatched once publishing is enabled here.
+          </span>
+        </div>
+      </div>
+    </div>
+  )}
+
+  <div class="panel">
+    <div class="panel-head">
+      <h3><svg><use href="#i-export"></use></svg>Candidate queue</h3>
+      <span class="chip" data-publish-queue-chip>Loading</span>
+    </div>
+    <div class="panel-body grid">
+      <p class="note publish-status" data-publish-status role="status" aria-live="polite"></p>
+      <div class="table-wrap">
+        <table class="publish-table">
+          <thead>
+            <tr>
+              <th>Change</th>
+              <th>Status</th>
+              <th>Checks</th>
+              <th>Head</th>
+              <th>Updated</th>
+              <th class="action">Actions</th>
+            </tr>
+          </thead>
+          <tbody data-publish-queue-body>
+            <tr data-publish-placeholder>
+              <td colspan="6"><span class="subtle">Loading the change queue…</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      {staticPublishEnabled && (
+        <p class="note" data-publish-dispatch-status>
+          {dispatchConfigured
+            ? "Public-site republish: dispatched automatically when a change goes live."
+            : "Public-site republish: not yet enabled on this environment."}
+        </p>
+      )}
+    </div>
+  </div>
+
+  <!-- b11: the AGGREGATE card — the protected `preview` aggregate the accepted
+       candidates integrate into, its combined evidence (the last integration
+       run's honest state), and the exact-digest Publish (b09/b10 ship the
+       reviewed pinned SHA + digest, never a rebuild). -->
+  <div class="panel" data-publish-aggregate>
+    <div class="panel-head">
+      <h3><svg><use href="#i-box"></use></svg>Preview aggregate</h3>
+      <span class="chip" data-aggregate-chip>Loading</span>
+    </div>
+    <div class="panel-body grid">
+      <p class="note publish-status" data-aggregate-status role="status" aria-live="polite"></p>
+
+      <div class="grid cols-3">
+        <div class="field">
+          <label>Aggregate build</label>
+          <strong class="publish-mono" data-aggregate-sha>—</strong>
+          <p data-aggregate-run-link>The current green preview build for this store.</p>
+        </div>
+        <div class="field">
+          <label>Combined evidence</label>
+          <strong data-aggregate-evidence>—</strong>
+          <p data-aggregate-evidence-detail>The last integration run's verdict.</p>
+        </div>
+        <div class="field">
+          <label>Reviewed digest</label>
+          <strong class="publish-mono" data-aggregate-digest>—</strong>
+          <p>The content digest that will be published — exactly what you reviewed.</p>
+        </div>
+      </div>
+
+      <!-- Included PRs — the batch this aggregate composes (b01 includedPrs). -->
+      <div class="aggregate-prs" data-aggregate-prs-wrap hidden>
+        <b>Included changes</b>
+        <ul class="aggregate-prs-list" data-aggregate-prs></ul>
+      </div>
+
+      <!-- The exact-digest Publish plan (b09 plan()): pinned SHA + digest +
+           included PRs + rollback target + paywall verdict + run link. Shown
+           inline (from GET /api/changes `plan`) so the confirm never POSTs to
+           preview. Publish is refused until the plan is `ok`. -->
+      <div class="aggregate-plan" data-aggregate-plan hidden>
+        <div class="aggregate-plan-head">
+          <b>Publish plan</b>
+          <span class="chip" data-aggregate-plan-chip></span>
+        </div>
+        <dl class="aggregate-plan-grid" data-aggregate-plan-grid></dl>
+        <p class="note" data-aggregate-plan-note></p>
+      </div>
+
+      <div class="check-row">
+        <div>
+          <b>Publish the reviewed build to your live store</b>
+          <p data-aggregate-publish-detail>
+            Publishes the exact reviewed digest — no rebuild. Available once the
+            aggregate is green and its integration run passed.
+          </p>
+        </div>
+        <button class="btn primary" type="button" data-aggregate-publish disabled>
+          <svg><use href="#i-export"></use></svg>Publish live
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- dg7: published versions + promotion history + rollback (u2/u3 promotion_status,
+       u5 immutable /rev links, u8 rollback through the one orchestrator). -->
+  <div class="panel" data-publish-versions>
+    <div class="panel-head">
+      <h3><svg><use href="#i-refresh"></use></svg>Published versions</h3>
+      <span class="chip" data-versions-chip>Loading</span>
+    </div>
+    <div class="panel-body grid">
+      <p class="note publish-status" data-versions-status role="status" aria-live="polite"></p>
+      <p class="note" data-versions-rollback-note hidden></p>
+      <div class="table-wrap">
+        <table class="publish-table versions-table">
+          <thead>
+            <tr>
+              <th>Version</th>
+              <th>Digest</th>
+              <th>Promoted</th>
+              <th>Preview</th>
+              <th>State</th>
+              <th class="action">Actions</th>
+            </tr>
+          </thead>
+          <tbody data-versions-body>
+            <tr data-versions-placeholder>
+              <td colspan="6"><span class="subtle">Loading published versions…</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  {staticPublishEnabled && (
+    <div class="panel" data-publish-domain>
+      <div class="panel-head">
+        <h3><svg><use href="#i-shield"></use></svg>Public domain</h3>
+        <span class="chip" data-domain-state-chip>Loading</span>
+      </div>
+      <div class="panel-body grid">
+        <div class="grid cols-3">
+          <div class="field">
+            <label>Serving from</label>
+            <strong data-domain-state>—</strong>
+            <p data-domain-since>Current host for {tenant.appDomain}</p>
+          </div>
+          <div class="field">
+            <label>Rollback records</label>
+            <strong data-domain-capture>None captured</strong>
+            <p>DNS records captured before connect — rollback restores these.</p>
+          </div>
+          <div class="field">
+            <label>Last run</label>
+            <strong data-domain-run>None</strong>
+            <p data-domain-run-detail>Connect and rollback runs appear here.</p>
+          </div>
+        </div>
+
+        <p class="note publish-status" data-domain-status role="status" aria-live="polite"></p>
+
+        <!-- u9: apex-cutover readiness — the itemized preconditions the server gate
+             requires before a connect is permitted. Populated from
+             /api/domain/readiness (the SAME gate `tot go-live` reads). -->
+        <div class="domain-readiness" data-domain-readiness hidden>
+          <div class="domain-readiness-head">
+            <b>Cutover readiness</b>
+            <span class="chip" data-domain-readiness-chip>Checking…</span>
+          </div>
+          <ul class="domain-readiness-list" data-domain-readiness-list></ul>
+          <p class="note" data-domain-readiness-note></p>
+        </div>
+
+        <div class="check-row">
+          <div>
+            <b>Connect {tenant.appDomain} to the storefront</b>
+            <p>
+              Updates two DNS names — <code>{tenant.appDomain}</code> and <code>www.{tenant.appDomain}</code> —
+              to serve the published site. Takes effect in about a minute. Type the
+              domain to confirm.
+            </p>
+            {!viewerCanApexCutover && (
+              <p><span class="chip amber">Owner/admin only</span> Connecting the domain requires an owner or admin sign-in.</p>
+            )}
+          </div>
+          <div class="domain-connect-controls">
+            <input
+              type="text"
+              placeholder={tenant.appDomain}
+              autocomplete="off"
+              spellcheck="false"
+              aria-label="Type the domain to confirm"
+              data-domain-confirm
+              disabled={!viewerCanApexCutover}
+            />
+            <label class="domain-rehearsal">
+              <input type="checkbox" data-domain-rehearsal disabled={!viewerCanApexCutover} />
+              Rehearsal (dry run, no DNS change)
+            </label>
+            <button
+              class="btn primary"
+              type="button"
+              data-domain-connect
+              data-owner-locked={!viewerCanApexCutover ? "true" : undefined}
+              disabled={!viewerCanApexCutover}
+            >
+              <svg><use href="#i-check"></use></svg>Connect domain
+            </button>
+          </div>
+        </div>
+
+        <div class="check-row">
+          <div>
+            <b>Roll back to the previous host</b>
+            <p data-domain-rollback-detail>
+              Restores the DNS records captured before connect. Available once records
+              have been captured.
+            </p>
+          </div>
+          <button class="btn" type="button" data-domain-rollback disabled={!viewerCanShip}>
+            <svg><use href="#i-refresh"></use></svg>Roll back
+          </button>
+        </div>
+      </div>
+    </div>
+  )}
+</section>
+
+<script is:inline nonce={cspNonce}>
+  (() => {
+    const root = document.getElementById("publish");
+    if (!root) return;
+    const ds = root.dataset;
+    const canShip = ds.canShip === "true";
+    const repo = ds.repo || "";
+    const appDomain = ds.appDomain || "";
+
+    const statusEl = root.querySelector("[data-publish-status]");
+    const queueBody = root.querySelector("[data-publish-queue-body]");
+    const queueChip = root.querySelector("[data-publish-queue-chip]");
+    const queueCount = root.querySelector("[data-publish-queue-count]");
+
+    const setStatus = (el, message, state) => {
+      if (!el) return;
+      el.textContent = message || "";
+      if (state) el.dataset.state = state;
+      else delete el.dataset.state;
+    };
+
+    const shortSha = (sha) => (sha ? String(sha).slice(0, 8) : "—");
+
+    const age = (iso) => {
+      if (!iso) return "—";
+      const ms = Date.now() - new Date(iso).getTime();
+      if (!Number.isFinite(ms) || ms < 0) return "—";
+      const mins = Math.floor(ms / 60000);
+      if (mins < 1) return "just now";
+      if (mins < 60) return mins + "m ago";
+      const hours = Math.floor(mins / 60);
+      if (hours < 48) return hours + "h ago";
+      return Math.floor(hours / 24) + "d ago";
+    };
+
+    const STATUS_CHIP = {
+      queued: "",
+      reconciling: "blue",
+      ready: "green",
+      blocked: "red",
+    };
+
+    const chip = (text, tone) => {
+      const el = document.createElement("span");
+      el.className = "chip" + (tone ? " " + tone : "");
+      el.textContent = text;
+      return el;
+    };
+
+    const cell = (...children) => {
+      const td = document.createElement("td");
+      for (const child of children) {
+        if (child == null) continue;
+        td.append(typeof child === "string" ? document.createTextNode(child) : child);
+      }
+      return td;
+    };
+
+    const subtle = (text) => {
+      const el = document.createElement("span");
+      el.className = "subtle";
+      el.textContent = text;
+      return el;
+    };
+
+    // ---- Open change queue -------------------------------------------------
+
+    const renderQueue = (payload) => {
+      const changes = Array.isArray(payload.changes) ? payload.changes : [];
+      queueBody.textContent = "";
+      if (queueCount) queueCount.textContent = String(changes.length);
+      if (queueChip) {
+        queueChip.textContent = changes.length === 1 ? "1 open" : changes.length + " open";
+        queueChip.className = "chip" + (changes.length ? " blue" : "");
+      }
+
+      if (!changes.length) {
+        const tr = document.createElement("tr");
+        const td = cell(
+          subtle(
+            "No open changes. New store changes appear here when a developer submits them for review.",
+          ),
+        );
+        td.colSpan = 6;
+        tr.append(td);
+        queueBody.append(tr);
+        return;
+      }
+
+      for (const change of changes) {
+        const tr = document.createElement("tr");
+
+        // Change id + branch / PR + preview link.
+        const idCell = document.createElement("td");
+        const idStrong = document.createElement("strong");
+        idStrong.textContent = change.changeId || "—";
+        idCell.append(idStrong);
+        const meta = [];
+        if (change.branch) meta.push(change.branch);
+        if (change.prNumber != null) meta.push("PR #" + change.prNumber);
+        if (meta.length) idCell.append(subtle(meta.join(" · ")));
+        if (change.previewUrl) {
+          const preview = document.createElement("a");
+          preview.href = change.previewUrl;
+          preview.target = "_blank";
+          preview.rel = "noopener";
+          preview.textContent = "Open preview";
+          const wrap = document.createElement("span");
+          wrap.className = "subtle";
+          wrap.append(preview);
+          idCell.append(wrap);
+        }
+        tr.append(idCell);
+
+        // Reconcile status.
+        const statusCell = cell(
+          chip(change.status || "unknown", STATUS_CHIP[change.status] ?? "amber"),
+        );
+        if (change.lastError) statusCell.append(subtle(change.lastError));
+        tr.append(statusCell);
+
+        // Evidence / compliance verdict.
+        const checks = (change.evidence && change.evidence.checks) || [];
+        const failing = checks.filter((c) => c.status === "fail");
+        const promotable = Boolean(change.evidence && change.evidence.promotable);
+        const checksCell = cell(
+          promotable ? chip("Checks passed", "green") : chip("Checks blocked", "amber"),
+        );
+        if (failing.length) {
+          checksCell.append(subtle("Failing: " + failing.map((c) => c.label || c.id).join(", ")));
+        } else if (!checks.length) {
+          checksCell.append(subtle("No checks reported yet"));
+        }
+        tr.append(checksCell);
+
+        // Head sha + age.
+        const headCell = cell(shortSha(change.headSha));
+        headCell.classList.add("publish-mono");
+        tr.append(headCell);
+        tr.append(cell(age(change.updatedAt)));
+
+        // Actions.
+        const actions = document.createElement("td");
+        actions.className = "action publish-actions";
+        // dg7 Diff: read-only, available to any viewer who can see the queue.
+        const diffBtn = document.createElement("button");
+        diffBtn.type = "button";
+        diffBtn.className = "btn";
+        diffBtn.textContent = "Diff";
+        diffBtn.title = "Show what changed vs the live version";
+        diffBtn.addEventListener("click", () => toggleDiff(change, diffBtn, tr));
+        actions.append(diffBtn);
+        // b11 SPLIT: the candidate-queue primary action is now ACCEPT TO PREVIEW
+        // (b08 integrate = advance the shared preview aggregate), NOT go-live.
+        // Integrate flips NO live channel, so it has NO paywall (entitled) gate —
+        // it holds only the ship-on-behalf capability floor. Going live is the
+        // aggregate card's Publish action, once the aggregate is green.
+        const accept = document.createElement("button");
+        accept.type = "button";
+        accept.className = "btn primary";
+        accept.textContent = "Accept to preview";
+        accept.disabled = !canShip || !change.mergeable;
+        accept.title = !canShip
+          ? "Requires an owner or admin sign-in"
+          : !change.mergeable
+            ? "This change is not ready to integrate"
+            : "Integrate this change into the preview aggregate (does not go live)";
+        accept.addEventListener("click", () => integrateCandidate(change, accept));
+        actions.append(accept);
+        const reject = document.createElement("button");
+        reject.type = "button";
+        reject.className = "btn";
+        reject.textContent = "Reject";
+        reject.disabled = !canShip;
+        reject.title = canShip ? "Close this change without publishing" : "Requires an owner or admin sign-in";
+        reject.addEventListener("click", () => rejectChange(change, reject));
+        actions.append(reject);
+
+        // U7 Retire/GC: evict this candidate's preview environment + version to
+        // reclaim space. DISTINCT from Reject — retire is reversible-by-rebuild
+        // (U1 build-on-demand + the U2 fallback page rematerialize it), so a
+        // retired PR degrades to "not built yet", not a dead 404.
+        const retire = document.createElement("button");
+        retire.type = "button";
+        retire.className = "btn";
+        retire.textContent = "Retire";
+        retire.disabled = !canShip;
+        retire.title = canShip
+          ? "Evict this preview to reclaim space — rebuildable on demand (not the same as Reject)"
+          : "Requires an owner or admin sign-in";
+        retire.addEventListener("click", () => retireChange(change, retire));
+        actions.append(retire);
+        tr.append(actions);
+
+        queueBody.append(tr);
+      }
+    };
+
+    const renderCurrent = (current) => {
+      const versionEl = root.querySelector("[data-publish-live-version]");
+      const sourceEl = root.querySelector("[data-publish-live-source]");
+      const atEl = root.querySelector("[data-publish-live-at]");
+      if (current && current.versionId) {
+        if (versionEl) versionEl.textContent = shortSha(current.versionId);
+        if (sourceEl) {
+          sourceEl.textContent =
+            (current.source === "commit" ? "Published from a change" : "Published version") +
+            (current.artifactCount != null ? " · " + current.artifactCount + " files" : "");
+        }
+        if (atEl) atEl.textContent = current.createdAt ? age(current.createdAt) : "—";
+      } else {
+        if (versionEl) versionEl.textContent = "Not live yet";
+        if (sourceEl) sourceEl.textContent = "Nothing has been published for this store";
+        if (atEl) atEl.textContent = "—";
+      }
+    };
+
+    const loadQueue = async () => {
+      try {
+        const res = await fetch(ds.changesEndpoint, { headers: { accept: "application/json" } });
+        if (res.status === 401 || res.status === 403) {
+          if (queueChip) queueChip.textContent = "Sign-in required";
+          queueBody.textContent = "";
+          const tr = document.createElement("tr");
+          const td = cell(subtle("Sign in as a store owner or admin to view the publish queue."));
+          td.colSpan = 6;
+          tr.append(td);
+          queueBody.append(tr);
+          return;
+        }
+        const data = await res.json();
+        if (!res.ok) {
+          setStatus(statusEl, data.error || "Could not load the change queue (" + res.status + ")", "err");
+          return;
+        }
+        renderCurrent(data.current);
+        renderQueue(data);
+        renderAggregate(data);
+      } catch {
+        setStatus(statusEl, "Could not load the change queue — network error", "err");
+      }
+    };
+
+    // ---- b11: the aggregate card + exact-digest Publish ---------------------
+    // Reads the aggregate/runs/plan projection GET /api/changes now returns
+    // (AggregateCardView + AggregateShipPlanView, built by aggregateView.ts):
+    //   - the aggregate's queueState + build sha + reviewed digest,
+    //   - the COMBINED EVIDENCE = the last integration run's honest state +
+    //     statusMessage (never re-derived),
+    //   - the included-PR batch,
+    //   - the b09 ship PLAN (pinned SHA/digest/PRs/rollback/paywall + run link),
+    //     shown inline so the confirm never has to POST to preview it.
+
+    const aggPanel = root.querySelector("[data-publish-aggregate]");
+    const AGG_STATE_CHIP = {
+      empty: "",
+      queued: "amber",
+      integrating: "blue",
+      green: "green",
+      red: "red",
+      shipped: "green",
+    };
+    // The plan we last rendered — the exact-digest guard the Publish POST sends
+    // back so a stale plan (queue moved / artifact changed) is refused, never
+    // shipped blind.
+    let currentPlan = null;
+
+    const runLink = (revHref, label) => {
+      if (!revHref) return null;
+      const a = document.createElement("a");
+      a.href = revHref;
+      a.target = "_blank";
+      a.rel = "noopener";
+      a.textContent = label || "Open build";
+      return a;
+    };
+
+    const renderAggregate = (data) => {
+      if (!aggPanel) return;
+      const agg = data.aggregate || null;
+      const plan = data.plan || null;
+      currentPlan = plan && plan.ok ? plan : null;
+
+      const chipEl = aggPanel.querySelector("[data-aggregate-chip]");
+      const shaEl = aggPanel.querySelector("[data-aggregate-sha]");
+      const runLinkEl = aggPanel.querySelector("[data-aggregate-run-link]");
+      const evEl = aggPanel.querySelector("[data-aggregate-evidence]");
+      const evDetailEl = aggPanel.querySelector("[data-aggregate-evidence-detail]");
+      const digestEl = aggPanel.querySelector("[data-aggregate-digest]");
+      const prsWrap = aggPanel.querySelector("[data-aggregate-prs-wrap]");
+      const prsList = aggPanel.querySelector("[data-aggregate-prs]");
+      const publishBtn = aggPanel.querySelector("[data-aggregate-publish]");
+      const publishDetail = aggPanel.querySelector("[data-aggregate-publish-detail]");
+
+      const state = (agg && agg.queueState) || "empty";
+      if (chipEl) {
+        chipEl.textContent = state;
+        chipEl.className = "chip " + (AGG_STATE_CHIP[state] || "");
+      }
+      if (shaEl) shaEl.textContent = agg && agg.aggregateSha ? shortSha(agg.aggregateSha) : "—";
+      if (runLinkEl) {
+        runLinkEl.textContent = "";
+        const link = agg && runLink(agg.revHref, "Open build");
+        if (link) runLinkEl.append(link);
+        else runLinkEl.append(document.createTextNode("The current green preview build for this store."));
+      }
+
+      // Combined evidence = the last (or in-flight) integration run's honest state.
+      const lastRun = agg && (agg.activeRun || agg.lastRun);
+      if (evEl) {
+        if (!lastRun) {
+          evEl.textContent = "No runs yet";
+        } else if (lastRun.state === "passed") {
+          evEl.textContent = "Passed";
+        } else if (lastRun.state === "failed") {
+          evEl.textContent = "Failed";
+        } else {
+          evEl.textContent = "Integrating…";
+        }
+      }
+      if (evDetailEl) {
+        evDetailEl.textContent = "";
+        if (lastRun) {
+          const parts = [];
+          if (lastRun.statusMessage) parts.push(lastRun.statusMessage);
+          else if (lastRun.state === "passed") parts.push("Combined evidence passed.");
+          else if (lastRun.state === "failed") parts.push("Combined evidence did not pass.");
+          if (lastRun.finishedAt) parts.push(age(lastRun.finishedAt));
+          evDetailEl.append(document.createTextNode(parts.join(" · ")));
+          const rl = runLink(lastRun.revHref, "Run build");
+          if (rl) {
+            evDetailEl.append(document.createTextNode(" · "));
+            evDetailEl.append(rl);
+          }
+        } else {
+          evDetailEl.append(document.createTextNode("The last integration run's verdict."));
+        }
+      }
+
+      // Reviewed digest: only known once the plan pins it (b09). Never fabricated.
+      if (digestEl) {
+        digestEl.textContent = currentPlan ? shortSha(currentPlan.artifactDigest.replace(/^sha256:/, "")) : "—";
+      }
+
+      // Included PRs.
+      const prs = (agg && agg.includedPrs) || [];
+      if (prsWrap) prsWrap.hidden = prs.length === 0;
+      if (prsList) {
+        prsList.textContent = "";
+        for (const pr of prs) {
+          const li = document.createElement("li");
+          const label = document.createElement("span");
+          label.textContent = pr.prNumber != null ? "PR #" + pr.prNumber : pr.changeId;
+          const sha = document.createElement("span");
+          sha.className = "publish-mono subtle";
+          sha.textContent = shortSha(pr.headSha);
+          li.append(label, sha);
+          prsList.append(li);
+        }
+      }
+
+      renderPlan(data.plan);
+
+      // The Publish button: enabled only for a shippable, paywall-cleared plan and
+      // a viewer who can ship. A paywalled plan is SHOWN (upsell), never hidden.
+      if (publishBtn) {
+        const shippable = Boolean(currentPlan);
+        const paywalled = currentPlan && currentPlan.paywall && !currentPlan.paywall.allowed;
+        publishBtn.disabled = !canShip || !shippable || paywalled || currentPlan.alreadyShipped;
+        publishBtn.title = !canShip
+          ? "Requires an owner or admin sign-in"
+          : !shippable
+            ? "The aggregate is not green / has no passed run to publish yet"
+            : paywalled
+              ? "Publishing to your live store is part of the paid plan"
+              : currentPlan.alreadyShipped
+                ? "This reviewed build is already live"
+                : "Publish the exact reviewed digest to your live store";
+      }
+      if (publishDetail) {
+        if (currentPlan && currentPlan.alreadyShipped) {
+          publishDetail.textContent = "This reviewed build (" + shortSha(currentPlan.pinnedSha) + ") is already live.";
+        } else if (currentPlan) {
+          publishDetail.textContent =
+            "Publishes the exact reviewed digest " + shortSha(currentPlan.artifactDigest.replace(/^sha256:/, "")) +
+            " (build " + shortSha(currentPlan.pinnedSha) + ") — no rebuild.";
+        } else {
+          publishDetail.textContent =
+            "Publishes the exact reviewed digest — no rebuild. Available once the aggregate is green and its integration run passed.";
+        }
+      }
+    };
+
+    const renderPlan = (plan) => {
+      const planBox = aggPanel && aggPanel.querySelector("[data-aggregate-plan]");
+      if (!planBox) return;
+      const chipEl = planBox.querySelector("[data-aggregate-plan-chip]");
+      const grid = planBox.querySelector("[data-aggregate-plan-grid]");
+      const note = planBox.querySelector("[data-aggregate-plan-note]");
+      if (grid) grid.textContent = "";
+
+      // No plan at all (degenerate: no store bound) — hide the box.
+      if (!plan) {
+        planBox.hidden = true;
+        return;
+      }
+      planBox.hidden = false;
+
+      if (!plan.ok) {
+        // An honest refusal — show WHY it isn't shippable, never a fake plan.
+        if (chipEl) {
+          chipEl.textContent = "Not shippable";
+          chipEl.className = "chip amber";
+        }
+        if (note) note.textContent = plan.message || ("Not shippable (" + (plan.reason || "refused") + ").");
+        return;
+      }
+
+      const paywalled = plan.paywall && !plan.paywall.allowed;
+      if (chipEl) {
+        chipEl.textContent = plan.alreadyShipped ? "Already live" : paywalled ? "Upgrade required" : "Ready to publish";
+        chipEl.className = "chip " + (plan.alreadyShipped ? "green" : paywalled ? "amber" : "green");
+      }
+
+      const row = (term, value, mono) => {
+        const dt = document.createElement("dt");
+        dt.textContent = term;
+        const dd = document.createElement("dd");
+        if (value instanceof Node) dd.append(value);
+        else {
+          dd.textContent = value;
+          if (mono) dd.className = "publish-mono";
+        }
+        grid.append(dt, dd);
+      };
+
+      row("Reviewed build", shortSha(plan.pinnedSha), true);
+      row("Reviewed digest", shortSha(plan.artifactDigest.replace(/^sha256:/, "")), true);
+      row("Included changes", String((plan.includedPrs || []).length) + " change" + ((plan.includedPrs || []).length === 1 ? "" : "s"));
+      const runCell = document.createElement("span");
+      runCell.append(document.createTextNode(plan.integrationRunId));
+      const planRunLink = runLink(plan.pinnedRevHref, "Open build");
+      if (planRunLink) {
+        runCell.append(document.createTextNode(" · "));
+        runCell.append(planRunLink);
+      }
+      row("Integration run", runCell);
+      if (plan.rollbackTarget) {
+        row("Rollback to", shortSha(plan.rollbackTarget.aggregateSha), true);
+      } else {
+        row("Rollback to", "None (first publish)");
+      }
+      row("Subscription", plan.paywall && plan.paywall.allowed ? "Enabled" : "Not enabled");
+
+      if (note) {
+        note.textContent = paywalled
+          ? (plan.paywall.message || "Publishing to your live store requires the paid plan.")
+          : plan.alreadyShipped
+            ? "This reviewed build is already live — nothing to publish."
+            : "Publish sends the exact reviewed digest above to your live store. No rebuild.";
+      }
+    };
+
+    // The exact-digest Publish (b10 ship = b09 orchestrator.ship). Confirms the
+    // pinned plan, then POSTs { confirmGoLive, expectedAggregateSha,
+    // expectedArtifactDigest } — the reviewed-digest guard: a stale plan (queue
+    // moved / artifact changed) is refused by the server, never shipped blind.
+    const buildPublishPlanText = (plan) => {
+      const lines = ["Publish plan (exact reviewed digest — no rebuild):"];
+      lines.push("  tenant:   " + (appDomain || repo));
+      lines.push("  build:    " + shortSha(plan.pinnedSha));
+      lines.push("  digest:   " + plan.artifactDigest);
+      lines.push("  changes:  " + (plan.includedPrs || []).length + " included");
+      if (plan.rollbackTarget) lines.push("  rollback: " + shortSha(plan.rollbackTarget.aggregateSha));
+      lines.push("  effect:   publish this exact digest to your LIVE store.");
+      return lines.join("\n");
+    };
+
+    const publishAggregate = async (button) => {
+      if (!currentPlan) return;
+      const plan = currentPlan;
+      if (!window.confirm(buildPublishPlanText(plan) + "\n\nPublish live?")) return;
+      button.disabled = true;
+      setStatus(aggStatusEl, "Publishing the reviewed build (" + shortSha(plan.pinnedSha) + ") live…");
+      try {
+        const res = await fetch(ds.shipEndpoint, {
+          method: "POST",
+          headers: { "content-type": "application/json", "x-tot-capability": "ship-on-behalf" },
+          body: JSON.stringify({
+            aggregateId: plan.aggregateId,
+            // The HUMAN go-live gate + the reviewed-digest guards (b09 ship input).
+            confirmGoLive: true,
+            expectedAggregateSha: plan.pinnedSha,
+            expectedArtifactDigest: plan.artifactDigest,
+          }),
+        });
+        const data = await res.json().catch(() => ({}));
+        // b09 AggregateShipResult: the ONLY live claim is state === "shipped".
+        if (data.state === "shipped") {
+          setStatus(
+            aggStatusEl,
+            "Published live · build " + shortSha(data.pinnedSha) + " (receipt " + (data.receiptId || "—") + ").",
+            "ok",
+          );
+        } else if (data.state === "promote_failed" || data.state === "record_failed") {
+          // Honest partial-failure truth — recoverable, never a false "shipped".
+          setStatus(aggStatusEl, data.message || "Publish did not complete (" + data.state + "). Retry.", "err");
+        } else if (data.reason === "paywall") {
+          setStatus(aggStatusEl, data.message || "Publishing to your live store is part of the paid plan.", "err");
+        } else {
+          setStatus(
+            aggStatusEl,
+            data.message || data.error || "Publish refused (" + (data.reason || res.status) + ")",
+            "err",
+          );
+        }
+      } catch {
+        setStatus(aggStatusEl, "Publish failed — network error", "err");
+      } finally {
+        button.disabled = false;
+        loadQueue();
+        loadVersions();
+      }
+    };
+
+    const aggStatusEl = aggPanel && aggPanel.querySelector("[data-aggregate-status]");
+    aggPanel
+      ?.querySelector("[data-aggregate-publish]")
+      ?.addEventListener("click", (event) => publishAggregate(event.currentTarget));
+
+    // b11 — the ACCEPT-TO-PREVIEW plan affordance (decision
+    // operator-verb-and-hosting-model): state EXACTLY what accept does now.
+    // `POST /api/changes/integrate` (b08) = integrate this candidate into the
+    // protected `preview` aggregate (b07's TenantIntegrationQueue.enqueue), then
+    // rebuild + combined-evidence the aggregate (b05). It flips NO live channel —
+    // going live is the aggregate card's Publish. So the plan says "integrate into
+    // preview", never "merge into main / deploy live".
+    const buildIntegratePlan = (change) => {
+      const target = change.prNumber != null ? "PR #" + change.prNumber : change.changeId;
+      const lines = ["Accept-to-preview plan:", "  tenant:    " + (appDomain || repo)];
+      if (change.prNumber != null) lines.push("  PR:        #" + change.prNumber);
+      lines.push("  change id: " + change.changeId);
+      if (change.headSha) lines.push("  head sha:  " + shortSha(change.headSha));
+      lines.push(
+        "  effect:    integrate " + target + " into the preview aggregate, then rebuild + " +
+          "re-evidence it. Does NOT go live — publish the reviewed build separately.",
+      );
+      return lines.join("\n");
+    };
+
+    // b08 integrate returns an IntegrateOutcome — { ok, queueState, runState,
+    // aggregateSha, pointerMoved, statusMessage, reason? } — NEVER a bare
+    // merged:true. Render it honestly: green advances the aggregate; red left it
+    // exactly where it was and names the failing stage.
+    const integrateCandidate = async (change, button) => {
+      if (!window.confirm(buildIntegratePlan(change) + "\n\nProceed?")) return;
+      button.disabled = true;
+      setStatus(statusEl, "Integrating " + change.changeId + " into preview…");
+      try {
+        const res = await fetch(ds.integrateEndpoint, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            // Mirror of the server-side capability model (UX): the server
+            // re-derives capability and stays authoritative.
+            "x-tot-capability": "ship-on-behalf",
+          },
+          body: JSON.stringify({
+            repo,
+            changeId: change.changeId,
+            prNumber: change.prNumber ?? undefined,
+            expectedHeadSha: change.headSha || undefined,
+          }),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (res.ok && data.ok) {
+          setStatus(
+            statusEl,
+            "Integrated " + change.changeId + " — preview aggregate is green (" +
+              shortSha(data.aggregateSha) + "). Review the aggregate, then Publish to go live.",
+            "ok",
+          );
+        } else if (res.ok && data.queueState === "red") {
+          // The queue ran but the aggregate did not go green — the candidate did
+          // NOT advance the shippable set. Name the honest failing stage.
+          setStatus(
+            statusEl,
+            "Integration of " + change.changeId + " failed (" + (data.reason || "red") + "): " +
+              (data.statusMessage || "the aggregate did not pass its combined evidence.") +
+              " The aggregate is unchanged.",
+            "err",
+          );
+        } else if (data.reason === "not_preview_base") {
+          setStatus(
+            statusEl,
+            "Not integrated: " + change.changeId + " does not target the preview branch " +
+              "(base is not \"preview\"). " + (data.statusMessage || ""),
+            "err",
+          );
+        } else {
+          setStatus(
+            statusEl,
+            data.statusMessage || data.error || "Integrate failed (" + res.status + ")",
+            "err",
+          );
+        }
+      } catch {
+        setStatus(statusEl, "Integrate failed — network error", "err");
+      } finally {
+        button.disabled = false;
+        loadQueue();
+      }
+    };
+
+    const rejectChange = async (change, button) => {
+      const reason = window.prompt(
+        "Reject " + change.changeId + " — add a short note for the submitter:",
+      );
+      if (reason == null) return;
+      if (!reason.trim()) {
+        setStatus(statusEl, "A reject note is required.", "err");
+        return;
+      }
+      button.disabled = true;
+      setStatus(statusEl, "Rejecting " + change.changeId + "…");
+      try {
+        const res = await fetch(
+          ds.changesEndpoint + "/" + encodeURIComponent(change.changeId) + "/reject",
+          {
+            method: "POST",
+            headers: {
+              "content-type": "application/json",
+              "x-tot-capability": "ship-on-behalf",
+            },
+            body: JSON.stringify({ repo, reason: reason.trim() }),
+          },
+        );
+        const data = await res.json().catch(() => ({}));
+        if (res.ok) {
+          setStatus(statusEl, "Change " + change.changeId + " rejected.", "ok");
+        } else {
+          setStatus(statusEl, data.error || "Reject failed (" + res.status + ")", "err");
+        }
+      } catch {
+        setStatus(statusEl, "Reject failed — network error", "err");
+      } finally {
+        button.disabled = false;
+        loadQueue();
+      }
+    };
+
+    // U7 — retire/GC. Mirror of the accept plan affordance (decision
+    // operator-verb-and-hosting-model): state EXACTLY what retire does — evict the
+    // candidate's preview environment + immutable version — and that it is
+    // REBUILDABLE (degrades to "not built yet", not a 404), so an operator can't
+    // confuse it with Reject. Same shape as `tot retire`'s CLI plan for parity.
+    const buildRetirePlan = (change) => {
+      const target = change.prNumber != null ? "PR #" + change.prNumber : change.changeId;
+      const lines = ["Retire plan:", "  tenant:    " + (appDomain || repo)];
+      if (change.prNumber != null) lines.push("  PR:        #" + change.prNumber);
+      lines.push("  change id: " + change.changeId);
+      if (change.headSha) lines.push("  head sha:  " + shortSha(change.headSha));
+      lines.push(
+        "  effect:    evict " + target + "'s preview environment + version to reclaim space.",
+      );
+      lines.push(
+        "  rebuild:   REVERSIBLE — rebuild it any time (this is NOT Reject; the change stays open).",
+      );
+      return lines.join("\n");
+    };
+
+    const retireChange = async (change, button) => {
+      if (!window.confirm(buildRetirePlan(change) + "\n\nProceed?")) return;
+      button.disabled = true;
+      setStatus(statusEl, "Retiring " + change.changeId + "…");
+      try {
+        const res = await fetch(ds.retireEndpoint, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            // Mirror of the server-side capability model (UX); the server
+            // re-derives capability and stays authoritative.
+            "x-tot-capability": "ship-on-behalf",
+          },
+          body: JSON.stringify({
+            changeId: change.changeId,
+            pr: change.prNumber ?? undefined,
+          }),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (res.ok && data.ok) {
+          setStatus(
+            statusEl,
+            data.evicted
+              ? "Retired " + change.changeId + " — the preview was evicted (rebuildable on demand)."
+              : "Retire " + change.changeId + ": nothing to evict (already retired).",
+            "ok",
+          );
+        } else {
+          setStatus(statusEl, data.error || "Retire failed (" + res.status + ")", "err");
+        }
+      } catch {
+        setStatus(statusEl, "Retire failed — network error", "err");
+      } finally {
+        button.disabled = false;
+        loadQueue();
+      }
+    };
+
+    // ---- dg7: diff view ----------------------------------------------------
+    // For a pending candidate, show what changed vs the current live version,
+    // tied to the exact tenant Gitea head SHA, with the u5 immutable /rev link
+    // and the dg3 evidence AUTHORITY (authoritative / stale / missing). Reads
+    // GET /api/changes/<id>/diff; never invents a diff for a non-renderable
+    // candidate — it shows the honest blocked reason.
+
+    const diffBase = ds.diffEndpointBase;
+
+    const diffRowFor = (tr) => {
+      const next = tr.nextElementSibling;
+      return next && next.dataset && next.dataset.publishDiffRow === tr.dataset.changeRowId
+        ? next
+        : null;
+    };
+
+    const closeDiff = (tr, button) => {
+      const existing = diffRowFor(tr);
+      if (existing) existing.remove();
+      if (button) button.textContent = "Diff";
+    };
+
+    const toggleDiff = async (change, button, tr) => {
+      if (!tr.dataset.changeRowId) tr.dataset.changeRowId = change.changeId;
+      if (diffRowFor(tr)) {
+        closeDiff(tr, button);
+        return;
+      }
+      button.disabled = true;
+      button.textContent = "Loading…";
+      const detailTr = document.createElement("tr");
+      detailTr.dataset.publishDiffRow = tr.dataset.changeRowId;
+      const td = document.createElement("td");
+      td.colSpan = 6;
+      td.className = "publish-diff-cell";
+      detailTr.append(td);
+      tr.after(detailTr);
+      try {
+        const res = await fetch(diffBase + "/" + encodeURIComponent(change.changeId) + "/diff", {
+          headers: { accept: "application/json" },
+        });
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          td.append(subtle(data.error || "Could not load the diff (" + res.status + ")"));
+        } else {
+          renderDiff(td, data.diff || {});
+        }
+        button.textContent = "Hide diff";
+      } catch {
+        td.append(subtle("Could not load the diff — network error"));
+        button.textContent = "Hide diff";
+      } finally {
+        button.disabled = false;
+      }
+    };
+
+    const CHANGE_MARK = { added: "+", changed: "~", removed: "−" };
+
+    const renderDiff = (td, diff) => {
+      td.textContent = "";
+      const head = document.createElement("div");
+      head.className = "publish-diff-head";
+
+      // Authority: honest label of whether the diff describes the exact head.
+      const authority = diff.authority || {};
+      const authChip = chip(
+        authority.authoritative
+          ? "Reviewed at head"
+          : authority.stale
+            ? "Last-good preview (stale vs head)"
+            : authority.missing
+              ? "No evidence yet"
+              : "Head",
+        authority.authoritative ? "green" : authority.stale ? "amber" : "",
+      );
+      head.append(authChip);
+
+      if (diff.headSha) {
+        const sha = document.createElement("span");
+        sha.className = "publish-mono subtle";
+        sha.textContent = "head " + shortSha(diff.headSha);
+        head.append(sha);
+      }
+      if (diff.revHref) {
+        const rev = document.createElement("a");
+        rev.href = diff.revHref;
+        rev.target = "_blank";
+        rev.rel = "noopener";
+        rev.textContent = "Open reviewed revision";
+        head.append(rev);
+      }
+      td.append(head);
+
+      if (!diff.renderable) {
+        // Honest: a candidate that can't render has NO diff — say why (dg3), no fake.
+        const reason = document.createElement("p");
+        reason.className = "note publish-diff-blocked";
+        reason.textContent =
+          diff.blockedReason || "This candidate has no renderable version to diff yet.";
+        td.append(reason);
+        return;
+      }
+
+      const files = Array.isArray(diff.files) ? diff.files : [];
+      if (!files.length) {
+        td.append(subtle("No file changes vs the current live version."));
+        return;
+      }
+      const list = document.createElement("ul");
+      list.className = "publish-diff-list";
+      for (const f of files) {
+        const li = document.createElement("li");
+        li.className = "publish-diff-" + f.change;
+        const mark = document.createElement("span");
+        mark.className = "publish-diff-mark";
+        mark.textContent = CHANGE_MARK[f.change] || "•";
+        const path = document.createElement("code");
+        path.textContent = f.path;
+        li.append(mark, path);
+        list.append(li);
+      }
+      td.append(list);
+    };
+
+    // ---- dg7: versions / promotion history + rollback ----------------------
+    // The promotion history (u2/u3 promotion_status) with the tenant Gitea SHA,
+    // its /rev link (u5), and the current-live marker; a prior version rolls back
+    // THROUGH the one orchestrator (/api/changes/rollback → u8), rendering only the
+    // HONEST terminal state (rolled_back only when verified).
+
+    const versionsPanel = root.querySelector("[data-publish-versions]");
+    const versionsBody = versionsPanel?.querySelector("[data-versions-body]");
+    const versionsChip = versionsPanel?.querySelector("[data-versions-chip]");
+    const versionsStatus = versionsPanel?.querySelector("[data-versions-status]");
+    const versionsRollbackNote = versionsPanel?.querySelector("[data-versions-rollback-note]");
+    let rollbackMode = "control-plane";
+
+    const renderVersions = (view) => {
+      if (!versionsBody) return;
+      const versions = Array.isArray(view.versions) ? view.versions : [];
+      rollbackMode = view.rollbackMode || "control-plane";
+      versionsBody.textContent = "";
+
+      if (versionsChip) {
+        versionsChip.textContent = versions.length === 1 ? "1 version" : versions.length + " versions";
+        versionsChip.className = "chip" + (versions.length ? " blue" : "");
+      }
+
+      // Static tenants: per-version rollback is honestly deferred (the console
+      // can't enumerate the S3 versions archive digest /api/changes/rollback needs).
+      if (versionsRollbackNote) {
+        if (rollbackMode === "static-archive") {
+          versionsRollbackNote.hidden = false;
+          versionsRollbackNote.textContent =
+            "This store publishes to a static public site. Rolling back to a prior version " +
+            "resolves the target from the versions archive — run the ship CLI (tot rollback), " +
+            "which enumerates it; the console can't list archived object digests.";
+        } else {
+          versionsRollbackNote.hidden = true;
+        }
+      }
+
+      if (!versions.length) {
+        const tr = document.createElement("tr");
+        const td = cell(subtle("No versions have been promoted to live yet."));
+        td.colSpan = 6;
+        tr.append(td);
+        versionsBody.append(tr);
+        return;
+      }
+
+      for (const v of versions) {
+        const tr = document.createElement("tr");
+
+        // Version identity: the tenant Gitea SHA (content authority) + source.
+        const idCell = document.createElement("td");
+        const strong = document.createElement("strong");
+        strong.className = "publish-mono";
+        strong.textContent = shortSha(v.versionId);
+        idCell.append(strong);
+        if (v.source) idCell.append(subtle(v.source === "commit" ? "From a commit" : "Content hash"));
+        tr.append(idCell);
+
+        // Digest (static current only — never fabricated for priors).
+        const digestCell = cell(v.digest ? shortSha(v.digest) : "—");
+        digestCell.classList.add("publish-mono");
+        if (!v.digest) digestCell.classList.add("subtle");
+        tr.append(digestCell);
+
+        tr.append(cell(age(v.promotedAt)));
+
+        // Preview: the u5 immutable /rev/<sha> link.
+        const revCell = document.createElement("td");
+        if (v.revHref) {
+          const a = document.createElement("a");
+          a.href = v.revHref;
+          a.target = "_blank";
+          a.rel = "noopener";
+          a.textContent = "Revision";
+          revCell.append(a);
+        } else {
+          revCell.append(subtle("—"));
+        }
+        tr.append(revCell);
+
+        // State: current live vs prior.
+        tr.append(cell(v.isCurrent ? chip("Current live", "green") : chip("Prior", "")));
+
+        // Action: roll back to a PRIOR version (never the current one).
+        const act = document.createElement("td");
+        act.className = "action publish-actions";
+        if (!v.isCurrent) {
+          const rollbackBtn = document.createElement("button");
+          rollbackBtn.type = "button";
+          rollbackBtn.className = "btn";
+          rollbackBtn.textContent = "Roll back";
+          const staticDeferred = rollbackMode === "static-archive";
+          rollbackBtn.disabled = !canShip || staticDeferred;
+          rollbackBtn.title = !canShip
+            ? "Requires an owner or ship-on-behalf sign-in"
+            : staticDeferred
+              ? "Static rollback runs through the versions archive — use the ship CLI (tot rollback)"
+              : "Roll the live site back to this version";
+          rollbackBtn.addEventListener("click", () => rollbackVersion(v, rollbackBtn));
+          act.append(rollbackBtn);
+        }
+        tr.append(act);
+
+        versionsBody.append(tr);
+      }
+    };
+
+    const loadVersions = async () => {
+      if (!versionsBody) return;
+      try {
+        const res = await fetch(ds.versionsEndpoint, { headers: { accept: "application/json" } });
+        if (res.status === 401 || res.status === 403) {
+          if (versionsChip) versionsChip.textContent = "Sign-in required";
+          versionsBody.textContent = "";
+          const tr = document.createElement("tr");
+          const td = cell(subtle("Sign in as a store owner or admin to view published versions."));
+          td.colSpan = 6;
+          tr.append(td);
+          versionsBody.append(tr);
+          return;
+        }
+        const data = await res.json().catch(() => ({}));
+        if (!res.ok) {
+          setStatus(versionsStatus, data.error || "Could not load versions (" + res.status + ")", "err");
+          return;
+        }
+        renderVersions(data.view || {});
+      } catch {
+        setStatus(versionsStatus, "Could not load versions — network error", "err");
+      }
+    };
+
+    // Interpret the rollback response into ONE honest terminal state (mirrors the
+    // pure lib/publish/shipWorkspace `interpretRollbackResponse`; duplicated in
+    // plain JS because is:inline scripts can't import modules). `rolledBack` is
+    // true ONLY for a verified `rolled_back` — a `publish_pending` is NEVER a
+    // rolled-back claim.
+    const interpretRollback = (httpOk, body) => {
+      const toVersionId = typeof body.toVersionId === "string" ? body.toVersionId : null;
+      if (typeof body.state === "string") {
+        const state = ["rolled_back", "publish_pending", "publish_failed", "blocked"].includes(body.state)
+          ? body.state
+          : "error";
+        return {
+          state,
+          rolledBack: state === "rolled_back",
+          message: body.message || body.error || "Rollback returned state " + state + ".",
+        };
+      }
+      if (httpOk && body.rolledBack === true) {
+        return {
+          state: "rolled_back",
+          rolledBack: true,
+          message: toVersionId ? "Rolled back live to " + shortSha(toVersionId) + "." : "Rolled back live.",
+        };
+      }
+      return {
+        state: "blocked",
+        rolledBack: false,
+        message: (body.error || "Rollback failed") + (body.reason ? " (" + body.reason + ")" : ""),
+      };
+    };
+
+    const rollbackVersion = async (version, button) => {
+      if (
+        !window.confirm(
+          "Roll the live store back to version " + shortSha(version.versionId) +
+            "? This publishes that prior version to the live site.",
+        )
+      ) {
+        return;
+      }
+      button.disabled = true;
+      setStatus(versionsStatus, "Rolling back to " + shortSha(version.versionId) + "…");
+      try {
+        const payload = { targetVersionId: version.versionId };
+        // A static tenant additionally needs the archive digest — the button is
+        // disabled in that mode, but pass it through when we honestly have it.
+        if (version.digest) payload.targetDigest = version.digest;
+        const res = await fetch(ds.rollbackEndpoint, {
+          method: "POST",
+          headers: { "content-type": "application/json", "x-tot-capability": "ship-on-behalf" },
+          body: JSON.stringify(payload),
+        });
+        const data = await res.json().catch(() => ({}));
+        const outcome = interpretRollback(res.ok, data);
+        setStatus(versionsStatus, outcome.message, outcome.rolledBack ? "ok" : outcome.state === "publish_pending" ? "ok" : "err");
+      } catch {
+        setStatus(versionsStatus, "Rollback failed — network error", "err");
+      } finally {
+        button.disabled = false;
+        loadVersions();
+        loadQueue();
+      }
+    };
+
+    // ---- Domain section ----------------------------------------------------
+
+    const domainPanel = root.querySelector("[data-publish-domain]");
+    let domainPollTimer = null;
+
+    const renderDomain = (payload) => {
+      if (!domainPanel) return;
+      const domain = payload.domain || {};
+      const stateEl = domainPanel.querySelector("[data-domain-state]");
+      const stateChip = domainPanel.querySelector("[data-domain-state-chip]");
+      const sinceEl = domainPanel.querySelector("[data-domain-since]");
+      const captureEl = domainPanel.querySelector("[data-domain-capture]");
+      const runEl = domainPanel.querySelector("[data-domain-run]");
+      const runDetailEl = domainPanel.querySelector("[data-domain-run-detail]");
+      const rollbackBtn = domainPanel.querySelector("[data-domain-rollback]");
+      const rollbackDetail = domainPanel.querySelector("[data-domain-rollback-detail]");
+      const connected = domain.state === "cloudfront";
+
+      if (stateEl) {
+        stateEl.textContent = connected
+          ? "Storefront CDN (cloudfront)"
+          : "Previous host (pantheon)";
+      }
+      if (stateChip) {
+        stateChip.textContent = connected ? "Connected" : "Not connected";
+        stateChip.className = "chip " + (connected ? "green" : "amber");
+      }
+      if (sinceEl) {
+        sinceEl.textContent = domain.since
+          ? "Since " + new Date(domain.since).toLocaleString()
+          : "Current host for " + (payload.appDomain || ds.appDomain);
+      }
+      if (captureEl) {
+        captureEl.textContent = domain.priorCapturedAt
+          ? "Captured " + new Date(domain.priorCapturedAt).toLocaleString()
+          : "None captured";
+      }
+
+      const run = domain.lastRun;
+      // "dispatched" = awaiting the CI completion callback (terminal-only wire).
+      const inFlight = run && run.status === "dispatched";
+      if (runEl) {
+        runEl.textContent = run
+          ? run.action + (run.rehearsal ? " (rehearsal)" : "") + " · " + run.status
+          : "None";
+      }
+      if (runDetailEl) {
+        runDetailEl.textContent = "";
+        if (run) {
+          const parts = [];
+          if (run.actor) parts.push("by " + run.actor);
+          if (run.startedAt) parts.push(age(run.startedAt));
+          runDetailEl.append(document.createTextNode(parts.join(" · ")));
+          if (run.runUrl) {
+            const link = document.createElement("a");
+            link.href = run.runUrl;
+            link.target = "_blank";
+            link.rel = "noopener";
+            link.textContent = "View run";
+            runDetailEl.append(document.createTextNode(" · "));
+            runDetailEl.append(link);
+          }
+          if (run.status === "failed" && run.error) {
+            const err = document.createElement("span");
+            err.className = "publish-error-detail";
+            err.textContent = run.error;
+            runDetailEl.append(document.createElement("br"));
+            runDetailEl.append(err);
+          }
+        } else {
+          runDetailEl.textContent = "Connect and rollback runs appear here.";
+        }
+      }
+      if (rollbackBtn) {
+        rollbackBtn.disabled =
+          !canShip || inFlight || !domain.priorRecordsKey;
+      }
+      if (rollbackDetail && domain.priorCapturedAt) {
+        rollbackDetail.textContent =
+          "Restores the DNS records captured " +
+          new Date(domain.priorCapturedAt).toLocaleString() + ".";
+      }
+
+      // Poll while a run is in flight so completion lands without a manual refresh.
+      if (domainPollTimer) {
+        clearTimeout(domainPollTimer);
+        domainPollTimer = null;
+      }
+      if (inFlight) domainPollTimer = setTimeout(loadDomain, 15000);
+    };
+
+    const loadDomain = async () => {
+      if (!domainPanel) return;
+      try {
+        const res = await fetch(ds.domainStatusEndpoint, {
+          headers: { accept: "application/json" },
+        });
+        if (!res.ok) return;
+        renderDomain(await res.json());
+      } catch {
+        /* leave the last rendered state */
+      }
+      // u9: refresh the readiness itemization alongside the status.
+      loadReadiness();
+    };
+
+    // ---- Cutover readiness (u9) --------------------------------------------
+    // Reads the SAME server gate `tot go-live` reads (/api/domain/readiness) and
+    // itemizes the preconditions. The Connect button additionally requires the
+    // server to report ready — the display and the enforcement can't diverge.
+    const readinessBox = domainPanel?.querySelector("[data-domain-readiness]");
+    const connectBtn = domainPanel?.querySelector("[data-domain-connect]");
+    let domainReady = false;
+
+    const renderReadiness = (payload) => {
+      if (!readinessBox) return;
+      const readiness = (payload && payload.readiness) || {};
+      const checks = Array.isArray(readiness.checks) ? readiness.checks : [];
+      domainReady = readiness.ready === true;
+      readinessBox.hidden = false;
+
+      const chip = readinessBox.querySelector("[data-domain-readiness-chip]");
+      if (chip) {
+        chip.textContent = domainReady ? "Ready" : "Not ready";
+        chip.className = "chip " + (domainReady ? "green" : "amber");
+      }
+      const list = readinessBox.querySelector("[data-domain-readiness-list]");
+      if (list) {
+        list.textContent = "";
+        for (const c of checks) {
+          const li = document.createElement("li");
+          li.className = c.ok ? "ok" : "blocked";
+          const mark = document.createElement("span");
+          mark.className = "domain-readiness-mark";
+          mark.textContent = c.ok ? "✓" : "✗";
+          const label = document.createElement("b");
+          label.textContent = c.label || c.id || "";
+          li.append(mark, label);
+          if (c.detail) {
+            const detail = document.createElement("span");
+            detail.className = "domain-readiness-detail";
+            detail.textContent = c.detail;
+            li.append(detail);
+          }
+          list.append(li);
+        }
+      }
+      const note = readinessBox.querySelector("[data-domain-readiness-note]");
+      if (note) {
+        note.textContent = payload && payload.ownerCapable === false
+          ? "Apex cutover is owner-only — sign in as the store owner to connect the domain."
+          : domainReady
+            ? "All preconditions are green — the cutover is permitted."
+            : "Clear the failing preconditions above before connecting the apex.";
+      }
+      // Gate the Connect button on server readiness in ADDITION to owner (the
+      // markup already disables it for non-owners); never enable it when blocked.
+      if (connectBtn && !connectBtn.dataset.ownerLocked) {
+        connectBtn.disabled = !domainReady;
+      }
+    };
+
+    const loadReadiness = async () => {
+      if (!readinessBox || !ds.domainReadinessEndpoint) return;
+      try {
+        const res = await fetch(ds.domainReadinessEndpoint, {
+          headers: { accept: "application/json", "x-tot-capability": "ship-on-behalf" },
+        });
+        if (!res.ok) return;
+        renderReadiness(await res.json());
+      } catch {
+        /* leave the last rendered readiness */
+      }
+    };
+
+    const domainStatusEl = domainPanel?.querySelector("[data-domain-status]");
+
+    const domainAction = async (body, button) => {
+      button.disabled = true;
+      setStatus(domainStatusEl, (body.action === "connect" ? "Connecting" : "Rolling back") + "…");
+      try {
+        const res = await fetch(ds.domainDispatchEndpoint, {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+            "x-tot-capability": "ship-on-behalf",
+          },
+          body: JSON.stringify(body),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (res.ok && data.dispatched) {
+          setStatus(
+            domainStatusEl,
+            (body.action === "connect" ? "Connect" : "Rollback") +
+              (body.rehearsal ? " rehearsal" : "") +
+              " dispatched — the run status updates below as it progresses.",
+            "ok",
+          );
+        } else {
+          setStatus(domainStatusEl, data.error || "Request failed (" + res.status + ")", "err");
+        }
+      } catch {
+        setStatus(domainStatusEl, "Request failed — network error", "err");
+      } finally {
+        button.disabled = false;
+        loadDomain();
+      }
+    };
+
+    domainPanel?.querySelector("[data-domain-connect]")?.addEventListener("click", (event) => {
+      const confirmInput = domainPanel.querySelector("[data-domain-confirm]");
+      const rehearsal = Boolean(domainPanel.querySelector("[data-domain-rehearsal]")?.checked);
+      domainAction(
+        {
+          action: "connect",
+          confirmDomain: (confirmInput?.value || "").trim(),
+          rehearsal,
+        },
+        event.currentTarget,
+      );
+    });
+
+    domainPanel?.querySelector("[data-domain-rollback]")?.addEventListener("click", (event) => {
+      if (
+        !window.confirm(
+          "Roll back " + ds.appDomain + " to the previous host? DNS returns to the captured records in about a minute.",
+        )
+      ) {
+        return;
+      }
+      domainAction({ action: "rollback" }, event.currentTarget);
+    });
+
+    // ---- Wiring ------------------------------------------------------------
+
+    root.querySelector("[data-publish-refresh]")?.addEventListener("click", () => {
+      setStatus(statusEl, "");
+      loadQueue();
+      loadVersions();
+      loadDomain();
+    });
+
+    loadQueue();
+    loadVersions();
+    loadDomain();
+  })();
+</script>
+
+<style>
+  .publish-table {
+    min-width: 900px;
+  }
+
+  .publish-mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+  }
+
+  .publish-actions {
+    white-space: nowrap;
+  }
+
+  .publish-actions .btn {
+    margin-left: 6px;
+  }
+
+  .publish-status {
+    min-height: 0;
+  }
+
+  .publish-status:empty {
+    display: none;
+  }
+
+  .publish-status[data-state="ok"] {
+    color: var(--admin-green);
+  }
+
+  .publish-status[data-state="err"] {
+    color: var(--admin-red);
+  }
+
+  .publish-error-detail {
+    color: var(--admin-red);
+    font-size: 12px;
+  }
+
+  .domain-connect-controls {
+    display: grid;
+    gap: 8px;
+    justify-items: end;
+    min-width: 220px;
+  }
+
+  .domain-connect-controls input[type="text"] {
+    width: 100%;
+    min-height: 36px;
+    padding: 0 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+  }
+
+  .domain-rehearsal {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  @media (max-width: 720px) {
+    .domain-connect-controls {
+      justify-items: stretch;
+      min-width: 0;
+      width: 100%;
+    }
+  }
+
+  /* u9: apex-cutover readiness itemization */
+  .domain-readiness {
+    margin: 0.75rem 0;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
+    border-radius: 0.5rem;
+  }
+  .domain-readiness-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .domain-readiness-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.25rem;
+  }
+  .domain-readiness-list li {
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    font-size: 0.9em;
+  }
+  .domain-readiness-mark {
+    font-weight: 700;
+    width: 1em;
+  }
+  .domain-readiness-list li.ok .domain-readiness-mark {
+    color: var(--good, #1a7f37);
+  }
+  .domain-readiness-list li.blocked .domain-readiness-mark {
+    color: var(--bad, #b42318);
+  }
+  .domain-readiness-detail {
+    opacity: 0.75;
+  }
+
+  /* b11: aggregate card + ship plan */
+  .aggregate-prs {
+    display: grid;
+    gap: 6px;
+  }
+
+  .aggregate-prs-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .aggregate-prs-list li {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    font-size: 13px;
+  }
+
+  .aggregate-plan {
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
+    border-radius: 0.5rem;
+    display: grid;
+    gap: 8px;
+  }
+
+  .aggregate-plan-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .aggregate-plan-grid {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 4px 16px;
+    margin: 0;
+  }
+
+  .aggregate-plan-grid dt {
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .aggregate-plan-grid dd {
+    margin: 0;
+    font-size: 13px;
+    overflow-wrap: anywhere;
+  }
+
+  /* dg7: versions + diff */
+  .versions-table {
+    min-width: 780px;
+  }
+
+  .publish-diff-cell {
+    padding: 12px 14px;
+    background: var(--admin-surface-soft);
+  }
+
+  .publish-diff-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+
+  .publish-diff-blocked {
+    color: var(--admin-amber);
+  }
+
+  .publish-diff-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 3px;
+  }
+
+  .publish-diff-list li {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    font-size: 12px;
+  }
+
+  .publish-diff-mark {
+    width: 1em;
+    font-weight: 700;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+
+  .publish-diff-added .publish-diff-mark {
+    color: var(--admin-green);
+  }
+
+  .publish-diff-changed .publish-diff-mark {
+    color: var(--admin-blue);
+  }
+
+  .publish-diff-removed .publish-diff-mark {
+    color: var(--admin-red);
+  }
+
+  .publish-diff-list code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+</style>