dirtydishes/islandflow
1
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions 1

Quiet terminal view chrome

Browse source
This commit is contained in:
dirtydishes 2026-05-15 08:13:17 -04:00
parent e19272d39a
commit 274efac2dd
3 changed files with 314 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.beads/issues.jsonl
View file

@ -8,6 +8,8 @@
{"_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-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-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-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-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-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-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}

344
apps/web/app/globals.css
View file

@ -1,23 +1,23 @@
:root { :root {
color-scheme: dark; color-scheme: dark;
--bg: #06080b; --bg: oklch(0.12 0.01 250);
--bg-elevated: #0b1016; --bg-elevated: oklch(0.15 0.012 250);
--bg-pane: #111820; --bg-pane: oklch(0.18 0.013 250);
--bg-pane-2: #0d141b; --bg-pane-2: oklch(0.16 0.012 250);
--bg-soft: rgba(255, 255, 255, 0.03); --bg-soft: oklch(0.97 0.008 250 / 0.035);
--border: rgba(255, 255, 255, 0.08); --border: oklch(0.72 0.012 250 / 0.16);
--border-strong: rgba(255, 177, 48, 0.35); --border-strong: oklch(0.78 0.09 74 / 0.28);
--text: #e6edf4; --text: oklch(0.93 0.014 250);
--text-dim: #90a0b2; --text-dim: oklch(0.74 0.018 250);
--text-faint: #6e7b8c; --text-faint: oklch(0.59 0.016 250);
--accent: #f5a623; --accent: oklch(0.78 0.12 74);
--accent-soft: rgba(245, 166, 35, 0.12); --accent-soft: oklch(0.78 0.12 74 / 0.1);
--green: #25c17a; --green: oklch(0.74 0.13 151);
--green-soft: rgba(37, 193, 122, 0.12); --green-soft: oklch(0.74 0.13 151 / 0.1);
--red: #ff6b5f; --red: oklch(0.68 0.16 28);
--red-soft: rgba(255, 107, 95, 0.14); --red-soft: oklch(0.68 0.16 28 / 0.12);
--blue: #4da3ff; --blue: oklch(0.72 0.13 247);
--blue-soft: rgba(77, 163, 255, 0.14); --blue-soft: oklch(0.72 0.13 247 / 0.11);
--rail-width: 236px; --rail-width: 236px;
--topbar-height: 64px; --topbar-height: 64px;
} }
@ -37,8 +37,8 @@ body {
font-family: var(--font-sans), sans-serif; font-family: var(--font-sans), sans-serif;
color: var(--text); color: var(--text);
background: background:
radial-gradient(circle at top left, rgba(245, 166, 35, 0.12), transparent 26%), radial-gradient(circle at top left, oklch(0.78 0.12 74 / 0.08), transparent 30%),
linear-gradient(180deg, #081017 0%, #05070a 100%); linear-gradient(180deg, oklch(0.15 0.012 250) 0%, oklch(0.11 0.01 250) 100%);
} }
a { a {
@ -89,23 +89,18 @@ input {
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
grid-template-columns: var(--rail-width) minmax(0, 1fr); grid-template-columns: var(--rail-width) minmax(0, 1fr);
background: background: linear-gradient(180deg, oklch(0.14 0.011 250) 0%, oklch(0.11 0.01 250) 100%);
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%),
var(--bg);
background-size: 32px 32px, 32px 32px, 100% 100%, auto;
} }
.terminal-rail { .terminal-rail {
position: sticky; position: sticky;
top: 0; top: 0;
height: 100vh; height: 100vh;
padding: 24px 18px; padding: 22px 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 20px;
background: linear-gradient(180deg, rgba(11, 16, 22, 0.96), rgba(6, 8, 11, 0.98)); background: linear-gradient(180deg, oklch(0.16 0.012 250 / 0.98), oklch(0.13 0.011 250 / 0.98));
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
} }
@ -116,23 +111,23 @@ input {
.terminal-brand-kicker { .terminal-brand-kicker {
font-family: var(--font-display), sans-serif; font-family: var(--font-display), sans-serif;
font-size: 0.78rem; font-size: 0.72rem;
letter-spacing: 0.24em; letter-spacing: 0.22em;
color: var(--accent); color: oklch(0.78 0.11 74 / 0.8);
} }
.terminal-brand-name { .terminal-brand-name {
min-width: 0; min-width: 0;
font-family: var(--font-display), sans-serif; font-family: var(--font-display), sans-serif;
font-size: 1.8rem; font-size: 1.56rem;
letter-spacing: 0.08em; letter-spacing: 0.07em;
text-transform: uppercase; text-transform: uppercase;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.terminal-nav { .terminal-nav {
display: grid; display: grid;
gap: 6px; gap: 8px;
} }
.terminal-nav-link { .terminal-nav-link {
@ -141,11 +136,11 @@ input {
padding: 12px 14px; padding: 12px 14px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 10px; border-radius: 10px;
color: var(--text-dim); color: var(--text-faint);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.12em; letter-spacing: 0.14em;
font-size: 0.78rem; font-size: 0.76rem;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
} }
.terminal-nav-link:hover { .terminal-nav-link:hover {
@ -157,27 +152,27 @@ input {
.terminal-nav-link:focus-visible, .terminal-nav-link:focus-visible,
.terminal-button:focus-visible, .terminal-button:focus-visible,
.instrument-focus-chip button:focus-visible { .instrument-focus-chip button:focus-visible {
outline: 2px solid rgba(255, 216, 154, 0.88); outline: 2px solid oklch(0.83 0.08 74 / 0.82);
outline-offset: 2px; outline-offset: 2px;
} }
.terminal-nav-link-active { .terminal-nav-link-active {
border-color: var(--border-strong); border-color: var(--border-strong);
color: var(--text); color: var(--text);
background: linear-gradient(90deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.04)); background: var(--accent-soft);
} }
.shell-metrics { .shell-metrics {
margin-top: auto; margin-top: auto;
display: grid; display: grid;
gap: 10px; gap: 8px;
} }
.shell-metric { .shell-metric {
padding: 12px 14px; padding: 11px 13px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02); background: var(--bg-soft);
} }
.shell-metric-label, .shell-metric-label,
@ -216,8 +211,7 @@ input {
justify-content: flex-end; justify-content: flex-end;
gap: 12px; gap: 12px;
padding: 10px 20px; padding: 10px 20px;
background: rgba(7, 10, 14, 0.92); background: oklch(0.15 0.012 250 / 0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
@ -318,14 +312,14 @@ input {
.terminal-filter-field::before { .terminal-filter-field::before {
height: 1px; height: 1px;
background: linear-gradient(90deg, rgba(245, 166, 35, 0.88), rgba(245, 166, 35, 0.14)); background: var(--border);
opacity: 0.72; opacity: 1;
} }
.terminal-filter-field::after { .terminal-filter-field::after {
height: 2px; height: 2px;
background: linear-gradient(90deg, rgba(255, 216, 154, 0.98), rgba(245, 166, 35, 0.92)); background: var(--accent);
transform: scaleX(0.18); transform: scaleX(0.12);
transform-origin: left center; transform-origin: left center;
opacity: 0; opacity: 0;
} }
@ -339,34 +333,31 @@ input {
background: transparent; background: transparent;
color: var(--text); color: var(--text);
font-family: var(--font-mono), monospace; font-family: var(--font-mono), monospace;
font-size: 0.92rem; font-size: 0.9rem;
font-weight: 600; font-weight: 500;
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
.terminal-input::placeholder { .terminal-input::placeholder {
color: rgba(193, 203, 224, 0.58); color: oklch(0.7 0.014 250 / 0.72);
font-size: 0.86rem; font-size: 0.84rem;
} }
.terminal-filter:focus-within .terminal-filter-label { .terminal-filter:focus-within .terminal-filter-label {
color: #ffd89a; color: var(--text-dim);
} }
.terminal-filter:focus-within .terminal-filter-field::before { .terminal-filter:focus-within .terminal-filter-field::before {
background: linear-gradient(90deg, rgba(255, 216, 154, 0.9), rgba(245, 166, 35, 0.26)); background: oklch(0.74 0.02 250 / 0.32);
opacity: 0.94;
} }
.terminal-filter:focus-within .terminal-filter-field::after { .terminal-filter:focus-within .terminal-filter-field::after {
transform: scaleX(1); transform: scaleX(1);
opacity: 1; opacity: 1;
box-shadow: 0 0 18px rgba(245, 166, 35, 0.34);
} }
.terminal-filter:focus-within .terminal-input { .terminal-filter:focus-within .terminal-input {
color: #fff1cf; color: var(--text);
text-shadow: 0 0 14px rgba(245, 166, 35, 0.16);
} }
.terminal-input:focus-visible, .terminal-input:focus-visible,
@ -386,7 +377,7 @@ input {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 8px 10px; padding: 8px 10px;
background: rgba(255, 255, 255, 0.03); background: var(--bg-soft);
color: var(--text); color: var(--text);
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
@ -406,8 +397,8 @@ input {
.overlay-toggle.overlay-toggle-on, .overlay-toggle.overlay-toggle-on,
.mode-button { .mode-button {
border-color: var(--border-strong); border-color: var(--border-strong);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.08)); background: var(--accent-soft);
color: #ffd89a; color: var(--text);
} }
.instrument-focus-chip { .instrument-focus-chip {
@ -418,13 +409,13 @@ input {
min-height: 32px; min-height: 32px;
max-width: min(360px, 32vw); max-width: min(360px, 32vw);
padding: 5px 8px 5px 10px; padding: 5px 8px 5px 10px;
border: 1px solid rgba(255, 216, 154, 0.34); border: 1px solid var(--border-strong);
border-radius: 8px; border-radius: 8px;
background: rgba(245, 166, 35, 0.08); background: oklch(0.78 0.12 74 / 0.07);
color: #ffe2aa; color: var(--text);
font-family: var(--font-mono), monospace; font-family: var(--font-mono), monospace;
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 600;
} }
.instrument-focus-chip span { .instrument-focus-chip span {
@ -445,7 +436,7 @@ input {
.instrument-focus-chip button { .instrument-focus-chip button {
padding: 4px 6px; padding: 4px 6px;
color: var(--text-muted); color: var(--text-faint);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
font-size: 0.62rem; font-size: 0.62rem;
@ -455,13 +446,13 @@ input {
padding: 0; padding: 0;
text-align: inherit; text-align: inherit;
text-decoration: underline; text-decoration: underline;
text-decoration-color: rgba(255, 216, 154, 0.36); text-decoration-color: var(--border-strong);
text-underline-offset: 3px; text-underline-offset: 3px;
} }
.instrument-cell-button:hover, .instrument-cell-button:hover,
.instrument-cell-button:focus-visible { .instrument-cell-button:focus-visible {
color: #ffd89a; color: var(--text);
outline: none; outline: none;
} }
@ -498,7 +489,8 @@ h3 {
} }
.page-title { .page-title {
font-size: clamp(2rem, 3vw, 2.8rem); font-size: clamp(1.75rem, 2.4vw, 2.3rem);
letter-spacing: 0.06em;
} }
.page-actions { .page-actions {
@ -524,9 +516,9 @@ h3 {
} }
.contract-filter-button.is-active { .contract-filter-button.is-active {
border-color: rgba(245, 166, 35, 0.55); border-color: var(--border-strong);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.07)); background: var(--accent-soft);
color: #ffe2aa; color: var(--text);
} }
.flow-filter-popover { .flow-filter-popover {
@ -540,16 +532,16 @@ h3 {
} }
.flow-filter-trigger.is-active { .flow-filter-trigger.is-active {
border-color: rgba(245, 166, 35, 0.55); border-color: var(--border-strong);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.07)); background: var(--accent-soft);
} }
.flow-filter-badge { .flow-filter-badge {
min-width: 22px; min-width: 22px;
padding: 2px 6px; padding: 2px 6px;
border-radius: 999px; border-radius: 999px;
background: rgba(245, 166, 35, 0.22); background: oklch(0.78 0.12 74 / 0.16);
color: #ffe4b3; color: var(--text);
font-family: var(--font-mono), monospace; font-family: var(--font-mono), monospace;
font-size: 0.7rem; font-size: 0.7rem;
text-align: center; text-align: center;
@ -563,15 +555,10 @@ h3 {
width: min(420px, calc(100vw - 72px)); width: min(420px, calc(100vw - 72px));
max-height: min(70vh, 560px); max-height: min(70vh, 560px);
overflow: auto; overflow: auto;
border: 1px solid rgba(245, 166, 35, 0.24); border: 1px solid var(--border);
border-radius: 18px; border-radius: 16px;
background: background: oklch(0.16 0.012 250 / 0.98);
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), box-shadow: 0 24px 54px rgba(0, 0, 0, 0.32);
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);
} }
.flow-filter-popover-head { .flow-filter-popover-head {
@ -580,12 +567,13 @@ h3 {
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 16px 16px 14px; padding: 16px 16px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid var(--border);
} }
.flow-filter-popover-title { .flow-filter-popover-title {
font-family: var(--font-display), sans-serif; font-family: var(--font-sans), sans-serif;
font-size: 0.9rem; font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.12em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -606,14 +594,14 @@ h3 {
display: grid; display: grid;
gap: 10px; gap: 10px;
padding: 12px; padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--border);
border-radius: 14px; border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.1)); background: var(--bg-soft);
} }
.flow-filter-section-title { .flow-filter-section-title {
color: #ffd89a; color: var(--text-dim);
font-size: 0.72rem; font-size: 0.7rem;
letter-spacing: 0.18em; letter-spacing: 0.18em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -635,9 +623,9 @@ h3 {
gap: 8px; gap: 8px;
min-height: 42px; min-height: 42px;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.02); background: var(--bg-soft);
font-size: 0.82rem; font-size: 0.82rem;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; cursor: pointer;
@ -651,7 +639,7 @@ h3 {
.filter-chip { .filter-chip {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
background: rgba(255, 255, 255, 0.03); background: var(--bg-soft);
color: var(--text); color: var(--text);
min-height: 42px; min-height: 42px;
padding: 8px 12px; padding: 8px 12px;
@ -661,9 +649,9 @@ h3 {
} }
.filter-chip.is-active { .filter-chip.is-active {
border-color: rgba(245, 166, 35, 0.45); border-color: var(--border-strong);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.07)); background: var(--accent-soft);
color: #ffe4b3; color: var(--text);
} }
.replay-matrix { .replay-matrix {
@ -677,7 +665,7 @@ h3 {
padding: 14px 16px; padding: 14px 16px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)); background: var(--bg-soft);
} }
.page-grid { .page-grid {
@ -722,9 +710,7 @@ h3 {
flex-direction: column; flex-direction: column;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 14px; border-radius: 14px;
background: background: var(--bg-pane);
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
var(--bg-pane);
overflow: hidden; overflow: hidden;
} }
@ -733,9 +719,9 @@ h3 {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 16px 18px; padding: 15px 18px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02); background: oklch(0.2 0.012 250 / 0.38);
} }
.terminal-pane-title-row { .terminal-pane-title-row {
@ -746,7 +732,10 @@ h3 {
} }
.terminal-pane-title { .terminal-pane-title {
font-size: 1rem; font-family: var(--font-sans), sans-serif;
font-size: 0.94rem;
font-weight: 600;
letter-spacing: 0.08em;
} }
.terminal-pane-status { .terminal-pane-status {
@ -810,7 +799,7 @@ h3 {
height: 460px; height: 460px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: #0b1218; background: var(--bg-pane-2);
overflow: hidden; overflow: hidden;
} }
@ -918,7 +907,7 @@ h3 {
padding-right: 8px; padding-right: 8px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.09)); background: var(--bg-pane-2);
align-self: stretch; align-self: stretch;
} }
@ -980,7 +969,7 @@ h3 {
padding: 14px 16px; padding: 14px 16px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018)); background: var(--bg-soft);
} }
.row-button { .row-button {
@ -990,8 +979,8 @@ h3 {
} }
.row-button:hover { .row-button:hover {
border-color: rgba(245, 166, 35, 0.25); border-color: var(--border-strong);
background: linear-gradient(180deg, rgba(245, 166, 35, 0.07), rgba(255, 255, 255, 0.018)); background: oklch(0.78 0.12 74 / 0.05);
} }
.data-table-shell, .data-table-shell,
@ -1011,7 +1000,7 @@ h3 {
overflow-y: hidden; overflow-y: hidden;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: rgba(5, 8, 12, 0.42); background: oklch(0.14 0.01 250 / 0.72);
} }
.data-table { .data-table {
@ -1070,8 +1059,8 @@ h3 {
flex: 0 0 auto; flex: 0 0 auto;
height: 30px; height: 30px;
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.095); border-bottom: 1px solid oklch(0.72 0.012 250 / 0.12);
background: rgba(8, 11, 16, 0.98); background: oklch(0.15 0.012 250 / 0.96);
color: var(--text-faint); color: var(--text-faint);
font-size: 0.64rem; font-size: 0.64rem;
font-weight: 700; font-weight: 700;
@ -1083,15 +1072,15 @@ h3 {
height: 40px; height: 40px;
padding: 0 10px; padding: 0 10px;
border: 0; border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.055); border-bottom: 1px solid oklch(0.72 0.012 250 / 0.08);
background: rgba(255, 255, 255, 0.008); background: oklch(0.98 0.008 250 / 0.008);
color: inherit; color: inherit;
font: inherit; font: inherit;
text-align: left; text-align: left;
} }
.data-table-row.is-even { .data-table-row.is-even {
background: rgba(255, 255, 255, 0.022); background: oklch(0.98 0.008 250 / 0.018);
} }
.data-table-virtual-row { .data-table-virtual-row {
@ -1104,7 +1093,7 @@ h3 {
.data-table-row:hover, .data-table-row:hover,
.data-table-row:focus-visible { .data-table-row:focus-visible {
outline: none; outline: none;
background: rgba(245, 166, 35, 0.055); background: oklch(0.78 0.12 74 / 0.05);
} }
.data-table-row-button { .data-table-row-button {
@ -1128,35 +1117,35 @@ h3 {
.data-table-row-classified { .data-table-row-classified {
background: background:
linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.02 + var(--classifier-intensity, 0) * 0.12)), transparent 62%), linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.012 + var(--classifier-intensity, 0) * 0.06)), transparent 62%),
rgba(255, 255, 255, 0.008); oklch(0.98 0.008 250 / 0.008);
} }
.data-table-row-classified:hover, .data-table-row-classified:hover,
.data-table-row-classified:focus-visible { .data-table-row-classified:focus-visible {
background: background:
linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.04 + var(--classifier-intensity, 0) * 0.18)), transparent 68%), linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.02 + var(--classifier-intensity, 0) * 0.1)), transparent 68%),
rgba(245, 166, 35, 0.04); oklch(0.78 0.12 74 / 0.035);
} }
.data-table-row-classified.is-classified { .data-table-row-classified.is-classified {
box-shadow: inset 0 0 0 1px rgba(var(--classifier-rgb), calc(0.28 + var(--classifier-intensity) * 0.24)); box-shadow: inset 0 0 0 1px rgba(var(--classifier-rgb), calc(0.16 + var(--classifier-intensity) * 0.12));
} }
.data-table-row-warn, .data-table-row-warn,
.data-table-row-severity-high, .data-table-row-severity-high,
.data-table-row-direction-bearish { .data-table-row-direction-bearish {
box-shadow: inset 0 0 0 1px rgba(255, 107, 95, 0.46); box-shadow: inset 0 0 0 1px oklch(0.68 0.16 28 / 0.32);
} }
.data-table-row-severity-medium, .data-table-row-severity-medium,
.data-table-row-direction-neutral { .data-table-row-direction-neutral {
box-shadow: inset 0 0 0 1px rgba(77, 163, 255, 0.36); box-shadow: inset 0 0 0 1px oklch(0.72 0.13 247 / 0.24);
} }
.data-table-row-severity-low, .data-table-row-severity-low,
.data-table-row-direction-bullish { .data-table-row-direction-bullish {
box-shadow: inset 0 0 0 1px rgba(37, 193, 122, 0.38); box-shadow: inset 0 0 0 1px oklch(0.74 0.13 151 / 0.26);
} }
.data-table-options .data-table-head, .data-table-options .data-table-head,
@ -1228,8 +1217,8 @@ h3 {
height: 30px; height: 30px;
padding: 0 8px; padding: 0 8px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: rgba(8, 11, 16, 0.98); background: oklch(0.15 0.012 250 / 0.96);
color: var(--muted); color: var(--text-faint);
font-size: 0.64rem; font-size: 0.64rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@ -1247,10 +1236,10 @@ h3 {
min-height: 34px; min-height: 34px;
padding: 0 8px; padding: 0 8px;
border: 0; border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.055); border-bottom: 1px solid oklch(0.72 0.012 250 / 0.08);
background: background:
linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.02 + var(--classifier-intensity, 0) * 0.12)), transparent 62%), linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.012 + var(--classifier-intensity, 0) * 0.06)), transparent 62%),
rgba(255, 255, 255, 0.012); oklch(0.98 0.008 250 / 0.012);
color: inherit; color: inherit;
font: inherit; font: inherit;
text-align: left; text-align: left;
@ -1260,13 +1249,13 @@ h3 {
.options-table-row:focus-visible { .options-table-row:focus-visible {
outline: none; outline: none;
background: background:
linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.04 + var(--classifier-intensity, 0) * 0.18)), transparent 68%), linear-gradient(90deg, rgba(var(--classifier-rgb, 192, 200, 210), calc(0.02 + var(--classifier-intensity, 0) * 0.1)), transparent 68%),
rgba(255, 255, 255, 0.03); oklch(0.78 0.12 74 / 0.03);
} }
.options-table-row.is-classified { .options-table-row.is-classified {
cursor: pointer; cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(var(--classifier-rgb), calc(0.28 + var(--classifier-intensity) * 0.24)); box-shadow: inset 0 0 0 1px rgba(var(--classifier-rgb), calc(0.16 + var(--classifier-intensity) * 0.12));
} }
.options-table-row > span { .options-table-row > span {
@ -1318,7 +1307,7 @@ h3 {
.notional-emphasis { .notional-emphasis {
font-weight: 700; font-weight: 700;
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: #ffe08c; color: var(--accent);
} }
.condition-chip { .condition-chip {
@ -1484,7 +1473,7 @@ h3 {
overflow: hidden; overflow: hidden;
border-radius: 999px; border-radius: 999px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03); background: var(--bg-soft);
} }
.strip-segment { .strip-segment {
@ -1533,7 +1522,7 @@ h3 {
padding: 18px; padding: 18px;
border-radius: 12px; border-radius: 12px;
border: 1px dashed var(--border); border: 1px dashed var(--border);
background: rgba(255, 255, 255, 0.02); background: var(--bg-soft);
color: var(--text-dim); color: var(--text-dim);
} }
@ -1546,9 +1535,9 @@ h3 {
overflow: auto; overflow: auto;
padding: 18px; padding: 18px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(245, 166, 35, 0.2); border: 1px solid var(--border);
background: rgba(7, 10, 14, 0.97); background: oklch(0.16 0.012 250 / 0.98);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
z-index: 40; z-index: 40;
} }
@ -1561,20 +1550,20 @@ h3 {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid rgba(245, 166, 35, 0.24); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
background: rgba(9, 13, 18, 0.96); background: oklch(0.16 0.012 250 / 0.96);
color: var(--accent); color: var(--text-dim);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
z-index: 45; z-index: 45;
transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease; transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
} }
.synthetic-control-gear:hover, .synthetic-control-gear:hover,
.synthetic-control-gear.is-open { .synthetic-control-gear.is-open {
transform: translateY(-1px); border-color: var(--border-strong);
border-color: rgba(245, 166, 35, 0.4); background: var(--bg-elevated);
background: rgba(12, 18, 24, 0.98); color: var(--text);
} }
.synthetic-control-gear-mark { .synthetic-control-gear-mark {
@ -1595,11 +1584,9 @@ h3 {
align-content: start; align-content: start;
gap: 16px; gap: 16px;
overflow: auto; overflow: auto;
border-left: 1px solid rgba(245, 166, 35, 0.18); border-left: 1px solid var(--border);
background: background: oklch(0.15 0.012 250 / 0.98);
linear-gradient(180deg, rgba(245, 166, 35, 0.04), transparent 18%), box-shadow: -16px 0 42px rgba(0, 0, 0, 0.26);
rgba(6, 9, 13, 0.98);
box-shadow: -18px 0 50px rgba(0, 0, 0, 0.34);
z-index: 42; z-index: 42;
} }
@ -1612,18 +1599,19 @@ h3 {
.synthetic-control-header h3 { .synthetic-control-header h3 {
margin: 0; margin: 0;
font-size: 1rem; font-family: var(--font-sans), sans-serif;
letter-spacing: 0.04em; font-size: 0.94rem;
font-weight: 600;
letter-spacing: 0.08em;
} }
.synthetic-control-kicker { .synthetic-control-kicker {
margin: 0 0 6px; margin: 0 0 6px;
color: var(--accent); color: var(--text-dim);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.16em; letter-spacing: 0.16em;
font-size: 0.64rem; font-size: 0.64rem;
} }
.synthetic-control-section { .synthetic-control-section {
display: grid; display: grid;
gap: 10px; gap: 10px;
@ -1652,7 +1640,7 @@ h3 {
padding: 10px 12px; padding: 10px 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
background: rgba(255, 255, 255, 0.03); background: var(--bg-soft);
color: var(--text); color: var(--text);
} }
@ -1677,13 +1665,13 @@ h3 {
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.02); background: var(--bg-soft);
color: var(--text-dim); color: var(--text-dim);
} }
.synthetic-segment.is-active { .synthetic-segment.is-active {
border-color: rgba(245, 166, 35, 0.44); border-color: var(--border-strong);
background: rgba(245, 166, 35, 0.12); background: var(--accent-soft);
color: var(--text); color: var(--text);
} }
@ -1732,7 +1720,7 @@ h3 {
} }
.synthetic-control-disabled-label { .synthetic-control-disabled-label {
color: var(--accent); color: var(--text-dim);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.14em; letter-spacing: 0.14em;
font-size: 0.68rem; font-size: 0.68rem;
@ -1753,7 +1741,7 @@ h3 {
.drawer-eyebrow { .drawer-eyebrow {
margin: 0 0 6px; margin: 0 0 6px;
font-size: 0.68rem; font-size: 0.68rem;
color: var(--accent); color: var(--text-dim);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.14em; letter-spacing: 0.14em;
} }
@ -1788,7 +1776,7 @@ h3 {
padding: 12px 14px; padding: 12px 14px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border); border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02); background: var(--bg-soft);
} }
@keyframes pulse { @keyframes pulse {
@ -1803,6 +1791,30 @@ h3 {
} }
} }
@media (prefers-reduced-motion: reduce) {
.skip-link,
.terminal-nav-link,
.terminal-filter-field::before,
.terminal-filter-field::after,
.terminal-button,
.mode-button,
.filter-clear,
.jump-button,
.pause-button,
.interval-button,
.overlay-toggle,
.drawer-close,
.status-inline-counter,
.missed-count,
.synthetic-control-gear {
transition: none;
}
.chart-status-connecting .chart-dot {
animation: none;
}
}
@media (max-width: 1180px) { @media (max-width: 1180px) {
.terminal-shell { .terminal-shell {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -2198,7 +2210,7 @@ h3 {
right: 14px; right: 14px;
bottom: 68px; bottom: 68px;
width: auto; width: auto;
border: 1px solid rgba(245, 166, 35, 0.16); border: 1px solid var(--border);
border-radius: 14px; border-radius: 14px;
} }
} }

134
docs/turns/2026-05-15-quiet-terminal-view.html Normal file
View file

@ -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>