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 581a173..d4b0213 100644
--- a/.please/docs/review/rejected-findings.jsonl
+++ b/.please/docs/review/rejected-findings.jsonl
@@ -1 +1,11 @@
 {"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"}
+{"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/AGENTS.md b/apps/dashboard/AGENTS.md
index c25a04c..c014c97 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`, `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. |
 | `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`). |
@@ -49,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 f140ff3..3a71488 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'
@@ -8,13 +8,16 @@ 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
 
 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,55 +37,109 @@ 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. 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-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">
+      {/*
+        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"
+          >
+            <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)] 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}
                   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={reachable} settled={settled} />
 
-        <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 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" />
+                <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 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'
+  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..afab80f
--- /dev/null
+++ b/apps/dashboard/src/components/ApprovalActions.tsx
@@ -0,0 +1,57 @@
+/**
+ * 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,
+  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 ${className}`} aria-busy={busy || undefined}>
+      <button
+        type="button"
+        className="action action-deny"
+        disabled={busy}
+        onClick={onReject}
+        aria-label={busy ? `Resolving… ${summary}` : `Deny: ${summary}`}
+      >
+        {busy
+          ? 'Resolving…'
+          : (
+              <>
+                <span aria-hidden="true">✕</span>
+                Deny
+              </>
+            )}
+      </button>
+      <button
+        type="button"
+        className="action action-approve"
+        disabled={busy}
+        onClick={onApprove}
+        aria-label={busy ? `Resolving… ${summary}` : `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..e09b759 100644
--- a/apps/dashboard/src/components/Approvals.tsx
+++ b/apps/dashboard/src/components/Approvals.tsx
@@ -1,71 +1,76 @@
 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, actionErrors, 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="px-10 pt-8 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} />}
 
-      {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
-        ? (
-            <p className="text-sm text-zinc-500">
-              No requests are waiting for approval.
-            </p>
-          )
-        : (
-            <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>
-          )}
+        {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
+            ? (
+                <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>
   )
 }
@@ -73,58 +78,79 @@ 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="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)]">
+        {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"
         >
-          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>
+        {/*
+          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>
   )
 }
 
-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..e5dc9e8 100644
--- a/apps/dashboard/src/components/AuditLog.tsx
+++ b/apps/dashboard/src/components/AuditLog.tsx
@@ -2,67 +2,94 @@ 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="px-10 pt-8 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 && (
-        <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>
+      </div>
     </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..41d5efe 100644
--- a/apps/dashboard/src/components/DecisionBadge.tsx
+++ b/apps/dashboard/src/components/DecisionBadge.tsx
@@ -1,19 +1,32 @@
 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.
+ */
+interface Label {
+  glyph: string
+  text: string
+}
+
+const LABELS: Record<Decision, Label> = {
+  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 }) {
+  // 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={`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..03199bf 100644
--- a/apps/dashboard/src/components/Overview.tsx
+++ b/apps/dashboard/src/components/Overview.tsx
@@ -1,77 +1,319 @@
-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, actionErrors, 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. 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')
+  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: 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 })
+
   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="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')}
+            />
+          )}
+
+          <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>
+
+            <Panel>
+              <SectionHead title="Decision mix" meta="Recorded events" />
+              <DecisionMix allowed={allowed} denied={denied} paused={paused} known={auditKnown} />
+            </Panel>
+          </div>
+        </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 and approvals polls.',
+      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',
+  }
+}
 
-      {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 —
+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(' · ')
+
+  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..9f78153 100644
--- a/apps/dashboard/src/components/PolicyView.tsx
+++ b/apps/dashboard/src/components/PolicyView.tsx
@@ -1,9 +1,11 @@
+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'
 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 +15,157 @@ 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
+
+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')
+    .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="px-10 pt-8 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} />}
+
+        <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>
 
-      {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>
-      )}
+            {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>
+                )}
 
-      {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' }}
-          />
+            <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>
+  )
+}
 
-      <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.
+/** 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>
+  }
+  const fallback = policy.egress?.default ?? DEFAULT_EGRESS_VERDICT
+  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 (
+    <>
+      <h2 className="mt-3 font-display text-lg font-semibold tracking-[-0.015em]">
+        {fallback === 'deny' ? 'Fail closed by default.' : `Unmatched egress is ${VERDICT_PAST[fallback]}.`}
+      </h2>
+      <p className="mt-2 text-[11px] leading-relaxed text-muted">
+        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>
-    </section>
+      <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..8e15a94
--- /dev/null
+++ b/apps/dashboard/src/components/ui.tsx
@@ -0,0 +1,99 @@
+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: 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,
+  description,
+  meta,
+}: {
+  eyebrow: string
+  title: string
+  description: string
+  meta?: ReactNode
+}) {
+  return (
+    <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]">
+          {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, className = 'mb-4' }: { message: string, className?: string }) {
+  return (
+    <p
+      role="alert"
+      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>
+  )
+}
+
+/** 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.test.tsx b/apps/dashboard/src/hooks.test.tsx
new file mode 100644
index 0000000..d696933
--- /dev/null
+++ b/apps/dashboard/src/hooks.test.tsx
@@ -0,0 +1,183 @@
+import type { Polled } from './hooks'
+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, usePolling } = 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)
+  })
+})
+
+/** 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 23aecd7..f0e33fb 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
@@ -12,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)
@@ -25,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)
@@ -58,3 +68,43 @@ export function usePolling<T>(fn: () => Promise<T>, intervalMs: number): Polled<
 
   return { data, error, loading, refresh }
 }
+
+/**
+ * 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 [actionErrors, setActionErrors] = useState(() => new Map<number, string>())
+
+  const resolve = useCallback(async (id: number, action: 'approve' | 'reject') => {
+    setBusyIds(prev => new Set(prev).add(id))
+    setActionErrors((prev) => {
+      const next = new Map(prev)
+      next.delete(id)
+      return next
+    })
+    try {
+      await (action === 'approve' ? approve(id) : reject(id))
+      refresh()
+    }
+    catch (e: unknown) {
+      const message = e instanceof Error ? e.message : String(e)
+      setActionErrors(prev => new Map(prev).set(id, message))
+    }
+    finally {
+      setBusyIds((prev) => {
+        const next = new Set(prev)
+        next.delete(id)
+        return next
+      })
+    }
+  }, [refresh])
+
+  return { busyIds, actionErrors, resolve }
+}
diff --git a/apps/dashboard/src/index.css b/apps/dashboard/src/index.css
index ec8f88b..9ae3dbc 100644
--- a/apps/dashboard/src/index.css
+++ b/apps/dashboard/src/index.css
@@ -1,9 +1,380 @@
 @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, error notes 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(60% 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. `--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-ink);
+  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;
+    }
+  }
 }
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=="],
   }
 }