rename tape to options and replace web rail with overlay drawer #11
10 changed files with 916 additions and 154 deletions
|
|
@ -23,7 +23,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-hoh","title":"clarify turn-doc exemptions and ambiguity rule","description":"Update AGENTS.md turn documentation rules so minor/trivial checklist takes precedence, ambiguous cases require user check-in, and completion rule applies only when turn docs are required.","status":"open","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-23T23:02:10Z","created_by":"dirtydishes","updated_at":"2026-05-23T23:02:10Z","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-7ez","title":"rename tape to options and replace web rail with drawer shell","description":"Implement the web and desktop route transition from /tape to /options, keep /tape as a compatibility redirect, replace the persistent web rail with a shared sticky header plus overlay drawer, and update validation/docs to match.","status":"closed","priority":2,"issue_type":"feature","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T23:30:06Z","created_by":"dirtydishes","updated_at":"2026-05-23T23:38:59Z","started_at":"2026-05-23T23:30:24Z","closed_at":"2026-05-23T23:38:59Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
|
{"_type":"issue","id":"islandflow-hoh","title":"clarify turn-doc exemptions and ambiguity rule","description":"Update AGENTS.md turn documentation rules so minor/trivial checklist takes precedence, ambiguous cases require user check-in, and completion rule applies only when turn docs are required.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-23T23:02:10Z","created_by":"dirtydishes","updated_at":"2026-05-23T23:02:30Z","closed_at":"2026-05-23T23:02:30Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-t8b","title":"Update GitHub Pages docs URL target","description":"Adjust the docs Pages publish workflow so the deployed landing behavior explicitly targets dirtydishes.github.io/islandflow/docs and keeps the docs payload path consistent.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T21:18:04Z","created_by":"dirtydishes","updated_at":"2026-05-23T21:18:59Z","started_at":"2026-05-23T21:18:06Z","closed_at":"2026-05-23T21:18:59Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-t8b","title":"Update GitHub Pages docs URL target","description":"Adjust the docs Pages publish workflow so the deployed landing behavior explicitly targets dirtydishes.github.io/islandflow/docs and keeps the docs payload path consistent.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T21:18:04Z","created_by":"dirtydishes","updated_at":"2026-05-23T21:18:59Z","started_at":"2026-05-23T21:18:06Z","closed_at":"2026-05-23T21:18:59Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-kgu","title":"Reconcile PR #8 branch with current main","description":"Why this issue exists and what needs to be done: user requested reconciliation for PR #8. Identify the PR #8 branch, merge/rebase with current main, resolve conflicts, validate, and push the updated branch so the PR can merge cleanly.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T20:14:36Z","created_by":"dirtydishes","updated_at":"2026-05-23T20:24:29Z","started_at":"2026-05-23T20:14:39Z","closed_at":"2026-05-23T20:24:29Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-kgu","title":"Reconcile PR #8 branch with current main","description":"Why this issue exists and what needs to be done: user requested reconciliation for PR #8. Identify the PR #8 branch, merge/rebase with current main, resolve conflicts, validate, and push the updated branch so the PR can merge cleanly.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T20:14:36Z","created_by":"dirtydishes","updated_at":"2026-05-23T20:24:29Z","started_at":"2026-05-23T20:14:39Z","closed_at":"2026-05-23T20:24:29Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-l9h","title":"stop persisting non-signal option prints in clickhouse","description":"Why: non-signal option prints are storage noise and should not be persisted by default.\\n\\nWhat: add OPTIONS_PERSIST_SIGNAL_ONLY env flag (default true), gate option_print inserts in ingest-options, add tests for persistence behavior, update env examples, and document one-off cleanup SQL for existing non-signal rows.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T03:02:32Z","created_by":"dirtydishes","updated_at":"2026-05-23T03:06:34Z","started_at":"2026-05-23T03:02:35Z","closed_at":"2026-05-23T03:06:34Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-l9h","title":"stop persisting non-signal option prints in clickhouse","description":"Why: non-signal option prints are storage noise and should not be persisted by default.\\n\\nWhat: add OPTIONS_PERSIST_SIGNAL_ONLY env flag (default true), gate option_print inserts in ingest-options, add tests for persistence behavior, update env examples, and document one-off cleanup SQL for existing non-signal rows.","status":"closed","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T03:02:32Z","created_by":"dirtydishes","updated_at":"2026-05-23T03:06:34Z","started_at":"2026-05-23T03:02:35Z","closed_at":"2026-05-23T03:06:34Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
|
|
@ -80,6 +81,7 @@
|
||||||
{"_type":"issue","id":"islandflow-zs0","title":"Migrate terminal UI to smart-money profiles","description":"Migrate apps/web terminal rendering to consume SmartMoneyEvent directly: primary profile, probability ladder, reason codes, and suppression/abstention state, while preserving legacy alert/classifier displays during the bridge.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-04T21:35:23Z","created_by":"dirtydishes","updated_at":"2026-05-05T05:39:58Z","closed_at":"2026-05-05T05:39:58Z","close_reason":"Completed terminal smart-money profile migration","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-zs0","title":"Migrate terminal UI to smart-money profiles","description":"Migrate apps/web terminal rendering to consume SmartMoneyEvent directly: primary profile, probability ladder, reason codes, and suppression/abstention state, while preserving legacy alert/classifier displays during the bridge.","status":"closed","priority":2,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-04T21:35:23Z","created_by":"dirtydishes","updated_at":"2026-05-05T05:39:58Z","closed_at":"2026-05-05T05:39:58Z","close_reason":"Completed terminal smart-money profile migration","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-igk","title":"Add plan mode","description":"Implement a user-facing plan mode in the application so users can switch into planning before taking action. Scope to be clarified from existing app patterns.","status":"closed","priority":2,"issue_type":"feature","owner":"dishes@dpdrm.com","created_at":"2026-05-04T04:22:37Z","created_by":"dirtydishes","updated_at":"2026-05-04T04:26:18Z","started_at":"2026-05-04T04:22:40Z","closed_at":"2026-05-04T04:26:18Z","close_reason":"Implemented as a global pi extension toggled with Shift+P","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-igk","title":"Add plan mode","description":"Implement a user-facing plan mode in the application so users can switch into planning before taking action. Scope to be clarified from existing app patterns.","status":"closed","priority":2,"issue_type":"feature","owner":"dishes@dpdrm.com","created_at":"2026-05-04T04:22:37Z","created_by":"dirtydishes","updated_at":"2026-05-04T04:26:18Z","started_at":"2026-05-04T04:22:40Z","closed_at":"2026-05-04T04:26:18Z","close_reason":"Implemented as a global pi extension toggled with Shift+P","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-biq","title":"Finish raw live options delivery and filter/backpressure observability","description":"The smart-money signal path and Tape filters are in place, but the next firehose pass should finish server-side selective raw live delivery for options subscriptions and add explicit filtered-out/backpressure observability for API/web counters. This was discovered while landing islandflow-e4r.\n","status":"in_progress","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:28:58Z","created_by":"dirtydishes","updated_at":"2026-04-29T03:54:12Z","started_at":"2026-04-29T03:54:12Z","dependencies":[{"issue_id":"islandflow-biq","depends_on_id":"islandflow-e4r","type":"discovered-from","created_at":"2026-04-28T16:28:58Z","created_by":"auto-import","metadata":"{}"}],"dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-biq","title":"Finish raw live options delivery and filter/backpressure observability","description":"The smart-money signal path and Tape filters are in place, but the next firehose pass should finish server-side selective raw live delivery for options subscriptions and add explicit filtered-out/backpressure observability for API/web counters. This was discovered while landing islandflow-e4r.\n","status":"in_progress","priority":2,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-04-28T20:28:58Z","created_by":"dirtydishes","updated_at":"2026-04-29T03:54:12Z","started_at":"2026-04-29T03:54:12Z","dependencies":[{"issue_id":"islandflow-biq","depends_on_id":"islandflow-e4r","type":"discovered-from","created_at":"2026-04-28T16:28:58Z","created_by":"auto-import","metadata":"{}"}],"dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
|
{"_type":"issue","id":"islandflow-3by","title":"add interaction coverage for terminal navigation drawer","description":"Add browser- or DOM-level coverage for the shared terminal header drawer so open/close behavior, Escape dismissal, backdrop dismissal, and route-change dismissal are exercised beyond pure route helper tests.","status":"open","priority":3,"issue_type":"task","owner":"dishes@dpdrm.com","created_at":"2026-05-23T23:35:57Z","created_by":"dirtydishes","updated_at":"2026-05-23T23:35:57Z","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-gm0","title":"Default turn-doc diffs to @pierre/diffs","description":"Why this issue exists and what needs to be done\\n\\nUpdate AGENTS.md turn-documentation guidance to prefer @pierre/diffs output with an explicit fallback path when unavailable, and include the related package manifest/lock updates in the same change set.","status":"closed","priority":3,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T22:51:57Z","created_by":"dirtydishes","updated_at":"2026-05-23T22:52:23Z","started_at":"2026-05-23T22:52:00Z","closed_at":"2026-05-23T22:52:23Z","close_reason":"completed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-gm0","title":"Default turn-doc diffs to @pierre/diffs","description":"Why this issue exists and what needs to be done\\n\\nUpdate AGENTS.md turn-documentation guidance to prefer @pierre/diffs output with an explicit fallback path when unavailable, and include the related package manifest/lock updates in the same change set.","status":"closed","priority":3,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T22:51:57Z","created_by":"dirtydishes","updated_at":"2026-05-23T22:52:23Z","started_at":"2026-05-23T22:52:00Z","closed_at":"2026-05-23T22:52:23Z","close_reason":"completed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-hpf","title":"add anatomy explainer for options print and smart money flow","description":"Create a standalone docs/anatomy.html reference page that explains the end-to-end lifecycle of an options print through enrichment, signal filtering, compute clustering, flow packet creation, smart-money evaluation, classifier hits, alerts, and API/live consumption. The page should be polished, user-readable, and visually strong enough to serve as a reusable reference artifact for both technical and non-technical readers.","notes":"Added docs/anatomy.html as a standalone reference page for the options-print to smart-money pipeline, styled in the repo product register and layered for executive, mixed technical, and operator-level readers. Regenerated docs/index.html so the page is discoverable from the docs surface.","status":"closed","priority":3,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T02:18:48Z","created_by":"dirtydishes","updated_at":"2026-05-23T02:24:58Z","started_at":"2026-05-23T02:18:53Z","closed_at":"2026-05-23T02:24:58Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-hpf","title":"add anatomy explainer for options print and smart money flow","description":"Create a standalone docs/anatomy.html reference page that explains the end-to-end lifecycle of an options print through enrichment, signal filtering, compute clustering, flow packet creation, smart-money evaluation, classifier hits, alerts, and API/live consumption. The page should be polished, user-readable, and visually strong enough to serve as a reusable reference artifact for both technical and non-technical readers.","notes":"Added docs/anatomy.html as a standalone reference page for the options-print to smart-money pipeline, styled in the repo product register and layered for executive, mixed technical, and operator-level readers. Regenerated docs/index.html so the page is discoverable from the docs surface.","status":"closed","priority":3,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-23T02:18:48Z","created_by":"dirtydishes","updated_at":"2026-05-23T02:24:58Z","started_at":"2026-05-23T02:18:53Z","closed_at":"2026-05-23T02:24:58Z","close_reason":"Closed","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
{"_type":"issue","id":"islandflow-4ca","title":"Publish May 21 standup git summary","description":"Create the daily standup-ready git activity summary for 2026-05-21, save the HTML artifact under docs/general, add the required turn document, and push the result so the automation leaves a durable record.","status":"closed","priority":3,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-22T13:03:00Z","created_by":"dirtydishes","updated_at":"2026-05-22T13:05:05Z","started_at":"2026-05-22T13:03:03Z","closed_at":"2026-05-22T13:05:05Z","close_reason":"Created the 2026-05-21 standup summary in docs/general, added the required turn document, and prepared the repo for commit/push.","dependency_count":0,"dependent_count":0,"comment_count":0}
|
{"_type":"issue","id":"islandflow-4ca","title":"Publish May 21 standup git summary","description":"Create the daily standup-ready git activity summary for 2026-05-21, save the HTML artifact under docs/general, add the required turn document, and push the result so the automation leaves a durable record.","status":"closed","priority":3,"issue_type":"task","assignee":"dirtydishes","owner":"dishes@dpdrm.com","created_at":"2026-05-22T13:03:00Z","created_by":"dirtydishes","updated_at":"2026-05-22T13:05:05Z","started_at":"2026-05-22T13:03:03Z","closed_at":"2026-05-22T13:05:05Z","close_reason":"Created the 2026-05-21 standup summary in docs/general, added the required turn document, and prepared the repo for commit/push.","dependency_count":0,"dependent_count":0,"comment_count":0}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,6 @@ This workspace packages a thin Electron shell around the hosted Islandflow app.
|
||||||
|
|
||||||
## Development Notes
|
## Development Notes
|
||||||
|
|
||||||
- `ISLANDFLOW_DESKTOP_START_URL` controls which trusted app URL Electron loads.
|
- `ISLANDFLOW_DESKTOP_START_URL` controls which trusted app URL Electron loads. Prefer `/options` for deep links; `/tape` remains supported and redirects in the web app for compatibility.
|
||||||
- `NEXT_PUBLIC_API_URL` remains a web-app setting and should typically be `https://flow.deltaisland.io` when developing the local UI inside Electron.
|
- `NEXT_PUBLIC_API_URL` remains a web-app setting and should typically be `https://flow.deltaisland.io` when developing the local UI inside Electron.
|
||||||
- `assets/` currently contains placeholders only; a real `.icns` icon is deferred.
|
- `assets/` currently contains placeholders only; a real `.icns` icon is deferred.
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,11 @@ import {
|
||||||
} from "./security.js";
|
} from "./security.js";
|
||||||
|
|
||||||
describe("desktop URL policy", () => {
|
describe("desktop URL policy", () => {
|
||||||
it("allows the hosted production origin", () => {
|
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);
|
expect(isTrustedAppUrl("https://flow.deltaisland.io/tape?symbol=SPY")).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -37,5 +41,8 @@ describe("desktop URL policy", () => {
|
||||||
expect(resolveDesktopStartUrl(undefined)).toBe(DESKTOP_PRODUCTION_URL);
|
expect(resolveDesktopStartUrl(undefined)).toBe(DESKTOP_PRODUCTION_URL);
|
||||||
expect(resolveDesktopStartUrl("https://example.com")).toBe(DESKTOP_PRODUCTION_URL);
|
expect(resolveDesktopStartUrl("https://example.com")).toBe(DESKTOP_PRODUCTION_URL);
|
||||||
expect(resolveDesktopStartUrl("http://127.0.0.1:3000")).toBe("http://127.0.0.1:3000");
|
expect(resolveDesktopStartUrl("http://127.0.0.1:3000")).toBe("http://127.0.0.1:3000");
|
||||||
|
expect(resolveDesktopStartUrl("https://flow.deltaisland.io/options")).toBe(
|
||||||
|
"https://flow.deltaisland.io/options"
|
||||||
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
--red-soft: oklch(0.68 0.16 28 / 0.12);
|
--red-soft: oklch(0.68 0.16 28 / 0.12);
|
||||||
--blue: oklch(0.72 0.13 247);
|
--blue: oklch(0.72 0.13 247);
|
||||||
--blue-soft: oklch(0.72 0.13 247 / 0.11);
|
--blue-soft: oklch(0.72 0.13 247 / 0.11);
|
||||||
--rail-width: 236px;
|
--drawer-width: min(320px, calc(100vw - 28px));
|
||||||
--topbar-height: 64px;
|
--topbar-height: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -86,22 +86,43 @@ input {
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-shell {
|
.terminal-shell {
|
||||||
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: var(--rail-width) minmax(0, 1fr);
|
|
||||||
background: linear-gradient(180deg, oklch(0.14 0.011 250) 0%, oklch(0.11 0.01 250) 100%);
|
background: linear-gradient(180deg, oklch(0.14 0.011 250) 0%, oklch(0.11 0.01 250) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-rail {
|
.terminal-nav-drawer {
|
||||||
position: sticky;
|
position: fixed;
|
||||||
top: 0;
|
inset: 0 auto 0 0;
|
||||||
height: 100vh;
|
z-index: 45;
|
||||||
padding: 22px 18px;
|
width: var(--drawer-width);
|
||||||
|
padding: 20px 18px 18px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
background: linear-gradient(180deg, oklch(0.16 0.012 250 / 0.98), oklch(0.13 0.011 250 / 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);
|
||||||
|
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-drawer-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 40;
|
||||||
|
border: 0;
|
||||||
|
background: rgba(3, 5, 8, 0.62);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-drawer-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-drawer-close {
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-brand {
|
.terminal-brand {
|
||||||
|
|
@ -198,6 +219,7 @@ input {
|
||||||
|
|
||||||
.terminal-frame {
|
.terminal-frame {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
min-height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: minmax(var(--topbar-height), auto) minmax(0, 1fr);
|
grid-template-rows: minmax(var(--topbar-height), auto) minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
@ -208,11 +230,39 @@ input {
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
gap: 12px;
|
gap: 16px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
background: oklch(0.15 0.012 250 / 0.96);
|
background: oklch(0.15 0.012 250 / 0.96);
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-topbar-leading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-menu-trigger {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
min-width: 104px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-menu-trigger-icon {
|
||||||
|
display: inline-grid;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.terminal-menu-trigger-icon span {
|
||||||
|
display: block;
|
||||||
|
width: 14px;
|
||||||
|
height: 1px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-dot,
|
.status-dot,
|
||||||
|
|
@ -463,7 +513,7 @@ input {
|
||||||
|
|
||||||
.terminal-content {
|
.terminal-content {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
padding: 24px 24px 24px;
|
padding: 24px clamp(16px, 2vw, 28px) 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-shell {
|
.page-shell {
|
||||||
|
|
@ -689,8 +739,8 @@ h3 {
|
||||||
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
|
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-grid-tape {
|
.page-grid-options {
|
||||||
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-grid-signals {
|
.page-grid-signals {
|
||||||
|
|
@ -714,7 +764,7 @@ h3 {
|
||||||
|
|
||||||
.page-grid-home > :nth-child(3),
|
.page-grid-home > :nth-child(3),
|
||||||
.page-grid-home > :nth-child(4),
|
.page-grid-home > :nth-child(4),
|
||||||
.page-grid-tape > :nth-child(1),
|
.page-grid-options > :nth-child(1),
|
||||||
.page-grid-replay > :nth-child(1) {
|
.page-grid-replay > :nth-child(1) {
|
||||||
grid-column: 1 / -1;
|
grid-column: 1 / -1;
|
||||||
}
|
}
|
||||||
|
|
@ -963,11 +1013,11 @@ h3 {
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-grid-tape > :first-child {
|
.page-grid-options > :first-child {
|
||||||
height: clamp(460px, 64vh, 880px);
|
height: clamp(460px, 64vh, 880px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-grid-tape > :not(:first-child) {
|
.page-grid-options > :not(:first-child) {
|
||||||
height: clamp(400px, 50vh, 680px);
|
height: clamp(400px, 50vh, 680px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1965,68 +2015,23 @@ h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1180px) {
|
@media (max-width: 1180px) {
|
||||||
.terminal-shell {
|
.terminal-nav-drawer {
|
||||||
grid-template-columns: 1fr;
|
width: min(300px, calc(100vw - 24px));
|
||||||
}
|
|
||||||
|
|
||||||
.terminal-rail {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 35;
|
|
||||||
height: auto;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
|
|
||||||
align-items: center;
|
|
||||||
gap: 14px 18px;
|
|
||||||
padding: 14px 16px;
|
|
||||||
border-right: 0;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal-brand {
|
|
||||||
gap: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-brand-name {
|
.terminal-brand-name {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-nav {
|
|
||||||
display: flex;
|
|
||||||
min-width: 0;
|
|
||||||
gap: 8px;
|
|
||||||
overflow-x: auto;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal-nav-link {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shell-metrics {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
margin-top: 0;
|
|
||||||
grid-template-columns: repeat(4, minmax(136px, 1fr));
|
|
||||||
gap: 8px;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shell-metric {
|
.shell-metric {
|
||||||
min-width: 136px;
|
min-width: 136px;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-topbar {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 980px) {
|
@media (max-width: 980px) {
|
||||||
.page-grid-home,
|
.page-grid-home,
|
||||||
.page-grid-tape,
|
.page-grid-options,
|
||||||
.page-grid-signals,
|
.page-grid-signals,
|
||||||
.page-grid-charts,
|
.page-grid-charts,
|
||||||
.page-grid-replay,
|
.page-grid-replay,
|
||||||
|
|
@ -2037,7 +2042,7 @@ h3 {
|
||||||
|
|
||||||
.page-grid-home > :nth-child(3),
|
.page-grid-home > :nth-child(3),
|
||||||
.page-grid-home > :nth-child(4),
|
.page-grid-home > :nth-child(4),
|
||||||
.page-grid-tape > :nth-child(1),
|
.page-grid-options > :nth-child(1),
|
||||||
.page-grid-replay > :nth-child(1) {
|
.page-grid-replay > :nth-child(1) {
|
||||||
grid-column: auto;
|
grid-column: auto;
|
||||||
grid-row: auto;
|
grid-row: auto;
|
||||||
|
|
@ -2049,8 +2054,8 @@ h3 {
|
||||||
.page-grid-home > :nth-child(4),
|
.page-grid-home > :nth-child(4),
|
||||||
.page-grid-signals > .terminal-pane,
|
.page-grid-signals > .terminal-pane,
|
||||||
.page-grid-replay > :not(:first-child),
|
.page-grid-replay > :not(:first-child),
|
||||||
.page-grid-tape > :first-child,
|
.page-grid-options > :first-child,
|
||||||
.page-grid-tape > :not(:first-child),
|
.page-grid-options > :not(:first-child),
|
||||||
.page-grid-charts > :last-child {
|
.page-grid-charts > :last-child {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
@ -2062,14 +2067,12 @@ h3 {
|
||||||
|
|
||||||
.terminal-topbar {
|
.terminal-topbar {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-topbar-actions {
|
.terminal-topbar-actions {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-left: auto;
|
|
||||||
width: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-topbar-controls {
|
.terminal-topbar-controls {
|
||||||
|
|
@ -2086,11 +2089,9 @@ h3 {
|
||||||
background-size: 24px 24px, 24px 24px, 100% 100%, auto;
|
background-size: 24px 24px, 24px 24px, 100% 100%, auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-rail {
|
.terminal-nav-drawer {
|
||||||
position: static;
|
width: min(340px, calc(100vw - 12px));
|
||||||
grid-template-columns: minmax(0, 1fr);
|
padding: 16px 12px 12px;
|
||||||
gap: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-brand {
|
.terminal-brand {
|
||||||
|
|
@ -2111,20 +2112,6 @@ h3 {
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.terminal-nav-link {
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 0.72rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shell-metrics {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shell-metric {
|
|
||||||
flex: 0 0 156px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal-content {
|
.terminal-content {
|
||||||
padding: 16px 10px 22px;
|
padding: 16px 10px 22px;
|
||||||
}
|
}
|
||||||
|
|
@ -2160,6 +2147,10 @@ h3 {
|
||||||
padding: 12px 10px;
|
padding: 12px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.terminal-topbar-leading {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.terminal-button,
|
.terminal-button,
|
||||||
.mode-button,
|
.mode-button,
|
||||||
.filter-clear,
|
.filter-clear,
|
||||||
|
|
@ -2186,8 +2177,14 @@ h3 {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.terminal-menu-trigger {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.terminal-topbar-mode .terminal-button,
|
.terminal-topbar-mode .terminal-button,
|
||||||
.terminal-topbar-controls > .terminal-button,
|
.terminal-topbar-controls > .terminal-button,
|
||||||
|
.terminal-topbar-leading > .terminal-button,
|
||||||
.page-actions > .terminal-button,
|
.page-actions > .terminal-button,
|
||||||
.page-actions > .flow-filter-popover {
|
.page-actions > .flow-filter-popover {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
7
apps/web/app/options/page.tsx
Normal file
7
apps/web/app/options/page.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { OptionsRoute } from "../terminal";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
export default function Page() {
|
||||||
|
return <OptionsRoute />;
|
||||||
|
}
|
||||||
|
|
@ -28,4 +28,10 @@ describe("legacy page redirects", () => {
|
||||||
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/");
|
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/");
|
||||||
expect(redirect).toHaveBeenCalledWith("/");
|
expect(redirect).toHaveBeenCalledWith("/");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("redirects /tape to /options", async () => {
|
||||||
|
const mod = await import("./tape/page");
|
||||||
|
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/options");
|
||||||
|
expect(redirect).toHaveBeenCalledWith("/options");
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { TapeRoute } from "../terminal";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
export const dynamic = "force-dynamic";
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return <TapeRoute />;
|
redirect("/options");
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@ import {
|
||||||
getOptionScope,
|
getOptionScope,
|
||||||
getLiveFeedStatus,
|
getLiveFeedStatus,
|
||||||
getLiveManifest,
|
getLiveManifest,
|
||||||
|
getTerminalNavCurrentHref,
|
||||||
getRouteFeatures,
|
getRouteFeatures,
|
||||||
getTapeVirtualConfig,
|
getTapeVirtualConfig,
|
||||||
mergeHeldTapeHistory,
|
mergeHeldTapeHistory,
|
||||||
|
|
@ -44,6 +45,7 @@ import {
|
||||||
smartMoneyProfileLabel,
|
smartMoneyProfileLabel,
|
||||||
smartMoneyToneForProfile,
|
smartMoneyToneForProfile,
|
||||||
getAlertFlowPacketRefs,
|
getAlertFlowPacketRefs,
|
||||||
|
normalizeTerminalPathname,
|
||||||
resolveAlertFlowPacket,
|
resolveAlertFlowPacket,
|
||||||
statusLabel,
|
statusLabel,
|
||||||
toggleFilterValue
|
toggleFilterValue
|
||||||
|
|
@ -165,18 +167,24 @@ describe("alert context hydration helpers", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("live manifest", () => {
|
describe("live manifest", () => {
|
||||||
it("includes only tape channels on /tape", () => {
|
it("includes only options channels on /options", () => {
|
||||||
const filters = buildDefaultFlowFilters();
|
const filters = buildDefaultFlowFilters();
|
||||||
const channels = getLiveManifest("/tape", "SPY", 60000, filters).map(
|
const channels = getLiveManifest("/options", "SPY", 60000, filters).map(
|
||||||
(subscription) => subscription.channel
|
(subscription) => subscription.channel
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(channels).toEqual(["options", "nbbo", "equities", "flow"]);
|
expect(channels).toEqual(["options", "nbbo", "flow"]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("dedupes tape options subscription", () => {
|
it("keeps /tape as a compatibility alias for /options subscriptions", () => {
|
||||||
|
expect(getLiveManifest("/tape", "SPY", 60000, buildDefaultFlowFilters())).toEqual(
|
||||||
|
getLiveManifest("/options", "SPY", 60000, buildDefaultFlowFilters())
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("dedupes options subscriptions on /options", () => {
|
||||||
const tapeOptionsSubscriptions = getLiveManifest(
|
const tapeOptionsSubscriptions = getLiveManifest(
|
||||||
"/tape",
|
"/options",
|
||||||
"SPY",
|
"SPY",
|
||||||
60000,
|
60000,
|
||||||
buildDefaultFlowFilters()
|
buildDefaultFlowFilters()
|
||||||
|
|
@ -184,35 +192,35 @@ describe("live manifest", () => {
|
||||||
expect(tapeOptionsSubscriptions).toHaveLength(1);
|
expect(tapeOptionsSubscriptions).toHaveLength(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("keeps option filters on /tape options subscriptions", () => {
|
it("keeps option filters on /options subscriptions", () => {
|
||||||
const filters = {
|
const filters = {
|
||||||
...buildDefaultFlowFilters(),
|
...buildDefaultFlowFilters(),
|
||||||
minNotional: 125_000
|
minNotional: 125_000
|
||||||
};
|
};
|
||||||
|
|
||||||
const tapeOptionsSubscription = getLiveManifest("/tape", "SPY", 60000, filters).find(
|
const tapeOptionsSubscription = getLiveManifest("/options", "SPY", 60000, filters).find(
|
||||||
(subscription) => subscription.channel === "options"
|
(subscription) => subscription.channel === "options"
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(tapeOptionsSubscription?.filters).toBe(filters);
|
expect(tapeOptionsSubscription?.filters).toBe(filters);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("applies global flow filters to flow subscriptions on /tape", () => {
|
it("applies global flow filters to flow subscriptions on /options", () => {
|
||||||
const filters = {
|
const filters = {
|
||||||
...buildDefaultFlowFilters(),
|
...buildDefaultFlowFilters(),
|
||||||
minNotional: 50_000
|
minNotional: 50_000
|
||||||
};
|
};
|
||||||
|
|
||||||
const tapeFlowSubscription = getLiveManifest("/tape", "SPY", 60000, filters).find(
|
const tapeFlowSubscription = getLiveManifest("/options", "SPY", 60000, filters).find(
|
||||||
(subscription) => subscription.channel === "flow"
|
(subscription) => subscription.channel === "flow"
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(tapeFlowSubscription?.filters).toBe(filters);
|
expect(tapeFlowSubscription?.filters).toBe(filters);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("includes scoped option and equity subscriptions", () => {
|
it("includes scoped option subscriptions on /options", () => {
|
||||||
const manifest = getLiveManifest(
|
const manifest = getLiveManifest(
|
||||||
"/tape",
|
"/options",
|
||||||
"AAPL",
|
"AAPL",
|
||||||
60000,
|
60000,
|
||||||
buildDefaultFlowFilters(),
|
buildDefaultFlowFilters(),
|
||||||
|
|
@ -226,15 +234,11 @@ describe("live manifest", () => {
|
||||||
(subscription): subscription is Extract<(typeof manifest)[number], { channel: "options" }> =>
|
(subscription): subscription is Extract<(typeof manifest)[number], { channel: "options" }> =>
|
||||||
subscription.channel === "options"
|
subscription.channel === "options"
|
||||||
);
|
);
|
||||||
const equitiesSubscription = manifest.find(
|
|
||||||
(subscription): subscription is Extract<(typeof manifest)[number], { channel: "equities" }> =>
|
|
||||||
subscription.channel === "equities"
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(optionsSubscription?.underlying_ids).toEqual(["AAPL"]);
|
expect(optionsSubscription?.underlying_ids).toEqual(["AAPL"]);
|
||||||
expect(optionsSubscription?.option_contract_id).toBe("AAPL-2025-01-17-200-C");
|
expect(optionsSubscription?.option_contract_id).toBe("AAPL-2025-01-17-200-C");
|
||||||
expect(optionsSubscription?.snapshot_limit).toBe(100);
|
expect(optionsSubscription?.snapshot_limit).toBe(100);
|
||||||
expect(equitiesSubscription?.underlying_ids).toEqual(["AAPL"]);
|
expect(manifest.some((subscription) => subscription.channel === "equities")).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("drops option-print filters for contract-focused options subscriptions but keeps flow filters", () => {
|
it("drops option-print filters for contract-focused options subscriptions but keeps flow filters", () => {
|
||||||
|
|
@ -244,7 +248,7 @@ describe("live manifest", () => {
|
||||||
optionTypes: ["put"] as const
|
optionTypes: ["put"] as const
|
||||||
};
|
};
|
||||||
const manifest = getLiveManifest(
|
const manifest = getLiveManifest(
|
||||||
"/tape",
|
"/options",
|
||||||
"AAPL",
|
"AAPL",
|
||||||
60000,
|
60000,
|
||||||
filters,
|
filters,
|
||||||
|
|
@ -443,15 +447,21 @@ describe("contract-focused option helpers", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("route feature map", () => {
|
describe("route feature map", () => {
|
||||||
it("maps /tape to tape panes and dependencies", () => {
|
it("maps /options to the options and packets panes", () => {
|
||||||
const features = getRouteFeatures("/tape");
|
const features = getRouteFeatures("/options");
|
||||||
expect(features.showOptionsPane).toBe(true);
|
expect(features.showOptionsPane).toBe(true);
|
||||||
expect(features.showEquitiesPane).toBe(true);
|
expect(features.showEquitiesPane).toBe(false);
|
||||||
expect(features.showFlowPane).toBe(true);
|
expect(features.showFlowPane).toBe(true);
|
||||||
expect(features.needsClassifierDecor).toBe(true);
|
expect(features.needsClassifierDecor).toBe(true);
|
||||||
expect(features.alerts).toBe(false);
|
expect(features.alerts).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("keeps /tape route compatibility while normalizing to /options", () => {
|
||||||
|
expect(normalizeTerminalPathname("/tape")).toBe("/options");
|
||||||
|
expect(getTerminalNavCurrentHref("/tape")).toBe("/options");
|
||||||
|
expect(getRouteFeatures("/tape")).toEqual(getRouteFeatures("/options"));
|
||||||
|
});
|
||||||
|
|
||||||
it("maps /signals to signal panes and dependencies", () => {
|
it("maps /signals to signal panes and dependencies", () => {
|
||||||
const features = getRouteFeatures("/signals");
|
const features = getRouteFeatures("/signals");
|
||||||
expect(features.showAlertsPane).toBe(true);
|
expect(features.showAlertsPane).toBe(true);
|
||||||
|
|
@ -506,10 +516,10 @@ describe("dark underlying route dependency helper", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("terminal navigation", () => {
|
describe("terminal navigation", () => {
|
||||||
it("exposes Home, Tape, and News as top-level destinations", () => {
|
it("exposes Home, Options, and News as top-level destinations", () => {
|
||||||
expect(NAV_ITEMS).toEqual([
|
expect(NAV_ITEMS).toEqual([
|
||||||
{ href: "/", label: "Home" },
|
{ href: "/", label: "Home" },
|
||||||
{ href: "/tape", label: "Tape" },
|
{ href: "/options", label: "Options" },
|
||||||
{ href: "/news", label: "News" }
|
{ href: "/news", label: "News" }
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -186,23 +186,34 @@ export const shouldIncludeEquitiesForDarkUnderlyingFallback = (): boolean => {
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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 => {
|
export const getRouteFeatures = (pathname: string): RouteFeatures => {
|
||||||
const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
|
const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
|
||||||
const normalizedPath =
|
const normalizedPath = normalizeTerminalPathname(pathname);
|
||||||
pathname === "/tape" ||
|
|
||||||
pathname === "/news" ||
|
|
||||||
pathname === "/signals" ||
|
|
||||||
pathname === "/charts" ||
|
|
||||||
pathname === "/replay"
|
|
||||||
? pathname
|
|
||||||
: "/";
|
|
||||||
|
|
||||||
switch (normalizedPath) {
|
switch (normalizedPath) {
|
||||||
case "/tape":
|
case "/options":
|
||||||
return {
|
return {
|
||||||
options: true,
|
options: true,
|
||||||
nbbo: true,
|
nbbo: true,
|
||||||
equities: true,
|
equities: false,
|
||||||
flow: true,
|
flow: true,
|
||||||
news: false,
|
news: false,
|
||||||
alerts: false,
|
alerts: false,
|
||||||
|
|
@ -213,7 +224,7 @@ export const getRouteFeatures = (pathname: string): RouteFeatures => {
|
||||||
equityCandles: false,
|
equityCandles: false,
|
||||||
equityOverlay: false,
|
equityOverlay: false,
|
||||||
showOptionsPane: true,
|
showOptionsPane: true,
|
||||||
showEquitiesPane: true,
|
showEquitiesPane: false,
|
||||||
showFlowPane: true,
|
showFlowPane: true,
|
||||||
showNewsPane: false,
|
showNewsPane: false,
|
||||||
showAlertsPane: false,
|
showAlertsPane: false,
|
||||||
|
|
@ -370,6 +381,10 @@ export const getRouteFeatures = (pathname: string): RouteFeatures => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getTerminalNavCurrentHref = (pathname: string): string => {
|
||||||
|
return normalizeTerminalPathname(pathname);
|
||||||
|
};
|
||||||
|
|
||||||
const EMPTY_ALERT_EVENTS: AlertEvent[] = [];
|
const EMPTY_ALERT_EVENTS: AlertEvent[] = [];
|
||||||
const EMPTY_CLASSIFIER_HIT_EVENTS: ClassifierHitEvent[] = [];
|
const EMPTY_CLASSIFIER_HIT_EVENTS: ClassifierHitEvent[] = [];
|
||||||
const EMPTY_SMART_MONEY_EVENTS: SmartMoneyEvent[] = [];
|
const EMPTY_SMART_MONEY_EVENTS: SmartMoneyEvent[] = [];
|
||||||
|
|
@ -7170,7 +7185,7 @@ const useTerminal = (): TerminalState => {
|
||||||
|
|
||||||
export const NAV_ITEMS = [
|
export const NAV_ITEMS = [
|
||||||
{ href: "/", label: "Home" },
|
{ href: "/", label: "Home" },
|
||||||
{ href: "/tape", label: "Tape" },
|
{ href: "/options", label: "Options" },
|
||||||
{ href: "/news", label: "News" }
|
{ href: "/news", label: "News" }
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
|
|
@ -8812,8 +8827,31 @@ function SyntheticControlDock() {
|
||||||
export function TerminalAppShell({ children }: { children: ReactNode }) {
|
export function TerminalAppShell({ children }: { children: ReactNode }) {
|
||||||
const state = useTerminalState();
|
const state = useTerminalState();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
const tickerFieldId = useId();
|
const tickerFieldId = useId();
|
||||||
const tickerHintId = 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 (
|
return (
|
||||||
<TerminalContext.Provider value={state}>
|
<TerminalContext.Provider value={state}>
|
||||||
|
|
@ -8821,31 +8859,26 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
||||||
<a className="skip-link" href="#terminal-content">
|
<a className="skip-link" href="#terminal-content">
|
||||||
Skip to terminal content
|
Skip to terminal content
|
||||||
</a>
|
</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 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}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
<ShellMetricStrip />
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<div className="terminal-frame">
|
<div className="terminal-frame">
|
||||||
<header className="terminal-topbar">
|
<header className="terminal-topbar">
|
||||||
|
<div className="terminal-topbar-leading">
|
||||||
|
<button
|
||||||
|
aria-controls="terminal-nav-drawer"
|
||||||
|
aria-expanded={drawerOpen}
|
||||||
|
aria-label={drawerOpen ? "Close navigation menu" : "Open navigation menu"}
|
||||||
|
className="terminal-button terminal-menu-trigger"
|
||||||
|
type="button"
|
||||||
|
onClick={() => setDrawerOpen((current) => !current)}
|
||||||
|
>
|
||||||
|
<span aria-hidden="true" className="terminal-menu-trigger-icon">
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
<span />
|
||||||
|
</span>
|
||||||
|
<span>Menu</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div className="terminal-topbar-actions">
|
<div className="terminal-topbar-actions">
|
||||||
<div className="terminal-topbar-controls">
|
<div className="terminal-topbar-controls">
|
||||||
{state.selectedInstrumentLabel && state.selectedInstrument?.kind !== "option-contract" ? (
|
{state.selectedInstrumentLabel && state.selectedInstrument?.kind !== "option-contract" ? (
|
||||||
|
|
@ -8909,6 +8942,53 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{drawerOpen ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
aria-label="Close navigation drawer"
|
||||||
|
className="terminal-drawer-backdrop"
|
||||||
|
type="button"
|
||||||
|
onClick={() => setDrawerOpen(false)}
|
||||||
|
/>
|
||||||
|
<aside
|
||||||
|
aria-label="Primary navigation"
|
||||||
|
className="terminal-nav-drawer"
|
||||||
|
id="terminal-nav-drawer"
|
||||||
|
>
|
||||||
|
<div className="terminal-drawer-head">
|
||||||
|
<div className="terminal-brand">
|
||||||
|
<span className="terminal-brand-kicker">IF</span>
|
||||||
|
<span className="terminal-brand-name">Islandflow</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
aria-label="Close navigation drawer"
|
||||||
|
className="terminal-button terminal-drawer-close"
|
||||||
|
type="button"
|
||||||
|
onClick={() => setDrawerOpen(false)}
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<nav aria-label="Primary" className="terminal-nav">
|
||||||
|
{NAV_ITEMS.map((item) => {
|
||||||
|
const active = activeNavHref === item.href;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
aria-current={active ? "page" : undefined}
|
||||||
|
className={`terminal-nav-link${active ? " terminal-nav-link-active" : ""}`}
|
||||||
|
href={item.href}
|
||||||
|
key={item.href}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
<ShellMetricStrip />
|
||||||
|
</aside>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
|
||||||
<SyntheticControlDock />
|
<SyntheticControlDock />
|
||||||
|
|
||||||
{state.selectedAlert ? (
|
{state.selectedAlert ? (
|
||||||
|
|
@ -8981,11 +9061,11 @@ export function NewsRoute() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TapeRoute() {
|
export function OptionsRoute() {
|
||||||
const state = useTerminal();
|
const state = useTerminal();
|
||||||
return (
|
return (
|
||||||
<PageFrame
|
<PageFrame
|
||||||
title="Tape"
|
title="Options"
|
||||||
actions={
|
actions={
|
||||||
<>
|
<>
|
||||||
<button
|
<button
|
||||||
|
|
@ -9009,9 +9089,8 @@ export function TapeRoute() {
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="page-grid page-grid-tape">
|
<div className="page-grid page-grid-options">
|
||||||
<OptionsPane state={state} />
|
<OptionsPane state={state} />
|
||||||
<EquitiesPane state={state} />
|
|
||||||
<FlowPane state={state} title="Packets" />
|
<FlowPane state={state} title="Packets" />
|
||||||
</div>
|
</div>
|
||||||
</PageFrame>
|
</PageFrame>
|
||||||
|
|
|
||||||
654
docs/turns/2026-05-23-rename-tape-options-drawer.html
Normal file
654
docs/turns/2026-05-23-rename-tape-options-drawer.html
Normal file
|
|
@ -0,0 +1,654 @@
|
||||||
|
<!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 => {
|
||||||
|
+ 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>- <aside className="terminal-rail">...</aside>
|
||||||
|
+ const [drawerOpen, setDrawerOpen] = useState(false);
|
||||||
|
+ 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]);
|
||||||
|
+ <header className="terminal-topbar">
|
||||||
|
+ <button className="terminal-button terminal-menu-trigger">Menu</button>
|
||||||
|
+ ...
|
||||||
|
+ </header>
|
||||||
|
+ {drawerOpen ? <>...overlay drawer...</> : null}
|
||||||
|
- export function TapeRoute() {
|
||||||
|
- return <PageFrame title="Tape">...<EquitiesPane />...</PageFrame>;
|
||||||
|
- }
|
||||||
|
+ export function OptionsRoute() {
|
||||||
|
+ return <PageFrame title="Options">...<FlowPane title="Packets" />...</PageFrame>;
|
||||||
|
+ }</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 <OptionsRoute />;
|
||||||
|
+ }
|
||||||
|
|
||||||
|
- // apps/web/app/tape/page.tsx
|
||||||
|
- return <TapeRoute />;
|
||||||
|
+ 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue