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

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

@@ -37,11 +37,13 @@ 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 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`;
@@ -100,10 +102,12 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
     <title>{tenantLabel} Admin</title>
     <script is:inline nonce={cspNonce}>
       (() => {
-        const adminTabs = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "publish", "settings"];
+        const adminTabs = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "blog", "publish", "settings"];
         const canViewInternalGuide = document.documentElement.dataset.internalAdminGuide === "true";
         const defaultTab = canViewInternalGuide ? "orders" : "settings";
-        const hash = window.location.hash.slice(1);
+        // 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";
 
@@ -112,983 +116,13 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
         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="subscriptions"] #subscriptions,
-      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="publish"] #publish,
-      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-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>
@@ -1154,6 +188,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <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="#settings" data-admin-tab-link><svg><use href="#i-gear"></use></svg><span>Settings</span></a>
         </nav>
@@ -1163,6 +198,44 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <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>
+
+        <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">
@@ -1181,6 +254,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <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="#settings" role="tab" aria-controls="settings" aria-selected="false" data-admin-tab-link>Settings</a>
         </div>
@@ -1229,6 +303,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
                   <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-settings" class="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false" data-admin-tab-link>Settings</a>
                 </div>
@@ -1355,6 +430,7 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
           <AdminFulfillmentTab envelope={tenantEnvelope} />
           <AdminReportingTab envelope={tenantEnvelope} />
           <AdminAIWorkflowsTab envelope={tenantEnvelope} />
+          <AdminBlogTab envelope={tenantEnvelope} />
           <AdminPublishTab envelope={tenantEnvelope} />
           <AdminSettingsTab envelope={tenantEnvelope} />
 
@@ -1470,239 +546,9 @@ const { envelope: tenantEnvelope, isStaff, pickerTenants, deniedTarget } = admin
       </span>
     </button>
 
-    <script is:inline nonce={cspNonce}>
-      (() => {
-        const tabIds = ["orders", "products", "subscriptions", "customers", "fulfillment", "reporting", "ai-workflows", "publish", "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",
-          subscriptions: "Subscriptions",
-          customers: "Customers",
-          fulfillment: "Fulfillment",
-          reporting: "Reporting",
-          "ai-workflows": "AI Workflows",
-          publish: "Publish",
-          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>
+      import { initAdminShell } from "@/lib/admin/adminShell";
+      initAdminShell();
     </script>
   </body>
 </html>