add no-card mock redesign 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-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}
 {"_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}

apps/web/app/dashboard-mocks.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import type { CSSProperties, ReactNode } from "react";
 
-type MockVariant = "mock1" | "mock2" | "mock3" | "mock4";
+type MockVariant = "mock1" | "mock2" | "mock3" | "mock4" | "mock5" | "mock6" | "mock7" | "mock8";
 
 type DashboardMockProps = {
   variant: MockVariant;
@@ -47,17 +47,93 @@ const concepts: Record<MockVariant, Concept> = {
     premise:
       "Cross-market pressure is drawn as territories, so the trader can see where attention clusters before opening a single-symbol case.",
     bodyClass: "mock-map"
+  },
+  mock5: {
+    title: "Options Intake",
+    shortName: "Options",
+    routeName: "Options",
+    premise:
+      "A dense OPRA-style blotter turns contract activity into candidate flow packets, with strike context, sweep shape, venue mix, and confidence deltas visible in one scan.",
+    bodyClass: "mock-options"
+  },
+  mock6: {
+    title: "Packet Forensics",
+    shortName: "Packets",
+    routeName: "Flow Packets",
+    premise:
+      "Options prints, equity tape, venue imbalance, and news fragments are assembled into packets before any alert can earn attention.",
+    bodyClass: "mock-packets"
+  },
+  mock7: {
+    title: "Alert Reason Wall",
+    shortName: "Alerts",
+    routeName: "Alerts",
+    premise:
+      "Every smart money party alert is shown with the reason, type, invalidation path, and evidence lineage that caused it to fire.",
+    bodyClass: "mock-alerts"
+  },
+  mock8: {
+    title: "Market Activity Graph",
+    shortName: "Graph",
+    routeName: "Activity Graph",
+    premise:
+      "A route-wide intelligence board connects options flow to packets, packets to alerts, and alerts to broader market pressure without repeating the same evidence twice.",
+    bodyClass: "mock-graph"
   }
 };
 
-const variantOrder: MockVariant[] = ["mock1", "mock2", "mock3", "mock4"];
+const variantOrder: MockVariant[] = [
+  "mock1",
+  "mock2",
+  "mock3",
+  "mock4",
+  "mock5",
+  "mock6",
+  "mock7",
+  "mock8"
+];
 
 const symbols = [
-  { symbol: "AAPL", price: "194.88", move: "+1.22%", direction: "up", score: 94, sector: "Mega cap tech" },
+  {
-  { symbol: "NVDA", price: "120.19", move: "-0.41%", direction: "down", score: 81, sector: "AI semis" },
+    symbol: "AAPL",
-  { symbol: "TSLA", price: "180.72", move: "+0.72%", direction: "up", score: 76, sector: "EV complex" },
+    price: "194.88",
-  { symbol: "AMZN", price: "186.31", move: "+0.35%", direction: "up", score: 68, sector: "Consumer platform" },
+    move: "+1.22%",
-  { symbol: "IWM", price: "205.41", move: "+0.21%", direction: "up", score: 59, sector: "Small caps" }
+    direction: "up",
+    score: 94,
+    sector: "Mega cap tech"
+  },
+  {
+    symbol: "NVDA",
+    price: "120.19",
+    move: "-0.41%",
+    direction: "down",
+    score: 81,
+    sector: "AI semis"
+  },
+  {
+    symbol: "TSLA",
+    price: "180.72",
+    move: "+0.72%",
+    direction: "up",
+    score: 76,
+    sector: "EV complex"
+  },
+  {
+    symbol: "AMZN",
+    price: "186.31",
+    move: "+0.35%",
+    direction: "up",
+    score: 68,
+    sector: "Consumer platform"
+  },
+  {
+    symbol: "IWM",
+    price: "205.41",
+    move: "+0.21%",
+    direction: "up",
+    score: 59,
+    sector: "Small caps"
+  }
 ];
 
 const anomalies = [
@@ -130,12 +206,183 @@ const timeline = [
 ];
 
 const atlasGroups = [
-  { name: "Mega cap tech", heat: 92, flow: "+$8.4M", symbols: ["AAPL", "MSFT", "AMZN"], x: 16, y: 22 },
+  {
+    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: 64, y: 26 },
-  { name: "Beta basket", heat: 66, flow: "+$3.8M", symbols: ["TSLA", "COIN", "PLTR"], x: 34, y: 66 },
+  {
+    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: 74, y: 70 }
 ];
 
+const intakeRows = [
+  [
+    "09:41:23.420",
+    "AAPL",
+    "17MAY24 195C",
+    "12,480",
+    "$4.32M",
+    "sweep",
+    "61%",
+    "+3.8σ",
+    "candidate"
+  ],
+  [
+    "09:41:18.092",
+    "AAPL",
+    "21JUN24 200C",
+    "8,920",
+    "$2.74M",
+    "split sweep",
+    "58%",
+    "+2.9σ",
+    "join"
+  ],
+  [
+    "09:40:52.774",
+    "QQQ",
+    "17MAY24 458C",
+    "19,600",
+    "$5.10M",
+    "block lift",
+    "49%",
+    "+2.1σ",
+    "confirm"
+  ],
+  ["09:40:11.018", "NVDA", "24MAY24 120C", "7,340", "$2.01M", "iso sweep", "42%", "+1.7σ", "watch"],
+  [
+    "09:39:47.660",
+    "TSLA",
+    "19JUL24 205C",
+    "10,000",
+    "$3.45M",
+    "block",
+    "38%",
+    "+2.4σ",
+    "candidate"
+  ],
+  ["09:39:12.105", "AMZN", "17MAY24 185P", "4,500", "$1.20M", "sweep", "36%", "-1.9σ", "reject"],
+  ["09:38:59.443", "IWM", "17MAY24 205C", "14,250", "$1.92M", "multi-leg", "31%", "+1.4σ", "watch"]
+];
+
+const packetSteps = [
+  {
+    label: "options burst",
+    time: "09:41:23",
+    weight: 92,
+    detail: "AAPL 195C + 200C clustered inside 72s with ask-side pressure"
+  },
+  {
+    label: "equity trace",
+    time: "09:41:48",
+    weight: 74,
+    detail: "25k dark buy and visible bid lift hold above 194.50"
+  },
+  {
+    label: "venue mix",
+    time: "09:42:06",
+    weight: 68,
+    detail: "Off-exchange share at 64%, above session baseline by 18 points"
+  },
+  {
+    label: "sector echo",
+    time: "09:42:31",
+    weight: 57,
+    detail: "QQQ confirms, semis neutral, no broad risk-off objection"
+  },
+  {
+    label: "packet ready",
+    time: "09:42:44",
+    weight: 86,
+    detail: "Smart money party candidate: stealth accumulation into short-dated calls"
+  }
+];
+
+const packetRows = [
+  ["PKT-8841", "AAPL", "ready", "5 sources", "stealth accumulation", "86"],
+  ["PKT-8838", "TSLA", "building", "3 sources", "momentum ignition", "71"],
+  ["PKT-8834", "NVDA", "held", "2 sources", "call wall absorption", "63"],
+  ["PKT-8827", "AMZN", "rejected", "2 sources", "put sweep divergence", "39"]
+];
+
+const alertRows = [
+  [
+    "09:42:51",
+    "AAPL",
+    "Party Alert",
+    "stealth accumulation",
+    "options led equity by 72s; dark venue share elevated",
+    "accept above 194.50",
+    "high"
+  ],
+  [
+    "09:41:58",
+    "TSLA",
+    "Ignition Watch",
+    "momentum ignition",
+    "block call buy plus tape acceleration",
+    "fails below 178.80",
+    "medium"
+  ],
+  [
+    "09:40:34",
+    "NVDA",
+    "Absorption",
+    "call wall defense",
+    "buyers absorbed at 120 but price did not expand",
+    "rejects 120.40",
+    "watch"
+  ],
+  [
+    "09:39:22",
+    "AMZN",
+    "Divergence",
+    "put sweep against basket",
+    "bearish premium while sector bid held",
+    "reclaims 186.20",
+    "low"
+  ]
+];
+
+const graphLanes = [
+  { label: "Options", x1: "5%", x2: "31%", y: "18%", tone: "good", text: "195C sweep + 200C join" },
+  {
+    label: "Packet",
+    x1: "35%",
+    x2: "60%",
+    y: "35%",
+    tone: "info",
+    text: "PKT-8841 ready, 5 sources"
+  },
+  {
+    label: "Alert",
+    x1: "63%",
+    x2: "88%",
+    y: "22%",
+    tone: "accent",
+    text: "Party Alert: stealth accumulation"
+  },
+  {
+    label: "Market",
+    x1: "20%",
+    x2: "82%",
+    y: "69%",
+    tone: "watch",
+    text: "QQQ confirms; semis neutral"
+  }
+];
+
 export function DashboardMock({ variant }: DashboardMockProps) {
   const concept = concepts[variant];
 
@@ -146,6 +393,10 @@ export function DashboardMock({ variant }: DashboardMockProps) {
       {variant === "mock2" ? <TriageDesk /> : null}
       {variant === "mock3" ? <ReplayTheatre /> : null}
       {variant === "mock4" ? <SectorCartography /> : null}
+      {variant === "mock5" ? <OptionsIntake /> : null}
+      {variant === "mock6" ? <PacketForensics /> : null}
+      {variant === "mock7" ? <AlertReasonWall /> : null}
+      {variant === "mock8" ? <MarketActivityGraph /> : null}
     </main>
   );
 }
@@ -190,8 +441,8 @@ function SignalCourt() {
         <div className="mock-verdict-mark">AAPL</div>
         <h2>Dark sweep pressure is confirmed by call lift.</h2>
         <p>
-          Treat the alert as a claim to prove. The board shows confirming evidence,
+          Treat the alert as a claim to prove. The board shows confirming evidence, contradictions,
-          contradictions, and what must happen next before the trade deserves attention.
+          and what must happen next before the trade deserves attention.
         </p>
         <div className="mock-verdict-actions">
           <button type="button">Open case</button>
@@ -230,7 +481,10 @@ function TriageDesk() {
       </aside>
       <Panel className="mock-queue-board" title="Priority queue">
         {anomalies.map((item, index) => (
-          <article className={index === 0 ? "mock-desk-ticket is-selected" : "mock-desk-ticket"} 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>
@@ -318,7 +572,13 @@ function SectorCartography() {
             <article
               className="mock-territory-node"
               key={group.name}
-              style={{ "--x": `${group.x}%`, "--y": `${group.y}%`, "--heat": group.heat } as CSSProperties}
+              style={
+                {
+                  "--x": `${group.x}%`,
+                  "--y": `${group.y}%`,
+                  "--heat": group.heat
+                } as CSSProperties
+              }
             >
               <strong>{group.name}</strong>
               <span>{group.flow}</span>
@@ -344,7 +604,228 @@ function SectorCartography() {
   );
 }
 
-function Panel({ className, title, children }: { className?: string; title: string; children: ReactNode }) {
+function OptionsIntake() {
+  return (
+    <section className="mock-options-layout" aria-label="Options intake concept">
+      <div className="mock-options-command" aria-label="Options filters">
+        {["OPRA LIVE", "ASK SIDE", "ABOVE 2 SIGMA", "PACKETABLE", "AAPL FOCUS"].map(
+          (item, index) => (
+            <button className={index === 3 ? "is-active" : ""} type="button" key={item}>
+              {item}
+            </button>
+          )
+        )}
+      </div>
+      <div className="mock-options-tape" role="table" aria-label="Options flow intake blotter">
+        <div className="mock-options-row is-head" role="row">
+          {["Time", "Sym", "Contract", "Qty", "Premium", "Shape", "Ask", "Base", "Use"].map(
+            (item) => (
+              <span role="columnheader" key={item}>
+                {item}
+              </span>
+            )
+          )}
+        </div>
+        {intakeRows.map(([time, symbol, contract, size, premium, shape, ask, baseline, use]) => (
+          <div
+            className={`mock-options-row is-${use}`}
+            role="row"
+            key={`${time}-${symbol}-${contract}`}
+          >
+            <time>{time}</time>
+            <strong>{symbol}</strong>
+            <span>{contract}</span>
+            <span>{size}</span>
+            <span>{premium}</span>
+            <span>{shape}</span>
+            <span>{ask}</span>
+            <span>{baseline}</span>
+            <Badge tone={use === "reject" ? "Bearish" : use === "watch" ? "Watch" : "Bullish"}>
+              {use}
+            </Badge>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-options-depth" aria-label="Selected contract depth">
+        <h2>AAPL 195C depth</h2>
+        <dl>
+          <div>
+            <dt>packet fit</dt>
+            <dd>92%</dd>
+          </div>
+          <div>
+            <dt>repeat buyer</dt>
+            <dd>3 prints</dd>
+          </div>
+          <div>
+            <dt>venue skew</dt>
+            <dd>ask 61%</dd>
+          </div>
+          <div>
+            <dt>alert path</dt>
+            <dd>needs equity hold</dd>
+          </div>
+        </dl>
+      </aside>
+      <FlowLadder />
+    </section>
+  );
+}
+
+function PacketForensics() {
+  return (
+    <section className="mock-packet-layout" aria-label="Flow packet forensics concept">
+      <div className="mock-packet-chain" aria-label="Packet assembly chain">
+        {packetSteps.map((step, index) => (
+          <article key={step.label} style={{ "--weight": step.weight } as CSSProperties}>
+            <time>{step.time}</time>
+            <strong>{step.label}</strong>
+            <p>{step.detail}</p>
+            <span>
+              {index === packetSteps.length - 1 ? "alert eligible" : `${step.weight}% contribution`}
+            </span>
+          </article>
+        ))}
+      </div>
+      <div className="mock-packet-ledger" role="table" aria-label="Packet state ledger">
+        <div className="mock-packet-row is-head" role="row">
+          {["Packet", "Symbol", "State", "Evidence", "Reason", "Score"].map((item) => (
+            <span role="columnheader" key={item}>
+              {item}
+            </span>
+          ))}
+        </div>
+        {packetRows.map(([id, symbol, state, sources, reason, score]) => (
+          <div className={`mock-packet-row is-${state}`} role="row" key={id}>
+            <strong>{id}</strong>
+            <span>{symbol}</span>
+            <Badge tone={state === "rejected" ? "Bearish" : state === "held" ? "Watch" : "Bullish"}>
+              {state}
+            </Badge>
+            <span>{sources}</span>
+            <span>{reason}</span>
+            <span>{score}</span>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-packet-inspector" aria-label="Packet evidence inspector">
+        <h2>PKT-8841 lineage</h2>
+        <FactList
+          items={[
+            ["Options", "195C sweep and 200C join established the packet spine"],
+            ["Equity", "Dark print confirmed demand after the options burst"],
+            ["Alert trigger", "Party alert only fires after acceptance above 194.50"]
+          ]}
+        />
+      </aside>
+    </section>
+  );
+}
+
+function AlertReasonWall() {
+  return (
+    <section className="mock-alert-layout" aria-label="Smart money alert wall concept">
+      <div className="mock-alert-wall" role="table" aria-label="Alert reasons">
+        <div className="mock-alert-row is-head" role="row">
+          {["Time", "Sym", "Type", "Reason", "Why it fired", "Invalidation", "Severity"].map(
+            (item) => (
+              <span role="columnheader" key={item}>
+                {item}
+              </span>
+            )
+          )}
+        </div>
+        {alertRows.map(([time, symbol, type, reason, why, invalidation, severity]) => (
+          <div className={`mock-alert-row is-${severity}`} role="row" key={`${time}-${symbol}`}>
+            <time>{time}</time>
+            <strong>{symbol}</strong>
+            <span>{type}</span>
+            <span>{reason}</span>
+            <p>{why}</p>
+            <span>{invalidation}</span>
+            <Badge
+              tone={severity === "low" ? "Bearish" : severity === "watch" ? "Watch" : "Bullish"}
+            >
+              {severity}
+            </Badge>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-alert-reason" aria-label="Selected alert decision path">
+        <h2>Why AAPL fired</h2>
+        <ol>
+          <li>
+            <strong>Options flow led</strong>
+            <span>Short-dated call premium arrived before the visible equity move.</span>
+          </li>
+          <li>
+            <strong>Packet confirmed</strong>
+            <span>Dark venue share and QQQ context removed the obvious objections.</span>
+          </li>
+          <li>
+            <strong>Party alert typed</strong>
+            <span>Classified as stealth accumulation, not a momentum chase.</span>
+          </li>
+        </ol>
+      </aside>
+    </section>
+  );
+}
+
+function MarketActivityGraph() {
+  return (
+    <section className="mock-graph-layout" aria-label="Market activity graph concept">
+      <div className="mock-graph-canvas" aria-label="Options to alert graph">
+        {graphLanes.map((lane) => (
+          <div
+            className={`mock-graph-link is-${lane.tone}`}
+            key={lane.label}
+            style={{ "--x1": lane.x1, "--x2": lane.x2, "--y": lane.y } as CSSProperties}
+          >
+            <strong>{lane.label}</strong>
+            <span>{lane.text}</span>
+          </div>
+        ))}
+        <div className="mock-graph-node is-options">Options intake</div>
+        <div className="mock-graph-node is-packet">Packet PKT-8841</div>
+        <div className="mock-graph-node is-alert">Party alert</div>
+        <div className="mock-graph-node is-market">Market context</div>
+      </div>
+      <div className="mock-graph-routes" aria-label="Route coverage">
+        {[
+          ["Options page", "raw prints become packet candidates"],
+          ["Packets page", "evidence sources are merged and scored"],
+          ["Alerts page", "reason/type/invalidation are exposed"],
+          ["Replay page", "the same chain can be audited after the fact"]
+        ].map(([route, purpose]) => (
+          <div key={route}>
+            <strong>{route}</strong>
+            <span>{purpose}</span>
+          </div>
+        ))}
+      </div>
+      <div className="mock-graph-strip" aria-label="Non-redundant feature map">
+        <FactList
+          items={[
+            ["No duplicate views", "Each route owns a different step in the evidence chain"],
+            ["User value", "The trader sees whether activity is raw, packeted, or alert-worthy"],
+            ["Decision path", "Every alert remains traceable to the options flow that caused it"]
+          ]}
+        />
+      </div>
+    </section>
+  );
+}
+
+function Panel({
+  className,
+  title,
+  children
+}: {
+  className?: string;
+  title: string;
+  children: ReactNode;
+}) {
   return (
     <section className={`mock-panel ${className ?? ""}`} aria-label={title}>
       <header>
@@ -430,6 +911,21 @@ function FlowRows({ compact = false }: { compact?: boolean }) {
   );
 }
 
+function FlowLadder() {
+  return (
+    <div className="mock-flow-ladder" aria-label="Options flow to alert ladder">
+      {["raw option print", "candidate flow", "packet assembly", "party alert"].map(
+        (item, index) => (
+          <div className={index === 1 ? "is-active" : ""} key={item}>
+            <span>{index + 1}</span>
+            <strong>{item}</strong>
+          </div>
+        )
+      )}
+    </div>
+  );
+}
+
 function HealthRows() {
   return (
     <div className="mock-health">
@@ -481,7 +977,13 @@ function Meter({ value }: { value: number }) {
 
 function Badge({ tone, children }: { tone: string; children: ReactNode }) {
   const normalized =
-    tone === "Bearish" ? "bearish" : tone === "Watch" || tone === "Mixed" ? "watch" : tone === "Info" ? "info" : "bullish";
+    tone === "Bearish"
+      ? "bearish"
+      : tone === "Watch" || tone === "Mixed"
+        ? "watch"
+        : tone === "Info"
+          ? "info"
+          : "bullish";
 
   return <span className={`mock-badge is-${normalized}`}>{children}</span>;
 }

apps/web/app/globals.css

@@ -3973,6 +3973,58 @@ h3 {
   --mock-alt-soft: oklch(0.74 0.16 52 / 0.14);
 }
 
+.mock-redesign.mock-options {
+  --mock-bg: oklch(0.075 0.02 250);
+  --mock-surface: oklch(0.105 0.024 250);
+  --mock-surface-2: oklch(0.13 0.03 250);
+  --mock-line: oklch(0.76 0.048 236 / 0.26);
+  --mock-line-strong: oklch(0.82 0.16 82 / 0.58);
+  --mock-accent: oklch(0.86 0.17 84);
+  --mock-accent-soft: oklch(0.86 0.17 84 / 0.12);
+  --mock-alt: oklch(0.74 0.2 32);
+  --mock-alt-soft: oklch(0.74 0.2 32 / 0.13);
+  background:
+    linear-gradient(90deg, oklch(0.7 0.05 240 / 0.11) 1px, transparent 1px) 0 0 / 34px 34px,
+    linear-gradient(180deg, oklch(0.11 0.026 250), var(--mock-bg) 42vh),
+    var(--mock-bg);
+}
+
+.mock-redesign.mock-packets {
+  --mock-bg: oklch(0.13 0.014 198);
+  --mock-surface: oklch(0.17 0.022 198);
+  --mock-surface-2: oklch(0.11 0.018 198);
+  --mock-line: oklch(0.76 0.04 198 / 0.22);
+  --mock-line-strong: oklch(0.78 0.15 176 / 0.54);
+  --mock-accent: oklch(0.78 0.15 176);
+  --mock-accent-soft: oklch(0.78 0.15 176 / 0.13);
+  --mock-alt: oklch(0.77 0.14 300);
+  --mock-alt-soft: oklch(0.77 0.14 300 / 0.13);
+}
+
+.mock-redesign.mock-alerts {
+  --mock-bg: oklch(0.11 0.026 22);
+  --mock-surface: oklch(0.16 0.032 22);
+  --mock-surface-2: oklch(0.13 0.028 22);
+  --mock-line: oklch(0.8 0.04 42 / 0.23);
+  --mock-line-strong: oklch(0.8 0.17 58 / 0.54);
+  --mock-accent: oklch(0.8 0.17 58);
+  --mock-accent-soft: oklch(0.8 0.17 58 / 0.13);
+  --mock-alt: oklch(0.74 0.16 24);
+  --mock-alt-soft: oklch(0.74 0.16 24 / 0.14);
+}
+
+.mock-redesign.mock-graph {
+  --mock-bg: oklch(0.1 0.026 274);
+  --mock-surface: oklch(0.155 0.034 274);
+  --mock-surface-2: oklch(0.125 0.03 274);
+  --mock-line: oklch(0.78 0.05 274 / 0.22);
+  --mock-line-strong: oklch(0.76 0.17 220 / 0.52);
+  --mock-accent: oklch(0.76 0.17 220);
+  --mock-accent-soft: oklch(0.76 0.17 220 / 0.13);
+  --mock-alt: oklch(0.78 0.16 340);
+  --mock-alt-soft: oklch(0.78 0.16 340 / 0.13);
+}
+
 .mock-nav {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -4761,13 +4813,466 @@ h3 {
   font-style: normal;
 }
 
+.mock-options-layout,
+.mock-packet-layout,
+.mock-alert-layout,
+.mock-graph-layout {
+  max-width: 1600px;
+  margin: 0 auto;
+  display: grid;
+  gap: 12px;
+}
+
+.mock-options-layout {
+  grid-template-columns: minmax(720px, 1fr) 270px;
+  grid-template-areas:
+    "command depth"
+    "tape depth"
+    "ladder ladder";
+}
+
+.mock-options-command {
+  grid-area: command;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  border-block: 1px solid var(--mock-line);
+  padding: 8px 0;
+}
+
+.mock-options-command button {
+  min-height: 30px;
+  border: 1px solid var(--mock-line);
+  border-radius: 4px;
+  padding: 5px 9px;
+  background: transparent;
+  color: var(--mock-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.64rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.mock-options-command button:hover,
+.mock-options-command button:focus-visible,
+.mock-options-command button.is-active {
+  border-color: var(--mock-line-strong);
+  color: var(--mock-accent);
+  outline: none;
+}
+
+.mock-options-tape {
+  grid-area: tape;
+  overflow-x: auto;
+  border-block: 1px solid var(--mock-line);
+  background: oklch(from var(--mock-surface) l c h / 0.54);
+}
+
+.mock-options-row {
+  min-width: 1060px;
+  min-height: 38px;
+  display: grid;
+  grid-template-columns: 116px 64px minmax(170px, 1fr) 86px 92px 110px 70px 82px 96px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+}
+
+.mock-options-row:last-child {
+  border-bottom: 0;
+}
+
+.mock-options-row.is-head {
+  min-height: 30px;
+  color: var(--mock-faint);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mock-options-row:not(.is-head):hover {
+  background: var(--mock-accent-soft);
+}
+
+.mock-options-row.is-candidate,
+.mock-options-row.is-join,
+.mock-options-row.is-confirm {
+  color: var(--mock-ink);
+}
+
+.mock-options-row.is-reject {
+  color: color-mix(in oklch, var(--mock-bad) 70%, var(--mock-muted));
+}
+
+.mock-options-depth {
+  grid-area: depth;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
+.mock-options-depth h2,
+.mock-packet-inspector h2,
+.mock-alert-reason h2 {
+  margin: 0 0 12px;
+  font-size: 1rem;
+  letter-spacing: -0.01em;
+}
+
+.mock-options-depth dl {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.mock-options-depth div,
+.mock-graph-routes div {
+  display: grid;
+  gap: 4px;
+  border-top: 1px solid var(--mock-line);
+  padding: 11px 0;
+}
+
+.mock-options-depth div:last-child,
+.mock-graph-routes div:last-child {
+  border-bottom: 1px solid var(--mock-line);
+}
+
+.mock-options-depth dt,
+.mock-flow-ladder span,
+.mock-graph-routes span {
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.66rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mock-options-depth dd {
+  margin: 0;
+  color: var(--mock-ink);
+  font-family: var(--font-mono), monospace;
+  font-size: 1.12rem;
+}
+
+.mock-flow-ladder {
+  grid-area: ladder;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-flow-ladder div {
+  min-height: 70px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  border-right: 1px solid var(--mock-line);
+  padding: 10px 12px;
+}
+
+.mock-flow-ladder div:last-child {
+  border-right: 0;
+}
+
+.mock-flow-ladder div.is-active {
+  background: var(--mock-accent-soft);
+}
+
+.mock-flow-ladder strong {
+  font-size: 0.92rem;
+  text-transform: capitalize;
+}
+
+.mock-packet-layout {
+  grid-template-columns: minmax(640px, 1.2fr) minmax(330px, 0.8fr);
+  grid-template-areas:
+    "chain inspector"
+    "ledger inspector";
+}
+
+.mock-packet-chain {
+  grid-area: chain;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-packet-chain article {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  border-right: 1px solid var(--mock-line);
+  padding: 12px;
+  background:
+    linear-gradient(180deg, color-mix(in oklch, var(--mock-accent) calc(var(--weight) * 0.1%), transparent), transparent 78%),
+    transparent;
+}
+
+.mock-packet-chain article:last-child {
+  border-right: 0;
+}
+
+.mock-packet-chain time,
+.mock-alert-row time {
+  color: var(--mock-faint);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.66rem;
+}
+
+.mock-packet-chain strong {
+  font-family: var(--font-mono), monospace;
+  text-transform: uppercase;
+}
+
+.mock-packet-chain p {
+  margin: 0;
+  color: var(--mock-muted);
+  font-size: 0.8rem;
+  line-height: 1.42;
+}
+
+.mock-packet-chain span {
+  color: var(--mock-accent);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+}
+
+.mock-packet-ledger {
+  grid-area: ledger;
+  overflow-x: auto;
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-packet-row {
+  min-width: 760px;
+  min-height: 42px;
+  display: grid;
+  grid-template-columns: 98px 66px 92px 92px minmax(220px, 1fr) 60px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-packet-row:last-child {
+  border-bottom: 0;
+}
+
+.mock-packet-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-packet-inspector {
+  grid-area: inspector;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
+.mock-alert-layout {
+  grid-template-columns: minmax(800px, 1fr) 320px;
+  grid-template-areas: "wall reason";
+}
+
+.mock-alert-wall {
+  grid-area: wall;
+  overflow-x: auto;
+  border-block: 1px solid var(--mock-line);
+}
+
+.mock-alert-row {
+  min-width: 1080px;
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 78px 68px 118px 170px minmax(260px, 1fr) 170px 86px;
+  gap: 10px;
+  align-items: center;
+  border-bottom: 1px solid var(--mock-line);
+  padding: 0 10px;
+  color: var(--mock-muted);
+  font-size: 0.76rem;
+}
+
+.mock-alert-row:last-child {
+  border-bottom: 0;
+}
+
+.mock-alert-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-alert-row.is-high {
+  background: var(--mock-accent-soft);
+  color: var(--mock-ink);
+}
+
+.mock-alert-row p {
+  margin: 0;
+  line-height: 1.35;
+}
+
+.mock-alert-reason {
+  grid-area: reason;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 12px;
+}
+
+.mock-alert-reason ol {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mock-alert-reason li {
+  display: grid;
+  gap: 5px;
+  border-top: 1px solid var(--mock-line);
+  padding: 12px 0;
+}
+
+.mock-alert-reason li:last-child {
+  border-bottom: 1px solid var(--mock-line);
+}
+
+.mock-alert-reason strong {
+  color: var(--mock-ink);
+}
+
+.mock-alert-reason span {
+  color: var(--mock-muted);
+  font-size: 0.84rem;
+  line-height: 1.42;
+}
+
+.mock-graph-layout {
+  grid-template-columns: minmax(680px, 1fr) 310px;
+  grid-template-areas:
+    "canvas routes"
+    "canvas strip";
+}
+
+.mock-graph-canvas {
+  grid-area: canvas;
+  position: relative;
+  min-height: 620px;
+  border-block: 1px solid var(--mock-line);
+  overflow: hidden;
+  background:
+    linear-gradient(0deg, var(--mock-line) 1px, transparent 1px) 0 0 / 100% 62px,
+    linear-gradient(90deg, var(--mock-line) 1px, transparent 1px) 0 0 / 82px 100%;
+}
+
+.mock-graph-link {
+  position: absolute;
+  left: var(--x1);
+  top: var(--y);
+  width: calc(var(--x2) - var(--x1));
+  display: grid;
+  gap: 4px;
+  border-top: 2px solid var(--mock-accent);
+  padding-top: 8px;
+}
+
+.mock-graph-link.is-good {
+  border-color: var(--mock-good);
+}
+
+.mock-graph-link.is-info {
+  border-color: var(--mock-info);
+}
+
+.mock-graph-link.is-watch {
+  border-color: var(--mock-alt);
+}
+
+.mock-graph-link strong {
+  font-family: var(--font-mono), monospace;
+  font-size: 0.74rem;
+  text-transform: uppercase;
+}
+
+.mock-graph-link span {
+  color: var(--mock-muted);
+  font-size: 0.8rem;
+}
+
+.mock-graph-node {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  min-height: 46px;
+  border: 1px solid var(--mock-line-strong);
+  border-radius: 6px;
+  padding: 9px 12px;
+  background: var(--mock-surface-2);
+  color: var(--mock-ink);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+}
+
+.mock-graph-node.is-options {
+  left: 7%;
+  top: 14%;
+}
+
+.mock-graph-node.is-packet {
+  left: 38%;
+  top: 31%;
+}
+
+.mock-graph-node.is-alert {
+  right: 8%;
+  top: 17%;
+}
+
+.mock-graph-node.is-market {
+  left: 24%;
+  bottom: 19%;
+}
+
+.mock-graph-routes {
+  grid-area: routes;
+  border-block: 1px solid var(--mock-line);
+  padding-block: 8px;
+}
+
+.mock-graph-routes strong {
+  color: var(--mock-ink);
+}
+
+.mock-graph-strip {
+  grid-area: strip;
+}
+
 @media (max-width: 1180px) {
   .mock-nav,
   .mock-hero,
   .mock-court-layout,
   .mock-desk-layout,
   .mock-theatre-layout,
-  .mock-map-layout {
+  .mock-map-layout,
+  .mock-options-layout,
+  .mock-packet-layout,
+  .mock-alert-layout,
+  .mock-graph-layout {
     grid-template-columns: 1fr;
     grid-template-areas: none;
   }
@@ -4776,7 +5281,11 @@ h3 {
   .mock-court-layout > *,
   .mock-desk-layout > *,
   .mock-theatre-layout > *,
-  .mock-map-layout > * {
+  .mock-map-layout > *,
+  .mock-options-layout > *,
+  .mock-packet-layout > *,
+  .mock-alert-layout > *,
+  .mock-graph-layout > * {
     grid-area: auto;
   }
 
@@ -4793,6 +5302,22 @@ h3 {
   .mock-desk-rail button {
     width: auto;
   }
+
+  .mock-packet-chain,
+  .mock-flow-ladder {
+    grid-template-columns: 1fr;
+  }
+
+  .mock-packet-chain article,
+  .mock-flow-ladder div {
+    border-right: 0;
+    border-bottom: 1px solid var(--mock-line);
+  }
+
+  .mock-packet-chain article:last-child,
+  .mock-flow-ladder div:last-child {
+    border-bottom: 0;
+  }
 }
 
 @media (max-width: 720px) {
@@ -4834,4 +5359,21 @@ h3 {
     width: 132px;
     min-height: 94px;
   }
+
+  .mock-options-command button {
+    flex: 1 1 130px;
+  }
+
+  .mock-graph-canvas {
+    min-height: 520px;
+  }
+
+  .mock-graph-link {
+    width: 42%;
+  }
+
+  .mock-graph-node {
+    max-width: 150px;
+    text-align: center;
+  }
 }

apps/web/app/mock5/page.tsx

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

apps/web/app/mock6/page.tsx

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

apps/web/app/mock7/page.tsx

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

apps/web/app/mock8/page.tsx

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