add dense dashboard mock routes

.beads/issues.jsonl

@@ -27,6 +27,7 @@
 {"_type":"issue","id":"islandflow-ayo","title":"Drop stale backlog events from live fanout","description":"Follow-up to live freshness rollout: /ws/live was still fanning out stale backlog events for freshness-gated channels, which kept tape panes in Live feed behind despite active synthetic ingest. Gate fanout and cache ingest by freshness for options/nbbo/equities/flow.","status":"closed","priority":1,"issue_type":"bug","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:26:39Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:26:44Z","started_at":"2026-04-28T21:26:44Z","closed_at":"2026-04-28T21:26:44Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-0v6","title":"Fix tape freshness, NBBO coverage, pause controls, and filter popup","description":"Implement the tape fixes requested for synthetic options notional sizing, strict live freshness, live-mode pause/resume behavior, stronger NBBO snapshot coverage, and moving flow filters behind a popup. Includes server-side live cache changes, web terminal state/UI changes, and tests for synthetic pricing, live snapshot freshness/NBBO retention, and live pause/filter interactions.","status":"closed","priority":1,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:02:52Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:13:38Z","started_at":"2026-04-28T21:02:57Z","closed_at":"2026-04-28T21:13:38Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-e4r","title":"Implement smart-money flow filtering and synthetic firehose modes","description":"Implement the approved multi-surface plan for named synthetic market profiles, options raw-vs-signal filtering, live/API filter contracts, Tape page client-side flow filters, firehose-readiness improvements, tests, and README updates.","status":"closed","priority":1,"issue_type":"feature","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:10:49Z","created_by":"dirtydishes","updated_at":"2026-04-28T20:29:29Z","started_at":"2026-04-28T20:10:53Z","closed_at":"2026-04-28T20:29:29Z","close_reason":"Implemented synthetic market profiles, options signal-path filtering, signal-aware API/replay contracts, Tape page filters, tests, and README updates. Follow-up tracked in islandflow-biq.","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-5bv","title":"add four dense dashboard mock routes","description":"Add four more main dashboard page mock studies in the existing terminal style: no cards, dense at-a-glance market context, and professional copy for experienced traders.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-11T23:40:25Z","created_by":"dirtydishes","updated_at":"2026-06-11T23:48:40Z","started_at":"2026-06-11T23:40:32Z","closed_at":"2026-06-11T23:48:40Z","close_reason":"Added four dense main-dashboard mock routes and validated the web build plus desktop/mobile layout overflow.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-w2y","title":"tighten mock route terminal copy","description":"Revise mock route UI copy to read like an experienced trader terminal instead of explanatory walkthrough text. Keep the existing no-card mock route work and update the existing turn document for the minor follow-up.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-06-11T23:35:21Z","created_by":"dirtydishes","updated_at":"2026-06-11T23:37:45Z","closed_at":"2026-06-11T23:37:45Z","close_reason":"Tightened mock route UI copy to professional trader-terminal language and updated the existing turn document.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-q7v","title":"add four no-card mock redesign routes","description":"Add four additional mock redesign routes to the web app without replacing the existing mock1-mock4 routes. The new routes should avoid card-style structures entirely and show varied market-activity workflows grounded in the Islandflow options flow -\u003e flow packet -\u003e smart money alert reasoning model.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-06-11T22:14:44Z","created_by":"dirtydishes","updated_at":"2026-06-11T22:28:22Z","closed_at":"2026-06-11T22:28:22Z","close_reason":"Added /mock5-/mock8 no-card mock redesign routes, created required turn documentation, and validated with web build plus browser DOM checks.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-2x7","title":"Redesign mock routes from the ground up","description":"Rework the /mock1 through /mock4 frontend concepts so each route has a fresh layout, navigation treatment, and palette independent of the existing terminal chrome.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-11T09:09:12Z","created_by":"dirtydishes","updated_at":"2026-06-11T09:10:42Z","started_at":"2026-06-11T09:09:17Z","closed_at":"2026-06-11T09:10:42Z","close_reason":"Implemented fresh mock redesigns for /mock1 through /mock4, bypassed the terminal shell for mock routes, verified in the in-app browser, and passed bun web build plus focused route/terminal tests.","dependency_count":0,"dependent_count":0,"comment_count":0}

apps/web/app/dashboard-mocks.tsx

@@ -1,7 +1,19 @@
 import Link from "next/link";
 import type { CSSProperties, ReactNode } from "react";
 
-type MockVariant = "mock1" | "mock2" | "mock3" | "mock4" | "mock5" | "mock6" | "mock7" | "mock8";
+type MockVariant =
+  | "mock1"
+  | "mock2"
+  | "mock3"
+  | "mock4"
+  | "mock5"
+  | "mock6"
+  | "mock7"
+  | "mock8"
+  | "mock9"
+  | "mock10"
+  | "mock11"
+  | "mock12";
 
 type DashboardMockProps = {
   variant: MockVariant;
@@ -71,6 +83,34 @@ const concepts: Record<MockVariant, Concept> = {
     routeName: "Matrix",
     premise: "Options, packet, alert, and market context stitched into one activity map.",
     bodyClass: "mock-graph"
+  },
+  mock9: {
+    title: "Market Command",
+    shortName: "Command",
+    routeName: "Main Board",
+    premise: "Session regime, priority symbols, active packets, and invalidation levels without route switching.",
+    bodyClass: "mock-command"
+  },
+  mock10: {
+    title: "Signal Radar",
+    shortName: "Radar",
+    routeName: "Signal Radar",
+    premise: "Cross-symbol pressure ranked by confirmation, decay, source count, and nearest decision level.",
+    bodyClass: "mock-radar"
+  },
+  mock11: {
+    title: "Risk Ledger",
+    shortName: "Risk",
+    routeName: "Risk Ledger",
+    premise: "Directional exposure, live invalidations, sector crowding, and stale assumptions in one operating view.",
+    bodyClass: "mock-risk"
+  },
+  mock12: {
+    title: "Source Control",
+    shortName: "Sources",
+    routeName: "Source Control",
+    premise: "Feed quality, lag, packet eligibility, route pressure, and replay gaps for the current session.",
+    bodyClass: "mock-source"
   }
 };
 
@@ -82,7 +122,11 @@ const variantOrder: MockVariant[] = [
   "mock5",
   "mock6",
   "mock7",
-  "mock8"
+  "mock8",
+  "mock9",
+  "mock10",
+  "mock11",
+  "mock12"
 ];
 
 const symbols = [
@@ -375,6 +419,72 @@ const graphLanes = [
   }
 ];
 
+const commandMetrics = [
+  ["Regime", "Risk-on, narrow", "QQQ +0.82%, IWM lagging"],
+  ["Priority", "AAPL / TSLA / NVDA", "3 packets above 70"],
+  ["Decision", "194.50 AAPL", "acceptance level"],
+  ["Risk", "AMZN contra", "put sweep against basket"]
+];
+
+const commandRows = [
+  ["09:42:51", "AAPL", "PKT-8841", "stealth accumulation", "86", "194.50", "confirm"],
+  ["09:41:58", "TSLA", "PKT-8838", "momentum ignition", "71", "178.80", "watch"],
+  ["09:40:34", "NVDA", "PKT-8834", "call wall absorption", "63", "120.40", "hold"],
+  ["09:39:22", "AMZN", "PKT-8827", "put divergence", "39", "186.20", "reject"],
+  ["09:38:59", "IWM", "PKT-8821", "small-cap echo", "44", "205.00", "watch"]
+];
+
+const commandLevels = [
+  ["AAPL", "194.50", "above", "packet valid"],
+  ["QQQ", "458.20", "above", "market confirm"],
+  ["NVDA", "120.40", "below", "absorption fails"],
+  ["TSLA", "178.80", "above", "ignition intact"]
+];
+
+const radarRows = [
+  ["AAPL", "92", "5", "00:29", "ask lift", "194.50", "bullish"],
+  ["TSLA", "78", "3", "01:14", "block call", "178.80", "bullish"],
+  ["NVDA", "64", "2", "02:06", "absorbed", "120.40", "watch"],
+  ["AMZN", "41", "2", "03:51", "put sweep", "186.20", "bearish"],
+  ["IWM", "38", "1", "05:08", "basket lag", "205.00", "watch"]
+];
+
+const radarBands = [
+  { label: "Mega cap tech", score: 88, symbols: "AAPL MSFT AMZN", tone: "good" },
+  { label: "AI semis", score: 63, symbols: "NVDA AMD AVGO", tone: "watch" },
+  { label: "Beta", score: 74, symbols: "TSLA COIN PLTR", tone: "info" },
+  { label: "Small caps", score: 38, symbols: "IWM KRE XBI", tone: "bad" }
+];
+
+const riskRows = [
+  ["Long delta", "$12.8M", "AAPL / TSLA", "+18%", "194.50 fail"],
+  ["Short premium", "$3.1M", "AMZN puts", "+6%", "186.20 reclaim"],
+  ["Crowded calls", "$8.4M", "front-week tech", "+31%", "QQQ loses 458.20"],
+  ["Replay debt", "2 gaps", "09:36-09:39", "open", "audit before alert"]
+];
+
+const riskInvalidations = [
+  ["AAPL", "194.50", "2 ticks", "live"],
+  ["QQQ", "458.20", "5 ticks", "live"],
+  ["TSLA", "178.80", "14 ticks", "watch"],
+  ["AMZN", "186.20", "9 ticks", "against"]
+];
+
+const sourceRows = [
+  ["OPRA", "120ms", "99.98%", "eligible", "1,284/s"],
+  ["CTA", "84ms", "99.99%", "eligible", "422/s"],
+  ["NYSE", "412ms", "98.10%", "degraded", "91/s"],
+  ["News", "1.2s", "99.20%", "eligible", "8/s"],
+  ["Replay", "0 gaps", "synced", "eligible", "32x"]
+];
+
+const sourceRoutes = [
+  ["OPRA -> Packets", "clear", "AAPL 195C joined"],
+  ["CTA -> Alerts", "clear", "price acceptance confirmed"],
+  ["NYSE -> Packets", "limited", "venue lag above threshold"],
+  ["News -> Replay", "clear", "headline aligned at 09:40:21"]
+];
+
 export function DashboardMock({ variant }: DashboardMockProps) {
   const concept = concepts[variant];
 
@@ -389,6 +499,10 @@ export function DashboardMock({ variant }: DashboardMockProps) {
       {variant === "mock6" ? <PacketForensics /> : null}
       {variant === "mock7" ? <AlertReasonWall /> : null}
       {variant === "mock8" ? <MarketActivityGraph /> : null}
+      {variant === "mock9" ? <MarketCommand /> : null}
+      {variant === "mock10" ? <SignalRadar /> : null}
+      {variant === "mock11" ? <RiskLedger /> : null}
+      {variant === "mock12" ? <SourceControl /> : null}
     </main>
   );
 }
@@ -802,6 +916,190 @@ function MarketActivityGraph() {
   );
 }
 
+function MarketCommand() {
+  return (
+    <section className="mock-command-layout" aria-label="Market command dashboard">
+      <div className="mock-command-strip" aria-label="Session read">
+        {commandMetrics.map(([label, value, detail]) => (
+          <div key={label}>
+            <span>{label}</span>
+            <strong>{value}</strong>
+            <em>{detail}</em>
+          </div>
+        ))}
+      </div>
+      <div className="mock-command-board" role="table" aria-label="Priority board">
+        <div className="mock-command-row is-head" role="row">
+          {["Time", "Sym", "Packet", "Read", "Score", "Invalid", "State"].map((item) => (
+            <span role="columnheader" key={item}>
+              {item}
+            </span>
+          ))}
+        </div>
+        {commandRows.map(([time, symbol, packet, read, score, invalid, state]) => (
+          <div className={`mock-command-row is-${state}`} role="row" key={`${time}-${packet}`}>
+            <time>{time}</time>
+            <strong>{symbol}</strong>
+            <span>{packet}</span>
+            <span>{read}</span>
+            <Meter value={Number(score)} />
+            <span>{invalid}</span>
+            <Badge tone={state === "reject" ? "Bearish" : state === "watch" || state === "hold" ? "Watch" : "Bullish"}>
+              {state}
+            </Badge>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-command-levels" aria-label="Decision levels">
+        <h2>Decision levels</h2>
+        <FactList items={commandLevels.map(([symbol, level, side, read]) => [symbol, `${side} ${level}: ${read}`])} />
+      </aside>
+      <div className="mock-command-flow" aria-label="Live context">
+        <FlowRows compact />
+      </div>
+    </section>
+  );
+}
+
+function SignalRadar() {
+  return (
+    <section className="mock-radar-layout" aria-label="Signal radar dashboard">
+      <div className="mock-radar-sweep" aria-label="Pressure sweep">
+        {radarBands.map((band) => (
+          <div className={`mock-radar-band is-${band.tone}`} key={band.label}>
+            <strong>{band.label}</strong>
+            <span>{band.symbols}</span>
+            <Meter value={band.score} />
+          </div>
+        ))}
+      </div>
+      <div className="mock-radar-board" role="table" aria-label="Signal ranking">
+        <div className="mock-radar-row is-head" role="row">
+          {["Sym", "Pressure", "Sources", "Decay", "Driver", "Decision", "Bias"].map((item) => (
+            <span role="columnheader" key={item}>
+              {item}
+            </span>
+          ))}
+        </div>
+        {radarRows.map(([symbol, pressure, sources, decay, driver, decision, bias]) => (
+          <div className={`mock-radar-row is-${bias}`} role="row" key={symbol}>
+            <strong>{symbol}</strong>
+            <Meter value={Number(pressure)} />
+            <span>{sources}</span>
+            <time>{decay}</time>
+            <span>{driver}</span>
+            <span>{decision}</span>
+            <Badge tone={bias === "bearish" ? "Bearish" : bias === "watch" ? "Watch" : "Bullish"}>
+              {bias}
+            </Badge>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-radar-context" aria-label="Selected signal context">
+        <h2>AAPL pressure</h2>
+        <FactList
+          items={[
+            ["Lead", "OPRA before equity by 72s"],
+            ["Tape", "Acceptance above 194.50"],
+            ["Decay", "29s until stale"],
+            ["Reject", "QQQ below 458.20"]
+          ]}
+        />
+      </aside>
+    </section>
+  );
+}
+
+function RiskLedger() {
+  return (
+    <section className="mock-risk-layout" aria-label="Risk ledger dashboard">
+      <div className="mock-risk-board" role="table" aria-label="Exposure ledger">
+        <div className="mock-risk-row is-head" role="row">
+          {["Bucket", "Size", "Source", "Change", "Invalidation"].map((item) => (
+            <span role="columnheader" key={item}>
+              {item}
+            </span>
+          ))}
+        </div>
+        {riskRows.map(([bucket, size, source, change, invalid]) => (
+          <div className="mock-risk-row" role="row" key={bucket}>
+            <strong>{bucket}</strong>
+            <span>{size}</span>
+            <span>{source}</span>
+            <span>{change}</span>
+            <span>{invalid}</span>
+          </div>
+        ))}
+      </div>
+      <div className="mock-risk-map" aria-label="Invalidation proximity">
+        {riskInvalidations.map(([symbol, level, distance, state]) => (
+          <div className={`mock-risk-level is-${state}`} key={symbol}>
+            <strong>{symbol}</strong>
+            <span>{level}</span>
+            <em>{distance}</em>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-risk-notes" aria-label="Risk notes">
+        <h2>Operating constraints</h2>
+        <FactList
+          items={[
+            ["Crowding", "Front-week tech calls concentrated"],
+            ["Contra", "AMZN put sweep not confirmed by basket"],
+            ["Stale", "Two replay gaps before 09:39"],
+            ["Action", "Require QQQ above 458.20"]
+          ]}
+        />
+      </aside>
+    </section>
+  );
+}
+
+function SourceControl() {
+  return (
+    <section className="mock-source-layout" aria-label="Source control dashboard">
+      <div className="mock-source-board" role="table" aria-label="Source state">
+        <div className="mock-source-row is-head" role="row">
+          {["Source", "Lag", "Uptime", "Packet", "Rate"].map((item) => (
+            <span role="columnheader" key={item}>
+              {item}
+            </span>
+          ))}
+        </div>
+        {sourceRows.map(([source, lag, uptime, packet, rate]) => (
+          <div className={`mock-source-row is-${packet}`} role="row" key={source}>
+            <strong>{source}</strong>
+            <span>{lag}</span>
+            <span>{uptime}</span>
+            <Badge tone={packet === "degraded" ? "Watch" : "Bullish"}>{packet}</Badge>
+            <span>{rate}</span>
+          </div>
+        ))}
+      </div>
+      <div className="mock-source-routes" aria-label="Route state">
+        {sourceRoutes.map(([route, state, detail]) => (
+          <div className={`is-${state}`} key={route}>
+            <strong>{route}</strong>
+            <Badge tone={state === "limited" ? "Watch" : "Bullish"}>{state}</Badge>
+            <span>{detail}</span>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-source-audit" aria-label="Audit state">
+        <h2>Session audit</h2>
+        <FactList
+          items={[
+            ["Replay", "Synced through 09:42:51"],
+            ["Drops", "0 critical, 2 informational"],
+            ["Blocked", "NYSE venue lag excluded from PKT-8841"],
+            ["Next", "Backfill check at 09:45"]
+          ]}
+        />
+      </aside>
+    </section>
+  );
+}
+
 function Panel({
   className,
   title,

apps/web/app/globals.css

@@ -4025,6 +4025,54 @@ h3 {
   --mock-alt-soft: oklch(0.78 0.16 340 / 0.13);
 }
 
+.mock-redesign.mock-command {
+  --mock-bg: oklch(0.092 0.018 238);
+  --mock-surface: oklch(0.132 0.022 238);
+  --mock-surface-2: oklch(0.112 0.02 238);
+  --mock-line: oklch(0.76 0.04 238 / 0.24);
+  --mock-line-strong: oklch(0.8 0.15 84 / 0.52);
+  --mock-accent: oklch(0.82 0.16 84);
+  --mock-accent-soft: oklch(0.82 0.16 84 / 0.13);
+  --mock-alt: oklch(0.74 0.16 28);
+  --mock-alt-soft: oklch(0.74 0.16 28 / 0.13);
+}
+
+.mock-redesign.mock-radar {
+  --mock-bg: oklch(0.102 0.022 184);
+  --mock-surface: oklch(0.145 0.028 184);
+  --mock-surface-2: oklch(0.118 0.024 184);
+  --mock-line: oklch(0.78 0.044 184 / 0.23);
+  --mock-line-strong: oklch(0.78 0.16 176 / 0.52);
+  --mock-accent: oklch(0.78 0.16 176);
+  --mock-accent-soft: oklch(0.78 0.16 176 / 0.13);
+  --mock-alt: oklch(0.8 0.15 80);
+  --mock-alt-soft: oklch(0.8 0.15 80 / 0.13);
+}
+
+.mock-redesign.mock-risk {
+  --mock-bg: oklch(0.105 0.026 16);
+  --mock-surface: oklch(0.145 0.032 16);
+  --mock-surface-2: oklch(0.118 0.028 16);
+  --mock-line: oklch(0.78 0.04 32 / 0.24);
+  --mock-line-strong: oklch(0.76 0.16 36 / 0.52);
+  --mock-accent: oklch(0.76 0.16 36);
+  --mock-accent-soft: oklch(0.76 0.16 36 / 0.13);
+  --mock-alt: oklch(0.78 0.14 326);
+  --mock-alt-soft: oklch(0.78 0.14 326 / 0.13);
+}
+
+.mock-redesign.mock-source {
+  --mock-bg: oklch(0.095 0.018 268);
+  --mock-surface: oklch(0.138 0.024 268);
+  --mock-surface-2: oklch(0.112 0.022 268);
+  --mock-line: oklch(0.78 0.044 268 / 0.23);
+  --mock-line-strong: oklch(0.74 0.15 220 / 0.52);
+  --mock-accent: oklch(0.74 0.15 220);
+  --mock-accent-soft: oklch(0.74 0.15 220 / 0.13);
+  --mock-alt: oklch(0.82 0.15 86);
+  --mock-alt-soft: oklch(0.82 0.15 86 / 0.13);
+}
+
 .mock-nav {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -5262,6 +5310,350 @@ h3 {
   grid-area: strip;
 }
 
+.mock-command-layout,
+.mock-radar-layout,
+.mock-risk-layout,
+.mock-source-layout {
+  min-width: 0;
+  max-width: 1600px;
+  margin: 0 auto;
+  display: grid;
+  gap: 12px;
+}
+
+.mock-command-layout > *,
+.mock-radar-layout > *,
+.mock-risk-layout > *,
+.mock-source-layout > * {
+  min-width: 0;
+}
+
+.mock-command-layout {
+  grid-template-columns: minmax(760px, 1fr) 320px;
+  grid-template-areas:
+    "strip strip"
+    "board levels"
+    "flow levels";
+}
+
+.mock-command-strip {
+  grid-area: strip;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-command-strip div {
+  min-width: 0;
+  min-height: 86px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  border-right: 1px solid var(--mock-line);
+  padding: 12px;
+}
+
+.mock-command-strip div:last-child {
+  border-right: 0;
+}
+
+.mock-command-strip span,
+.mock-command-strip em,
+.mock-command-row time,
+.mock-command-row span,
+.mock-radar-row span,
+.mock-radar-row time,
+.mock-risk-row span,
+.mock-risk-level em,
+.mock-source-row span,
+.mock-source-routes span {
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-style: normal;
+}
+
+.mock-command-strip strong {
+  color: var(--mock-ink);
+  font-size: 1rem;
+  line-height: 1.12;
+}
+
+.mock-command-board,
+.mock-radar-board,
+.mock-risk-board,
+.mock-source-board {
+  overflow-x: auto;
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-command-board {
+  grid-area: board;
+}
+
+.mock-command-row {
+  min-width: 900px;
+  min-height: 42px;
+  display: grid;
+  grid-template-columns: 80px 70px 100px minmax(200px, 1fr) 126px 86px 90px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-command-row:last-child,
+.mock-radar-row:last-child,
+.mock-risk-row:last-child,
+.mock-source-row:last-child {
+  border-bottom: 0;
+}
+
+.mock-command-row.is-head,
+.mock-radar-row.is-head,
+.mock-risk-row.is-head,
+.mock-source-row.is-head {
+  min-height: 30px;
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mock-command-row.is-confirm,
+.mock-command-row.is-hold,
+.mock-radar-row.is-bullish,
+.mock-source-row.is-eligible {
+  color: var(--mock-ink);
+}
+
+.mock-command-row.is-reject,
+.mock-radar-row.is-bearish {
+  color: color-mix(in oklch, var(--mock-bad) 72%, var(--mock-muted));
+}
+
+.mock-command-levels {
+  grid-area: levels;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
+.mock-command-levels h2,
+.mock-radar-context h2,
+.mock-risk-notes h2,
+.mock-source-audit h2 {
+  margin: 0 0 12px;
+  color: var(--mock-ink);
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+}
+
+.mock-command-flow {
+  grid-area: flow;
+}
+
+.mock-radar-layout {
+  grid-template-columns: minmax(720px, 1fr) 320px;
+  grid-template-areas:
+    "sweep context"
+    "board context";
+}
+
+.mock-radar-sweep {
+  grid-area: sweep;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-radar-band {
+  min-height: 108px;
+  display: grid;
+  align-content: center;
+  gap: 8px;
+  border-right: 1px solid var(--mock-line);
+  padding: 12px;
+}
+
+.mock-radar-band:last-child {
+  border-right: 0;
+}
+
+.mock-radar-band.is-good {
+  background: var(--mock-good-soft);
+}
+
+.mock-radar-band.is-watch {
+  background: var(--mock-alt-soft);
+}
+
+.mock-radar-band.is-info {
+  background: var(--mock-info-soft);
+}
+
+.mock-radar-band.is-bad {
+  background: var(--mock-bad-soft);
+}
+
+.mock-radar-band strong,
+.mock-risk-level strong,
+.mock-source-routes strong {
+  color: var(--mock-ink);
+}
+
+.mock-radar-band span {
+  color: var(--mock-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.7rem;
+}
+
+.mock-radar-board {
+  grid-area: board;
+}
+
+.mock-radar-row {
+  min-width: 860px;
+  min-height: 44px;
+  display: grid;
+  grid-template-columns: 70px 126px 72px 70px minmax(140px, 1fr) 92px 88px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-radar-context {
+  grid-area: context;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
+.mock-risk-layout {
+  grid-template-columns: minmax(760px, 1fr) 330px;
+  grid-template-areas:
+    "board notes"
+    "map notes";
+}
+
+.mock-risk-board {
+  grid-area: board;
+}
+
+.mock-risk-row {
+  min-width: 780px;
+  min-height: 48px;
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) 110px 180px 90px minmax(180px, 1fr);
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-risk-map {
+  grid-area: map;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-risk-level {
+  min-height: 150px;
+  display: grid;
+  align-content: center;
+  gap: 7px;
+  border-right: 1px solid var(--mock-line);
+  padding: 12px;
+  background:
+    linear-gradient(180deg, var(--mock-accent-soft), transparent 72%),
+    transparent;
+}
+
+.mock-risk-level:last-child {
+  border-right: 0;
+}
+
+.mock-risk-level.is-against {
+  background:
+    linear-gradient(180deg, var(--mock-bad-soft), transparent 72%),
+    transparent;
+}
+
+.mock-risk-level span {
+  color: var(--mock-accent);
+  font-family: var(--font-mono), monospace;
+  font-size: 1.18rem;
+}
+
+.mock-risk-notes {
+  grid-area: notes;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
+.mock-source-layout {
+  grid-template-columns: minmax(520px, 0.92fr) minmax(340px, 0.78fr) 280px;
+  grid-template-areas: "board routes audit";
+}
+
+.mock-source-board {
+  grid-area: board;
+}
+
+.mock-source-row {
+  min-width: 640px;
+  min-height: 44px;
+  display: grid;
+  grid-template-columns: minmax(90px, 1fr) 76px 92px 96px 80px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-source-row.is-degraded {
+  background: var(--mock-alt-soft);
+}
+
+.mock-source-routes {
+  grid-area: routes;
+  display: grid;
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-source-routes div {
+  min-height: 82px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px 10px;
+  align-content: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 12px;
+}
+
+.mock-source-routes div:last-child {
+  border-bottom: 0;
+}
+
+.mock-source-routes span {
+  grid-column: 1 / -1;
+}
+
+.mock-source-audit {
+  grid-area: audit;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
 @media (max-width: 1180px) {
   .mock-nav,
   .mock-hero,
@@ -5272,7 +5664,11 @@ h3 {
   .mock-options-layout,
   .mock-packet-layout,
   .mock-alert-layout,
-  .mock-graph-layout {
+  .mock-graph-layout,
+  .mock-command-layout,
+  .mock-radar-layout,
+  .mock-risk-layout,
+  .mock-source-layout {
     grid-template-columns: 1fr;
     grid-template-areas: none;
   }
@@ -5285,7 +5681,11 @@ h3 {
   .mock-options-layout > *,
   .mock-packet-layout > *,
   .mock-alert-layout > *,
-  .mock-graph-layout > * {
+  .mock-graph-layout > *,
+  .mock-command-layout > *,
+  .mock-radar-layout > *,
+  .mock-risk-layout > *,
+  .mock-source-layout > * {
     grid-area: auto;
   }
 
@@ -5304,18 +5704,27 @@ h3 {
   }
 
   .mock-packet-chain,
-  .mock-flow-ladder {
+  .mock-flow-ladder,
+  .mock-command-strip,
+  .mock-radar-sweep,
+  .mock-risk-map {
     grid-template-columns: 1fr;
   }
 
   .mock-packet-chain article,
-  .mock-flow-ladder div {
+  .mock-flow-ladder div,
+  .mock-command-strip div,
+  .mock-radar-band,
+  .mock-risk-level {
     border-right: 0;
     border-bottom: 1px solid var(--mock-line);
   }
 
   .mock-packet-chain article:last-child,
-  .mock-flow-ladder div:last-child {
+  .mock-flow-ladder div:last-child,
+  .mock-command-strip div:last-child,
+  .mock-radar-band:last-child,
+  .mock-risk-level:last-child {
     border-bottom: 0;
   }
 }
@@ -5364,6 +5773,11 @@ h3 {
     flex: 1 1 130px;
   }
 
+  .mock-command-strip strong,
+  .mock-risk-level span {
+    font-size: 1rem;
+  }
+
   .mock-graph-canvas {
     min-height: 520px;
   }

apps/web/app/mock10/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardMock } from "../dashboard-mocks";
+
+export const dynamic = "force-dynamic";
+
+export default function Mock10Page() {
+  return <DashboardMock variant="mock10" />;
+}

apps/web/app/mock11/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardMock } from "../dashboard-mocks";
+
+export const dynamic = "force-dynamic";
+
+export default function Mock11Page() {
+  return <DashboardMock variant="mock11" />;
+}

apps/web/app/mock12/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardMock } from "../dashboard-mocks";
+
+export const dynamic = "force-dynamic";
+
+export default function Mock12Page() {
+  return <DashboardMock variant="mock12" />;
+}

apps/web/app/mock9/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardMock } from "../dashboard-mocks";
+
+export const dynamic = "force-dynamic";
+
+export default function Mock9Page() {
+  return <DashboardMock variant="mock9" />;
+}