From 8b8f124e998ef70e328db721276a489d68047068 Mon Sep 17 00:00:00 2001 From: dirtydishes Date: Thu, 11 Jun 2026 19:48:55 -0400 Subject: [PATCH] add dense dashboard mock routes --- .beads/issues.jsonl | 1 + apps/web/app/dashboard-mocks.tsx | 302 ++++++++- apps/web/app/globals.css | 424 +++++++++++- apps/web/app/mock10/page.tsx | 7 + apps/web/app/mock11/page.tsx | 7 + apps/web/app/mock12/page.tsx | 7 + apps/web/app/mock9/page.tsx | 7 + ...6-06-11-1946-add-four-dashboard-mocks.html | 615 ++++++++++++++++++ 8 files changed, 1363 insertions(+), 7 deletions(-) create mode 100644 apps/web/app/mock10/page.tsx create mode 100644 apps/web/app/mock11/page.tsx create mode 100644 apps/web/app/mock12/page.tsx create mode 100644 apps/web/app/mock9/page.tsx create mode 100644 docs/turns/2026-06-11-1946-add-four-dashboard-mocks.html diff --git a/.beads/issues.jsonl b/.beads/issues.jsonl index 7b9a834..dc5707c 100644 --- a/.beads/issues.jsonl +++ b/.beads/issues.jsonl @@ -27,6 +27,7 @@ {"_type":"issue","id":"islandflow-ayo","title":"Drop stale backlog events from live fanout","description":"Follow-up to live freshness rollout: /ws/live was still fanning out stale backlog events for freshness-gated channels, which kept tape panes in Live feed behind despite active synthetic ingest. Gate fanout and cache ingest by freshness for options/nbbo/equities/flow.","status":"closed","priority":1,"issue_type":"bug","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:26:39Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:26:44Z","started_at":"2026-04-28T21:26:44Z","closed_at":"2026-04-28T21:26:44Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-0v6","title":"Fix tape freshness, NBBO coverage, pause controls, and filter popup","description":"Implement the tape fixes requested for synthetic options notional sizing, strict live freshness, live-mode pause/resume behavior, stronger NBBO snapshot coverage, and moving flow filters behind a popup. Includes server-side live cache changes, web terminal state/UI changes, and tests for synthetic pricing, live snapshot freshness/NBBO retention, and live pause/filter interactions.","status":"closed","priority":1,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:02:52Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:13:38Z","started_at":"2026-04-28T21:02:57Z","closed_at":"2026-04-28T21:13:38Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-e4r","title":"Implement smart-money flow filtering and synthetic firehose modes","description":"Implement the approved multi-surface plan for named synthetic market profiles, options raw-vs-signal filtering, live/API filter contracts, Tape page client-side flow filters, firehose-readiness improvements, tests, and README updates.","status":"closed","priority":1,"issue_type":"feature","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:10:49Z","created_by":"dirtydishes","updated_at":"2026-04-28T20:29:29Z","started_at":"2026-04-28T20:10:53Z","closed_at":"2026-04-28T20:29:29Z","close_reason":"Implemented synthetic market profiles, options signal-path filtering, signal-aware API/replay contracts, Tape page filters, tests, and README updates. Follow-up tracked in islandflow-biq.","dependency_count":0,"dependent_count":0,"comment_count":0} +{"_type":"issue","id":"islandflow-5bv","title":"add four dense dashboard mock routes","description":"Add four more main dashboard page mock studies in the existing terminal style: no cards, dense at-a-glance market context, and professional copy for experienced traders.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-11T23:40:25Z","created_by":"dirtydishes","updated_at":"2026-06-11T23:48:40Z","started_at":"2026-06-11T23:40:32Z","closed_at":"2026-06-11T23:48:40Z","close_reason":"Added four dense main-dashboard mock routes and validated the web build plus desktop/mobile layout overflow.","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-w2y","title":"tighten mock route terminal copy","description":"Revise mock route UI copy to read like an experienced trader terminal instead of explanatory walkthrough text. Keep the existing no-card mock route work and update the existing turn document for the minor follow-up.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-06-11T23:35:21Z","created_by":"dirtydishes","updated_at":"2026-06-11T23:37:45Z","closed_at":"2026-06-11T23:37:45Z","close_reason":"Tightened mock route UI copy to professional trader-terminal language and updated the existing turn document.","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-q7v","title":"add four no-card mock redesign routes","description":"Add four additional mock redesign routes to the web app without replacing the existing mock1-mock4 routes. The new routes should avoid card-style structures entirely and show varied market-activity workflows grounded in the Islandflow options flow -\u003e flow packet -\u003e smart money alert reasoning model.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-06-11T22:14:44Z","created_by":"dirtydishes","updated_at":"2026-06-11T22:28:22Z","closed_at":"2026-06-11T22:28:22Z","close_reason":"Added /mock5-/mock8 no-card mock redesign routes, created required turn documentation, and validated with web build plus browser DOM checks.","dependency_count":0,"dependent_count":0,"comment_count":0} {"_type":"issue","id":"islandflow-2x7","title":"Redesign mock routes from the ground up","description":"Rework the /mock1 through /mock4 frontend concepts so each route has a fresh layout, navigation treatment, and palette independent of the existing terminal chrome.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-11T09:09:12Z","created_by":"dirtydishes","updated_at":"2026-06-11T09:10:42Z","started_at":"2026-06-11T09:09:17Z","closed_at":"2026-06-11T09:10:42Z","close_reason":"Implemented fresh mock redesigns for /mock1 through /mock4, bypassed the terminal shell for mock routes, verified in the in-app browser, and passed bun web build plus focused route/terminal tests.","dependency_count":0,"dependent_count":0,"comment_count":0} diff --git a/apps/web/app/dashboard-mocks.tsx b/apps/web/app/dashboard-mocks.tsx index 65229eb..5d77c21 100644 --- a/apps/web/app/dashboard-mocks.tsx +++ b/apps/web/app/dashboard-mocks.tsx @@ -1,7 +1,19 @@ import Link from "next/link"; import type { CSSProperties, ReactNode } from "react"; -type MockVariant = "mock1" | "mock2" | "mock3" | "mock4" | "mock5" | "mock6" | "mock7" | "mock8"; +type MockVariant = + | "mock1" + | "mock2" + | "mock3" + | "mock4" + | "mock5" + | "mock6" + | "mock7" + | "mock8" + | "mock9" + | "mock10" + | "mock11" + | "mock12"; type DashboardMockProps = { variant: MockVariant; @@ -71,6 +83,34 @@ const concepts: Record = { routeName: "Matrix", premise: "Options, packet, alert, and market context stitched into one activity map.", bodyClass: "mock-graph" + }, + mock9: { + title: "Market Command", + shortName: "Command", + routeName: "Main Board", + premise: "Session regime, priority symbols, active packets, and invalidation levels without route switching.", + bodyClass: "mock-command" + }, + mock10: { + title: "Signal Radar", + shortName: "Radar", + routeName: "Signal Radar", + premise: "Cross-symbol pressure ranked by confirmation, decay, source count, and nearest decision level.", + bodyClass: "mock-radar" + }, + mock11: { + title: "Risk Ledger", + shortName: "Risk", + routeName: "Risk Ledger", + premise: "Directional exposure, live invalidations, sector crowding, and stale assumptions in one operating view.", + bodyClass: "mock-risk" + }, + mock12: { + title: "Source Control", + shortName: "Sources", + routeName: "Source Control", + premise: "Feed quality, lag, packet eligibility, route pressure, and replay gaps for the current session.", + bodyClass: "mock-source" } }; @@ -82,7 +122,11 @@ const variantOrder: MockVariant[] = [ "mock5", "mock6", "mock7", - "mock8" + "mock8", + "mock9", + "mock10", + "mock11", + "mock12" ]; const symbols = [ @@ -375,6 +419,72 @@ const graphLanes = [ } ]; +const commandMetrics = [ + ["Regime", "Risk-on, narrow", "QQQ +0.82%, IWM lagging"], + ["Priority", "AAPL / TSLA / NVDA", "3 packets above 70"], + ["Decision", "194.50 AAPL", "acceptance level"], + ["Risk", "AMZN contra", "put sweep against basket"] +]; + +const commandRows = [ + ["09:42:51", "AAPL", "PKT-8841", "stealth accumulation", "86", "194.50", "confirm"], + ["09:41:58", "TSLA", "PKT-8838", "momentum ignition", "71", "178.80", "watch"], + ["09:40:34", "NVDA", "PKT-8834", "call wall absorption", "63", "120.40", "hold"], + ["09:39:22", "AMZN", "PKT-8827", "put divergence", "39", "186.20", "reject"], + ["09:38:59", "IWM", "PKT-8821", "small-cap echo", "44", "205.00", "watch"] +]; + +const commandLevels = [ + ["AAPL", "194.50", "above", "packet valid"], + ["QQQ", "458.20", "above", "market confirm"], + ["NVDA", "120.40", "below", "absorption fails"], + ["TSLA", "178.80", "above", "ignition intact"] +]; + +const radarRows = [ + ["AAPL", "92", "5", "00:29", "ask lift", "194.50", "bullish"], + ["TSLA", "78", "3", "01:14", "block call", "178.80", "bullish"], + ["NVDA", "64", "2", "02:06", "absorbed", "120.40", "watch"], + ["AMZN", "41", "2", "03:51", "put sweep", "186.20", "bearish"], + ["IWM", "38", "1", "05:08", "basket lag", "205.00", "watch"] +]; + +const radarBands = [ + { label: "Mega cap tech", score: 88, symbols: "AAPL MSFT AMZN", tone: "good" }, + { label: "AI semis", score: 63, symbols: "NVDA AMD AVGO", tone: "watch" }, + { label: "Beta", score: 74, symbols: "TSLA COIN PLTR", tone: "info" }, + { label: "Small caps", score: 38, symbols: "IWM KRE XBI", tone: "bad" } +]; + +const riskRows = [ + ["Long delta", "$12.8M", "AAPL / TSLA", "+18%", "194.50 fail"], + ["Short premium", "$3.1M", "AMZN puts", "+6%", "186.20 reclaim"], + ["Crowded calls", "$8.4M", "front-week tech", "+31%", "QQQ loses 458.20"], + ["Replay debt", "2 gaps", "09:36-09:39", "open", "audit before alert"] +]; + +const riskInvalidations = [ + ["AAPL", "194.50", "2 ticks", "live"], + ["QQQ", "458.20", "5 ticks", "live"], + ["TSLA", "178.80", "14 ticks", "watch"], + ["AMZN", "186.20", "9 ticks", "against"] +]; + +const sourceRows = [ + ["OPRA", "120ms", "99.98%", "eligible", "1,284/s"], + ["CTA", "84ms", "99.99%", "eligible", "422/s"], + ["NYSE", "412ms", "98.10%", "degraded", "91/s"], + ["News", "1.2s", "99.20%", "eligible", "8/s"], + ["Replay", "0 gaps", "synced", "eligible", "32x"] +]; + +const sourceRoutes = [ + ["OPRA -> Packets", "clear", "AAPL 195C joined"], + ["CTA -> Alerts", "clear", "price acceptance confirmed"], + ["NYSE -> Packets", "limited", "venue lag above threshold"], + ["News -> Replay", "clear", "headline aligned at 09:40:21"] +]; + export function DashboardMock({ variant }: DashboardMockProps) { const concept = concepts[variant]; @@ -389,6 +499,10 @@ export function DashboardMock({ variant }: DashboardMockProps) { {variant === "mock6" ? : null} {variant === "mock7" ? : null} {variant === "mock8" ? : null} + {variant === "mock9" ? : null} + {variant === "mock10" ? : null} + {variant === "mock11" ? : null} + {variant === "mock12" ? : null} ); } @@ -802,6 +916,190 @@ function MarketActivityGraph() { ); } +function MarketCommand() { + return ( +
+
+ {commandMetrics.map(([label, value, detail]) => ( +
+ {label} + {value} + {detail} +
+ ))} +
+
+
+ {["Time", "Sym", "Packet", "Read", "Score", "Invalid", "State"].map((item) => ( + + {item} + + ))} +
+ {commandRows.map(([time, symbol, packet, read, score, invalid, state]) => ( +
+ + {symbol} + {packet} + {read} + + {invalid} + + {state} + +
+ ))} +
+ +
+ +
+
+ ); +} + +function SignalRadar() { + return ( +
+
+ {radarBands.map((band) => ( +
+ {band.label} + {band.symbols} + +
+ ))} +
+
+
+ {["Sym", "Pressure", "Sources", "Decay", "Driver", "Decision", "Bias"].map((item) => ( + + {item} + + ))} +
+ {radarRows.map(([symbol, pressure, sources, decay, driver, decision, bias]) => ( +
+ {symbol} + + {sources} + + {driver} + {decision} + + {bias} + +
+ ))} +
+ +
+ ); +} + +function RiskLedger() { + return ( +
+
+
+ {["Bucket", "Size", "Source", "Change", "Invalidation"].map((item) => ( + + {item} + + ))} +
+ {riskRows.map(([bucket, size, source, change, invalid]) => ( +
+ {bucket} + {size} + {source} + {change} + {invalid} +
+ ))} +
+
+ {riskInvalidations.map(([symbol, level, distance, state]) => ( +
+ {symbol} + {level} + {distance} +
+ ))} +
+ +
+ ); +} + +function SourceControl() { + return ( +
+
+
+ {["Source", "Lag", "Uptime", "Packet", "Rate"].map((item) => ( + + {item} + + ))} +
+ {sourceRows.map(([source, lag, uptime, packet, rate]) => ( +
+ {source} + {lag} + {uptime} + {packet} + {rate} +
+ ))} +
+
+ {sourceRoutes.map(([route, state, detail]) => ( +
+ {route} + {state} + {detail} +
+ ))} +
+ +
+ ); +} + function Panel({ className, title, diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 0a3aaab..7310074 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -4025,6 +4025,54 @@ h3 { --mock-alt-soft: oklch(0.78 0.16 340 / 0.13); } +.mock-redesign.mock-command { + --mock-bg: oklch(0.092 0.018 238); + --mock-surface: oklch(0.132 0.022 238); + --mock-surface-2: oklch(0.112 0.02 238); + --mock-line: oklch(0.76 0.04 238 / 0.24); + --mock-line-strong: oklch(0.8 0.15 84 / 0.52); + --mock-accent: oklch(0.82 0.16 84); + --mock-accent-soft: oklch(0.82 0.16 84 / 0.13); + --mock-alt: oklch(0.74 0.16 28); + --mock-alt-soft: oklch(0.74 0.16 28 / 0.13); +} + +.mock-redesign.mock-radar { + --mock-bg: oklch(0.102 0.022 184); + --mock-surface: oklch(0.145 0.028 184); + --mock-surface-2: oklch(0.118 0.024 184); + --mock-line: oklch(0.78 0.044 184 / 0.23); + --mock-line-strong: oklch(0.78 0.16 176 / 0.52); + --mock-accent: oklch(0.78 0.16 176); + --mock-accent-soft: oklch(0.78 0.16 176 / 0.13); + --mock-alt: oklch(0.8 0.15 80); + --mock-alt-soft: oklch(0.8 0.15 80 / 0.13); +} + +.mock-redesign.mock-risk { + --mock-bg: oklch(0.105 0.026 16); + --mock-surface: oklch(0.145 0.032 16); + --mock-surface-2: oklch(0.118 0.028 16); + --mock-line: oklch(0.78 0.04 32 / 0.24); + --mock-line-strong: oklch(0.76 0.16 36 / 0.52); + --mock-accent: oklch(0.76 0.16 36); + --mock-accent-soft: oklch(0.76 0.16 36 / 0.13); + --mock-alt: oklch(0.78 0.14 326); + --mock-alt-soft: oklch(0.78 0.14 326 / 0.13); +} + +.mock-redesign.mock-source { + --mock-bg: oklch(0.095 0.018 268); + --mock-surface: oklch(0.138 0.024 268); + --mock-surface-2: oklch(0.112 0.022 268); + --mock-line: oklch(0.78 0.044 268 / 0.23); + --mock-line-strong: oklch(0.74 0.15 220 / 0.52); + --mock-accent: oklch(0.74 0.15 220); + --mock-accent-soft: oklch(0.74 0.15 220 / 0.13); + --mock-alt: oklch(0.82 0.15 86); + --mock-alt-soft: oklch(0.82 0.15 86 / 0.13); +} + .mock-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; @@ -5262,6 +5310,350 @@ h3 { grid-area: strip; } +.mock-command-layout, +.mock-radar-layout, +.mock-risk-layout, +.mock-source-layout { + min-width: 0; + max-width: 1600px; + margin: 0 auto; + display: grid; + gap: 12px; +} + +.mock-command-layout > *, +.mock-radar-layout > *, +.mock-risk-layout > *, +.mock-source-layout > * { + min-width: 0; +} + +.mock-command-layout { + grid-template-columns: minmax(760px, 1fr) 320px; + grid-template-areas: + "strip strip" + "board levels" + "flow levels"; +} + +.mock-command-strip { + grid-area: strip; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-block: 1px solid var(--mock-line); +} + +.mock-command-strip div { + min-width: 0; + min-height: 86px; + display: grid; + align-content: center; + gap: 5px; + border-right: 1px solid var(--mock-line); + padding: 12px; +} + +.mock-command-strip div:last-child { + border-right: 0; +} + +.mock-command-strip span, +.mock-command-strip em, +.mock-command-row time, +.mock-command-row span, +.mock-radar-row span, +.mock-radar-row time, +.mock-risk-row span, +.mock-risk-level em, +.mock-source-row span, +.mock-source-routes span { + color: var(--mock-faint); + font-family: var(--font-mono), monospace; + font-size: 0.68rem; + font-style: normal; +} + +.mock-command-strip strong { + color: var(--mock-ink); + font-size: 1rem; + line-height: 1.12; +} + +.mock-command-board, +.mock-radar-board, +.mock-risk-board, +.mock-source-board { + overflow-x: auto; + border-block: 1px solid var(--mock-line); +} + +.mock-command-board { + grid-area: board; +} + +.mock-command-row { + min-width: 900px; + min-height: 42px; + display: grid; + grid-template-columns: 80px 70px 100px minmax(200px, 1fr) 126px 86px 90px; + gap: 10px; + align-items: center; + border-bottom: 1px solid var(--mock-line); + padding: 0 10px; + color: var(--mock-muted); + font-size: 0.76rem; +} + +.mock-command-row:last-child, +.mock-radar-row:last-child, +.mock-risk-row:last-child, +.mock-source-row:last-child { + border-bottom: 0; +} + +.mock-command-row.is-head, +.mock-radar-row.is-head, +.mock-risk-row.is-head, +.mock-source-row.is-head { + min-height: 30px; + color: var(--mock-faint); + font-family: var(--font-mono), monospace; + font-size: 0.62rem; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.mock-command-row.is-confirm, +.mock-command-row.is-hold, +.mock-radar-row.is-bullish, +.mock-source-row.is-eligible { + color: var(--mock-ink); +} + +.mock-command-row.is-reject, +.mock-radar-row.is-bearish { + color: color-mix(in oklch, var(--mock-bad) 72%, var(--mock-muted)); +} + +.mock-command-levels { + grid-area: levels; + border-block: 1px solid var(--mock-line); + padding-block: 12px; +} + +.mock-command-levels h2, +.mock-radar-context h2, +.mock-risk-notes h2, +.mock-source-audit h2 { + margin: 0 0 12px; + color: var(--mock-ink); + font-size: 1rem; + letter-spacing: -0.01em; +} + +.mock-command-flow { + grid-area: flow; +} + +.mock-radar-layout { + grid-template-columns: minmax(720px, 1fr) 320px; + grid-template-areas: + "sweep context" + "board context"; +} + +.mock-radar-sweep { + grid-area: sweep; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-block: 1px solid var(--mock-line); +} + +.mock-radar-band { + min-height: 108px; + display: grid; + align-content: center; + gap: 8px; + border-right: 1px solid var(--mock-line); + padding: 12px; +} + +.mock-radar-band:last-child { + border-right: 0; +} + +.mock-radar-band.is-good { + background: var(--mock-good-soft); +} + +.mock-radar-band.is-watch { + background: var(--mock-alt-soft); +} + +.mock-radar-band.is-info { + background: var(--mock-info-soft); +} + +.mock-radar-band.is-bad { + background: var(--mock-bad-soft); +} + +.mock-radar-band strong, +.mock-risk-level strong, +.mock-source-routes strong { + color: var(--mock-ink); +} + +.mock-radar-band span { + color: var(--mock-muted); + font-family: var(--font-mono), monospace; + font-size: 0.7rem; +} + +.mock-radar-board { + grid-area: board; +} + +.mock-radar-row { + min-width: 860px; + min-height: 44px; + display: grid; + grid-template-columns: 70px 126px 72px 70px minmax(140px, 1fr) 92px 88px; + gap: 10px; + align-items: center; + border-bottom: 1px solid var(--mock-line); + padding: 0 10px; + color: var(--mock-muted); + font-size: 0.76rem; +} + +.mock-radar-context { + grid-area: context; + border-block: 1px solid var(--mock-line); + padding-block: 12px; +} + +.mock-risk-layout { + grid-template-columns: minmax(760px, 1fr) 330px; + grid-template-areas: + "board notes" + "map notes"; +} + +.mock-risk-board { + grid-area: board; +} + +.mock-risk-row { + min-width: 780px; + min-height: 48px; + display: grid; + grid-template-columns: minmax(140px, 1fr) 110px 180px 90px minmax(180px, 1fr); + gap: 10px; + align-items: center; + border-bottom: 1px solid var(--mock-line); + padding: 0 10px; + color: var(--mock-muted); + font-size: 0.76rem; +} + +.mock-risk-map { + grid-area: map; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-block: 1px solid var(--mock-line); +} + +.mock-risk-level { + min-height: 150px; + display: grid; + align-content: center; + gap: 7px; + border-right: 1px solid var(--mock-line); + padding: 12px; + background: + linear-gradient(180deg, var(--mock-accent-soft), transparent 72%), + transparent; +} + +.mock-risk-level:last-child { + border-right: 0; +} + +.mock-risk-level.is-against { + background: + linear-gradient(180deg, var(--mock-bad-soft), transparent 72%), + transparent; +} + +.mock-risk-level span { + color: var(--mock-accent); + font-family: var(--font-mono), monospace; + font-size: 1.18rem; +} + +.mock-risk-notes { + grid-area: notes; + border-block: 1px solid var(--mock-line); + padding-block: 12px; +} + +.mock-source-layout { + grid-template-columns: minmax(520px, 0.92fr) minmax(340px, 0.78fr) 280px; + grid-template-areas: "board routes audit"; +} + +.mock-source-board { + grid-area: board; +} + +.mock-source-row { + min-width: 640px; + min-height: 44px; + display: grid; + grid-template-columns: minmax(90px, 1fr) 76px 92px 96px 80px; + gap: 10px; + align-items: center; + border-bottom: 1px solid var(--mock-line); + padding: 0 10px; + color: var(--mock-muted); + font-size: 0.76rem; +} + +.mock-source-row.is-degraded { + background: var(--mock-alt-soft); +} + +.mock-source-routes { + grid-area: routes; + display: grid; + border-block: 1px solid var(--mock-line); +} + +.mock-source-routes div { + min-height: 82px; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 6px 10px; + align-content: center; + border-bottom: 1px solid var(--mock-line); + padding: 12px; +} + +.mock-source-routes div:last-child { + border-bottom: 0; +} + +.mock-source-routes span { + grid-column: 1 / -1; +} + +.mock-source-audit { + grid-area: audit; + border-block: 1px solid var(--mock-line); + padding-block: 12px; +} + @media (max-width: 1180px) { .mock-nav, .mock-hero, @@ -5272,7 +5664,11 @@ h3 { .mock-options-layout, .mock-packet-layout, .mock-alert-layout, - .mock-graph-layout { + .mock-graph-layout, + .mock-command-layout, + .mock-radar-layout, + .mock-risk-layout, + .mock-source-layout { grid-template-columns: 1fr; grid-template-areas: none; } @@ -5285,7 +5681,11 @@ h3 { .mock-options-layout > *, .mock-packet-layout > *, .mock-alert-layout > *, - .mock-graph-layout > * { + .mock-graph-layout > *, + .mock-command-layout > *, + .mock-radar-layout > *, + .mock-risk-layout > *, + .mock-source-layout > * { grid-area: auto; } @@ -5304,18 +5704,27 @@ h3 { } .mock-packet-chain, - .mock-flow-ladder { + .mock-flow-ladder, + .mock-command-strip, + .mock-radar-sweep, + .mock-risk-map { grid-template-columns: 1fr; } .mock-packet-chain article, - .mock-flow-ladder div { + .mock-flow-ladder div, + .mock-command-strip div, + .mock-radar-band, + .mock-risk-level { border-right: 0; border-bottom: 1px solid var(--mock-line); } .mock-packet-chain article:last-child, - .mock-flow-ladder div:last-child { + .mock-flow-ladder div:last-child, + .mock-command-strip div:last-child, + .mock-radar-band:last-child, + .mock-risk-level:last-child { border-bottom: 0; } } @@ -5364,6 +5773,11 @@ h3 { flex: 1 1 130px; } + .mock-command-strip strong, + .mock-risk-level span { + font-size: 1rem; + } + .mock-graph-canvas { min-height: 520px; } diff --git a/apps/web/app/mock10/page.tsx b/apps/web/app/mock10/page.tsx new file mode 100644 index 0000000..4b01348 --- /dev/null +++ b/apps/web/app/mock10/page.tsx @@ -0,0 +1,7 @@ +import { DashboardMock } from "../dashboard-mocks"; + +export const dynamic = "force-dynamic"; + +export default function Mock10Page() { + return ; +} diff --git a/apps/web/app/mock11/page.tsx b/apps/web/app/mock11/page.tsx new file mode 100644 index 0000000..e3d85bf --- /dev/null +++ b/apps/web/app/mock11/page.tsx @@ -0,0 +1,7 @@ +import { DashboardMock } from "../dashboard-mocks"; + +export const dynamic = "force-dynamic"; + +export default function Mock11Page() { + return ; +} diff --git a/apps/web/app/mock12/page.tsx b/apps/web/app/mock12/page.tsx new file mode 100644 index 0000000..efa0f0a --- /dev/null +++ b/apps/web/app/mock12/page.tsx @@ -0,0 +1,7 @@ +import { DashboardMock } from "../dashboard-mocks"; + +export const dynamic = "force-dynamic"; + +export default function Mock12Page() { + return ; +} diff --git a/apps/web/app/mock9/page.tsx b/apps/web/app/mock9/page.tsx new file mode 100644 index 0000000..907c449 --- /dev/null +++ b/apps/web/app/mock9/page.tsx @@ -0,0 +1,7 @@ +import { DashboardMock } from "../dashboard-mocks"; + +export const dynamic = "force-dynamic"; + +export default function Mock9Page() { + return ; +} diff --git a/docs/turns/2026-06-11-1946-add-four-dashboard-mocks.html b/docs/turns/2026-06-11-1946-add-four-dashboard-mocks.html new file mode 100644 index 0000000..1ecd585 --- /dev/null +++ b/docs/turns/2026-06-11-1946-add-four-dashboard-mocks.html @@ -0,0 +1,615 @@ + + + + + + Turn: Add Four Dense Dashboard Mocks + + + +
+
+
Repository implementation turn
+

Add Four Dense Dashboard Mocks

+

Added four main-dashboard mock routes that keep Islandflow in an experienced-trader register: dense, direct, evidence-first, and free of decorative card stacks.

+
2026-06-11 19:46apps/webmock9-mock12
+
+ +
+

Summary

+

The mock system now includes four additional dashboard studies: Market Command, Signal Radar, Risk Ledger, and Source Control. Each page uses the existing terminal study shell and prioritizes operational information that matters at a glance.

+
+ +
+

Changes Made

+
    +
  • Extended DashboardMock to support mock9 through mock12.
    • +
  • Added four route wrappers at /mock9, /mock10, /mock11, and /mock12.
    • +
  • Added dense dashboard layouts for market regime, signal ranking, risk exposure, and feed/source control.
    • +
  • Added responsive CSS for the new layouts, including mobile containment for horizontally scrollable data rows.
    • +
+
+ +
+

Context

+

The prior mock set explored route-level concepts such as OPRA intake, packet stack, alert blotter, and replay. This turn adds main-dashboard concepts in the same visual system, with restrained copy and high signal density for users who already understand market workflow vocabulary.

+
+ +
+

Important Implementation Details

+
+

Market Command
Session regime, active packet priority, invalidation levels, and live flow share one dashboard surface.

+

Signal Radar
Ranks symbols by pressure, source count, decay, driver, decision level, and bias.

+

Risk Ledger
Surfaces directional exposure, crowded assumptions, contra-flow, and invalidation proximity.

+

Source Control
Shows feed lag, uptime, route eligibility, and audit state so users can trust or discount packet output.

+
+
+ +
+

Relevant Diff Snippets

+

Rendered with @pierre/diffs/ssr from the implementation patch for the mock component, route wrappers, and CSS.

+
+ +
+
+ +
+

Expected Impact for End-Users

+

Users reviewing mock directions can now compare dashboard-level compositions, not only feature-specific routes. The new studies make the main page feel closer to an operating board: fewer explanatory surfaces, more compact source and decision context.

+
+ +
+

Validation

+
+ bun --cwd=apps/web run build completed successfully. + Opened /mock9 through /mock12 on a local dev server at 127.0.0.1:3011. + Checked desktop width at 1280px for all four routes; no page-level horizontal overflow after the /mock12 width fix. + Checked mobile width at 390px for all four routes; no page-level horizontal overflow after adding layout child containment. +
+
+ +
+

Issues, Limitations, and Mitigations

+

The normal web dev script could not start because port 3000 was already occupied, so visual validation used next dev -p 3011. The existing port conflict was not changed because it was runtime state outside this implementation.

+
+ +
+

Follow-up Work

+

No required follow-up is known. A useful next pass would be choosing one dashboard direction and replacing mock data with live aggregated API state.

+
+
+ +