Merge pull request #38 from dirtydishes/impeccable

Harden and adapt the terminal UI for production use

.beads/issues.jsonl

@@ -8,6 +8,15 @@
 {"_type":"issue","id":"islandflow-ayo","title":"Drop stale backlog events from live fanout","description":"Follow-up to live freshness rollout: /ws/live was still fanning out stale backlog events for freshness-gated channels, which kept tape panes in Live feed behind despite active synthetic ingest. Gate fanout and cache ingest by freshness for options/nbbo/equities/flow.","status":"closed","priority":1,"issue_type":"bug","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:26:39Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:26:44Z","started_at":"2026-04-28T21:26:44Z","closed_at":"2026-04-28T21:26:44Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-0v6","title":"Fix tape freshness, NBBO coverage, pause controls, and filter popup","description":"Implement the tape fixes requested for synthetic options notional sizing, strict live freshness, live-mode pause/resume behavior, stronger NBBO snapshot coverage, and moving flow filters behind a popup. Includes server-side live cache changes, web terminal state/UI changes, and tests for synthetic pricing, live snapshot freshness/NBBO retention, and live pause/filter interactions.","status":"closed","priority":1,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T21:02:52Z","created_by":"dirtydishes","updated_at":"2026-04-28T21:13:38Z","started_at":"2026-04-28T21:02:57Z","closed_at":"2026-04-28T21:13:38Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-e4r","title":"Implement smart-money flow filtering and synthetic firehose modes","description":"Implement the approved multi-surface plan for named synthetic market profiles, options raw-vs-signal filtering, live/API filter contracts, Tape page client-side flow filters, firehose-readiness improvements, tests, and README updates.","status":"closed","priority":1,"issue_type":"feature","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:10:49Z","created_by":"dirtydishes","updated_at":"2026-04-28T20:29:29Z","started_at":"2026-04-28T20:10:53Z","closed_at":"2026-04-28T20:29:29Z","close_reason":"Implemented synthetic market profiles, options signal-path filtering, signal-aware API/replay contracts, Tape page filters, tests, and README updates. Follow-up tracked in islandflow-biq.","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-wab","title":"Quiet the terminal view chrome","description":"The Islandflow terminal view currently carries too much chrome intensity: strong shell gradients, visible grid texture, active amber wash, glassy overlays, and heavily styled drawer/filter surfaces compete with live data. Refine the product UI so the terminal feels calmer and more forensic while preserving status clarity, scan speed, and identity. Focus on reducing decorative contrast, flattening surfaces, and making accents scarcer without weakening affordances.","notes":"Refined terminal chrome in apps/web/app/globals.css: moved shell tokens to quieter OKLCH values, removed grid texture, flattened panes/overlays, reduced active amber wash, softened classified row treatment, and added reduced-motion handling for the connecting pulse. Validation: bun test apps/web/app/terminal.test.ts; bun --cwd=apps/web run build.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-15T12:05:25Z","created_by":"dirtydishes","updated_at":"2026-05-15T12:13:10Z","started_at":"2026-05-15T12:05:30Z","closed_at":"2026-05-15T12:13:10Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-hio","title":"Add Pi /plan command for plan mode","description":"Create a Pi extension so typing /plan activates plan mode instructions and guards against implementation file edits until disabled.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-15T04:56:00Z","created_by":"dirtydishes","updated_at":"2026-05-15T04:57:03Z","started_at":"2026-05-15T04:56:03Z","closed_at":"2026-05-15T04:57:03Z","close_reason":"Implemented project-local Pi /plan extension with plan-mode guardrails.","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-t8s","title":"Reconcile merge conflicts on impeccable","description":"Resolve the PR branch conflicts against main while preserving terminal hardening, responsive adaptation, and related test coverage.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T22:32:40Z","created_by":"dirtydishes","updated_at":"2026-05-14T22:34:03Z","started_at":"2026-05-14T22:33:05Z","closed_at":"2026-05-14T22:34:03Z","close_reason":"Rebased impeccable onto main, resolved the terminal test conflict, and revalidated the web app.","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-7ch","title":"Reconcile merge conflicts on impeccable","description":"Resolve the current merge or rebase conflicts on the impeccable branch and preserve the intended terminal UI and documentation changes.","status":"in_progress","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T22:30:10Z","created_by":"dirtydishes","updated_at":"2026-05-14T22:30:29Z","started_at":"2026-05-14T22:30:29Z","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-1f5","title":"Adapt terminal view for responsive use","description":"Improve the terminal view so it remains usable across desktop, tablet, and small-screen contexts without hiding core workflow functionality.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T22:22:18Z","created_by":"dirtydishes","updated_at":"2026-05-14T22:25:22Z","started_at":"2026-05-14T22:22:25Z","closed_at":"2026-05-14T22:25:22Z","close_reason":"Terminal view adapted for responsive and touch-first contexts; tests and web build passed.","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-uhi","title":"Publish terminal turn document to GitHub Pages","description":"Why: the completed turn document should be reachable on the user's GitHub Pages site. What: determine the GitHub Pages publishing path for dirtydishes.github.io, place the terminal hardening turn document at a stable HTML URL, validate the file location, and update beads status for the publishing work.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T22:15:23Z","created_by":"dirtydishes","updated_at":"2026-05-14T22:17:39Z","started_at":"2026-05-14T22:15:34Z","closed_at":"2026-05-14T22:17:39Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-6ri","title":"Harden terminal shell view","description":"Why: the terminal shell needs production hardening for focus visibility, long labels, and ticker entry edge cases so the main workflow remains stable under constrained widths and imperfect input. What: tighten shell semantics and input handling, prevent overflow in the top bar and rail, and add regression tests for the ticker filter normalization path.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T08:56:45Z","created_by":"dirtydishes","updated_at":"2026-05-14T08:58:46Z","started_at":"2026-05-14T08:56:53Z","closed_at":"2026-05-14T08:58:46Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-dod","title":"Publish terminal audit to GitHub Pages","description":"Why this issue exists and what needs to be done: publish the generated terminal audit HTML to dirtydishes.github.io at /terminal-audit.html so it can be shared publicly.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T08:39:45Z","created_by":"dirtydishes","updated_at":"2026-05-14T08:42:59Z","started_at":"2026-05-14T08:40:02Z","closed_at":"2026-05-14T08:42:59Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
+{"_type":"issue","id":"islandflow-dxu","title":"Document terminal audit findings as HTML","description":"Why this issue exists and what needs to be done: capture the completed terminal view audit findings in a user-readable HTML document under docs/ with the full score summary and all detailed findings preserved.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T08:32:22Z","created_by":"dirtydishes","updated_at":"2026-05-14T08:34:57Z","started_at":"2026-05-14T08:32:30Z","closed_at":"2026-05-14T08:34:57Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-a50","title":"Add HTML plan docs for synthetic tape redesign","description":"Create two HTML planning docs under plans/: one straightforward end-user readable version and one more polished impeccable-style version, both covering the hosted synthetic tape redesign with summary, scope, affected services, UI notes, rollout, tests, and the full detailed implementation plan.\n","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-14T02:47:44Z","created_by":"dirtydishes","updated_at":"2026-05-14T02:53:11Z","started_at":"2026-05-14T02:47:48Z","closed_at":"2026-05-14T02:53:11Z","close_reason":"Completed","dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-932","title":"Desktop follow-up native features","description":"Track deferred native desktop features after the thin hosted-wrapper v1 lands: notifications, keyboard shortcuts, local preferences storage, remembered window state, signed/notarized macOS distribution, auto-update evaluation, and optional local frontend bundling.\n","status":"open","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-13T13:20:12Z","created_by":"dirtydishes","updated_at":"2026-05-13T13:20:12Z","dependencies":[{"issue_id":"islandflow-932","depends_on_id":"islandflow-9ug","type":"discovered-from","created_at":"2026-05-13T09:20:12Z","created_by":"dirtydishes","metadata":"{}"}],"dependency_count":0,"dependent_count":0,"comment_count":0}
 {"_type":"issue","id":"islandflow-vbk","title":"Remove deprecated Alpaca key-pair auth","description":"Remove legacy Alpaca key-pair authentication support and keep ALPACA_API_KEY as the only supported auth method across options/equities ingest and docs.\n","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-05T07:19:51Z","created_by":"dirtydishes","updated_at":"2026-05-05T07:21:10Z","started_at":"2026-05-05T07:19:54Z","closed_at":"2026-05-05T07:21:10Z","close_reason":"Removed key-pair auth and kept ALPACA_API_KEY only","dependency_count":0,"dependent_count":0,"comment_count":0}

.impeccable/design.json

@@ -0,0 +1,210 @@
+{
+  "schemaVersion": 2,
+  "generatedAt": "2026-05-14T08:06:45Z",
+  "title": "Design System: Islandflow Terminal",
+  "extensions": {
+    "colorMeta": {
+      "bg-core": {
+        "role": "neutral",
+        "displayName": "Command Black",
+        "canonical": "#06080b",
+        "tonalRamp": ["#050608", "#0b0f14", "#111821", "#1a2430", "#263445", "#394a5f", "#6f8095", "#dce3ea"]
+      },
+      "bg-pane": {
+        "role": "neutral",
+        "displayName": "Panel Graphite",
+        "canonical": "#111820",
+        "tonalRamp": ["#0b0f14", "#121922", "#1a2430", "#253444", "#314658", "#4a6076", "#7b90a5", "#dbe3ec"]
+      },
+      "text-primary": {
+        "role": "neutral",
+        "displayName": "Data Ink",
+        "canonical": "#e6edf4",
+        "tonalRamp": ["#1c232b", "#2a333e", "#3a4654", "#4f6072", "#6a7f93", "#92a4b5", "#bcc8d3", "#e6edf4"]
+      },
+      "signal-amber": {
+        "role": "primary",
+        "displayName": "Signal Amber",
+        "canonical": "#f5a623",
+        "tonalRamp": ["#2f1f06", "#5b3c0b", "#865913", "#b5761a", "#d89220", "#f5a623", "#f8c069", "#fce3bc"]
+      },
+      "confirm-green": {
+        "role": "tertiary",
+        "displayName": "Confirm Green",
+        "canonical": "#25c17a",
+        "tonalRamp": ["#062716", "#0d4b2a", "#13703f", "#1a9554", "#20ae6a", "#25c17a", "#6ed5a6", "#c9f1df"]
+      },
+      "risk-red": {
+        "role": "tertiary",
+        "displayName": "Risk Red",
+        "canonical": "#ff6b5f",
+        "tonalRamp": ["#320d0a", "#611914", "#91261f", "#bf362f", "#e04f48", "#ff6b5f", "#ff9b93", "#ffd9d5"]
+      },
+      "info-blue": {
+        "role": "secondary",
+        "displayName": "Info Blue",
+        "canonical": "#4da3ff",
+        "tonalRamp": ["#0a1f33", "#143c61", "#1f5a8f", "#2b78bd", "#3a91e0", "#4da3ff", "#8cc4ff", "#d8ebff"]
+      }
+    },
+    "typographyMeta": {
+      "display": {
+        "displayName": "Display",
+        "purpose": "Primary wayfinding headers and route-level titles."
+      },
+      "body": {
+        "displayName": "Body",
+        "purpose": "Default transactional and descriptive copy in panes and controls."
+      },
+      "label": {
+        "displayName": "Label/Mono",
+        "purpose": "Data labels, numeric cells, chips, and compact control text."
+      }
+    },
+    "shadows": [
+      {
+        "name": "overlay-lift",
+        "value": "0 24px 60px rgba(0, 0, 0, 0.42)",
+        "purpose": "Filter popover separation from live content."
+      },
+      {
+        "name": "drawer-lift",
+        "value": "0 24px 70px rgba(0, 0, 0, 0.5)",
+        "purpose": "Right-side detail drawer emphasis."
+      },
+      {
+        "name": "tooltip-lift",
+        "value": "0 16px 40px rgba(0, 0, 0, 0.45)",
+        "purpose": "Transient metadata tooltip depth."
+      }
+    ],
+    "motion": [
+      {
+        "name": "fast-state",
+        "value": "150ms ease",
+        "purpose": "Button and hover state transitions."
+      },
+      {
+        "name": "focus-rail",
+        "value": "160ms ease",
+        "purpose": "Input underline and glow transitions."
+      },
+      {
+        "name": "count-reveal",
+        "value": "180ms ease",
+        "purpose": "Missed counter width/position reveal."
+      }
+    ],
+    "breakpoints": [
+      {
+        "name": "lg",
+        "value": "1180px"
+      },
+      {
+        "name": "md",
+        "value": "980px"
+      },
+      {
+        "name": "sm",
+        "value": "720px"
+      }
+    ]
+  },
+  "components": [
+    {
+      "name": "Terminal Action Button",
+      "kind": "button",
+      "refersTo": "button-base",
+      "description": "Default compact control for tape actions and utility toggles.",
+      "html": "<button class=\"ds-btn\">Pause Tape</button>",
+      "css": ".ds-btn { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,0.03); color: #e6edf4; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .ds-btn:hover { border-color: rgba(255,177,48,0.35); background: rgba(245,166,35,0.08); color: #ffd89a; } .ds-btn:focus-visible { outline: none; border-color: rgba(255,177,48,0.45); box-shadow: 0 0 0 2px rgba(245,166,35,0.2); } .ds-btn:active { background: rgba(245,166,35,0.12); }"
+    },
+    {
+      "name": "Rail Navigation Link",
+      "kind": "nav",
+      "refersTo": "nav-link",
+      "description": "Primary route selector in the left terminal rail.",
+      "html": "<a class=\"ds-nav-link\" href=\"#\">Signals</a>",
+      "css": ".ds-nav-link { display: inline-block; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; color: #90a0b2; background: transparent; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .ds-nav-link:hover { border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #e6edf4; } .ds-nav-link:focus-visible { outline: none; border-color: rgba(255,177,48,0.35); } .ds-nav-link.ds-nav-link-active { border-color: rgba(255,177,48,0.35); background: linear-gradient(90deg, rgba(245,166,35,0.12), rgba(245,166,35,0.04)); color: #e6edf4; }"
+    },
+    {
+      "name": "Filter Underline Input",
+      "kind": "input",
+      "refersTo": "pane-surface",
+      "description": "Global tape filter field with amber under-rail focus behavior.",
+      "html": "<label class=\"ds-filter\"><span class=\"ds-filter-label\">Contract Filter</span><span class=\"ds-filter-line\"><input class=\"ds-filter-input\" placeholder=\"Type symbol, contract, or expiry\" /></span></label>",
+      "css": ".ds-filter { display: inline-flex; flex-direction: column; gap: 4px; min-width: 260px; } .ds-filter-label { color: #6e7b8c; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; } .ds-filter-line { position: relative; display: block; padding-bottom: 6px; } .ds-filter-line::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(245,166,35,0.88), rgba(245,166,35,0.14)); } .ds-filter-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(255,216,154,0.98), rgba(245,166,35,0.92)); transform: scaleX(0.2); transform-origin: left center; opacity: 0; transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease; } .ds-filter-input { width: 100%; border: 0; background: transparent; color: #e6edf4; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; } .ds-filter-input::placeholder { color: rgba(193,203,224,0.58); font-size: 0.86rem; } .ds-filter-input:focus-visible { outline: none; } .ds-filter:focus-within .ds-filter-label { color: #ffd89a; } .ds-filter:focus-within .ds-filter-line::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 18px rgba(245,166,35,0.34); }"
+    },
+    {
+      "name": "Semantic Status Chip",
+      "kind": "chip",
+      "refersTo": "status-chip",
+      "description": "Pill used for direction, severity, and condition tags with explicit label text.",
+      "html": "<span class=\"ds-chip ds-chip-risk\">Bearish</span>",
+      "css": ".ds-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .ds-chip-neutral { background: rgba(77,163,255,0.14); border-color: rgba(77,163,255,0.26); color: #bddcff; } .ds-chip-good { background: rgba(37,193,122,0.12); border-color: rgba(37,193,122,0.34); color: #98f0c0; } .ds-chip-risk { background: rgba(255,107,95,0.14); border-color: rgba(255,107,95,0.34); color: #ffc3bd; }"
+    },
+    {
+      "name": "Terminal Pane",
+      "kind": "card",
+      "refersTo": "pane-surface",
+      "description": "Default data region container for tape, alerts, and chart modules.",
+      "html": "<section class=\"ds-pane\"><header class=\"ds-pane-head\"><h3 class=\"ds-pane-title\">Flow Packets</h3><button class=\"ds-btn-mini\">Refresh</button></header><div class=\"ds-pane-body\">Pane content</div></section>",
+      "css": ".ds-pane { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), #111820; color: #e6edf4; overflow: hidden; } .ds-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } .ds-pane-title { margin: 0; font-family: var(--font-display, Quantico, sans-serif); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; } .ds-pane-body { padding: 16px 18px 18px; } .ds-btn-mini { border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,0.03); color: #e6edf4; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: border-color 150ms ease, background 150ms ease; } .ds-btn-mini:hover { border-color: rgba(255,177,48,0.35); background: rgba(245,166,35,0.08); }"
+    },
+    {
+      "name": "Flow Filter Popover Surface",
+      "kind": "custom",
+      "refersTo": "pane-surface",
+      "description": "Floating filter inspector with dedicated overlay elevation.",
+      "html": "<aside class=\"ds-popover\"><h4 class=\"ds-popover-title\">Flow Filters</h4><p class=\"ds-popover-copy\">Changes apply immediately.</p></aside>",
+      "css": ".ds-popover { width: min(420px, 90vw); border: 1px solid rgba(245,166,35,0.24); border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), rgba(11,16,22,0.92); box-shadow: 0 24px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(18px); color: #e6edf4; } .ds-popover-title { margin: 0; font-family: var(--font-display, Quantico, sans-serif); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; } .ds-popover-copy { margin: 6px 0 0; color: #90a0b2; font-family: var(--font-sans, 'IBM Plex Sans', sans-serif); font-size: 0.78rem; }"
+    }
+  ],
+  "narrative": {
+    "northStar": "The Evidence Console",
+    "overview": "Islandflow's interface behaves like an investigation instrument, not a presentation layer. The system is tuned for fast read accuracy under volatility: hierarchy is built from contrast, casing, and spacing cadence rather than decorative effects.\n\nThe visual atmosphere is dark and controlled, with amber used as a directional signal rather than ambient decoration. Surfaces are compact and information-dense, but each zone is explicit about purpose so the user can move from detection to validation without losing context.\n\nThis system explicitly rejects the anti-references in PRODUCT.md: no meme-stock hype aesthetics, no generic SaaS card fog, and no Bloomberg cosplay density unless density is earning its keep with decision value.",
+    "keyCharacteristics": [
+      "Operational contrast over ornamental contrast.",
+      "Dense layout with stable rhythm.",
+      "Accent color treated as scarce signal.",
+      "Monospace-assisted precision for time, numeric, and status data.",
+      "Readability preserved during bursty live updates."
+    ],
+    "rules": [
+      {
+        "name": "The Signal Scarcity Rule",
+        "body": "Amber is a control and attention signal, not a wash. Keep it concentrated on actions, state edges, and critical counters.",
+        "section": "colors"
+      },
+      {
+        "name": "The Semantic Color Rule",
+        "body": "Red and green never stand alone for meaning. Every directional or severity cue must include text, shape, or positional confirmation.",
+        "section": "colors"
+      },
+      {
+        "name": "The Instrument Label Rule",
+        "body": "Labels are short, uppercase, and spaced. They identify system state fast, without narrative phrasing.",
+        "section": "typography"
+      },
+      {
+        "name": "The Flat-By-Default Rule",
+        "body": "If a surface is not floating over active workflow content, it does not get shadow lift.",
+        "section": "elevation"
+      }
+    ],
+    "dos": [
+      "Do keep status and direction semantic with both color and text labels (`severity-high`, `direction-bullish`, explicit words).",
+      "Do preserve compact control density (`8px-12px` padding range) so investigation actions stay within a short scan path.",
+      "Do use amber as a sparse decision signal for active controls, focus rails, and key counters.",
+      "Do keep overlays visually separated with dedicated shadow roles while leaving primary panes flat.",
+      "Do design live updates to avoid flashing, excessive animation, and layout shifts during high-volume periods."
+    ],
+    "donts": [
+      "Don't make Islandflow feel like a meme-stock or finfluencer trading app with hype, gamification, urgency theater, or promotional calls to action.",
+      "Don't make Islandflow feel like a generic SaaS analytics dashboard with decorative gradients, vague card stacks, and non-actionable vanity metrics.",
+      "Don't make Islandflow feel like Bloomberg-style visual density used as aesthetic cosplay instead of as a genuinely useful information structure.",
+      "Don't rely on red/green alone for directional meaning or severity.",
+      "Don't use colored side-stripe accents on rows/cards as the primary signifier; use complete semantic chips and labels instead."
+    ]
+  }
+}

AGENTS.md

@@ -68,3 +68,104 @@ Working style that avoids common problems here:
 - Prefer editing in the touched workspace (`services/<name>`, `packages/<name>`, `apps/web`) and keep shared contract changes in `packages/types`.
 - Keep `.env` aligned with `.env.example`; adapters default to synthetic modes for local development.
 - Dev runners persist child PID state in `.tmp/`; if a previous run crashed, restart via the standard `bun run dev*` commands so stale processes are cleaned up.
+
+## Required Turn Documentation
+
+At the end of every completed implementation task, before final handoff, create a user-readable HTML document describing the work.
+
+This documentation is mandatory whenever code, configuration, tests, or project files were changed.
+
+### Location
+
+Save the document in:
+
+```text
+docs/turns/
+```
+
+Use a clear timestamped filename:
+
+```text
+docs/turns/YYYY-MM-DD-short-task-name.html
+```
+
+Example:
+
+```text
+docs/turns/2026-05-14-add-market-replay-controls.html
+```
+
+### Format
+
+Use the impeccable skill to structure the document as clean, readable HTML.
+
+If the impeccable skill is unavailable, still create a well-structured standalone HTML file with:
+
+- A concise summary at the top
+- A detailed explanation of what changed
+- Relevant context or background
+- Specific code snippets or examples when helpful
+- Issues, limitations, tradeoffs, or mitigations
+- Validation performed, including tests, builds, linters, or manual checks
+- Any remaining follow-up work, with corresponding Beads issue IDs when applicable
+
+### Required Sections
+
+Each turn document must include these sections:
+
+1. **Summary**
+2. **Changes Made**
+3. **Context**
+4. **Important Implementation Details**
+5. **Validation**
+6. **Issues, Limitations, and Mitigations**
+7. **Follow-up Work**
+
+### Completion Rule
+
+A task is not complete until:
+
+1. The Beads workflow is updated
+2. The turn document is created in `docs/turns`
+3. Relevant quality gates have passed or failures are documented
+4. Changes are committed
+5. `bd dolt push` succeeds
+6. `git push` succeeds
+7. `git status` shows the branch is up to date with origin
+
+For trivial changes, the document may be brief, but it must still exist and clearly explain what changed and how it was validated.
+
+## Plan Mode Documentation
+
+When working in plan mode, do not modify implementation files.
+
+At the end of plan mode, provide a concise summary of the plan and ask the user whether they want to proceed with implementation.
+
+If the user asks to save the plan, create a user-readable HTML plan document in:
+
+```text
+docs/plans/
+```
+
+Use a clear timestamped filename:
+
+```text
+docs/plans/YYYY-MM-DD-short-plan-name.html
+```
+
+The plan document should be labeled clearly as a plan and should include:
+
+1. **Plan Summary**
+2. **Goals**
+3. **Proposed Changes**
+4. **Relevant Context**
+5. **Implementation Steps**
+6. **Risks, Limitations, and Mitigations**
+7. **Open Questions**
+
+Always do the following when you finish a task, finish the beads workflow and and make a commit:
+- Document the changes in a user-readable format
+- Use the impeccable skill to structure the document as HTML 
+- Create a clear, concise summary of the changes at the top, followed by a detailed description of the changes, including any relevant context or background as well as specific code snippets or examples.
+- Note any relevant issues or limitations that were addressed or mitigated by the changes.
+- The HTML file should be stored in the `docs/turns` directory. It should include the current date and time, as well as a brief explanation of changes. e.g. docs/turns/YYYY-MM-DD-{description}.html

CLAUDE.md

@@ -1,69 +0,0 @@
-# Project Instructions for AI Agents
-
-This file provides instructions and context for AI coding agents working on this project.
-
-<!-- BEGIN BEADS INTEGRATION v:1 profile:minimal hash:ca08a54f -->
-## Beads Issue Tracker
-
-This project uses **bd (beads)** for issue tracking. Run `bd prime` to see full workflow context and commands.
-
-### Quick Reference
-
-```bash
-bd ready              # Find available work
-bd show <id>          # View issue details
-bd update <id> --claim  # Claim work
-bd close <id>         # Complete work
-```
-
-### Rules
-
-- Use `bd` for ALL task tracking — do NOT use TodoWrite, TaskCreate, or markdown TODO lists
-- Run `bd prime` for detailed command reference and session close protocol
-- Use `bd remember` for persistent knowledge — do NOT use MEMORY.md files
-
-## Session Completion
-
-**When ending a work session**, you MUST complete ALL steps below. Work is NOT complete until `git push` succeeds.
-
-**MANDATORY WORKFLOW:**
-
-1. **File issues for remaining work** - Create issues for anything that needs follow-up
-2. **Run quality gates** (if code changed) - Tests, linters, builds
-3. **Update issue status** - Close finished work, update in-progress items
-4. **PUSH TO REMOTE** - This is MANDATORY:
-   ```bash
-   git pull --rebase
-   bd dolt push
-   git push
-   git status  # MUST show "up to date with origin"
-   ```
-5. **Clean up** - Clear stashes, prune remote branches
-6. **Verify** - All changes committed AND pushed
-7. **Hand off** - Provide context for next session
-
-**CRITICAL RULES:**
-- Work is NOT complete until `git push` succeeds
-- NEVER stop before pushing - that leaves work stranded locally
-- NEVER say "ready to push when you are" - YOU must push
-- If push fails, resolve and retry until it succeeds
-<!-- END BEADS INTEGRATION -->
-
-
-## Build & Test
-
-_Add your build and test commands here_
-
-```bash
-# Example:
-# npm install
-# npm test
-```
-
-## Architecture Overview
-
-_Add a brief overview of your project architecture_
-
-## Conventions & Patterns
-
-_Add your project-specific conventions here_

DESIGN.md

@@ -0,0 +1,230 @@
+---
+name: Islandflow Terminal
+description: Evidence-linked market intelligence terminal for real-time and replay investigation
+colors:
+  bg-core: "#06080b"
+  bg-elevated: "#0b1016"
+  bg-pane: "#111820"
+  bg-pane-2: "#0d141b"
+  bg-soft: "#ffffff08"
+  border-subtle: "#ffffff14"
+  border-accent: "#ffb13059"
+  text-primary: "#e6edf4"
+  text-dim: "#90a0b2"
+  text-faint: "#6e7b8c"
+  signal-amber: "#f5a623"
+  signal-amber-soft: "#f5a6231f"
+  confirm-green: "#25c17a"
+  confirm-green-soft: "#25c17a1f"
+  risk-red: "#ff6b5f"
+  risk-red-soft: "#ff6b5f24"
+  info-blue: "#4da3ff"
+  info-blue-soft: "#4da3ff24"
+typography:
+  display:
+    fontFamily: "Quantico, sans-serif"
+    fontSize: "clamp(2rem, 3vw, 2.8rem)"
+    fontWeight: 700
+    lineHeight: 1.05
+    letterSpacing: "0.08em"
+  body:
+    fontFamily: "IBM Plex Sans, sans-serif"
+    fontSize: "0.92rem"
+    fontWeight: 400
+    lineHeight: 1.45
+  label:
+    fontFamily: "IBM Plex Mono, monospace"
+    fontSize: "0.72rem"
+    fontWeight: 600
+    lineHeight: 1.2
+    letterSpacing: "0.12em"
+rounded:
+  sm: "8px"
+  md: "10px"
+  lg: "12px"
+  xl: "14px"
+  pill: "999px"
+spacing:
+  xs: "4px"
+  sm: "8px"
+  md: "12px"
+  lg: "16px"
+  xl: "24px"
+components:
+  button-base:
+    backgroundColor: "{colors.bg-soft}"
+    textColor: "{colors.text-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.sm}"
+    padding: "8px 10px"
+  button-active:
+    backgroundColor: "{colors.signal-amber-soft}"
+    textColor: "{colors.signal-amber}"
+    typography: "{typography.label}"
+    rounded: "{rounded.sm}"
+    padding: "8px 10px"
+  nav-link:
+    backgroundColor: "{colors.bg-core}"
+    textColor: "{colors.text-dim}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "12px 14px"
+  nav-link-active:
+    backgroundColor: "{colors.signal-amber-soft}"
+    textColor: "{colors.text-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.md}"
+    padding: "12px 14px"
+  pane-surface:
+    backgroundColor: "{colors.bg-pane}"
+    textColor: "{colors.text-primary}"
+    rounded: "{rounded.xl}"
+    padding: "16px 18px"
+  status-chip:
+    backgroundColor: "{colors.bg-soft}"
+    textColor: "{colors.text-primary}"
+    typography: "{typography.label}"
+    rounded: "{rounded.pill}"
+    padding: "3px 8px"
+---
+
+# Design System: Islandflow Terminal
+
+## Overview
+
+**Creative North Star: "The Evidence Console"**
+
+Islandflow's interface behaves like an investigation instrument, not a presentation layer. The system is tuned for fast read accuracy under volatility: hierarchy is built from contrast, casing, and spacing cadence rather than decorative effects.
+
+The visual atmosphere is dark and controlled, with amber used as a directional signal rather than ambient decoration. Surfaces are compact and information-dense, but each zone is explicit about purpose so the user can move from detection to validation without losing context.
+
+This system explicitly rejects the anti-references in PRODUCT.md: no meme-stock hype aesthetics, no generic SaaS card fog, and no Bloomberg cosplay density unless density is earning its keep with decision value.
+
+**Key Characteristics:**
+- Operational contrast over ornamental contrast.
+- Dense layout with stable rhythm.
+- Accent color treated as scarce signal.
+- Monospace-assisted precision for time, numeric, and status data.
+- Readability preserved during bursty live updates.
+
+## Colors
+
+The palette is operational and role-first: neutral cold surfaces carry most of the interface, with amber, green, red, and blue reserved for state and meaning.
+
+### Primary
+
+- **Signal Amber** (`#f5a623`): active controls, focus rails, status emphasis, and live interaction highlights.
+
+### Secondary
+
+- **Info Blue** (`#4da3ff`): replay states, neutral directional tags, and non-critical positive context.
+
+### Tertiary
+
+- **Confirm Green** (`#25c17a`): healthy connectivity and positive directional markers.
+- **Risk Red** (`#ff6b5f`): stale/disconnected/error states and bearish risk markers.
+
+### Neutral
+
+- **Command Black** (`#06080b`): base shell and deepest background.
+- **Panel Graphite** (`#111820`): primary container surfaces.
+- **Elevation Slate** (`#0b1016`): raised or overlay-adjacent planes.
+- **Data Ink** (`#e6edf4`): default text on dark surfaces.
+- **Support Ink** (`#90a0b2`): secondary labels and metadata.
+- **Trace Ink** (`#6e7b8c`): tertiary labels and low-priority framing.
+
+### Named Rules
+
+**The Signal Scarcity Rule.** Amber is a control and attention signal, not a wash. Keep it concentrated on actions, state edges, and critical counters.
+
+**The Semantic Color Rule.** Red and green never stand alone for meaning. Every directional or severity cue must include text, shape, or positional confirmation.
+
+## Typography
+
+**Display Font:** Quantico (fallback: sans-serif)
+**Body Font:** IBM Plex Sans (fallback: sans-serif)
+**Label/Mono Font:** IBM Plex Mono (fallback: monospace)
+
+**Character:** The pairing is technical and composed. Quantico provides assertive waypoint headings, IBM Plex Sans keeps body copy readable, and IBM Plex Mono anchors temporal/numeric trust.
+
+### Hierarchy
+
+- **Display** (700, `clamp(2rem, 3vw, 2.8rem)`, 1.05): page-level and major section titles.
+- **Headline** (700, `1.8rem`, 1.1): rail brand mark and high-salience panel titles.
+- **Title** (600, `1rem`, 1.2): pane headings and focused section labels.
+- **Body** (400, `0.92rem`, 1.45): default transactional and descriptive copy.
+- **Label** (600, `0.72rem`, `0.12em`, uppercase): controls, chips, table headers, and instrumentation micro-labels.
+
+### Named Rules
+
+**The Instrument Label Rule.** Labels are short, uppercase, and spaced. They identify system state fast, without narrative phrasing.
+
+## Elevation
+
+The system is flat by default. Depth is primarily tonal (background and border deltas), with shadows reserved for overlays that require separation from live data.
+
+### Shadow Vocabulary
+
+- **Overlay Lift** (`0 24px 60px rgba(0, 0, 0, 0.42)`): filter popovers and floating control surfaces.
+- **Drawer Lift** (`0 24px 70px rgba(0, 0, 0, 0.5)`): detail drawers and deep inspection layers.
+- **Tooltip Lift** (`0 16px 40px rgba(0, 0, 0, 0.45)`): short-lived contextual tooltips.
+
+### Named Rules
+
+**The Flat-By-Default Rule.** If a surface is not floating over active workflow content, it does not get shadow lift.
+
+## Components
+
+### Buttons
+
+- **Shape:** compact rounded rectangle (`8px radius`) for standard controls, pill (`999px`) for segment toggles.
+- **Primary:** subtle dark fill with bordered edge (`1px`, `rgba(255,255,255,0.08)`), label typography in uppercase mono (`0.72rem`).
+- **Active State:** amber-tinted gradient/fill (`rgba(245,166,35,0.18 -> 0.08)`), stronger border and warmer text.
+- **Focus/Interaction:** no bounce effects; state transitions stay short (`~150-180ms`) with opacity/color emphasis.
+
+### Chips
+
+- **Style:** pill chips (`999px`) with thin border and semantic soft fill.
+- **State:** direction/severity/status chips map to green/red/blue semantic channels with text labels always present.
+
+### Cards / Containers
+
+- **Corner Style:** medium-soft corners (`12px` or `14px`) depending on container prominence.
+- **Background:** layered dark surfaces (`#111820`, `#0d141b`) with restrained top-to-bottom sheen.
+- **Shadow Strategy:** no default card shadow; only overlays and floating inspectors use lift shadows.
+- **Border:** subtle perimeter lines (`rgba(255,255,255,0.08)` baseline).
+- **Internal Padding:** primarily `16px-18px` with tighter inner rhythm (`8px-12px`) for controls.
+
+### Inputs / Fields
+
+- **Style:** mostly transparent text fields with underlined focus rails for global filter/search workflows.
+- **Focus:** amber underline amplification and glow, paired with brighter field text.
+- **Error/Disabled:** disabled uses opacity reduction; error state should be paired with label text, not color only.
+
+### Navigation
+
+- **Style:** rail links in uppercase label typography with `10px` radius and low-contrast base fill.
+- **Hover/Active:** hover introduces border + subtle fill; active introduces amber-tinted background and stronger contrast.
+- **Mobile Treatment:** rail collapses to top flow, controls stack vertically under `720px` while preserving full-width hit targets.
+
+### Signature Component
+
+- **Virtualized Data Tables:** fixed-height row lanes (`36px` and `44px` families), mono numeric columns, semantic row tinting, and stable scroll performance for live bursts.
+
+## Do's and Don'ts
+
+### Do:
+
+- **Do** keep status and direction semantic with both color and text labels (`severity-high`, `direction-bullish`, explicit words).
+- **Do** preserve compact control density (`8px-12px` padding range) so investigation actions stay within a short scan path.
+- **Do** use amber as a sparse decision signal for active controls, focus rails, and key counters.
+- **Do** keep overlays visually separated with dedicated shadow roles while leaving primary panes flat.
+- **Do** design live updates to avoid flashing, excessive animation, and layout shifts during high-volume periods.
+
+### Don't:
+
+- **Don't** make Islandflow feel like a meme-stock or finfluencer trading app with hype, gamification, urgency theater, or promotional calls to action.
+- **Don't** make Islandflow feel like a generic SaaS analytics dashboard with decorative gradients, vague card stacks, and non-actionable vanity metrics.
+- **Don't** make Islandflow feel like Bloomberg-style visual density used as aesthetic cosplay instead of as a genuinely useful information structure.
+- **Don't** rely on red/green alone for directional meaning or severity.
+- **Don't** use colored side-stripe accents on rows/cards as the primary signifier; use complete semantic chips and labels instead.

PRODUCT.md

@@ -0,0 +1,38 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Islandflow is for serious individual traders and researchers working in live market conditions. They use real-time options flow, equity prints, inferred dark/off-exchange signals, and deterministic replay to investigate market behavior under pressure, where speed and confidence both matter.
+
+## Product Purpose
+
+Islandflow exists to help users quickly decide whether unusual market activity is meaningful, explainable, and actionable. The product should surface evidence fast enough to support real-time decisions, while preserving enough context and traceability to trust or dismiss a signal with confidence.
+
+## Brand Personality
+
+Precise, composed, forensic (with tactical tone when needed). The interface should feel like an instrument panel: utility-first, calm under load, and trustworthy. Brand voice should appear in orientation moments, empty states, onboarding, and high-level framing, while core workflows prioritize clarity, speed, and evidence.
+
+## Anti-references
+
+- Meme-stock or finfluencer-style trading apps that rely on hype, gamification, urgency theater, or promotional calls to action.
+- Generic SaaS analytics dashboards with decorative gradients, vague card stacks, and non-actionable vanity metrics.
+- Bloomberg-style visual density used as aesthetic cosplay instead of as a genuinely useful information structure.
+
+## Design Principles
+
+- Evidence before impression: every important signal should be explainable with clear supporting context.
+- Utility over theater: visual choices must improve legibility, prioritization, and decision speed.
+- Composure under volatility: interactions and layouts should remain stable and readable during bursts of market activity.
+- Trust through precision: labels, states, and data semantics should be explicit, unambiguous, and internally consistent.
+- Workflow-first framing: the interface should support investigative flow from detection to validation to action.
+
+## Accessibility & Inclusion
+
+- Target WCAG AA contrast at minimum across all core interfaces.
+- Support reduced motion preferences, especially for live ticks, pulses, chart transitions, and alert animations.
+- Never rely on red/green color alone for directionality or status; pair with text, icons, shape, and/or position.
+- Keep real-time updates readable by avoiding flashing effects, excessive animation, and layout shifts during high-volume periods.

apps/web/app/terminal.test.ts

@@ -27,8 +27,10 @@ import {
   getTapeVirtualConfig,
   mergeNewestWithOverflow,
   normalizeAlertSeverity,
+  normalizeTickerFilterInput,
   nextFlowFilterPopoverState,
   isSyntheticAdminVisible,
+  parseTickerFilterInput,
   prunePinnedEntries,
   projectPausableTapeState,
   reducePausableTapeData,
@@ -412,6 +414,17 @@ describe("synthetic admin visibility", () => {
   it("shows the internal control rail only when the public admin flag is enabled", () => {
     expect(isSyntheticAdminVisible("1")).toBe(true);
     expect(isSyntheticAdminVisible("0")).toBe(false);
+    expect(isSyntheticAdminVisible(undefined)).toBe(false);
+  });
+});
+
+describe("ticker filter helpers", () => {
+  it("normalizes pasted ticker input into a stable terminal format", () => {
+    expect(normalizeTickerFilterInput(" spy，\n nvda\u0000 aapl ")).toBe(" SPY, NVDA AAPL ");
+  });
+
+  it("parses, uppercases, and deduplicates ticker tokens", () => {
+    expect(parseTickerFilterInput("spy, nvda spy\nqqq")).toEqual(["SPY", "NVDA", "QQQ"]);
   });
 });
 

apps/web/app/terminal.tsx

@@ -8,6 +8,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useId,
   useLayoutEffect,
   useMemo,
   useRef,
@@ -5054,6 +5055,25 @@ const formatFlowMetric = (value: number, suffix?: string): string => {
   return value.toLocaleString();
 };
 
+const TICKER_FILTER_INPUT_MAX_LENGTH = 120;
+
+export const normalizeTickerFilterInput = (value: string): string =>
+  value
+    .normalize("NFKC")
+    .replace(/[\u0000-\u001f\u007f]+/g, " ")
+    .replace(/，/g, ",")
+    .replace(/\s+/g, " ")
+    .toUpperCase()
+    .slice(0, TICKER_FILTER_INPUT_MAX_LENGTH);
+
+export const parseTickerFilterInput = (value: string): string[] => {
+  const parts = normalizeTickerFilterInput(value)
+    .split(/[,\s]+/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+  return Array.from(new Set(parts));
+};
+
 const useTerminalState = () => {
   const pathname = usePathname();
   const routeFeatures = useMemo(() => getRouteFeatures(pathname), [pathname]);
@@ -5069,13 +5089,7 @@ const useTerminalState = () => {
   const [filterInput, setFilterInput] = useState<string>("");
   const [flowFilters, setFlowFilters] = useState<OptionFlowFilters>(() => buildDefaultFlowFilters());
   const [chartIntervalMs, setChartIntervalMs] = useState<number>(CANDLE_INTERVALS[0].ms);
-  const activeTickers = useMemo(() => {
+  const activeTickers = useMemo(() => parseTickerFilterInput(filterInput), [filterInput]);
-    const parts = filterInput
-      .split(/[,\s]+/)
-      .map((value) => value.trim().toUpperCase())
-      .filter(Boolean);
-    return Array.from(new Set(parts));
-  }, [filterInput]);
   const tickerSet = useMemo(() => new Set(activeTickers), [activeTickers]);
   const instrumentUnderlying = selectedInstrument?.underlyingId.toUpperCase() ?? null;
   const isOptionContractFocused = selectedInstrument?.kind === "option-contract";
@@ -8348,20 +8362,26 @@ function SyntheticControlDock() {
 export function TerminalAppShell({ children }: { children: ReactNode }) {
   const state = useTerminalState();
   const pathname = usePathname();
+  const tickerFieldId = useId();
+  const tickerHintId = useId();
 
   return (
     <TerminalContext.Provider value={state}>
       <div className="terminal-shell">
+        <a className="skip-link" href="#terminal-content">
+          Skip to terminal content
+        </a>
         <aside className="terminal-rail">
           <div className="terminal-brand">
             <span className="terminal-brand-kicker">IF</span>
             <span className="terminal-brand-name">Islandflow</span>
           </div>
-          <nav className="terminal-nav">
+          <nav aria-label="Primary" className="terminal-nav">
             {NAV_ITEMS.map((item) => {
               const active = pathname === item.href;
               return (
                 <Link
+                  aria-current={active ? "page" : undefined}
                   className={`terminal-nav-link${active ? " terminal-nav-link-active" : ""}`}
                   href={item.href}
                   key={item.href}
@@ -8387,31 +8407,46 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
                   </span>
                 ) : null}
                 <label className="terminal-filter">
-                  <span className="terminal-filter-label">Ticker</span>
+                  <span className="terminal-filter-label" id={tickerHintId}>
+                    Ticker
+                  </span>
                   <span className="terminal-filter-field">
                     <input
+                      id={tickerFieldId}
+                      aria-describedby={tickerHintId}
+                      autoCapitalize="characters"
+                      autoComplete="off"
+                      autoCorrect="off"
                       className="terminal-input"
                       value={state.filterInput}
-                      onChange={(event) => state.setFilterInput(event.target.value)}
+                      inputMode="text"
+                      maxLength={TICKER_FILTER_INPUT_MAX_LENGTH}
+                      name="ticker-filter"
+                      onChange={(event) => state.setFilterInput(normalizeTickerFilterInput(event.target.value))}
                       placeholder="SPY, NVDA, AAPL"
                       spellCheck={false}
                     />
                   </span>
                 </label>
                 <button
+                  aria-label="Clear ticker filter"
                   className="terminal-button"
                   type="button"
                   onClick={() => state.setFilterInput("")}
                   disabled={state.filterInput.trim().length === 0}
+                  title="Clear ticker filter"
                 >
                   Clear
                 </button>
               </div>
               <div className="terminal-topbar-mode">
                 <button
+                  aria-label={state.mode === "live" ? "Switch to replay mode" : "Switch to live mode"}
+                  aria-pressed={state.mode !== "live"}
                   className="terminal-button terminal-button-primary"
                   type="button"
                   onClick={state.toggleMode}
+                  title={state.mode === "live" ? "Switch to replay mode" : "Switch to live mode"}
                 >
                   {state.mode === "live" ? "Replay" : "Live"}
                 </button>
@@ -8419,7 +8454,9 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
             </div>
           </header>
 
-          <main className="terminal-content">{children}</main>
+          <main className="terminal-content" id="terminal-content">
+            {children}
+          </main>
         </div>
 
         <SyntheticControlDock />

docs/terminal-audit-2026-05-14-0432.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Terminal Audit - 2026-05-14 04:32</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #0b1016;
+        --panel: #111820;
+        --panel-2: #0d141b;
+        --border: rgba(255, 255, 255, 0.1);
+        --text: #e6edf4;
+        --text-dim: #90a0b2;
+        --text-faint: #6e7b8c;
+        --accent: #f5a623;
+        --accent-soft: rgba(245, 166, 35, 0.14);
+        --green: #25c17a;
+        --green-soft: rgba(37, 193, 122, 0.16);
+        --red: #ff6b5f;
+        --red-soft: rgba(255, 107, 95, 0.16);
+        --blue: #4da3ff;
+        --blue-soft: rgba(77, 163, 255, 0.16);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font-family: Inter, "IBM Plex Sans", Arial, sans-serif;
+        background: linear-gradient(180deg, #081017 0%, #05070a 100%);
+        color: var(--text);
+      }
+
+      main {
+        width: min(1100px, calc(100vw - 32px));
+        margin: 0 auto;
+        padding: 32px 0 48px;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      p,
+      ul,
+      ol,
+      table {
+        margin-top: 0;
+      }
+
+      h1,
+      h2,
+      h3 {
+        letter-spacing: 0.04em;
+      }
+
+      h1 {
+        font-size: 2rem;
+        margin-bottom: 10px;
+      }
+
+      h2 {
+        font-size: 1.15rem;
+        margin-bottom: 14px;
+      }
+
+      h3 {
+        font-size: 0.95rem;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        color: var(--text-dim);
+      }
+
+      p,
+      li,
+      td,
+      th {
+        line-height: 1.55;
+        color: var(--text);
+      }
+
+      .lede {
+        color: var(--text-dim);
+        max-width: 76ch;
+      }
+
+      .summary {
+        padding: 24px;
+        border: 1px solid var(--border);
+        border-radius: 16px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
+        margin-bottom: 24px;
+      }
+
+      .score-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        margin: 14px 0 18px;
+      }
+
+      .score-badge,
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 32px;
+        padding: 6px 10px;
+        border-radius: 999px;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.03);
+        font-size: 0.82rem;
+      }
+
+      .score-badge {
+        border-color: rgba(245, 166, 35, 0.35);
+        background: var(--accent-soft);
+        color: #ffe2aa;
+        font-weight: 700;
+      }
+
+      .pill-good {
+        border-color: rgba(37, 193, 122, 0.35);
+        background: var(--green-soft);
+      }
+
+      .pill-warn {
+        border-color: rgba(245, 166, 35, 0.35);
+        background: var(--accent-soft);
+      }
+
+      .pill-risk {
+        border-color: rgba(255, 107, 95, 0.35);
+        background: var(--red-soft);
+      }
+
+      .panel {
+        padding: 22px 24px;
+        border: 1px solid var(--border);
+        border-radius: 16px;
+        background: var(--panel);
+        margin-bottom: 20px;
+      }
+
+      .subpanel {
+        padding: 18px;
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        background: var(--panel-2);
+        margin-top: 16px;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.94rem;
+      }
+
+      th,
+      td {
+        padding: 12px 10px;
+        border-bottom: 1px solid var(--border);
+        text-align: left;
+        vertical-align: top;
+      }
+
+      th {
+        color: var(--text-dim);
+        font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      code {
+        font-family: "IBM Plex Mono", Menlo, monospace;
+        font-size: 0.88em;
+        color: #ffe2aa;
+      }
+
+      .finding {
+        border-top: 1px solid var(--border);
+        padding-top: 18px;
+        margin-top: 18px;
+      }
+
+      .finding:first-of-type {
+        border-top: 0;
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      .meta {
+        color: var(--text-dim);
+        font-size: 0.92rem;
+      }
+
+      .meta strong {
+        color: var(--text);
+      }
+
+      .note {
+        color: var(--text-dim);
+      }
+
+      .verdict-pass {
+        color: #bfe7cf;
+      }
+
+      .footer-note {
+        color: var(--text-dim);
+        font-size: 0.95rem;
+      }
+
+      @media (max-width: 720px) {
+        main {
+          width: min(100vw - 20px, 1100px);
+          padding: 20px 0 32px;
+        }
+
+        .summary,
+        .panel {
+          padding: 18px;
+        }
+
+        th,
+        td {
+          padding: 10px 8px;
+          font-size: 0.9rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="summary">
+        <h1>Terminal View Audit</h1>
+        <p class="lede">
+          Audit report for the Islandflow terminal view, formatted for handoff and review. This preserves the
+          full findings set: scorecard, anti-pattern verdict, executive summary, detailed issues, systemic
+          patterns, positive findings, and recommended follow-up commands.
+        </p>
+        <div class="score-row">
+          <span class="score-badge">Overall Score: 11/20</span>
+          <span class="pill pill-warn">Rating Band: Acceptable</span>
+          <span class="pill pill-risk">Severity Mix: P0 0, P1 5, P2 3, P3 1</span>
+          <span class="pill">Generated: 2026-05-14 04:32</span>
+        </div>
+        <p>
+          The terminal does <strong>not</strong> read as generic AI-generated UI overall. It has a coherent
+          instrument-panel identity, consistent density, and restrained accent use. The biggest problems are
+          implementation quality issues: invalid nested interactive controls, inaccessible drawer behavior,
+          weak focus treatment, mobile layouts that depend on horizontal scrolling, token drift, and repeated
+          banned side-stripe accents.
+        </p>
+      </section>
+
+      <section class="panel">
+        <h2>Audit Health Score</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Dimension</th>
+              <th>Score</th>
+              <th>Key Finding</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Accessibility</td>
+              <td>2/4</td>
+              <td>Invalid nested interactive controls in options rows.</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Performance</td>
+              <td>3/4</td>
+              <td>Virtualization is good, but blur-heavy chrome and overlays add avoidable cost.</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>Responsive Design</td>
+              <td>2/4</td>
+              <td>Core tables rely on large fixed minimum widths and horizontal scrolling.</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>Theming</td>
+              <td>2/4</td>
+              <td>Token base exists, but many hard-coded colors and undefined vars bypass it.</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>Anti-Patterns</td>
+              <td>2/4</td>
+              <td>Repeated side-stripe accents violate the stated design bans.</td>
+            </tr>
+            <tr>
+              <td><strong>Total</strong></td>
+              <td></td>
+              <td><strong>11/20</strong></td>
+              <td><strong>Acceptable</strong></td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section class="panel">
+        <h2>Anti-Patterns Verdict</h2>
+        <p class="verdict-pass">
+          Pass, with caveats.
+        </p>
+        <p>
+          The terminal does not look AI-generated overall. It has a coherent instrument-panel identity,
+          consistent density, and restrained accent use. The main tells are implementation-level:
+          banned side-stripe accents on live rows, decorative blur-heavy chrome, and some product-UI
+          typography choices that drift toward display styling.
+        </p>
+      </section>
+
+      <section class="panel">
+        <h2>Executive Summary</h2>
+        <ul>
+          <li><strong>Audit Health Score:</strong> 11/20 (Acceptable)</li>
+          <li><strong>Total issues found:</strong> 9</li>
+          <li><strong>Severity mix:</strong> P0: 0, P1: 5, P2: 3, P3: 1</li>
+          <li>
+            <strong>Top issues:</strong> nested buttons inside clickable options rows, drawers that are not true
+            accessible dialogs, suppressed focus indicators, mobile dependence on oversized horizontal tables,
+            and repeated banned side-stripe row styling.
+          </li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Detailed Findings By Severity</h2>
+
+        <article class="finding">
+          <h3>[P1] Nested Interactive Controls Inside Clickable Row</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/terminal.tsx:7118-7135</code>, <code>apps/web/app/terminal.tsx:7155-7179</code></p>
+          <p class="meta"><strong>Category:</strong> Accessibility</p>
+          <p><strong>Impact:</strong> Decorated option rows render as outer <code>&lt;button&gt;</code> elements containing inner contract-focus <code>&lt;button&gt;</code> elements. This is invalid HTML and can create inconsistent tab order, click handling, and screen-reader output.</p>
+          <p><strong>WCAG/Standard:</strong> WCAG 4.1.2 Name, Role, Value; HTML interactive content nesting rules</p>
+          <p><strong>Recommendation:</strong> Split row selection and contract focus into non-nested controls. Use a non-button row container with one explicit action button, or keep the row as the only button and turn inner controls into non-interactive text.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable harden terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P1] Drawer Panels Are Visually Drawers, Not Accessible Dialogs</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/terminal.tsx:4524-4629</code>, <code>4639-4737</code>, <code>4747-4841</code>, <code>4850-4952</code>, close handling at <code>5070-5102</code></p>
+          <p class="meta"><strong>Category:</strong> Accessibility</p>
+          <p><strong>Impact:</strong> The drawers close on outside click and <code>Escape</code>, but they lack <code>role="dialog"</code>, <code>aria-modal</code>, focus entry, focus return, and trap behavior. Keyboard users can tab behind the drawer and lose context.</p>
+          <p><strong>WCAG/Standard:</strong> WCAG 2.1.1 Keyboard, 2.4.3 Focus Order, 4.1.2 Name, Role, Value</p>
+          <p><strong>Recommendation:</strong> Promote drawers to true modal dialogs with labelled titles, initial focus, focus containment, inert background, and focus restoration on close.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable harden terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P1] Focus Indicators Are Suppressed In Multiple Core Controls</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:325-327</code>, <code>413-415</code>, <code>1054-1058</code>, <code>1213-1218</code></p>
+          <p class="meta"><strong>Category:</strong> Accessibility</p>
+          <p><strong>Impact:</strong> Several controls explicitly remove the browser outline. Some surfaces get only a subtle background shift, which is weaker than a reliable visible focus ring, especially in dense data views.</p>
+          <p><strong>WCAG/Standard:</strong> WCAG 2.4.7 Focus Visible</p>
+          <p><strong>Recommendation:</strong> Restore strong <code>:focus-visible</code> treatment on inputs, row buttons, and inline instrument actions using a consistent high-contrast ring or border treatment.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable harden terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P1] ARIA Table Semantics Are Incomplete</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/terminal.tsx:7061-7075</code>, <code>7251-7259</code>, <code>7348-7359</code>, <code>7496-7505</code>, <code>7609-7616</code>, <code>7732-7739</code></p>
+          <p class="meta"><strong>Category:</strong> Accessibility</p>
+          <p><strong>Impact:</strong> The app uses <code>role="table"</code> and <code>role="row"</code> but not full table semantics such as <code>rowgroup</code>, <code>columnheader</code>, and cell roles. Screen readers will get a weaker structural model than a real table or fully formed ARIA grid.</p>
+          <p><strong>WCAG/Standard:</strong> WCAG 1.3.1 Info and Relationships</p>
+          <p><strong>Recommendation:</strong> Prefer semantic <code>&lt;table&gt;</code> markup where possible, or complete the ARIA table structure consistently.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable harden terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P1] Narrow-Screen Experience Depends On Oversized Horizontal Tables</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:967-1009</code>, <code>1116-1144</code>, <code>1645-1714</code></p>
+          <p class="meta"><strong>Category:</strong> Responsive Design</p>
+          <p><strong>Impact:</strong> Major views keep <code>min-width</code> values like <code>1280px</code>, <code>1260px</code>, <code>900px</code>, and <code>820px</code>. The mobile fallback is horizontal scroll rather than structural adaptation, which increases cognitive load and makes comparison harder on phones and small tablets.</p>
+          <p><strong>WCAG/Standard:</strong> Responsive design best practice</p>
+          <p><strong>Recommendation:</strong> Define compact column sets, progressive disclosure, or cardless stacked row summaries under mobile breakpoints instead of preserving full desktop schema.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable adapt terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P2] Touch Targets Are Below Recommended Minimum In Key Controls</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:255</code>, <code>330-347</code>, <code>365-379</code>, <code>461-468</code></p>
+          <p class="meta"><strong>Category:</strong> Responsive Design</p>
+          <p><strong>Impact:</strong> Controls and chips commonly bottom out around <code>32px</code> height. That is workable on desktop, but it is tight for touch use and increases mis-taps on mobile.</p>
+          <p><strong>WCAG/Standard:</strong> WCAG 2.5.5 Target Size (AAA), platform mobile guidance</p>
+          <p><strong>Recommendation:</strong> Raise interactive height to at least <code>40px</code>, ideally <code>44px</code>, for topbar controls, focus chips, and filter triggers under touch breakpoints.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable adapt terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P2] Token Discipline Is Partial, Not Consistent</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:41</code>, <code>306</code>, <code>321</code>, <code>362</code>, <code>375</code>, <code>479</code>, <code>502</code>, <code>565</code>, <code>616</code>, <code>763</code>, <code>1452-1470</code></p>
+          <p class="meta"><strong>Category:</strong> Theming</p>
+          <p><strong>Impact:</strong> The file starts with a clear token layer, but many later rules bypass it with hard-coded hex values. That makes palette evolution and future theme work harder.</p>
+          <p><strong>WCAG/Standard:</strong> Theming and system quality</p>
+          <p><strong>Recommendation:</strong> Replace one-off literals with named variables, especially amber text variants, chart surface background, and severity-strip foreground colors.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable polish terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P2] Undefined CSS Variables Create Silent Theming Bugs</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:398</code>, <code>1186</code></p>
+          <p class="meta"><strong>Category:</strong> Theming</p>
+          <p><strong>Impact:</strong> <code>var(--text-muted)</code> and <code>var(--muted)</code> are referenced but not defined in <code>:root</code>. Those declarations will fail and fall back to inherited color, which makes the result fragile and inconsistent.</p>
+          <p><strong>WCAG/Standard:</strong> CSS correctness</p>
+          <p><strong>Recommendation:</strong> Replace them with existing tokens such as <code>--text-dim</code> or define the missing variables explicitly.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable harden terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P2] Blur-Heavy Chrome Is Overused For Product UI</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:174-176</code>, <code>518-525</code>, <code>1504-1506</code></p>
+          <p class="meta"><strong>Category:</strong> Performance / Anti-Pattern</p>
+          <p><strong>Impact:</strong> <code>backdrop-filter: blur(12px)</code> and <code>blur(18px)</code> on persistent UI surfaces add cost and push the product UI slightly toward decorative glass treatment, which the design rules explicitly warn against as a default.</p>
+          <p><strong>WCAG/Standard:</strong> Performance and product-design guidance</p>
+          <p><strong>Recommendation:</strong> Keep blur only where separation is essential, or replace it with tonal contrast and border treatment.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable quieter terminal view</code></p>
+        </article>
+
+        <article class="finding">
+          <h3>[P3] Side-Stripe Row Accents Are Repeated Across Tables</h3>
+          <p class="meta"><strong>Location:</strong> <code>apps/web/app/globals.css:1092-1114</code>, <code>1221-1224</code></p>
+          <p class="meta"><strong>Category:</strong> Anti-Pattern</p>
+          <p><strong>Impact:</strong> The interface repeatedly uses <code>border-left: 3px</code> to communicate severity, direction, and classifier state. That is one of the skill's explicit banned patterns and makes rows feel more template-like than intentional.</p>
+          <p><strong>WCAG/Standard:</strong> Design-system rule</p>
+          <p><strong>Recommendation:</strong> Move semantic emphasis into full-row tinting, chips, iconography, or stronger text hierarchy instead of colored side rails.</p>
+          <p><strong>Suggested command:</strong> <code>$impeccable polish terminal view</code></p>
+        </article>
+      </section>
+
+      <section class="panel">
+        <h2>Patterns And Systemic Issues</h2>
+        <ul>
+          <li>Accessibility semantics are strongest at the surface level, labels and buttons exist, but weaker in composite patterns, drawers, virtualized tables, and focus handling.</li>
+          <li>The responsive strategy is mostly preserve desktop density and allow scrolling, not restructure the workflow for narrow screens.</li>
+          <li>The CSS starts from a tokenized system, then drifts into literal color values in later component rules.</li>
+          <li>The visual system is disciplined overall, but a few repeated product bans, side stripes and default blur, show up across multiple components.</li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Positive Findings</h2>
+        <ul>
+          <li>The terminal has a clear, distinctive product identity without falling into meme-trader styling.</li>
+          <li>Virtualized list rendering is the right performance baseline for these dense live data views.</li>
+          <li>The top-level shell and pane structure are predictable and support fast scanning.</li>
+          <li>Core inputs are labelled, and many actionable rows are implemented as real buttons instead of click-only divs.</li>
+          <li>Color usage is generally restrained and semantically meaningful, even where implementation cleanup is still needed.</li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Recommended Actions</h2>
+        <ol>
+          <li><strong>[P1] <code>$impeccable harden terminal view</code>:</strong> Fix nested buttons, accessible dialog behavior, focus visibility, and incomplete ARIA table semantics.</li>
+          <li><strong>[P1] <code>$impeccable adapt terminal view</code>:</strong> Redesign narrow-screen table behavior and increase touch target sizes in the shell and filter controls.</li>
+          <li><strong>[P2] <code>$impeccable quieter terminal view</code>:</strong> Reduce default blur and glass treatment in topbar, popover, and drawer chrome.</li>
+          <li><strong>[P2] <code>$impeccable polish terminal view</code>:</strong> Normalize tokens, remove hard-coded color drift, and replace banned side-stripe accents.</li>
+          <li><strong>[P2] <code>$impeccable polish terminal view</code>:</strong> Final cleanup pass once the structural fixes are in.</li>
+        </ol>
+        <div class="subpanel">
+          <p class="footer-note">
+            You can ask me to run these one at a time, all at once, or in any order you prefer.
+          </p>
+          <p class="footer-note">
+            Re-run <code>$impeccable audit</code> after fixes to see the score improve.
+          </p>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

docs/turns/2026-05-14-1824-adapt-terminal-view.html

@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Turn Summary: Adapt Terminal View</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: oklch(15% 0.014 250);
+        --panel: oklch(20% 0.018 250);
+        --panel-2: oklch(24% 0.02 250);
+        --text: oklch(92% 0.014 250);
+        --muted: oklch(70% 0.025 250);
+        --faint: oklch(58% 0.024 250);
+        --accent: oklch(78% 0.15 75);
+        --border: oklch(100% 0.006 250 / 0.12);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        background:
+          radial-gradient(circle at 12% 0%, oklch(78% 0.15 75 / 0.12), transparent 30rem),
+          var(--bg);
+        color: var(--text);
+        font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        line-height: 1.55;
+      }
+
+      main {
+        width: min(920px, calc(100% - 32px));
+        margin: 0 auto;
+        padding: 48px 0 64px;
+      }
+
+      header {
+        margin-bottom: 28px;
+        padding-bottom: 18px;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .eyebrow,
+      h2 {
+        color: var(--accent);
+        font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.74rem;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      h1 {
+        max-width: 14ch;
+        margin: 8px 0 10px;
+        font-size: clamp(2rem, 5vw, 3.4rem);
+        line-height: 1;
+        letter-spacing: -0.04em;
+      }
+
+      h2 {
+        margin: 0 0 10px;
+      }
+
+      p {
+        max-width: 72ch;
+        margin: 0 0 12px;
+        color: var(--muted);
+      }
+
+      section {
+        margin-top: 18px;
+        padding: 18px;
+        border: 1px solid var(--border);
+        border-radius: 16px;
+        background: linear-gradient(180deg, var(--panel-2), var(--panel));
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 1.2rem;
+        color: var(--muted);
+      }
+
+      li + li {
+        margin-top: 8px;
+      }
+
+      code {
+        color: var(--text);
+        font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.92em;
+      }
+
+      .summary {
+        display: grid;
+        gap: 12px;
+        padding: 18px;
+        border: 1px solid oklch(78% 0.15 75 / 0.34);
+        border-radius: 18px;
+        background: oklch(78% 0.15 75 / 0.08);
+      }
+
+      .meta {
+        color: var(--faint);
+        font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.78rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <div class="eyebrow">2026-05-14 18:24</div>
+        <h1>Adapt Terminal View</h1>
+        <p class="meta">Surface: <code>apps/web/app/globals.css</code> · Beads issue: <code>islandflow-1f5</code></p>
+      </header>
+
+      <div class="summary">
+        <h2>Summary</h2>
+        <p>
+          The terminal view now adapts more deliberately across desktop, tablet, and phone contexts. The update preserves the evidence-console density on larger screens while making controls, navigation, filters, drawers, and data lanes more usable on smaller touch devices.
+        </p>
+      </div>
+
+      <section>
+        <h2>Changes Made</h2>
+        <ul>
+          <li>Changed the tablet rail from a stacked desktop sidebar into a sticky horizontal command rail with scrollable navigation and metric strips.</li>
+          <li>Added phone-specific touch sizing for buttons, navigation links, filter controls, and pane actions.</li>
+          <li>Converted the flow filter panel and evidence drawers into bottom-sheet style surfaces on small screens.</li>
+          <li>Adjusted pane spacing, page heading scale, and table row heights to fit small screens without hiding core workflow content.</li>
+          <li>Kept dense data tables horizontally scrollable instead of crushing columns into unreadable cells.</li>
+          <li>Replaced colored side-stripe table accents with full-row inset outlines to preserve semantic color without banned side-stripe treatment.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Context</h2>
+        <p>
+          Islandflow is a product-register interface for serious traders and researchers. The relevant scene is a user moving between a desktop workstation and a smaller companion screen while monitoring live or replayed market evidence. The design keeps the dark, composed terminal atmosphere because it supports high-contrast scanning in dim, focused trading conditions.
+        </p>
+      </section>
+
+      <section>
+        <h2>Important Implementation Details</h2>
+        <ul>
+          <li>The responsive behavior remains CSS-only in <code>globals.css</code>, avoiding component churn in the large terminal module.</li>
+          <li>The <code>1180px</code> breakpoint now rethinks navigation as a horizontal rail rather than a full-width vertical block.</li>
+          <li>The <code>720px</code> breakpoint shifts to touch-first behavior with 44px minimum targets and bottom-reachable overlays.</li>
+          <li>The data tables retain their information architecture by using horizontal scroll lanes and slightly larger mobile rows.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Validation</h2>
+        <ul>
+          <li>Ran <code>bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts</code>: 64 passing tests.</li>
+          <li>Ran <code>bun --cwd=apps/web run build</code>: production Next.js build completed successfully.</li>
+          <li>Searched for banned colored side-stripe CSS patterns in the app stylesheet after the update: none found.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Issues, Limitations, and Mitigations</h2>
+        <ul>
+          <li>No real-device browser session was available in this turn, so tactile behavior was validated through CSS structure and production build checks rather than physical-device testing.</li>
+          <li>The tables intentionally remain horizontally scrollable on phones because hiding key evidence columns would damage the investigative workflow.</li>
+          <li>Bottom-sheet drawers can still cover part of the active tape on very short screens, mitigated by max-height limits and internal scrolling.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Follow-up Work</h2>
+        <p>No new follow-up issue was filed. The current adaptation is self-contained under <code>islandflow-1f5</code>.</p>
+      </section>
+    </main>
+  </body>
+</html>

docs/turns/2026-05-14-1833-reconcile-pr-conflicts.html

@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Turn Summary: Reconcile PR Conflicts</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: oklch(15% 0.012 252);
+        --panel: oklch(21% 0.014 252);
+        --panel-2: oklch(25% 0.016 252);
+        --text: oklch(93% 0.01 252);
+        --muted: oklch(72% 0.02 252);
+        --faint: oklch(61% 0.02 252);
+        --accent: oklch(78% 0.15 75);
+        --border: oklch(100% 0.006 252 / 0.12);
+      }
+
+      * { box-sizing: border-box; }
+
+      body {
+        margin: 0;
+        background:
+          radial-gradient(circle at top left, oklch(78% 0.15 75 / 0.12), transparent 28rem),
+          var(--bg);
+        color: var(--text);
+        font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        line-height: 1.55;
+      }
+
+      main {
+        width: min(920px, calc(100% - 32px));
+        margin: 0 auto;
+        padding: 48px 0 64px;
+      }
+
+      header {
+        margin-bottom: 28px;
+        padding-bottom: 18px;
+        border-bottom: 1px solid var(--border);
+      }
+
+      h1 {
+        margin: 8px 0 10px;
+        font-size: clamp(2rem, 5vw, 3.2rem);
+        line-height: 1;
+        letter-spacing: -0.04em;
+      }
+
+      h2,
+      .eyebrow {
+        color: var(--accent);
+        font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.74rem;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      h2 { margin: 0 0 10px; }
+
+      p {
+        max-width: 72ch;
+        margin: 0 0 12px;
+        color: var(--muted);
+      }
+
+      section, .summary {
+        margin-top: 18px;
+        padding: 18px;
+        border-radius: 16px;
+      }
+
+      section {
+        border: 1px solid var(--border);
+        background: linear-gradient(180deg, var(--panel-2), var(--panel));
+      }
+
+      .summary {
+        border: 1px solid oklch(78% 0.15 75 / 0.34);
+        background: oklch(78% 0.15 75 / 0.08);
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 1.2rem;
+        color: var(--muted);
+      }
+
+      li + li { margin-top: 8px; }
+
+      code {
+        color: var(--text);
+        font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.92em;
+      }
+
+      .meta {
+        color: var(--faint);
+        font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.78rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <header>
+        <div class="eyebrow">2026-05-14 18:33</div>
+        <h1>Reconcile PR Conflicts</h1>
+        <p class="meta">Branch: <code>impeccable</code> · Beads issue: <code>islandflow-t8s</code></p>
+      </header>
+
+      <div class="summary">
+        <h2>Summary</h2>
+        <p>
+          Rebasing <code>impeccable</code> onto the latest <code>main</code> exposed a conflict in <code>apps/web/app/terminal.test.ts</code>. The branch now preserves both the terminal hardening coverage from this PR and the ticker parsing coverage already present on <code>main</code>.
+        </p>
+      </div>
+
+      <section>
+        <h2>Changes Made</h2>
+        <ul>
+          <li>Rebased the PR branch onto <code>origin/main</code>.</li>
+          <li>Resolved the only manual conflict in <code>apps/web/app/terminal.test.ts</code>.</li>
+          <li>Kept both the synthetic admin visibility test and the ticker parsing helper tests.</li>
+          <li>Preserved the rest of the branch changes while letting Git auto-merge the terminal stylesheet and app shell updates.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Context</h2>
+        <p>
+          The PR already contained terminal UI hardening and responsive adaptation work. The base branch moved underneath it with additional terminal test coverage, so the conflict needed to be reconciled without dropping either set of expectations.
+        </p>
+      </section>
+
+      <section>
+        <h2>Important Implementation Details</h2>
+        <ul>
+          <li>The conflict was limited to test imports and test blocks, not runtime terminal logic.</li>
+          <li>The merged test file now imports both <code>isSyntheticAdminVisible</code> and <code>parseTickerFilterInput</code>.</li>
+          <li>An explicit <code>undefined</code> case was kept for the admin visibility helper to preserve the stricter branch-side regression coverage.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Validation</h2>
+        <ul>
+          <li>Ran <code>bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts</code>: 65 passing tests.</li>
+          <li>Ran <code>bun --cwd=apps/web run build</code>: production Next.js build completed successfully on the rebased branch.</li>
+          <li>Verified there were no remaining conflict markers in tracked project files before continuing the rebase.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Issues, Limitations, and Mitigations</h2>
+        <ul>
+          <li>The conflict resolution was test-only, so no additional UI screenshots or browser checks were needed for this turn.</li>
+          <li>The branch history changed because the fix was done via rebase, which requires pushing the updated branch tip back to the PR.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Follow-up Work</h2>
+        <p>No further follow-up was identified from this conflict resolution. The branch is ready for PR mergeability to be re-evaluated after push.</p>
+      </section>
+    </main>
+  </body>
+</html>

docs/turns/2026-05-14-harden-terminal-view.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Turn Document - Harden Terminal View</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #06080b;
+        --panel: #111820;
+        --panel-2: #0d141b;
+        --border: rgba(255, 255, 255, 0.1);
+        --text: #e6edf4;
+        --text-dim: #90a0b2;
+        --text-faint: #6e7b8c;
+        --accent: #f5a623;
+        --accent-soft: rgba(245, 166, 35, 0.14);
+        --green-soft: rgba(37, 193, 122, 0.16);
+        --red-soft: rgba(255, 107, 95, 0.16);
+        --blue-soft: rgba(77, 163, 255, 0.16);
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        font-family: "IBM Plex Sans", Inter, Arial, sans-serif;
+        background:
+          radial-gradient(circle at top left, rgba(245, 166, 35, 0.08), transparent 24%),
+          linear-gradient(180deg, #081017 0%, #05070a 100%);
+        color: var(--text);
+      }
+
+      main {
+        width: min(1040px, calc(100vw - 32px));
+        margin: 0 auto;
+        padding: 28px 0 40px;
+      }
+
+      h1,
+      h2,
+      h3,
+      p,
+      ul,
+      pre {
+        margin-top: 0;
+      }
+
+      h1,
+      h2 {
+        font-family: Quantico, "IBM Plex Sans", sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      h1 {
+        font-size: clamp(1.8rem, 3vw, 2.5rem);
+        margin-bottom: 10px;
+      }
+
+      h2 {
+        font-size: 1rem;
+        margin-bottom: 14px;
+      }
+
+      p,
+      li {
+        line-height: 1.6;
+      }
+
+      .summary,
+      .panel {
+        border: 1px solid var(--border);
+        border-radius: 16px;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
+      }
+
+      .summary {
+        padding: 24px;
+        margin-bottom: 22px;
+      }
+
+      .panel {
+        padding: 22px 24px;
+        margin-bottom: 18px;
+        background: var(--panel);
+      }
+
+      .lede,
+      .meta,
+      .note {
+        color: var(--text-dim);
+      }
+
+      .meta-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin: 16px 0 0;
+      }
+
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        min-height: 32px;
+        padding: 6px 10px;
+        border-radius: 999px;
+        border: 1px solid var(--border);
+        background: rgba(255, 255, 255, 0.03);
+        font-size: 0.82rem;
+      }
+
+      .pill-accent {
+        border-color: rgba(245, 166, 35, 0.36);
+        background: var(--accent-soft);
+        color: #ffe2aa;
+      }
+
+      .pill-good {
+        background: var(--green-soft);
+      }
+
+      .pill-info {
+        background: var(--blue-soft);
+      }
+
+      .pill-risk {
+        background: var(--red-soft);
+      }
+
+      ul {
+        padding-left: 18px;
+        margin-bottom: 0;
+      }
+
+      li + li {
+        margin-top: 8px;
+      }
+
+      code,
+      pre {
+        font-family: "IBM Plex Mono", Menlo, monospace;
+      }
+
+      code {
+        color: #ffe2aa;
+      }
+
+      pre {
+        overflow-x: auto;
+        padding: 14px;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        background: var(--panel-2);
+        color: var(--text);
+      }
+
+      .two-col {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 16px;
+      }
+
+      @media (max-width: 760px) {
+        main {
+          width: min(100vw - 20px, 1040px);
+          padding: 20px 0 28px;
+        }
+
+        .summary,
+        .panel {
+          padding: 18px;
+        }
+
+        .two-col {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="summary">
+        <h1>Harden Terminal View</h1>
+        <p class="lede">
+          Turn document for the terminal shell hardening pass in <code>apps/web/app/terminal.tsx</code>,
+          <code>apps/web/app/globals.css</code>, and <code>apps/web/app/terminal.test.ts</code>.
+        </p>
+        <p>
+          The work focused on production resilience in the main terminal shell: keyboard access, focus visibility,
+          long-text behavior, topbar wrapping, and ticker filter normalization for pasted or malformed input.
+        </p>
+        <div class="meta-row">
+          <span class="pill pill-accent">Generated: 2026-05-14 11:24 EDT</span>
+          <span class="pill pill-good">Tests: Passed</span>
+          <span class="pill pill-good">Web Build: Passed</span>
+          <span class="pill pill-info">Beads: islandflow-6ri closed</span>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h2>Summary</h2>
+        <p>
+          The terminal shell now behaves more predictably under constrained widths and less-perfect input. The
+          changes stay small and local, but improve accessibility and reduce UI breakage risk in the top-level
+          workflow.
+        </p>
+      </section>
+
+      <section class="panel">
+        <h2>Changes Made</h2>
+        <ul>
+          <li>Added a skip link targeting the main terminal content region.</li>
+          <li>Added primary navigation semantics with <code>aria-label</code> and <code>aria-current</code>.</li>
+          <li>Added visible keyboard focus treatment for nav links, shell buttons, and the instrument chip action.</li>
+          <li>Allowed topbar action groups to wrap instead of forcing overflow at narrower widths.</li>
+          <li>Added long-text hardening for the brand name and selected instrument chip.</li>
+          <li>Added ticker filter input normalization, uppercase handling, control-character cleanup, and length limits.</li>
+          <li>Added unit tests for ticker filter normalization and parsing.</li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Context</h2>
+        <p>
+          Islandflow's terminal is an evidence-first product surface used under time pressure. The shell is not a
+          decorative wrapper. It controls navigation, global filter state, and mode switching, so failures here can
+          degrade every route at once.
+        </p>
+        <p>
+          The hardening pass stayed focused on shell-level reliability rather than introducing broader layout or
+          component refactors.
+        </p>
+      </section>
+
+      <section class="panel">
+        <h2>Important Implementation Details</h2>
+        <div class="two-col">
+          <div>
+            <p>
+              The ticker filter path now normalizes paste-heavy input before it reaches state-dependent parsing.
+              This covers full-width commas, repeated whitespace, control characters, and casing drift.
+            </p>
+            <pre><code>export const normalizeTickerFilterInput = (value: string): string =&gt;
+  value
+    .normalize("NFKC")
+    .replace(/[\u0000-\u001f\u007f]+/g, " ")
+    .replace(/，/g, ",")
+    .replace(/\s+/g, " ")
+    .toUpperCase()</code></pre>
+          </div>
+          <div>
+            <p>
+              Shell semantics were strengthened without changing the route structure. The new skip link and current-page
+              annotation improve keyboard and assistive navigation while staying visually quiet during normal use.
+            </p>
+            <pre><code>&lt;a class="skip-link" href="#terminal-content"&gt;Skip to terminal content&lt;/a&gt;
+
+&lt;nav aria-label="Primary" className="terminal-nav"&gt;
+  &lt;Link aria-current={active ? "page" : undefined} ... /&gt;
+&lt;/nav&gt;</code></pre>
+          </div>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h2>Validation</h2>
+        <ul>
+          <li><code>bun test apps/web/app/terminal.test.ts</code> passed.</li>
+          <li><code>bun --cwd=apps/web run build</code> passed.</li>
+          <li>Regression coverage was added for normalization and token parsing of ticker input.</li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Issues, Limitations, and Mitigations</h2>
+        <ul>
+          <li>
+            <strong>Dolt sync limitation:</strong> <code>bd dolt pull</code> failed earlier in the session because no Dolt
+            remote is configured in this workspace. The code work continued, but beads remote sync was not available.
+          </li>
+          <li>
+            <strong>Scope control:</strong> this pass hardened the shell only. It did not audit every downstream pane,
+            drawer, or popover for similar edge cases.
+          </li>
+          <li>
+            <strong>Workflow status:</strong> this document records the implementation and validation, but the work was not
+            committed or pushed as part of this turn.
+          </li>
+        </ul>
+      </section>
+
+      <section class="panel">
+        <h2>Follow-up Work</h2>
+        <ul>
+          <li>No follow-up issue was created from this hardening pass beyond the completed beads item <code>islandflow-6ri</code>.</li>
+          <li>If terminal adaptation work continues, the next pass should examine small-screen drawer behavior and popover placement under dense live states.</li>
+        </ul>
+        <p class="note">
+          Document created to satisfy the required turn-documentation step for implementation changes.
+        </p>
+      </section>
+    </main>
+  </body>
+</html>

docs/turns/2026-05-15-quiet-terminal-view.html

@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>2026-05-15 Quiet Terminal View</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #0d1117;
+        --panel: #161b22;
+        --text: #e6edf3;
+        --muted: #9fb0c2;
+        --border: rgba(255,255,255,0.12);
+        --accent: #d9a441;
+      }
+      body {
+        margin: 0;
+        padding: 32px;
+        font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        background: var(--bg);
+        color: var(--text);
+      }
+      main {
+        max-width: 860px;
+        margin: 0 auto;
+      }
+      h1, h2 { line-height: 1.15; }
+      h1 { margin-top: 0; }
+      section {
+        margin: 24px 0;
+        padding: 20px 22px;
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        background: var(--panel);
+      }
+      p, li { color: var(--muted); }
+      strong { color: var(--text); }
+      code, pre {
+        font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      pre {
+        overflow: auto;
+        padding: 14px;
+        border-radius: 10px;
+        background: rgba(0,0,0,0.22);
+        border: 1px solid rgba(255,255,255,0.08);
+      }
+      .summary {
+        border-left: 4px solid var(--accent);
+        padding-left: 16px;
+        margin-bottom: 24px;
+      }
+      ul { padding-left: 20px; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Quiet Terminal View</h1>
+      <p class="summary"><strong>Summary:</strong> Reduced chrome intensity across the Islandflow terminal by flattening backgrounds, softening amber usage, calming pane and overlay styling, and reducing motion emphasis so live data carries more of the visual weight.</p>
+
+      <section>
+        <h2>Summary</h2>
+        <p>The terminal now reads as a calmer product surface. The shell keeps its dark evidence-console identity, but the background texture, active-state glow, and overlay treatments no longer compete with the tape.</p>
+      </section>
+
+      <section>
+        <h2>Changes Made</h2>
+        <ul>
+          <li>Moved core surface tokens in <code>apps/web/app/globals.css</code> to a quieter OKLCH palette.</li>
+          <li>Removed the visible shell grid texture and reduced ambient chrome contrast.</li>
+          <li>Flattened the rail, top bar, panes, lists, tables, drawers, filter popover, and synthetic control drawer.</li>
+          <li>Reduced amber wash on active buttons, filters, chips, and selected states.</li>
+          <li>Lowered the visual intensity of classified rows and semantic row outlines without removing meaning.</li>
+          <li>Switched secondary panel titles and control headings to calmer sans-serif treatment.</li>
+          <li>Added a reduced-motion rule to stop the connecting pulse when the user prefers reduced motion.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Context</h2>
+        <p>Product context and design context were loaded from <code>PRODUCT.md</code> and <code>DESIGN.md</code>. This is a product-register surface, so the goal was not to make the terminal decorative in a different way. The goal was to let the tool disappear further into the task.</p>
+        <p>Scene sentence used to anchor the theme choice: <strong>a trader is scanning live tape on a large monitor in a dim room before the open, trying to stay focused on evidence instead of chrome.</strong></p>
+      </section>
+
+      <section>
+        <h2>Important Implementation Details</h2>
+        <p>The main refinement was structural, not cosmetic. Instead of adding a new style layer, the change removes or softens existing intensity sources.</p>
+        <pre><code>:root {
+  --bg: oklch(0.12 0.01 250);
+  --bg-pane: oklch(0.18 0.013 250);
+  --accent: oklch(0.78 0.12 74);
+  --accent-soft: oklch(0.78 0.12 74 / 0.1);
+}
+
+.terminal-shell {
+  background: linear-gradient(180deg, oklch(0.14 0.011 250) 0%, oklch(0.11 0.01 250) 100%);
+}
+
+.terminal-pane-title {
+  font-family: var(--font-sans), sans-serif;
+  font-size: 0.94rem;
+  font-weight: 600;
+}</code></pre>
+        <p>Classifier and severity rows still carry semantic feedback, but with reduced fill and border intensity so they highlight evidence instead of reading like alerts by default.</p>
+      </section>
+
+      <section>
+        <h2>Validation</h2>
+        <ul>
+          <li><code>bun test apps/web/app/terminal.test.ts</code></li>
+          <li><code>bun --cwd=apps/web run build</code></li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Issues, Limitations, and Mitigations</h2>
+        <ul>
+          <li>This pass is CSS-only, so it does not change layout structure or information density.</li>
+          <li>Some semantic chips still use stronger color than the surrounding chrome. That is intentional so status remains scannable.</li>
+          <li>No screenshot-based review was captured in this turn, so final visual tuning may still benefit from a quick browser pass.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Follow-up Work</h2>
+        <ul>
+          <li>No follow-up issue created in this turn beyond the main work item.</li>
+          <li>If further quieting is wanted, the next pass should evaluate typography density inside tables and rail metrics rather than further reducing contrast globally.</li>
+        </ul>
+      </section>
+    </main>
+  </body>
+</html>