make activity matrix legible

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

apps/web/app/dashboard-mocks.tsx

@@ -78,10 +78,10 @@ const concepts: Record<MockVariant, Concept> = {
     bodyClass: "mock-alerts"
   },
   mock8: {
-    title: "Activity Matrix",
+    title: "Alert Lineage",
-    shortName: "Matrix",
+    shortName: "Lineage",
-    routeName: "Matrix",
+    routeName: "Signal Trace",
-    premise: "Options, packet, alert, and market context stitched into one activity map.",
+    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 = [
+const lineageScope = [
-  { label: "Options", x1: "5%", x2: "31%", y: "18%", tone: "good", text: "195C sweep + 200C join" },
+  ["Scope", "All symbols", "ranked formations"],
-  {
+  ["Focus", "AAPL SMP", "top active alert"],
-    label: "Packet",
+  ["Valid", "above 194.50", "QQQ above 458.20"],
-    x1: "35%",
+  ["Packet", "PKT-8841", "86 / 5 sources"]
-    x2: "60%",
+];
-    y: "35%",
+
-    tone: "info",
+const lineageQueue = [
-    text: "PKT-8841 ready, 5 sources"
+  ["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"],
-    label: "Alert",
+  ["09:39:22", "AMZN", "Divergence", "39", "put sweep against basket", "reject"]
-    x1: "63%",
+];
-    x2: "88%",
+
-    y: "22%",
+const lineageEvents = [
-    tone: "accent",
+  ["09:41:23.420", "OPRA", "17MAY 195C sweep", "$4.32M", "ask 61%", "confirming"],
-    text: "SMP alert: stealth accumulation"
+  ["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"],
-    label: "Market",
+  ["09:42:51.000", "Alert", "SMP fired", "high", "valid above 194.50", "active"]
-    x1: "20%",
+];
-    x2: "82%",
+
-    y: "69%",
+const lineageChecks = [
-    tone: "watch",
+  ["Options lead", "OPRA led stock by 72s", "confirming"],
-    text: "QQQ confirms; semis neutral"
+  ["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 (
-    <section className="mock-graph-layout" aria-label="Activity matrix">
+    <section className="mock-graph-layout" aria-label="Alert lineage">
-      <div className="mock-graph-canvas" aria-label="Options packet alert matrix">
+      <div className="mock-lineage-scope" aria-label="Current scope">
-        {graphLanes.map((lane) => (
+        {lineageScope.map(([label, value, detail]) => (
-          <div
+          <div key={label}>
-            className={`mock-graph-link is-${lane.tone}`}
+            <span>{label}</span>
-            key={lane.label}
+            <strong>{value}</strong>
-            style={{ "--x1": lane.x1, "--x2": lane.x2, "--y": lane.y } as CSSProperties}
+            <em>{detail}</em>
-          >
-            <strong>{lane.label}</strong>
-            <span>{lane.text}</span>
-          </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-alert">SMP alert</div>
-        <div className="mock-graph-node is-market">Market state</div>
-      </div>
-      <div className="mock-graph-routes" aria-label="Route map">
-        {[
-          ["OPRA", "raw contract tape"],
-          ["Packets", "merged source stack"],
-          ["Alerts", "SMP read + invalidation"],
-          ["Replay", "frame audit"]
-        ].map(([route, purpose]) => (
-          <div key={route}>
-            <strong>{route}</strong>
-            <span>{purpose}</span>
           </div>
         ))}
       </div>
-      <div className="mock-graph-strip" aria-label="Matrix status">
+      <div className="mock-lineage-chain" role="table" aria-label="Selected alert evidence chain">
-        <FactList
+        <div className="mock-lineage-row is-head" role="row">
-          items={[
+          {["Time", "Source", "Event", "Value", "Read", "State"].map((item) => (
-            ["State", "Raw -> packet -> alert"],
+            <span role="columnheader" key={item}>
-            ["Scope", "No duplicate panes"],
+              {item}
-            ["Audit", "Alert traces to OPRA source"]
+            </span>
-          ]}
+          ))}
-        />
         </div>
+        {lineageEvents.map(([time, source, event, value, read, state]) => (
+          <div className={`mock-lineage-row is-${state}`} role="row" key={`${time}-${source}`}>
+            <time>{time}</time>
+            <strong>{source}</strong>
+            <span>{event}</span>
+            <span>{value}</span>
+            <span>{read}</span>
+            <Badge tone={state === "active" ? "Bullish" : "Info"}>{state}</Badge>
+          </div>
+        ))}
+      </div>
+      <div className="mock-lineage-queue" role="table" aria-label="All-symbol alert formations">
+        <div className="mock-lineage-queue-row is-head" role="row">
+          {["Time", "Sym", "Type", "Score", "Read", "State"].map((item) => (
+            <span role="columnheader" key={item}>
+              {item}
+            </span>
+          ))}
+        </div>
+        {lineageQueue.map(([time, symbol, type, score, read, state]) => (
+          <div className={`mock-lineage-queue-row is-${state}`} role="row" key={`${time}-${symbol}`}>
+            <time>{time}</time>
+            <strong>{symbol}</strong>
+            <span>{type}</span>
+            <span>{score}</span>
+            <span>{read}</span>
+            <Badge tone={state === "reject" ? "Bearish" : state === "watch" || state === "hold" ? "Watch" : "Bullish"}>
+              {state}
+            </Badge>
+          </div>
+        ))}
+      </div>
+      <aside className="mock-lineage-inspector" aria-label="Selected alert read">
+        <h2>AAPL SMP 09:42:51</h2>
+        <FactList items={lineageChecks.map(([label, value]) => [label, value])} />
+      </aside>
+      <aside className="mock-lineage-invalid" aria-label="Invalidation levels">
+        <h2>Invalidates</h2>
+        <FactList items={lineageInvalidations.map(([label, level, result]) => [label, `${level}: ${result}`])} />
+      </aside>
     </section>
   );
 }

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"
+    "scope scope"
-    "canvas strip";
+    "chain inspector"
+    "queue invalid";
 }
 
-.mock-graph-canvas {
+.mock-lineage-scope {
-  grid-area: canvas;
+  grid-area: scope;
-  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));
   display: grid;
-  gap: 4px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  border-top: 2px solid var(--mock-accent);
+  border-block: 1px solid var(--mock-line);
-  padding-top: 8px;
 }
 
-.mock-graph-link.is-good {
+.mock-lineage-scope div {
-  border-color: var(--mock-good);
+  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 {
+.mock-lineage-scope div:last-child {
-  border-color: var(--mock-info);
+  border-right: 0;
 }
 
-.mock-graph-link.is-watch {
+.mock-lineage-scope span,
-  border-color: var(--mock-alt);
+.mock-lineage-scope em,
-}
+.mock-lineage-row time,
-
+.mock-lineage-row span,
-.mock-graph-link strong {
+.mock-lineage-queue-row time,
+.mock-lineage-queue-row span {
+  color: var(--mock-faint);
   font-family: var(--font-mono), monospace;
-  font-size: 0.74rem;
+  font-size: 0.68rem;
-  text-transform: uppercase;
+  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 {
+.mock-lineage-queue-row {
-  position: absolute;
+  min-width: 720px;
+  min-height: 42px;
   display: grid;
-  place-items: center;
+  grid-template-columns: 76px 66px 112px 58px minmax(170px, 1fr) 88px;
-  min-height: 46px;
+  gap: 10px;
-  border: 1px solid var(--mock-line-strong);
+  align-items: center;
-  border-radius: 6px;
+  border-bottom: 1px solid var(--mock-line);
-  padding: 9px 12px;
+  padding: 0 10px;
-  background: var(--mock-surface-2);
+  color: var(--mock-muted);
-  color: var(--mock-ink);
+  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 {
+.mock-lineage-row.is-active,
-  left: 7%;
+.mock-lineage-queue-row.is-active {
-  top: 14%;
+  background: var(--mock-accent-soft);
-}
-
-.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 {
   color: var(--mock-ink);
 }
 
-.mock-graph-strip {
+.mock-lineage-queue-row.is-reject {
-  grid-area: strip;
+  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 {
+  .mock-lineage-scope strong {
-    min-height: 520px;
+    font-size: 1rem;
-  }
-
-  .mock-graph-link {
-    width: 42%;
-  }
-
-  .mock-graph-node {
-    max-width: 150px;
-    text-align: center;
   }
 }