redesign mock route concepts

.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-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}
 {"_type":"issue","id":"islandflow-3vr","title":"create ground-up frontend redesign mocks","description":"Generate a set of production-quality app mock redesigns that reuse Islandflow fundamentals in new interface models for evaluation.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-11T08:10:00Z","created_by":"dirtydishes","updated_at":"2026-06-11T08:17:51Z","started_at":"2026-06-11T08:10:09Z","closed_at":"2026-06-11T08:17:51Z","close_reason":"Created four ground-up frontend redesign mock routes and documented the work.","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-9ns","title":"Refine command deck header","description":"Simplify the overview command deck header after live visual iteration, keeping live status, last tick, replay switching, and active filter controls prominent at the top of the page.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-06T11:30:15Z","created_by":"dirtydishes","updated_at":"2026-06-06T11:32:07Z","started_at":"2026-06-06T11:30:25Z","closed_at":"2026-06-06T11:32:07Z","close_reason":"accepted compact command deck header from live iteration, added active filter chips with hover clear controls, and validated web build/tests","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-xmi","title":"Resolve conflicts in PR 45","description":"Resolve the merge conflicts blocking Forgejo PR 45, validate the affected code paths, and push the reconciled branch back to Forgejo.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-06T03:33:52Z","created_by":"dirtydishes","updated_at":"2026-06-06T03:35:16Z","started_at":"2026-06-06T03:33:58Z","closed_at":"2026-06-06T03:35:16Z","close_reason":"Resolved the PR 45 merge conflict in .beads/issues.jsonl and validated the reconciled tracker file.","dependency_count":0,"dependent_count":0,"comment_count":0}

apps/web/app/dashboard-mocks.tsx

@@ -10,43 +10,43 @@ type DashboardMockProps = {
 type Concept = {
   title: string;
   shortName: string;
+  routeName: string;
   premise: string;
-  bestFor: string;
+  bodyClass: string;
-  layout: string;
 };
 
 const concepts: Record<MockVariant, Concept> = {
   mock1: {
-    title: "Evidence Canvas",
+    title: "Signal Court",
-    shortName: "Canvas",
+    shortName: "Court",
+    routeName: "Case Board",
     premise:
-      "A selected anomaly becomes the organizing object. Price, options, prints, news, and replay evidence attach around one decision path.",
+      "A fired signal is treated as a legal brief: evidence, objections, market context, and the live price trace are arranged around the claim.",
-    bestFor: "single-symbol investigation",
+    bodyClass: "mock-court"
-    layout: "canvas"
   },
   mock2: {
-    title: "Anomaly Queue",
+    title: "Triage Desk",
-    shortName: "Queue",
+    shortName: "Desk",
+    routeName: "Live Queue",
     premise:
-      "The terminal behaves like an alert operations room: ranked work enters from the left, evidence resolves in the center, and confidence checks stay pinned.",
+      "The user works down a prioritized desk queue with clear routing, severity, source health, and next action controls always in reach.",
-    bestFor: "live triage under volume",
+    bodyClass: "mock-desk"
-    layout: "queue"
   },
   mock3: {
-    title: "Replay Room",
+    title: "Replay Theatre",
-    shortName: "Replay",
+    shortName: "Theatre",
+    routeName: "Session Review",
     premise:
-      "Historical sessions become inspectable rooms. The time spine leads, with every event and chart panel synchronized to the replay cursor.",
+      "Replay becomes a scrub room: the time rail leads, and every event, chart move, and note locks to the current evidence frame.",
-    bestFor: "after-action review",
+    bodyClass: "mock-theatre"
-    layout: "replay"
   },
   mock4: {
-    title: "Market Atlas",
+    title: "Sector Cartography",
-    shortName: "Atlas",
+    shortName: "Map",
+    routeName: "Market Map",
     premise:
-      "Symbols are mapped as related territories. Sector pressure, cross-asset flow, and event clusters reveal where attention is concentrating.",
+      "Cross-market pressure is drawn as territories, so the trader can see where attention clusters before opening a single-symbol case.",
-    bestFor: "cross-market scanning",
+    bodyClass: "mock-map"
-    layout: "atlas"
   }
 };
 
@@ -108,11 +108,11 @@ const evidence = [
 ];
 
 const optionRows = [
-  ["2m", "AAPL", "May 17", "195 C", "5,240", "$2.31M", "Sweep", "Bullish"],
+  ["2m", "AAPL", "May 17 195 C", "5,240", "$2.31M", "Sweep", "Bullish"],
-  ["3m", "AAPL", "Jun 21", "200 C", "6,800", "$1.87M", "Block", "Bullish"],
+  ["3m", "AAPL", "Jun 21 200 C", "6,800", "$1.87M", "Block", "Bullish"],
-  ["4m", "NVDA", "May 24", "120 C", "9,150", "$2.01M", "Split", "Mixed"],
+  ["4m", "NVDA", "May 24 120 C", "9,150", "$2.01M", "Split", "Mixed"],
-  ["5m", "TSLA", "Jul 19", "205 C", "10,000", "$3.45M", "Block", "Bullish"],
+  ["5m", "TSLA", "Jul 19 205 C", "10,000", "$3.45M", "Block", "Bullish"],
-  ["6m", "AMZN", "May 17", "185 P", "4,500", "$1.20M", "Sweep", "Bearish"]
+  ["6m", "AMZN", "May 17 185 P", "4,500", "$1.20M", "Sweep", "Bearish"]
 ];
 
 const health = [
@@ -130,40 +130,34 @@ const timeline = [
 ];
 
 const atlasGroups = [
-  { name: "Mega cap tech", heat: 92, flow: "+$8.4M", symbols: ["AAPL", "MSFT", "AMZN"], x: 12, y: 14 },
+  { name: "Mega cap tech", heat: 92, flow: "+$8.4M", symbols: ["AAPL", "MSFT", "AMZN"], x: 16, y: 22 },
-  { name: "AI semis", heat: 81, flow: "+$5.1M", symbols: ["NVDA", "AMD", "AVGO"], x: 56, y: 22 },
+  { name: "AI semis", heat: 81, flow: "+$5.1M", symbols: ["NVDA", "AMD", "AVGO"], x: 64, y: 26 },
-  { name: "Beta basket", heat: 66, flow: "+$3.8M", symbols: ["TSLA", "COIN", "PLTR"], x: 30, y: 58 },
+  { name: "Beta basket", heat: 66, flow: "+$3.8M", symbols: ["TSLA", "COIN", "PLTR"], x: 34, y: 66 },
-  { name: "Defensive", heat: 38, flow: "-$1.2M", symbols: ["XLU", "XLV", "PG"], x: 68, y: 64 }
+  { name: "Defensive", heat: 38, flow: "-$1.2M", symbols: ["XLU", "XLV", "PG"], x: 74, y: 70 }
 ];
 
 export function DashboardMock({ variant }: DashboardMockProps) {
   const concept = concepts[variant];
 
   return (
-    <main className={`mock-redesign mock-redesign-${concept.layout}`} aria-labelledby="mock-title">
+    <main className={`mock-redesign ${concept.bodyClass}`} aria-labelledby="mock-title">
-      <MockHeader active={variant} concept={concept} />
+      <MockNavigation active={variant} concept={concept} />
-      {variant === "mock1" ? <EvidenceCanvas /> : null}
+      {variant === "mock1" ? <SignalCourt /> : null}
-      {variant === "mock2" ? <AnomalyQueue /> : null}
+      {variant === "mock2" ? <TriageDesk /> : null}
-      {variant === "mock3" ? <ReplayRoom /> : null}
+      {variant === "mock3" ? <ReplayTheatre /> : null}
-      {variant === "mock4" ? <MarketAtlas /> : null}
+      {variant === "mock4" ? <SectorCartography /> : null}
     </main>
   );
 }
 
-function MockHeader({ active, concept }: { active: MockVariant; concept: Concept }) {
+function MockNavigation({ active, concept }: { active: MockVariant; concept: Concept }) {
   return (
-    <header className="mock-redesign-header">
+    <header className="mock-nav" aria-label="Mock redesign navigation">
-      <div className="mock-redesign-title">
+      <Link className="mock-brand" href="/mock1">
-        <span className="mock-redesign-product">islandflow concepts</span>
+        <span>IF</span>
-        <h1 id="mock-title">{concept.title}</h1>
+        <strong>mock lab</strong>
-        <p>{concept.premise}</p>
+      </Link>
-      </div>
+      <nav className="mock-route-tabs" aria-label="Mock variants">
-      <div className="mock-redesign-meta" aria-label="Concept metadata">
-        <span>best for: {concept.bestFor}</span>
-        <span>09:41:23 ET</span>
-        <span className="is-live">live data sketch</span>
-      </div>
-      <nav className="mock-redesign-switcher" aria-label="Mock variants">
         {variantOrder.map((item) => (
           <Link
             aria-current={item === active ? "page" : undefined}
@@ -171,102 +165,125 @@ function MockHeader({ active, concept }: { active: MockVariant; concept: Concept
             href={`/${item}`}
             key={item}
           >
-            {concepts[item].shortName}
+            <span>{concepts[item].routeName}</span>
+            <strong>{concepts[item].shortName}</strong>
           </Link>
         ))}
       </nav>
+      <div className="mock-now" aria-label="Current session state">
+        <span>live sketch</span>
+        <strong>09:41:23 ET</strong>
+      </div>
+      <section className="mock-hero" aria-label="Concept summary">
+        <p>{concept.routeName}</p>
+        <h1 id="mock-title">{concept.title}</h1>
+        <span>{concept.premise}</span>
+      </section>
     </header>
   );
 }
 
-function EvidenceCanvas() {
+function SignalCourt() {
   return (
-    <section className="mock-canvas-grid" aria-label="Evidence canvas concept">
+    <section className="mock-court-layout" aria-label="Signal court concept">
-      <div className="mock-symbol-strip">
+      <Panel className="mock-verdict" title="Current claim">
-        {symbols.map((item) => (
+        <div className="mock-verdict-mark">AAPL</div>
-          <article className="mock-symbol-tile" key={item.symbol}>
+        <h2>Dark sweep pressure is confirmed by call lift.</h2>
-            <div>
-              <strong>{item.symbol}</strong>
-              <span>{item.sector}</span>
-            </div>
-            <ScoreDial score={item.score} />
-          </article>
-        ))}
-      </div>
-      <Panel className="mock-canvas-brief" label="active case">
-        <div className="mock-case-heading">
-          <span className="mock-case-symbol">AAPL</span>
-          <div>
-            <h2>Dark sweep pressure is confirmed by options lift</h2>
         <p>
-              The interface treats one fired anomaly as a case file. Every pane answers whether the
+          Treat the alert as a claim to prove. The board shows confirming evidence,
-              signal is meaningful, explainable, and worth continued attention.
+          contradictions, and what must happen next before the trade deserves attention.
         </p>
+        <div className="mock-verdict-actions">
+          <button type="button">Open case</button>
+          <button type="button">Mark watch</button>
         </div>
-          <span className="mock-confidence">94 confidence</span>
-        </div>
-        <EvidenceLinks />
       </Panel>
-      <ChartPanel className="mock-canvas-chart" mode="annotated" />
+      <Panel className="mock-exhibits" title="Evidence exhibits">
-      <FlowTape className="mock-canvas-tape" />
+        <EvidenceStack />
-      <CausalityPanel className="mock-canvas-context" />
+      </Panel>
+      <Panel className="mock-court-chart" title="Price testimony">
+        <ChartSketch density={60} marker="claim filed" />
+      </Panel>
+      <Panel className="mock-objections" title="Objections">
+        <FactList
+          items={[
+            ["Venue concentration", "64% off-exchange share is above normal"],
+            ["Sector check", "QQQ confirmation is present but not decisive"],
+            ["Invalidation", "Acceptance fails below 194.50"]
+          ]}
+        />
+      </Panel>
     </section>
   );
 }
 
-function AnomalyQueue() {
+function TriageDesk() {
   return (
-    <section className="mock-queue-grid" aria-label="Anomaly queue concept">
+    <section className="mock-desk-layout" aria-label="Triage desk concept">
-      <Panel className="mock-queue-list" label="ranked work">
+      <aside className="mock-desk-rail" aria-label="Queue filters">
+        <strong>route</strong>
+        {["all", "urgent", "needs chart", "stale source"].map((item, index) => (
+          <button className={index === 1 ? "is-active" : ""} type="button" key={item}>
+            {item}
+          </button>
+        ))}
+      </aside>
+      <Panel className="mock-queue-board" title="Priority queue">
         {anomalies.map((item, index) => (
-          <article className={index === 0 ? "mock-queue-item is-selected" : "mock-queue-item"} key={item.time}>
+          <article className={index === 0 ? "mock-desk-ticket is-selected" : "mock-desk-ticket"} key={item.time}>
             <time>{item.time}</time>
             <div>
               <strong>{item.symbol}</strong>
               <span>{item.title}</span>
+              <em>{item.cause}</em>
             </div>
-            <Badge tone={item.direction}>{item.direction}</Badge>
+            <Badge tone={item.direction}>{item.confidence}</Badge>
           </article>
         ))}
       </Panel>
-      <Panel className="mock-queue-inspector" label="current anomaly">
+      <Panel className="mock-desk-workspace" title="Selected alert">
-        <div className="mock-inspector-header">
+        <div className="mock-workspace-head">
           <span>AAPL</span>
           <h2>Dark sweep aligns with call pressure</h2>
-          <p>Off-exchange prints led the options burst by 72 seconds. The next decision is whether the move is being accepted above the liquidity shelf.</p>
+          <p>Next action: verify whether price accepts above the prior liquidity shelf.</p>
         </div>
-        <EvidenceLinks compact />
+        <ChartSketch density={42} marker="decision" />
-        <ChartPanel mode="compressed" />
       </Panel>
-      <Panel className="mock-queue-checks" label="confidence checks">
+      <Panel className="mock-desk-health" title="Source status">
-        <CheckList />
+        <HealthRows />
-        <FeedHealth />
+        <FactList
+          items={[
+            ["Agreement", "4 of 5 linked sources agree"],
+            ["Replay match", "Similar to Apr 26 open"],
+            ["Risk note", "Off-exchange share elevated"]
+          ]}
+        />
       </Panel>
     </section>
   );
 }
 
-function ReplayRoom() {
+function ReplayTheatre() {
   return (
-    <section className="mock-replay-grid" aria-label="Replay room concept">
+    <section className="mock-theatre-layout" aria-label="Replay theatre concept">
-      <Panel className="mock-replay-stage" label="session replay">
+      <Panel className="mock-stage" title="Replay frame">
-        <div className="mock-replay-hero">
+        <div className="mock-stage-head">
           <div>
             <span>May 16, 2024</span>
-            <h2>09:41:23, signal confirmation window</h2>
+            <h2>09:41:23 confirmation window</h2>
           </div>
-          <div className="mock-replay-controls" aria-label="Replay controls">
+          <div className="mock-stage-controls" aria-label="Replay controls">
-            <button type="button">Back 30s</button>
+            <button type="button">-30s</button>
-            <button type="button">Pause replay</button>
+            <button type="button">Pause</button>
-            <button type="button">Forward 30s</button>
+            <button type="button">+30s</button>
-            <span>32x</span>
+            <strong>32x</strong>
           </div>
         </div>
-        <ReplayTrack />
+        <ReplayRail />
-        <ChartPanel mode="replay" />
+        <ChartSketch density={72} marker="cursor" />
       </Panel>
-      <Panel className="mock-replay-spine" label="event spine">
+      <Panel className="mock-script" title="Event script">
-        <ol className="mock-time-spine">
+        <ol>
           {timeline.map(([time, title, detail]) => (
             <li key={time}>
               <time>{time}</time>
@@ -276,20 +293,30 @@ function ReplayRoom() {
           ))}
         </ol>
       </Panel>
-      <FlowTape className="mock-replay-tape" condensed />
+      <Panel className="mock-theatre-tape" title="Synced tape">
-      <CausalityPanel className="mock-replay-notes" />
+        <FlowRows compact />
+      </Panel>
+      <Panel className="mock-director-notes" title="Director notes">
+        <FactList
+          items={[
+            ["Lead", "Dark flow cluster arrived first"],
+            ["Confirm", "195 C sweep followed within 72s"],
+            ["Watch", "Acceptance needs one more candle"]
+          ]}
+        />
+      </Panel>
     </section>
   );
 }
 
-function MarketAtlas() {
+function SectorCartography() {
   return (
-    <section className="mock-atlas-grid" aria-label="Market atlas concept">
+    <section className="mock-map-layout" aria-label="Sector cartography concept">
-      <Panel className="mock-atlas-map" label="attention map">
+      <Panel className="mock-map-canvas" title="Pressure territory">
-        <div className="mock-atlas-field">
+        <div className="mock-territory">
           {atlasGroups.map((group) => (
             <article
-              className="mock-atlas-node"
+              className="mock-territory-node"
               key={group.name}
               style={{ "--x": `${group.x}%`, "--y": `${group.y}%`, "--heat": group.heat } as CSSProperties}
             >
@@ -299,43 +326,44 @@ function MarketAtlas() {
           ))}
         </div>
       </Panel>
-      <Panel className="mock-atlas-symbols" label="cluster detail">
+      <Panel className="mock-map-index" title="Cluster index">
         {atlasGroups.map((group) => (
-          <article className="mock-cluster-row" key={group.name}>
+          <article className="mock-cluster" key={group.name}>
             <div>
               <strong>{group.name}</strong>
               <span>{group.symbols.join(" / ")}</span>
             </div>
-            <ScoreDial score={group.heat} />
+            <Meter value={group.heat} />
           </article>
         ))}
       </Panel>
-      <Panel className="mock-atlas-correlation" label="linked evidence">
+      <Panel className="mock-map-flow" title="Linked flow">
-        <EvidenceLinks compact />
+        <FlowRows compact />
-        <FlowTape condensed />
       </Panel>
     </section>
   );
 }
 
-function Panel({ className, label, children }: { className?: string; label: string; children: ReactNode }) {
+function Panel({ className, title, children }: { className?: string; title: string; children: ReactNode }) {
   return (
-    <section className={`mock-redesign-panel ${className ?? ""}`} aria-label={label}>
+    <section className={`mock-panel ${className ?? ""}`} aria-label={title}>
-      <div className="mock-panel-label">{label}</div>
+      <header>
+        <h2>{title}</h2>
+      </header>
       {children}
     </section>
   );
 }
 
-function EvidenceLinks({ compact = false }: { compact?: boolean }) {
+function EvidenceStack() {
   return (
-    <div className={compact ? "mock-evidence-list is-compact" : "mock-evidence-list"}>
+    <div className="mock-evidence-stack">
       {evidence.map(([source, title, value, tone]) => (
-        <article className="mock-evidence-card" key={`${source}-${title}`}>
+        <article className="mock-evidence" key={`${source}-${title}`}>
           <span>{source}</span>
           <strong>{title}</strong>
           <div>
-            <span>{value}</span>
+            <em>{value}</em>
             <Badge tone={tone}>{tone}</Badge>
           </div>
         </article>
@@ -344,98 +372,67 @@ function EvidenceLinks({ compact = false }: { compact?: boolean }) {
   );
 }
 
-function FlowTape({ className = "", condensed = false }: { className?: string; condensed?: boolean }) {
+function ChartSketch({ density, marker }: { density: number; marker: string }) {
-  const rows = condensed ? optionRows.slice(0, 4) : optionRows;
+  return (
+    <div className="mock-chart" aria-label="Synthetic price and volume sketch">
+      <div className="mock-chart-readout">
+        <span>AAPL</span>
+        <strong>194.88</strong>
+        <Badge tone="Bullish">+1.22%</Badge>
+      </div>
+      <div className="mock-bars" aria-hidden="true">
+        {Array.from({ length: density }).map((_, index) => (
+          <span
+            className={index % 8 === 0 || index % 13 === 0 ? "is-down" : "is-up"}
+            key={index}
+            style={{ "--height": `${16 + ((index * 19) % 68)}%` } as CSSProperties}
+          />
+        ))}
+        <i>{marker}</i>
+      </div>
+      <div className="mock-volume" aria-hidden="true">
+        {Array.from({ length: 36 }).map((_, index) => (
+          <span
+            className={index % 7 === 0 ? "is-down" : "is-up"}
+            key={index}
+            style={{ "--height": `${12 + ((index * 23) % 70)}%` } as CSSProperties}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FlowRows({ compact = false }: { compact?: boolean }) {
+  const rows = compact ? optionRows.slice(0, 4) : optionRows;
 
   return (
-    <Panel className={`mock-flow-tape ${className}`} label="flow tape">
+    <div className="mock-flow-table">
-      <div className="mock-redesign-table">
+      <div className="mock-flow-row is-head">
-        <div className="mock-redesign-row is-head">
+        <span>Age</span>
-          <span>Time</span>
         <span>Symbol</span>
         <span>Contract</span>
         <span>Size</span>
         <span>Premium</span>
         <span>Read</span>
       </div>
-        {rows.map(([time, symbol, exp, strike, size, premium, type, read]) => (
+      {rows.map(([time, symbol, contract, size, premium, type, read]) => (
-          <div className="mock-redesign-row" key={`${time}-${symbol}-${strike}`}>
+        <div className="mock-flow-row" key={`${time}-${symbol}-${contract}`}>
           <span>{time}</span>
           <strong>{symbol}</strong>
-            <span>{exp} {strike}</span>
+          <span>{contract}</span>
           <span>{size}</span>
           <span>{premium}</span>
           <Badge tone={read}>{type}</Badge>
         </div>
       ))}
     </div>
-    </Panel>
   );
 }
 
-function ChartPanel({ className = "", mode }: { className?: string; mode: "annotated" | "compressed" | "replay" }) {
+function HealthRows() {
-  const count = mode === "compressed" ? 38 : 64;
-
   return (
-    <Panel className={`mock-redesign-chart ${className} is-${mode}`} label="price and flow">
+    <div className="mock-health">
-      <div className="mock-chart-topline">
-        <div>
-          <span>AAPL</span>
-          <strong>194.88</strong>
-        </div>
-        <Badge tone="Bullish">+1.22%</Badge>
-      </div>
-      <div className="mock-chart-field" aria-hidden="true">
-        {Array.from({ length: count }).map((_, index) => (
-          <span
-            className={index % 8 === 0 || index % 13 === 0 ? "is-red" : "is-green"}
-            key={index}
-            style={{ "--height": `${18 + ((index * 19) % 66)}%` } as CSSProperties}
-          />
-        ))}
-        <i className="mock-chart-marker" />
-      </div>
-      <div className="mock-volume-field" aria-hidden="true">
-        {Array.from({ length: 42 }).map((_, index) => (
-          <span
-            className={index % 7 === 0 ? "is-red" : "is-green"}
-            key={index}
-            style={{ "--height": `${14 + ((index * 23) % 70)}%` } as CSSProperties}
-          />
-        ))}
-      </div>
-    </Panel>
-  );
-}
-
-function CausalityPanel({ className = "" }: { className?: string }) {
-  return (
-    <Panel className={`mock-causality ${className}`} label="why it fired">
-      <dl>
-        <div>
-          <dt>Lead indicator</dt>
-          <dd>Dark flow cluster</dd>
-        </div>
-        <div>
-          <dt>Confirming evidence</dt>
-          <dd>195 C sweep pressure</dd>
-        </div>
-        <div>
-          <dt>Contradiction</dt>
-          <dd>Venue concentration is high</dd>
-        </div>
-        <div>
-          <dt>Next check</dt>
-          <dd>Acceptance above 194.50</dd>
-        </div>
-      </dl>
-    </Panel>
-  );
-}
-
-function FeedHealth() {
-  return (
-    <div className="mock-feed-health">
       {health.map(([name, state, lag]) => (
         <div key={name}>
           <strong>{name}</strong>
@@ -447,29 +444,22 @@ function FeedHealth() {
   );
 }
 
-function CheckList() {
+function FactList({ items }: { items: string[][] }) {
-  const checks = [
-    ["Source agreement", "4 of 5 linked sources agree"],
-    ["Staleness", "last event 11s ago"],
-    ["Replay match", "similar to Apr 26 open"],
-    ["Risk note", "off-exchange share elevated"]
-  ];
-
   return (
-    <div className="mock-check-list">
+    <dl className="mock-facts">
-      {checks.map(([label, value]) => (
+      {items.map(([label, value]) => (
         <div key={label}>
-          <span>{label}</span>
+          <dt>{label}</dt>
-          <strong>{value}</strong>
+          <dd>{value}</dd>
         </div>
       ))}
-    </div>
+    </dl>
   );
 }
 
-function ReplayTrack() {
+function ReplayRail() {
   return (
-    <div className="mock-replay-track-redesign">
+    <div className="mock-replay-rail">
       <span>09:00</span>
       <div>
         <i />
@@ -480,10 +470,11 @@ function ReplayTrack() {
   );
 }
 
-function ScoreDial({ score }: { score: number }) {
+function Meter({ value }: { value: number }) {
   return (
-    <span className="mock-score-dial" style={{ "--score": score } as CSSProperties}>
+    <span className="mock-meter" style={{ "--value": `${value}%` } as CSSProperties}>
-      {score}
+      <i />
+      <em>{value}</em>
     </span>
   );
 }

apps/web/app/globals.css

@@ -3889,3 +3889,949 @@ h3 {
     min-height: 92px;
   }
 }
+
+.mock-shell {
+  min-height: 100vh;
+  background: oklch(0.11 0.018 262);
+}
+
+.mock-skip-link {
+  border-color: oklch(0.82 0.11 184 / 0.58);
+  background: oklch(0.11 0.018 262);
+  color: oklch(0.9 0.08 184);
+}
+
+.mock-redesign {
+  --mock-bg: oklch(0.12 0.018 262);
+  --mock-surface: oklch(0.18 0.02 262);
+  --mock-surface-2: oklch(0.145 0.018 262);
+  --mock-line: oklch(0.74 0.028 262 / 0.22);
+  --mock-line-strong: oklch(0.78 0.11 184 / 0.48);
+  --mock-ink: oklch(0.93 0.014 250);
+  --mock-muted: oklch(0.76 0.024 248);
+  --mock-faint: oklch(0.62 0.03 248);
+  --mock-accent: oklch(0.78 0.14 184);
+  --mock-accent-soft: oklch(0.78 0.14 184 / 0.13);
+  --mock-alt: oklch(0.72 0.16 328);
+  --mock-alt-soft: oklch(0.72 0.16 328 / 0.13);
+  --mock-good: oklch(0.77 0.16 158);
+  --mock-good-soft: oklch(0.77 0.16 158 / 0.13);
+  --mock-bad: oklch(0.68 0.18 24);
+  --mock-bad-soft: oklch(0.68 0.18 24 / 0.14);
+  --mock-info: oklch(0.72 0.14 236);
+  --mock-info-soft: oklch(0.72 0.14 236 / 0.13);
+  min-height: 100vh;
+  padding: 22px;
+  color: var(--mock-ink);
+  background:
+    linear-gradient(90deg, oklch(0.14 0.03 262) 0 1px, transparent 1px 100%) 0 0 / 72px 72px,
+    linear-gradient(180deg, var(--mock-surface-2), var(--mock-bg) 36vh),
+    var(--mock-bg);
+  font-family: var(--font-sans), system-ui, sans-serif;
+}
+
+.mock-redesign.mock-desk {
+  --mock-bg: oklch(0.96 0.008 248);
+  --mock-surface: oklch(0.995 0.002 248);
+  --mock-surface-2: oklch(0.91 0.018 222);
+  --mock-line: oklch(0.42 0.04 236 / 0.2);
+  --mock-line-strong: oklch(0.54 0.14 216 / 0.5);
+  --mock-ink: oklch(0.19 0.03 244);
+  --mock-muted: oklch(0.38 0.036 244);
+  --mock-faint: oklch(0.5 0.035 244);
+  --mock-accent: oklch(0.5 0.16 218);
+  --mock-accent-soft: oklch(0.5 0.16 218 / 0.11);
+  --mock-alt: oklch(0.52 0.17 352);
+  --mock-alt-soft: oklch(0.52 0.17 352 / 0.1);
+  background:
+    linear-gradient(90deg, oklch(0.45 0.04 236 / 0.08) 0 1px, transparent 1px 100%) 0 0 / 72px 72px,
+    linear-gradient(180deg, oklch(0.9 0.022 222), var(--mock-bg) 38vh),
+    var(--mock-bg);
+}
+
+.mock-redesign.mock-theatre {
+  --mock-bg: oklch(0.14 0.042 312);
+  --mock-surface: oklch(0.2 0.048 312);
+  --mock-surface-2: oklch(0.16 0.04 312);
+  --mock-line: oklch(0.78 0.05 312 / 0.22);
+  --mock-line-strong: oklch(0.82 0.12 82 / 0.5);
+  --mock-accent: oklch(0.82 0.15 82);
+  --mock-accent-soft: oklch(0.82 0.15 82 / 0.14);
+  --mock-alt: oklch(0.76 0.15 210);
+  --mock-alt-soft: oklch(0.76 0.15 210 / 0.14);
+}
+
+.mock-redesign.mock-map {
+  --mock-bg: oklch(0.16 0.04 163);
+  --mock-surface: oklch(0.21 0.045 163);
+  --mock-surface-2: oklch(0.18 0.04 163);
+  --mock-line: oklch(0.78 0.05 163 / 0.22);
+  --mock-line-strong: oklch(0.8 0.15 137 / 0.5);
+  --mock-accent: oklch(0.82 0.17 137);
+  --mock-accent-soft: oklch(0.82 0.17 137 / 0.14);
+  --mock-alt: oklch(0.74 0.16 52);
+  --mock-alt-soft: oklch(0.74 0.16 52 / 0.14);
+}
+
+.mock-nav {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    "brand tabs now"
+    "hero hero hero";
+  gap: 14px;
+  align-items: start;
+  margin: 0 auto 18px;
+  max-width: 1600px;
+}
+
+.mock-brand {
+  grid-area: brand;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  color: var(--mock-ink);
+  font-weight: 700;
+}
+
+.mock-brand span {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--mock-accent);
+  color: var(--mock-bg);
+  font-family: var(--font-mono), monospace;
+}
+
+.mock-brand strong,
+.mock-now,
+.mock-route-tabs a span,
+.mock-panel > header h2,
+.mock-hero p,
+.mock-flow-row.is-head,
+.mock-facts dt,
+.mock-desk-rail strong,
+.mock-desk-rail button {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mock-route-tabs {
+  grid-area: tabs;
+  min-width: 0;
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+}
+
+.mock-route-tabs a {
+  min-width: 142px;
+  min-height: 52px;
+  display: grid;
+  gap: 3px;
+  align-content: center;
+  border: 1px solid var(--mock-line);
+  border-radius: 12px;
+  padding: 8px 11px;
+  color: var(--mock-muted);
+  background: oklch(from var(--mock-surface) l c h / 0.72);
+}
+
+.mock-route-tabs a:hover,
+.mock-route-tabs a:focus-visible {
+  border-color: var(--mock-line-strong);
+  color: var(--mock-ink);
+  outline: none;
+}
+
+.mock-route-tabs a.is-active {
+  border-color: var(--mock-line-strong);
+  background: var(--mock-accent-soft);
+  color: var(--mock-ink);
+}
+
+.mock-route-tabs a span,
+.mock-now span {
+  color: var(--mock-faint);
+  font-size: 0.62rem;
+}
+
+.mock-route-tabs a strong {
+  font-size: 0.88rem;
+}
+
+.mock-now {
+  grid-area: now;
+  display: grid;
+  gap: 4px;
+  justify-items: end;
+  border: 1px solid var(--mock-line);
+  border-radius: 12px;
+  padding: 9px 11px;
+  color: var(--mock-muted);
+  background: oklch(from var(--mock-surface) l c h / 0.72);
+  font-size: 0.68rem;
+}
+
+.mock-now strong {
+  color: var(--mock-ink);
+  font-size: 0.82rem;
+}
+
+.mock-hero {
+  grid-area: hero;
+  display: grid;
+  grid-template-columns: minmax(180px, 0.36fr) minmax(260px, 0.74fr) minmax(360px, 1fr);
+  gap: 18px;
+  align-items: end;
+  border-top: 1px solid var(--mock-line);
+  padding-top: 18px;
+}
+
+.mock-hero p,
+.mock-hero h1,
+.mock-hero span {
+  margin: 0;
+}
+
+.mock-hero p {
+  color: var(--mock-accent);
+  font-size: 0.72rem;
+}
+
+.mock-hero h1 {
+  font-size: 2.05rem;
+  line-height: 1.02;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+}
+
+.mock-hero span {
+  max-width: 72ch;
+  color: var(--mock-muted);
+  font-size: 0.94rem;
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+.mock-panel {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--mock-line);
+  border-radius: 12px;
+  background: oklch(from var(--mock-surface) l c h / 0.94);
+}
+
+.mock-panel > header {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 10px 12px;
+}
+
+.mock-panel > header h2 {
+  margin: 0;
+  color: var(--mock-muted);
+  font-size: 0.68rem;
+}
+
+.mock-badge {
+  width: fit-content;
+  max-width: 100%;
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 0.65rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.mock-badge.is-bullish {
+  color: var(--mock-good);
+  background: var(--mock-good-soft);
+}
+
+.mock-badge.is-bearish {
+  color: var(--mock-bad);
+  background: var(--mock-bad-soft);
+}
+
+.mock-badge.is-watch {
+  color: var(--mock-alt);
+  background: var(--mock-alt-soft);
+}
+
+.mock-badge.is-info {
+  color: var(--mock-info);
+  background: var(--mock-info-soft);
+}
+
+.mock-court-layout,
+.mock-desk-layout,
+.mock-theatre-layout,
+.mock-map-layout {
+  max-width: 1600px;
+  margin: 0 auto;
+  display: grid;
+  gap: 12px;
+}
+
+.mock-court-layout {
+  grid-template-columns: minmax(320px, 0.9fr) minmax(440px, 1.2fr) minmax(280px, 0.72fr);
+  grid-template-areas:
+    "verdict chart objections"
+    "exhibits chart objections";
+}
+
+.mock-verdict {
+  grid-area: verdict;
+  padding-bottom: 14px;
+}
+
+.mock-exhibits {
+  grid-area: exhibits;
+}
+
+.mock-court-chart {
+  grid-area: chart;
+}
+
+.mock-objections {
+  grid-area: objections;
+}
+
+.mock-verdict-mark {
+  width: fit-content;
+  margin: 14px 14px 0;
+  border-radius: 999px;
+  padding: 5px 10px;
+  background: var(--mock-accent);
+  color: var(--mock-bg);
+  font-family: var(--font-mono), monospace;
+  font-weight: 700;
+}
+
+.mock-verdict h2,
+.mock-workspace-head h2,
+.mock-stage-head h2 {
+  margin: 10px 14px 0;
+  font-size: 1.36rem;
+  line-height: 1.12;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+
+.mock-verdict p,
+.mock-workspace-head p {
+  margin: 10px 14px 0;
+  color: var(--mock-muted);
+  line-height: 1.5;
+}
+
+.mock-verdict-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 16px 14px 0;
+}
+
+.mock-verdict-actions button,
+.mock-stage-controls button,
+.mock-desk-rail button {
+  min-height: 34px;
+  border: 1px solid var(--mock-line);
+  border-radius: 10px;
+  padding: 7px 10px;
+  background: var(--mock-surface-2);
+  color: var(--mock-ink);
+  cursor: pointer;
+}
+
+.mock-verdict-actions button:hover,
+.mock-verdict-actions button:focus-visible,
+.mock-stage-controls button:hover,
+.mock-stage-controls button:focus-visible,
+.mock-desk-rail button:hover,
+.mock-desk-rail button:focus-visible,
+.mock-desk-rail button.is-active {
+  border-color: var(--mock-line-strong);
+  background: var(--mock-accent-soft);
+  outline: none;
+}
+
+.mock-evidence-stack,
+.mock-health,
+.mock-facts {
+  display: grid;
+  gap: 9px;
+  padding: 12px;
+}
+
+.mock-evidence,
+.mock-desk-ticket,
+.mock-cluster,
+.mock-health div,
+.mock-facts div,
+.mock-script li {
+  min-width: 0;
+  border: 1px solid var(--mock-line);
+  border-radius: 10px;
+  background: oklch(from var(--mock-surface-2) l c h / 0.72);
+}
+
+.mock-evidence {
+  display: grid;
+  gap: 7px;
+  padding: 10px;
+}
+
+.mock-evidence > span,
+.mock-evidence em,
+.mock-desk-ticket time,
+.mock-desk-ticket em,
+.mock-stage-head span,
+.mock-script time,
+.mock-script span,
+.mock-cluster span,
+.mock-flow-row span {
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-style: normal;
+}
+
+.mock-evidence strong,
+.mock-desk-ticket strong,
+.mock-cluster strong,
+.mock-flow-row strong {
+  color: var(--mock-ink);
+  font-family: var(--font-mono), monospace;
+}
+
+.mock-evidence div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.mock-chart {
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+}
+
+.mock-chart-readout {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.mock-chart-readout span {
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+}
+
+.mock-chart-readout strong {
+  margin-right: auto;
+  color: var(--mock-ink);
+  font-family: var(--font-mono), monospace;
+  font-size: 1.18rem;
+}
+
+.mock-bars {
+  position: relative;
+  min-height: 340px;
+  display: flex;
+  align-items: end;
+  gap: 4px;
+  border: 1px solid var(--mock-line);
+  border-radius: 10px;
+  padding: 14px 10px;
+  overflow: hidden;
+  background:
+    linear-gradient(0deg, var(--mock-line) 1px, transparent 1px) 0 0 / 100% 54px,
+    var(--mock-surface-2);
+}
+
+.mock-bars span,
+.mock-volume span {
+  flex: 1 1 4px;
+  min-width: 3px;
+  height: var(--height);
+  border-radius: 999px 999px 2px 2px;
+}
+
+.mock-bars .is-up,
+.mock-volume .is-up {
+  background: var(--mock-good);
+}
+
+.mock-bars .is-down,
+.mock-volume .is-down {
+  background: var(--mock-bad);
+}
+
+.mock-bars i {
+  position: absolute;
+  top: 12px;
+  bottom: 12px;
+  left: 63%;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--mock-accent);
+  color: var(--mock-accent);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.62rem;
+  font-style: normal;
+  white-space: nowrap;
+}
+
+.mock-bars i::after {
+  content: attr(data-empty);
+}
+
+.mock-bars i {
+  text-indent: 8px;
+}
+
+.mock-volume {
+  height: 72px;
+  display: flex;
+  align-items: end;
+  gap: 5px;
+}
+
+.mock-facts {
+  margin: 0;
+}
+
+.mock-facts div {
+  padding: 10px;
+}
+
+.mock-facts dt {
+  margin-bottom: 5px;
+  color: var(--mock-faint);
+  font-size: 0.64rem;
+}
+
+.mock-facts dd {
+  margin: 0;
+  color: var(--mock-muted);
+  font-size: 0.86rem;
+  line-height: 1.42;
+}
+
+.mock-desk-layout {
+  grid-template-columns: 146px minmax(330px, 0.88fr) minmax(420px, 1.18fr) minmax(280px, 0.72fr);
+  grid-template-areas: "rail queue workspace health";
+}
+
+.mock-desk-rail {
+  grid-area: rail;
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  border: 1px solid var(--mock-line);
+  border-radius: 12px;
+  padding: 10px;
+  background: var(--mock-surface);
+}
+
+.mock-desk-rail strong {
+  color: var(--mock-faint);
+  font-size: 0.64rem;
+}
+
+.mock-desk-rail button {
+  width: 100%;
+  justify-content: start;
+  color: var(--mock-muted);
+  font-size: 0.64rem;
+  text-align: left;
+}
+
+.mock-queue-board {
+  grid-area: queue;
+}
+
+.mock-desk-workspace {
+  grid-area: workspace;
+}
+
+.mock-desk-health {
+  grid-area: health;
+}
+
+.mock-desk-ticket {
+  display: grid;
+  grid-template-columns: 50px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+  margin: 10px 10px 0;
+  padding: 10px;
+}
+
+.mock-desk-ticket:last-child {
+  margin-bottom: 10px;
+}
+
+.mock-desk-ticket.is-selected {
+  border-color: var(--mock-line-strong);
+  background: var(--mock-accent-soft);
+}
+
+.mock-desk-ticket div {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.mock-desk-ticket span {
+  color: var(--mock-muted);
+  font-size: 0.8rem;
+  line-height: 1.35;
+}
+
+.mock-workspace-head {
+  padding: 2px 0 8px;
+}
+
+.mock-workspace-head span {
+  display: inline-flex;
+  margin: 14px 14px 0;
+  border-radius: 999px;
+  padding: 5px 10px;
+  background: var(--mock-accent-soft);
+  color: var(--mock-accent);
+  font-family: var(--font-mono), monospace;
+}
+
+.mock-health div {
+  display: grid;
+  grid-template-columns: minmax(54px, 1fr) auto auto;
+  gap: 8px;
+  align-items: center;
+  padding: 9px;
+}
+
+.mock-health span {
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+}
+
+.mock-theatre-layout {
+  grid-template-columns: minmax(260px, 0.7fr) minmax(520px, 1.3fr) minmax(280px, 0.72fr);
+  grid-template-areas:
+    "script stage stage"
+    "script tape notes";
+}
+
+.mock-stage {
+  grid-area: stage;
+}
+
+.mock-script {
+  grid-area: script;
+}
+
+.mock-theatre-tape {
+  grid-area: tape;
+}
+
+.mock-director-notes {
+  grid-area: notes;
+}
+
+.mock-stage-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 12px;
+}
+
+.mock-stage-head h2 {
+  margin-left: 0;
+}
+
+.mock-stage-controls {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mock-stage-controls strong {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 10px;
+  padding: 7px 10px;
+  background: var(--mock-alt-soft);
+  color: var(--mock-alt);
+  font-family: var(--font-mono), monospace;
+}
+
+.mock-replay-rail {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  gap: 10px;
+  align-items: center;
+  padding: 0 12px 12px;
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.7rem;
+}
+
+.mock-replay-rail div {
+  position: relative;
+  height: 28px;
+  border: 1px solid var(--mock-line);
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--mock-info-soft) 0 54%, var(--mock-accent-soft) 54% 66%, var(--mock-surface-2) 66%);
+}
+
+.mock-replay-rail i {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 64%;
+  width: 3px;
+  border-radius: 999px;
+  background: var(--mock-accent);
+}
+
+.mock-script ol {
+  display: grid;
+  gap: 9px;
+  margin: 0;
+  padding: 12px;
+  list-style: none;
+}
+
+.mock-script li {
+  display: grid;
+  gap: 5px;
+  padding: 10px;
+}
+
+.mock-script strong {
+  color: var(--mock-ink);
+}
+
+.mock-flow-table {
+  overflow-x: auto;
+  padding: 10px;
+}
+
+.mock-flow-row {
+  min-width: 620px;
+  min-height: 36px;
+  display: grid;
+  grid-template-columns: 48px 64px minmax(160px, 1fr) 72px 82px 86px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-flow-row:last-child {
+  border-bottom: 0;
+}
+
+.mock-flow-row.is-head {
+  min-height: 28px;
+  color: var(--mock-faint);
+  font-size: 0.64rem;
+}
+
+.mock-map-layout {
+  grid-template-columns: minmax(520px, 1.38fr) minmax(320px, 0.82fr);
+  grid-template-areas:
+    "canvas index"
+    "canvas flow";
+}
+
+.mock-map-canvas {
+  grid-area: canvas;
+}
+
+.mock-map-index {
+  grid-area: index;
+}
+
+.mock-map-flow {
+  grid-area: flow;
+}
+
+.mock-territory {
+  position: relative;
+  min-height: 610px;
+  margin: 12px;
+  border: 1px solid var(--mock-line);
+  border-radius: 12px;
+  overflow: hidden;
+  background:
+    linear-gradient(0deg, var(--mock-line) 1px, transparent 1px) 0 0 / 100% 58px,
+    linear-gradient(90deg, var(--mock-line) 1px, transparent 1px) 0 0 / 70px 100%,
+    var(--mock-surface-2);
+}
+
+.mock-territory-node {
+  position: absolute;
+  left: var(--x);
+  top: var(--y);
+  width: clamp(136px, calc(var(--heat) * 1.9px), 196px);
+  min-height: clamp(86px, calc(var(--heat) * 1.08px), 128px);
+  display: grid;
+  align-content: center;
+  gap: 7px;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--mock-line-strong);
+  border-radius: 12px;
+  padding: 13px;
+  background: color-mix(in oklch, var(--mock-surface) 84%, var(--mock-accent) calc(var(--heat) * 0.16%));
+}
+
+.mock-territory-node strong,
+.mock-territory-node span {
+  position: relative;
+  z-index: 1;
+}
+
+.mock-territory-node span {
+  color: var(--mock-accent);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.74rem;
+}
+
+.mock-cluster {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 86px;
+  gap: 12px;
+  align-items: center;
+  margin: 10px 10px 0;
+  padding: 10px;
+}
+
+.mock-cluster:last-child {
+  margin-bottom: 10px;
+}
+
+.mock-cluster div {
+  min-width: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.mock-meter {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.mock-meter i {
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--mock-accent) var(--value), var(--mock-line) var(--value));
+}
+
+.mock-meter em {
+  color: var(--mock-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  font-style: normal;
+}
+
+@media (max-width: 1180px) {
+  .mock-nav,
+  .mock-hero,
+  .mock-court-layout,
+  .mock-desk-layout,
+  .mock-theatre-layout,
+  .mock-map-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas: none;
+  }
+
+  .mock-nav > *,
+  .mock-court-layout > *,
+  .mock-desk-layout > *,
+  .mock-theatre-layout > *,
+  .mock-map-layout > * {
+    grid-area: auto;
+  }
+
+  .mock-now {
+    justify-items: start;
+  }
+
+  .mock-desk-rail {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .mock-desk-rail button {
+    width: auto;
+  }
+}
+
+@media (max-width: 720px) {
+  .mock-redesign {
+    padding: 14px;
+  }
+
+  .mock-route-tabs {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    overflow-x: visible;
+  }
+
+  .mock-route-tabs a {
+    min-width: 0;
+  }
+
+  .mock-hero h1 {
+    font-size: 1.58rem;
+  }
+
+  .mock-stage-head,
+  .mock-chart-readout,
+  .mock-desk-ticket,
+  .mock-cluster {
+    grid-template-columns: 1fr;
+    display: grid;
+  }
+
+  .mock-bars {
+    min-height: 260px;
+  }
+
+  .mock-territory {
+    min-height: 480px;
+  }
+
+  .mock-territory-node {
+    width: 132px;
+    min-height: 94px;
+  }
+}

apps/web/app/terminal.tsx

@@ -9441,6 +9441,23 @@ function SyntheticControlDock() {
 }
 
 export function TerminalAppShell({ children }: { children: ReactNode }) {
+  const pathname = nextNavigation.usePathname();
+
+  if (pathname?.startsWith("/mock")) {
+    return (
+      <div className="mock-shell">
+        <a className="skip-link mock-skip-link" href="#mock-title">
+          Skip to mock content
+        </a>
+        {children}
+      </div>
+    );
+  }
+
+  return <TerminalChrome>{children}</TerminalChrome>;
+}
+
+function TerminalChrome({ children }: { children: ReactNode }) {
   const state = useTerminalState();
   const pathname = nextNavigation.usePathname();
   const [drawerOpen, setDrawerOpen] = useState(false);