create ground-up frontend redesign mocks

.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-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}
 {"_type":"issue","id":"islandflow-8a6","title":"verify github pages token for docs mirror","description":"The docs mirror workflow now publishes islandflow/docs into dirtydishes/dirtydishes.github.io, but the GitHub Actions secret DOCS_PAGES_TOKEN must exist and have permission to push to that Pages repository. Verify the secret is configured and manually run the Publish Docs workflow after the mirror branch lands.","notes":"Direct manual publish to dirtydishes/dirtydishes.github.io succeeded on 2026-06-01 and https://dirtydishes.github.io/islandflow/docs/ returned HTTP 200. Remaining work is to verify DOCS_PAGES_TOKEN so the islandflow docs mirror workflow can publish future updates automatically.","status":"open","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-31T22:12:27Z","created_by":"dirtydishes","updated_at":"2026-06-01T13:45:34Z","dependency_count":0,"dependent_count":0,"comment_count":0}

apps/web/app/dashboard-mocks.tsx

@@ -7,142 +7,171 @@ type DashboardMockProps = {
   variant: MockVariant;
 };
 
-const variants: Record<
+type Concept = {
-  MockVariant,
-  {
   title: string;
+  shortName: string;
   premise: string;
-    mode: string;
+  bestFor: string;
   layout: string;
-  }
+};
-> = {
+
+const concepts: Record<MockVariant, Concept> = {
   mock1: {
-    title: "Command Deck",
+    title: "Evidence Canvas",
+    shortName: "Canvas",
     premise:
-      "Closest to the reference: left navigation, ticker ribbon, dense evidence panes, replay rail.",
+      "A selected anomaly becomes the organizing object. Price, options, prints, news, and replay evidence attach around one decision path.",
-    mode: "Dense ops",
+    bestFor: "single-symbol investigation",
-    layout: "classic"
+    layout: "canvas"
   },
   mock2: {
-    title: "Investigation Stack",
+    title: "Anomaly Queue",
+    shortName: "Queue",
     premise:
-      "A calmer analyst layout with the selected symbol story in the center and context wrapped around it.",
+      "The terminal behaves like an alert operations room: ranked work enters from the left, evidence resolves in the center, and confidence checks stay pinned.",
-    mode: "Forensic",
+    bestFor: "live triage under volume",
-    layout: "focus"
+    layout: "queue"
   },
   mock3: {
-    title: "Signal Wall",
+    title: "Replay Room",
+    shortName: "Replay",
     premise:
-      "Prioritizes alert triage and cross-symbol scanning before a user drills into price action.",
+      "Historical sessions become inspectable rooms. The time spine leads, with every event and chart panel synchronized to the replay cursor.",
-    mode: "Triage",
+    bestFor: "after-action review",
-    layout: "signals"
+    layout: "replay"
   },
   mock4: {
-    title: "Replay Lab",
+    title: "Market Atlas",
+    shortName: "Atlas",
     premise:
-      "A replay-first structure with timeline, event tape, and causality context always visible.",
+      "Symbols are mapped as related territories. Sector pressure, cross-asset flow, and event clusters reveal where attention is concentrating.",
-    mode: "Replay",
+    bestFor: "cross-market scanning",
-    layout: "replay"
+    layout: "atlas"
   }
 };
 
-const tickers = [
+const variantOrder: MockVariant[] = ["mock1", "mock2", "mock3", "mock4"];
-  ["SPY", "529.18", "+0.23%", "up"],
+
-  ["QQQ", "452.47", "+0.31%", "up"],
+const symbols = [
-  ["AAPL", "194.88", "+1.22%", "up"],
+  { symbol: "AAPL", price: "194.88", move: "+1.22%", direction: "up", score: 94, sector: "Mega cap tech" },
-  ["NVDA", "120.19", "-0.41%", "down"],
+  { symbol: "NVDA", price: "120.19", move: "-0.41%", direction: "down", score: 81, sector: "AI semis" },
-  ["TSLA", "180.72", "+0.72%", "up"],
+  { symbol: "TSLA", price: "180.72", move: "+0.72%", direction: "up", score: 76, sector: "EV complex" },
-  ["AMZN", "186.31", "+0.35%", "up"],
+  { symbol: "AMZN", price: "186.31", move: "+0.35%", direction: "up", score: 68, sector: "Consumer platform" },
-  ["IWM", "205.41", "+0.21%", "up"]
+  { symbol: "IWM", price: "205.41", move: "+0.21%", direction: "up", score: 59, sector: "Small caps" }
+];
+
+const anomalies = [
+  {
+    time: "09:41:10",
+    symbol: "AAPL",
+    title: "Dark sweep aligns with call pressure",
+    value: "$4.32M",
+    confidence: "High",
+    direction: "Bullish",
+    cause: "off-exchange prints led the options burst by 72s"
+  },
+  {
+    time: "09:40:58",
+    symbol: "NVDA",
+    title: "Call wall absorbed at 120",
+    value: "$2.01M",
+    confidence: "Medium",
+    direction: "Mixed",
+    cause: "quote lift faded after the second split sweep"
+  },
+  {
+    time: "09:39:47",
+    symbol: "TSLA",
+    title: "Momentum classifier fired",
+    value: "91%",
+    confidence: "High",
+    direction: "Bullish",
+    cause: "volume acceleration exceeded five-session baseline"
+  },
+  {
+    time: "09:39:12",
+    symbol: "AMZN",
+    title: "Large block against tape",
+    value: "$3.67M",
+    confidence: "Watch",
+    direction: "Bearish",
+    cause: "print direction diverged from sector basket"
+  }
+];
+
+const evidence = [
+  ["Options", "195 C sweep", "$2.31M", "Bullish"],
+  ["Equity", "25,000 dark buy", "$4.87M", "Bullish"],
+  ["News", "AI update crossed", "09:40:21", "Info"],
+  ["Tape", "Momentum burst", "+1.22%", "Bullish"],
+  ["Venue", "Off-exchange share", "64%", "Watch"]
 ];
 
 const optionRows = [
   ["2m", "AAPL", "May 17", "195 C", "5,240", "$2.31M", "Sweep", "Bullish"],
   ["3m", "AAPL", "Jun 21", "200 C", "6,800", "$1.87M", "Block", "Bullish"],
-  ["4m", "NVDA", "May 24", "120 C", "9,150", "$2.01M", "Split", "Bullish"],
+  ["4m", "NVDA", "May 24", "120 C", "9,150", "$2.01M", "Split", "Mixed"],
   ["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"]
-  ["7m", "IWM", "Jun 21", "207 C", "3,100", "$712K", "Sweep", "Bullish"],
-  ["8m", "AAPL", "May 24", "197.5 C", "7,600", "$2.01M", "Block", "Bullish"]
 ];
 
-const signals = [
+const health = [
-  ["09:41:10", "Dark Flow Sweep", "AAPL", "$4.32M", "Bullish"],
+  ["OPRA", "healthy", "120ms"],
-  ["09:40:58", "Unusual Options Activity", "NVDA", "$2.01M", "Bullish"],
+  ["CBOE", "healthy", "85ms"],
-  ["09:40:21", "News Catalyst", "AAPL", "AI update", "News"],
+  ["NYSE", "degraded", "412ms"],
-  ["09:39:47", "Classifier Hit: Momentum", "TSLA", "91%", "Bullish"],
+  ["News", "healthy", "1.2s"]
-  ["09:39:12", "Large Block Trade", "AMZN", "$3.67M", "Bearish"]
 ];
 
-const feedHealth = [
+const timeline = [
-  ["OPRA Options", "Healthy", "120ms", "2,341"],
+  ["09:36", "Baseline drift", "AAPL and QQQ correlation widens"],
-  ["CBOE Quotes", "Healthy", "85ms", "1,987"],
+  ["09:39", "First print", "Dark block appears before visible call lift"],
-  ["Nasdaq TotalView", "Healthy", "92ms", "3,102"],
+  ["09:41", "Signal fired", "Sweep pressure confirms the print cluster"],
-  ["NYSE Pillar", "Degraded", "412ms", "932"],
+  ["09:45", "Replay note", "Price accepted above prior liquidity shelf"]
-  ["News", "Healthy", "1.2s", "12"],
-  ["Dark Pool", "Healthy", "1.0s", "421"]
 ];
 
-const darkFlow = [
+const atlasGroups = [
-  ["09:41:05", "AAPL", "Buy", "25,000", "$4.87M", "Sweep"],
+  { name: "Mega cap tech", heat: 92, flow: "+$8.4M", symbols: ["AAPL", "MSFT", "AMZN"], x: 12, y: 14 },
-  ["09:40:51", "AAPL", "Buy", "18,500", "$3.60M", "Sweep"],
+  { name: "AI semis", heat: 81, flow: "+$5.1M", symbols: ["NVDA", "AMD", "AVGO"], x: 56, y: 22 },
-  ["09:40:35", "AAPL", "Sell", "30,000", "$5.84M", "Block"],
+  { name: "Beta basket", heat: 66, flow: "+$3.8M", symbols: ["TSLA", "COIN", "PLTR"], x: 30, y: 58 },
-  ["09:39:59", "AAPL", "Buy", "12,000", "$2.34M", "Sweep"],
+  { name: "Defensive", heat: 38, flow: "-$1.2M", symbols: ["XLU", "XLV", "PG"], x: 68, y: 64 }
-  ["09:38:47", "AAPL", "Sell", "21,000", "$4.09M", "Block"]
 ];
 
-const variantOrder: MockVariant[] = ["mock1", "mock2", "mock3", "mock4"];
-
 export function DashboardMock({ variant }: DashboardMockProps) {
-  const config = variants[variant];
+  const concept = concepts[variant];
 
   return (
-    <section
+    <main className={`mock-redesign mock-redesign-${concept.layout}`} aria-labelledby="mock-title">
-      className={`mock-terminal mock-terminal-${config.layout}`}
+      <MockHeader active={variant} concept={concept} />
-      aria-labelledby="mock-title"
+      {variant === "mock1" ? <EvidenceCanvas /> : null}
-    >
+      {variant === "mock2" ? <AnomalyQueue /> : null}
-      <MockHeader config={config} active={variant} />
+      {variant === "mock3" ? <ReplayRoom /> : null}
-      <TickerRail />
+      {variant === "mock4" ? <MarketAtlas /> : null}
-      {variant === "mock1" ? <ClassicLayout /> : null}
+    </main>
-      {variant === "mock2" ? <FocusLayout /> : null}
-      {variant === "mock3" ? <SignalLayout /> : null}
-      {variant === "mock4" ? <ReplayLayout /> : null}
-    </section>
   );
 }
 
-function MockHeader({
+function MockHeader({ active, concept }: { active: MockVariant; concept: Concept }) {
-  config,
-  active
-}: {
-  config: (typeof variants)[MockVariant];
-  active: MockVariant;
-}) {
   return (
-    <header className="mock-header">
+    <header className="mock-redesign-header">
-      <div className="mock-brand-lockup">
+      <div className="mock-redesign-title">
-        <span className="mock-mark" aria-hidden="true" />
+        <span className="mock-redesign-product">islandflow concepts</span>
-        <div>
+        <h1 id="mock-title">{concept.title}</h1>
-          <span className="mock-brand">islandflow</span>
+        <p>{concept.premise}</p>
-          <h1 id="mock-title">{config.title}</h1>
       </div>
+      <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>
-      <p>{config.premise}</p>
+      <nav className="mock-redesign-switcher" aria-label="Mock variants">
-      <div className="mock-header-tools">
+        {variantOrder.map((item) => (
-        <span className="mock-live-dot">Live</span>
-        <span className="mock-system">NATS 3ms / US-EAST-1</span>
-        <span className="mock-clock">09:41:23 ET</span>
-        <span className="mock-mode">{config.mode}</span>
-      </div>
-      <nav className="mock-switcher" aria-label="Mock variants">
-        {variantOrder.map((item, index) => (
           <Link
             aria-current={item === active ? "page" : undefined}
             className={item === active ? "is-active" : ""}
             href={`/${item}`}
             key={item}
           >
-            Mock {index + 1}
+            {concepts[item].shortName}
           </Link>
         ))}
       </nav>
@@ -150,131 +179,193 @@ function MockHeader({
   );
 }
 
-function TickerRail() {
+function EvidenceCanvas() {
   return (
-    <div className="mock-ticker-rail" aria-label="Live symbol ticker">
+    <section className="mock-canvas-grid" aria-label="Evidence canvas concept">
-      <div className="mock-ticker-track">
+      <div className="mock-symbol-strip">
-        {[...tickers, ...tickers].map(([symbol, price, move, direction], index) => (
+        {symbols.map((item) => (
-          <article className="mock-ticker-card" key={`${symbol}-${index}`}>
+          <article className="mock-symbol-tile" key={item.symbol}>
             <div>
-              <strong>{symbol}</strong>
+              <strong>{item.symbol}</strong>
-              <span>{price}</span>
+              <span>{item.sector}</span>
             </div>
-            <span className={`mock-move is-${direction}`}>{move}</span>
+            <ScoreDial score={item.score} />
-            <Sparkline direction={direction} />
           </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
+              signal is meaningful, explainable, and worth continued attention.
+            </p>
           </div>
+          <span className="mock-confidence">94 confidence</span>
+        </div>
+        <EvidenceLinks />
+      </Panel>
+      <ChartPanel className="mock-canvas-chart" mode="annotated" />
+      <FlowTape className="mock-canvas-tape" />
+      <CausalityPanel className="mock-canvas-context" />
+    </section>
   );
 }
 
-function ClassicLayout() {
+function AnomalyQueue() {
   return (
-    <div className="mock-dashboard-grid mock-grid-classic">
+    <section className="mock-queue-grid" aria-label="Anomaly queue concept">
-      <OptionTape />
+      <Panel className="mock-queue-list" label="ranked work">
-      <ChartPanel />
+        {anomalies.map((item, index) => (
-      <SignalPanel />
+          <article className={index === 0 ? "mock-queue-item is-selected" : "mock-queue-item"} key={item.time}>
+            <time>{item.time}</time>
+            <div>
+              <strong>{item.symbol}</strong>
+              <span>{item.title}</span>
+            </div>
+            <Badge tone={item.direction}>{item.direction}</Badge>
+          </article>
+        ))}
+      </Panel>
+      <Panel className="mock-queue-inspector" label="current anomaly">
+        <div className="mock-inspector-header">
+          <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>
+        </div>
+        <EvidenceLinks compact />
+        <ChartPanel mode="compressed" />
+      </Panel>
+      <Panel className="mock-queue-checks" label="confidence checks">
+        <CheckList />
         <FeedHealth />
-      <DarkFlow />
+      </Panel>
-      <EventContext />
+    </section>
-      <ReplayRail compact />
-    </div>
   );
 }
 
-function FocusLayout() {
+function ReplayRoom() {
   return (
-    <div className="mock-dashboard-grid mock-grid-focus">
+    <section className="mock-replay-grid" aria-label="Replay room concept">
-      <SymbolBrief />
+      <Panel className="mock-replay-stage" label="session replay">
-      <ChartPanel />
+        <div className="mock-replay-hero">
-      <EventContext />
+          <div>
-      <OptionTape condensed />
+            <span>May 16, 2024</span>
-      <SignalPanel />
+            <h2>09:41:23, signal confirmation window</h2>
-      <DarkFlow />
           </div>
+          <div className="mock-replay-controls" aria-label="Replay controls">
+            <button type="button">Back 30s</button>
+            <button type="button">Pause replay</button>
+            <button type="button">Forward 30s</button>
+            <span>32x</span>
+          </div>
+        </div>
+        <ReplayTrack />
+        <ChartPanel mode="replay" />
+      </Panel>
+      <Panel className="mock-replay-spine" label="event spine">
+        <ol className="mock-time-spine">
+          {timeline.map(([time, title, detail]) => (
+            <li key={time}>
+              <time>{time}</time>
+              <strong>{title}</strong>
+              <span>{detail}</span>
+            </li>
+          ))}
+        </ol>
+      </Panel>
+      <FlowTape className="mock-replay-tape" condensed />
+      <CausalityPanel className="mock-replay-notes" />
+    </section>
   );
 }
 
-function SignalLayout() {
+function MarketAtlas() {
   return (
-    <div className="mock-dashboard-grid mock-grid-signals">
+    <section className="mock-atlas-grid" aria-label="Market atlas concept">
-      <SignalPanel hero />
+      <Panel className="mock-atlas-map" label="attention map">
-      <OptionTape />
+        <div className="mock-atlas-field">
-      <ChartPanel compact />
+          {atlasGroups.map((group) => (
-      <FeedHealth />
+            <article
-      <EventContext />
+              className="mock-atlas-node"
+              key={group.name}
+              style={{ "--x": `${group.x}%`, "--y": `${group.y}%`, "--heat": group.heat } as CSSProperties}
+            >
+              <strong>{group.name}</strong>
+              <span>{group.flow}</span>
+            </article>
+          ))}
         </div>
+      </Panel>
+      <Panel className="mock-atlas-symbols" label="cluster detail">
+        {atlasGroups.map((group) => (
+          <article className="mock-cluster-row" key={group.name}>
+            <div>
+              <strong>{group.name}</strong>
+              <span>{group.symbols.join(" / ")}</span>
+            </div>
+            <ScoreDial score={group.heat} />
+          </article>
+        ))}
+      </Panel>
+      <Panel className="mock-atlas-correlation" label="linked evidence">
+        <EvidenceLinks compact />
+        <FlowTape condensed />
+      </Panel>
+    </section>
   );
 }
 
-function ReplayLayout() {
+function Panel({ className, label, children }: { className?: string; label: string; children: ReactNode }) {
   return (
-    <div className="mock-dashboard-grid mock-grid-replay">
+    <section className={`mock-redesign-panel ${className ?? ""}`} aria-label={label}>
-      <ReplayRail />
+      <div className="mock-panel-label">{label}</div>
-      <ChartPanel />
-      <EventContext />
-      <OptionTape condensed />
-      <SignalPanel />
-      <DarkFlow />
-    </div>
-  );
-}
-
-function Panel({
-  title,
-  meta,
-  className = "",
-  children
-}: {
-  title: string;
-  meta?: string;
-  className?: string;
-  children: ReactNode;
-}) {
-  return (
-    <section className={`mock-panel ${className}`} aria-label={title}>
-      <div className="mock-panel-head">
-        <h2>{title}</h2>
-        {meta ? <span>{meta}</span> : null}
-      </div>
       {children}
     </section>
   );
 }
 
-function OptionTape({ condensed = false }: { condensed?: boolean }) {
+function EvidenceLinks({ compact = false }: { compact?: boolean }) {
-  const rows = condensed ? optionRows.slice(0, 5) : optionRows;
+  return (
+    <div className={compact ? "mock-evidence-list is-compact" : "mock-evidence-list"}>
+      {evidence.map(([source, title, value, tone]) => (
+        <article className="mock-evidence-card" key={`${source}-${title}`}>
+          <span>{source}</span>
+          <strong>{title}</strong>
+          <div>
+            <span>{value}</span>
+            <Badge tone={tone}>{tone}</Badge>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+function FlowTape({ className = "", condensed = false }: { className?: string; condensed?: boolean }) {
+  const rows = condensed ? optionRows.slice(0, 4) : optionRows;
 
   return (
-    <Panel title="Option Flow Tape" meta="250+ shown" className="mock-option-tape">
+    <Panel className={`mock-flow-tape ${className}`} label="flow tape">
-      <div className="mock-table mock-table-options">
+      <div className="mock-redesign-table">
-        <div className="mock-table-row mock-table-head">
+        <div className="mock-redesign-row is-head">
           <span>Time</span>
           <span>Symbol</span>
-          <span>Exp</span>
+          <span>Contract</span>
-          <span>Strike</span>
           <span>Size</span>
-          <span>Prem</span>
+          <span>Premium</span>
-          <span>Type</span>
+          <span>Read</span>
-          <span>Score</span>
         </div>
-        {rows.map((row) => (
+        {rows.map(([time, symbol, exp, strike, size, premium, type, read]) => (
-          <div className="mock-table-row" key={`${row[0]}-${row[1]}-${row[3]}`}>
+          <div className="mock-redesign-row" key={`${time}-${symbol}-${strike}`}>
-            {row.map((cell, index) => (
+            <span>{time}</span>
-              <span
+            <strong>{symbol}</strong>
-                className={
+            <span>{exp} {strike}</span>
-                  index === 6
+            <span>{size}</span>
-                    ? "mock-pill is-info"
+            <span>{premium}</span>
-                    : index === 7
+            <Badge tone={read}>{type}</Badge>
-                      ? `mock-pill ${cell === "Bearish" ? "is-bearish" : "is-bullish"}`
-                      : ""
-                }
-                key={cell}
-              >
-                {cell}
-              </span>
-            ))}
           </div>
         ))}
       </div>
@@ -282,32 +373,34 @@ function OptionTape({ condensed = false }: { condensed?: boolean }) {
   );
 }
 
-function ChartPanel({ compact = false }: { compact?: boolean }) {
+function ChartPanel({ className = "", mode }: { className?: string; mode: "annotated" | "compressed" | "replay" }) {
+  const count = mode === "compressed" ? 38 : 64;
+
   return (
-    <Panel
+    <Panel className={`mock-redesign-chart ${className} is-${mode}`} label="price and flow">
-      title="AAPL | Price & Flow"
+      <div className="mock-chart-topline">
-      meta="1m / 5m / 15m"
+        <div>
-      className={compact ? "mock-chart is-compact" : "mock-chart"}
+          <span>AAPL</span>
-    >
-      <div className="mock-chart-meta">
           <strong>194.88</strong>
-        <span className="mock-move is-up">+2.34 (+1.22%)</span>
         </div>
-      <div className="mock-candle-field" aria-hidden="true">
+        <Badge tone="Bullish">+1.22%</Badge>
-        {Array.from({ length: 58 }).map((_, index) => (
+      </div>
+      <div className="mock-chart-field" aria-hidden="true">
+        {Array.from({ length: count }).map((_, index) => (
           <span
-            className={index % 7 === 0 || index % 11 === 0 ? "is-red" : "is-green"}
+            className={index % 8 === 0 || index % 13 === 0 ? "is-red" : "is-green"}
             key={index}
-            style={{ "--height": `${18 + ((index * 17) % 62)}%` } as CSSProperties}
+            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 % 6 === 0 ? "is-red" : "is-green"}
+            className={index % 7 === 0 ? "is-red" : "is-green"}
             key={index}
-            style={{ "--height": `${14 + ((index * 23) % 68)}%` } as CSSProperties}
+            style={{ "--height": `${14 + ((index * 23) % 70)}%` } as CSSProperties}
           />
         ))}
       </div>
@@ -315,177 +408,89 @@ function ChartPanel({ compact = false }: { compact?: boolean }) {
   );
 }
 
-function SignalPanel({ hero = false }: { hero?: boolean }) {
+function CausalityPanel({ className = "" }: { className?: string }) {
   return (
-    <Panel
+    <Panel className={`mock-causality ${className}`} label="why it fired">
-      title="Signals & Alerts"
+      <dl>
-      meta="All / Signals / System"
-      className={hero ? "mock-signals is-hero" : "mock-signals"}
-    >
-      <div className="mock-signal-list">
-        {signals.map(([time, title, symbol, value, tag]) => (
-          <article className="mock-signal-item" key={`${time}-${title}`}>
-            <time>{time}</time>
         <div>
-              <strong>{title}</strong>
+          <dt>Lead indicator</dt>
-              <span>
+          <dd>Dark flow cluster</dd>
-                {symbol} / {value}
-              </span>
         </div>
-            <span
+        <div>
-              className={`mock-pill ${tag === "Bearish" ? "is-bearish" : tag === "News" ? "is-news" : "is-bullish"}`}
+          <dt>Confirming evidence</dt>
-            >
+          <dd>195 C sweep pressure</dd>
-              {tag}
-            </span>
-          </article>
-        ))}
         </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 (
-    <Panel title="Feed Health" meta="Live checks" className="mock-feed">
+    <div className="mock-feed-health">
-      <div className="mock-table mock-table-feed">
+      {health.map(([name, state, lag]) => (
-        {feedHealth.map(([feed, status, lag, rate]) => (
+        <div key={name}>
-          <div className="mock-table-row" key={feed}>
+          <strong>{name}</strong>
-            <span>{feed}</span>
+          <Badge tone={state === "degraded" ? "Watch" : "Bullish"}>{state}</Badge>
-            <span className={`mock-pill ${status === "Degraded" ? "is-warning" : "is-bullish"}`}>
-              {status}
-            </span>
           <span>{lag}</span>
-            <span>{rate}/s</span>
         </div>
       ))}
     </div>
-    </Panel>
   );
 }
 
-function DarkFlow() {
+function CheckList() {
+  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 (
-    <Panel title="Dark Flow" meta="Equity prints" className="mock-dark-flow">
+    <div className="mock-check-list">
-      <div className="mock-table mock-table-dark">
+      {checks.map(([label, value]) => (
-        {darkFlow.map(([time, symbol, side, size, notional, type]) => (
+        <div key={label}>
-          <div className="mock-table-row" key={`${time}-${side}-${size}`}>
+          <span>{label}</span>
-            <span>{time}</span>
+          <strong>{value}</strong>
-            <strong>{symbol}</strong>
-            <span className={`mock-pill ${side === "Sell" ? "is-bearish" : "is-bullish"}`}>
-              {side}
-            </span>
-            <span>{size}</span>
-            <span>{notional}</span>
-            <span>{type}</span>
         </div>
       ))}
     </div>
-    </Panel>
   );
 }
 
-function EventContext() {
+function ReplayTrack() {
   return (
-    <Panel title="Event Context" meta="Window: 15m" className="mock-context">
+    <div className="mock-replay-track-redesign">
-      <div className="mock-event-layout">
-        <ol className="mock-timeline">
-          {signals.slice(0, 4).map(([time, title, symbol]) => (
-            <li key={`${time}-${title}`}>
-              <time>{time}</time>
-              <strong>{title}</strong>
-              <span>{symbol} evidence linked</span>
-            </li>
-          ))}
-        </ol>
-        <div className="mock-detail">
-          <h3>Why it fired</h3>
-          <dl>
-            <div>
-              <dt>Type</dt>
-              <dd>Dark Flow Sweep</dd>
-            </div>
-            <div>
-              <dt>Premium</dt>
-              <dd>$4.32M</dd>
-            </div>
-            <div>
-              <dt>Venue</dt>
-              <dd>Off-exchange</dd>
-            </div>
-            <div>
-              <dt>Tags</dt>
-              <dd>Bullish / Sweep / Call</dd>
-            </div>
-          </dl>
-        </div>
-      </div>
-    </Panel>
-  );
-}
-
-function ReplayRail({ compact = false }: { compact?: boolean }) {
-  return (
-    <Panel
-      title="Replay"
-      meta="May 16, 2024"
-      className={compact ? "mock-replay is-compact" : "mock-replay"}
-    >
-      <div className="mock-replay-controls">
-        <button type="button">Prev</button>
-        <button type="button">Pause</button>
-        <button type="button">Next</button>
-        <span>32x</span>
-      </div>
-      <div className="mock-replay-track">
-        <span className="mock-replay-window" />
-        <span className="mock-replay-now" />
-      </div>
-      <div className="mock-replay-times">
       <span>09:00</span>
-        <strong>09:41:23 / Live</strong>
+      <div>
+        <i />
+      </div>
+      <strong>09:41:23</strong>
       <span>10:15</span>
     </div>
-    </Panel>
   );
 }
 
-function SymbolBrief() {
+function ScoreDial({ score }: { score: number }) {
   return (
-    <Panel title="AAPL Evidence Brief" meta="Focused symbol" className="mock-symbol-brief">
+    <span className="mock-score-dial" style={{ "--score": score } as CSSProperties}>
-      <div className="mock-brief-price">
+      {score}
-        <strong>194.88</strong>
+    </span>
-        <span className="mock-move is-up">+1.22%</span>
-      </div>
-      <p>
-        Dark sweep pressure aligns with short-window momentum and a fresh news catalyst. Context
-        confidence is high, but the largest block remains off-exchange and should be checked against
-        next print behavior.
-      </p>
-      <div className="mock-brief-tags">
-        <span className="mock-pill is-bullish">Bullish</span>
-        <span className="mock-pill is-info">Sweep</span>
-        <span className="mock-pill is-news">News linked</span>
-      </div>
-    </Panel>
   );
 }
 
-function Sparkline({ direction }: { direction: string }) {
+function Badge({ tone, children }: { tone: string; children: ReactNode }) {
-  return (
+  const normalized =
-    <svg
+    tone === "Bearish" ? "bearish" : tone === "Watch" || tone === "Mixed" ? "watch" : tone === "Info" ? "info" : "bullish";
-      className="mock-sparkline"
+
-      viewBox="0 0 96 28"
+  return <span className={`mock-badge is-${normalized}`}>{children}</span>;
-      role="img"
-      aria-label={`${direction} sparkline`}
-    >
-      <polyline
-        fill="none"
-        points={
-          direction === "down"
-            ? "0,8 9,12 18,10 27,17 36,14 45,21 54,18 63,23 72,19 81,24 96,20"
-            : "0,22 9,18 18,20 27,13 36,15 45,9 54,12 63,6 72,10 81,4 96,7"
-        }
-      />
-    </svg>
-  );
 }