tighten mock route terminal copy
This commit is contained in:
parent
58ff9bb062
commit
42043205b5
3 changed files with 169 additions and 225 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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
Loading…
Add table
Add a link
Reference in a new issue