From dad805b019e4b56017fc89336487486c9165daf1 Mon Sep 17 00:00:00 2001 From: dirtydishes Date: Thu, 11 Jun 2026 20:15:54 -0400 Subject: [PATCH] make activity matrix legible --- .beads/issues.jsonl | 1 + apps/web/app/dashboard-mocks.tsx | 157 ++++++++++++++---------- apps/web/app/globals.css | 197 ++++++++++++++++++------------- 3 files changed, 205 insertions(+), 150 deletions(-) diff --git a/.beads/issues.jsonl b/.beads/issues.jsonl index dc5707c..ac5a7f3 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-4j7","title":"replace activity matrix with alert lineage mock","description":"Rework the confusing Activity Matrix mock into a concrete alert lineage view that shows how a selected alert formed, including evidence chain, confirming/against context, invalidations, and audit state.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-06-12T00:10:18Z","created_by":"dirtydishes","updated_at":"2026-06-12T00:15:45Z","started_at":"2026-06-12T00:10:21Z","closed_at":"2026-06-12T00:15:45Z","close_reason":"Replaced the abstract Activity Matrix mock with an alert lineage view that supports all-symbol scope, selected alert evidence, invalidations, and audit context.","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} diff --git a/apps/web/app/dashboard-mocks.tsx b/apps/web/app/dashboard-mocks.tsx index 5d77c21..cefbd4f 100644 --- a/apps/web/app/dashboard-mocks.tsx +++ b/apps/web/app/dashboard-mocks.tsx @@ -78,10 +78,10 @@ const concepts: Record = { bodyClass: "mock-alerts" }, mock8: { - title: "Activity Matrix", - shortName: "Matrix", - routeName: "Matrix", - premise: "Options, packet, alert, and market context stitched into one activity map.", + title: "Alert Lineage", + shortName: "Lineage", + routeName: "Signal Trace", + premise: "Selected alert formation from raw prints through packet, confirmation, invalidation, and replay audit.", bodyClass: "mock-graph" }, mock9: { @@ -391,32 +391,40 @@ const alertRows = [ ] ]; -const graphLanes = [ - { label: "Options", x1: "5%", x2: "31%", y: "18%", tone: "good", text: "195C sweep + 200C join" }, - { - label: "Packet", - x1: "35%", - x2: "60%", - y: "35%", - tone: "info", - text: "PKT-8841 ready, 5 sources" - }, - { - label: "Alert", - x1: "63%", - x2: "88%", - y: "22%", - tone: "accent", - text: "SMP alert: stealth accumulation" - }, - { - label: "Market", - x1: "20%", - x2: "82%", - y: "69%", - tone: "watch", - text: "QQQ confirms; semis neutral" - } +const lineageScope = [ + ["Scope", "All symbols", "ranked formations"], + ["Focus", "AAPL SMP", "top active alert"], + ["Valid", "above 194.50", "QQQ above 458.20"], + ["Packet", "PKT-8841", "86 / 5 sources"] +]; + +const lineageQueue = [ + ["09:42:51", "AAPL", "SMP Alert", "86", "stealth accumulation", "active"], + ["09:41:58", "TSLA", "Ignition Watch", "71", "momentum ignition", "watch"], + ["09:40:34", "NVDA", "Absorption", "63", "call wall defense", "hold"], + ["09:39:22", "AMZN", "Divergence", "39", "put sweep against basket", "reject"] +]; + +const lineageEvents = [ + ["09:41:23.420", "OPRA", "17MAY 195C sweep", "$4.32M", "ask 61%", "confirming"], + ["09:41:48.018", "Equity", "dark buy cluster", "$4.87M", "off-ex 64%", "confirming"], + ["09:42:06.130", "Packet", "PKT-8841 ready", "86", "5 sources", "confirming"], + ["09:42:31.004", "Market", "QQQ confirms", "458.20 held", "semis neutral", "confirming"], + ["09:42:51.000", "Alert", "SMP fired", "high", "valid above 194.50", "active"] +]; + +const lineageChecks = [ + ["Options lead", "OPRA led stock by 72s", "confirming"], + ["Dark share", "+18 pts vs session baseline", "confirming"], + ["Market", "QQQ supportive; semis neutral", "confirming"], + ["Contra", "AMZN put sweep remains isolated", "against"], + ["Replay", "synced through alert frame", "audit"] +]; + +const lineageInvalidations = [ + ["AAPL", "194.50", "alert invalid"], + ["QQQ", "458.20", "market confirm fails"], + ["Packet", "2 source loss", "score below 70"] ]; const commandMetrics = [ @@ -873,45 +881,64 @@ function AlertReasonWall() { function MarketActivityGraph() { return ( -
-
- {graphLanes.map((lane) => ( -
- {lane.label} - {lane.text} -
- ))} -
OPRA intake
-
Packet PKT-8841
-
SMP alert
-
Market state
-
-
- {[ - ["OPRA", "raw contract tape"], - ["Packets", "merged source stack"], - ["Alerts", "SMP read + invalidation"], - ["Replay", "frame audit"] - ].map(([route, purpose]) => ( -
- {route} - {purpose} +
+
+ {lineageScope.map(([label, value, detail]) => ( +
+ {label} + {value} + {detail}
))}
-
- packet -> alert"], - ["Scope", "No duplicate panes"], - ["Audit", "Alert traces to OPRA source"] - ]} - /> +
+
+ {["Time", "Source", "Event", "Value", "Read", "State"].map((item) => ( + + {item} + + ))} +
+ {lineageEvents.map(([time, source, event, value, read, state]) => ( +
+ + {source} + {event} + {value} + {read} + {state} +
+ ))}
+
+
+ {["Time", "Sym", "Type", "Score", "Read", "State"].map((item) => ( + + {item} + + ))} +
+ {lineageQueue.map(([time, symbol, type, score, read, state]) => ( +
+ + {symbol} + {type} + {score} + {read} + + {state} + +
+ ))} +
+ +
); } diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css index 7310074..b2ca445 100644 --- a/apps/web/app/globals.css +++ b/apps/web/app/globals.css @@ -5210,104 +5210,137 @@ h3 { } .mock-graph-layout { - grid-template-columns: minmax(680px, 1fr) 310px; + grid-template-columns: minmax(720px, 1fr) 320px; grid-template-areas: - "canvas routes" - "canvas strip"; + "scope scope" + "chain inspector" + "queue invalid"; } -.mock-graph-canvas { - grid-area: canvas; - position: relative; - min-height: 620px; - border-block: 1px solid var(--mock-line); - overflow: hidden; - background: - linear-gradient(0deg, var(--mock-line) 1px, transparent 1px) 0 0 / 100% 62px, - linear-gradient(90deg, var(--mock-line) 1px, transparent 1px) 0 0 / 82px 100%; -} - -.mock-graph-link { - position: absolute; - left: var(--x1); - top: var(--y); - width: calc(var(--x2) - var(--x1)); +.mock-lineage-scope { + grid-area: scope; display: grid; - gap: 4px; - border-top: 2px solid var(--mock-accent); - padding-top: 8px; + grid-template-columns: repeat(4, minmax(0, 1fr)); + border-block: 1px solid var(--mock-line); } -.mock-graph-link.is-good { - border-color: var(--mock-good); +.mock-lineage-scope div { + min-width: 0; + min-height: 86px; + display: grid; + align-content: center; + gap: 5px; + border-right: 1px solid var(--mock-line); + padding: 12px; } -.mock-graph-link.is-info { - border-color: var(--mock-info); +.mock-lineage-scope div:last-child { + border-right: 0; } -.mock-graph-link.is-watch { - border-color: var(--mock-alt); -} - -.mock-graph-link strong { +.mock-lineage-scope span, +.mock-lineage-scope em, +.mock-lineage-row time, +.mock-lineage-row span, +.mock-lineage-queue-row time, +.mock-lineage-queue-row span { + color: var(--mock-faint); font-family: var(--font-mono), monospace; - font-size: 0.74rem; - text-transform: uppercase; + font-size: 0.68rem; + font-style: normal; } -.mock-graph-link span { +.mock-lineage-scope strong { + color: var(--mock-ink); + font-size: 1rem; + line-height: 1.12; +} + +.mock-lineage-chain, +.mock-lineage-queue { + overflow-x: auto; + border-block: 1px solid var(--mock-line); +} + +.mock-lineage-chain { + grid-area: chain; +} + +.mock-lineage-queue { + grid-area: queue; +} + +.mock-lineage-row { + min-width: 900px; + min-height: 44px; + display: grid; + grid-template-columns: 116px 86px minmax(210px, 1fr) 104px minmax(150px, 0.72fr) 106px; + gap: 10px; + align-items: center; + border-bottom: 1px solid var(--mock-line); + padding: 0 10px; color: var(--mock-muted); - font-size: 0.8rem; + font-size: 0.76rem; } -.mock-graph-node { - position: absolute; +.mock-lineage-queue-row { + min-width: 720px; + min-height: 42px; display: grid; - place-items: center; - min-height: 46px; - border: 1px solid var(--mock-line-strong); - border-radius: 6px; - padding: 9px 12px; - background: var(--mock-surface-2); - color: var(--mock-ink); + grid-template-columns: 76px 66px 112px 58px minmax(170px, 1fr) 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-lineage-row:last-child, +.mock-lineage-queue-row:last-child { + border-bottom: 0; +} + +.mock-lineage-row.is-head, +.mock-lineage-queue-row.is-head { + min-height: 30px; + color: var(--mock-faint); font-family: var(--font-mono), monospace; - font-size: 0.72rem; + font-size: 0.62rem; + letter-spacing: 0.08em; text-transform: uppercase; } -.mock-graph-node.is-options { - left: 7%; - top: 14%; -} - -.mock-graph-node.is-packet { - left: 38%; - top: 31%; -} - -.mock-graph-node.is-alert { - right: 8%; - top: 17%; -} - -.mock-graph-node.is-market { - left: 24%; - bottom: 19%; -} - -.mock-graph-routes { - grid-area: routes; - border-block: 1px solid var(--mock-line); - padding-block: 8px; -} - -.mock-graph-routes strong { +.mock-lineage-row.is-active, +.mock-lineage-queue-row.is-active { + background: var(--mock-accent-soft); color: var(--mock-ink); } -.mock-graph-strip { - grid-area: strip; +.mock-lineage-queue-row.is-reject { + color: color-mix(in oklch, var(--mock-bad) 72%, var(--mock-muted)); +} + +.mock-lineage-inspector, +.mock-lineage-invalid { + border-block: 1px solid var(--mock-line); + padding-block: 12px; +} + +.mock-lineage-inspector { + grid-area: inspector; +} + +.mock-lineage-invalid { + grid-area: invalid; +} + +.mock-lineage-inspector h2, +.mock-lineage-invalid h2 { + margin: 0 0 12px; + color: var(--mock-ink); + font-size: 1rem; + letter-spacing: -0.01em; } .mock-command-layout, @@ -5705,6 +5738,7 @@ h3 { .mock-packet-chain, .mock-flow-ladder, + .mock-lineage-scope, .mock-command-strip, .mock-radar-sweep, .mock-risk-map { @@ -5713,6 +5747,7 @@ h3 { .mock-packet-chain article, .mock-flow-ladder div, + .mock-lineage-scope div, .mock-command-strip div, .mock-radar-band, .mock-risk-level { @@ -5722,6 +5757,7 @@ h3 { .mock-packet-chain article:last-child, .mock-flow-ladder div:last-child, + .mock-lineage-scope div:last-child, .mock-command-strip div:last-child, .mock-radar-band:last-child, .mock-risk-level:last-child { @@ -5778,16 +5814,7 @@ h3 { font-size: 1rem; } - .mock-graph-canvas { - min-height: 520px; - } - - .mock-graph-link { - width: 42%; - } - - .mock-graph-node { - max-width: 150px; - text-align: center; + .mock-lineage-scope strong { + font-size: 1rem; } }