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. The new concepts intentionally avoid new card or panel primitives and use dense tables, line-separated ledgers, split panes, chains, and graph-like routing views instead.

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.

/mock5 optionsRaw options prints become packet candidates through a dense OPRA-style blotter.

/mock6 packetsFlow packets assemble options, equity, venue, sector, and readiness evidence.

/mock7 alertsSmart money party alerts expose reason, type, invalidation, and lineage.

/mock8 graphRoute-wide map connects options, packets, alerts, and market context without duplicating views.

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 a focused app mock-route patch excerpt.

apps/web/app/dashboard-mocks.tsx

-2+47

3 unmodified lines
4
45 unmodified lines
3 unmodified lines
53
290 unmodified lines
3 unmodified lines
type MockVariant = "mock1" | "mock2" | "mock3" | "mock4";
45 unmodified lines
3 unmodified lines
const variantOrder: MockVariant[] = ["mock1", "mock2", "mock3", "mock4"];
290 unmodified lines
3 unmodified lines
4
45 unmodified lines
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
3 unmodified lines
85
86
87
88
89
90
91
92
93
94
290 unmodified lines
385
386
387
388
3 unmodified lines
type MockVariant = "mock1" | "mock2" | "mock3" | "mock4" | "mock5" | "mock6" | "mock7" | "mock8";
45 unmodified lines
  },
  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"
3 unmodified lines
const variantOrder: MockVariant[] = [
  "mock1",
  "mock2",
  "mock3",
  "mock4",
  "mock5",
  "mock6",
  "mock7",
  "mock8"
];
290 unmodified lines
      {variant === "mock5" ? <OptionsIntake /> : null}
      {variant === "mock6" ? <PacketForensics /> : null}
      {variant === "mock7" ? <AlertReasonWall /> : null}
      {variant === "mock8" ? <MarketActivityGraph /> : null}

apps/web/app/globals.css

+71

3973 unmodified lines
788 unmodified lines
3973 unmodified lines
788 unmodified lines
3973 unmodified lines
3974
3975
3976
3977
3978
3979
3980
3981
3982
3983
3984
3985
3986
3987
3988
3989
3990
3991
3992
3993
3994
3995
3996
3997
3998
3999
4000
4001
4002
4003
4004
4005
4006
4007
4008
4009
4010
4011
4012
4013
4014
4015
4016
4017
4018
4019
4020
4021
4022
4023
4024
788 unmodified lines
4814
4815
4816
4817
4818
4819
4820
4821
4822
4823
4824
4825
4826
4827
4828
4829
4830
4831
4832
4833
3973 unmodified lines
.mock-redesign.mock-options {
  --mock-bg: oklch(0.075 0.02 250);
  --mock-surface: oklch(0.105 0.024 250);
  --mock-surface-2: oklch(0.13 0.03 250);
  --mock-line: oklch(0.76 0.048 236 / 0.26);
  --mock-line-strong: oklch(0.82 0.16 82 / 0.58);
  --mock-accent: oklch(0.86 0.17 84);
  --mock-accent-soft: oklch(0.86 0.17 84 / 0.12);
  --mock-alt: oklch(0.74 0.2 32);
  --mock-alt-soft: oklch(0.74 0.2 32 / 0.13);
  background:
    linear-gradient(90deg, oklch(0.7 0.05 240 / 0.11) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(180deg, oklch(0.11 0.026 250), var(--mock-bg) 42vh),
    var(--mock-bg);
}

.mock-redesign.mock-packets {
  --mock-bg: oklch(0.13 0.014 198);
  --mock-surface: oklch(0.17 0.022 198);
  --mock-surface-2: oklch(0.11 0.018 198);
  --mock-line: oklch(0.76 0.04 198 / 0.22);
  --mock-line-strong: oklch(0.78 0.15 176 / 0.54);
  --mock-accent: oklch(0.78 0.15 176);
  --mock-accent-soft: oklch(0.78 0.15 176 / 0.13);
  --mock-alt: oklch(0.77 0.14 300);
  --mock-alt-soft: oklch(0.77 0.14 300 / 0.13);
}

.mock-redesign.mock-alerts {
  --mock-bg: oklch(0.11 0.026 22);
  --mock-surface: oklch(0.16 0.032 22);
  --mock-surface-2: oklch(0.13 0.028 22);
  --mock-line: oklch(0.8 0.04 42 / 0.23);
  --mock-line-strong: oklch(0.8 0.17 58 / 0.54);
  --mock-accent: oklch(0.8 0.17 58);
  --mock-accent-soft: oklch(0.8 0.17 58 / 0.13);
  --mock-alt: oklch(0.74 0.16 24);
  --mock-alt-soft: oklch(0.74 0.16 24 / 0.14);
}

.mock-redesign.mock-graph {
  --mock-bg: oklch(0.1 0.026 274);
  --mock-surface: oklch(0.155 0.034 274);
  --mock-surface-2: oklch(0.125 0.03 274);
  --mock-line: oklch(0.78 0.05 274 / 0.22);
  --mock-line-strong: oklch(0.76 0.17 220 / 0.52);
  --mock-accent: oklch(0.76 0.17 220);
  --mock-accent-soft: oklch(0.76 0.17 220 / 0.13);
  --mock-alt: oklch(0.78 0.16 340);
  --mock-alt-soft: oklch(0.78 0.16 340 / 0.13);
}
788 unmodified lines
.mock-options-layout,
.mock-packet-layout,
.mock-alert-layout,
.mock-graph-layout {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.mock-options-layout {
  grid-template-columns: minmax(720px, 1fr) 270px;
  grid-template-areas:
    "command depth"
    "tape depth"
    "ladder ladder";
}

.mock-options-command {
  grid-area: command;

Expected Impact for End-Users

Traders reviewing the mock lab now have more varied route-level concepts that better explain how Islandflow turns raw options activity into trustworthy, evidence-linked alerts. The new mocks should make the product model easier to critique because each route owns a specific stage of the investigation.

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, so visual confirmation used DOM layout checks rather than saved screenshots.

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.