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

polish terminal view

Browse source
This commit is contained in:
dirtydishes 2026-05-17 11:25:31 -04:00
parent cd0a1dd9e5
commit bf75ef344c
2 changed files with 279 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

182
docs/turns/2026-05-17-1123-polish-terminal-view.html Normal file
View file

@ -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>2026-05-17 11:23, Polish Terminal View</title>
<style>
:root {
color-scheme: dark;
--bg: oklch(0.13 0.012 250);
--panel: oklch(0.18 0.014 250);
--panel-soft: oklch(0.22 0.014 250);
--border: oklch(0.72 0.012 250 / 0.18);
--text: oklch(0.93 0.014 250);
--muted: oklch(0.73 0.018 250);
--faint: oklch(0.58 0.016 250);
--accent: oklch(0.78 0.12 74);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background:
radial-gradient(circle at 12% 0%, oklch(0.78 0.12 74 / 0.09), transparent 30rem),
linear-gradient(180deg, oklch(0.15 0.012 250), var(--bg));
color: var(--text);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.55;
}
main {
width: min(920px, calc(100vw - 32px));
margin: 0 auto;
padding: 48px 0 64px;
}
header {
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.kicker,
h2 {
color: var(--accent);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
h1 {
max-width: 760px;
margin: 8px 0 12px;
font-size: 2rem;
line-height: 1.1;
letter-spacing: 0;
}
h2 {
margin: 0 0 10px;
}
p {
max-width: 74ch;
margin: 0 0 12px;
color: var(--muted);
}
section {
margin-top: 18px;
padding: 18px;
border: 1px solid var(--border);
border-radius: 12px;
background: linear-gradient(180deg, var(--panel-soft), var(--panel));
}
ul {
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
}
li + li {
margin-top: 8px;
}
code {
color: var(--text);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.92em;
}
.summary {
color: var(--text);
font-size: 1.04rem;
}
</style>
</head>
<body>
<main>
<header>
<div class="kicker">Turn Document, 2026-05-17 11:23 ET</div>
<h1>Polish Terminal View</h1>
<p class="summary">
Refined the Islandflow web terminal shell so the Tape view feels more deliberate, more keyboard-readable, and more stable across desktop and mobile.
</p>
</header>
<section>
<h2>Summary</h2>
<p>
This was a focused product polish pass on <code>apps/web/app/globals.css</code>. The work stayed inside the established Islandflow terminal design language: dark operational surfaces, scarce amber emphasis, compact controls, and clear evidence-console states.
</p>
</section>
<section>
<h2>Changes Made</h2>
<ul>
<li>Added a shared terminal easing token for consistent, restrained interaction transitions.</li>
<li>Styled scrollbars to match the terminal surface instead of falling back to browser defaults.</li>
<li>Improved nav, button, and active-control hover and pressed states using the existing OKLCH palette.</li>
<li>Refined shell metrics, pane headers, table shells, row focus states, and empty states for clearer hierarchy.</li>
<li>Adjusted mobile metric cards and Tape action controls so they align cleanly without horizontal page overflow.</li>
</ul>
</section>
<section>
<h2>Context</h2>
<p>
Islandflow is a serious market-data terminal for traders and researchers. The polish target was product UI, not brand theater, so the changes prioritize trust, legibility, predictable controls, and stable responsive structure.
</p>
</section>
<section>
<h2>Important Implementation Details</h2>
<ul>
<li>All new color work uses existing OKLCH roles and keeps amber as a scarce signal rather than a decorative wash.</li>
<li>Keyboard focus on table rows and instrument buttons is now visible without introducing layout shift.</li>
<li>Mobile shell metrics now use a two-column grid, and page actions stretch to the viewport width.</li>
<li>The polish is CSS-only, so no data contracts, route behavior, or live-stream logic changed.</li>
</ul>
</section>
<section>
<h2>Expected Impact for End-Users</h2>
<p>
Users should experience a terminal that reads as more finished under pressure: clearer controls, cleaner empty states, better keyboard affordances, and less visual friction on narrow screens.
</p>
</section>
<section>
<h2>Validation</h2>
<ul>
<li><code>bun install</code> completed to restore missing workspace dependencies.</li>
<li><code>bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts</code> passed with 69 tests.</li>
<li><code>bun --cwd=apps/web run build</code> passed.</li>
<li>Playwright visual QA checked <code>http://localhost:3000/tape</code> at 1440x1000 and 390x900.</li>
<li>Visual QA confirmed no document-level horizontal overflow after the responsive polish.</li>
</ul>
</section>
<section>
<h2>Issues, Limitations, and Mitigations</h2>
<ul>
<li>The local backend WebSocket at <code>localhost:4000</code> was offline during visual QA, so the screen showed disconnected empty states. This was useful for validating the empty-state polish but did not exercise live data density.</li>
<li>Playwright needed a locally cached Chromium executable. The visual check used an existing browser cache path after the default runtime binary was unavailable.</li>
</ul>
</section>
<section>
<h2>Follow-up Work</h2>
<p>
No new Beads follow-up issue was filed. Live-data density should be rechecked naturally when the full local stack is running, but this polish did not reveal a separate actionable defect.
</p>
</section>
</main>
</body>
</html>