Repository Implementation Turn

# Added four no-card market-activity mock routes.

This turn kept the existing mock redesigns and added four new routes that model the Islandflow logic chain from options flow, to flow packets, to smart money party alerts, to route-wide market-activity context.

2026-06-11 18:22 ET Beads: islandflow-q7v Scope: apps/web

## Summary

Created `/mock5`, `/mock6`, `/mock7`, and `/mock8` as additional mock redesign routes. A follow-up copy pass tightened the language toward a professional trader terminal: terse route labels, compact alert/read terminology, and fewer explanatory captions.

## Changes Made

- Extended `DashboardMock` to support four new variants while preserving `/mock1` through `/mock4`.
- Added route files for `/mock5`, `/mock6`, `/mock7`, and `/mock8`.
- Added route-specific mock data for options intake rows, flow packet assembly, smart money alert reasons, and activity graph lanes.
- Added CSS for no-card layouts built from rows, rails, split panes, ledgers, and graph nodes.
- Tightened the visible mock-route copy from explanatory walkthrough language to Bloomberg-terminal-style desk labels and signal readouts.

/mock5 OPRA Contract tape, premium concentration, ask lift, and packet fit.
/mock6 packets Source stack, read state, score, and alert eligibility.
/mock7 alerts SMP trigger, read type, severity, and invalidation.
/mock8 matrix OPRA, packet, alert, and market state in one route map.

## Context

The existing mock lab already explored four broad design directions. This turn adds a second set focused on workflow semantics: options flow enters the system, becomes packet evidence, may generate an alert, and remains traceable through market context.

The user gave one non-negotiable rule: absolutely no cards. The new routes therefore avoid new `card`/`panel` class names and avoid content structures that read as repeated card grids.

## Important Implementation Details

- `MockVariant` and `variantOrder` now include `mock5` through `mock8`, so the mock navigation keeps all current variants and exposes the new ones.
- The Options route uses a horizontally scrollable blotter only inside the table lane, preventing page-level overflow on mobile.
- The Packets route makes packet assembly explicit before alert eligibility, matching the repo logic instead of inventing unrelated analytics.
- The Alerts route gives every smart money party alert a reason, type, why-it-fired explanation, and invalidation condition.
- The Activity Graph route explains how the themed routes relate to each other without introducing redundant feature surfaces.

## Relevant Diff Snippets

The rendered excerpt below is generated with `@pierre/diffs/ssr` from the follow-up copy-polish patch.

apps/web/app/dashboard-mocks.tsx
-148+131

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

## Expected Impact for End-Users

Traders reviewing the mock routes now see a more professional terminal tone: shorter route names, cleaner trigger language, and fewer captions explaining concepts the target user already understands.

## Validation

Passed: `bun --cwd=apps/web run build`
Passed: Browser DOM checks for `/mock5`, `/mock6`, `/mock7`, and `/mock8` at 1280px confirmed the routes render, expose expected content, and do not introduce page-level horizontal overflow.
Passed: Browser DOM checks at 390px confirmed page-level overflow stays contained and dense tables scroll inside their own lanes.
Passed: Browser console error check returned no errors.
Partial: A browser screenshot capture timed out in the local browser runtime during the original route work, so visual confirmation used DOM layout checks rather than saved screenshots.
Passed: Follow-up copy pass verified `/mock5`, `/mock6`, `/mock7`, and `/mock8` return HTTP 200 locally and no longer contain the removed explanatory phrases.

## Issues, Limitations, and Mitigations

- The new mock routes are static concept screens, not connected to live API data. They are intended to guide product direction and critique.
- Dense rows are intentionally scrollable on mobile. This preserves the terminal/blotter behavior without allowing the whole page to overflow.
- The existing mock navigation still uses compact tab-like links from the previous mock lab. The no-card rule was applied to the new route content and new layout primitives.

## Follow-up Work

- Turn the strongest concept into real `/options`, `/alerts`, and packet detail routes when the product direction is chosen.
- Add browser-level visual regression checks for the mock lab once the route direction stabilizes.
- Consider a follow-up Beads issue for wiring alert reasons to real packet provenance once backend data contracts are ready.