feat(operator): design system port + persistent shell (O.4)

Operator portal now wears its real chrome instead of placeholder spans.
Sidebar + topbar + page header all rendered against the carbon palette
from tokens.css.

Components ported from the source design (operator-app.jsx,
platform-ui.jsx, operator-screens.jsx) as Vue 3 SFCs in
apps/operator/components/:

  Foundation: NodeMark (copied from portal), UiIcon (expanded to 31 icons
  covering sidebar/topbar/sort/arrows)

  Primitives: Card (3 surface variants), UiButton (primary / secondary /
  ghost / dark / danger × sm / md / lg), DataTable (header + rows),
  Badge (7 tones), Avatar (deterministic palette by name hash), Mono,
  Eyebrow, StatusDot, PageHeader (with actions slot)

  Shell: OpSidebar (collapsible 232<->56px, 12 nav items in 4 sections,
  active-row highlight from route, badge slot, brand + user footer);
  OpTopbar (env badge with prod/staging/dev variants, palette trigger
  stub for the ⌘K work in O.8, on-call pill, bell, avatar)

Layouts: layouts/default.vue wires sidebar + topbar + slot; layouts/blank.vue
is used by the login page (definePageMeta layout:'blank'). app.vue now
wraps NuxtPage in NuxtLayout (the missing piece — without it Nuxt warns
"Your project has layouts but the <NuxtLayout /> component has not been
used" and renders nothing chrome-wise).

Composable composables/useSidebar.ts holds the collapsed state shared
between OpSidebar's toggle button and layouts/default.vue's ⌘[ keyboard
shortcut.

Verified in the browser:
  - Sidebar renders all 12 nav links with section dividers, env badge shows
    PROD, PageHeader resolves to the user's display name from
    useOidcAuth().user
  - Collapse toggle flips sidebar width 232↔56; nav rows become icon-only
  - Smoke test on the placeholder home still returns 409 for the seeded
    test-partner (token forwarding survives the layout refactor)

Gotcha documented in the plan: Vite 7.3 added a strict
server.allowedHosts check that returns plaintext 403 for any host header
that isn't the dev origin. The customer portal pre-dates this Vite
version; operator needs allowedHosts: ['operator.dezky.local'] in
nuxt.config.ts under vite.server.

Pages/index.vue replaces the bare HTML placeholder from O.3 with the
new PageHeader + Card primitives — same smoke-test functionality, much
better visual fidelity.

Real screen content (Tenants, Partners, Infrastructure, etc.) lands in
O.5+. This commit is the chrome, the smoke test, and the verification
that the design system primitives compose correctly.

apps/operator/pages/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-// O.3 scaffolding home. Confirms login round-trips and exposes a smoke-test
-// button that exercises the operator-only audience gating against
-// platform-api. Real operator UI lands in O.4+.
+// O.4 deliverable: real shell wrapping the placeholder dashboard. The smoke
+// test from O.3 stays so we can keep verifying the audience chain after
+// every restart. Real Overview content lands in O.7.
 
-const { user, logout } = useOidcAuth()
+const { user } = useOidcAuth()
 const smokeResult = ref<string | null>(null)
 const smokeBusy = ref(false)
 
@@ -12,10 +12,12 @@ async function createTestPartner() {
   smokeResult.value = null
   try {
     const res = await $fetch('/api/operator-smoke-test', { method: 'POST' })
-    smokeResult.value = `✓ ${JSON.stringify(res).slice(0, 200)}`
+    smokeResult.value = `200 ${JSON.stringify(res).slice(0, 200)}`
   } catch (err: unknown) {
-    const e = err as { data?: { message?: string }; statusCode?: number }
-    smokeResult.value = `✗ ${e.statusCode}: ${e.data?.message ?? String(err)}`
+    const e = err as { data?: { message?: string; data?: { message?: string } }; statusCode?: number }
+    const code = e.statusCode ?? '?'
+    const msg = e.data?.data?.message ?? e.data?.message ?? String(err)
+    smokeResult.value = `${code} ${msg}`
   } finally {
     smokeBusy.value = false
   }
@@ -23,193 +25,92 @@ async function createTestPartner() {
 </script>
 
 <template>
-  <div class="page">
-    <header class="bar">
-      <div class="brand">
-        <span class="dot" />
-        <span class="name">dezky · ops</span>
-      </div>
-      <div class="me">
-        <span class="email">{{ user?.userInfo?.email || user?.userName }}</span>
-        <button class="logout" @click="logout()">sign out</button>
-      </div>
-    </header>
+  <div>
+    <PageHeader
+      eyebrow="Overview"
+      :title="`Hi, ${user?.userInfo?.name || user?.userName || 'operator'}.`"
+      subtitle="O.4 scaffolding · sidebar + topbar + design tokens wired up. Real dashboard tiles, metrics and incident panel land in O.7."
+    >
+      <template #actions>
+        <UiButton variant="secondary">
+          <template #leading><UiIcon name="external" :size="13" /></template>
+          Docs
+        </UiButton>
+        <UiButton variant="primary">
+          <template #leading><UiIcon name="plus" :size="13" /></template>
+          New tenant
+        </UiButton>
+      </template>
+    </PageHeader>
 
-    <main class="stage">
-      <p class="eyebrow">O.3 scaffolding</p>
-      <h1>Operator portal · placeholder</h1>
-      <p class="lead">
-        You're signed in via the <code>dezky-operator</code> Authentik client. Real screens
-        (Overview, Tenants, Partners, Infrastructure, etc.) land in O.4 once the design system
-        is ported. This page exists to prove the OAuth round-trip works and to smoke-test the
-        operator-only endpoints on platform-api.
-      </p>
-
-      <section class="card">
-        <h2>Smoke test · POST /partners</h2>
-        <p>
-          Calls <code>https://api.dezky.local/partners</code> through a server-side proxy that
-          forwards your access token. With an operator-scoped token this should return 200 +
-          the created partner; with a customer-portal token (try in the other app) it returns 403.
-        </p>
-        <button :disabled="smokeBusy" class="primary" @click="createTestPartner">
-          {{ smokeBusy ? 'Calling…' : 'Create partner "test-partner"' }}
-        </button>
+    <div class="stage">
+      <Card>
+        <div class="row">
+          <div>
+            <h2>Smoke test · POST /partners</h2>
+            <p>
+              Forwards your access token to platform-api. Operator-scoped tokens succeed
+              (200 first time, 409 thereafter). Customer-portal tokens return 403.
+            </p>
+          </div>
+          <UiButton variant="primary" :disabled="smokeBusy" @click="createTestPartner">
+            {{ smokeBusy ? 'Calling…' : 'Create partner' }}
+          </UiButton>
+        </div>
         <pre v-if="smokeResult" class="result">{{ smokeResult }}</pre>
-      </section>
+      </Card>
 
-      <section class="meta">
-        <div class="row"><span class="k">subject</span><span class="v">{{ user?.userName }}</span></div>
-        <div class="row"><span class="k">email</span><span class="v">{{ user?.userInfo?.email }}</span></div>
-        <div class="row"><span class="k">groups</span><span class="v">{{ (user?.userInfo as { groups?: string[] } | undefined)?.groups?.join(', ') || '—' }}</span></div>
-        <div class="row"><span class="k">aud</span><span class="v">dezky-operator (expected)</span></div>
-      </section>
-    </main>
+      <Card>
+        <h2 class="cap">Session</h2>
+        <div class="meta">
+          <div class="kv"><Eyebrow>subject</Eyebrow><Mono>{{ user?.userName }}</Mono></div>
+          <div class="kv"><Eyebrow>email</Eyebrow><Mono>{{ user?.userInfo?.email }}</Mono></div>
+          <div class="kv">
+            <Eyebrow>groups</Eyebrow>
+            <span class="groups">
+              <Badge
+                v-for="g in (user?.userInfo as { groups?: string[] } | undefined)?.groups || []"
+                :key="g"
+                :tone="g === 'dezky-platform-admins' ? 'accent' : 'neutral'"
+              >{{ g }}</Badge>
+            </span>
+          </div>
+          <div class="kv"><Eyebrow>token aud</Eyebrow><Badge tone="invert">dezky-operator</Badge></div>
+        </div>
+      </Card>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.page {
-  min-height: 100vh;
+.stage {
+  padding: 24px 40px 64px 40px;
   display: flex;
   flex-direction: column;
+  gap: 20px;
+  max-width: 1100px;
 }
 
-.bar {
-  padding: 14px 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--border);
-}
+.row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
 
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  background: var(--accent);
-  box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.15);
-}
-
-.me {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.email {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.logout {
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 6px 12px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--text);
-}
-
-.logout:hover {
-  background: rgba(244, 243, 238, 0.04);
-}
-
-.stage {
-  flex: 1;
-  padding: 48px 32px;
-  max-width: 760px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.eyebrow {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  color: var(--text-mute);
-  margin: 0 0 12px 0;
-}
-
-h1 {
-  margin: 0 0 16px 0;
+h2 {
   font-family: var(--font-display);
   font-weight: 600;
-  font-size: 32px;
-  letter-spacing: -0.025em;
-  line-height: 1.1;
-}
-
-.lead {
-  color: var(--text-dim);
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 0 0 32px 0;
-}
-
-code {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  background: rgba(244, 243, 238, 0.06);
-  padding: 1px 6px;
-  border-radius: 3px;
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 20px 22px;
-  margin-bottom: 24px;
-}
-
-.card h2 {
-  font-family: var(--font-display);
-  font-weight: 600;
-  font-size: 16px;
+  font-size: 17px;
   letter-spacing: -0.01em;
-  margin: 0 0 8px 0;
+  margin: 0 0 6px 0;
 }
 
-.card p {
+p {
+  margin: 0;
+  color: var(--text-mute);
   font-size: 13px;
-  color: var(--text-dim);
   line-height: 1.55;
-  margin: 0 0 14px 0;
-}
-
-.primary {
-  height: 36px;
-  padding: 0 16px;
-  background: var(--accent);
-  color: var(--accent-fg);
-  border: none;
-  border-radius: 6px;
-  font-weight: 600;
-  font-size: 12.5px;
-  font-family: inherit;
-  cursor: pointer;
-}
-
-.primary[disabled] {
-  opacity: 0.55;
-  cursor: not-allowed;
+  max-width: 560px;
 }
 
 .result {
-  margin: 14px 0 0 0;
+  margin: 16px 0 0 0;
   padding: 12px;
   background: var(--bg);
   border: 1px solid var(--border);
@@ -221,31 +122,16 @@ code {
   word-break: break-all;
 }
 
-.meta {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 14px 18px;
+.cap {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 17px;
+  letter-spacing: -0.01em;
+  margin: 0 0 14px 0;
 }
 
-.row {
-  display: flex;
-  gap: 12px;
-  padding: 5px 0;
-  font-family: var(--font-mono);
-  font-size: 11px;
-}
-
-.k {
-  color: var(--text-mute);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  width: 70px;
-  flex-shrink: 0;
-}
-
-.v {
-  color: var(--text-dim);
-  word-break: break-all;
-}
+.meta { display: flex; flex-direction: column; gap: 12px; }
+.kv { display: flex; align-items: center; gap: 16px; }
+.kv :first-child { width: 110px; flex-shrink: 0; }
+.groups { display: flex; gap: 6px; flex-wrap: wrap; }
 </style>