dirtydishes/islandflow
1
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions 1
islandflow/docs/turns/2026-05-23-rename-tape-options-drawer.html

654 lines
22 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Turn Report: Rename Tape to Options and Replace the Web Rail</title>
<style>
:root {
color-scheme: dark;
--bg: #06080b;
--panel: #111820;
--panel-2: #0d141b;
--text: #e6edf4;
--muted: #90a0b2;
--faint: #6e7b8c;
--accent: #f5a623;
--accent-soft: rgba(245, 166, 35, 0.14);
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 177, 48, 0.35);
--ok: #25c17a;
--warn: #ffd599;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(245, 166, 35, 0.09), transparent 28%),
linear-gradient(180deg, #0b1016 0%, #06080b 100%);
line-height: 1.6;
}
main {
max-width: 1140px;
margin: 0 auto;
padding: 28px 18px 40px;
}
header {
padding: 20px 20px 18px;
border: 1px solid var(--border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(17, 24, 32, 0.96), rgba(13, 20, 27, 0.96));
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
h1, h2 {
margin: 0;
font-family: "Quantico", "IBM Plex Sans", sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
}
h1 {
font-size: clamp(1.45rem, 2.7vw, 2.2rem);
}
h2 {
margin-bottom: 0.8rem;
font-size: 1rem;
color: #f2f6fb;
}
.meta {
margin-top: 0.55rem;
color: var(--muted);
font-size: 0.95rem;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.85rem;
}
.chip {
padding: 0.28rem 0.68rem;
border-radius: 999px;
border: 1px solid var(--border-strong);
background: var(--accent-soft);
color: var(--text);
font-size: 0.82rem;
font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.grid {
display: grid;
gap: 1rem;
margin-top: 1rem;
}
section {
padding: 1rem 1.05rem;
border: 1px solid var(--border);
border-radius: 16px;
background: color-mix(in oklab, var(--panel) 90%, black);
}
p {
margin: 0.4rem 0;
}
ul {
margin: 0.45rem 0 0;
padding-left: 1.2rem;
}
li + li {
margin-top: 0.35rem;
}
code {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 0.92em;
padding: 0.08rem 0.32rem;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
color: #f2f6fb;
}
.callout {
margin-top: 0.8rem;
padding: 0.8rem 0.9rem;
border-radius: 12px;
border: 1px solid rgba(255, 177, 48, 0.28);
background: rgba(245, 166, 35, 0.08);
color: #f5e6c8;
}
.good {
color: var(--ok);
}
.warn {
color: var(--warn);
}
.diff-grid {
display: grid;
gap: 0.85rem;
}
.diff-shell {
border: 1px solid rgba(255, 177, 48, 0.22);
border-radius: 12px;
overflow: hidden;
background: #0b1118;
}
.diff-title {
margin: 0;
padding: 0.65rem 0.8rem;
border-bottom: 1px solid rgba(255, 177, 48, 0.18);
background: rgba(245, 166, 35, 0.08);
color: #f2f6fb;
font-size: 0.88rem;
font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.diff-view {
padding: 0.35rem;
}
.diff-fallback {
margin: 0;
padding: 0.8rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
white-space: pre-wrap;
overflow-x: auto;
font-size: 0.84rem;
font-family: "IBM Plex Mono", ui-monospace, monospace;
color: #dbe6f6;
background: #0b1118;
}
.diff-shell.rendered .diff-fallback {
display: none;
}
.note {
margin-top: 0.7rem;
color: var(--muted);
font-size: 0.92rem;
}
</style>
</head>
<body>
<main>
<header>
<h1>Rename Tape to Options and Replace the Web Rail</h1>
<p class="meta">Created: 2026-05-23 19:36 EDT · Repo: <code>islandflow</code> · Branch: <code>sidebar-redesign</code></p>
<div class="chips">
<span class="chip">Beads: islandflow-7ez</span>
<span class="chip">Follow-up: islandflow-3by</span>
<span class="chip">Scope: web shell, routing, desktop compatibility</span>
</div>
</header>
<div class="grid">
<section>
<h2>Summary</h2>
<p>The Tape surface is now presented to users as <code>Options</code>, with <code>/options</code> as the canonical web route and <code>/tape</code> preserved as a compatibility redirect. The shared web shell no longer reserves a persistent left rail; every route now gets full-width content under a sticky top header, with navigation, branding, and shell metrics moved into a top-left overlay drawer.</p>
</section>
<section>
<h2>Changes Made</h2>
<ul>
<li>Added canonical web route <code>/options</code> via <code>apps/web/app/options/page.tsx</code> and changed <code>apps/web/app/tape/page.tsx</code> to redirect to it.</li>
<li>Updated route helpers in <code>apps/web/app/terminal.tsx</code> so <code>/options</code> is canonical while <code>/tape</code> remains accepted during transition.</li>
<li>Renamed top-level navigation copy from <code>Tape</code> to <code>Options</code>.</li>
<li>Replaced the persistent web rail with a sticky header plus overlay drawer in <code>apps/web/app/terminal.tsx</code> and <code>apps/web/app/globals.css</code>.</li>
<li>Changed the Options page layout to a full-width two-section stack: <code>OptionsPane</code> first, <code>FlowPane</code> below with title <code>Packets</code>, and removed <code>EquitiesPane</code> from this route.</li>
<li>Updated route, redirect, and desktop trust tests plus desktop README guidance to prefer <code>/options</code> while documenting <code>/tape</code> compatibility.</li>
</ul>
</section>
<section>
<h2>Context</h2>
<p>This change consolidates two related UX issues: the product naming mismatch around the Tape surface, and the layout cost of the always-visible left rail. The product/design context for Islandflow emphasizes investigation workflows, stable rhythm under live updates, and full-width evidence surfaces over decorative chrome.</p>
<div class="callout">The drawer keeps navigation and shell instrumentation available without permanently consuming horizontal space on dense data routes.</div>
</section>
<section>
<h2>Important Implementation Details</h2>
<ul>
<li><code>normalizeTerminalPathname()</code> now treats <code>/tape</code> as an alias of <code>/options</code>, which keeps route-feature decisions, live subscriptions, and nav highlighting aligned from one helper.</li>
<li>The new Options route intentionally drops the Equities subscription and pane. The canonical route now subscribes only to <code>options</code>, <code>nbbo</code>, and <code>flow</code>.</li>
<li>The drawer closes on route change, backdrop click, and <code>Escape</code> via client-side state in <code>TerminalAppShell</code>.</li>
<li>Desktop trust remains origin-based, so no Electron security model change was required. The desktop updates only clarify preferred route examples and add explicit <code>/options</code> coverage.</li>
</ul>
</section>
<section>
<h2>Relevant Diff Snippets</h2>
<div class="diff-grid">
<div class="diff-shell" id="diff-shell-1">
<p class="diff-title">apps/web/app/terminal.tsx · canonical /options routing and nav labels</p>
<div class="diff-view" id="diff-1"></div>
<pre class="diff-fallback"><code>- export const NAV_ITEMS = [
- { href: "/", label: "Home" },
- { href: "/tape", label: "Tape" },
- { href: "/news", label: "News" }
- ] as const;
+ const CANONICAL_OPTIONS_PATH = "/options";
+ const TAPE_COMPAT_PATH = "/tape";
+ export const normalizeTerminalPathname = (pathname: string): string =&gt; {
+ if (pathname === TAPE_COMPAT_PATH) return CANONICAL_OPTIONS_PATH;
+ return KNOWN_TERMINAL_PATHS.has(pathname) ? pathname : "/";
+ };
+ export const NAV_ITEMS = [
+ { href: "/", label: "Home" },
+ { href: "/options", label: "Options" },
+ { href: "/news", label: "News" }
+ ] as const;</code></pre>
</div>
<div class="diff-shell" id="diff-shell-2">
<p class="diff-title">apps/web/app/terminal.tsx · sticky header, overlay drawer, and Options page layout</p>
<div class="diff-view" id="diff-2"></div>
<pre class="diff-fallback"><code>- &lt;aside className="terminal-rail"&gt;...&lt;/aside&gt;
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ useEffect(() =&gt; { setDrawerOpen(false); }, [pathname]);
+ useEffect(() =&gt; {
+ if (!drawerOpen) return;
+ const handleKeyDown = (event: KeyboardEvent) =&gt; {
+ if (event.key === "Escape") setDrawerOpen(false);
+ };
+ document.addEventListener("keydown", handleKeyDown);
+ return () =&gt; document.removeEventListener("keydown", handleKeyDown);
+ }, [drawerOpen]);
+ &lt;header className="terminal-topbar"&gt;
+ &lt;button className="terminal-button terminal-menu-trigger"&gt;Menu&lt;/button&gt;
+ ...
+ &lt;/header&gt;
+ {drawerOpen ? &lt;&gt;...overlay drawer...&lt;/&gt; : null}
- export function TapeRoute() {
- return &lt;PageFrame title="Tape"&gt;...&lt;EquitiesPane /&gt;...&lt;/PageFrame&gt;;
- }
+ export function OptionsRoute() {
+ return &lt;PageFrame title="Options"&gt;...&lt;FlowPane title="Packets" /&gt;...&lt;/PageFrame&gt;;
+ }</code></pre>
</div>
<div class="diff-shell" id="diff-shell-3">
<p class="diff-title">apps/web/app/globals.css · full-width shell and drawer styling</p>
<div class="diff-view" id="diff-3"></div>
<pre class="diff-fallback"><code>- --rail-width: 236px;
- .terminal-shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
- .terminal-rail { ... }
- .page-grid-tape { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); }
+ --drawer-width: min(320px, calc(100vw - 28px));
+ .terminal-shell { position: relative; min-height: 100vh; }
+ .terminal-nav-drawer { position: fixed; inset: 0 auto 0 0; width: var(--drawer-width); ... }
+ .terminal-drawer-backdrop { position: fixed; inset: 0; ... }
+ .terminal-topbar { justify-content: space-between; backdrop-filter: blur(12px); }
+ .page-grid-options { grid-template-columns: minmax(0, 1fr); }</code></pre>
</div>
<div class="diff-shell" id="diff-shell-4">
<p class="diff-title">route + desktop compatibility · redirect and trust coverage</p>
<div class="diff-view" id="diff-4"></div>
<pre class="diff-fallback"><code>+ // apps/web/app/options/page.tsx
+ import { OptionsRoute } from "../terminal";
+ export default function Page() {
+ return &lt;OptionsRoute /&gt;;
+ }
- // apps/web/app/tape/page.tsx
- return &lt;TapeRoute /&gt;;
+ redirect("/options");
+ expect(isTrustedAppUrl("https://flow.deltaisland.io/options?symbol=SPY")).toBe(true);
+ expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);</code></pre>
</div>
</div>
<p class="note">Snippets are rendered client-side with Diffs (diffs.com project) and include inline fallback text for offline viewing.</p>
</section>
<section>
<h2>Expected Impact for End-Users</h2>
<p>Users now land on a more clearly named <code>Options</code> route, keep old <code>/tape</code> links working, and get more horizontal space across the web app because navigation no longer consumes a permanent left column. The Options route is simpler and more focused: options flow first, packets below, without the Equities panel competing for width.</p>
</section>
<section>
<h2>Validation</h2>
<ul>
<li><span class="good">Passed:</span> <code>bun test apps/web/app/routes.test.ts apps/web/app/terminal.test.ts apps/desktop/src/security.test.ts</code> (85 passing tests).</li>
<li><span class="good">Passed:</span> <code>bun --cwd=apps/web run build</code> including production build, TypeScript, and app-route generation for <code>/options</code> and <code>/tape</code>.</li>
<li><span class="warn">Skipped by request:</span> browser visual probes for the drawer/header refactor.</li>
</ul>
</section>
<section>
<h2>Issues, Limitations, and Mitigations</h2>
<ul>
<li>The current web test suite is still mostly route/helper-level, so the new drawer interactions are not covered by DOM/browser tests yet. Mitigation: filed follow-up issue <code>islandflow-3by</code>.</li>
<li>Internal code still uses some <code>Tape</code>-named helpers and hooks. This was left intentionally to keep the rename low-risk while user-facing copy and routing moved to <code>Options</code>.</li>
<li>The Options route no longer shows Equities. That is intentional for layout clarity, but it does change the previous multi-pane surface composition.</li>
</ul>
</section>
<section>
<h2>Follow-up Work</h2>
<ul>
<li><code>islandflow-3by</code>: add interaction coverage for drawer open/close, <code>Escape</code> dismissal, backdrop dismissal, and route-change dismissal.</li>
<li>If we later want a broader naming cleanup, isolate internal <code>Tape*</code> renames into a separate low-risk refactor rather than coupling them to route behavior again.</li>
</ul>
</section>
</div>
</main>
<script type="module">
const snippets = [
{
shellId: "diff-shell-1",
containerId: "diff-1",
name: "apps/web/app/terminal.tsx",
oldContents: `export const getRouteFeatures = (pathname: string): RouteFeatures => {
const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
const normalizedPath =
pathname === "/tape" ||
pathname === "/news" ||
pathname === "/signals" ||
pathname === "/charts" ||
pathname === "/replay"
? pathname
: "/";
switch (normalizedPath) {
case "/tape":
return {
options: true,
nbbo: true,
equities: true,
flow: true,
showOptionsPane: true,
showEquitiesPane: true,
showFlowPane: true,
needsClassifierDecor: true
};
}
};
export const NAV_ITEMS = [
{ href: "/", label: "Home" },
{ href: "/tape", label: "Tape" },
{ href: "/news", label: "News" }
] as const;`,
newContents: `const CANONICAL_OPTIONS_PATH = "/options";
const TAPE_COMPAT_PATH = "/tape";
const KNOWN_TERMINAL_PATHS = new Set([
CANONICAL_OPTIONS_PATH,
TAPE_COMPAT_PATH,
"/news",
"/signals",
"/charts",
"/replay"
]);
export const normalizeTerminalPathname = (pathname: string): string => {
if (pathname === TAPE_COMPAT_PATH) {
return CANONICAL_OPTIONS_PATH;
}
return KNOWN_TERMINAL_PATHS.has(pathname) ? pathname : "/";
};
export const getRouteFeatures = (pathname: string): RouteFeatures => {
const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
const normalizedPath = normalizeTerminalPathname(pathname);
switch (normalizedPath) {
case "/options":
return {
options: true,
nbbo: true,
equities: false,
flow: true,
showOptionsPane: true,
showEquitiesPane: false,
showFlowPane: true,
needsClassifierDecor: true
};
}
};
export const NAV_ITEMS = [
{ href: "/", label: "Home" },
{ href: "/options", label: "Options" },
{ href: "/news", label: "News" }
] as const;`
},
{
shellId: "diff-shell-2",
containerId: "diff-2",
name: "apps/web/app/terminal.tsx",
oldContents: `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">
<aside className="terminal-rail">
<div className="terminal-brand">...</div>
<nav aria-label="Primary" className="terminal-nav">...</nav>
<ShellMetricStrip />
</aside>
<div className="terminal-frame">
<header className="terminal-topbar">...</header>
<main className="terminal-content" id="terminal-content">{children}</main>
</div>
</div>
</TerminalContext.Provider>
);
}
export function TapeRoute() {
return (
<PageFrame title="Tape">
<div className="page-grid page-grid-tape">
<OptionsPane state={state} />
<EquitiesPane state={state} />
<FlowPane state={state} title="Packets" />
</div>
</PageFrame>
);
}`,
newContents: `export function TerminalAppShell({ children }: { children: ReactNode }) {
const state = useTerminalState();
const pathname = usePathname();
const [drawerOpen, setDrawerOpen] = useState(false);
const tickerFieldId = useId();
const tickerHintId = useId();
const activeNavHref = getTerminalNavCurrentHref(pathname);
useEffect(() => {
setDrawerOpen(false);
}, [pathname]);
useEffect(() => {
if (!drawerOpen) {
return;
}
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setDrawerOpen(false);
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [drawerOpen]);
return (
<TerminalContext.Provider value={state}>
<div className="terminal-shell">
<div className="terminal-frame">
<header className="terminal-topbar">
<div className="terminal-topbar-leading">
<button className="terminal-button terminal-menu-trigger" type="button">Menu</button>
</div>
<div className="terminal-topbar-actions">...</div>
</header>
<main className="terminal-content" id="terminal-content">{children}</main>
</div>
{drawerOpen ? (
<>
<button className="terminal-drawer-backdrop" type="button" />
<aside className="terminal-nav-drawer" id="terminal-nav-drawer">
<div className="terminal-drawer-head">...</div>
<nav aria-label="Primary" className="terminal-nav">...</nav>
<ShellMetricStrip />
</aside>
</>
) : null}
</div>
</TerminalContext.Provider>
);
}
export function OptionsRoute() {
return (
<PageFrame title="Options">
<div className="page-grid page-grid-options">
<OptionsPane state={state} />
<FlowPane state={state} title="Packets" />
</div>
</PageFrame>
);
}`
},
{
shellId: "diff-shell-3",
containerId: "diff-3",
name: "apps/web/app/globals.css",
oldContents: `:root {
--rail-width: 236px;
--topbar-height: 64px;
}
.terminal-shell {
min-height: 100vh;
display: grid;
grid-template-columns: var(--rail-width) minmax(0, 1fr);
}
.terminal-rail {
position: sticky;
top: 0;
height: 100vh;
padding: 22px 18px;
display: flex;
flex-direction: column;
gap: 20px;
}
.page-grid-tape {
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
}`,
newContents: `:root {
--drawer-width: min(320px, calc(100vw - 28px));
--topbar-height: 64px;
}
.terminal-shell {
position: relative;
min-height: 100vh;
}
.terminal-nav-drawer {
position: fixed;
inset: 0 auto 0 0;
z-index: 45;
width: var(--drawer-width);
padding: 20px 18px 18px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
}
.terminal-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 40;
}
.terminal-topbar {
justify-content: space-between;
backdrop-filter: blur(12px);
}
.page-grid-options {
grid-template-columns: minmax(0, 1fr);
}`
},
{
shellId: "diff-shell-4",
containerId: "diff-4",
name: "route-compatibility",
oldContents: `// apps/web/app/tape/page.tsx
import { TapeRoute } from "../terminal";
export default function Page() {
return <TapeRoute />;
}
// apps/desktop/src/security.test.ts
it("allows the hosted production origin", () => {
expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);
});`,
newContents: `// apps/web/app/options/page.tsx
import { OptionsRoute } from "../terminal";
export default function Page() {
return <OptionsRoute />;
}
// apps/web/app/tape/page.tsx
import { redirect } from "next/navigation";
export default function Page() {
redirect("/options");
}
// apps/desktop/src/security.test.ts
it("allows the hosted production origin on /options", () => {
expect(isTrustedAppUrl("https://flow.deltaisland.io/options?symbol=SPY")).toBe(true);
});
it("keeps /tape trusted as a compatibility path on the same origin", () => {
expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);
});`
}
];
try {
const { FileDiff } = await import("https://esm.sh/@pierre/diffs");
for (const snippet of snippets) {
const container = document.getElementById(snippet.containerId);
const shell = document.getElementById(snippet.shellId);
if (!container || !shell) {
continue;
}
const instance = new FileDiff({
theme: { dark: "pierre-dark", light: "pierre-light" },
diffStyle: "split"
});
instance.render({
oldFile: {
name: snippet.name,
contents: snippet.oldContents
},
newFile: {
name: snippet.name,
contents: snippet.newContents
},
containerWrapper: container
});
shell.classList.add("rendered");
}
} catch (error) {
console.warn("Failed to render diff snippets with Diffs.", error);
}
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink