npm - @tokenoftrust/storefront-runner - Versions diffs - 1.4.2-rc.0 → 2.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (363) hide show

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

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

package/apps/storefront/src/pages/admin/select.astro ADDED Viewed

@@ -0,0 +1,96 @@
+---
+/**
+ * /admin/select — the canonical admin tenant picker.
+ *
+ * Reached when an AUTHENTICATED viewer hits the admin of a tenant they are NOT a
+ * member of (a stale/shared deep link, or a host that fell back to the registry
+ * default). The middleware routes them here instead of a sign-in loop or the
+ * wrong tenant's data. This page holds no identity of its own: it reads the
+ * session's tenant memberships and offers each as a link INTO that tenant's own
+ * admin (`/<resource>/admin`, the DNS-free path form).
+ *
+ *   0 memberships → honest "nothing to manage".
+ *   1 membership  → straight into that tenant's admin.
+ *   ≥2            → a picker.
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { selectTenant } from "@/lib/dashboard/tenantSelection";
+import { adminUrlForTenant } from "@/lib/auth/adminLanding";
+const cspNonce = Astro.locals.cspNonce;
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect("/auth/login?next=%2Fadmin%2Fselect", 302);
+}
+const selection = selectTenant(session.tenants);
+if (selection.mode === "single") {
+  return Astro.redirect(adminUrlForTenant(selection.tenant.resource), 302);
+}
+const tenants = selection.mode === "picker" ? selection.tenants : [];
+---
+<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>Choose a store — Token of Trust Admin</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body { font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 40rem; margin-inline: auto; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1.75rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
+      a.store { display: flex; align-items: center; justify-content: space-between; text-decoration: none;
+        background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1rem 1.25rem; color: inherit; }
+      @media (prefers-color-scheme: dark) { a.store { background: #1e1e28; border-color: #33333f; } }
+      a.store:hover { border-color: #b7d0ff; }
+      .name { font-weight: 600; }
+      .role { font: 600 .68rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em;
+        color: #4a6; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .55rem; }
+      .empty { background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1.5rem; }
+      @media (prefers-color-scheme: dark) { .empty { background: #1e1e28; border-color: #33333f; } }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
+      .logout { display: inline; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class="eyebrow">Token of Trust Admin</p>
+      <h1>Choose a store</h1>
+      {tenants.length ? (
+        <>
+          <p class="sub">You're a member of more than one store. Pick one to open its admin.</p>
+          <ul>
+            {tenants.map((t) => (
+              <li>
+                <a class="store" href={adminUrlForTenant(t.resource)}>
+                  <span class="name">{t.resource}</span>
+                  <span class="role">{t.role}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <div class="empty">
+          <p style="margin:0">You're signed in as <strong>{session.email}</strong>, but you don't
+            have admin access to any store yet. Ask a store's owner to invite you.</p>
+        </div>
+      )}
+      <p class="who">Signed in as {session.email} ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+  </body>
+</html>

package/apps/storefront/src/pages/admin.astro CHANGED Viewed

@@ -13,7 +13,7 @@
  * SHELL CONTRACT — every AdminXTab.astro component mounted below must preserve:
  *   - A `<section id="{tab}" data-admin-panel data-agent-scope="{tab}">` root,
  *     where {tab} is one of: orders, products, subscriptions, customers, fulfillment,
- *     reporting, ai-workflows, publish, settings. The shell's hash router shows/hides
+ *     reporting, ai-workflows, publish, integrations, settings. The shell's hash router shows/hides
  *     panels by matching `html[data-admin-tab]` to this id, and the AI Ask
  *     envelope reads `data-agent-scope` to label its active context.
  *   - No tab-switching chrome of its own — `#{tab}` deep links and the shell's
@@ -39,6 +39,7 @@ import AdminSubscriptionsTab from "../components/admin/AdminSubscriptionsTab.ast
 import AdminReportingTab from "../components/admin/AdminReportingTab.astro";
 import AdminBlogTab from "../components/admin/AdminBlogTab.astro";
 import AdminPublishTab from "../components/admin/AdminPublishTab.astro";
+import AdminIntegrationsTab from "../components/admin/AdminIntegrationsTab.astro";
 import AdminSettingsTab from "../components/admin/AdminSettingsTab.astro";
 import { readViewerSession } from "@/lib/auth/route";
 import { resolveAdminTenantMode } from "@/lib/adminTenantEnvelope";
@@ -102,7 +103,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
     <title>{tenantLabel} Admin</title>
     <script is:inline nonce={cspNonce}>
       (() => {
-        const adminTabs = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "blog", "publish", "settings"];
+        const adminTabs = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "blog", "publish", "integrations", "settings"];
         const canViewInternalGuide = document.documentElement.dataset.internalAdminGuide === "true";
         const defaultTab = canViewInternalGuide ? "orders" : "settings";
         // A deep link may carry a query suffix in the hash (e.g. #publish?pr=42);
@@ -135,6 +136,8 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
       <symbol id="i-file" viewBox="0 0 24 24"><path d="M7 3h7l5 5v13H7z"></path><path d="M14 3v5h5"></path><path d="M10 13h6M10 17h4"></path></symbol>
       <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 12a8 8 0 0 1-13.6 5.7L4 15"></path><path d="M4 20v-5h5"></path><path d="M4 12A8 8 0 0 1 17.6 6.3L20 9"></path><path d="M20 4v5h-5"></path></symbol>
       <symbol id="i-export" viewBox="0 0 24 24"><path d="M12 3v12"></path><path d="m7 8 5-5 5 5"></path><path d="M5 15v4h14v-4"></path></symbol>
+      <symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V6a2 2 0 0 1 2-2h9"></path></symbol>
+      <symbol id="i-undo" viewBox="0 0 24 24"><path d="M9 14 4 9l5-5"></path><path d="M4 9h11a5 5 0 0 1 0 10h-4"></path></symbol>
     </svg>
     <div class="shell">
@@ -190,6 +193,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <a href="#ai-workflows" data-admin-tab-link><svg><use href="#i-workflows"></use></svg><span>AI Workflows</span></a>
           <a href="#blog" data-admin-tab-link><svg><use href="#i-file"></use></svg><span>Blog</span></a>
           <a href="#publish" data-admin-tab-link><svg><use href="#i-export"></use></svg><span>Publish</span></a>
+          <a href="#integrations" data-admin-tab-link><svg><use href="#i-workflows"></use></svg><span>Integrations</span></a>
           <a href="#settings" data-admin-tab-link><svg><use href="#i-gear"></use></svg><span>Settings</span></a>
         </nav>
@@ -206,6 +210,13 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <svg><use href="#i-gear"></use></svg><span>Developer cockpit</span>
         </a>
+        <!-- Cross-surface hop: the merchant Review-and-Release workspace — the
+             two-decision (add to next release / publish now) surface, a SIBLING
+             page (not a tab), additive to the operator Publish tab above. -->
+        <a class="cockpit-link" href={`${basePath || ""}/admin/review-release`}>
+          <svg><use href="#i-export"></use></svg><span>Review &amp; release</span>
+        </a>
         <div class="account" data-admin-account>
           <span class="account-avatar" aria-hidden="true"><svg><use href="#i-user"></use></svg></span>
           <span class="account-meta">
@@ -256,6 +267,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <a class="tab" href="#ai-workflows" role="tab" aria-controls="ai-workflows" aria-selected="false" data-admin-tab-link>AI Workflows</a>
           <a class="tab" href="#blog" role="tab" aria-controls="blog" aria-selected="false" data-admin-tab-link>Blog</a>
           <a class="tab" href="#publish" role="tab" aria-controls="publish" aria-selected="false" data-admin-tab-link>Publish</a>
+          <a class="tab" href="#integrations" role="tab" aria-controls="integrations" aria-selected="false" data-admin-tab-link>Integrations</a>
           <a class="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false" data-admin-tab-link>Settings</a>
         </div>
@@ -305,6 +317,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
                   <a id="admin-tab-ai-workflows" class="tab" href="#ai-workflows" role="tab" aria-controls="ai-workflows" aria-selected="false" data-admin-tab-link>AI Workflows</a>
                   <a id="admin-tab-blog" class="tab" href="#blog" role="tab" aria-controls="blog" aria-selected="false" data-admin-tab-link>Blog</a>
                   <a id="admin-tab-publish" class="tab" href="#publish" role="tab" aria-controls="publish" aria-selected="false" data-admin-tab-link>Publish</a>
+                  <a id="admin-tab-integrations" class="tab" href="#integrations" role="tab" aria-controls="integrations" aria-selected="false" data-admin-tab-link>Integrations</a>
                   <a id="admin-tab-settings" class="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false" data-admin-tab-link>Settings</a>
                 </div>
@@ -432,6 +445,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <AdminAIWorkflowsTab envelope={tenantEnvelope} />
           <AdminBlogTab envelope={tenantEnvelope} />
           <AdminPublishTab envelope={tenantEnvelope} />
+          <AdminIntegrationsTab envelope={tenantEnvelope} />
           <AdminSettingsTab envelope={tenantEnvelope} />
           {canViewInternalGuide && (

package/apps/storefront/src/pages/api/activity.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * POST /api/activity — the ingest endpoint of the operational activity telemetry
- * spine (card D4). Accepts one `ActivityEvent` (or a batch array) as JSON from
- * the emitter cohorts — the CLI (D3) and the UI (D6), both posting the wire shape
+ * spine. Accepts one `ActivityEvent` (or a batch array) as JSON from
+ * the emitter cohorts — the CLI and the UI, both posting the wire shape
  * of `packages/public-runtime/src/activity/event.ts` — authenticates the caller,
  * re-redacts server-side, and fans each accepted event out to the sink(s) its
  * catalog entry declares. See DECISIONS.md §8 for the store decision.
@@ -18,7 +18,7 @@
  * DEFENSE IN DEPTH — every event is rebuilt through `createActivityEvent()`
  * (`ingestEvents`), re-applying the default-deny allowlist + canary scan even
  * though emitters already redacted. A value-canary trip is self-telemetried as
- * `system.ingest.rejected` so a leak attempt is visible (D6/D7 alert on it).
+ * `system.ingest.rejected` so a leak attempt is visible for alerting.
  *
  * OFF THE CRITICAL PATH — auth + parse + validate + redact are cheap synchronous
  * CPU; the sink WRITES (D1 + Analytics Engine) run past the response via
@@ -50,7 +50,7 @@ function json(body: unknown, status: number): Response {
 }
 export async function POST(context: APIContext): Promise<Response> {
-  // Kill switch (D8): telemetry off ⇒ accept-and-drop. Fail-open toward the EMITTER —
+  // Kill switch: telemetry off ⇒ accept-and-drop. Fail-open toward the EMITTER —
   // a 202 (never a 4xx/5xx) so a CLI/UI poster never errors, retries, or is delayed by
   // the switch; nothing is validated, stored, or fanned out.
   if (isActivityDisabled()) {
@@ -96,8 +96,8 @@ export async function POST(context: APIContext): Promise<Response> {
   // Self-telemetry: a value-canary trip during server-side redaction means an
   // emitter leaked (or tried to leak) a secret/PII into the payload. Emit a
-  // `system.ingest.rejected` event (itself routed to logs+analytics) so D6/D7 can
-  // alert — the fact of the trip, the action, never the offending value. Rejected
+  // `system.ingest.rejected` event (itself routed to logs+analytics) so it can be
+  // alerted on — the fact of the trip, the action, never the offending value. Rejected
   // events get the same self-telemetry so a spoof/unknown-action attempt is
   // visible. Built here (synchronously) but fanned out off-path below.
   const selfTelemetry = [
@@ -127,9 +127,9 @@ export async function POST(context: APIContext): Promise<Response> {
   // Fan every accepted event + the self-telemetry out to its sinks, PAST the
   // response. Best-effort per sink (never throws). The adapter's per-request
-  // ExecutionContext lives at `locals.runtime.ctx`; runAfterResponse floats the
+  // ExecutionContext lives at `locals.cfContext`; runAfterResponse floats the
   // promise in dev/Node when it is absent.
-  const cfContext = (context.locals as { runtime?: { ctx?: CfExecutionContextLike } })?.runtime?.ctx ?? null;
+  const cfContext = (context.locals as { cfContext?: CfExecutionContextLike })?.cfContext ?? null;
   const work = Promise.all([...accepted.map((a) => a.event), ...selfTelemetry].map((e) => fanOutActivity(e, sinks)));
   runAfterResponse(work, cfContext);

package/apps/storefront/src/pages/api/admin/activity-alerts.ts CHANGED Viewed

@@ -25,9 +25,7 @@
  * ops-timeline; never a URL/query value.
  */
 import type { APIContext } from "astro";
-import { readViewerSession } from "@/lib/auth/route";
-import { resolveAdminEntry } from "@/lib/auth/adminEntry";
-import { resolveAdminTenantMode } from "@/lib/adminTenantEnvelope";
+import { requireAdminApiEntry } from "@/lib/auth/adminApiGuard";
 import { readD1 } from "@/lib/env";
 import { fromD1 } from "@/lib/d1/catalog";
 import { checkActivityAlerts } from "@/lib/activity/alerts";
@@ -46,24 +44,11 @@ function json(body: unknown, status = 200): Response {
 export async function GET(context: APIContext): Promise<Response> {
   const { tenant } = context.locals;
-  const nowSeconds = Math.floor(Date.now() / 1000);
-  const viewerSession = await readViewerSession(context);
-  if (!viewerSession) return json({ ok: false, reason: "sign_in_required" }, 401);
-  const adminEntry = resolveAdminEntry({
-    record: viewerSession,
-    hostResource: tenant.appDomain,
-    nowSeconds,
-  });
-  const { isStaff } = resolveAdminTenantMode({
-    session: viewerSession,
-    adminAppTenant: tenant.appDomain,
-    requestedTarget: null,
-    nowSeconds,
-  });
-  const authorized = adminEntry.isOwnerViewer || isStaff;
-  if (!authorized) return json({ ok: false, reason: "not_authorized" }, 403);
+  // Owner/admin-of-tenant or ToT-staff only — same bar as /admin/ops-timeline,
+  // fail-closed and bound to the Host-resolved tenant.
+  const access = await requireAdminApiEntry(context, { requireOwner: true });
+  if (!access.ok) return json({ ok: false, reason: access.reason }, access.status);
   const d1 = await readD1("STOREFRONT_APPS_DB");
   if (!d1) return json({ ok: true, dbAvailable: false, alerts: [] });

package/apps/storefront/src/pages/api/admin/orders/[id].ts CHANGED Viewed

@@ -1,13 +1,14 @@
 /**
- * `GET /api/admin/orders/:id` — one order's full detail for the Orders tab (U2).
+ * `GET /api/admin/orders/:id` — one order's full detail for the Orders tab.
  *
  * Server-side proxy to checkout `GET /commerce/orders/:orderId` for the
  * resolved tenant + env. Bearer stays server-side; response is the CheckoutOrderDetail
- * DTO. `verificationDetail` is empty until U4 fills it — consumers tolerate that.
+ * DTO. `verificationDetail` is currently empty — consumers tolerate that.
  * Read-only (scope-locks).
  */
 import type { APIContext } from "astro";
 import { readEnv } from "@/lib/env";
+import { requireAdminApiEntry } from "@/lib/auth/adminApiGuard";
 import {
   createCheckoutOrderClient,
   orderApiBaseUrl,
@@ -31,6 +32,10 @@ function jsonError(code: string, status: number): Response {
 export async function GET(context: APIContext): Promise<Response> {
   const { tenant, customizationEnv } = context.locals;
+  const access = await requireAdminApiEntry(context);
+  if (!access.ok) return jsonError(access.reason, access.status);
   const orderId = context.params.id;
   if (!orderId) return jsonError("order_not_found", 404);

package/apps/storefront/src/pages/api/admin/orders.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 /**
- * `GET /api/admin/orders` — internal admin route backing the Orders tab (U2).
+ * `GET /api/admin/orders` — internal admin route backing the Orders tab.
  *
  * Server-side proxy to the checkout order READ API for the resolved tenant +
  * environment. The per-tenant bearer key stays on the Worker (never in the
  * response); the browser only ever sees order DTO JSON. Read-only (scope-locks).
- * U3 consumes this and maps the DTO → OrdersViewModel.
+ * The admin UI consumes this and maps the DTO → OrdersViewModel.
  *
  * Access control matches the rest of the admin surface (owned by the admin
  * host/approver layer) — same posture as `api/evidence.json.ts`; no new gate here.
@@ -12,6 +12,7 @@
 import type { APIContext } from "astro";
 import type { CheckoutOrderListFilters } from "@tot/public-runtime";
 import { readEnv } from "@/lib/env";
+import { requireAdminApiEntry } from "@/lib/auth/adminApiGuard";
 import {
   createCheckoutOrderClient,
   orderApiBaseUrl,
@@ -36,6 +37,11 @@ function jsonError(code: string, status: number): Response {
 export async function GET(context: APIContext): Promise<Response> {
   const { tenant, customizationEnv } = context.locals;
+  // Fail closed: require a signed-in member/owner of THIS tenant, bound to the
+  // Host-resolved appDomain — never trusting the conditional login gate for auth.
+  const access = await requireAdminApiEntry(context);
+  if (!access.ok) return jsonError(access.reason, access.status);
   const bearer = await readEnv("FOXY_ORDER_API_KEY");
   if (!bearer) {
     // Worker secret not provisioned for this env — a config error, not the