@tokenoftrust/storefront-runner 2.0.2 → 2.0.4

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

@@ -1,570 +0,0 @@
----
-/**
- * Tenant admin interface launch surface.
- *
- * This route intentionally does not use the public storefront Layout: it is a
- * white-labeled operations surface, not marketing chrome. Middleware still
- * resolves the tenant, injects CSP/security headers, and supports shared preview
- * path routing, so this works as:
- *
- *   /admin
- *   /<tenant-domain>/admin
- *
- * 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, 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
- *     nav (desktop sidebar + `.mobile-tabbar` under 760px) are the only ways
- *     to activate a tab. Both are wired through the shared
- *     `[data-admin-tab-link]` click handler at the bottom of this file; adding
- *     a new entry point for tab switching means adding that attribute, not new
- *     JS.
- *   - Tables/wide content wrapped in `.table-wrap` (`overflow-x: auto`) so a
- *     tab can never force page-level horizontal scroll, checked down to 360px.
- *   - White-labeled, dense, merchant-first copy — see
- *     docs/handoffs/admin-app-implementation-baseline.md for the full product
- *     frame this shell exists to serve.
- */
-export const prerender = false;
-
-import AdminCustomersTab from "../components/admin/AdminCustomersTab.astro";
-import AdminFulfillmentTab from "../components/admin/AdminFulfillmentTab.astro";
-import AdminAIWorkflowsTab from "../components/admin/AdminAIWorkflowsTab.astro";
-import OrdersWorkspace from "../components/admin/orders/OrdersWorkspace.astro";
-import AdminProductsTab from "../components/admin/AdminProductsTab.astro";
-import AdminSubscriptionsTab from "../components/admin/AdminSubscriptionsTab.astro";
-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";
-import { resolveAdminEntry } from "@/lib/auth/adminEntry";
-import "@/styles/admin.css";
-
-const { tenant, basePath, cspNonce } = Astro.locals;
-const adminPath = `${basePath || ""}/admin`;
-const tenantLabel = tenant.displayName || tenant.appDomain || tenant.tenant_id;
-const viewerSession = await readViewerSession(Astro);
-const viewerEmail = (Astro.locals.viewer?.email ?? viewerSession?.email ?? "").toLowerCase();
-const viewerDomain = viewerEmail.split("@").at(-1) ?? "";
-const canViewInternalGuide = viewerDomain === "tokenoftrust.com";
-
-// Internal admin-app tenant mode (baseline doc §Admin App As Tenant,
-// tenant-envelope-contract): every mounted tab receives an explicit
-// { adminAppTenant, targetTenant } envelope. Only a real ToT-staff session
-// may move targetTenant away from the routed tenant, and only to a tenant
-// they already have real access to — see lib/adminTenantEnvelope.ts for the
-// authorization rule (deny-by-default, refused not hidden-only). Resolved
-// BEFORE adminEntry below: a staff viewer's capability must be checked
-// against the tenant they selected, not the app's routed host.
-const adminTenantMode = resolveAdminTenantMode({
-  session: viewerSession,
-  adminAppTenant: tenant.appDomain,
-  requestedTarget: Astro.url.searchParams.get("asTenant"),
-  nowSeconds: Math.floor(Date.now() / 1000),
-});
-const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = adminTenantMode;
-
-// dg6 — admin session ENTRY resolved SERVER-SIDE against the SELECTED tenant's
-// appDomain (never client input, never a bearer secret): an authenticated
-// owner/team member for THIS tenant reaches the admin context; a non-member /
-// anonymous visitor was already held at the sign-in gate (middleware). Consumes
-// u10's owner + ship-capability model; the go-live tabs (AdminPublishTab) read
-// the same tenant-bound `Astro.locals.viewer.capability`, so the shell just stamps
-// the authoritative principal for chrome + tests — it does not re-gate.
-const adminEntry = resolveAdminEntry({
-  record: viewerSession,
-  hostResource: tenantEnvelope.targetTenant,
-  nowSeconds: Math.floor(Date.now() / 1000),
-});
----
-
-<!doctype html>
-<html
-  lang="en"
-  data-internal-admin-guide={canViewInternalGuide ? "true" : "false"}
-  data-admin-app-tenant={tenantEnvelope.adminAppTenant}
-  data-admin-target-tenant={tenantEnvelope.targetTenant}
-  data-admin-operator={tenantEnvelope.operator ?? ""}
-  data-admin-is-staff={isStaff ? "true" : "false"}
-  data-admin-viewer-authenticated={viewerSession ? "true" : "false"}
-  data-admin-entry-principal={adminEntry.principal}
-  data-admin-is-owner={adminEntry.isOwnerViewer ? "true" : "false"}
-  data-admin-can-ship={adminEntry.shipCapabilities.shipOnBehalf ? "true" : "false"}
-  data-admin-can-apex-cutover={adminEntry.shipCapabilities.apexCutover ? "true" : "false"}
->
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="robots" content="noindex, nofollow" />
-    <title>{tenantLabel} Admin</title>
-    <script is:inline nonce={cspNonce}>
-      (() => {
-        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);
-        // the tab id is only the part before "?".
-        const hash = window.location.hash.slice(1).split("?")[0];
-        const activeTab = adminTabs.includes(hash) ? hash : defaultTab;
-        const mode = canViewInternalGuide && hash && !adminTabs.includes(hash) ? "guide" : "work-area";
-
-        document.documentElement.classList.add("admin-tabs-ready");
-        document.documentElement.dataset.adminTab = activeTab;
-        document.documentElement.dataset.adminMode = mode;
-      })();
-    </script>
-  </head>
-  <body>
-    <svg aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
-      <symbol id="i-orders" viewBox="0 0 24 24"><path d="M7 4h10a2 2 0 0 1 2 2v14l-3-2-2 2-2-2-2 2-3 2V6a2 2 0 0 1 2-2Z"></path><path d="M9 9h6M9 13h6"></path></symbol>
-      <symbol id="i-box" viewBox="0 0 24 24"><path d="m3 7 9-4 9 4-9 4-9-4Z"></path><path d="M3 7v10l9 4 9-4V7"></path><path d="M12 11v10"></path></symbol>
-      <symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"></path><circle cx="9.5" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.9"></path><path d="M16 3.1a4 4 0 0 1 0 7.8"></path></symbol>
-      <symbol id="i-user" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></symbol>
-      <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 20 6v6c0 5-3.4 8.4-8 9-4.6-.6-8-4-8-9V6l8-3Z"></path><path d="m8.8 12 2.2 2.2L15.8 9"></path></symbol>
-      <symbol id="i-chart" viewBox="0 0 24 24"><path d="M4 19V5"></path><path d="M4 19h16"></path><path d="M8 16v-5"></path><path d="M12 16V8"></path><path d="M16 16v-3"></path></symbol>
-      <symbol id="i-workflows" viewBox="0 0 24 24"><path d="M6 5h6a4 4 0 0 1 4 4v1"></path><path d="m19 7-3 3-3-3"></path><path d="M18 19h-6a4 4 0 0 1-4-4v-1"></path><path d="m5 17 3-3 3 3"></path><circle cx="6" cy="5" r="2"></circle><circle cx="18" cy="19" r="2"></circle></symbol>
-      <symbol id="i-ask" viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-8 8H7l-4 3 1.4-5A8 8 0 1 1 21 12Z"></path><path d="M9.5 9.2A2.7 2.7 0 0 1 12 7.6c1.6 0 2.8 1 2.8 2.4 0 1.7-1.6 2.2-2.4 3-.4.4-.5.7-.5 1.4"></path><path d="M12 17h.01"></path></symbol>
-      <symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2 3-.2-.1a1.8 1.8 0 0 0-2-.2 1.8 1.8 0 0 0-1 1.6v.2h-5v-.2a1.8 1.8 0 0 0-1-1.6 1.8 1.8 0 0 0-2 .2l-.2.1-2-3 .1-.1A1.7 1.7 0 0 0 4.8 15a1.8 1.8 0 0 0-1.5-1H3v-4h.3a1.8 1.8 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1 2-3 .2.1a1.8 1.8 0 0 0 2 .2 1.8 1.8 0 0 0 1-1.6V2.5h5v.2a1.8 1.8 0 0 0 1 1.6 1.8 1.8 0 0 0 2-.2l.2-.1 2 3-.1.1a1.7 1.7 0 0 0-.3 1.9 1.8 1.8 0 0 0 1.5 1h.3v4h-.3a1.8 1.8 0 0 0-1.5 1Z"></path></symbol>
-      <symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12 4.2 4.2L19 6.8"></path></symbol>
-      <symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 3 22 20H2L12 3Z"></path><path d="M12 9v5"></path><path d="M12 17h.01"></path></symbol>
-      <symbol id="i-card" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 10h18"></path><path d="M7 15h4"></path></symbol>
-      <symbol id="i-truck" viewBox="0 0 24 24"><path d="M3 7h11v9H3z"></path><path d="M14 10h4l3 3v3h-7z"></path><circle cx="7" cy="18" r="2"></circle><circle cx="17" cy="18" r="2"></circle></symbol>
-      <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">
-      <aside class="sidebar" aria-label="Admin navigation">
-        <div class="brand">
-          <div class="brand-mark">T</div>
-          <div>
-            <b>Token of Trust</b>
-            <span>Storefront Admin</span>
-          </div>
-        </div>
-
-        <div class="store">
-          <strong>{tenantLabel}</strong>
-          <span>{tenant.appDomain}</span>
-        </div>
-
-        {isStaff && pickerTenants.length > 0 && (
-          <form class="tenant-picker" method="get" data-admin-tenant-picker>
-            <label for="admin-tenant-picker-select">Operating as (internal)</label>
-            <select
-              id="admin-tenant-picker-select"
-              name="asTenant"
-              data-admin-tenant-picker-select
-            >
-              <option value={tenant.appDomain} selected={tenantEnvelope.targetTenant === tenant.appDomain}>
-                {tenant.appDomain} (this app)
-              </option>
-              {pickerTenants
-                .filter((t) => t.resource !== tenant.appDomain)
-                .map((t) => (
-                  <option value={t.resource} selected={tenantEnvelope.targetTenant === t.resource}>
-                    {t.resource}
-                  </option>
-                ))}
-            </select>
-          </form>
-        )}
-
-        {deniedTarget && (
-          <div class="tenant-picker-denied" role="alert">
-            Access to <code>{deniedTarget}</code> is not authorized for your account.
-          </div>
-        )}
-
-        <nav class="nav">
-          <a href="#orders" data-admin-tab-link><svg><use href="#i-file"></use></svg><span>Orders</span></a>
-          <a href="#products" data-admin-tab-link><svg><use href="#i-box"></use></svg><span>Products</span></a>
-          <a href="#subscriptions" data-admin-tab-link><svg><use href="#i-refresh"></use></svg><span>Subscriptions</span></a>
-          <a href="#customers" data-admin-tab-link><svg><use href="#i-users"></use></svg><span>Customers</span></a>
-          <a href="#fulfillment" data-admin-tab-link><svg><use href="#i-truck"></use></svg><span>Fulfillment</span></a>
-          <a href="#reporting" data-admin-tab-link><svg><use href="#i-chart"></use></svg><span>Reporting</span></a>
-          <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>
-
-        <div class="health" aria-label="System status">
-          <div class="health-row"><span>Order sync</span><strong>Live</strong></div>
-          <div class="health-row"><span>Payments</span><strong>OK</strong></div>
-          <div class="health-row"><span>Risk checks</span><strong>OK</strong></div>
-        </div>
-
-        <!-- Cross-surface hop: the developer cockpit is a SIBLING surface (dev
-             setup + connection status), not an admin tab — link, don't embed.
-             basePath-aware so it stays inside the tenant prefix. -->
-        <a class="cockpit-link" href={`${basePath || ""}/cockpit`}>
-          <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">
-            {viewerEmail ? (
-              <>
-                <span class="account-email" title={viewerEmail}>{viewerEmail}</span>
-                <span
-                  class="account-standing"
-                  data-standing={adminEntry.isOwnerViewer ? "owner" : isStaff ? "staff" : "none"}
-                >
-                  {adminEntry.isOwnerViewer
-                    ? `owner/admin of ${tenantEnvelope.targetTenant}`
-                    : isStaff
-                      ? `ToT staff · not an owner of ${tenantEnvelope.targetTenant}`
-                      : `signed in · no owner/admin standing for ${tenantEnvelope.targetTenant}`}
-                </span>
-                <form class="account-signout" method="post" action="/api/auth/logout">
-                  <button type="submit">Sign out</button>
-                </form>
-              </>
-            ) : (
-              <>
-                <span class="account-email">Not signed in</span>
-                <span class="account-standing" data-standing="none">
-                  <a href="/auth/login">sign in</a> as an owner/admin of {tenantEnvelope.targetTenant} to publish
-                </span>
-              </>
-            )}
-          </span>
-        </div>
-      </aside>
-
-      <main class="main">
-        <header class="topbar">
-          <div class="page-title">
-            <h1>Storefront Admin</h1>
-            <p>{tenantLabel} · operations workspace · <code>{adminPath}</code></p>
-          </div>
-        </header>
-
-        <div class="tabs mobile-tabbar" role="tablist" aria-label="Admin work areas">
-          <a class="tab" href="#orders" role="tab" aria-controls="orders" aria-selected="false" data-admin-tab-link>Orders</a>
-          <a class="tab" href="#products" role="tab" aria-controls="products" aria-selected="false" data-admin-tab-link>Products</a>
-          <a class="tab" href="#subscriptions" role="tab" aria-controls="subscriptions" aria-selected="false" data-admin-tab-link>Subscriptions</a>
-          <a class="tab" href="#customers" role="tab" aria-controls="customers" aria-selected="false" data-admin-tab-link>Customers</a>
-          <a class="tab" href="#fulfillment" role="tab" aria-controls="fulfillment" aria-selected="false" data-admin-tab-link>Fulfillment</a>
-          <a class="tab" href="#reporting" role="tab" aria-controls="reporting" aria-selected="false" data-admin-tab-link>Reporting</a>
-          <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>
-
-        <div class="content">
-          {canViewInternalGuide && (
-          <section class="band" aria-labelledby="foundation-title" data-admin-guide-section>
-            <div class="section-title">
-              <div>
-                <h2 id="foundation-title">Foundation</h2>
-                <p>Quiet, dense, merchant-first operations. Compliance and risk are visible, but only loud when they block shipping or sale completion.</p>
-              </div>
-              <span class="chip violet">Preview · noindex</span>
-            </div>
-
-            <div class="grid cols-4">
-              <div class="metric"><span>Primary task</span><strong>Ship</strong><small>Orders lead with readiness and fulfillment</small></div>
-              <div class="metric"><span>Density</span><strong>Table</strong><small>Collapsed viewer supports rapid scanning</small></div>
-              <div class="metric"><span>Risk posture</span><strong>Quiet</strong><small>Warn only when merchant action is needed</small></div>
-              <div class="metric"><span>Branding</span><strong>White label</strong><small>No vendor checkout/provider naming</small></div>
-            </div>
-          </section>
-          )}
-
-          {canViewInternalGuide && (
-          <section id="work-areas" class="band" aria-labelledby="work-areas-title" data-admin-internal-only>
-            <div class="section-title">
-              <div>
-                <h2 id="work-areas-title">Same-Tree Work Area Hooks</h2>
-                <p>Each admin tab has a stable anchor, component file, and layout boundary so agents can work in one tree without stepping on the shared shell.</p>
-              </div>
-              <span class="chip teal">Worktree-free scaffold</span>
-            </div>
-
-            <div class="panel">
-              <div class="panel-head">
-                <h3><svg><use href="#i-box"></use></svg>Admin Tab Map</h3>
-                <span class="chip">Shared route: apps/storefront/src/pages/admin.astro</span>
-              </div>
-              <div class="panel-body grid">
-                <div class="tabs admin-tabs" role="tablist" aria-label="Admin work areas">
-                  <a id="admin-tab-orders" class="tab active" href="#orders" role="tab" aria-controls="orders" aria-selected="true" data-admin-tab-link>Orders</a>
-                  <a id="admin-tab-products" class="tab" href="#products" role="tab" aria-controls="products" aria-selected="false" data-admin-tab-link>Products</a>
-                  <a id="admin-tab-subscriptions" class="tab" href="#subscriptions" role="tab" aria-controls="subscriptions" aria-selected="false" data-admin-tab-link>Subscriptions</a>
-                  <a id="admin-tab-customers" class="tab" href="#customers" role="tab" aria-controls="customers" aria-selected="false" data-admin-tab-link>Customers</a>
-                  <a id="admin-tab-fulfillment" class="tab" href="#fulfillment" role="tab" aria-controls="fulfillment" aria-selected="false" data-admin-tab-link>Fulfillment</a>
-                  <a id="admin-tab-reporting" class="tab" href="#reporting" role="tab" aria-controls="reporting" aria-selected="false" data-admin-tab-link>Reporting</a>
-                  <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>
-
-                <div class="grid cols-3" data-admin-tab-help>
-                  <div class="field">
-                    <label>Shared shell</label>
-                    <strong>Admin chrome, tokens, icons, component primitives</strong>
-                    <p>Touch the route only for shared patterns or new top-level hooks.</p>
-                  </div>
-                  <div class="field">
-                    <label>Tab ownership</label>
-                    <strong>One component per work area</strong>
-                    <p>Products, Customers, Fulfillment, Reporting, AI Workflows, and Settings each have their own file under components/admin.</p>
-                  </div>
-                  <div class="field">
-                    <label>Escalation</label>
-                    <strong>Use worktrees for shared contracts or same-tab collisions</strong>
-                    <p>This scaffold is reasonable for UX tab work. Route, data model, and auth changes still deserve coordination.</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-          )}
-
-          {canViewInternalGuide && (
-          <section id="settings-theme" class="band" aria-labelledby="tokens-title" data-admin-guide-section>
-            <div class="section-title">
-              <div>
-                <h2 id="tokens-title">Theme Tokens</h2>
-                <p>These variables define the administrative interface theme independently of the public storefront theme.</p>
-              </div>
-            </div>
-
-            <div class="panel">
-              <div class="panel-head">
-                <h3><svg><use href="#i-card"></use></svg>Color</h3>
-                <span class="chip teal">Admin palette</span>
-              </div>
-              <div class="panel-body">
-                <div class="swatches">
-                  <div class="swatch"><div class="swatch-color" style="background:#f5f7f6"></div><div class="swatch-meta"><b>Background</b><code>--admin-bg</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#ffffff"></div><div class="swatch-meta"><b>Surface</b><code>--admin-surface</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#16211f"></div><div class="swatch-meta"><b>Ink</b><code>--admin-ink</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#007f79"></div><div class="swatch-meta"><b>Action</b><code>--admin-teal</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#137a55"></div><div class="swatch-meta"><b>Ready</b><code>--admin-green</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#a45d00"></div><div class="swatch-meta"><b>Review</b><code>--admin-amber</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#b42318"></div><div class="swatch-meta"><b>Blocked</b><code>--admin-red</code></div></div>
-                  <div class="swatch"><div class="swatch-color" style="background:#2458c7"></div><div class="swatch-meta"><b>Info</b><code>--admin-blue</code></div></div>
-                </div>
-              </div>
-            </div>
-
-            <div class="grid cols-2">
-              <div class="panel type-sample">
-                <div class="panel-head"><h3>Typography</h3><span class="chip">0 letter spacing</span></div>
-                <div class="panel-body">
-                  <h3>Order #2248206305</h3>
-                  <p>Use system UI for fast operational scanning. Reserve 22-27px headings for page/detail titles, 15-16px for section heads, and 12-13px for dense metadata.</p>
-                </div>
-              </div>
-              <div class="panel">
-                <div class="panel-head"><h3>Shape and Space</h3><span class="chip">8px max cards</span></div>
-                <div class="panel-body grid cols-2">
-                  <div class="field"><label>Radius</label><strong>8px / 6px</strong><p>Cards, panels, form controls</p></div>
-                  <div class="field"><label>Grid gap</label><strong>12-14px</strong><p>Dense, predictable rhythm</p></div>
-                  <div class="field"><label>Hit target</label><strong>38-44px</strong><p>Buttons and controls</p></div>
-                  <div class="field"><label>Shadow</label><strong>Subtle</strong><p>Only for active detail surfaces</p></div>
-                </div>
-              </div>
-            </div>
-          </section>
-
-          <section id="settings-components" class="band" aria-labelledby="components-title" data-admin-guide-section>
-            <div class="section-title">
-              <div>
-                <h2 id="components-title">Core Components</h2>
-                <p>Reusable elements for orders, fulfillment, customers, compliance, and risk workflows.</p>
-              </div>
-            </div>
-
-            <div class="grid cols-2">
-              <div class="panel">
-                <div class="panel-head"><h3><svg><use href="#i-check"></use></svg>Buttons and Chips</h3></div>
-                <div class="panel-body grid">
-                  <div class="actions">
-                    <button class="btn primary" type="button"><svg><use href="#i-truck"></use></svg>Fulfill</button>
-                    <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
-                    <button class="icon-btn" type="button" aria-label="Refresh"><svg><use href="#i-refresh"></use></svg></button>
-                  </div>
-                  <div class="actions">
-                    <span class="chip green">Paid</span>
-                    <span class="chip teal">Ready</span>
-                    <span class="chip blue">Excise</span>
-                    <span class="chip amber">Review</span>
-                    <span class="chip red">Blocked</span>
-                    <span class="chip violet">Test store</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="panel">
-                <div class="panel-head"><h3><svg><use href="#i-file"></use></svg>Tabs</h3></div>
-                <div class="panel-body">
-                  <div class="tabs" role="tablist" aria-label="Static tab sample">
-                    <button class="tab active" type="button">Order</button>
-                    <button class="tab" type="button">Customer</button>
-                    <button class="tab" type="button">Compliance</button>
-                    <button class="tab" type="button">Order Risk</button>
-                    <button class="tab" type="button">Activity</button>
-                  </div>
-                  <p class="note" style="margin-top:12px">Compliance and Order Risk are secondary tabs. Top alerts jump directly to them only when action is required.</p>
-                </div>
-              </div>
-            </div>
-          </section>
-          )}
-
-          <OrdersWorkspace envelope={tenantEnvelope} />
-          <AdminProductsTab envelope={tenantEnvelope} />
-          <AdminSubscriptionsTab envelope={tenantEnvelope} />
-          <AdminCustomersTab envelope={tenantEnvelope} />
-          <AdminFulfillmentTab envelope={tenantEnvelope} />
-          <AdminReportingTab envelope={tenantEnvelope} />
-          <AdminAIWorkflowsTab envelope={tenantEnvelope} />
-          <AdminBlogTab envelope={tenantEnvelope} />
-          <AdminPublishTab envelope={tenantEnvelope} />
-          <AdminIntegrationsTab envelope={tenantEnvelope} />
-          <AdminSettingsTab envelope={tenantEnvelope} />
-
-          {canViewInternalGuide && (
-          <section id="risk" class="band" aria-labelledby="risk-title" data-admin-guide-section>
-            <div class="section-title">
-              <div>
-                <h2 id="risk-title">Order Risk</h2>
-                <p>Risk is quiet at low levels and becomes top-level only when it blocks fulfillment.</p>
-              </div>
-            </div>
-
-            <div class="risk-alert">
-              <div class="risk-alert-main">
-                <svg><use href="#i-alert"></use></svg>
-                <div>
-                  <b>Order Risk: Review required</b>
-                  <span>Risk checks need review before this order can ship.</span>
-                </div>
-              </div>
-              <button class="btn" type="button">View risk</button>
-            </div>
-
-            <div class="panel">
-              <div class="panel-head"><h3><svg><use href="#i-alert"></use></svg>Order Risk Tab</h3><span class="chip amber">Review required</span></div>
-              <div class="panel-body grid">
-                <div class="grid cols-2">
-                  <div class="field"><label>Risk status</label><strong>Review required</strong><p>Risk checks need review before this order can ship.</p></div>
-                  <div class="field"><label>Risk score</label><strong>Needs review</strong><p>Review risk</p></div>
-                </div>
-                <div class="check-row blocking">
-                  <div><b>Gateway fraud risk</b><p>Payment is authorized but not fully captured.</p></div>
-                  <strong>Pending capture</strong>
-                  <span class="chip amber">Action</span>
-                </div>
-                <div class="check-row blocking">
-                  <div><b>Manual review</b><p>Resolve the hold before creating a shipping label.</p></div>
-                  <strong>Required</strong>
-                  <span class="chip amber">Action</span>
-                </div>
-                <div class="check-row">
-                  <div><b>Customer history</b><p>Returning customers show order count, member-since date, and lifetime spend.</p></div>
-                  <strong>3 orders</strong>
-                  <span class="chip teal">OK</span>
-                </div>
-              </div>
-            </div>
-          </section>
-          )}
-
-          {canViewInternalGuide && (
-          <section id="compliance" class="band" aria-labelledby="compliance-title" data-admin-guide-section>
-            <div class="section-title">
-              <div>
-                <h2 id="compliance-title">Compliance</h2>
-                <p>Relevant regulated-sale details stay available without becoming the hero of the order page.</p>
-              </div>
-            </div>
-
-            <div class="panel">
-              <div class="panel-head"><h3><svg><use href="#i-shield"></use></svg>Compliance Tab</h3><span class="chip green">Ready to Ship</span></div>
-              <div class="panel-body grid">
-                <div class="check-row">
-                  <div><b>Identity and age</b><p>21+ assurance completed before checkout.</p></div>
-                  <strong>Passed</strong>
-                  <span class="chip green">OK</span>
-                </div>
-                <div class="check-row">
-                  <div><b>Excise tax</b><p>Minnesota jurisdiction via tot_excise_tax.</p></div>
-                  <strong>$142.50 collected</strong>
-                  <span class="chip blue">OK</span>
-                </div>
-                <div class="check-row">
-                  <div><b>PACT workflow</b><p>Shipping and reporting placeholders are ready for fulfillment.</p></div>
-                  <strong>Ready</strong>
-                  <span class="chip teal">OK</span>
-                </div>
-                <div class="check-row">
-                  <div><b>Evidence</b><p>Audit evidence available if needed.</p></div>
-                  <strong>Logged</strong>
-                  <span class="chip teal">OK</span>
-                </div>
-              </div>
-            </div>
-          </section>
-          )}
-
-          {canViewInternalGuide && (
-          <section class="band" aria-labelledby="copy-title" data-admin-guide-section>
-            <div class="section-title">
-              <div>
-                <h2 id="copy-title">Language Rules</h2>
-                <p>Terminology for the white-labeled admin experience.</p>
-              </div>
-            </div>
-            <div class="grid cols-3">
-              <div class="field"><label>Green state</label><strong>Ready to Ship</strong><p>Use for paid, checked, shippable orders.</p></div>
-              <div class="field"><label>Blocking state</label><strong>Hold: Review Required</strong><p>Use when the merchant must act before shipment.</p></div>
-              <div class="field"><label>Provider labels</label><strong>Do not show</strong><p>Use Storefront, checkout, order sync, and customer record.</p></div>
-            </div>
-            <p class="note">Implementation note: provider-specific identifiers can remain in server logs and engineering docs, but customer- and merchant-facing admin screens stay white-labeled.</p>
-          </section>
-          )}
-        </div>
-      </main>
-    </div>
-
-    <button class="floating-ask" type="button" data-admin-ask aria-label="Ask about Orders" title="Ask about Orders">
-      <span class="floating-ask-icon" aria-hidden="true"><svg><use href="#i-ask"></use></svg></span>
-      <span class="floating-ask-label">
-        <strong>Ask</strong>
-        <small data-admin-ask-context>Orders</small>
-      </span>
-    </button>
-
-    <script>
-      import { initAdminShell } from "@/lib/admin/adminShell";
-      initAdminShell();
-    </script>
-  </body>
-</html>