npm - @tokenoftrust/storefront-runner - Versions diffs - 1.3.2 - Mend

@tokenoftrust/storefront-runner 1.3.2

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 (310) hide show

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

@@ -0,0 +1,1675 @@
+---
+/**
+ * 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, customers, fulfillment,
+ *     reporting, ai-workflows, 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 AdminReportingTab from "../components/admin/AdminReportingTab.astro";
+import AdminSettingsTab from "../components/admin/AdminSettingsTab.astro";
+import { readViewerSession } from "@/lib/auth/route";
+import { resolveAdminTenantMode } from "@/lib/adminTenantEnvelope";
+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).
+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;
+---
+<!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"}
+>
+  <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", "customers", "fulfillment", "reporting", "ai-workflows", "settings"];
+        const canViewInternalGuide = document.documentElement.dataset.internalAdminGuide === "true";
+        const defaultTab = canViewInternalGuide ? "orders" : "settings";
+        const hash = window.location.hash.slice(1);
+        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>
+    <style is:global nonce={cspNonce}>
+      :root {
+        color-scheme: light;
+        --admin-bg: #f5f7f6;
+        --admin-surface: #ffffff;
+        --admin-surface-soft: #f9fbfa;
+        --admin-surface-tint: #eef6f4;
+        --admin-ink: #16211f;
+        --admin-muted: #64716d;
+        --admin-muted-2: #8c9894;
+        --admin-line: #dce5e2;
+        --admin-line-strong: #bdcbc7;
+        --admin-teal: #007f79;
+        --admin-teal-dark: #005d58;
+        --admin-teal-soft: #dff4f1;
+        --admin-green: #137a55;
+        --admin-green-soft: #e3f5eb;
+        --admin-blue: #2458c7;
+        --admin-blue-soft: #e7efff;
+        --admin-amber: #a45d00;
+        --admin-amber-soft: #fff0d5;
+        --admin-red: #b42318;
+        --admin-red-soft: #fde7e4;
+        --admin-violet: #6941c6;
+        --admin-violet-soft: #efe9ff;
+        --admin-shadow: 0 18px 50px rgba(23, 33, 31, 0.08);
+        --admin-radius: 8px;
+        --admin-radius-sm: 6px;
+        --admin-scroll-offset: 104px;
+        --admin-font:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          "Segoe UI", sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        max-width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      body {
+        margin: 0;
+        height: 100%;
+        min-height: 100vh;
+        background: var(--admin-bg);
+        color: var(--admin-ink);
+        font: 14px/1.5 var(--admin-font);
+        overflow: hidden;
+      }
+      button,
+      input,
+      select {
+        font: inherit;
+      }
+      button {
+        cursor: pointer;
+      }
+      svg {
+        width: 18px;
+        height: 18px;
+        stroke: currentColor;
+        stroke-width: 1.9;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+        flex: 0 0 auto;
+      }
+      .shell {
+        display: grid;
+        grid-template-columns: 248px minmax(0, 1fr);
+        height: 100vh;
+        min-height: 0;
+        overflow: hidden;
+      }
+      .sidebar {
+        position: sticky;
+        top: 0;
+        height: 100vh;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 22px;
+        padding: 20px 16px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        background: #101b18;
+        color: #eef7f5;
+      }
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-height: 42px;
+      }
+      .brand-mark {
+        width: 36px;
+        height: 36px;
+        display: grid;
+        place-items: center;
+        border-radius: var(--admin-radius);
+        background: #00a991;
+        color: #06231e;
+        font-weight: 800;
+      }
+      .brand b,
+      .store strong {
+        display: block;
+        font-size: 14px;
+        line-height: 1.1;
+      }
+      .brand span,
+      .store span {
+        display: block;
+        margin-top: 3px;
+        color: rgba(238, 247, 245, 0.7);
+        font-size: 12px;
+      }
+      .store {
+        display: grid;
+        gap: 4px;
+        padding: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: var(--admin-radius);
+        background: rgba(255, 255, 255, 0.06);
+      }
+      .tenant-picker {
+        display: grid;
+        gap: 4px;
+        padding: 10px 12px;
+        border: 1px solid rgba(0, 169, 145, 0.4);
+        border-radius: var(--admin-radius);
+        background: rgba(0, 169, 145, 0.1);
+      }
+      .tenant-picker label {
+        color: rgba(238, 247, 245, 0.7);
+        font-size: 11px;
+        font-weight: 760;
+        text-transform: uppercase;
+      }
+      .tenant-picker select {
+        min-height: 34px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: var(--admin-radius-sm);
+        background: #101b18;
+        color: #eef7f5;
+      }
+      .tenant-picker-denied {
+        padding: 10px 12px;
+        border: 1px solid var(--admin-amber);
+        border-radius: var(--admin-radius);
+        background: rgba(164, 93, 0, 0.16);
+        color: #eef7f5;
+        font-size: 12px;
+      }
+      .tenant-picker-denied code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      .nav {
+        display: grid;
+        gap: 4px;
+      }
+      .nav a {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-height: 40px;
+        padding: 0 10px;
+        border-radius: var(--admin-radius-sm);
+        color: rgba(238, 247, 245, 0.74);
+        text-decoration: none;
+      }
+      .nav a.active {
+        background: rgba(0, 169, 145, 0.18);
+        color: #ffffff;
+      }
+      .nav-group {
+        display: grid;
+        gap: 3px;
+      }
+      .nav-subnav {
+        display: grid;
+        gap: 2px;
+        margin: 0 0 3px 28px;
+        padding-left: 10px;
+        border-left: 1px solid rgba(255, 255, 255, 0.14);
+      }
+      .nav-subnav a {
+        min-height: 32px;
+        padding: 0 8px;
+        gap: 8px;
+        font-size: 12px;
+      }
+      .nav-subnav svg {
+        width: 16px;
+        height: 16px;
+      }
+      .health {
+        margin-top: auto;
+        display: grid;
+        gap: 9px;
+        padding: 12px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: var(--admin-radius);
+        background: rgba(255, 255, 255, 0.05);
+      }
+      .health-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        font-size: 12px;
+        color: rgba(238, 247, 245, 0.72);
+      }
+      .health-row strong {
+        color: #ffffff;
+      }
+      .main {
+        min-width: 0;
+        min-height: 0;
+        height: 100vh;
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+      .content,
+      .band,
+      .panel,
+      .panel-body,
+      .table-wrap {
+        min-width: 0;
+        max-width: 100%;
+      }
+      .topbar {
+        position: sticky;
+        top: 0;
+        z-index: 30;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 18px;
+        min-height: 68px;
+        padding: 14px 24px;
+        border-bottom: 1px solid var(--admin-line);
+        background: rgba(245, 247, 246, 0.94);
+        backdrop-filter: blur(16px);
+      }
+      .page-title h1 {
+        margin: 0;
+        font-size: 22px;
+        font-weight: 760;
+      }
+      .page-title p {
+        margin: 2px 0 0;
+        color: var(--admin-muted);
+        font-size: 13px;
+      }
+      .page-title,
+      .page-title p,
+      .note,
+      code {
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .btn,
+      .icon-btn {
+        min-height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border: 1px solid var(--admin-line-strong);
+        border-radius: var(--admin-radius-sm);
+        background: var(--admin-surface);
+        color: var(--admin-ink);
+        text-decoration: none;
+        white-space: nowrap;
+      }
+      .btn {
+        padding: 0 13px;
+        font-weight: 680;
+        max-width: 100%;
+      }
+      .icon-btn {
+        width: 38px;
+        padding: 0;
+      }
+      .btn.primary {
+        border-color: var(--admin-teal-dark);
+        background: var(--admin-teal);
+        color: #ffffff;
+      }
+      .floating-ask {
+        position: fixed;
+        right: 24px;
+        bottom: 24px;
+        z-index: 80;
+        min-height: 58px;
+        max-width: min(280px, calc(100vw - 32px));
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 9px 15px 9px 10px;
+        border: 1px solid rgba(0, 93, 88, 0.24);
+        border-radius: 999px;
+        background: var(--admin-teal);
+        color: #ffffff;
+        box-shadow: 0 16px 38px rgba(22, 33, 31, 0.22);
+      }
+      .floating-ask-icon {
+        width: 40px;
+        height: 40px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.16);
+      }
+      .floating-ask-label {
+        display: grid;
+        gap: 1px;
+        min-width: 0;
+        text-align: left;
+      }
+      .floating-ask-label strong {
+        font-size: 14px;
+        line-height: 1.1;
+      }
+      .floating-ask-label small {
+        max-width: 160px;
+        overflow: hidden;
+        color: rgba(255, 255, 255, 0.78);
+        font-size: 11px;
+        font-weight: 680;
+        line-height: 1.2;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .content {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 18px;
+        padding: 20px 24px 40px;
+      }
+      .band {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 14px;
+      }
+      [data-admin-panel],
+      [data-admin-guide-section] {
+        scroll-margin-top: var(--admin-scroll-offset);
+      }
+      html.admin-tabs-ready [data-admin-panel] {
+        display: none;
+      }
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="orders"] #orders,
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="products"] #products,
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="customers"] #customers,
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="fulfillment"] #fulfillment,
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="reporting"] #reporting,
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="ai-workflows"] #ai-workflows,
+      html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="settings"] #settings {
+        display: grid;
+      }
+      html.admin-tabs-ready[data-admin-mode="work-area"] [data-admin-guide-section],
+      html.admin-tabs-ready[data-admin-mode="work-area"] [data-admin-tab-help] {
+        display: none;
+      }
+      html[data-internal-admin-guide="false"] [data-admin-internal-only] {
+        display: none !important;
+      }
+      .section-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+      }
+      .section-title h2 {
+        margin: 0;
+        font-size: 16px;
+      }
+      .section-title p {
+        margin: 4px 0 0;
+        color: var(--admin-muted);
+        font-size: 13px;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 12px;
+      }
+      .grid.cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .grid.cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .grid.cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      .panel {
+        border: 1px solid var(--admin-line);
+        border-radius: var(--admin-radius);
+        background: var(--admin-surface);
+      }
+      .panel-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        min-height: 50px;
+        padding: 13px 14px;
+        border-bottom: 1px solid var(--admin-line);
+      }
+      .panel-head h3 {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 15px;
+      }
+      .panel-body {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: 12px;
+        padding: 14px;
+      }
+      .metric {
+        min-height: 84px;
+        padding: 14px;
+        border: 1px solid var(--admin-line);
+        border-radius: var(--admin-radius);
+        background: var(--admin-surface);
+      }
+      .metric span,
+      .field label {
+        display: block;
+        color: var(--admin-muted);
+        font-size: 11px;
+        font-weight: 760;
+        text-transform: uppercase;
+      }
+      .metric strong {
+        display: block;
+        margin-top: 9px;
+        font-size: 24px;
+      }
+      .metric small {
+        display: block;
+        margin-top: 3px;
+        color: var(--admin-muted);
+        font-size: 12px;
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        min-height: 23px;
+        padding: 0 8px;
+        border-radius: 999px;
+        background: var(--admin-surface-tint);
+        color: #3f4d49;
+        font-size: 12px;
+        font-weight: 740;
+        white-space: nowrap;
+      }
+      .chip.green {
+        background: var(--admin-green-soft);
+        color: var(--admin-green);
+      }
+      .chip.teal {
+        background: var(--admin-teal-soft);
+        /* Slightly darker than --admin-teal (#007f79): the shared token only
+           reaches ~4.26:1 against --admin-teal-soft, just under WCAG AA's
+           4.5:1 for this chip's 12px text (hardening-qa a11y pass). Scoped to
+           this rule only — --admin-teal itself stays unchanged since it is
+           also used as a background (e.g. .btn.primary) where the pairing
+           and contrast requirement are different. */
+        color: #007973;
+      }
+      .chip.blue {
+        background: var(--admin-blue-soft);
+        color: var(--admin-blue);
+      }
+      .chip.amber {
+        background: var(--admin-amber-soft);
+        color: var(--admin-amber);
+      }
+      .chip.red {
+        background: var(--admin-red-soft);
+        color: var(--admin-red);
+      }
+      .chip.violet {
+        background: var(--admin-violet-soft);
+        color: var(--admin-violet);
+      }
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 10px;
+      }
+      .swatch {
+        overflow: hidden;
+        border: 1px solid var(--admin-line);
+        border-radius: var(--admin-radius-sm);
+        background: var(--admin-surface);
+      }
+      .swatch-color {
+        min-height: 58px;
+      }
+      .swatch-meta {
+        padding: 10px;
+      }
+      .swatch-meta b {
+        display: block;
+        font-size: 13px;
+      }
+      .swatch-meta code,
+      .note code {
+        color: var(--admin-muted);
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 12px;
+      }
+      .field {
+        min-width: 0;
+        padding: 11px;
+        border: 1px solid var(--admin-line);
+        border-radius: var(--admin-radius-sm);
+        background: #fcfdfc;
+      }
+      .field strong {
+        display: block;
+        margin-top: 6px;
+        font-size: 13px;
+      }
+      .field p {
+        margin: 5px 0 0;
+        color: var(--admin-muted);
+        font-size: 12px;
+      }
+      .ship-gate {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 14px;
+        padding: 14px;
+        border: 1px solid #a6d8c0;
+        border-radius: var(--admin-radius);
+        background: #eefaf3;
+      }
+      .ship-gate.amber {
+        border-color: #f1c883;
+        background: #fff6e7;
+      }
+      .ship-gate-main,
+      .risk-alert-main {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+      }
+      .seal {
+        width: 42px;
+        height: 42px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: var(--admin-green);
+        color: #ffffff;
+      }
+      .ship-gate.amber .seal {
+        background: var(--admin-amber);
+      }
+      .ship-gate b,
+      .risk-alert b {
+        display: block;
+        font-size: 15px;
+      }
+      .ship-gate span,
+      .risk-alert span {
+        display: block;
+        margin-top: 3px;
+        color: var(--admin-muted);
+        font-size: 12px;
+      }
+      .risk-alert {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 14px;
+        padding: 12px 14px;
+        border: 1px solid #f1c883;
+        border-radius: var(--admin-radius);
+        background: #fff6e7;
+      }
+      .risk-alert svg {
+        color: var(--admin-amber);
+      }
+      .order-assist-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 10px;
+      }
+      .order-assist-card {
+        display: grid;
+        gap: 7px;
+        min-width: 0;
+        padding: 12px;
+        border: 1px solid var(--admin-line);
+        border-radius: var(--admin-radius-sm);
+        background: var(--admin-surface);
+      }
+      .order-assist-card strong {
+        font-size: 14px;
+      }
+      .order-assist-card p {
+        margin: 0;
+        color: var(--admin-muted);
+        font-size: 12px;
+      }
+      .tabs {
+        display: flex;
+        gap: 6px;
+        max-width: 100%;
+        overflow-x: auto;
+        border-bottom: 1px solid var(--admin-line);
+      }
+      .mobile-tabbar {
+        display: none;
+      }
+      .tab {
+        flex: 0 0 auto;
+        min-height: 38px;
+        display: inline-flex;
+        align-items: center;
+        padding: 0 12px;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        background: transparent;
+        color: var(--admin-muted);
+        font-weight: 760;
+        text-decoration: none;
+      }
+      .tab.active {
+        border-color: var(--admin-teal);
+        color: var(--admin-ink);
+      }
+      .table-wrap {
+        overflow-x: auto;
+        border: 1px solid var(--admin-line);
+        border-radius: var(--admin-radius);
+        background: var(--admin-surface);
+      }
+      table {
+        width: 100%;
+        min-width: 860px;
+        border-collapse: collapse;
+        font-size: 13px;
+      }
+      th {
+        height: 38px;
+        padding: 0 12px;
+        border-bottom: 1px solid var(--admin-line);
+        background: var(--admin-surface-soft);
+        color: var(--admin-muted);
+        font-size: 11px;
+        font-weight: 760;
+        text-align: left;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      td {
+        height: 46px;
+        padding: 7px 12px;
+        border-bottom: 1px solid var(--admin-line);
+        vertical-align: middle;
+      }
+      tr:last-child td {
+        border-bottom: 0;
+      }
+      .subtle {
+        display: block;
+        margin-top: 2px;
+        color: var(--admin-muted);
+        font-size: 12px;
+      }
+      .money,
+      .action {
+        text-align: right;
+      }
+      .check-row {
+        display: grid;
+        grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr) auto;
+        gap: 10px;
+        align-items: center;
+        padding: 10px 0;
+        border-bottom: 1px solid var(--admin-line);
+      }
+      .check-row:last-child {
+        border-bottom: 0;
+      }
+      .check-row.blocking {
+        margin: 0 -8px;
+        padding: 10px 8px;
+        border: 1px solid #f1c883;
+        border-radius: var(--admin-radius-sm);
+        background: #fff8ec;
+      }
+      .check-row b {
+        font-size: 13px;
+      }
+      .check-row p {
+        margin: 2px 0 0;
+        color: var(--admin-muted);
+        font-size: 12px;
+      }
+      .type-sample h3 {
+        margin: 0 0 8px;
+        font-size: 25px;
+        line-height: 1.12;
+      }
+      .type-sample p {
+        margin: 0;
+        color: var(--admin-muted);
+      }
+      .note {
+        margin: 0;
+        color: var(--admin-muted);
+        font-size: 13px;
+      }
+      @media (max-width: 1120px) {
+        .shell {
+          grid-template-columns: 76px minmax(0, 1fr);
+        }
+        .brand b,
+        .brand span,
+        .store,
+        .nav span,
+        .nav-subnav,
+        .health {
+          display: none;
+        }
+        .sidebar {
+          align-items: center;
+          padding-inline: 12px;
+        }
+        .nav a {
+          justify-content: center;
+          padding: 0;
+        }
+        .grid.cols-4,
+        .grid.cols-3,
+        .order-assist-grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+      @media (max-width: 760px) {
+        html,
+        body {
+          height: auto;
+          min-height: 100%;
+          overflow-x: hidden;
+          overflow-y: auto;
+        }
+        .shell {
+          grid-template-columns: 1fr;
+          height: auto;
+          min-height: 100vh;
+          overflow: visible;
+        }
+        .main {
+          height: auto;
+          min-height: 0;
+          overflow: visible;
+        }
+        .sidebar {
+          position: static;
+          height: auto;
+          overflow: visible;
+          flex-direction: row;
+          align-items: center;
+        }
+        .nav {
+          display: none;
+        }
+        .mobile-tabbar {
+          position: sticky;
+          top: 0;
+          z-index: 29;
+          display: flex;
+          padding-inline: 16px;
+          background: rgba(245, 247, 246, 0.94);
+          backdrop-filter: blur(16px);
+        }
+        .topbar,
+        .ship-gate,
+        .risk-alert,
+        .section-title,
+        .panel-head {
+          align-items: flex-start;
+          flex-direction: column;
+        }
+        .content,
+        .topbar {
+          padding-inline: 16px;
+        }
+        .floating-ask {
+          right: 16px;
+          bottom: 16px;
+        }
+        [data-admin-panel],
+        [data-admin-guide-section] {
+          scroll-margin-top: 16px;
+        }
+        .actions {
+          width: 100%;
+        }
+        .actions .btn {
+          flex: 1 1 150px;
+        }
+        .grid.cols-4,
+        .grid.cols-3,
+        .grid.cols-2,
+        .order-assist-grid {
+          grid-template-columns: 1fr;
+        }
+        .check-row {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </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-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>
+    </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="#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="#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>
+      </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="#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="#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-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-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} />
+          <AdminCustomersTab envelope={tenantEnvelope} />
+          <AdminFulfillmentTab envelope={tenantEnvelope} />
+          <AdminReportingTab envelope={tenantEnvelope} />
+          <AdminAIWorkflowsTab 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 is:inline nonce={cspNonce}>
+      (() => {
+        const tabIds = ["orders", "products", "customers", "fulfillment", "reporting", "ai-workflows", "settings"];
+        const tabSet = new Set(tabIds);
+        const tabHashPattern = new RegExp(`^#(${tabIds.join("|")})$`);
+        const canViewInternalGuide = document.documentElement.dataset.internalAdminGuide === "true";
+        const defaultTab = canViewInternalGuide ? "orders" : "settings";
+        const askContexts = {
+          orders: "Orders",
+          products: "Products",
+          customers: "Customers",
+          fulfillment: "Fulfillment",
+          reporting: "Reporting",
+          "ai-workflows": "AI Workflows",
+          settings: "Settings",
+        };
+        const panelIdFromHash = () => {
+          const hash = window.location.hash.slice(1);
+          if (!hash) return defaultTab;
+          if (tabSet.has(hash)) return hash;
+          if (!canViewInternalGuide) return defaultTab;
+          const target = hash ? document.getElementById(hash) : null;
+          const panel = target?.closest?.("[data-admin-panel]");
+          if (panel?.id && tabSet.has(panel.id)) return panel.id;
+          return null;
+        };
+        const setActiveTab = (id) => {
+          if (!tabSet.has(id)) return;
+          document.documentElement.dataset.adminMode = "work-area";
+          document.documentElement.dataset.adminTab = id;
+          setAskContext(id);
+          document.querySelectorAll("[data-admin-panel]").forEach((panel) => {
+            const active = panel.id === id;
+            panel.hidden = !active;
+            panel.setAttribute("aria-hidden", active ? "false" : "true");
+          });
+          document.querySelectorAll("[data-admin-tab-link]").forEach((link) => {
+            const active = link.hash === `#${id}`;
+            link.classList.toggle("active", active);
+            if (link.getAttribute("role") === "tab") {
+              link.setAttribute("aria-selected", active ? "true" : "false");
+              link.tabIndex = active ? 0 : -1;
+            }
+          });
+        };
+        const setGuideMode = () => {
+          if (!canViewInternalGuide) {
+            setActiveTab(defaultTab);
+            return;
+          }
+          document.documentElement.dataset.adminMode = "guide";
+          setAskContext(defaultTab);
+          document.querySelectorAll("[data-admin-panel]").forEach((panel) => {
+            panel.hidden = true;
+            panel.setAttribute("aria-hidden", "true");
+          });
+          document.querySelectorAll("[data-admin-tab-link]").forEach((link) => {
+            link.classList.remove("active");
+            if (link.getAttribute("role") === "tab") {
+              link.setAttribute("aria-selected", "false");
+              link.tabIndex = 0;
+            }
+          });
+        };
+        // Ask context envelope (baseline §Horizontal AI Concepts / Ask,
+        // ai-evidence-substrate item a — mirrors lib/admin/ai/askEnvelope.ts's
+        // buildAskEnvelope; duplicated here in plain JS because is:inline
+        // scripts cannot import modules). No chat backend yet: this is
+        // dev-inspectable only (window.__toTAdminAsk + a CustomEvent), never
+        // sent over the network.
+        const buildAskEnvelopePlain = (id) => {
+          const root = document.documentElement.dataset;
+          const isStaff = root.adminIsStaff === "true";
+          const panel = document.getElementById(id);
+          const selectedRecordId = panel?.querySelector("[data-admin-selected-id]")?.dataset.adminSelectedId || null;
+          return {
+            tenant: {
+              adminAppTenant: root.adminAppTenant ?? "",
+              targetTenant: root.adminTargetTenant ?? "",
+              operator: root.adminOperator || null,
+            },
+            activeTab: id,
+            selectedRecordId,
+            role: isStaff ? "internal_staff" : "merchant_operator",
+            permissions: isStaff ? ["internal_admin", "cross_tenant_read"] : ["merchant_admin"],
+            filters: {},
+            evidenceContext: [],
+          };
+        };
+        const setAskContext = (id) => {
+          const label = askContexts[id] ?? "Storefront";
+          const askButton = document.querySelector("[data-admin-ask]");
+          const askContext = document.querySelector("[data-admin-ask-context]");
+          if (askContext) askContext.textContent = label;
+          if (askButton) {
+            askButton.setAttribute("aria-label", `Ask about ${label}`);
+            askButton.setAttribute("title", `Ask about ${label}`);
+            askButton.dataset.askScope = id;
+          }
+          window.__toTAdminAsk = buildAskEnvelopePlain(id);
+        };
+        const scrollWorkspaceToTop = () => {
+          const scroller = document.querySelector(".main");
+          const reset = () => {
+            if (scroller) {
+              scroller.scrollTo({ top: 0, left: 0 });
+              return;
+            }
+            window.scrollTo({ top: 0, left: 0 });
+          };
+          reset();
+          requestAnimationFrame(reset);
+          setTimeout(reset, 0);
+        };
+        const scrollToHashTarget = (panelId) => {
+          const hash = window.location.hash.slice(1);
+          const target = hash ? document.getElementById(hash) : null;
+          if (!target || tabSet.has(hash) || target.id === panelId) {
+            scrollWorkspaceToTop();
+            return;
+          }
+          target?.scrollIntoView({ block: "start" });
+        };
+        const activateFromHash = ({ scroll = false } = {}) => {
+          const panelId = panelIdFromHash();
+          if (panelId) {
+            setActiveTab(panelId);
+            const hash = window.location.hash.slice(1);
+            if (!canViewInternalGuide && (!hash || !tabSet.has(hash))) {
+              history.replaceState(null, "", "#settings");
+            }
+            if (scroll) requestAnimationFrame(() => scrollToHashTarget(panelId));
+            return;
+          }
+          setGuideMode();
+          if (scroll) {
+            const hash = window.location.hash.slice(1);
+            requestAnimationFrame(() => document.getElementById(hash)?.scrollIntoView({ block: "start" }));
+          }
+        };
+        document.querySelector("[data-admin-tenant-picker-select]")?.addEventListener("change", (event) => {
+          const params = new URLSearchParams(window.location.search);
+          params.set("asTenant", event.target.value);
+          window.location.assign(`${window.location.pathname}?${params}${window.location.hash}`);
+        });
+        // Emit the Ask envelope on open. No chat backend yet — dev-inspectable
+        // only via window.__toTAdminAsk (already kept current by setAskContext)
+        // and this "tot:admin-ask" CustomEvent.
+        document.querySelector("[data-admin-ask]")?.addEventListener("click", () => {
+          const activeTab = document.documentElement.dataset.adminTab ?? defaultTab;
+          const envelope = buildAskEnvelopePlain(activeTab);
+          window.__toTAdminAsk = envelope;
+          document.dispatchEvent(new CustomEvent("tot:admin-ask", { detail: envelope }));
+          if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
+            console.debug("[admin:ask]", envelope);
+          }
+        });
+        document.addEventListener("click", (event) => {
+          const target = event.target instanceof Element ? event.target : event.target?.parentElement;
+          const link = target?.closest("a[href^='#']");
+          if (!link || !tabHashPattern.test(link.hash)) return;
+          event.preventDefault();
+          const id = link.hash.slice(1);
+          setActiveTab(id);
+          history.pushState(null, "", link.hash);
+          scrollWorkspaceToTop();
+        });
+        document.addEventListener("keydown", (event) => {
+          const target = event.target instanceof Element ? event.target : null;
+          const currentTab = target?.closest("[role='tab'][data-admin-tab-link]");
+          if (!currentTab) return;
+          // Filter to visible tabs only: the mobile tab bar and the internal
+          // Admin Tab Map can both be present in the DOM at once (one hidden
+          // via CSS depending on viewport/viewer), and this selector matches
+          // role="tab" elements in either — without this filter, arrow/home/
+          // end navigation could walk into a display:none tablist whose
+          // .focus() is a silent no-op.
+          const tabs = Array.from(document.querySelectorAll("[role='tab'][data-admin-tab-link]")).filter(
+            (el) => el.offsetParent !== null,
+          );
+          const currentIndex = tabs.indexOf(currentTab);
+          let nextIndex = currentIndex;
+          if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
+          if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+          if (event.key === "Home") nextIndex = 0;
+          if (event.key === "End") nextIndex = tabs.length - 1;
+          if (nextIndex === currentIndex) return;
+          event.preventDefault();
+          tabs[nextIndex].focus();
+          tabs[nextIndex].click();
+        });
+        window.addEventListener("hashchange", () => activateFromHash({ scroll: true }));
+        activateFromHash({ scroll: Boolean(window.location.hash) });
+      })();
+    </script>
+  </body>
+</html>