Polish Terminal View

Summary

This was a focused product polish pass on apps/web/app/globals.css. The work stayed inside the established Islandflow terminal design language: dark operational surfaces, scarce amber emphasis, compact controls, and clear evidence-console states.

Changes Made

• Added a shared terminal easing token for consistent, restrained interaction transitions.
• Styled scrollbars to match the terminal surface instead of falling back to browser defaults.
• Improved nav, button, and active-control hover and pressed states using the existing OKLCH palette.
• Refined shell metrics, pane headers, table shells, row focus states, and empty states for clearer hierarchy.
• Adjusted mobile metric cards and Tape action controls so they align cleanly without horizontal page overflow.

Context

Islandflow is a serious market-data terminal for traders and researchers. The polish target was product UI, not brand theater, so the changes prioritize trust, legibility, predictable controls, and stable responsive structure.

Important Implementation Details

• All new color work uses existing OKLCH roles and keeps amber as a scarce signal rather than a decorative wash.
• Keyboard focus on table rows and instrument buttons is now visible without introducing layout shift.
• Mobile shell metrics now use a two-column grid, and page actions stretch to the viewport width.
• The polish is CSS-only, so no data contracts, route behavior, or live-stream logic changed.

Expected Impact for End-Users

Users should experience a terminal that reads as more finished under pressure: clearer controls, cleaner empty states, better keyboard affordances, and less visual friction on narrow screens.

Validation

• bun install completed to restore missing workspace dependencies.
• bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts passed with 69 tests.
• bun --cwd=apps/web run build passed.
• Playwright visual QA checked http://localhost:3000/tape at 1440x1000 and 390x900.
• Visual QA confirmed no document-level horizontal overflow after the responsive polish.

Issues, Limitations, and Mitigations

• The local backend WebSocket at localhost:4000 was offline during visual QA, so the screen showed disconnected empty states. This was useful for validating the empty-state polish but did not exercise live data density.
• Playwright needed a locally cached Chromium executable. The visual check used an existing browser cache path after the default runtime binary was unavailable.

Follow-up Work

No new Beads follow-up issue was filed. Live-data density should be rechecked naturally when the full local stack is running, but this polish did not reveal a separate actionable defect.