tighten mock route terminal copy

This commit is contained in:
dirtydishes 2026-06-11 19:37:50 -04:00
parent 58ff9bb062
commit 42043205b5
3 changed files with 169 additions and 225 deletions

View file

@ -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-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-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-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-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-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-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-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}

View file

@ -17,67 +17,59 @@ type Concept = {
const concepts: Record<MockVariant, Concept> = { const concepts: Record<MockVariant, Concept> = {
mock1: { mock1: {
title: "Signal Court", title: "Signal Docket",
shortName: "Court", shortName: "Docket",
routeName: "Case Board", routeName: "Case Tape",
premise: premise: "Active claims, confirms, contra-flow, and invalidation marks on one symbol docket.",
"A fired signal is treated as a legal brief: evidence, objections, market context, and the live price trace are arranged around the claim.",
bodyClass: "mock-court" bodyClass: "mock-court"
}, },
mock2: { mock2: {
title: "Triage Desk", title: "Alert Queue",
shortName: "Desk", shortName: "Desk",
routeName: "Live Queue", routeName: "Desk Queue",
premise: premise: "Ranked live signals by urgency, source state, and tape confirmation.",
"The user works down a prioritized desk queue with clear routing, severity, source health, and next action controls always in reach.",
bodyClass: "mock-desk" bodyClass: "mock-desk"
}, },
mock3: { mock3: {
title: "Replay Theatre", title: "Replay Tape",
shortName: "Theatre", shortName: "Replay",
routeName: "Session Review", routeName: "Tape Review",
premise: premise: "Frame-locked replay across prints, candles, packet state, and notes.",
"Replay becomes a scrub room: the time rail leads, and every event, chart move, and note locks to the current evidence frame.",
bodyClass: "mock-theatre" bodyClass: "mock-theatre"
}, },
mock4: { mock4: {
title: "Sector Cartography", title: "Pressure Map",
shortName: "Map", shortName: "Map",
routeName: "Market Map", routeName: "Cross-Market",
premise: premise: "Sector heat, linked symbols, and flow clusters before single-name drilldown.",
"Cross-market pressure is drawn as territories, so the trader can see where attention clusters before opening a single-symbol case.",
bodyClass: "mock-map" bodyClass: "mock-map"
}, },
mock5: { mock5: {
title: "Options Intake", title: "OPRA Intake",
shortName: "Options", shortName: "Options",
routeName: "Options", routeName: "OPRA",
premise: premise: "Contract tape, premium concentration, sweep shape, ask lift, and packet eligibility.",
"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" bodyClass: "mock-options"
}, },
mock6: { mock6: {
title: "Packet Forensics", title: "Packet Stack",
shortName: "Packets", shortName: "Packets",
routeName: "Flow Packets", routeName: "Packets",
premise: premise: "Flow packets scored by options burst, tape response, venue mix, and sector echo.",
"Options prints, equity tape, venue imbalance, and news fragments are assembled into packets before any alert can earn attention.",
bodyClass: "mock-packets" bodyClass: "mock-packets"
}, },
mock7: { mock7: {
title: "Alert Reason Wall", title: "Alert Blotter",
shortName: "Alerts", shortName: "Alerts",
routeName: "Alerts", routeName: "Alerts",
premise: premise: "Smart-money alerts with trigger, read type, severity, and invalidation level.",
"Every smart money party alert is shown with the reason, type, invalidation path, and evidence lineage that caused it to fire.",
bodyClass: "mock-alerts" bodyClass: "mock-alerts"
}, },
mock8: { mock8: {
title: "Market Activity Graph", title: "Activity Matrix",
shortName: "Graph", shortName: "Matrix",
routeName: "Activity Graph", routeName: "Matrix",
premise: premise: "Options, packet, alert, and market context stitched into one activity map.",
"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" bodyClass: "mock-graph"
} }
}; };
@ -305,7 +297,7 @@ const packetSteps = [
label: "packet ready", label: "packet ready",
time: "09:42:44", time: "09:42:44",
weight: 86, weight: 86,
detail: "Smart money party candidate: stealth accumulation into short-dated calls" detail: "SMP candidate: stealth accumulation into short-dated calls"
} }
]; ];
@ -320,9 +312,9 @@ const alertRows = [
[ [
"09:42:51", "09:42:51",
"AAPL", "AAPL",
"Party Alert", "SMP Alert",
"stealth accumulation", "stealth accumulation",
"options led equity by 72s; dark venue share elevated", "options led stock by 72s; dark share elevated",
"accept above 194.50", "accept above 194.50",
"high" "high"
], ],
@ -371,7 +363,7 @@ const graphLanes = [
x2: "88%", x2: "88%",
y: "22%", y: "22%",
tone: "accent", tone: "accent",
text: "Party Alert: stealth accumulation" text: "SMP alert: stealth accumulation"
}, },
{ {
label: "Market", label: "Market",
@ -403,12 +395,12 @@ export function DashboardMock({ variant }: DashboardMockProps) {
function MockNavigation({ active, concept }: { active: MockVariant; concept: Concept }) { function MockNavigation({ active, concept }: { active: MockVariant; concept: Concept }) {
return ( return (
<header className="mock-nav" aria-label="Mock redesign navigation"> <header className="mock-nav" aria-label="Terminal navigation">
<Link className="mock-brand" href="/mock1"> <Link className="mock-brand" href="/mock1">
<span>IF</span> <span>IF</span>
<strong>mock lab</strong> <strong>terminal studies</strong>
</Link> </Link>
<nav className="mock-route-tabs" aria-label="Mock variants"> <nav className="mock-route-tabs" aria-label="Terminal studies">
{variantOrder.map((item) => ( {variantOrder.map((item) => (
<Link <Link
aria-current={item === active ? "page" : undefined} aria-current={item === active ? "page" : undefined}
@ -421,11 +413,11 @@ function MockNavigation({ active, concept }: { active: MockVariant; concept: Con
</Link> </Link>
))} ))}
</nav> </nav>
<div className="mock-now" aria-label="Current session state"> <div className="mock-now" aria-label="Market clock">
<span>live sketch</span> <span>live tape</span>
<strong>09:41:23 ET</strong> <strong>09:41:23 ET</strong>
</div> </div>
<section className="mock-hero" aria-label="Concept summary"> <section className="mock-hero" aria-label="Route summary">
<p>{concept.routeName}</p> <p>{concept.routeName}</p>
<h1 id="mock-title">{concept.title}</h1> <h1 id="mock-title">{concept.title}</h1>
<span>{concept.premise}</span> <span>{concept.premise}</span>
@ -436,31 +428,28 @@ function MockNavigation({ active, concept }: { active: MockVariant; concept: Con
function SignalCourt() { function SignalCourt() {
return ( return (
<section className="mock-court-layout" aria-label="Signal court concept"> <section className="mock-court-layout" aria-label="Signal docket">
<Panel className="mock-verdict" title="Current claim"> <Panel className="mock-verdict" title="Active read">
<div className="mock-verdict-mark">AAPL</div> <div className="mock-verdict-mark">AAPL</div>
<h2>Dark sweep pressure is confirmed by call lift.</h2> <h2>Dark sweep confirmed by short-dated call lift.</h2>
<p> <p>AAPL holds above 194.50 with options lead, elevated dark share, and QQQ support.</p>
Treat the alert as a claim to prove. The board shows confirming evidence, contradictions,
and what must happen next before the trade deserves attention.
</p>
<div className="mock-verdict-actions"> <div className="mock-verdict-actions">
<button type="button">Open case</button> <button type="button">Open tape</button>
<button type="button">Mark watch</button> <button type="button">Set watch</button>
</div> </div>
</Panel> </Panel>
<Panel className="mock-exhibits" title="Evidence exhibits"> <Panel className="mock-exhibits" title="Evidence">
<EvidenceStack /> <EvidenceStack />
</Panel> </Panel>
<Panel className="mock-court-chart" title="Price testimony"> <Panel className="mock-court-chart" title="Price tape">
<ChartSketch density={60} marker="claim filed" /> <ChartSketch density={60} marker="signal" />
</Panel> </Panel>
<Panel className="mock-objections" title="Objections"> <Panel className="mock-objections" title="Contra">
<FactList <FactList
items={[ items={[
["Venue concentration", "64% off-exchange share is above normal"], ["Venue", "64% off-exchange share, +18 pts vs session"],
["Sector check", "QQQ confirmation is present but not decisive"], ["Sector", "QQQ confirms; semis neutral"],
["Invalidation", "Acceptance fails below 194.50"] ["Invalid", "Below 194.50"]
]} ]}
/> />
</Panel> </Panel>
@ -470,16 +459,16 @@ function SignalCourt() {
function TriageDesk() { function TriageDesk() {
return ( return (
<section className="mock-desk-layout" aria-label="Triage desk concept"> <section className="mock-desk-layout" aria-label="Alert queue">
<aside className="mock-desk-rail" aria-label="Queue filters"> <aside className="mock-desk-rail" aria-label="Queue filters">
<strong>route</strong> <strong>route</strong>
{["all", "urgent", "needs chart", "stale source"].map((item, index) => ( {["all", "hot", "chart", "stale"].map((item, index) => (
<button className={index === 1 ? "is-active" : ""} type="button" key={item}> <button className={index === 1 ? "is-active" : ""} type="button" key={item}>
{item} {item}
</button> </button>
))} ))}
</aside> </aside>
<Panel className="mock-queue-board" title="Priority queue"> <Panel className="mock-queue-board" title="Priority">
{anomalies.map((item, index) => ( {anomalies.map((item, index) => (
<article <article
className={index === 0 ? "mock-desk-ticket is-selected" : "mock-desk-ticket"} className={index === 0 ? "mock-desk-ticket is-selected" : "mock-desk-ticket"}
@ -495,21 +484,21 @@ function TriageDesk() {
</article> </article>
))} ))}
</Panel> </Panel>
<Panel className="mock-desk-workspace" title="Selected alert"> <Panel className="mock-desk-workspace" title="Selected">
<div className="mock-workspace-head"> <div className="mock-workspace-head">
<span>AAPL</span> <span>AAPL</span>
<h2>Dark sweep aligns with call pressure</h2> <h2>Dark sweep aligns with call pressure</h2>
<p>Next action: verify whether price accepts above the prior liquidity shelf.</p> <p>Monitor acceptance above 194.50; invalidate on failed retest.</p>
</div> </div>
<ChartSketch density={42} marker="decision" /> <ChartSketch density={42} marker="decision line" />
</Panel> </Panel>
<Panel className="mock-desk-health" title="Source status"> <Panel className="mock-desk-health" title="Feeds">
<HealthRows /> <HealthRows />
<FactList <FactList
items={[ items={[
["Agreement", "4 of 5 linked sources agree"], ["Confluence", "4/5 sources"],
["Replay match", "Similar to Apr 26 open"], ["Analog", "Apr 26 open"],
["Risk note", "Off-exchange share elevated"] ["Risk", "Dark share elevated"]
]} ]}
/> />
</Panel> </Panel>
@ -519,12 +508,12 @@ function TriageDesk() {
function ReplayTheatre() { function ReplayTheatre() {
return ( return (
<section className="mock-theatre-layout" aria-label="Replay theatre concept"> <section className="mock-theatre-layout" aria-label="Replay tape">
<Panel className="mock-stage" title="Replay frame"> <Panel className="mock-stage" title="Frame">
<div className="mock-stage-head"> <div className="mock-stage-head">
<div> <div>
<span>May 16, 2024</span> <span>May 16, 2024</span>
<h2>09:41:23 confirmation window</h2> <h2>09:41:23 confirm window</h2>
</div> </div>
<div className="mock-stage-controls" aria-label="Replay controls"> <div className="mock-stage-controls" aria-label="Replay controls">
<button type="button">-30s</button> <button type="button">-30s</button>
@ -536,7 +525,7 @@ function ReplayTheatre() {
<ReplayRail /> <ReplayRail />
<ChartSketch density={72} marker="cursor" /> <ChartSketch density={72} marker="cursor" />
</Panel> </Panel>
<Panel className="mock-script" title="Event script"> <Panel className="mock-script" title="Sequence">
<ol> <ol>
{timeline.map(([time, title, detail]) => ( {timeline.map(([time, title, detail]) => (
<li key={time}> <li key={time}>
@ -547,15 +536,15 @@ function ReplayTheatre() {
))} ))}
</ol> </ol>
</Panel> </Panel>
<Panel className="mock-theatre-tape" title="Synced tape"> <Panel className="mock-theatre-tape" title="Flow">
<FlowRows compact /> <FlowRows compact />
</Panel> </Panel>
<Panel className="mock-director-notes" title="Director notes"> <Panel className="mock-director-notes" title="Notes">
<FactList <FactList
items={[ items={[
["Lead", "Dark flow cluster arrived first"], ["Lead", "Dark cluster first"],
["Confirm", "195 C sweep followed within 72s"], ["Confirm", "195C sweep +72s"],
["Watch", "Acceptance needs one more candle"] ["Watch", "One candle acceptance"]
]} ]}
/> />
</Panel> </Panel>
@ -565,8 +554,8 @@ function ReplayTheatre() {
function SectorCartography() { function SectorCartography() {
return ( return (
<section className="mock-map-layout" aria-label="Sector cartography concept"> <section className="mock-map-layout" aria-label="Pressure map">
<Panel className="mock-map-canvas" title="Pressure territory"> <Panel className="mock-map-canvas" title="Pressure">
<div className="mock-territory"> <div className="mock-territory">
{atlasGroups.map((group) => ( {atlasGroups.map((group) => (
<article <article
@ -586,7 +575,7 @@ function SectorCartography() {
))} ))}
</div> </div>
</Panel> </Panel>
<Panel className="mock-map-index" title="Cluster index"> <Panel className="mock-map-index" title="Clusters">
{atlasGroups.map((group) => ( {atlasGroups.map((group) => (
<article className="mock-cluster" key={group.name}> <article className="mock-cluster" key={group.name}>
<div> <div>
@ -597,7 +586,7 @@ function SectorCartography() {
</article> </article>
))} ))}
</Panel> </Panel>
<Panel className="mock-map-flow" title="Linked flow"> <Panel className="mock-map-flow" title="Linked">
<FlowRows compact /> <FlowRows compact />
</Panel> </Panel>
</section> </section>
@ -606,19 +595,17 @@ function SectorCartography() {
function OptionsIntake() { function OptionsIntake() {
return ( return (
<section className="mock-options-layout" aria-label="Options intake concept"> <section className="mock-options-layout" aria-label="OPRA intake">
<div className="mock-options-command" aria-label="Options filters"> <div className="mock-options-command" aria-label="Options filters">
{["OPRA LIVE", "ASK SIDE", "ABOVE 2 SIGMA", "PACKETABLE", "AAPL FOCUS"].map( {["OPRA LIVE", "ASK LIFT", "+2 SIGMA", "PACKET FIT", "AAPL"].map((item, index) => (
(item, index) => (
<button className={index === 3 ? "is-active" : ""} type="button" key={item}> <button className={index === 3 ? "is-active" : ""} type="button" key={item}>
{item} {item}
</button> </button>
) ))}
)}
</div> </div>
<div className="mock-options-tape" role="table" aria-label="Options flow intake blotter"> <div className="mock-options-tape" role="table" aria-label="Options flow intake blotter">
<div className="mock-options-row is-head" role="row"> <div className="mock-options-row is-head" role="row">
{["Time", "Sym", "Contract", "Qty", "Premium", "Shape", "Ask", "Base", "Use"].map( {["Time", "Sym", "Contract", "Qty", "Premium", "Print", "Ask", "Z", "State"].map(
(item) => ( (item) => (
<span role="columnheader" key={item}> <span role="columnheader" key={item}>
{item} {item}
@ -646,24 +633,24 @@ function OptionsIntake() {
</div> </div>
))} ))}
</div> </div>
<aside className="mock-options-depth" aria-label="Selected contract depth"> <aside className="mock-options-depth" aria-label="Selected contract">
<h2>AAPL 195C depth</h2> <h2>AAPL 195C</h2>
<dl> <dl>
<div> <div>
<dt>packet fit</dt> <dt>fit</dt>
<dd>92%</dd> <dd>92%</dd>
</div> </div>
<div> <div>
<dt>repeat buyer</dt> <dt>repeat</dt>
<dd>3 prints</dd> <dd>3 prints</dd>
</div> </div>
<div> <div>
<dt>venue skew</dt> <dt>venue</dt>
<dd>ask 61%</dd> <dd>ask 61%</dd>
</div> </div>
<div> <div>
<dt>alert path</dt> <dt>trigger</dt>
<dd>needs equity hold</dd> <dd>hold 194.50</dd>
</div> </div>
</dl> </dl>
</aside> </aside>
@ -674,22 +661,22 @@ function OptionsIntake() {
function PacketForensics() { function PacketForensics() {
return ( return (
<section className="mock-packet-layout" aria-label="Flow packet forensics concept"> <section className="mock-packet-layout" aria-label="Packet stack">
<div className="mock-packet-chain" aria-label="Packet assembly chain"> <div className="mock-packet-chain" aria-label="Packet chain">
{packetSteps.map((step, index) => ( {packetSteps.map((step, index) => (
<article key={step.label} style={{ "--weight": step.weight } as CSSProperties}> <article key={step.label} style={{ "--weight": step.weight } as CSSProperties}>
<time>{step.time}</time> <time>{step.time}</time>
<strong>{step.label}</strong> <strong>{step.label}</strong>
<p>{step.detail}</p> <p>{step.detail}</p>
<span> <span>
{index === packetSteps.length - 1 ? "alert eligible" : `${step.weight}% contribution`} {index === packetSteps.length - 1 ? "alert eligible" : `${step.weight}% weight`}
</span> </span>
</article> </article>
))} ))}
</div> </div>
<div className="mock-packet-ledger" role="table" aria-label="Packet state ledger"> <div className="mock-packet-ledger" role="table" aria-label="Packet state ledger">
<div className="mock-packet-row is-head" role="row"> <div className="mock-packet-row is-head" role="row">
{["Packet", "Symbol", "State", "Evidence", "Reason", "Score"].map((item) => ( {["Packet", "Sym", "State", "Sources", "Read", "Score"].map((item) => (
<span role="columnheader" key={item}> <span role="columnheader" key={item}>
{item} {item}
</span> </span>
@ -708,13 +695,13 @@ function PacketForensics() {
</div> </div>
))} ))}
</div> </div>
<aside className="mock-packet-inspector" aria-label="Packet evidence inspector"> <aside className="mock-packet-inspector" aria-label="Packet lineage">
<h2>PKT-8841 lineage</h2> <h2>PKT-8841 lineage</h2>
<FactList <FactList
items={[ items={[
["Options", "195C sweep and 200C join established the packet spine"], ["Options", "195C sweep + 200C join"],
["Equity", "Dark print confirmed demand after the options burst"], ["Equity", "Dark buy after options burst"],
["Alert trigger", "Party alert only fires after acceptance above 194.50"] ["Trigger", "Acceptance above 194.50"]
]} ]}
/> />
</aside> </aside>
@ -724,16 +711,14 @@ function PacketForensics() {
function AlertReasonWall() { function AlertReasonWall() {
return ( return (
<section className="mock-alert-layout" aria-label="Smart money alert wall concept"> <section className="mock-alert-layout" aria-label="SMP alert blotter">
<div className="mock-alert-wall" role="table" aria-label="Alert reasons"> <div className="mock-alert-wall" role="table" aria-label="Alert blotter">
<div className="mock-alert-row is-head" role="row"> <div className="mock-alert-row is-head" role="row">
{["Time", "Sym", "Type", "Reason", "Why it fired", "Invalidation", "Severity"].map( {["Time", "Sym", "Type", "Read", "Trigger", "Invalid", "Severity"].map((item) => (
(item) => (
<span role="columnheader" key={item}> <span role="columnheader" key={item}>
{item} {item}
</span> </span>
) ))}
)}
</div> </div>
{alertRows.map(([time, symbol, type, reason, why, invalidation, severity]) => ( {alertRows.map(([time, symbol, type, reason, why, invalidation, severity]) => (
<div className={`mock-alert-row is-${severity}`} role="row" key={`${time}-${symbol}`}> <div className={`mock-alert-row is-${severity}`} role="row" key={`${time}-${symbol}`}>
@ -751,20 +736,20 @@ function AlertReasonWall() {
</div> </div>
))} ))}
</div> </div>
<aside className="mock-alert-reason" aria-label="Selected alert decision path"> <aside className="mock-alert-reason" aria-label="Selected alert stack">
<h2>Why AAPL fired</h2> <h2>AAPL 09:42:51</h2>
<ol> <ol>
<li> <li>
<strong>Options flow led</strong> <strong>Options lead</strong>
<span>Short-dated call premium arrived before the visible equity move.</span> <span>Short-dated call premium before visible stock move.</span>
</li> </li>
<li> <li>
<strong>Packet confirmed</strong> <strong>Packet confirm</strong>
<span>Dark venue share and QQQ context removed the obvious objections.</span> <span>Dark share high; QQQ supportive.</span>
</li> </li>
<li> <li>
<strong>Party alert typed</strong> <strong>SMP type</strong>
<span>Classified as stealth accumulation, not a momentum chase.</span> <span>Stealth accumulation, not chase flow.</span>
</li> </li>
</ol> </ol>
</aside> </aside>
@ -774,8 +759,8 @@ function AlertReasonWall() {
function MarketActivityGraph() { function MarketActivityGraph() {
return ( return (
<section className="mock-graph-layout" aria-label="Market activity graph concept"> <section className="mock-graph-layout" aria-label="Activity matrix">
<div className="mock-graph-canvas" aria-label="Options to alert graph"> <div className="mock-graph-canvas" aria-label="Options packet alert matrix">
{graphLanes.map((lane) => ( {graphLanes.map((lane) => (
<div <div
className={`mock-graph-link is-${lane.tone}`} className={`mock-graph-link is-${lane.tone}`}
@ -786,17 +771,17 @@ function MarketActivityGraph() {
<span>{lane.text}</span> <span>{lane.text}</span>
</div> </div>
))} ))}
<div className="mock-graph-node is-options">Options intake</div> <div className="mock-graph-node is-options">OPRA intake</div>
<div className="mock-graph-node is-packet">Packet PKT-8841</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-alert">SMP alert</div>
<div className="mock-graph-node is-market">Market context</div> <div className="mock-graph-node is-market">Market state</div>
</div> </div>
<div className="mock-graph-routes" aria-label="Route coverage"> <div className="mock-graph-routes" aria-label="Route map">
{[ {[
["Options page", "raw prints become packet candidates"], ["OPRA", "raw contract tape"],
["Packets page", "evidence sources are merged and scored"], ["Packets", "merged source stack"],
["Alerts page", "reason/type/invalidation are exposed"], ["Alerts", "SMP read + invalidation"],
["Replay page", "the same chain can be audited after the fact"] ["Replay", "frame audit"]
].map(([route, purpose]) => ( ].map(([route, purpose]) => (
<div key={route}> <div key={route}>
<strong>{route}</strong> <strong>{route}</strong>
@ -804,12 +789,12 @@ function MarketActivityGraph() {
</div> </div>
))} ))}
</div> </div>
<div className="mock-graph-strip" aria-label="Non-redundant feature map"> <div className="mock-graph-strip" aria-label="Matrix status">
<FactList <FactList
items={[ items={[
["No duplicate views", "Each route owns a different step in the evidence chain"], ["State", "Raw -> packet -> alert"],
["User value", "The trader sees whether activity is raw, packeted, or alert-worthy"], ["Scope", "No duplicate panes"],
["Decision path", "Every alert remains traceable to the options flow that caused it"] ["Audit", "Alert traces to OPRA source"]
]} ]}
/> />
</div> </div>
@ -855,7 +840,7 @@ function EvidenceStack() {
function ChartSketch({ density, marker }: { density: number; marker: string }) { function ChartSketch({ density, marker }: { density: number; marker: string }) {
return ( return (
<div className="mock-chart" aria-label="Synthetic price and volume sketch"> <div className="mock-chart" aria-label="Price and volume trace">
<div className="mock-chart-readout"> <div className="mock-chart-readout">
<span>AAPL</span> <span>AAPL</span>
<strong>194.88</strong> <strong>194.88</strong>
@ -913,15 +898,13 @@ function FlowRows({ compact = false }: { compact?: boolean }) {
function FlowLadder() { function FlowLadder() {
return ( return (
<div className="mock-flow-ladder" aria-label="Options flow to alert ladder"> <div className="mock-flow-ladder" aria-label="Options flow ladder">
{["raw option print", "candidate flow", "packet assembly", "party alert"].map( {["raw print", "candidate", "packet", "SMP alert"].map((item, index) => (
(item, index) => (
<div className={index === 1 ? "is-active" : ""} key={item}> <div className={index === 1 ? "is-active" : ""} key={item}>
<span>{index + 1}</span> <span>{index + 1}</span>
<strong>{item}</strong> <strong>{item}</strong>
</div> </div>
) ))}
)}
</div> </div>
); );
} }

File diff suppressed because one or more lines are too long