Repository turn document

Ground-up redesign mocks for Islandflow

Reworked the existing mock routes into four distinct product-interface hypotheses that reuse Islandflow fundamentals in new operating models: an evidence canvas, anomaly queue, replay room, and market atlas.

2026-06-11 04:16apps/webissue islandflow-3vr

Summary

The mock pages at /mock1 through /mock4 now explore genuinely different frontend directions instead of modest rearrangements of the same dashboard. The work also fixes a mobile shell overflow that made the mock routes horizontally drift on narrow screens.

Changes Made

Replaced the previous four mock concepts with Evidence Canvas, Anomaly Queue, Replay Room, and Market Atlas.
Refactored shared mock primitives for evidence cards, flow tape rows, chart fields, confidence checks, replay tracks, and score dials.
Rebuilt the mock CSS around distinct grid systems for each concept while preserving the dark operational Islandflow palette.
Updated mobile top-bar wrapping so the existing app shell no longer causes page-level horizontal overflow at 390px width.

Context

The user wanted new frontend ideas that were not just incremental edits to stale dashboard patterns. The product brief calls for a composed, forensic market terminal where evidence and trust matter more than ornament. These mocks intentionally keep the core materials, options flow, dark prints, replay, feed health, signal confidence, and symbol context, but reorganize them around different workflows.

Important Implementation Details

Evidence CanvasStarts from one anomaly as a case file, with evidence attached around the decision.

Anomaly QueueTreats signals as ranked work items, useful when live flow volume is high.

Replay RoomMakes the time cursor and event spine the primary navigation model.

Market AtlasMaps clusters of symbols and sector pressure for cross-market scanning.

The mock routes remain static React surfaces under apps/web/app/dashboard-mocks.tsx, so they are safe to evaluate without touching live data wiring.

Relevant Diff Snippets

This is an intentional excerpt of the concept model and mobile shell fix, rendered with Diffs SSR.

Expected Impact for End-Users

Users evaluating the frontend can now compare four different ways of thinking about Islandflow: case investigation, live alert operations, replay analysis, and market-wide pressure mapping. This should make design critique more specific than asking whether the current dashboard feels good.

Validation

Ran bun --cwd=apps/web run build, which completed successfully.
Ran bun test apps/web/app/routes.test.ts apps/web/app/terminal.test.ts, 78 tests passed.
Opened /mock1 through /mock4 in the in-app browser and captured desktop screenshots.
Checked all four mock routes at a 390px viewport and confirmed no page-level horizontal overflow after the top-bar wrapping fix.
Ran git diff --check -- apps/web/app/dashboard-mocks.tsx apps/web/app/globals.css.

Issues, Limitations, and Mitigations

The mock data is still static. That is intentional for concept comparison, but the chosen direction will need real data integration later.
The chart visuals are CSS-generated placeholders rather than lightweight-charts instances. They communicate layout and emphasis, not production chart behavior.
Internal flow tables keep horizontal scrolling on narrow screens because preserving table structure is more useful than crushing columns.

Follow-up Work

Create Beads issues for the selected direction after review.
Prototype live data wiring for the preferred concept, especially evidence-linking and replay synchronization.
Run a focused accessibility pass once a direction graduates from mock to product surface.