Rebuilt Dashboard, Options, and News Around Mock9-Mock12

Summary

Dashboard is now Market Command, Options is now OPRA Intake, and News is now Newswire. The shared production terminal visual language moved away from rounded pane/card composition toward flat border-block sections, compact headers, dense table rows, and route-specific accent surfaces.

Changes Made

• Updated DESIGN.md to name mock9 through mock12 as the production aesthetic center and mock5 as the Options workflow reference.
• Changed primary navigation from Home to Dashboard while keeping the same route paths.
• Added route variants to the shared page frame so Dashboard, Options, and News can carry distinct styling without duplicating layout mechanics.
• Rebuilt Dashboard with command metrics, a production-derived priority board, decision levels, chart context, feed health, recent contracts, replay state, and evidence context.
• Rebuilt Options around OPRA Intake controls while preserving the real OptionsPane, FlowPane, contract focus, filters, and virtualized rows.
• Rebuilt News as Newswire with source, symbol, and status rails plus a virtualized news table and the existing story drawer.
• Added getTapeVirtualConfig("news"), newsScroll, scroll anchoring, and live-history gate behavior for the news wire.
• Decoded common HTML entities in news provider text so headlines and summaries render readable apostrophes and ampersands.

Context

The prior production UI already had the right data model and live session behavior, but the surface still leaned on rounded panes, stacked list cards, and generic dashboard framing. This task moves production toward the denser mock9-mock12 visual system while keeping mock routes as references only.

Important Implementation Details

• No backend APIs, package types, or route contracts changed.
• News now uses the same pausable live view and scroll-anchor strategy as the tape-style panes.
• The priority board is built from real smart-money events, alerts, flow packets, and news stories.
• Drawers and popovers remain visually separated because they float over active workflow content.
• Helium was used for visual verification after the in-app Browser backend was unavailable and the user requested Helium instead.

Relevant Diff Snippets

Focused excerpts rendered with @pierre/diffs/ssr using preloadPatchFile({ patch, options: {} }). The full implementation diff is intentionally not embedded to keep this document reviewable.

Expected Impact for End-Users

Users should land in a more operational terminal: Dashboard shows the active market command picture, Options focuses on OPRA intake and packet fit, and News behaves like a dense wire console. The new layout reduces visual ornament and keeps live decision data closer together.

Validation

• bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts: passed, 80 tests.
• bun --cwd=apps/web run build: passed.
• Started the web app on http://localhost:3001 because port 3000 was occupied.
• HTTP smoke checks: /, /options, and /news returned 200; /tape returned 307 to /options.
• Helium inspection covered /, /options, and /news at fitted desktop/tablet width, plus a narrow /news pass after the Newswire rename.
• Static route content checks confirmed the new labels: Market Command, OPRA Intake, Newswire, Priority Board, OPRA Tape, Packet Fit, Sources, Symbols, and News Wire.
• git diff --check: passed before turn-document generation.

Issues, Limitations, and Mitigations

• The local news history endpoint was unavailable during Helium inspection, so Newswire showed the intended older-history warning state instead of silently failing.
• Local live data availability depends on the backend and feeds; empty states remain important for no-data sessions.

Follow-up Work

• Consider adding route-level visual regression screenshots for Dashboard, Options, and News.
• Watch the new News scroll gate under high-volume wire bursts with live backend data.