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 OPRAContract tape, premium concentration, ask lift, and packet fit.

/mock6 packetsSource stack, read state, score, and alert eligibility.

/mock7 alertsSMP trigger, read type, severity, and invalidation.

/mock8 matrixOPRA, 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 lines
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
221 unmodified lines
305
306
307
308
309
310
311
8 unmodified lines
320
321
322
323
324
325
326
327
328
42 unmodified lines
371
372
373
374
375
376
377
25 unmodified lines
403
404
405
406
407
408
409
410
411
412
413
414
6 unmodified lines
421
422
423
424
425
426
427
428
429
430
431
4 unmodified lines
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
3 unmodified lines
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
9 unmodified lines
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
3 unmodified lines
519
520
521
522
523
524
525
526
527
528
529
530
5 unmodified lines
536
537
538
539
540
541
542
4 unmodified lines
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
3 unmodified lines
565
566
567
568
569
570
571
572
13 unmodified lines
586
587
588
589
590
591
592
4 unmodified lines
597
598
599
600
601
602
603
2 unmodified lines
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
21 unmodified lines
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
4 unmodified lines
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
12 unmodified lines
708
709
710
711
712
713
714
715
716
717
718
719
720
3 unmodified lines
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
11 unmodified lines
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
3 unmodified lines
774
775
776
777
778
779
780
781
4 unmodified lines
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
1 unmodified line
804
805
806
807
808
809
810
811
812
813
814
815
39 unmodified lines
855
856
857
858
859
860
861
51 unmodified lines
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
16 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) => (
            <article
13 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 lines
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
221 unmodified lines
297
298
299
300
301
302
303
8 unmodified lines
312
313
314
315
316
317
318
319
320
42 unmodified lines
363
364
365
366
367
368
369
25 unmodified lines
395
396
397
398
399
400
401
402
403
404
405
406
6 unmodified lines
413
414
415
416
417
418
419
420
421
422
423
4 unmodified lines
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
3 unmodified lines
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
9 unmodified lines
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
3 unmodified lines
508
509
510
511
512
513
514
515
516
517
518
519
5 unmodified lines
525
526
527
528
529
530
531
4 unmodified lines
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
3 unmodified lines
554
555
556
557
558
559
560
561
13 unmodified lines
575
576
577
578
579
580
581
4 unmodified lines
586
587
588
589
590
591
592
2 unmodified lines
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
21 unmodified lines
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
4 unmodified lines
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
12 unmodified lines
695
696
697
698
699
700
701
702
703
704
705
706
707
3 unmodified lines
711
712
713
714
715
716
717
718
719
720
721
722
723
724
11 unmodified lines
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
3 unmodified lines
759
760
761
762
763
764
765
766
4 unmodified lines
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
1 unmodified line
789
790
791
792
793
794
795
796
797
798
799
800
39 unmodified lines
840
841
842
843
844
845
846
51 unmodified lines
898
899
900
901
902
903
904
905
906
907
908
909
910
16 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) => (
            <article
13 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.