From 4e2d060cedbcc2fe481ef80ebebca1ab735b7e32 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Thu, 3 Sep 2026 16:27:28 +0900
Subject: [PATCH 1/9] feat(dashboard): apply G2 Barrier Membrane redesign to
 all routes

Redesign Overview, Audit, Policies, and Approvals on top of the existing
components, API client, polling hooks, and routing; no new routes.

- index.css: oklch design tokens (dark primary, light secondary with
  reduced depth), Tailwind @theme bridge, double-bezel Panel, mono verdict
  pills with glyphs (checkmark ALLOWED/APPROVED, pause PAUSED, cross
  DENIED/REJECTED), cyan primary Approve + red-outline Deny actions,
  global :focus-visible, reduced-motion-aware reveal
- App shell: lowercase mono "honmoon" wordmark + cyan mark, right command
  capsule (nav, live pending badge, gateway reachability derived from the
  approvals poll, account area)
- Overview: status hero derived from live data, pending-approval strip
  with shared per-id busy actions, KPI tiles, latest 8 decisions,
  decision mix; API errors stay explicit and never look like a healthy
  empty state
- Audit: same Time/Decision/Request/Rule columns; loading/error/empty/
  populated states; request truncation keeps the full value in title
- Policies: keeps Prism + react-simple-code-editor (and the CJS unwrap
  workaround), adds gutter line numbers and G2 Prism token colours
  (prism-tomorrow theme dropped), local-only edits, "Reset to active"
  only when dirty, Phase 5 hot-reload note; no save/deploy actions
- Approvals: useApprovalActions hook (Set-based per-id busy) shared with
  Overview; approve/reject + refresh, empty/error states preserved
- Nav label "Audit Log" renamed to "Audit"

Verified: typecheck, build, build:demo, and eslint all pass; manual
dark/light browser verification of all states.
---
 apps/dashboard/AGENTS.md                      |   5 +-
 apps/dashboard/src/App.tsx                    | 103 +++--
 .../src/components/ApprovalActions.tsx        |  54 +++
 apps/dashboard/src/components/Approvals.tsx   | 199 +++++-----
 apps/dashboard/src/components/AuditLog.tsx    | 131 ++++---
 .../src/components/DecisionBadge.tsx          |  25 +-
 apps/dashboard/src/components/Overview.tsx    | 328 +++++++++++++---
 apps/dashboard/src/components/PolicyView.tsx  | 168 +++++---
 apps/dashboard/src/components/ui.tsx          |  94 +++++
 apps/dashboard/src/hooks.ts                   |  33 ++
 apps/dashboard/src/index.css                  | 367 ++++++++++++++++++
 11 files changed, 1225 insertions(+), 282 deletions(-)
 create mode 100644 apps/dashboard/src/components/ApprovalActions.tsx
 create mode 100644 apps/dashboard/src/components/ui.tsx

diff --git a/apps/dashboard/AGENTS.md b/apps/dashboard/AGENTS.md
index c25a04c..64895b9 100644
--- a/apps/dashboard/AGENTS.md
+++ b/apps/dashboard/AGENTS.md
@@ -39,8 +39,9 @@ rust-embed handler needs a rewrite rule). Unknown hashes fall back to Overview:
 | Path | What |
 |------|------|
 | `src/main.tsx` / `src/App.tsx` | Entry point; hash router + shell over the four views. |
-| `src/components/` | `Overview`, `AuditLog`, `PolicyView`, `Approvals`, `DecisionBadge`. |
-| `src/api.ts` / `src/hooks.ts` / `src/format.ts` | Typed management-API client, `usePolling`, formatters. |
+| `src/components/` | `Overview`, `AuditLog`, `PolicyView`, `Approvals`, plus shared pieces: `DecisionBadge` (glyph + mono verdict pill), `ApprovalActions` (Deny / Approve pair), `ui` (`Panel` double bezel, `PageHead`, `ErrorNote`, `PanelState`). |
+| `src/api.ts` / `src/hooks.ts` / `src/format.ts` | Typed management-API client, `usePolling` + `useApprovalActions` (per-id busy set), formatters. |
+| `src/index.css` | G2 "Barrier Membrane" tokens (oklch, dark primary / light secondary), Tailwind `@theme` bridge, and the few component classes (`bezel`/`glass`, `verdict-*`, `action-*`, Prism YAML token colors). |
 | `demo/demo-mode.js` | Demo shim: patches `window.fetch` with in-memory fixtures, runs a scripted timeline, mounts the "demo" badge. Plain browser JS, no bundler. |
 | `demo/build.ts` | Copies `dist/` → `dist-demo/` and injects the shim's `<script>` tag. Run by `build:demo`. |
 | `vite.config.ts` | Vite + Tailwind; in dev, proxies `/api` → `127.0.0.1:8444` (a running `honmoon gateway`). |
diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index f140ff3..48acae8 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -8,7 +8,7 @@ import { usePolling } from './hooks'
 
 const NAV = [
   { slug: '/', label: 'Overview' },
-  { slug: '/audit', label: 'Audit Log' },
+  { slug: '/audit', label: 'Audit' },
   { slug: '/policies', label: 'Policies' },
   { slug: '/approvals', label: 'Approvals' },
 ] as const
@@ -34,55 +34,96 @@ function subscribe(onChange: () => void): () => void {
 function App() {
   // `currentSlug` returns a primitive, so the snapshot is stable by value.
   const slug = useSyncExternalStore(subscribe, currentSlug)
-  // A live pending count drives the sidebar badge across every view.
-  const { data: approvals } = usePolling(getApprovals, 1500)
+  // A live pending count drives the nav badge across every view; the same
+  // poll tells the capsule whether the management API is answering at all.
+  const { data: approvals, error } = usePolling(getApprovals, 1500)
   const pending = approvals?.length ?? 0
 
   return (
-    <div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100">
-      <header className="border-b border-zinc-200 px-6 py-4 dark:border-zinc-800">
-        <h1 className="text-lg font-semibold">
-          Honmoon
-          {' '}
-          <span className="text-zinc-400">dashboard</span>
-        </h1>
-      </header>
+    <div className="min-h-screen bg-bg text-fg">
+      <header className="relative z-10 h-[72px] bg-[color-mix(in_oklch,var(--bg)_88%,transparent)] px-10 shadow-[inset_0_-1px_0_var(--hair)] max-md:px-6">
+        <div className="mx-auto flex h-full max-w-[1440px] items-center">
+          <a
+            href="#/"
+            className="flex min-h-11 items-center gap-2.5 rounded-md font-mono text-base font-semibold tracking-[-0.02em] text-fg no-underline"
+          >
+            <span
+              aria-hidden="true"
+              className="relative size-[23px] rounded-[7px] bg-accent shadow-[0_0_18px_var(--accent-glow),inset_0_1px_1px_oklch(100%_0_0/0.65)] after:absolute after:inset-[7px] after:rounded-sm after:bg-bg after:opacity-75 after:content-['']"
+            />
+            honmoon
+          </a>
 
-      <div className="flex">
-        <nav className="w-48 shrink-0 border-r border-zinc-200 p-4 dark:border-zinc-800">
-          <ul className="space-y-1 text-sm">
-            {NAV.map(item => (
-              <li key={item.slug}>
+          <div className="ml-auto flex items-center rounded-full bg-[var(--surface-glass)] p-1 shadow-[inset_0_1px_0_var(--hair),inset_0_0_0_1px_var(--hair),var(--shadow)]">
+            <nav aria-label="Dashboard pages" className="flex gap-0.5">
+              {NAV.map(item => (
                 <a
+                  key={item.slug}
                   href={`#${item.slug}`}
                   aria-current={slug === item.slug ? 'page' : undefined}
-                  className={`flex w-full items-center justify-between rounded px-3 py-2 text-left ${
+                  className={`flex min-h-11 items-center rounded-full px-[18px] text-xs font-medium tracking-[0.02em] no-underline transition-[background-color,color,transform] duration-500 ease-[var(--ease)] hover:-translate-y-px hover:text-fg motion-reduce:transition-none max-md:px-3 ${
                     slug === item.slug
-                      ? 'bg-zinc-200 font-medium dark:bg-zinc-800'
-                      : 'hover:bg-zinc-100 dark:hover:bg-zinc-900'
+                      ? 'bg-accent-soft text-fg shadow-[inset_0_0_0_1px_var(--accent-line)]'
+                      : 'text-muted'
                   }`}
                 >
                   {item.label}
                   {item.slug === '/approvals' && pending > 0 && (
-                    <span className="ml-2 rounded-full bg-amber-500 px-1.5 text-xs font-semibold text-white">
+                    <span className="count-badge">
                       {pending}
+                      <span className="sr-only"> pending</span>
                     </span>
                   )}
                 </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
+              ))}
+            </nav>
+
+            <GatewayState reachable={error === null} settled={approvals !== null || error !== null} />
 
-        <main className="flex-1 p-6">
-          {slug === '/' && <Overview />}
-          {slug === '/audit' && <AuditLog />}
-          {slug === '/policies' && <PolicyView />}
-          {slug === '/approvals' && <Approvals />}
-        </main>
-      </div>
+            <span
+              role="img"
+              aria-label="Account"
+              className="mr-0.5 grid size-9 place-items-center rounded-full bg-[var(--surface-soft)] text-muted shadow-[inset_0_0_0_1px_var(--hair)]"
+            >
+              <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <circle cx="8" cy="5.5" r="3" stroke="currentColor" strokeWidth="1.4" />
+                <path d="M2.5 14c.6-3 3-4.5 5.5-4.5s4.9 1.5 5.5 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </header>
+
+      <main>
+        {slug === '/' && <Overview />}
+        {slug === '/audit' && <AuditLog />}
+        {slug === '/policies' && <PolicyView />}
+        {slug === '/approvals' && <Approvals />}
+      </main>
     </div>
   )
 }
 
+/**
+ * Live management-API reachability, derived from the shared approvals poll.
+ * It says whether the API answers — nothing about what the gateway enforces.
+ */
+function GatewayState({ reachable, settled }: { reachable: boolean, settled: boolean }) {
+  const label = !settled ? 'Connecting' : reachable ? 'Gateway live' : 'Gateway unreachable'
+  const dot = !settled
+    ? 'bg-muted'
+    : reachable
+      ? 'bg-accent shadow-[0_0_11px_var(--accent-glow)]'
+      : 'bg-deny'
+  return (
+    <span
+      role="status"
+      className="ml-1.5 flex min-h-11 items-center gap-2 px-3 font-mono text-[9px] font-medium tracking-[0.1em] text-muted uppercase max-md:hidden"
+    >
+      <i aria-hidden="true" className={`size-[7px] rounded-full ${dot}`} />
+      {label}
+    </span>
+  )
+}
+
 export default App
diff --git a/apps/dashboard/src/components/ApprovalActions.tsx b/apps/dashboard/src/components/ApprovalActions.tsx
new file mode 100644
index 0000000..385204d
--- /dev/null
+++ b/apps/dashboard/src/components/ApprovalActions.tsx
@@ -0,0 +1,54 @@
+/**
+ * Deny / Approve pair for one held request. Approve is the only solid cyan
+ * action in the group; Deny is a red-tinted outline. Both lock while that
+ * approval's own busy flag is set, so sibling rows stay independent.
+ */
+export function ApprovalActions({
+  summary,
+  busy,
+  onApprove,
+  onReject,
+}: {
+  /** Names the request for assistive technology, e.g. "Approve DROP TABLE…". */
+  summary: string
+  busy: boolean
+  onApprove: () => void
+  onReject: () => void
+}) {
+  return (
+    <div className="flex shrink-0 gap-2" aria-busy={busy || undefined}>
+      <button
+        type="button"
+        className="action action-deny"
+        disabled={busy}
+        onClick={onReject}
+        aria-label={`Deny: ${summary}`}
+      >
+        {busy
+          ? 'Resolving…'
+          : (
+              <>
+                <span aria-hidden="true">✕</span>
+                Deny
+              </>
+            )}
+      </button>
+      <button
+        type="button"
+        className="action action-approve"
+        disabled={busy}
+        onClick={onApprove}
+        aria-label={`Approve: ${summary}`}
+      >
+        {busy
+          ? 'Resolving…'
+          : (
+              <>
+                <span aria-hidden="true">✓</span>
+                Approve
+              </>
+            )}
+      </button>
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/components/Approvals.tsx b/apps/dashboard/src/components/Approvals.tsx
index 358cdca..e6b4dfd 100644
--- a/apps/dashboard/src/components/Approvals.tsx
+++ b/apps/dashboard/src/components/Approvals.tsx
@@ -1,71 +1,74 @@
 import type { PendingApproval } from '@honmoon/policy'
-import { useState } from 'react'
-import { approve, getApprovals, reject } from '../api'
+import { getApprovals } from '../api'
 import { formatTime } from '../format'
-import { usePolling } from '../hooks'
+import { useApprovalActions, usePolling } from '../hooks'
+import { ApprovalActions } from './ApprovalActions'
+import { ErrorNote, PageHead, Panel, PanelState } from './ui'
 
 export function Approvals() {
-  const { data, error, refresh } = usePolling(getApprovals, 1500)
-  // Track in-flight ids in a Set so concurrent actions don't clear each
-  // other's busy state (a shared single id let a later action re-enable a card
-  // while an earlier one was still pending).
-  const [busyIds, setBusyIds] = useState(() => new Set<number>())
-  const [actionError, setActionError] = useState<string | null>(null)
-
-  async function resolve(id: number, action: 'approve' | 'reject') {
-    setBusyIds(prev => new Set(prev).add(id))
-    setActionError(null)
-    try {
-      await (action === 'approve' ? approve(id) : reject(id))
-      refresh()
-    }
-    catch (e: unknown) {
-      setActionError(e instanceof Error ? e.message : String(e))
-    }
-    finally {
-      setBusyIds((prev) => {
-        const next = new Set(prev)
-        next.delete(id)
-        return next
-      })
-    }
-  }
+  const { data, error, loading, refresh } = usePolling(getApprovals, 1500)
+  const { busyIds, actionError, resolve } = useApprovalActions(refresh)
 
   const pending = data ?? []
-  const message = actionError ?? error
+  const oldest = pending.reduce<PendingApproval | null>(
+    (acc, p) => (acc === null || p.created_at < acc.created_at ? p : acc),
+    null,
+  )
 
   return (
-    <section>
-      <header className="mb-4 flex items-baseline gap-3">
-        <h2 className="text-base font-semibold">Approval queue</h2>
-        <span className="text-sm text-zinc-500">
-          {pending.length}
-          {' '}
-          pending
-        </span>
-      </header>
+    <section className="mx-auto max-w-[1440px] px-10 pt-[30px] pb-11 max-md:px-6">
+      <PageHead
+        eyebrow="Human decision boundary"
+        title="Approval queue"
+        description="Requests held by a pause verdict until a person resolves them."
+        meta={data ? `${pending.length} pending · polling 1.5s` : 'polling 1.5s'}
+      />
+
+      {actionError && <ErrorNote message={actionError} />}
+      {error && <ErrorNote message={error} />}
 
-      {message && <ErrorNote message={message} />}
+      <div className="mb-3.5 grid grid-cols-2 gap-3.5">
+        <Panel glassClassName="px-[18px] py-4">
+          <span className="eyebrow tracking-[0.1em]">Waiting now</span>
+          <strong className="mt-1.5 block font-display text-[23px] font-semibold tabular-nums">
+            {data ? pending.length : '—'}
+          </strong>
+        </Panel>
+        <Panel glassClassName="px-[18px] py-4">
+          <span className="eyebrow tracking-[0.1em]">Oldest held since</span>
+          <strong className="mt-1.5 block font-mono text-[23px] font-semibold tabular-nums">
+            {oldest ? formatTime(oldest.created_at) : '—'}
+          </strong>
+        </Panel>
+      </div>
 
-      {pending.length === 0
+      {data === null
         ? (
-            <p className="text-sm text-zinc-500">
-              No requests are waiting for approval.
-            </p>
+            <Panel className="reveal">
+              {loading
+                ? <PanelState glyph="…">Loading…</PanelState>
+                : <PanelState glyph="✕" tone="error">The approval queue could not be loaded.</PanelState>}
+            </Panel>
           )
-        : (
-            <ul className="space-y-3">
-              {pending.map(p => (
-                <ApprovalCard
-                  key={p.id}
-                  approval={p}
-                  busy={busyIds.has(p.id)}
-                  onApprove={() => resolve(p.id, 'approve')}
-                  onReject={() => resolve(p.id, 'reject')}
-                />
-              ))}
-            </ul>
-          )}
+        : pending.length === 0
+          ? (
+              <Panel className="reveal">
+                <PanelState glyph="✓">No requests are waiting for approval.</PanelState>
+              </Panel>
+            )
+          : (
+              <ul className="grid gap-3.5">
+                {pending.map(p => (
+                  <ApprovalCard
+                    key={p.id}
+                    approval={p}
+                    busy={busyIds.has(p.id)}
+                    onApprove={() => resolve(p.id, 'approve')}
+                    onReject={() => resolve(p.id, 'reject')}
+                  />
+                ))}
+              </ul>
+            )}
     </section>
   )
 }
@@ -82,49 +85,59 @@ function ApprovalCard({
   onReject: () => void
 }) {
   return (
-    <li className="flex items-center justify-between gap-4 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900">
-      <div className="min-w-0">
-        <p className="truncate font-medium">{approval.summary}</p>
-        <p className="mt-1 text-xs text-zinc-500">
-          held
-          {' '}
-          {formatTime(approval.created_at)}
-          {approval.rule && (
-            <>
-              {' · rule '}
-              <code className="rounded bg-zinc-100 px-1 dark:bg-zinc-800">
-                {approval.rule}
-              </code>
-            </>
-          )}
-        </p>
-      </div>
-      <div className="flex shrink-0 gap-2">
-        <button
-          type="button"
-          disabled={busy}
-          onClick={onReject}
-          className="rounded border border-rose-300 px-3 py-1.5 text-sm font-medium text-rose-700 hover:bg-rose-50 disabled:opacity-50 dark:border-rose-800 dark:text-rose-300 dark:hover:bg-rose-950"
+    <li className="bezel reveal">
+      <div className="glass grid min-h-28 grid-cols-[44px_minmax(0,1fr)_auto] items-center gap-4 p-[17px] max-md:grid-cols-[44px_minmax(0,1fr)]">
+        <span
+          aria-hidden="true"
+          className="grid size-11 place-items-center rounded-[14px] bg-warn-soft font-mono text-[15px] font-semibold text-warn-ink"
         >
-          Deny
-        </button>
-        <button
-          type="button"
-          disabled={busy}
-          onClick={onApprove}
-          className="rounded bg-emerald-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
-        >
-          Approve
-        </button>
+          ‖
+        </span>
+        <div className="min-w-0">
+          <h2 className="truncate text-sm font-semibold" title={approval.summary}>{approval.summary}</h2>
+          <p className="mt-1.5 flex flex-wrap items-center gap-x-1.5 font-mono text-[10.5px] text-muted">
+            <span>
+              held
+              {' '}
+              <time dateTime={approval.created_at}>{formatTime(approval.created_at)}</time>
+            </span>
+            {(approval.endpoint ?? approval.domain) && (
+              <>
+                <span aria-hidden="true">·</span>
+                <span>
+                  endpoint
+                  {' '}
+                  <Code>{approval.endpoint ?? approval.domain}</Code>
+                </span>
+              </>
+            )}
+            {approval.rule && (
+              <>
+                <span aria-hidden="true">·</span>
+                <span>
+                  rule
+                  {' '}
+                  <Code>{approval.rule}</Code>
+                </span>
+              </>
+            )}
+          </p>
+        </div>
+        <ApprovalActions
+          summary={approval.summary}
+          busy={busy}
+          onApprove={onApprove}
+          onReject={onReject}
+        />
       </div>
     </li>
   )
 }
 
-function ErrorNote({ message }: { message: string }) {
+function Code({ children }: { children: string | undefined }) {
   return (
-    <p className="mb-3 rounded border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300">
-      {message}
-    </p>
+    <code className="rounded-[5px] bg-[var(--surface-soft)] px-1.5 py-0.5 text-[9.5px] font-medium text-fg">
+      {children}
+    </code>
   )
 }
diff --git a/apps/dashboard/src/components/AuditLog.tsx b/apps/dashboard/src/components/AuditLog.tsx
index 5904604..8676eed 100644
--- a/apps/dashboard/src/components/AuditLog.tsx
+++ b/apps/dashboard/src/components/AuditLog.tsx
@@ -2,67 +2,92 @@ import { getAudit } from '../api'
 import { describeFacts, formatTime } from '../format'
 import { usePolling } from '../hooks'
 import { DecisionBadge } from './DecisionBadge'
+import { ErrorNote, PageHead, Panel, PanelState } from './ui'
 
 export function AuditLog() {
   const { data, error, loading } = usePolling(getAudit, 2000)
   const events = data ?? []
 
   return (
-    <section>
-      <header className="mb-4 flex items-baseline gap-3">
-        <h2 className="text-base font-semibold">Audit log</h2>
-        <span className="text-sm text-zinc-500">
-          {events.length}
-          {' '}
-          recent events
-        </span>
-      </header>
+    <section className="mx-auto max-w-[1440px] px-10 pt-[30px] pb-11 max-md:px-6">
+      <PageHead
+        eyebrow="Decision trail"
+        title="Audit log"
+        description="Every policy decision recorded by the gateway, newest first."
+        meta={data ? `${events.length} recent events` : undefined}
+      />
 
-      {error && (
-        <p className="mb-3 rounded border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300">
-          {error}
-        </p>
-      )}
+      {error && <ErrorNote message={error} />}
 
-      {loading && events.length === 0
-        ? <p className="text-sm text-zinc-500">Loading…</p>
-        : events.length === 0
-          ? <p className="text-sm text-zinc-500">No decisions recorded yet.</p>
-          : (
-              <div className="overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800">
-                <table className="w-full border-collapse text-sm">
-                  <thead className="bg-zinc-100 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-900">
-                    <tr>
-                      <th className="px-3 py-2 font-medium">Time</th>
-                      <th className="px-3 py-2 font-medium">Decision</th>
-                      <th className="px-3 py-2 font-medium">Request</th>
-                      <th className="px-3 py-2 font-medium">Rule</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {events.map(e => (
-                      <tr
-                        key={e.id}
-                        className="border-t border-zinc-100 dark:border-zinc-800/70"
-                      >
-                        <td className="whitespace-nowrap px-3 py-2 font-mono text-xs text-zinc-500">
-                          {formatTime(e.timestamp)}
-                        </td>
-                        <td className="px-3 py-2">
-                          <DecisionBadge decision={e.decision} />
-                        </td>
-                        <td className="px-3 py-2 font-mono text-xs">
-                          {describeFacts(e.facts)}
-                        </td>
-                        <td className="px-3 py-2 text-xs text-zinc-500">
-                          {e.rule ?? <span className="text-zinc-400">egress</span>}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
+      <Panel className="reveal" glassClassName="overflow-hidden">
+        {data === null
+          ? (
+              loading
+                ? <PanelState glyph="…">Loading…</PanelState>
+                : <PanelState glyph="✕" tone="error">The audit log could not be loaded.</PanelState>
+            )
+          : events.length === 0
+            ? <PanelState glyph="—">No decisions recorded yet.</PanelState>
+            : (
+                <>
+                  <div className="overflow-x-auto">
+                    <table className="w-full border-collapse">
+                      <thead>
+                        <tr className="bg-[var(--surface-soft)] text-left">
+                          <Th>Time</Th>
+                          <Th>Decision</Th>
+                          <Th>Request</Th>
+                          <Th>Rule</Th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {events.map(e => (
+                          <tr
+                            key={e.id}
+                            className="h-[57px] transition-colors duration-500 ease-[var(--ease)] not-first:shadow-[inset_0_1px_0_var(--hair)] hover:bg-[color-mix(in_oklch,var(--surface-soft)_72%,transparent)] motion-reduce:transition-none"
+                          >
+                            <td className="px-[18px] whitespace-nowrap">
+                              <time dateTime={e.timestamp} className="font-mono text-[10.5px] text-dim">
+                                {formatTime(e.timestamp)}
+                              </time>
+                            </td>
+                            <td className="px-[18px]">
+                              <DecisionBadge decision={e.decision} />
+                            </td>
+                            <td className="w-full max-w-0 px-[18px]">
+                              <code
+                                className="block max-w-[680px] truncate font-mono text-[10.5px]"
+                                title={describeFacts(e.facts)}
+                              >
+                                {describeFacts(e.facts)}
+                              </code>
+                            </td>
+                            <td className="px-[18px] font-mono text-[10.5px] whitespace-nowrap text-dim">
+                              {e.rule ?? 'egress'}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  <footer className="flex min-h-[58px] items-center bg-[var(--surface-soft)] px-[18px] text-[10.5px] text-muted">
+                    Newest decisions appear first.
+                    <span className="meta-mono ml-auto text-[9px]">polling · 2s</span>
+                  </footer>
+                </>
+              )}
+      </Panel>
     </section>
   )
 }
+
+function Th({ children }: { children: string }) {
+  return (
+    <th
+      scope="col"
+      className="h-[43px] px-[18px] font-mono text-[9px] font-semibold tracking-[0.1em] text-dim uppercase"
+    >
+      {children}
+    </th>
+  )
+}
diff --git a/apps/dashboard/src/components/DecisionBadge.tsx b/apps/dashboard/src/components/DecisionBadge.tsx
index faf64ef..acea043 100644
--- a/apps/dashboard/src/components/DecisionBadge.tsx
+++ b/apps/dashboard/src/components/DecisionBadge.tsx
@@ -1,19 +1,24 @@
 import type { Decision } from '@honmoon/policy'
 
-const STYLES: Record<Decision, string> = {
-  allowed: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
-  approved: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
-  denied: 'bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-300',
-  rejected: 'bg-rose-100 text-rose-800 dark:bg-rose-950 dark:text-rose-300',
-  paused: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300',
+/**
+ * Serialized decision values, rendered faithfully: `approved` and `rejected`
+ * are the outcomes of a previously `paused` request and stay distinct from
+ * `allowed` / `denied`. The glyph and label carry the meaning; color supports.
+ */
+const LABELS: Record<Decision, { glyph: string, text: string }> = {
+  allowed: { glyph: '✓', text: 'Allowed' },
+  approved: { glyph: '✓', text: 'Approved' },
+  paused: { glyph: '‖', text: 'Paused' },
+  denied: { glyph: '✕', text: 'Denied' },
+  rejected: { glyph: '✕', text: 'Rejected' },
 }
 
 export function DecisionBadge({ decision }: { decision: Decision }) {
+  const { glyph, text } = LABELS[decision]
   return (
-    <span
-      className={`inline-block rounded px-2 py-0.5 text-xs font-medium ${STYLES[decision]}`}
-    >
-      {decision}
+    <span className={`verdict verdict-${decision}`}>
+      <span aria-hidden="true">{glyph}</span>
+      {text}
     </span>
   )
 }
diff --git a/apps/dashboard/src/components/Overview.tsx b/apps/dashboard/src/components/Overview.tsx
index fc1cb33..300eba0 100644
--- a/apps/dashboard/src/components/Overview.tsx
+++ b/apps/dashboard/src/components/Overview.tsx
@@ -1,77 +1,307 @@
-import type { AuditEvent, Decision } from '@honmoon/policy'
+import type { AuditEvent, Decision, PendingApproval } from '@honmoon/policy'
 import { getApprovals, getAudit } from '../api'
 import { describeFacts, formatTime } from '../format'
-import { usePolling } from '../hooks'
+import { useApprovalActions, usePolling } from '../hooks'
+import { ApprovalActions } from './ApprovalActions'
 import { DecisionBadge } from './DecisionBadge'
+import { ErrorNote, Panel, SectionHead } from './ui'
 
-function count(events: AuditEvent[], decision: Decision): number {
-  return events.filter(e => e.decision === decision).length
+function count(events: AuditEvent[], ...decisions: Decision[]): number {
+  return events.filter(e => decisions.includes(e.decision)).length
 }
 
 export function Overview() {
   const { data: audit, error: auditError } = usePolling(getAudit, 2000)
-  const { data: approvals, error: approvalsError } = usePolling(getApprovals, 1500)
+  const { data: approvals, error: approvalsError, refresh } = usePolling(getApprovals, 1500)
+  const { busyIds, actionError, resolve } = useApprovalActions(refresh)
 
   const events = audit ?? []
   const pending = approvals?.length ?? 0
+  const first = approvals?.[0]
   // Surface fetch failures: without this, a down API renders as zeroes and an
   // empty feed, which reads as "nothing happening" rather than "can't reach it".
   const error = auditError ?? approvalsError
+  // Before the first successful audit poll there is nothing to count, so the
+  // tiles show a dash instead of a confident zero.
+  const known = audit !== null
+
+  const allowed = count(events, 'allowed', 'approved')
+  const denied = count(events, 'denied', 'rejected')
+  const paused = count(events, 'paused')
+  const total = events.length
 
   const stats = [
-    { label: 'Pending approvals', value: pending, href: '#/approvals', accent: pending > 0 },
-    { label: 'Allowed', value: count(events, 'allowed') + count(events, 'approved'), href: '#/audit' },
-    { label: 'Denied', value: count(events, 'denied') + count(events, 'rejected'), href: '#/audit' },
-    { label: 'Events recorded', value: events.length, href: '#/audit' },
+    { label: 'Pending approvals', value: approvals ? pending : null, href: '#/approvals', warn: pending > 0 },
+    { label: 'Allowed', value: known ? allowed : null, href: '#/audit' },
+    { label: 'Denied', value: known ? denied : null, href: '#/audit' },
+    { label: 'Events recorded', value: known ? total : null, href: '#/audit' },
   ]
 
+  const status = statusCopy({ error, known, pending, total, allowed, denied })
+
   return (
     <section>
-      <h2 className="mb-4 text-base font-semibold">Overview</h2>
+      <header className="relative overflow-hidden px-10 pt-8 pb-9 max-md:px-6">
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(700px_260px_at_10%_-15%,var(--accent-soft),transparent_68%),radial-gradient(560px_240px_at_91%_12%,oklch(70%_0.08_205/0.08),transparent_72%)]"
+        />
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute right-9 -bottom-[94px] h-40 w-[580px] -rotate-[5deg] rounded-full shadow-[inset_0_1px_0_var(--accent-line),0_-10px_40px_oklch(81%_0.11_185/0.05)]"
+        />
+        <div className="relative mx-auto max-w-[1440px]">
+          <p className="eyebrow">{status.eyebrow}</p>
+          <h1 className="mt-2.5 font-display text-[38px] leading-[1.12] font-semibold tracking-[-0.03em] max-md:text-[30px]">
+            {status.title}
+            {' '}
+            <span className={status.tone === 'error' ? 'text-deny-ink' : 'text-accent-ink [text-shadow:0_0_20px_var(--accent-glow)]'}>
+              {status.highlight}
+            </span>
+            .
+          </h1>
+          <p className="mt-2 text-[13px] text-muted">{status.summary}</p>
+        </div>
+      </header>
+
+      <div className="mx-auto max-w-[1440px] px-10 pb-11 max-md:px-6">
+        {error && (
+          <ErrorNote message={`Can’t reach the management API — ${error}`} />
+        )}
+        {actionError && <ErrorNote message={actionError} />}
+
+        {first && (
+          <ApprovalStrip
+            approval={first}
+            pending={pending}
+            busy={busyIds.has(first.id)}
+            onApprove={() => resolve(first.id, 'approve')}
+            onReject={() => resolve(first.id, 'reject')}
+          />
+        )}
+
+        <div className="reveal mt-3.5 grid grid-cols-4 gap-3.5 max-md:grid-cols-2">
+          {stats.map(s => (
+            <a key={s.label} href={s.href} className="bezel">
+              <div className="glass px-[18px] py-[17px]">
+                <span className="eyebrow tracking-[0.12em]">{s.label}</span>
+                <strong
+                  className={`mt-2 block font-display text-[28px] font-semibold tracking-[-0.025em] tabular-nums ${
+                    s.warn ? 'text-warn-ink' : ''
+                  }`}
+                >
+                  {s.value ?? '—'}
+                </strong>
+              </div>
+            </a>
+          ))}
+        </div>
+
+        <div className="reveal mt-3.5 grid grid-cols-[1.65fr_1fr] gap-3.5 max-lg:grid-cols-1">
+          <Panel>
+            <SectionHead title="Latest decisions" meta="8 most recent" />
+            <LatestDecisions events={events.slice(0, 8)} known={known} error={error} />
+          </Panel>
+
+          <Panel>
+            <SectionHead title="Decision mix" meta="Recorded events" />
+            <DecisionMix allowed={allowed} denied={denied} paused={paused} known={known} />
+          </Panel>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Hero copy is derived from live results and never claims what it can't see. */
+function statusCopy({
+  error,
+  known,
+  pending,
+  total,
+  allowed,
+  denied,
+}: {
+  error: string | null
+  known: boolean
+  pending: number
+  total: number
+  allowed: number
+  denied: number
+}): { eyebrow: string, title: string, highlight: string, summary: string, tone: 'ok' | 'error' } {
+  if (error) {
+    return {
+      eyebrow: 'Management API unavailable',
+      title: 'Gateway status is',
+      highlight: 'unknown',
+      summary: 'Live data could not be refreshed.',
+      tone: 'error',
+    }
+  }
+  if (!known) {
+    return {
+      eyebrow: 'Barrier status',
+      title: 'Connecting to the',
+      highlight: 'gateway',
+      summary: 'Waiting for the first audit poll.',
+      tone: 'ok',
+    }
+  }
+  const summary = `${total} events recorded · ${allowed} allowed · ${denied} denied · ${pending} waiting for you`
+  if (pending > 0) {
+    return {
+      eyebrow: `Barrier status / ${pending} waiting for you`,
+      title: `${pending} ${pending === 1 ? 'request is' : 'requests are'}`,
+      highlight: 'held',
+      summary,
+      tone: 'ok',
+    }
+  }
+  if (total === 0) {
+    return {
+      eyebrow: 'Barrier status / no decisions yet',
+      title: 'No decisions',
+      highlight: 'recorded',
+      summary,
+      tone: 'ok',
+    }
+  }
+  return {
+    eyebrow: 'Barrier status / no requests waiting',
+    title: 'Nothing is waiting',
+    highlight: 'on you',
+    summary,
+    tone: 'ok',
+  }
+}
+
+function ApprovalStrip({
+  approval,
+  pending,
+  busy,
+  onApprove,
+  onReject,
+}: {
+  approval: PendingApproval
+  pending: number
+  busy: boolean
+  onApprove: () => void
+  onReject: () => void
+}) {
+  const meta = [
+    approval.endpoint ?? approval.domain,
+    approval.rule,
+    `held ${formatTime(approval.created_at)}`,
+  ].filter(Boolean).join(' · ')
 
-      {error && (
-        <p className="mb-4 rounded border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300">
-          Can’t reach the management API —
+  return (
+    <Panel className="reveal" glassClassName="flex min-h-[72px] flex-wrap items-center gap-3.5 px-4 py-3">
+      <span
+        aria-hidden="true"
+        className="grid size-10 shrink-0 place-items-center rounded-[13px] bg-warn-soft font-mono text-[15px] font-semibold text-warn-ink"
+      >
+        ‖
+      </span>
+      <div className="min-w-0 flex-1">
+        <strong className="block truncate text-[13px] font-semibold">{approval.summary}</strong>
+        <code className="mt-1 block truncate font-mono text-[10.5px] text-muted">{meta}</code>
+      </div>
+      {pending > 1 && (
+        <a href="#/approvals" className="action action-quiet">
+          {pending - 1}
           {' '}
-          {error}
-        </p>
+          more in queue
+        </a>
       )}
+      <ApprovalActions
+        summary={approval.summary}
+        busy={busy}
+        onApprove={onApprove}
+        onReject={onReject}
+      />
+    </Panel>
+  )
+}
 
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-        {stats.map(s => (
-          <a
-            key={s.label}
-            href={s.href}
-            className={`rounded-lg border p-4 text-left ${
-              s.accent
-                ? 'border-amber-300 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/40'
-                : 'border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900'
-            }`}
-          >
-            <div className="text-2xl font-semibold tabular-nums">{s.value}</div>
-            <div className="mt-1 text-xs text-zinc-500">{s.label}</div>
-          </a>
+function LatestDecisions({
+  events,
+  known,
+  error,
+}: {
+  events: AuditEvent[]
+  known: boolean
+  error: string | null
+}) {
+  if (events.length === 0) {
+    return (
+      <p className="px-5 pb-5 text-xs text-muted">
+        {known ? 'No activity yet.' : error ? 'Decisions could not be loaded.' : 'Loading…'}
+      </p>
+    )
+  }
+  return (
+    <ol className="px-2.5 pb-2.5">
+      {events.map(e => (
+        <li
+          key={e.id}
+          className="grid min-h-12 grid-cols-[minmax(72px,auto)_100px_minmax(0,1fr)_154px] items-center gap-2.5 rounded-xl px-2.5 odd:bg-[var(--surface-soft)] max-md:grid-cols-[minmax(72px,auto)_100px_minmax(0,1fr)]"
+        >
+          <time dateTime={e.timestamp} className="font-mono text-[10px] whitespace-nowrap text-dim">
+            {formatTime(e.timestamp)}
+          </time>
+          <DecisionBadge decision={e.decision} />
+          <code className="truncate font-mono text-[10.5px]" title={describeFacts(e.facts)}>
+            {describeFacts(e.facts)}
+          </code>
+          <span className="truncate font-mono text-[10px] text-dim max-md:hidden">
+            {e.rule ?? 'egress'}
+          </span>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+/** Share of recorded events per outcome; dashes until the audit poll answers. */
+function DecisionMix({
+  allowed,
+  denied,
+  paused,
+  known,
+}: {
+  allowed: number
+  denied: number
+  paused: number
+  known: boolean
+}) {
+  const total = Math.max(allowed + denied + paused, 1)
+  const rows = [
+    { label: 'Allowed + approved', value: allowed, color: 'bg-accent' },
+    { label: 'Denied + rejected', value: denied, color: 'bg-deny' },
+    { label: 'Paused decisions', value: paused, color: 'bg-warn' },
+  ]
+  return (
+    <div className="px-5 pt-1 pb-5">
+      <div
+        role="img"
+        aria-label={known ? rows.map(r => `${r.label}: ${r.value}`).join(', ') : 'Decision mix unknown'}
+        className="flex h-[18px] overflow-hidden rounded-full bg-[var(--surface-soft)]"
+      >
+        {known && rows.map(r => (
+          <i key={r.label} className={`h-full ${r.color}`} style={{ width: `${(r.value / total) * 100}%` }} />
         ))}
       </div>
-
-      <h3 className="mt-8 mb-3 text-sm font-semibold text-zinc-600 dark:text-zinc-400">
-        Latest decisions
-      </h3>
-      {events.length === 0
-        ? <p className="text-sm text-zinc-500">No activity yet.</p>
-        : (
-            <ul className="space-y-1.5">
-              {events.slice(0, 8).map(e => (
-                <li key={e.id} className="flex items-center gap-3 text-sm">
-                  <span className="w-16 shrink-0 font-mono text-xs text-zinc-500">
-                    {formatTime(e.timestamp)}
-                  </span>
-                  <DecisionBadge decision={e.decision} />
-                  <span className="truncate font-mono text-xs">{describeFacts(e.facts)}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-    </section>
+      <ul className="mt-[19px] grid gap-[13px]">
+        {rows.map(r => (
+          <li key={r.label} className="flex items-center text-[11px] text-muted">
+            <i aria-hidden="true" className={`mr-2 size-2 rounded-full ${r.color}`} />
+            {r.label}
+            <b className="ml-auto font-mono text-[11px] font-semibold text-fg tabular-nums">
+              {known ? r.value : '—'}
+            </b>
+          </li>
+        ))}
+      </ul>
+    </div>
   )
 }
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index b683b91..5035a97 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -1,9 +1,10 @@
+import type { Policy } from '@honmoon/policy'
 import Prism from 'prismjs'
 import { useEffect, useState } from 'react'
 import EditorModule from 'react-simple-code-editor'
 import { getPolicy } from '../api'
+import { ErrorNote, PageHead, Panel, PanelState } from './ui'
 import 'prismjs/components/prism-yaml'
-import 'prismjs/themes/prism-tomorrow.css'
 
 // `react-simple-code-editor` ships CJS only — no `exports`/`module` field, and
 // 0.14.1 is the latest release — so Vite's dep optimizer double-wraps its default
@@ -13,70 +14,149 @@ import 'prismjs/themes/prism-tomorrow.css'
 // a future Vite (or an ESM release) hands us the component directly.
 const Editor = (EditorModule as unknown as { default?: typeof EditorModule }).default ?? EditorModule
 
+const GUTTER = 48
+
+/** Prism YAML highlighting plus a gutter line number per line. */
+function highlight(code: string): string {
+  return Prism.highlight(code, Prism.languages.yaml, 'yaml')
+    .split('\n')
+    .map((line, i) => `<span class="line-no">${i + 1}</span>${line}`)
+    .join('\n')
+}
+
 export function PolicyView() {
   const [yaml, setYaml] = useState('')
-  const [active, setActive] = useState('')
+  // The policy the gateway reported; `null` until the first successful load.
+  const [active, setActive] = useState<string | null>(null)
+  const [parsed, setParsed] = useState<Policy | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const [loaded, setLoaded] = useState(false)
+  const [settled, setSettled] = useState(false)
 
   function load() {
     getPolicy()
       .then((res) => {
         setYaml(res.yaml)
         setActive(res.yaml)
+        setParsed(res.parsed)
         setError(null)
       })
       .catch((e: unknown) => setError(e instanceof Error ? e.message : String(e)))
-      .finally(() => setLoaded(true))
+      .finally(() => setSettled(true))
   }
 
   useEffect(load, [])
 
-  const dirty = yaml !== active
+  const dirty = active !== null && yaml !== active
 
   return (
-    <section>
-      <header className="mb-4 flex items-baseline justify-between gap-3">
-        <h2 className="text-base font-semibold">Policy</h2>
-        {dirty && (
-          <button
-            type="button"
-            onClick={() => setYaml(active)}
-            className="text-xs text-zinc-500 underline hover:text-zinc-700 dark:hover:text-zinc-300"
-          >
-            Reset to active
-          </button>
-        )}
-      </header>
+    <section className="mx-auto max-w-[1440px] px-10 pt-[30px] pb-11 max-md:px-6">
+      <PageHead
+        eyebrow="Active gateway configuration"
+        title="Policy"
+        description="Inspect and edit the YAML locally without changing the running gateway."
+        meta={parsed?.version !== undefined ? `version ${parsed.version}` : undefined}
+      />
 
-      {error && (
-        <p className="mb-3 rounded border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-300">
-          {error}
-        </p>
-      )}
+      {error && <ErrorNote message={error} />}
 
-      {loaded && (
-        <div className="overflow-hidden rounded-lg border border-zinc-300 dark:border-zinc-700">
-          <Editor
-            value={yaml}
-            onValueChange={setYaml}
-            highlight={code => Prism.highlight(code, Prism.languages.yaml, 'yaml')}
-            padding={16}
-            textareaClassName="focus:outline-none"
-            className="min-h-[24rem] font-mono text-[13px] leading-relaxed"
-            style={{ backgroundColor: '#1d1f21', color: '#c5c8c6' }}
-          />
-        </div>
-      )}
+      <div className="grid grid-cols-[minmax(0,1fr)_310px] gap-3.5 max-lg:grid-cols-1">
+        <Panel className="reveal" glassClassName="overflow-hidden">
+          <header className="flex min-h-[58px] items-center gap-2.5 bg-[var(--surface-soft)] px-[18px]">
+            <span className="font-mono text-[10px] font-semibold">Active policy</span>
+            {dirty && (
+              <span className="font-mono text-[8.5px] font-semibold tracking-[0.08em] text-warn-ink uppercase">
+                Local changes
+              </span>
+            )}
+            {dirty && (
+              <button
+                type="button"
+                onClick={() => setYaml(active)}
+                className="action action-quiet ml-auto"
+              >
+                Reset to active
+              </button>
+            )}
+          </header>
 
-      <p className="mt-3 text-xs text-zinc-500">
-        Edits are local. Live policy hot-reload lands in Phase 5; today the
-        gateway loads policy from its
-        {' '}
-        <code className="rounded bg-zinc-100 px-1 dark:bg-zinc-800">--config</code>
-        {' '}
-        file.
-      </p>
+          {active === null
+            ? (
+                settled
+                  ? <PanelState glyph="✕" tone="error">The active policy could not be loaded.</PanelState>
+                  : <PanelState glyph="…">Loading…</PanelState>
+              )
+            : (
+                <div className="policy-editor max-h-[62vh] min-h-[24rem] overflow-auto">
+                  <Editor
+                    value={yaml}
+                    onValueChange={setYaml}
+                    highlight={highlight}
+                    padding={{ top: 16, right: 18, bottom: 16, left: GUTTER + 10 }}
+                    tabSize={2}
+                    insertSpaces
+                    textareaId="policy-yaml"
+                    aria-label="Policy YAML editor"
+                    className="min-h-[24rem]"
+                  />
+                </div>
+              )}
+
+          <footer className="px-[18px] py-[13px] text-[10.5px] leading-relaxed text-muted">
+            Edits are local. Live policy hot-reload lands in Phase 5; today the
+            gateway loads policy from its
+            {' '}
+            <code className="rounded-[5px] bg-[var(--surface-soft)] px-1.5 py-0.5 font-mono text-[9.5px] font-medium text-fg">
+              --config
+            </code>
+            {' '}
+            file.
+          </footer>
+        </Panel>
+
+        <Panel className="reveal" glassClassName="p-[19px]">
+          <p className="eyebrow tracking-[0.12em] text-dim">Active posture</p>
+          <Posture policy={parsed} />
+          <div className="mt-[18px] rounded-[13px] bg-warn-soft p-[13px] text-[10px] leading-relaxed text-muted">
+            <b className="text-warn-ink">Local editing only.</b>
+            {' '}
+            This surface does not save, deploy, or hot-reload policy.
+          </div>
+        </Panel>
+      </div>
     </section>
   )
 }
+
+/** Facts about the policy the gateway reported — not the local edits. */
+function Posture({ policy }: { policy: Policy | null }) {
+  if (!policy) {
+    return <p className="mt-3 text-[11px] leading-relaxed text-muted">Active policy not loaded.</p>
+  }
+  // Absent `default` means deny (see `DEFAULT_EGRESS_VERDICT`).
+  const fallback = policy.egress?.default ?? 'deny'
+  const facts = [
+    ['Default', fallback],
+    ['Allow hosts', String(policy.egress?.allow?.length ?? 0)],
+    ['Deny hosts', String(policy.egress?.deny?.length ?? 0)],
+    ['Rules', String(policy.rules?.length ?? 0)],
+  ]
+  return (
+    <>
+      <h3 className="mt-3 font-display text-lg font-semibold tracking-[-0.015em]">
+        {fallback === 'deny' ? 'Fail closed by default.' : `Unmatched egress is ${fallback}ed.`}
+      </h3>
+      <p className="mt-2 text-[11px] leading-relaxed text-muted">
+        Egress not on the allow list gets the default verdict; protocol rules run
+        first-match-wins before a request reaches its destination.
+      </p>
+      <dl className="mt-5 rounded-[14px] bg-[var(--surface-soft)] px-[13px] py-1">
+        {facts.map(([label, value]) => (
+          <div key={label} className="flex min-h-12 items-center not-first:shadow-[inset_0_1px_0_var(--hair)]">
+            <dt className="font-mono text-[8.5px] font-medium tracking-[0.08em] text-dim uppercase">{label}</dt>
+            <dd className="ml-auto font-mono text-[9.5px] font-medium tabular-nums">{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </>
+  )
+}
diff --git a/apps/dashboard/src/components/ui.tsx b/apps/dashboard/src/components/ui.tsx
new file mode 100644
index 0000000..d53612a
--- /dev/null
+++ b/apps/dashboard/src/components/ui.tsx
@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react'
+
+/** Double-bezel surface: translucent outer shell around a concentric glass core. */
+export function Panel({
+  children,
+  className = '',
+  glassClassName = '',
+}: {
+  children: ReactNode
+  className?: string
+  glassClassName?: string
+}) {
+  return (
+    <div className={`bezel ${className}`}>
+      <div className={`glass ${glassClassName}`}>{children}</div>
+    </div>
+  )
+}
+
+/** Page title block sharing the 40px content axis with the first surface. */
+export function PageHead({
+  eyebrow,
+  title,
+  description,
+  meta,
+}: {
+  eyebrow: string
+  title: string
+  description: string
+  meta?: ReactNode
+}) {
+  return (
+    <header className="mx-auto mb-6 flex max-w-[1440px] flex-wrap items-end gap-x-6 gap-y-3">
+      <div>
+        <p className="eyebrow mb-2">{eyebrow}</p>
+        <h1 className="font-display text-[30px] leading-[1.15] font-semibold tracking-[-0.025em]">
+          {title}
+        </h1>
+        <p className="mt-2 text-[12.5px] leading-relaxed text-muted">{description}</p>
+      </div>
+      {meta && <span className="meta-mono ml-auto">{meta}</span>}
+    </header>
+  )
+}
+
+/** Section title inside a panel: title left, mono meta right. */
+export function SectionHead({ title, meta }: { title: string, meta?: ReactNode }) {
+  return (
+    <header className="flex items-center px-5 pt-[18px] pb-3">
+      <h2 className="text-sm font-semibold">{title}</h2>
+      {meta && <span className="meta-mono ml-auto text-[9.5px]">{meta}</span>}
+    </header>
+  )
+}
+
+/** A fetch or action failure. Always distinct from an empty, healthy surface. */
+export function ErrorNote({ message }: { message: string }) {
+  return (
+    <p
+      role="alert"
+      className="mb-4 rounded-[14px] bg-deny-soft px-4 py-3 text-xs text-deny-ink shadow-[inset_0_0_0_1px_var(--deny-line)]"
+    >
+      {message}
+    </p>
+  )
+}
+
+/** Centered state inside a panel: loading, empty, or unavailable. */
+export function PanelState({
+  glyph,
+  children,
+  tone = 'neutral',
+}: {
+  glyph: string
+  children: ReactNode
+  tone?: 'neutral' | 'error'
+}) {
+  const mark = tone === 'error'
+    ? 'bg-deny-soft text-deny-ink'
+    : 'bg-accent-soft text-accent-ink'
+  return (
+    <div className="grid min-h-[260px] place-items-center px-6 py-10 text-center text-muted">
+      <div>
+        <div
+          aria-hidden="true"
+          className={`mx-auto mb-3.5 grid size-[54px] place-items-center rounded-[18px] font-mono text-lg font-semibold ${mark}`}
+        >
+          {glyph}
+        </div>
+        <p className="text-xs">{children}</p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/hooks.ts b/apps/dashboard/src/hooks.ts
index 23aecd7..bb57f7b 100644
--- a/apps/dashboard/src/hooks.ts
+++ b/apps/dashboard/src/hooks.ts
@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
+import { approve, reject } from './api'
 
 export interface Polled<T> {
   data: T | null
@@ -58,3 +59,35 @@ export function usePolling<T>(fn: () => Promise<T>, intervalMs: number): Polled<
 
   return { data, error, loading, refresh }
 }
+
+/**
+ * Approve/reject actions with one busy flag per approval id. Ids are tracked
+ * in a Set so concurrent actions don't clear each other's busy state (a shared
+ * single id let a later action re-enable a card while an earlier one was still
+ * pending). `refresh` re-polls the caller's approval list after each attempt.
+ */
+export function useApprovalActions(refresh: () => void) {
+  const [busyIds, setBusyIds] = useState(() => new Set<number>())
+  const [actionError, setActionError] = useState<string | null>(null)
+
+  const resolve = useCallback(async (id: number, action: 'approve' | 'reject') => {
+    setBusyIds(prev => new Set(prev).add(id))
+    setActionError(null)
+    try {
+      await (action === 'approve' ? approve(id) : reject(id))
+      refresh()
+    }
+    catch (e: unknown) {
+      setActionError(e instanceof Error ? e.message : String(e))
+    }
+    finally {
+      setBusyIds((prev) => {
+        const next = new Set(prev)
+        next.delete(id)
+        return next
+      })
+    }
+  }, [refresh])
+
+  return { busyIds, actionError, resolve }
+}
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index ec8f88b..2725b7b 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -1,9 +1,376 @@
 @import "tailwindcss";
 
+/*
+ * G2 "Barrier Membrane" tokens. Dark is the primary expression; light is a
+ * first-class secondary theme that drops shadow depth instead of copying the
+ * dark glass elevation. Every derived color is oklch — no raw hex.
+ *
+ * `--*-ink` are the text-on-surface variants of the three verdict colors: in
+ * dark mode they equal the fill color, in light mode they are darkened so the
+ * pills, gateway state and editor tokens stay legible on near-white.
+ */
 :root {
   color-scheme: light dark;
+
+  --type-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
+  --type-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
+  --type-mono: "Geist Mono", "SFMono-Regular", ui-monospace, Consolas, monospace;
+
+  --bg: oklch(12% 0.008 250);
+  --surface: oklch(16% 0.010 250);
+  --surface-glass: oklch(18% 0.012 245 / 0.82);
+  --surface-soft: oklch(20% 0.012 245 / 0.58);
+  --border: oklch(26% 0.012 245);
+  --hair: oklch(95% 0.005 220 / 0.075);
+  --fg: oklch(95% 0.005 220);
+  --muted: oklch(62% 0.012 240);
+  --dim: oklch(48% 0.012 240);
+
+  --accent: oklch(81% 0.110 185);
+  --accent-ink: oklch(81% 0.110 185);
+  --accent-soft: oklch(81% 0.110 185 / 0.13);
+  --accent-line: oklch(81% 0.110 185 / 0.22);
+  --accent-glow: oklch(81% 0.110 185 / 0.18);
+  --on-accent: oklch(16% 0.018 210);
+
+  --warn: oklch(78% 0.120 75);
+  --warn-ink: oklch(78% 0.120 75);
+  --warn-soft: oklch(78% 0.120 75 / 0.13);
+  --on-warn: oklch(18% 0.020 70);
+
+  --deny: oklch(72% 0.115 25);
+  --deny-ink: oklch(72% 0.115 25);
+  --deny-soft: oklch(72% 0.115 25 / 0.13);
+  --deny-line: oklch(72% 0.115 25 / 0.38);
+
+  --mask: oklch(76% 0.100 300);
+
+  --shell: oklch(95% 0.005 220 / 0.035);
+  --shadow: 0 18px 44px oklch(5% 0.010 250 / 0.28);
+  --editor-bg: oklch(14% 0.012 250);
+  --editor-gutter: oklch(12% 0.010 250);
+
+  --bezel-pad: 5px;
+  --bezel-radius: 22px;
+  --glass-radius: 17px;
+  --ease: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: oklch(97% 0.008 220);
+    --surface: oklch(99% 0.003 220);
+    --surface-glass: oklch(100% 0 0 / 0.9);
+    --surface-soft: oklch(94% 0.013 210 / 0.66);
+    --border: oklch(87% 0.018 215);
+    --hair: oklch(25% 0.010 250 / 0.09);
+    --fg: oklch(19% 0.012 245);
+    --muted: oklch(44% 0.018 240);
+    --dim: oklch(54% 0.016 240);
+
+    --accent-ink: oklch(46% 0.100 185);
+    --accent-soft: oklch(70% 0.105 185 / 0.14);
+    --accent-line: oklch(60% 0.105 185 / 0.35);
+    --accent-glow: oklch(70% 0.105 185 / 0.14);
+
+    --warn-ink: oklch(52% 0.130 70);
+    --warn-soft: oklch(72% 0.120 75 / 0.16);
+
+    --deny-ink: oklch(50% 0.160 25);
+    --deny-soft: oklch(65% 0.115 25 / 0.10);
+    --deny-line: oklch(55% 0.150 25 / 0.45);
+
+    --mask: oklch(48% 0.120 300);
+
+    --shell: oklch(30% 0.020 220 / 0.035);
+    --shadow: 0 3px 10px oklch(35% 0.040 220 / 0.05);
+    --editor-bg: oklch(98.5% 0.004 220);
+    --editor-gutter: oklch(95.5% 0.008 220);
+
+    --bezel-pad: 3px;
+    --bezel-radius: 20px;
+  }
+}
+
+/* Expose the tokens to Tailwind utilities (`bg-bg`, `text-muted`, `font-mono`…). */
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-soft: var(--surface-soft);
+  --color-fg: var(--fg);
+  --color-muted: var(--muted);
+  --color-dim: var(--dim);
+  --color-hair: var(--hair);
+  --color-border: var(--border);
+  --color-accent: var(--accent);
+  --color-accent-ink: var(--accent-ink);
+  --color-accent-soft: var(--accent-soft);
+  --color-warn: var(--warn);
+  --color-warn-ink: var(--warn-ink);
+  --color-warn-soft: var(--warn-soft);
+  --color-deny: var(--deny);
+  --color-deny-ink: var(--deny-ink);
+  --color-deny-soft: var(--deny-soft);
+  --font-sans: var(--type-body);
+  --font-display: var(--type-display);
+  --font-mono: var(--type-mono);
 }
 
 body {
   margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--type-body);
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* One focus treatment for everything focusable, in both themes. */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+@layer components {
+  /* Double bezel: a translucent outer shell with a concentric glass core. */
+  .bezel {
+    display: block;
+    padding: var(--bezel-pad);
+    border-radius: var(--bezel-radius);
+    background: var(--shell);
+    box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .glass {
+    height: 100%;
+    border-radius: var(--glass-radius);
+    background: var(--surface-glass);
+    box-shadow: inset 0 1px 0 var(--hair);
+  }
+
+  /* A bezel that is also a link lifts on hover; text contrast is untouched. */
+  a.bezel {
+    transition: transform 0.5s var(--ease);
+  }
+
+  a.bezel:hover {
+    transform: translateY(-2px);
+  }
+
+  @media (prefers-color-scheme: light) {
+    .glass {
+      box-shadow: inset 0 0 0 1px var(--hair);
+    }
+  }
+
+  .eyebrow {
+    color: var(--muted);
+    font: 600 9px var(--type-mono);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+
+  .meta-mono {
+    color: var(--dim);
+    font: 500 10px var(--type-mono);
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+  }
+
+  /* Verdict pill: glyph + mono uppercase label carry the meaning, color supports. */
+  .verdict {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    min-width: 92px;
+    padding: 5px 9px;
+    border-radius: 999px;
+    font: 600 9px/1 var(--type-mono);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .verdict-allowed,
+  .verdict-approved {
+    color: var(--accent-ink);
+    background: var(--accent-soft);
+  }
+
+  .verdict-paused {
+    color: var(--warn-ink);
+    background: var(--warn-soft);
+  }
+
+  .verdict-denied,
+  .verdict-rejected {
+    color: var(--deny-ink);
+    background: var(--deny-soft);
+  }
+
+  /* Pill actions. Exactly one `.action-approve` per action group. */
+  .action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 44px;
+    padding: 0 18px;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    font: 600 10.5px var(--type-mono);
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      transform 0.5s var(--ease),
+      background-color 0.5s var(--ease),
+      box-shadow 0.5s var(--ease),
+      border-color 0.5s var(--ease);
+  }
+
+  .action:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+
+  .action:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  .action:disabled {
+    cursor: wait;
+    opacity: 0.55;
+  }
+
+  .action-approve {
+    background: var(--accent);
+    color: var(--on-accent);
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
+
+  .action-approve:hover:not(:disabled) {
+    background: oklch(85% 0.110 185);
+    box-shadow: 0 0 26px var(--accent-glow);
+  }
+
+  .action-deny {
+    border-color: var(--deny-line);
+    background: var(--deny-soft);
+    color: var(--deny-ink);
+  }
+
+  .action-deny:hover:not(:disabled) {
+    background: oklch(72% 0.115 25 / 0.2);
+  }
+
+  .action-quiet {
+    padding: 0 12px;
+    color: var(--muted);
+    font: 550 11px var(--type-body);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .action-quiet:hover:not(:disabled) {
+    color: var(--fg);
+  }
+
+  .count-badge {
+    display: inline-grid;
+    place-items: center;
+    min-width: 17px;
+    height: 17px;
+    margin-left: 7px;
+    padding: 0 5px;
+    border-radius: 99px;
+    background: var(--warn);
+    color: var(--on-warn);
+    font: 600 8.5px var(--type-mono);
+  }
+
+  /* Editor: Prism YAML tokens on the G2 palette (replaces prism-tomorrow). */
+  .policy-editor {
+    background: var(--editor-bg);
+    color: var(--fg);
+    font-family: var(--type-mono);
+    font-size: 12.5px;
+    line-height: 1.7;
+    tab-size: 2;
+  }
+
+  .policy-editor textarea {
+    caret-color: var(--accent);
+    outline: none;
+  }
+
+  .policy-editor textarea::selection {
+    background: var(--accent-line);
+  }
+
+  .policy-editor .line-no {
+    position: absolute;
+    left: 0;
+    width: 48px;
+    padding-right: 14px;
+    color: var(--dim);
+    text-align: right;
+    user-select: none;
+  }
+
+  .policy-editor .token.key,
+  .policy-editor .token.atrule {
+    color: var(--accent-ink);
+  }
+
+  .policy-editor .token.string {
+    color: var(--warn-ink);
+  }
+
+  .policy-editor .token.comment {
+    color: var(--dim);
+    font-style: italic;
+  }
+
+  .policy-editor .token.number,
+  .policy-editor .token.boolean,
+  .policy-editor .token.null,
+  .policy-editor .token.important,
+  .policy-editor .token.directive {
+    color: var(--mask);
+  }
+
+  .policy-editor .token.punctuation {
+    color: var(--muted);
+  }
+
+  /* Entry motion: transform + opacity only, disabled under reduced motion. */
+  .reveal {
+    animation: reveal 0.85s var(--ease) both;
+  }
+
+  @keyframes reveal {
+    from {
+      opacity: 0;
+      transform: translateY(14px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .reveal {
+      animation: none;
+    }
+
+    .action,
+    a.bezel {
+      transition: none;
+    }
+  }
 }

From 4e8608397d49a5b339496b7a3ea2b6ed1d02b003 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Thu, 3 Sep 2026 21:42:11 +0900
Subject: [PATCH 2/9] fix(dashboard): address review-fix-loop iteration 1
 findings

- AGENTS.md: list `SectionHead` among the `ui` exports
- PolicyView: promote the Posture heading to `h2` so the Policy route no
  longer skips from h1 to h3 (WCAG 1.3.1)
- Record the review's rejected findings in the ledger

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .please/docs/review/rejected-findings.jsonl  | 7 +++++++
 apps/dashboard/AGENTS.md                     | 2 +-
 apps/dashboard/src/components/PolicyView.tsx | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/.please/docs/review/rejected-findings.jsonl b/.please/docs/review/rejected-findings.jsonl
index 581a173..5fb2b04 100644
--- a/.please/docs/review/rejected-findings.jsonl
+++ b/.please/docs/review/rejected-findings.jsonl
@@ -1 +1,8 @@
 {"key":"c289642ddef91a0d","file":"crates/honmoon-proxy/tests/redaction.rs","title":"The cache-stability wire test does not model a growing conversation prefix","reason":"Evidence misattribution: the growing-prefix scenario is covered by public_path_extending_the_history_preserves_the_redacted_prefix in crates/honmoon-core/tests/secret_tokenizer_public_api.rs:192-230 (plus two adjacent position-independence tests); the wire path delegates all tokenization to honmoon-core, so a prefix-instability regression fails at the core layer","rejected_at":"2026-07-20T12:42:25Z","source":"review-code"}
+{"key":"c7b3265912ddbd2e","file":"apps/dashboard/src/App.tsx","title":"Gateway reachability status is completely hidden below md breakpoint","reason":"By design: every route renders its own visible ErrorNote (role=alert, no responsive hiding) when its poll fails, so narrow-viewport users still get an explicit unreachability signal; hiding the header capsule below md is a deliberate responsive trade-off","rejected_at":"2026-09-03T12:33:15Z","source":"code-review"}
+{"key":"680f01c120f9d897","file":"apps/dashboard/src/components/Overview.tsx","title":"Overview's featured approval assumes array order that Approvals page does not","reason":"Factually wrong: honmoon-proxy approval.rs pending() sorts by monotonic id (oldest first, tested by pending_is_sorted_by_id) and mgmt list_approvals returns it unchanged; demo shim also pushes in registration order, so approvals[0] is always the oldest","rejected_at":"2026-09-03T12:33:15Z","source":"code-review"}
+{"key":"c855f8b101ee73d7","file":"apps/dashboard/src/index.css","title":"Policy editor textarea permanently disables the focus-visible outline","reason":"Factually wrong: :focus-visible (index.css:129) is unlayered while .policy-editor textarea { outline:none } is inside @layer components; unlayered declarations beat layered ones regardless of specificity. Verified empirically: keyboard focus renders the 2px accent outline","rejected_at":"2026-09-03T12:33:15Z","source":"code-review"}
+{"key":"88a1b1c4d3e6a220","file":"apps/dashboard/src/index.css","title":"Policy editor gutter width doesn't match the reserved code padding","reason":"Factually wrong: Tailwind v4 Preflight sets box-sizing:border-box, so .line-no width:48px includes padding-right:14px; text right edge sits at 34px and the 58px editor padding leaves a 24px gap","rejected_at":"2026-09-03T12:33:16Z","source":"code-review"}
+{"key":"5cd7bd3baeb114cf","file":"apps/dashboard/src/index.css","title":"Prism gutter line numbers use absolute positioning with no positioned per-line ancestor","reason":"Empirically refuted: built demo and measured .line-no spans; each has a distinct monotonically increasing top (~21.25px apart) aligned to its line. Abspos with top/bottom auto resolves to the inline static position per CSS 2.1 10.6.4","rejected_at":"2026-09-03T12:33:16Z","source":"code-review"}
+{"key":"09d20f43afff0463","file":"apps/dashboard/src/components/Overview.tsx","title":"Overview 'Latest decisions' rule column vanishes on mobile with no fallback","reason":"out of scope: style/taste — hiding a secondary column below md is a responsive design choice, not a WCAG failure or logic error; the full Audit route keeps every column","rejected_at":"2026-09-03T12:33:16Z","source":"code-review"}
+{"key":"988459f6c5a04fd0","file":"apps/dashboard/src/components/Overview.tsx","title":"Overview's ApprovalStrip and Approvals' ApprovalCard track busy state in separate hook instances, allowing a duplicate approve/reject across a page switch","reason":"By design / no observable effect: approval.rs resolve() uses .remove(&id)? so a second approve/reject returns 404 'no such pending approval' — no double-application; per-list busyIds makes no cross-surface claim, and the trigger requires a second aimed click inside one same-origin POST round trip across a route change","rejected_at":"2026-09-03T12:39:57Z","source":"code-review"}
diff --git a/apps/dashboard/AGENTS.md b/apps/dashboard/AGENTS.md
index 64895b9..28846b8 100644
--- a/apps/dashboard/AGENTS.md
+++ b/apps/dashboard/AGENTS.md
@@ -39,7 +39,7 @@ rust-embed handler needs a rewrite rule). Unknown hashes fall back to Overview:
 | Path | What |
 |------|------|
 | `src/main.tsx` / `src/App.tsx` | Entry point; hash router + shell over the four views. |
-| `src/components/` | `Overview`, `AuditLog`, `PolicyView`, `Approvals`, plus shared pieces: `DecisionBadge` (glyph + mono verdict pill), `ApprovalActions` (Deny / Approve pair), `ui` (`Panel` double bezel, `PageHead`, `ErrorNote`, `PanelState`). |
+| `src/components/` | `Overview`, `AuditLog`, `PolicyView`, `Approvals`, plus shared pieces: `DecisionBadge` (glyph + mono verdict pill), `ApprovalActions` (Deny / Approve pair), `ui` (`Panel` double bezel, `PageHead`, `SectionHead`, `ErrorNote`, `PanelState`). |
 | `src/api.ts` / `src/hooks.ts` / `src/format.ts` | Typed management-API client, `usePolling` + `useApprovalActions` (per-id busy set), formatters. |
 | `src/index.css` | G2 "Barrier Membrane" tokens (oklch, dark primary / light secondary), Tailwind `@theme` bridge, and the few component classes (`bezel`/`glass`, `verdict-*`, `action-*`, Prism YAML token colors). |
 | `demo/demo-mode.js` | Demo shim: patches `window.fetch` with in-memory fixtures, runs a scripted timeline, mounts the "demo" badge. Plain browser JS, no bundler. |
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index 5035a97..25ba8de 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -142,9 +142,9 @@ function Posture({ policy }: { policy: Policy | null }) {
   ]
   return (
     <>
-      <h3 className="mt-3 font-display text-lg font-semibold tracking-[-0.015em]">
+      <h2 className="mt-3 font-display text-lg font-semibold tracking-[-0.015em]">
         {fallback === 'deny' ? 'Fail closed by default.' : `Unmatched egress is ${fallback}ed.`}
-      </h3>
+      </h2>
       <p className="mt-2 text-[11px] leading-relaxed text-muted">
         Egress not on the allow list gets the default verdict; protocol rules run
         first-match-wins before a request reaches its destination.

From d1aba369cbf2c064effe4ac8afb4ccfaa984f235 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Thu, 3 Sep 2026 21:54:39 +0900
Subject: [PATCH 3/9] fix(dashboard): give the policy YAML textarea an
 accessible name

react-simple-code-editor spreads unknown props onto its wrapper div, so the
`aria-label` on `<Editor>` never reached the textarea. Bind a visually hidden
`<label>` to `textareaId` instead (WCAG 4.1.2 / 3.3.2) and record the
review-fix-loop iteration 2 rejections in the ledger.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .please/docs/review/rejected-findings.jsonl  | 2 ++
 apps/dashboard/src/components/PolicyView.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.please/docs/review/rejected-findings.jsonl b/.please/docs/review/rejected-findings.jsonl
index 5fb2b04..f9df271 100644
--- a/.please/docs/review/rejected-findings.jsonl
+++ b/.please/docs/review/rejected-findings.jsonl
@@ -6,3 +6,5 @@
 {"key":"5cd7bd3baeb114cf","file":"apps/dashboard/src/index.css","title":"Prism gutter line numbers use absolute positioning with no positioned per-line ancestor","reason":"Empirically refuted: built demo and measured .line-no spans; each has a distinct monotonically increasing top (~21.25px apart) aligned to its line. Abspos with top/bottom auto resolves to the inline static position per CSS 2.1 10.6.4","rejected_at":"2026-09-03T12:33:16Z","source":"code-review"}
 {"key":"09d20f43afff0463","file":"apps/dashboard/src/components/Overview.tsx","title":"Overview 'Latest decisions' rule column vanishes on mobile with no fallback","reason":"out of scope: style/taste — hiding a secondary column below md is a responsive design choice, not a WCAG failure or logic error; the full Audit route keeps every column","rejected_at":"2026-09-03T12:33:16Z","source":"code-review"}
 {"key":"988459f6c5a04fd0","file":"apps/dashboard/src/components/Overview.tsx","title":"Overview's ApprovalStrip and Approvals' ApprovalCard track busy state in separate hook instances, allowing a duplicate approve/reject across a page switch","reason":"By design / no observable effect: approval.rs resolve() uses .remove(&id)? so a second approve/reject returns 404 'no such pending approval' — no double-application; per-list busyIds makes no cross-surface claim, and the trigger requires a second aimed click inside one same-origin POST round trip across a route change","rejected_at":"2026-09-03T12:39:57Z","source":"code-review"}
+{"key":"71a632542061c550","file":"apps/dashboard/src/components/ApprovalActions.tsx","title":"ApprovalActions summary doc-comment example omits the colon the code actually renders","reason":"Pure style: the JSDoc e.g. illustrates the summary content, not the literal aria-label string; the templates sit a few lines below in the same file. No observable effect","rejected_at":"2026-09-03T12:52:50Z","source":"code-review"}
+{"key":"b4811fcbf7b5071c","file":"apps/dashboard/src/components/PolicyView.tsx","title":"Prism-highlighted YAML gutter numbering can nest across multi-line tokens","reason":"Empirically refuted: prism-yaml only spans lines for block scalars, and Prism output closes every span so line-no spans are validly nested children; .token.string sets only color, so positioning is unaffected. Verified live in the built demo with a block scalar: identical left, even top spacing, normal font-style","rejected_at":"2026-09-03T12:52:50Z","source":"code-review"}
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index 25ba8de..a42ac1b 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -87,6 +87,7 @@ export function PolicyView() {
               )
             : (
                 <div className="policy-editor max-h-[62vh] min-h-[24rem] overflow-auto">
+                  <label htmlFor="policy-yaml" className="sr-only">Policy YAML editor</label>
                   <Editor
                     value={yaml}
                     onValueChange={setYaml}
@@ -95,7 +96,6 @@ export function PolicyView() {
                     tabSize={2}
                     insertSpaces
                     textareaId="policy-yaml"
-                    aria-label="Policy YAML editor"
                     className="min-h-[24rem]"
                   />
                 </div>

From 89eabe694a7991543b405e69111eb29b331c6fa6 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Thu, 3 Sep 2026 22:11:57 +0900
Subject: [PATCH 4/9] fix(dashboard): address review-fix-loop iteration 3
 findings

- Raise dark-mode `--dim` to oklch(60%) so metadata text clears WCAG 4.5:1
  against every backdrop it sits on (was 3.1:1 on `--bg`)
- Render the posture headline through a Verdict lookup so a `pause` default
  reads "paused", not "pauseed"
- Use `DEFAULT_EGRESS_VERDICT` from @honmoon/policy instead of a `'deny'` literal
- Correct the useApprovalActions docstring: refresh runs only after success
- Record the iteration 3 rejections in the review ledger

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../review-review-issue-fixer/MEMORY.md       |  1 +
 .../project_dashboard_fix_patterns.md         | 22 +++++++++++++++++++
 .please/docs/review/rejected-findings.jsonl   |  1 +
 apps/dashboard/src/components/PolicyView.tsx  | 14 ++++++++----
 apps/dashboard/src/hooks.ts                   |  4 +++-
 apps/dashboard/src/index.css                  |  2 +-
 6 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 .claude/agent-memory/review-review-issue-fixer/MEMORY.md
 create mode 100644 .claude/agent-memory/review-review-issue-fixer/project_dashboard_fix_patterns.md

diff --git a/.claude/agent-memory/review-review-issue-fixer/MEMORY.md b/.claude/agent-memory/review-review-issue-fixer/MEMORY.md
new file mode 100644
index 0000000..1d4d072
--- /dev/null
+++ b/.claude/agent-memory/review-review-issue-fixer/MEMORY.md
@@ -0,0 +1 @@
+- [Dashboard fix patterns](project_dashboard_fix_patterns.md) — @honmoon/policy value imports resolve; eslint type-specifier rule; oklch contrast compositing gotchas
diff --git a/.claude/agent-memory/review-review-issue-fixer/project_dashboard_fix_patterns.md b/.claude/agent-memory/review-review-issue-fixer/project_dashboard_fix_patterns.md
new file mode 100644
index 0000000..051ef51
--- /dev/null
+++ b/.claude/agent-memory/review-review-issue-fixer/project_dashboard_fix_patterns.md
@@ -0,0 +1,22 @@
+---
+name: dashboard-fix-patterns
+description: Honmoon dashboard fix constraints — @honmoon/policy value imports resolve, eslint import-style rule, oklch contrast math
+metadata:
+  type: project
+---
+
+Fixing review findings in `apps/dashboard`:
+
+- **Value imports from `@honmoon/policy` build fine.** Its package.json `exports` points at raw
+  `./src/index.ts`, so Vite transpiles it directly — no dist build step needed. A finding that says
+  "skip if the value import cannot resolve" can be answered with a `build` run, not guessed.
+  **Why:** several dashboard files use `import type` only, which is erased and proves nothing at
+  typecheck time. **How to apply:** only `bun run --filter '@honmoon/dashboard' build` is evidence.
+- **eslint enforces `import/consistent-type-specifier-style`.** Inline `type` specifiers mixed into
+  a value import (`import { X, type Y }`) error out; it must be split into a separate
+  `import type { Y }` line. **Why:** repo lint config. **How to apply:** when a finding literally
+  prescribes the inline form, apply it then run `bunx eslint --fix` on that file.
+- **Contrast findings cite oklch tokens in `src/index.css`.** Composite translucent surfaces in
+  gamma-encoded sRGB (not linear) or the ratio comes out optimistic. Real backdrops nest
+  `--surface-soft` over `--surface-glass` over `--bg`, which is worse than the two-layer case a
+  finding usually quotes — check the three-layer stack too.
diff --git a/.please/docs/review/rejected-findings.jsonl b/.please/docs/review/rejected-findings.jsonl
index f9df271..d4b0213 100644
--- a/.please/docs/review/rejected-findings.jsonl
+++ b/.please/docs/review/rejected-findings.jsonl
@@ -8,3 +8,4 @@
 {"key":"988459f6c5a04fd0","file":"apps/dashboard/src/components/Overview.tsx","title":"Overview's ApprovalStrip and Approvals' ApprovalCard track busy state in separate hook instances, allowing a duplicate approve/reject across a page switch","reason":"By design / no observable effect: approval.rs resolve() uses .remove(&id)? so a second approve/reject returns 404 'no such pending approval' — no double-application; per-list busyIds makes no cross-surface claim, and the trigger requires a second aimed click inside one same-origin POST round trip across a route change","rejected_at":"2026-09-03T12:39:57Z","source":"code-review"}
 {"key":"71a632542061c550","file":"apps/dashboard/src/components/ApprovalActions.tsx","title":"ApprovalActions summary doc-comment example omits the colon the code actually renders","reason":"Pure style: the JSDoc e.g. illustrates the summary content, not the literal aria-label string; the templates sit a few lines below in the same file. No observable effect","rejected_at":"2026-09-03T12:52:50Z","source":"code-review"}
 {"key":"b4811fcbf7b5071c","file":"apps/dashboard/src/components/PolicyView.tsx","title":"Prism-highlighted YAML gutter numbering can nest across multi-line tokens","reason":"Empirically refuted: prism-yaml only spans lines for block scalars, and Prism output closes every span so line-no spans are validly nested children; .token.string sets only color, so positioning is unaffected. Verified live in the built demo with a block scalar: identical left, even top spacing, normal font-style","rejected_at":"2026-09-03T12:52:50Z","source":"code-review"}
+{"key":"4892e37e99f3a60c","file":"apps/dashboard/src/components/DecisionBadge.tsx","title":"DecisionBadge docstring overclaims that glyph distinguishes approved/rejected from allowed/denied","reason":"Pure style: 'glyph and label carry the meaning; color supports' mirrors the design-wide a11y comment on .verdict in index.css and does not claim the glyph alone disambiguates each pair; the label text keeps them distinct. No observable effect","rejected_at":"2026-09-03T13:07:35Z","source":"code-review"}
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index a42ac1b..497c30b 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -1,4 +1,5 @@
-import type { Policy } from '@honmoon/policy'
+import type { Policy, Verdict } from '@honmoon/policy'
+import { DEFAULT_EGRESS_VERDICT } from '@honmoon/policy'
 import Prism from 'prismjs'
 import { useEffect, useState } from 'react'
 import EditorModule from 'react-simple-code-editor'
@@ -16,6 +17,12 @@ const Editor = (EditorModule as unknown as { default?: typeof EditorModule }).de
 
 const GUTTER = 48
 
+const VERDICT_PAST: Record<Verdict, string> = {
+  allow: 'allowed',
+  deny: 'denied',
+  pause: 'paused',
+}
+
 /** Prism YAML highlighting plus a gutter line number per line. */
 function highlight(code: string): string {
   return Prism.highlight(code, Prism.languages.yaml, 'yaml')
@@ -132,8 +139,7 @@ function Posture({ policy }: { policy: Policy | null }) {
   if (!policy) {
     return <p className="mt-3 text-[11px] leading-relaxed text-muted">Active policy not loaded.</p>
   }
-  // Absent `default` means deny (see `DEFAULT_EGRESS_VERDICT`).
-  const fallback = policy.egress?.default ?? 'deny'
+  const fallback = policy.egress?.default ?? DEFAULT_EGRESS_VERDICT
   const facts = [
     ['Default', fallback],
     ['Allow hosts', String(policy.egress?.allow?.length ?? 0)],
@@ -143,7 +149,7 @@ function Posture({ policy }: { policy: Policy | null }) {
   return (
     <>
       <h2 className="mt-3 font-display text-lg font-semibold tracking-[-0.015em]">
-        {fallback === 'deny' ? 'Fail closed by default.' : `Unmatched egress is ${fallback}ed.`}
+        {fallback === 'deny' ? 'Fail closed by default.' : `Unmatched egress is ${VERDICT_PAST[fallback]}.`}
       </h2>
       <p className="mt-2 text-[11px] leading-relaxed text-muted">
         Egress not on the allow list gets the default verdict; protocol rules run
diff --git a/apps/dashboard/src/hooks.ts b/apps/dashboard/src/hooks.ts
index bb57f7b..d478e68 100644
--- a/apps/dashboard/src/hooks.ts
+++ b/apps/dashboard/src/hooks.ts
@@ -64,7 +64,9 @@ export function usePolling<T>(fn: () => Promise<T>, intervalMs: number): Polled<
  * Approve/reject actions with one busy flag per approval id. Ids are tracked
  * in a Set so concurrent actions don't clear each other's busy state (a shared
  * single id let a later action re-enable a card while an earlier one was still
- * pending). `refresh` re-polls the caller's approval list after each attempt.
+ * pending). `refresh` re-polls the caller's approval list after a successful
+ * resolve; a failed attempt only surfaces `actionError` and clears the busy
+ * flag.
  */
 export function useApprovalActions(refresh: () => void) {
   const [busyIds, setBusyIds] = useState(() => new Set<number>())
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index 2725b7b..857f402 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -24,7 +24,7 @@
   --hair: oklch(95% 0.005 220 / 0.075);
   --fg: oklch(95% 0.005 220);
   --muted: oklch(62% 0.012 240);
-  --dim: oklch(48% 0.012 240);
+  --dim: oklch(60% 0.012 240);
 
   --accent: oklch(81% 0.110 185);
   --accent-ink: oklch(81% 0.110 185);

From f68ff91f32d8fb4193240ba545817fdb8553f7e4 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Fri, 4 Sep 2026 09:20:53 +0900
Subject: [PATCH 5/9] fix(dashboard): resolve remaining review minors and add
 hook tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Track approve/reject failures per approval id (`actionErrors` Map) and
  render each note on its own card / next to its own row, so one row's
  failure is never hidden by another row's action.
- Derive the header's gateway state from both live polls: approvals plus a
  one-row audit probe, so an audit-only outage no longer reads as "live".
- Overview hero waits for the approvals poll before claiming the queue is
  empty; audit-only panels key off the audit poll alone and receive only
  the audit error.
- Approve/Deny buttons expose "Resolving…" in their accessible name while
  busy, matching the visible label.
- DecisionBadge renders an unknown verdict as "?" instead of throwing.
- Fix the `--*-ink` token comment and the AGENTS.md theming note.
- Add `bun test` for the dashboard with a happy-dom + `act` harness and
  three `useApprovalActions` tests (per-id busy, per-id error, refresh
  only on success). CI does not run this suite yet.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/dashboard/AGENTS.md                      |  11 +-
 apps/dashboard/package.json                   |   3 +
 apps/dashboard/src/App.tsx                    |  24 +++-
 .../src/components/ApprovalActions.tsx        |   6 +-
 apps/dashboard/src/components/Approvals.tsx   |  10 +-
 .../src/components/DecisionBadge.tsx          |  12 +-
 apps/dashboard/src/components/Overview.tsx    |  30 +++--
 apps/dashboard/src/components/ui.tsx          |   4 +-
 apps/dashboard/src/hooks.test.tsx             | 126 ++++++++++++++++++
 apps/dashboard/src/hooks.ts                   |  26 ++--
 apps/dashboard/src/index.css                  |   2 +-
 apps/dashboard/tsconfig.app.json              |   2 +-
 bun.lock                                      |  20 +++
 13 files changed, 235 insertions(+), 41 deletions(-)
 create mode 100644 apps/dashboard/src/hooks.test.tsx

diff --git a/apps/dashboard/AGENTS.md b/apps/dashboard/AGENTS.md
index 28846b8..c014c97 100644
--- a/apps/dashboard/AGENTS.md
+++ b/apps/dashboard/AGENTS.md
@@ -50,12 +50,17 @@ rust-embed handler needs a rewrite rule). Unknown hashes fall back to Overview:
 
 - React 19 + Vite + Tailwind 4. ESM, `strict: true`. Lint via `@pleaseai/eslint-config` with
   `eslint-plugin-react-hooks` / `react-refresh`.
-- Light/dark aware (`color-scheme` / Tailwind `dark:` variants). Keep the shell minimal — data
-  density over decoration. Mirror clawpatrol's dashboard structure where it enables component reuse.
+- Light/dark aware: `color-scheme: light dark` plus the oklch tokens in `index.css`, switched by
+  `@media (prefers-color-scheme: light)` — no Tailwind `dark:` variants. Keep the shell minimal —
+  data density over decoration. Mirror clawpatrol's dashboard structure where it enables component reuse.
 
 ## Testing
 
-No tests yet. Add component/interaction tests alongside any real surface you build.
+`bun run test` (from this directory, or `bun run --filter '@honmoon/dashboard' test` from the
+root) runs `bun test` over `src/**/*.test.tsx`. Tests register happy-dom themselves via
+`@happy-dom/global-registrator` and drive React with `act` — no testing-library. Add
+component/interaction tests alongside any real surface you build; `hooks.test.tsx` is the
+pattern to copy. CI does not run this suite yet (`.github/workflows/ci.yml`).
 
 ## Boundaries
 
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 139aa49..ce46665 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -8,6 +8,7 @@
     "build": "tsc -b && vite build",
     "build:demo": "bun run build && bun demo/build.ts",
     "typecheck": "tsc -b --noEmit",
+    "test": "bun test",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -19,7 +20,9 @@
     "react-simple-code-editor": "^0.14.1"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.0",
     "@tailwindcss/vite": "^4.1.3",
+    "@types/bun": "^1.4.0",
     "@types/node": "^24.12.3",
     "@types/prismjs": "^1.26.6",
     "@types/react": "^19.2.14",
diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index 48acae8..29a0d7d 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'react'
-import { getApprovals } from './api'
+import { getApprovals, getAudit } from './api'
 import { Approvals } from './components/Approvals'
 import { AuditLog } from './components/AuditLog'
 import { Overview } from './components/Overview'
@@ -15,6 +15,9 @@ const NAV = [
 
 type Slug = (typeof NAV)[number]['slug']
 
+/** Smallest audit read that still proves the endpoint answers. */
+const probeAudit = () => getAudit(1)
+
 /**
  * Hash routing, not the History API: the dashboard is served both by Cloudflare
  * Pages (the demo) and by `honmoon-mgmt`'s rust-embed handler, and a hash needs
@@ -34,10 +37,16 @@ function subscribe(onChange: () => void): () => void {
 function App() {
   // `currentSlug` returns a primitive, so the snapshot is stable by value.
   const slug = useSyncExternalStore(subscribe, currentSlug)
-  // A live pending count drives the nav badge across every view; the same
-  // poll tells the capsule whether the management API is answering at all.
-  const { data: approvals, error } = usePolling(getApprovals, 1500)
+  // A live pending count drives the nav badge across every view. Reachability
+  // in the capsule needs both live endpoints to answer: the audit route can
+  // fail on its own, and a badge that only watched approvals would still read
+  // "live" while the Audit page shows an error.
+  const { data: approvals, error: approvalsError } = usePolling(getApprovals, 1500)
+  const { data: audit, error: auditError } = usePolling(probeAudit, 2000)
   const pending = approvals?.length ?? 0
+  const settled = (approvals !== null || approvalsError !== null)
+    && (audit !== null || auditError !== null)
+  const reachable = approvalsError === null && auditError === null
 
   return (
     <div className="min-h-screen bg-bg text-fg">
@@ -78,7 +87,7 @@ function App() {
               ))}
             </nav>
 
-            <GatewayState reachable={error === null} settled={approvals !== null || error !== null} />
+            <GatewayState reachable={reachable} settled={settled} />
 
             <span
               role="img"
@@ -105,8 +114,9 @@ function App() {
 }
 
 /**
- * Live management-API reachability, derived from the shared approvals poll.
- * It says whether the API answers — nothing about what the gateway enforces.
+ * Live management-API reachability, derived from the approvals and audit
+ * polls. It says whether the API answers — nothing about what the gateway
+ * enforces.
  */
 function GatewayState({ reachable, settled }: { reachable: boolean, settled: boolean }) {
   const label = !settled ? 'Connecting' : reachable ? 'Gateway live' : 'Gateway unreachable'
diff --git a/apps/dashboard/src/components/ApprovalActions.tsx b/apps/dashboard/src/components/ApprovalActions.tsx
index 385204d..6ca07e4 100644
--- a/apps/dashboard/src/components/ApprovalActions.tsx
+++ b/apps/dashboard/src/components/ApprovalActions.tsx
@@ -9,7 +9,7 @@ export function ApprovalActions({
   onApprove,
   onReject,
 }: {
-  /** Names the request for assistive technology, e.g. "Approve DROP TABLE…". */
+  /** Names the request for assistive technology, e.g. "Approve: DROP TABLE…". */
   summary: string
   busy: boolean
   onApprove: () => void
@@ -22,7 +22,7 @@ export function ApprovalActions({
         className="action action-deny"
         disabled={busy}
         onClick={onReject}
-        aria-label={`Deny: ${summary}`}
+        aria-label={busy ? `Resolving… ${summary}` : `Deny: ${summary}`}
       >
         {busy
           ? 'Resolving…'
@@ -38,7 +38,7 @@ export function ApprovalActions({
         className="action action-approve"
         disabled={busy}
         onClick={onApprove}
-        aria-label={`Approve: ${summary}`}
+        aria-label={busy ? `Resolving… ${summary}` : `Approve: ${summary}`}
       >
         {busy
           ? 'Resolving…'
diff --git a/apps/dashboard/src/components/Approvals.tsx b/apps/dashboard/src/components/Approvals.tsx
index e6b4dfd..17b1e6e 100644
--- a/apps/dashboard/src/components/Approvals.tsx
+++ b/apps/dashboard/src/components/Approvals.tsx
@@ -7,7 +7,7 @@ import { ErrorNote, PageHead, Panel, PanelState } from './ui'
 
 export function Approvals() {
   const { data, error, loading, refresh } = usePolling(getApprovals, 1500)
-  const { busyIds, actionError, resolve } = useApprovalActions(refresh)
+  const { busyIds, actionErrors, resolve } = useApprovalActions(refresh)
 
   const pending = data ?? []
   const oldest = pending.reduce<PendingApproval | null>(
@@ -24,7 +24,6 @@ export function Approvals() {
         meta={data ? `${pending.length} pending · polling 1.5s` : 'polling 1.5s'}
       />
 
-      {actionError && <ErrorNote message={actionError} />}
       {error && <ErrorNote message={error} />}
 
       <div className="mb-3.5 grid grid-cols-2 gap-3.5">
@@ -63,6 +62,7 @@ export function Approvals() {
                     key={p.id}
                     approval={p}
                     busy={busyIds.has(p.id)}
+                    error={actionErrors.get(p.id)}
                     onApprove={() => resolve(p.id, 'approve')}
                     onReject={() => resolve(p.id, 'reject')}
                   />
@@ -76,17 +76,23 @@ export function Approvals() {
 function ApprovalCard({
   approval,
   busy,
+  error,
   onApprove,
   onReject,
 }: {
   approval: PendingApproval
   busy: boolean
+  /** This approval's last failed action, if any; other rows are unaffected. */
+  error: string | undefined
   onApprove: () => void
   onReject: () => void
 }) {
   return (
     <li className="bezel reveal">
       <div className="glass grid min-h-28 grid-cols-[44px_minmax(0,1fr)_auto] items-center gap-4 p-[17px] max-md:grid-cols-[44px_minmax(0,1fr)]">
+        {error && (
+          <ErrorNote message={error} className="col-span-full mb-0" />
+        )}
         <span
           aria-hidden="true"
           className="grid size-11 place-items-center rounded-[14px] bg-warn-soft font-mono text-[15px] font-semibold text-warn-ink"
diff --git a/apps/dashboard/src/components/DecisionBadge.tsx b/apps/dashboard/src/components/DecisionBadge.tsx
index acea043..41d5efe 100644
--- a/apps/dashboard/src/components/DecisionBadge.tsx
+++ b/apps/dashboard/src/components/DecisionBadge.tsx
@@ -5,7 +5,12 @@ import type { Decision } from '@honmoon/policy'
  * are the outcomes of a previously `paused` request and stay distinct from
  * `allowed` / `denied`. The glyph and label carry the meaning; color supports.
  */
-const LABELS: Record<Decision, { glyph: string, text: string }> = {
+interface Label {
+  glyph: string
+  text: string
+}
+
+const LABELS: Record<Decision, Label> = {
   allowed: { glyph: '✓', text: 'Allowed' },
   approved: { glyph: '✓', text: 'Approved' },
   paused: { glyph: '‖', text: 'Paused' },
@@ -14,7 +19,10 @@ const LABELS: Record<Decision, { glyph: string, text: string }> = {
 }
 
 export function DecisionBadge({ decision }: { decision: Decision }) {
-  const { glyph, text } = LABELS[decision]
+  // The wire value is trusted by type only. A verdict this bundle predates
+  // (a stale tab across a gateway upgrade) must render, not unmount the app.
+  const label: Label | undefined = LABELS[decision]
+  const { glyph, text } = label ?? { glyph: '?', text: decision }
   return (
     <span className={`verdict verdict-${decision}`}>
       <span aria-hidden="true">{glyph}</span>
diff --git a/apps/dashboard/src/components/Overview.tsx b/apps/dashboard/src/components/Overview.tsx
index 300eba0..ca4155b 100644
--- a/apps/dashboard/src/components/Overview.tsx
+++ b/apps/dashboard/src/components/Overview.tsx
@@ -13,7 +13,7 @@ function count(events: AuditEvent[], ...decisions: Decision[]): number {
 export function Overview() {
   const { data: audit, error: auditError } = usePolling(getAudit, 2000)
   const { data: approvals, error: approvalsError, refresh } = usePolling(getApprovals, 1500)
-  const { busyIds, actionError, resolve } = useApprovalActions(refresh)
+  const { busyIds, actionErrors, resolve } = useApprovalActions(refresh)
 
   const events = audit ?? []
   const pending = approvals?.length ?? 0
@@ -22,8 +22,18 @@ export function Overview() {
   // empty feed, which reads as "nothing happening" rather than "can't reach it".
   const error = auditError ?? approvalsError
   // Before the first successful audit poll there is nothing to count, so the
-  // tiles show a dash instead of a confident zero.
-  const known = audit !== null
+  // tiles show a dash instead of a confident zero. The hero also waits for the
+  // approvals poll: an unanswered queue is unknown, not empty.
+  const auditKnown = audit !== null
+  const known = auditKnown && approvals !== null
+  // Action failures are keyed by approval id; drop any whose request has since
+  // left the queue so a stale note cannot outlive the row it describes.
+  const actionFailures = approvals
+    ? [...actionErrors].flatMap(([id, message]) => {
+        const target = approvals.find(a => a.id === id)
+        return target ? [{ id, message: `${target.summary} — ${message}` }] : []
+      })
+    : []
 
   const allowed = count(events, 'allowed', 'approved')
   const denied = count(events, 'denied', 'rejected')
@@ -32,9 +42,9 @@ export function Overview() {
 
   const stats = [
     { label: 'Pending approvals', value: approvals ? pending : null, href: '#/approvals', warn: pending > 0 },
-    { label: 'Allowed', value: known ? allowed : null, href: '#/audit' },
-    { label: 'Denied', value: known ? denied : null, href: '#/audit' },
-    { label: 'Events recorded', value: known ? total : null, href: '#/audit' },
+    { label: 'Allowed', value: auditKnown ? allowed : null, href: '#/audit' },
+    { label: 'Denied', value: auditKnown ? denied : null, href: '#/audit' },
+    { label: 'Events recorded', value: auditKnown ? total : null, href: '#/audit' },
   ]
 
   const status = statusCopy({ error, known, pending, total, allowed, denied })
@@ -68,7 +78,7 @@ export function Overview() {
         {error && (
           <ErrorNote message={`Can’t reach the management API — ${error}`} />
         )}
-        {actionError && <ErrorNote message={actionError} />}
+        {actionFailures.map(f => <ErrorNote key={f.id} message={f.message} />)}
 
         {first && (
           <ApprovalStrip
@@ -100,12 +110,12 @@ export function Overview() {
         <div className="reveal mt-3.5 grid grid-cols-[1.65fr_1fr] gap-3.5 max-lg:grid-cols-1">
           <Panel>
             <SectionHead title="Latest decisions" meta="8 most recent" />
-            <LatestDecisions events={events.slice(0, 8)} known={known} error={error} />
+            <LatestDecisions events={events.slice(0, 8)} known={auditKnown} error={auditError} />
           </Panel>
 
           <Panel>
             <SectionHead title="Decision mix" meta="Recorded events" />
-            <DecisionMix allowed={allowed} denied={denied} paused={paused} known={known} />
+            <DecisionMix allowed={allowed} denied={denied} paused={paused} known={auditKnown} />
           </Panel>
         </div>
       </div>
@@ -143,7 +153,7 @@ function statusCopy({
       eyebrow: 'Barrier status',
       title: 'Connecting to the',
       highlight: 'gateway',
-      summary: 'Waiting for the first audit poll.',
+      summary: 'Waiting for the first audit and approvals polls.',
       tone: 'ok',
     }
   }
diff --git a/apps/dashboard/src/components/ui.tsx b/apps/dashboard/src/components/ui.tsx
index d53612a..364fbfd 100644
--- a/apps/dashboard/src/components/ui.tsx
+++ b/apps/dashboard/src/components/ui.tsx
@@ -54,11 +54,11 @@ export function SectionHead({ title, meta }: { title: string, meta?: ReactNode }
 }
 
 /** A fetch or action failure. Always distinct from an empty, healthy surface. */
-export function ErrorNote({ message }: { message: string }) {
+export function ErrorNote({ message, className = 'mb-4' }: { message: string, className?: string }) {
   return (
     <p
       role="alert"
-      className="mb-4 rounded-[14px] bg-deny-soft px-4 py-3 text-xs text-deny-ink shadow-[inset_0_0_0_1px_var(--deny-line)]"
+      className={`rounded-[14px] bg-deny-soft px-4 py-3 text-xs text-deny-ink shadow-[inset_0_0_0_1px_var(--deny-line)] ${className}`}
     >
       {message}
     </p>
diff --git a/apps/dashboard/src/hooks.test.tsx b/apps/dashboard/src/hooks.test.tsx
new file mode 100644
index 0000000..93abb18
--- /dev/null
+++ b/apps/dashboard/src/hooks.test.tsx
@@ -0,0 +1,126 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator'
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+
+// React DOM needs a document before `createRoot` runs, and static imports are
+// hoisted above this call, so the React-side modules are loaded afterwards.
+GlobalRegistrator.register()
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const { act } = await import('react')
+const { createRoot } = await import('react-dom/client')
+const { useApprovalActions } = await import('./hooks')
+
+type Actions = ReturnType<typeof useApprovalActions>
+
+interface Deferred {
+  resolve: (res: Response) => void
+  reject: (err: Error) => void
+}
+
+/** Hosts the hook and hands each render's return value to the test. */
+function Probe({ refresh, onRender }: { refresh: () => void, onRender: (actions: Actions) => void }) {
+  onRender(useApprovalActions(refresh))
+  return null
+}
+
+/**
+ * Renders the hook once and exposes its latest return value plus one deferred
+ * per POST, keyed by path, so a test can settle requests in any order.
+ */
+function mount(refresh: () => void) {
+  const pending = new Map<string, Deferred>()
+  globalThis.fetch = ((input: RequestInfo | URL) => new Promise<Response>((resolve, reject) => {
+    pending.set(String(input), { resolve, reject })
+  })) as typeof fetch
+
+  let latest: Actions | null = null
+  const record = (actions: Actions) => {
+    latest = actions
+  }
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  act(() => root.render(<Probe refresh={refresh} onRender={record} />))
+
+  return {
+    pending,
+    get current(): Actions {
+      if (latest === null) {
+        throw new Error('hook did not render')
+      }
+      return latest
+    },
+    unmount: () => act(() => root.unmount()),
+  }
+}
+
+const ok = () => new Response(null, { status: 200 })
+const failed = (path: string) => new Error(`${path} → 500 Internal Server Error`)
+
+describe('useApprovalActions', () => {
+  const originalFetch = globalThis.fetch
+  let harness: ReturnType<typeof mount>
+  let refreshCalls: number
+
+  beforeEach(() => {
+    refreshCalls = 0
+    harness = mount(() => {
+      refreshCalls += 1
+    })
+  })
+  afterEach(() => {
+    harness.unmount()
+    globalThis.fetch = originalFetch
+  })
+
+  test('tracks busy state per id so one request settling leaves the other busy', async () => {
+    await act(async () => {
+      void harness.current.resolve(1, 'approve')
+      void harness.current.resolve(2, 'reject')
+    })
+    expect([...harness.current.busyIds]).toEqual([1, 2])
+
+    await act(async () => {
+      harness.pending.get('/api/approvals/1/approve')!.resolve(ok())
+    })
+    expect([...harness.current.busyIds]).toEqual([2])
+    expect(refreshCalls).toBe(1)
+  })
+
+  test('keeps one id’s error when another id’s action runs', async () => {
+    await act(async () => {
+      void harness.current.resolve(1, 'approve')
+    })
+    await act(async () => {
+      harness.pending.get('/api/approvals/1/approve')!.reject(failed('/api/approvals/1/approve'))
+    })
+    expect(harness.current.actionErrors.get(1)).toContain('500')
+
+    await act(async () => {
+      void harness.current.resolve(2, 'reject')
+    })
+    await act(async () => {
+      harness.pending.get('/api/approvals/2/reject')!.resolve(ok())
+    })
+    expect(harness.current.actionErrors.get(1)).toContain('500')
+    expect(harness.current.actionErrors.has(2)).toBe(false)
+    expect(refreshCalls).toBe(1)
+  })
+
+  test('clears an id’s previous error when that id is retried, and only refreshes on success', async () => {
+    await act(async () => {
+      void harness.current.resolve(1, 'reject')
+    })
+    await act(async () => {
+      harness.pending.get('/api/approvals/1/reject')!.reject(failed('/api/approvals/1/reject'))
+    })
+    expect(harness.current.actionErrors.has(1)).toBe(true)
+    expect(harness.current.busyIds.size).toBe(0)
+    expect(refreshCalls).toBe(0)
+
+    await act(async () => {
+      void harness.current.resolve(1, 'reject')
+    })
+    expect(harness.current.actionErrors.has(1)).toBe(false)
+    expect(harness.current.busyIds.has(1)).toBe(true)
+  })
+})
diff --git a/apps/dashboard/src/hooks.ts b/apps/dashboard/src/hooks.ts
index d478e68..81faab1 100644
--- a/apps/dashboard/src/hooks.ts
+++ b/apps/dashboard/src/hooks.ts
@@ -61,26 +61,32 @@ export function usePolling<T>(fn: () => Promise<T>, intervalMs: number): Polled<
 }
 
 /**
- * Approve/reject actions with one busy flag per approval id. Ids are tracked
- * in a Set so concurrent actions don't clear each other's busy state (a shared
- * single id let a later action re-enable a card while an earlier one was still
- * pending). `refresh` re-polls the caller's approval list after a successful
- * resolve; a failed attempt only surfaces `actionError` and clears the busy
- * flag.
+ * Approve/reject actions with one busy flag and one error slot per approval
+ * id. Both are keyed by id so concurrent actions on different rows never clear
+ * each other's state (a shared single id let a later action re-enable a card
+ * while an earlier one was still pending, and a shared error slot let a later
+ * action hide an earlier failure). `refresh` re-polls the caller's approval
+ * list after a successful resolve; a failed attempt only records that id's
+ * error and clears its busy flag.
  */
 export function useApprovalActions(refresh: () => void) {
   const [busyIds, setBusyIds] = useState(() => new Set<number>())
-  const [actionError, setActionError] = useState<string | null>(null)
+  const [actionErrors, setActionErrors] = useState(() => new Map<number, string>())
 
   const resolve = useCallback(async (id: number, action: 'approve' | 'reject') => {
     setBusyIds(prev => new Set(prev).add(id))
-    setActionError(null)
+    setActionErrors((prev) => {
+      const next = new Map(prev)
+      next.delete(id)
+      return next
+    })
     try {
       await (action === 'approve' ? approve(id) : reject(id))
       refresh()
     }
     catch (e: unknown) {
-      setActionError(e instanceof Error ? e.message : String(e))
+      const message = e instanceof Error ? e.message : String(e)
+      setActionErrors(prev => new Map(prev).set(id, message))
     }
     finally {
       setBusyIds((prev) => {
@@ -91,5 +97,5 @@ export function useApprovalActions(refresh: () => void) {
     }
   }, [refresh])
 
-  return { busyIds, actionError, resolve }
+  return { busyIds, actionErrors, resolve }
 }
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index 857f402..b7691cb 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -7,7 +7,7 @@
  *
  * `--*-ink` are the text-on-surface variants of the three verdict colors: in
  * dark mode they equal the fill color, in light mode they are darkened so the
- * pills, gateway state and editor tokens stay legible on near-white.
+ * pills, error notes and editor tokens stay legible on near-white.
  */
 :root {
   color-scheme: light dark;
diff --git a/apps/dashboard/tsconfig.app.json b/apps/dashboard/tsconfig.app.json
index 8d4e35e..112c873 100644
--- a/apps/dashboard/tsconfig.app.json
+++ b/apps/dashboard/tsconfig.app.json
@@ -9,7 +9,7 @@
 
     /* Bundler mode */
     "moduleResolution": "bundler",
-    "types": ["vite/client"],
+    "types": ["vite/client", "@types/bun"],
     "allowImportingTsExtensions": true,
 
     "noFallthroughCasesInSwitch": true,
diff --git a/bun.lock b/bun.lock
index e2b5dfd..7d7c651 100644
--- a/bun.lock
+++ b/bun.lock
@@ -26,7 +26,9 @@
         "react-simple-code-editor": "^0.14.1",
       },
       "devDependencies": {
+        "@happy-dom/global-registrator": "^20.14.0",
         "@tailwindcss/vite": "^4.1.3",
+        "@types/bun": "^1.4.0",
         "@types/node": "^24.12.3",
         "@types/prismjs": "^1.26.6",
         "@types/react": "^19.2.14",
@@ -177,6 +179,8 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.7.2", "", { "dependencies": { "@eslint/core": "^1.2.1", "levn": "^0.4.1" } }, "sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A=="],
 
+    "@happy-dom/global-registrator": ["@happy-dom/global-registrator@20.14.0", "", { "dependencies": { "@types/node": ">=20.0.0", "happy-dom": "^20.14.0" } }, "sha512-Xn0kdkaA1eHOaFFopr+YQ37sPNTZ3JScpUMz3j4rIsn1Nneqoh94z79iW23Ej0Ytt99+LlFr4JrSDd6ow9c7MQ=="],
+
     "@honmoon/api": ["@honmoon/api@workspace:packages/api"],
 
     "@honmoon/claude-plugin": ["@honmoon/claude-plugin@workspace:packages/claude-plugin"],
@@ -317,6 +321,10 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/whatwg-mimetype": ["@types/whatwg-mimetype@3.0.2", "", {}, "sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA=="],
+
+    "@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
+
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.61.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.61.1", "@typescript-eslint/type-utils": "8.61.1", "@typescript-eslint/utils": "8.61.1", "@typescript-eslint/visitor-keys": "8.61.1", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.61.1", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-ZPlVl3PB3et/59Ne0fv/sci6ZXz4T4Hp4nTJ56i/Y0gR89ARb+KphojTq6j+56E5PIezmOIOOWyY+aWQFd+IkQ=="],
 
     "@typescript-eslint/parser": ["@typescript-eslint/parser@8.61.1", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.61.1", "@typescript-eslint/types": "8.61.1", "@typescript-eslint/typescript-estree": "8.61.1", "@typescript-eslint/visitor-keys": "8.61.1", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-PJ5vePq5/ognBbrIcoC5+SHO5dfpeLPzP9FpLkzWrguoYQEeeSjlJpVwOpo1JRSTEi7dRcwNy4h4dzV70PqHcg=="],
@@ -377,6 +385,8 @@
 
     "browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
 
+    "buffer-image-size": ["buffer-image-size@0.6.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ=="],
+
     "builtin-modules": ["builtin-modules@5.2.0", "", {}, "sha512-02yxLeyxF4dNl6SlY6/5HfRSrSdZ/sCPoxy2kZNP5dZZX8LSAD9aE2gtJIUgWrsQTiMPl3mxESyrobSwvRGisQ=="],
 
     "bun-types": ["bun-types@1.3.14", "", { "dependencies": { "@types/node": "*" } }, "sha512-4N0ig0fEomHt5R0KCFWjovxow98rIoRwKolrYdCcknNwMekCXRnWEUvgu5soYV8QXtVsrUD8B95MBOZGPvr6KQ=="],
@@ -635,6 +645,8 @@
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "happy-dom": ["happy-dom@20.14.0", "", { "dependencies": { "@types/node": ">=20.0.0", "@types/whatwg-mimetype": "^3.0.2", "@types/ws": "^8.18.1", "buffer-image-size": "^0.6.4", "entities": "^7.0.1", "whatwg-mimetype": "^3.0.0", "ws": "^8.21.0" } }, "sha512-4bRh1KzRvKDnFNTlLhzT1RZTpkKhQbQDl9j+7GXszWsvuspYdo29k6OHRf4PwiM6oLb8r/pMWeYiJjkfod5AvQ=="],
+
     "hermes-estree": ["hermes-estree@0.25.1", "", {}, "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw=="],
 
     "hermes-parser": ["hermes-parser@0.25.1", "", { "dependencies": { "hermes-estree": "0.25.1" } }, "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA=="],
@@ -991,10 +1003,14 @@
 
     "vue-eslint-parser": ["vue-eslint-parser@10.4.1", "", { "dependencies": { "debug": "^4.4.0", "eslint-scope": "^8.2.0 || ^9.0.0", "eslint-visitor-keys": "^4.2.0 || ^5.0.0", "espree": "^10.3.0 || ^11.0.0", "esquery": "^1.6.0", "semver": "^7.6.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0" } }, "sha512-Gk6gRDj0n/fkRa3C3l0bBheoBckUq/Rs0F/TvMWIS6nzzx67amAViMe9CkNgsP2tXyQONvGiHQESHwFtZ3aYDA=="],
 
+    "whatwg-mimetype": ["whatwg-mimetype@3.0.0", "", {}, "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
+    "ws": ["ws@8.21.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw=="],
+
     "xml-name-validator": ["xml-name-validator@4.0.0", "", {}, "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="],
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
@@ -1023,6 +1039,8 @@
 
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
+    "@honmoon/dashboard/@types/bun": ["@types/bun@1.4.0", "", { "dependencies": { "bun-types": "1.4.0" } }, "sha512-K+lZULY23vRgK/CfTjFIV+tyifaNdSMlPh9j+6mQ/cLfpOznLyAuzgV/JQysyECpkBQLVMSyvjlr2fBUSA9wFQ=="],
+
     "@stylistic/eslint-plugin/eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="],
 
     "@stylistic/eslint-plugin/espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="],
@@ -1067,6 +1085,8 @@
 
     "validate-npm-package-license/spdx-expression-parse": ["spdx-expression-parse@3.0.1", "", { "dependencies": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" } }, "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q=="],
 
+    "@honmoon/dashboard/@types/bun/bun-types": ["bun-types@1.4.0", "", { "dependencies": { "@types/node": "*" } }, "sha512-iIKw23BspnQQYd3prITOBxeUsxBHnwzX6YJfGMuNOZzeNcMmVqzIIVGRm1l69ogaPQmb4wB6BN8mA5bE9YuC5Q=="],
+
     "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
   }
 }

From 71575e2edcf35ede1a2a8f0674af70cb8abd69d5 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Fri, 4 Sep 2026 10:04:05 +0900
Subject: [PATCH 6/9] fix(dashboard): align page bodies with the header
 container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every route put `max-w-[1440px]` and `px-10` on the same element, so the
page body sat 40px inside the header's content edge at wide viewports.
Use the header's pattern instead — padding on the outer element, a
`max-w-[1440px]` wrapper inside — on Overview, Audit, Policies and
Approvals, and drop the now-redundant max-width from PageHead. Measured
header and body edges match on all four routes at 1536px.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/dashboard/src/components/Approvals.tsx  |  94 ++++++-------
 apps/dashboard/src/components/AuditLog.tsx   | 132 +++++++++---------
 apps/dashboard/src/components/Overview.tsx   |  80 +++++------
 apps/dashboard/src/components/PolicyView.tsx | 138 ++++++++++---------
 apps/dashboard/src/components/ui.tsx         |   2 +-
 5 files changed, 227 insertions(+), 219 deletions(-)

diff --git a/apps/dashboard/src/components/Approvals.tsx b/apps/dashboard/src/components/Approvals.tsx
index 17b1e6e..6e24d86 100644
--- a/apps/dashboard/src/components/Approvals.tsx
+++ b/apps/dashboard/src/components/Approvals.tsx
@@ -16,59 +16,61 @@ export function Approvals() {
   )
 
   return (
-    <section className="mx-auto max-w-[1440px] px-10 pt-[30px] pb-11 max-md:px-6">
-      <PageHead
-        eyebrow="Human decision boundary"
-        title="Approval queue"
-        description="Requests held by a pause verdict until a person resolves them."
-        meta={data ? `${pending.length} pending · polling 1.5s` : 'polling 1.5s'}
-      />
+    <section className="px-10 pt-[30px] pb-11 max-md:px-6">
+      <div className="mx-auto max-w-[1440px]">
+        <PageHead
+          eyebrow="Human decision boundary"
+          title="Approval queue"
+          description="Requests held by a pause verdict until a person resolves them."
+          meta={data ? `${pending.length} pending · polling 1.5s` : 'polling 1.5s'}
+        />
 
-      {error && <ErrorNote message={error} />}
+        {error && <ErrorNote message={error} />}
 
-      <div className="mb-3.5 grid grid-cols-2 gap-3.5">
-        <Panel glassClassName="px-[18px] py-4">
-          <span className="eyebrow tracking-[0.1em]">Waiting now</span>
-          <strong className="mt-1.5 block font-display text-[23px] font-semibold tabular-nums">
-            {data ? pending.length : '—'}
-          </strong>
-        </Panel>
-        <Panel glassClassName="px-[18px] py-4">
-          <span className="eyebrow tracking-[0.1em]">Oldest held since</span>
-          <strong className="mt-1.5 block font-mono text-[23px] font-semibold tabular-nums">
-            {oldest ? formatTime(oldest.created_at) : '—'}
-          </strong>
-        </Panel>
-      </div>
+        <div className="mb-3.5 grid grid-cols-2 gap-3.5">
+          <Panel glassClassName="px-[18px] py-4">
+            <span className="eyebrow tracking-[0.1em]">Waiting now</span>
+            <strong className="mt-1.5 block font-display text-[23px] font-semibold tabular-nums">
+              {data ? pending.length : '—'}
+            </strong>
+          </Panel>
+          <Panel glassClassName="px-[18px] py-4">
+            <span className="eyebrow tracking-[0.1em]">Oldest held since</span>
+            <strong className="mt-1.5 block font-mono text-[23px] font-semibold tabular-nums">
+              {oldest ? formatTime(oldest.created_at) : '—'}
+            </strong>
+          </Panel>
+        </div>
 
-      {data === null
-        ? (
-            <Panel className="reveal">
-              {loading
-                ? <PanelState glyph="…">Loading…</PanelState>
-                : <PanelState glyph="✕" tone="error">The approval queue could not be loaded.</PanelState>}
-            </Panel>
-          )
-        : pending.length === 0
+        {data === null
           ? (
               <Panel className="reveal">
-                <PanelState glyph="✓">No requests are waiting for approval.</PanelState>
+                {loading
+                  ? <PanelState glyph="…">Loading…</PanelState>
+                  : <PanelState glyph="✕" tone="error">The approval queue could not be loaded.</PanelState>}
               </Panel>
             )
-          : (
-              <ul className="grid gap-3.5">
-                {pending.map(p => (
-                  <ApprovalCard
-                    key={p.id}
-                    approval={p}
-                    busy={busyIds.has(p.id)}
-                    error={actionErrors.get(p.id)}
-                    onApprove={() => resolve(p.id, 'approve')}
-                    onReject={() => resolve(p.id, 'reject')}
-                  />
-                ))}
-              </ul>
-            )}
+          : pending.length === 0
+            ? (
+                <Panel className="reveal">
+                  <PanelState glyph="✓">No requests are waiting for approval.</PanelState>
+                </Panel>
+              )
+            : (
+                <ul className="grid gap-3.5">
+                  {pending.map(p => (
+                    <ApprovalCard
+                      key={p.id}
+                      approval={p}
+                      busy={busyIds.has(p.id)}
+                      error={actionErrors.get(p.id)}
+                      onApprove={() => resolve(p.id, 'approve')}
+                      onReject={() => resolve(p.id, 'reject')}
+                    />
+                  ))}
+                </ul>
+              )}
+      </div>
     </section>
   )
 }
diff --git a/apps/dashboard/src/components/AuditLog.tsx b/apps/dashboard/src/components/AuditLog.tsx
index 8676eed..e889e14 100644
--- a/apps/dashboard/src/components/AuditLog.tsx
+++ b/apps/dashboard/src/components/AuditLog.tsx
@@ -9,74 +9,76 @@ export function AuditLog() {
   const events = data ?? []
 
   return (
-    <section className="mx-auto max-w-[1440px] px-10 pt-[30px] pb-11 max-md:px-6">
-      <PageHead
-        eyebrow="Decision trail"
-        title="Audit log"
-        description="Every policy decision recorded by the gateway, newest first."
-        meta={data ? `${events.length} recent events` : undefined}
-      />
+    <section className="px-10 pt-[30px] pb-11 max-md:px-6">
+      <div className="mx-auto max-w-[1440px]">
+        <PageHead
+          eyebrow="Decision trail"
+          title="Audit log"
+          description="Every policy decision recorded by the gateway, newest first."
+          meta={data ? `${events.length} recent events` : undefined}
+        />
 
-      {error && <ErrorNote message={error} />}
+        {error && <ErrorNote message={error} />}
 
-      <Panel className="reveal" glassClassName="overflow-hidden">
-        {data === null
-          ? (
-              loading
-                ? <PanelState glyph="…">Loading…</PanelState>
-                : <PanelState glyph="✕" tone="error">The audit log could not be loaded.</PanelState>
-            )
-          : events.length === 0
-            ? <PanelState glyph="—">No decisions recorded yet.</PanelState>
-            : (
-                <>
-                  <div className="overflow-x-auto">
-                    <table className="w-full border-collapse">
-                      <thead>
-                        <tr className="bg-[var(--surface-soft)] text-left">
-                          <Th>Time</Th>
-                          <Th>Decision</Th>
-                          <Th>Request</Th>
-                          <Th>Rule</Th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {events.map(e => (
-                          <tr
-                            key={e.id}
-                            className="h-[57px] transition-colors duration-500 ease-[var(--ease)] not-first:shadow-[inset_0_1px_0_var(--hair)] hover:bg-[color-mix(in_oklch,var(--surface-soft)_72%,transparent)] motion-reduce:transition-none"
-                          >
-                            <td className="px-[18px] whitespace-nowrap">
-                              <time dateTime={e.timestamp} className="font-mono text-[10.5px] text-dim">
-                                {formatTime(e.timestamp)}
-                              </time>
-                            </td>
-                            <td className="px-[18px]">
-                              <DecisionBadge decision={e.decision} />
-                            </td>
-                            <td className="w-full max-w-0 px-[18px]">
-                              <code
-                                className="block max-w-[680px] truncate font-mono text-[10.5px]"
-                                title={describeFacts(e.facts)}
-                              >
-                                {describeFacts(e.facts)}
-                              </code>
-                            </td>
-                            <td className="px-[18px] font-mono text-[10.5px] whitespace-nowrap text-dim">
-                              {e.rule ?? 'egress'}
-                            </td>
+        <Panel className="reveal" glassClassName="overflow-hidden">
+          {data === null
+            ? (
+                loading
+                  ? <PanelState glyph="…">Loading…</PanelState>
+                  : <PanelState glyph="✕" tone="error">The audit log could not be loaded.</PanelState>
+              )
+            : events.length === 0
+              ? <PanelState glyph="—">No decisions recorded yet.</PanelState>
+              : (
+                  <>
+                    <div className="overflow-x-auto">
+                      <table className="w-full border-collapse">
+                        <thead>
+                          <tr className="bg-[var(--surface-soft)] text-left">
+                            <Th>Time</Th>
+                            <Th>Decision</Th>
+                            <Th>Request</Th>
+                            <Th>Rule</Th>
                           </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                  <footer className="flex min-h-[58px] items-center bg-[var(--surface-soft)] px-[18px] text-[10.5px] text-muted">
-                    Newest decisions appear first.
-                    <span className="meta-mono ml-auto text-[9px]">polling · 2s</span>
-                  </footer>
-                </>
-              )}
-      </Panel>
+                        </thead>
+                        <tbody>
+                          {events.map(e => (
+                            <tr
+                              key={e.id}
+                              className="h-[57px] transition-colors duration-500 ease-[var(--ease)] not-first:shadow-[inset_0_1px_0_var(--hair)] hover:bg-[color-mix(in_oklch,var(--surface-soft)_72%,transparent)] motion-reduce:transition-none"
+                            >
+                              <td className="px-[18px] whitespace-nowrap">
+                                <time dateTime={e.timestamp} className="font-mono text-[10.5px] text-dim">
+                                  {formatTime(e.timestamp)}
+                                </time>
+                              </td>
+                              <td className="px-[18px]">
+                                <DecisionBadge decision={e.decision} />
+                              </td>
+                              <td className="w-full max-w-0 px-[18px]">
+                                <code
+                                  className="block max-w-[680px] truncate font-mono text-[10.5px]"
+                                  title={describeFacts(e.facts)}
+                                >
+                                  {describeFacts(e.facts)}
+                                </code>
+                              </td>
+                              <td className="px-[18px] font-mono text-[10.5px] whitespace-nowrap text-dim">
+                                {e.rule ?? 'egress'}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                    <footer className="flex min-h-[58px] items-center bg-[var(--surface-soft)] px-[18px] text-[10.5px] text-muted">
+                      Newest decisions appear first.
+                      <span className="meta-mono ml-auto text-[9px]">polling · 2s</span>
+                    </footer>
+                  </>
+                )}
+        </Panel>
+      </div>
     </section>
   )
 }
diff --git a/apps/dashboard/src/components/Overview.tsx b/apps/dashboard/src/components/Overview.tsx
index ca4155b..03199bf 100644
--- a/apps/dashboard/src/components/Overview.tsx
+++ b/apps/dashboard/src/components/Overview.tsx
@@ -74,49 +74,51 @@ export function Overview() {
         </div>
       </header>
 
-      <div className="mx-auto max-w-[1440px] px-10 pb-11 max-md:px-6">
-        {error && (
-          <ErrorNote message={`Can’t reach the management API — ${error}`} />
-        )}
-        {actionFailures.map(f => <ErrorNote key={f.id} message={f.message} />)}
+      <div className="px-10 pb-11 max-md:px-6">
+        <div className="mx-auto max-w-[1440px]">
+          {error && (
+            <ErrorNote message={`Can’t reach the management API — ${error}`} />
+          )}
+          {actionFailures.map(f => <ErrorNote key={f.id} message={f.message} />)}
 
-        {first && (
-          <ApprovalStrip
-            approval={first}
-            pending={pending}
-            busy={busyIds.has(first.id)}
-            onApprove={() => resolve(first.id, 'approve')}
-            onReject={() => resolve(first.id, 'reject')}
-          />
-        )}
+          {first && (
+            <ApprovalStrip
+              approval={first}
+              pending={pending}
+              busy={busyIds.has(first.id)}
+              onApprove={() => resolve(first.id, 'approve')}
+              onReject={() => resolve(first.id, 'reject')}
+            />
+          )}
 
-        <div className="reveal mt-3.5 grid grid-cols-4 gap-3.5 max-md:grid-cols-2">
-          {stats.map(s => (
-            <a key={s.label} href={s.href} className="bezel">
-              <div className="glass px-[18px] py-[17px]">
-                <span className="eyebrow tracking-[0.12em]">{s.label}</span>
-                <strong
-                  className={`mt-2 block font-display text-[28px] font-semibold tracking-[-0.025em] tabular-nums ${
-                    s.warn ? 'text-warn-ink' : ''
-                  }`}
-                >
-                  {s.value ?? '—'}
-                </strong>
-              </div>
-            </a>
-          ))}
-        </div>
+          <div className="reveal mt-3.5 grid grid-cols-4 gap-3.5 max-md:grid-cols-2">
+            {stats.map(s => (
+              <a key={s.label} href={s.href} className="bezel">
+                <div className="glass px-[18px] py-[17px]">
+                  <span className="eyebrow tracking-[0.12em]">{s.label}</span>
+                  <strong
+                    className={`mt-2 block font-display text-[28px] font-semibold tracking-[-0.025em] tabular-nums ${
+                      s.warn ? 'text-warn-ink' : ''
+                    }`}
+                  >
+                    {s.value ?? '—'}
+                  </strong>
+                </div>
+              </a>
+            ))}
+          </div>
 
-        <div className="reveal mt-3.5 grid grid-cols-[1.65fr_1fr] gap-3.5 max-lg:grid-cols-1">
-          <Panel>
-            <SectionHead title="Latest decisions" meta="8 most recent" />
-            <LatestDecisions events={events.slice(0, 8)} known={auditKnown} error={auditError} />
-          </Panel>
+          <div className="reveal mt-3.5 grid grid-cols-[1.65fr_1fr] gap-3.5 max-lg:grid-cols-1">
+            <Panel>
+              <SectionHead title="Latest decisions" meta="8 most recent" />
+              <LatestDecisions events={events.slice(0, 8)} known={auditKnown} error={auditError} />
+            </Panel>
 
-          <Panel>
-            <SectionHead title="Decision mix" meta="Recorded events" />
-            <DecisionMix allowed={allowed} denied={denied} paused={paused} known={auditKnown} />
-          </Panel>
+            <Panel>
+              <SectionHead title="Decision mix" meta="Recorded events" />
+              <DecisionMix allowed={allowed} denied={denied} paused={paused} known={auditKnown} />
+            </Panel>
+          </div>
         </div>
       </div>
     </section>
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index 497c30b..ec655c4 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -56,79 +56,81 @@ export function PolicyView() {
   const dirty = active !== null && yaml !== active
 
   return (
-    <section className="mx-auto max-w-[1440px] px-10 pt-[30px] pb-11 max-md:px-6">
-      <PageHead
-        eyebrow="Active gateway configuration"
-        title="Policy"
-        description="Inspect and edit the YAML locally without changing the running gateway."
-        meta={parsed?.version !== undefined ? `version ${parsed.version}` : undefined}
-      />
+    <section className="px-10 pt-[30px] pb-11 max-md:px-6">
+      <div className="mx-auto max-w-[1440px]">
+        <PageHead
+          eyebrow="Active gateway configuration"
+          title="Policy"
+          description="Inspect and edit the YAML locally without changing the running gateway."
+          meta={parsed?.version !== undefined ? `version ${parsed.version}` : undefined}
+        />
 
-      {error && <ErrorNote message={error} />}
+        {error && <ErrorNote message={error} />}
 
-      <div className="grid grid-cols-[minmax(0,1fr)_310px] gap-3.5 max-lg:grid-cols-1">
-        <Panel className="reveal" glassClassName="overflow-hidden">
-          <header className="flex min-h-[58px] items-center gap-2.5 bg-[var(--surface-soft)] px-[18px]">
-            <span className="font-mono text-[10px] font-semibold">Active policy</span>
-            {dirty && (
-              <span className="font-mono text-[8.5px] font-semibold tracking-[0.08em] text-warn-ink uppercase">
-                Local changes
-              </span>
-            )}
-            {dirty && (
-              <button
-                type="button"
-                onClick={() => setYaml(active)}
-                className="action action-quiet ml-auto"
-              >
-                Reset to active
-              </button>
-            )}
-          </header>
-
-          {active === null
-            ? (
-                settled
-                  ? <PanelState glyph="✕" tone="error">The active policy could not be loaded.</PanelState>
-                  : <PanelState glyph="…">Loading…</PanelState>
-              )
-            : (
-                <div className="policy-editor max-h-[62vh] min-h-[24rem] overflow-auto">
-                  <label htmlFor="policy-yaml" className="sr-only">Policy YAML editor</label>
-                  <Editor
-                    value={yaml}
-                    onValueChange={setYaml}
-                    highlight={highlight}
-                    padding={{ top: 16, right: 18, bottom: 16, left: GUTTER + 10 }}
-                    tabSize={2}
-                    insertSpaces
-                    textareaId="policy-yaml"
-                    className="min-h-[24rem]"
-                  />
-                </div>
+        <div className="grid grid-cols-[minmax(0,1fr)_310px] gap-3.5 max-lg:grid-cols-1">
+          <Panel className="reveal" glassClassName="overflow-hidden">
+            <header className="flex min-h-[58px] items-center gap-2.5 bg-[var(--surface-soft)] px-[18px]">
+              <span className="font-mono text-[10px] font-semibold">Active policy</span>
+              {dirty && (
+                <span className="font-mono text-[8.5px] font-semibold tracking-[0.08em] text-warn-ink uppercase">
+                  Local changes
+                </span>
+              )}
+              {dirty && (
+                <button
+                  type="button"
+                  onClick={() => setYaml(active)}
+                  className="action action-quiet ml-auto"
+                >
+                  Reset to active
+                </button>
               )}
+            </header>
 
-          <footer className="px-[18px] py-[13px] text-[10.5px] leading-relaxed text-muted">
-            Edits are local. Live policy hot-reload lands in Phase 5; today the
-            gateway loads policy from its
-            {' '}
-            <code className="rounded-[5px] bg-[var(--surface-soft)] px-1.5 py-0.5 font-mono text-[9.5px] font-medium text-fg">
-              --config
-            </code>
-            {' '}
-            file.
-          </footer>
-        </Panel>
+            {active === null
+              ? (
+                  settled
+                    ? <PanelState glyph="✕" tone="error">The active policy could not be loaded.</PanelState>
+                    : <PanelState glyph="…">Loading…</PanelState>
+                )
+              : (
+                  <div className="policy-editor max-h-[62vh] min-h-[24rem] overflow-auto">
+                    <label htmlFor="policy-yaml" className="sr-only">Policy YAML editor</label>
+                    <Editor
+                      value={yaml}
+                      onValueChange={setYaml}
+                      highlight={highlight}
+                      padding={{ top: 16, right: 18, bottom: 16, left: GUTTER + 10 }}
+                      tabSize={2}
+                      insertSpaces
+                      textareaId="policy-yaml"
+                      className="min-h-[24rem]"
+                    />
+                  </div>
+                )}
 
-        <Panel className="reveal" glassClassName="p-[19px]">
-          <p className="eyebrow tracking-[0.12em] text-dim">Active posture</p>
-          <Posture policy={parsed} />
-          <div className="mt-[18px] rounded-[13px] bg-warn-soft p-[13px] text-[10px] leading-relaxed text-muted">
-            <b className="text-warn-ink">Local editing only.</b>
-            {' '}
-            This surface does not save, deploy, or hot-reload policy.
-          </div>
-        </Panel>
+            <footer className="px-[18px] py-[13px] text-[10.5px] leading-relaxed text-muted">
+              Edits are local. Live policy hot-reload lands in Phase 5; today the
+              gateway loads policy from its
+              {' '}
+              <code className="rounded-[5px] bg-[var(--surface-soft)] px-1.5 py-0.5 font-mono text-[9.5px] font-medium text-fg">
+                --config
+              </code>
+              {' '}
+              file.
+            </footer>
+          </Panel>
+
+          <Panel className="reveal" glassClassName="p-[19px]">
+            <p className="eyebrow tracking-[0.12em] text-dim">Active posture</p>
+            <Posture policy={parsed} />
+            <div className="mt-[18px] rounded-[13px] bg-warn-soft p-[13px] text-[10px] leading-relaxed text-muted">
+              <b className="text-warn-ink">Local editing only.</b>
+              {' '}
+              This surface does not save, deploy, or hot-reload policy.
+            </div>
+          </Panel>
+        </div>
       </div>
     </section>
   )
diff --git a/apps/dashboard/src/components/ui.tsx b/apps/dashboard/src/components/ui.tsx
index 364fbfd..c584e9d 100644
--- a/apps/dashboard/src/components/ui.tsx
+++ b/apps/dashboard/src/components/ui.tsx
@@ -30,7 +30,7 @@ export function PageHead({
   meta?: ReactNode
 }) {
   return (
-    <header className="mx-auto mb-6 flex max-w-[1440px] flex-wrap items-end gap-x-6 gap-y-3">
+    <header className="mb-6 flex flex-wrap items-end gap-x-6 gap-y-3">
       <div>
         <p className="eyebrow mb-2">{eyebrow}</p>
         <h1 className="font-display text-[30px] leading-[1.15] font-semibold tracking-[-0.025em]">

From c12d69e6edaad3fbc1ea9776c570110dc6fd377d Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Fri, 4 Sep 2026 10:13:16 +0900
Subject: [PATCH 7/9] fix(dashboard): match secondary pages' vertical rhythm to
 the Overview hero

Audit, Policies and Approvals sat 30px below the app header and 24px
above their first panel, while the Overview hero uses 32px and 50px.
Use `pt-8` on the three sections and `mb-[50px]` on PageHead so every
route lands its first panel at the same offset.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/dashboard/src/components/Approvals.tsx  | 2 +-
 apps/dashboard/src/components/AuditLog.tsx   | 2 +-
 apps/dashboard/src/components/PolicyView.tsx | 2 +-
 apps/dashboard/src/components/ui.tsx         | 9 +++++++--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/dashboard/src/components/Approvals.tsx b/apps/dashboard/src/components/Approvals.tsx
index 6e24d86..52d703a 100644
--- a/apps/dashboard/src/components/Approvals.tsx
+++ b/apps/dashboard/src/components/Approvals.tsx
@@ -16,7 +16,7 @@ export function Approvals() {
   )
 
   return (
-    <section className="px-10 pt-[30px] pb-11 max-md:px-6">
+    <section className="px-10 pt-8 pb-11 max-md:px-6">
       <div className="mx-auto max-w-[1440px]">
         <PageHead
           eyebrow="Human decision boundary"
diff --git a/apps/dashboard/src/components/AuditLog.tsx b/apps/dashboard/src/components/AuditLog.tsx
index e889e14..e5dc9e8 100644
--- a/apps/dashboard/src/components/AuditLog.tsx
+++ b/apps/dashboard/src/components/AuditLog.tsx
@@ -9,7 +9,7 @@ export function AuditLog() {
   const events = data ?? []
 
   return (
-    <section className="px-10 pt-[30px] pb-11 max-md:px-6">
+    <section className="px-10 pt-8 pb-11 max-md:px-6">
       <div className="mx-auto max-w-[1440px]">
         <PageHead
           eyebrow="Decision trail"
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index ec655c4..a180309 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -56,7 +56,7 @@ export function PolicyView() {
   const dirty = active !== null && yaml !== active
 
   return (
-    <section className="px-10 pt-[30px] pb-11 max-md:px-6">
+    <section className="px-10 pt-8 pb-11 max-md:px-6">
       <div className="mx-auto max-w-[1440px]">
         <PageHead
           eyebrow="Active gateway configuration"
diff --git a/apps/dashboard/src/components/ui.tsx b/apps/dashboard/src/components/ui.tsx
index c584e9d..8e15a94 100644
--- a/apps/dashboard/src/components/ui.tsx
+++ b/apps/dashboard/src/components/ui.tsx
@@ -17,7 +17,12 @@ export function Panel({
   )
 }
 
-/** Page title block sharing the 40px content axis with the first surface. */
+/**
+ * Page title block: eyebrow, display title, one-line description, optional
+ * mono meta. Its bottom margin equals the Overview hero's gap to its first
+ * card (hero `pb-9` plus the grid's `mt-3.5`), so every route lands its
+ * first panel at the same offset below the app header.
+ */
 export function PageHead({
   eyebrow,
   title,
@@ -30,7 +35,7 @@ export function PageHead({
   meta?: ReactNode
 }) {
   return (
-    <header className="mb-6 flex flex-wrap items-end gap-x-6 gap-y-3">
+    <header className="mb-[50px] flex flex-wrap items-end gap-x-6 gap-y-3">
       <div>
         <p className="eyebrow mb-2">{eyebrow}</p>
         <h1 className="font-display text-[30px] leading-[1.15] font-semibold tracking-[-0.025em]">

From 8e782dcba304abe1f44caab34c351230fac5fd14 Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Fri, 4 Sep 2026 10:34:09 +0900
Subject: [PATCH 8/9] fix(dashboard): address Codex and Greptile findings on
 the redesign

- usePolling: commit a run when it is newer than the last *committed* run
  rather than only when it is the latest *started* run. An API that is
  consistently slower than the poll interval now shows stale-but-real data
  instead of discarding every response and sitting on Loading forever.
  Add an ordering test covering the slow-first, newer-over-older and
  late-older-dropped cases.
- Header: below `md` the nav capsule wraps onto its own full-width row and
  scrolls horizontally as a last resort, so every route stays reachable at
  360-430px instead of overflowing the viewport.
- Policy posture: describe the egress fallback as applying when neither the
  deny nor the allow list matches; the engine checks deny before allow, so
  "not on the allow list" was wrong for policies with a deny list.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/dashboard/src/App.tsx                   | 16 ++++--
 apps/dashboard/src/components/PolicyView.tsx |  5 +-
 apps/dashboard/src/hooks.test.tsx            | 59 +++++++++++++++++++-
 apps/dashboard/src/hooks.ts                  | 47 +++++++++-------
 4 files changed, 100 insertions(+), 27 deletions(-)

diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
index 29a0d7d..3a71488 100644
--- a/apps/dashboard/src/App.tsx
+++ b/apps/dashboard/src/App.tsx
@@ -50,8 +50,14 @@ function App() {
 
   return (
     <div className="min-h-screen bg-bg text-fg">
-      <header className="relative z-10 h-[72px] bg-[color-mix(in_oklch,var(--bg)_88%,transparent)] px-10 shadow-[inset_0_-1px_0_var(--hair)] max-md:px-6">
-        <div className="mx-auto flex h-full max-w-[1440px] items-center">
+      {/*
+        Below `md` the nav capsule cannot fit beside the wordmark, so the
+        header grows and the capsule wraps onto its own full-width row; it
+        also scrolls horizontally as a last resort so no route is ever pushed
+        off-screen.
+      */}
+      <header className="relative z-10 h-[72px] bg-[color-mix(in_oklch,var(--bg)_88%,transparent)] px-10 shadow-[inset_0_-1px_0_var(--hair)] max-md:h-auto max-md:px-6 max-md:py-2">
+        <div className="mx-auto flex h-full max-w-[1440px] items-center max-md:flex-wrap max-md:gap-y-1">
           <a
             href="#/"
             className="flex min-h-11 items-center gap-2.5 rounded-md font-mono text-base font-semibold tracking-[-0.02em] text-fg no-underline"
@@ -63,8 +69,8 @@ function App() {
             honmoon
           </a>
 
-          <div className="ml-auto flex items-center rounded-full bg-[var(--surface-glass)] p-1 shadow-[inset_0_1px_0_var(--hair),inset_0_0_0_1px_var(--hair),var(--shadow)]">
-            <nav aria-label="Dashboard pages" className="flex gap-0.5">
+          <div className="ml-auto flex items-center rounded-full bg-[var(--surface-glass)] p-1 shadow-[inset_0_1px_0_var(--hair),inset_0_0_0_1px_var(--hair),var(--shadow)] max-md:ml-0 max-md:w-full max-md:overflow-x-auto">
+            <nav aria-label="Dashboard pages" className="flex gap-0.5 max-md:flex-1 max-md:justify-between">
               {NAV.map(item => (
                 <a
                   key={item.slug}
@@ -92,7 +98,7 @@ function App() {
             <span
               role="img"
               aria-label="Account"
-              className="mr-0.5 grid size-9 place-items-center rounded-full bg-[var(--surface-soft)] text-muted shadow-[inset_0_0_0_1px_var(--hair)]"
+              className="mr-0.5 grid size-9 shrink-0 place-items-center rounded-full bg-[var(--surface-soft)] text-muted shadow-[inset_0_0_0_1px_var(--hair)] max-md:hidden"
             >
               <svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                 <circle cx="8" cy="5.5" r="3" stroke="currentColor" strokeWidth="1.4" />
diff --git a/apps/dashboard/src/components/PolicyView.tsx b/apps/dashboard/src/components/PolicyView.tsx
index a180309..9f78153 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -154,8 +154,9 @@ function Posture({ policy }: { policy: Policy | null }) {
         {fallback === 'deny' ? 'Fail closed by default.' : `Unmatched egress is ${VERDICT_PAST[fallback]}.`}
       </h2>
       <p className="mt-2 text-[11px] leading-relaxed text-muted">
-        Egress not on the allow list gets the default verdict; protocol rules run
-        first-match-wins before a request reaches its destination.
+        Egress on neither list gets the default verdict (the deny list is checked
+        before the allow list); protocol rules run first-match-wins before a
+        request reaches its destination.
       </p>
       <dl className="mt-5 rounded-[14px] bg-[var(--surface-soft)] px-[13px] py-1">
         {facts.map(([label, value]) => (
diff --git a/apps/dashboard/src/hooks.test.tsx b/apps/dashboard/src/hooks.test.tsx
index 93abb18..d696933 100644
--- a/apps/dashboard/src/hooks.test.tsx
+++ b/apps/dashboard/src/hooks.test.tsx
@@ -1,3 +1,4 @@
+import type { Polled } from './hooks'
 import { GlobalRegistrator } from '@happy-dom/global-registrator'
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
 
@@ -8,7 +9,7 @@ GlobalRegistrator.register()
 
 const { act } = await import('react')
 const { createRoot } = await import('react-dom/client')
-const { useApprovalActions } = await import('./hooks')
+const { useApprovalActions, usePolling } = await import('./hooks')
 
 type Actions = ReturnType<typeof useApprovalActions>
 
@@ -124,3 +125,59 @@ describe('useApprovalActions', () => {
     expect(harness.current.busyIds.has(1)).toBe(true)
   })
 })
+
+/** Hosts `usePolling` on a 10ms interval and reports each render's value. */
+function PollProbe({ fn, onRender }: { fn: () => Promise<number>, onRender: (polled: Polled<number>) => void }) {
+  onRender(usePolling(fn, 10))
+  return null
+}
+
+describe('usePolling', () => {
+  test('commits a slow response when nothing newer has landed, but never over a newer one', async () => {
+    const runs: Array<(value: number) => void> = []
+    const fn = () => new Promise<number>((resolve) => {
+      runs.push(resolve)
+    })
+    let latest: Polled<number> | null = null
+    const record = (polled: Polled<number>) => {
+      latest = polled
+    }
+    const current = (): Polled<number> => {
+      if (latest === null) {
+        throw new Error('hook did not render')
+      }
+      return latest
+    }
+    const container = document.createElement('div')
+    const root = createRoot(container)
+    act(() => root.render(<PollProbe fn={fn} onRender={record} />))
+
+    // Let several interval ticks start while the first request is still open.
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 45))
+    })
+    expect(runs.length).toBeGreaterThanOrEqual(3)
+    expect(current().loading).toBe(true)
+
+    // The oldest run is still the newest *committed* one, so it must land.
+    await act(async () => {
+      runs[0]!(1)
+    })
+    expect(current().data).toBe(1)
+    expect(current().loading).toBe(false)
+
+    // A newer run commits over it…
+    await act(async () => {
+      runs[2]!(3)
+    })
+    expect(current().data).toBe(3)
+
+    // …and an older run that settles late is dropped.
+    await act(async () => {
+      runs[1]!(2)
+    })
+    expect(current().data).toBe(3)
+
+    act(() => root.unmount())
+  })
+})
diff --git a/apps/dashboard/src/hooks.ts b/apps/dashboard/src/hooks.ts
index 81faab1..f0e33fb 100644
--- a/apps/dashboard/src/hooks.ts
+++ b/apps/dashboard/src/hooks.ts
@@ -13,8 +13,12 @@ export interface Polled<T> {
  * `refresh`. Pass a stable `fn` reference (e.g. a module-level API function) so
  * the polling interval isn't torn down and recreated on every render.
  *
- * State is only updated while the effect is mounted, so a slow in-flight request
- * that resolves after unmount (or after `fn`/interval changes) is ignored.
+ * Overlapping polls commit in order: a response from an older run never
+ * overwrites one from a newer run, but it is still applied when nothing newer
+ * has landed. An API that is consistently slower than the interval therefore
+ * shows stale-but-real data instead of an endless loading state. State is only
+ * updated while the effect is mounted, so a request that resolves after
+ * unmount (or after `fn`/interval changes) is ignored.
  */
 export function usePolling<T>(fn: () => Promise<T>, intervalMs: number): Polled<T> {
   const [data, setData] = useState<T | null>(null)
@@ -26,28 +30,33 @@ export function usePolling<T>(fn: () => Promise<T>, intervalMs: number): Polled<
 
   useEffect(() => {
     let alive = true
-    // Guard against overlapping polls: a slow earlier request must not
-    // overwrite newer state with stale data, so only the latest run commits.
+    // Guard against overlapping polls: a run may commit only if no newer run
+    // has committed yet. Comparing against the last *committed* run (not the
+    // last *started* one) is what keeps a slow API from discarding every
+    // response.
     let latestRun = 0
+    let lastCommitted = 0
     const run = () => {
       const runId = ++latestRun
-      fn()
-        .then((d) => {
-          if (alive && runId === latestRun) {
+      const commit = (apply: () => void) => {
+        if (!alive || runId <= lastCommitted) {
+          return
+        }
+        lastCommitted = runId
+        apply()
+        setLoading(false)
+      }
+      fn().then(
+        (d) => {
+          commit(() => {
             setData(d)
             setError(null)
-          }
-        })
-        .catch((e: unknown) => {
-          if (alive && runId === latestRun) {
-            setError(e instanceof Error ? e.message : String(e))
-          }
-        })
-        .finally(() => {
-          if (alive && runId === latestRun) {
-            setLoading(false)
-          }
-        })
+          })
+        },
+        (e: unknown) => {
+          commit(() => setError(e instanceof Error ? e.message : String(e)))
+        },
+      )
     }
     run()
     const id = setInterval(run, intervalMs)

From 9545d0e6a81c13ebf23045376286ac559aacd53e Mon Sep 17 00:00:00 2001
From: DANNY NA <danny@pusan.ac.kr>
Date: Fri, 4 Sep 2026 11:17:44 +0900
Subject: [PATCH 9/9] fix(dashboard): keep approval actions in their own row on
 phones and fix light-mode focus contrast

- ApprovalActions accepts placement classes; the approval card passes
  `max-md:col-span-full max-md:justify-self-end` so the Deny/Approve pair
  gets a full-width row below `md` instead of being auto-placed into the
  44px icon track.
- The shared `:focus-visible` ring uses `--accent-ink`, which equals
  `--accent` in dark mode and is the darkened variant in light mode
  (~6:1 against the near-white surfaces instead of ~1.6:1).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/dashboard/src/components/ApprovalActions.tsx | 5 ++++-
 apps/dashboard/src/components/Approvals.tsx       | 5 +++++
 apps/dashboard/src/index.css                      | 8 ++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/ApprovalActions.tsx b/apps/dashboard/src/components/ApprovalActions.tsx
index 6ca07e4..afab80f 100644
--- a/apps/dashboard/src/components/ApprovalActions.tsx
+++ b/apps/dashboard/src/components/ApprovalActions.tsx
@@ -8,15 +8,18 @@ export function ApprovalActions({
   busy,
   onApprove,
   onReject,
+  className = '',
 }: {
   /** Names the request for assistive technology, e.g. "Approve: DROP TABLE…". */
   summary: string
   busy: boolean
   onApprove: () => void
   onReject: () => void
+  /** Placement classes for the host layout (e.g. grid spans); never styling. */
+  className?: string
 }) {
   return (
-    <div className="flex shrink-0 gap-2" aria-busy={busy || undefined}>
+    <div className={`flex shrink-0 gap-2 ${className}`} aria-busy={busy || undefined}>
       <button
         type="button"
         className="action action-deny"
diff --git a/apps/dashboard/src/components/Approvals.tsx b/apps/dashboard/src/components/Approvals.tsx
index 52d703a..e09b759 100644
--- a/apps/dashboard/src/components/Approvals.tsx
+++ b/apps/dashboard/src/components/Approvals.tsx
@@ -131,11 +131,16 @@ function ApprovalCard({
             )}
           </p>
         </div>
+        {/*
+          Below `md` the card is two columns, so auto-placement would drop the
+          buttons into the 44px icon track; give them their own full row.
+        */}
         <ApprovalActions
           summary={approval.summary}
           busy={busy}
           onApprove={onApprove}
           onReject={onReject}
+          className="max-md:col-span-full max-md:justify-self-end"
         />
       </div>
     </li>
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index b7691cb..9ae3dbc 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -125,9 +125,13 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-/* One focus treatment for everything focusable, in both themes. */
+/*
+ * One focus treatment for everything focusable, in both themes. `--accent-ink`
+ * equals `--accent` in dark mode and is the darkened variant in light mode,
+ * where the raw accent would sit at ~1.6:1 against the near-white surfaces.
+ */
 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 3px;
 }