Simplify web terminal routes and home layout
- Redirect legacy signals/charts/replay pages to home - Trim nav and update live subscriptions for home and tape - Refresh terminal topbar and layout behavior
This commit is contained in:
parent
eea2d74a3d
commit
c0219233d3
8 changed files with 197 additions and 176 deletions
24
AGENTS.md
24
AGENTS.md
|
|
@ -44,3 +44,27 @@ bd close <id> # Complete work
|
|||
- NEVER say "ready to push when you are" - YOU must push
|
||||
- If push fails, resolve and retry until it succeeds
|
||||
<!-- END BEADS INTEGRATION -->
|
||||
|
||||
## Minimal Repo Operating Instructions
|
||||
|
||||
This is a Bun + TypeScript monorepo for an event-sourced market-data pipeline:
|
||||
- Flow: ingest services publish to NATS/JetStream, compute/candles derive events, API serves REST/WS, web consumes live/replay streams.
|
||||
- Main folders: `services/*` (runtime services), `packages/*` (shared libs/types/storage), `apps/web` (Next.js UI).
|
||||
- Infra dependency: local dev assumes Docker services (NATS, ClickHouse, Redis) are available.
|
||||
|
||||
Use these repo-specific commands:
|
||||
- Install deps: `bun install`
|
||||
- Start full stack: `bun run dev`
|
||||
- Start infra only: `bun run dev:infra`
|
||||
- Start backend services only: `bun run dev:services`
|
||||
- Start web only: `bun run dev:web`
|
||||
|
||||
Testing and validation in this repo are Bun-first:
|
||||
- Run tests: `bun test`
|
||||
- Run scoped tests: `bun test services/compute/tests` (or another package/service path)
|
||||
- Validate web production build when UI code changes: `bun --cwd=apps/web run build`
|
||||
|
||||
Working style that avoids common problems here:
|
||||
- Prefer editing in the touched workspace (`services/<name>`, `packages/<name>`, `apps/web`) and keep shared contract changes in `packages/types`.
|
||||
- Keep `.env` aligned with `.env.example`; adapters default to synthetic modes for local development.
|
||||
- Dev runners persist child PID state in `.tmp/`; if a previous run crashed, restart via the standard `bun run dev*` commands so stale processes are cleaned up.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ChartsRoute } from "../terminal";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default function Page() {
|
||||
return <ChartsRoute />;
|
||||
redirect("/");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
--blue: #4da3ff;
|
||||
--blue-soft: rgba(77, 163, 255, 0.14);
|
||||
--rail-width: 236px;
|
||||
--topbar-height: 76px;
|
||||
--topbar-height: 64px;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -166,38 +166,15 @@ input {
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: end;
|
||||
gap: 18px 24px;
|
||||
padding: 16px 24px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
background: rgba(7, 10, 14, 0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.feed-status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feed-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.feed-status-dot,
|
||||
.status-dot,
|
||||
.chart-dot {
|
||||
width: 8px;
|
||||
|
|
@ -206,28 +183,24 @@ input {
|
|||
background: var(--text-faint);
|
||||
}
|
||||
|
||||
.feed-status-connected .feed-status-dot,
|
||||
.status-connected .status-dot,
|
||||
.chart-status-connected .chart-dot {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 0 4px rgba(37, 193, 122, 0.14);
|
||||
}
|
||||
|
||||
.feed-status-connecting .feed-status-dot,
|
||||
.chart-status-connecting .chart-dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.12);
|
||||
animation: pulse 1.3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.feed-status-stale .feed-status-dot,
|
||||
.status-stale .status-dot,
|
||||
.chart-status-stale .chart-dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.18);
|
||||
}
|
||||
|
||||
.feed-status-disconnected .feed-status-dot,
|
||||
.status-disconnected .status-dot,
|
||||
.chart-status-disconnected .chart-dot {
|
||||
background: var(--red);
|
||||
|
|
@ -236,33 +209,35 @@ input {
|
|||
|
||||
.terminal-topbar-actions {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.terminal-topbar-controls {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.terminal-topbar-mode {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.terminal-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: clamp(280px, 26vw, 420px);
|
||||
flex: 0 1 clamp(280px, 26vw, 420px);
|
||||
gap: 4px;
|
||||
min-width: clamp(220px, 24vw, 360px);
|
||||
flex: 1 1 clamp(220px, 24vw, 360px);
|
||||
}
|
||||
|
||||
.terminal-filter-label {
|
||||
|
|
@ -274,7 +249,7 @@ input {
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 36px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.terminal-filter-field::before,
|
||||
|
|
@ -308,7 +283,7 @@ input {
|
|||
.terminal-input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 8px;
|
||||
padding: 0 0 6px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
|
|
@ -358,8 +333,8 @@ input {
|
|||
.overlay-toggle,
|
||||
.drawer-close {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
|
|
@ -388,9 +363,9 @@ input {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 34px;
|
||||
min-height: 32px;
|
||||
max-width: min(360px, 32vw);
|
||||
padding: 6px 8px 6px 10px;
|
||||
padding: 5px 8px 5px 10px;
|
||||
border: 1px solid rgba(255, 216, 154, 0.34);
|
||||
border-radius: 8px;
|
||||
background: rgba(245, 166, 35, 0.08);
|
||||
|
|
@ -444,7 +419,7 @@ input {
|
|||
|
||||
.terminal-content {
|
||||
min-width: 0;
|
||||
padding: 34px 24px 28px;
|
||||
padding: 24px 24px 24px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
|
|
@ -617,11 +592,10 @@ h3 {
|
|||
color: #ffe4b3;
|
||||
}
|
||||
|
||||
.overview-strip,
|
||||
.replay-matrix {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.overview-cell {
|
||||
|
|
@ -638,8 +612,8 @@ h3 {
|
|||
align-items: stretch;
|
||||
}
|
||||
|
||||
.page-grid-overview {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
.page-grid-home {
|
||||
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
|
||||
}
|
||||
|
||||
.page-grid-tape {
|
||||
|
|
@ -661,7 +635,7 @@ h3 {
|
|||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.page-grid-overview > :nth-child(1),
|
||||
.page-grid-home > :nth-child(3),
|
||||
.page-grid-tape > :nth-child(1),
|
||||
.page-grid-replay > :nth-child(1) {
|
||||
grid-column: 1 / -1;
|
||||
|
|
@ -888,7 +862,12 @@ h3 {
|
|||
max-height: 260px;
|
||||
}
|
||||
|
||||
.page-grid-overview > :not(:first-child),
|
||||
.page-grid-home > :nth-child(1),
|
||||
.page-grid-home > :nth-child(2) {
|
||||
height: clamp(430px, 56vh, 760px);
|
||||
}
|
||||
|
||||
.page-grid-home > :nth-child(3),
|
||||
.page-grid-replay > :not(:first-child) {
|
||||
height: clamp(430px, 58vh, 760px);
|
||||
}
|
||||
|
|
@ -1570,25 +1549,26 @@ h3 {
|
|||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.page-grid-overview,
|
||||
.page-grid-home,
|
||||
.page-grid-tape,
|
||||
.page-grid-signals,
|
||||
.page-grid-charts,
|
||||
.page-grid-replay,
|
||||
.overview-strip,
|
||||
.replay-matrix,
|
||||
.shell-metrics {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.page-grid-overview > :nth-child(1),
|
||||
.page-grid-home > :nth-child(3),
|
||||
.page-grid-tape > :nth-child(1),
|
||||
.page-grid-replay > :nth-child(1) {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.page-grid-overview > :not(:first-child),
|
||||
.page-grid-home > :nth-child(1),
|
||||
.page-grid-home > :nth-child(2),
|
||||
.page-grid-home > :nth-child(3),
|
||||
.page-grid-signals > .terminal-pane,
|
||||
.page-grid-replay > :not(:first-child),
|
||||
.page-grid-tape > :first-child,
|
||||
|
|
@ -1604,8 +1584,8 @@ h3 {
|
|||
|
||||
.terminal-topbar {
|
||||
position: static;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.terminal-topbar-actions {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ReplayRoute } from "../terminal";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default function Page() {
|
||||
return <ReplayRoute />;
|
||||
redirect("/");
|
||||
}
|
||||
|
|
|
|||
31
apps/web/app/routes.test.ts
Normal file
31
apps/web/app/routes.test.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { beforeEach, describe, expect, it, mock } from "bun:test";
|
||||
|
||||
const redirect = mock((path: string) => {
|
||||
throw new Error(`NEXT_REDIRECT:${path}`);
|
||||
});
|
||||
|
||||
mock.module("next/navigation", () => ({ redirect }));
|
||||
|
||||
describe("legacy page redirects", () => {
|
||||
beforeEach(() => {
|
||||
redirect.mockClear();
|
||||
});
|
||||
|
||||
it("redirects /signals to home", async () => {
|
||||
const mod = await import("./signals/page");
|
||||
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/");
|
||||
expect(redirect).toHaveBeenCalledWith("/");
|
||||
});
|
||||
|
||||
it("redirects /charts to home", async () => {
|
||||
const mod = await import("./charts/page");
|
||||
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/");
|
||||
expect(redirect).toHaveBeenCalledWith("/");
|
||||
});
|
||||
|
||||
it("redirects /replay to home", async () => {
|
||||
const mod = await import("./replay/page");
|
||||
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/");
|
||||
expect(redirect).toHaveBeenCalledWith("/");
|
||||
});
|
||||
});
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { SignalsRoute } from "../terminal";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default function Page() {
|
||||
return <SignalsRoute />;
|
||||
redirect("/");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { describe, expect, it } from "bun:test";
|
||||
import {
|
||||
NAV_ITEMS,
|
||||
buildDefaultFlowFilters,
|
||||
classifierToneForFamily,
|
||||
deriveAlertDirection,
|
||||
|
|
@ -40,9 +41,9 @@ const makeAlert = (overrides: Record<string, unknown> = {}) =>
|
|||
}) as any;
|
||||
|
||||
describe("live manifest", () => {
|
||||
it("includes options on every live route", () => {
|
||||
it("includes options on home and tape", () => {
|
||||
const filters = buildDefaultFlowFilters();
|
||||
for (const pathname of ["/", "/tape", "/signals", "/charts", "/replay"]) {
|
||||
for (const pathname of ["/", "/tape"]) {
|
||||
expect(
|
||||
getLiveManifest(pathname, "SPY", 60000, filters).some(
|
||||
(subscription) => subscription.channel === "options"
|
||||
|
|
@ -61,17 +62,38 @@ describe("live manifest", () => {
|
|||
expect(tapeOptionsSubscriptions).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("keeps option filters on baseline subscription", () => {
|
||||
it("keeps option filters on baseline subscription across page changes", () => {
|
||||
const filters = {
|
||||
...buildDefaultFlowFilters(),
|
||||
minNotional: 125_000
|
||||
};
|
||||
|
||||
const optionsSubscription = getLiveManifest("/signals", "SPY", 60000, filters).find(
|
||||
const homeOptionsSubscription = getLiveManifest("/", "SPY", 60000, filters).find(
|
||||
(subscription) => subscription.channel === "options"
|
||||
);
|
||||
const tapeOptionsSubscription = getLiveManifest("/tape", "SPY", 60000, filters).find(
|
||||
(subscription) => subscription.channel === "options"
|
||||
);
|
||||
|
||||
expect(optionsSubscription?.filters).toBe(filters);
|
||||
expect(homeOptionsSubscription?.filters).toBe(filters);
|
||||
expect(tapeOptionsSubscription?.filters).toBe(filters);
|
||||
});
|
||||
|
||||
it("applies global flow filters to flow subscriptions on home and tape", () => {
|
||||
const filters = {
|
||||
...buildDefaultFlowFilters(),
|
||||
minNotional: 50_000
|
||||
};
|
||||
|
||||
const homeFlowSubscription = getLiveManifest("/", "SPY", 60000, filters).find(
|
||||
(subscription) => subscription.channel === "flow"
|
||||
);
|
||||
const tapeFlowSubscription = getLiveManifest("/tape", "SPY", 60000, filters).find(
|
||||
(subscription) => subscription.channel === "flow"
|
||||
);
|
||||
|
||||
expect(homeFlowSubscription?.filters).toBe(filters);
|
||||
expect(tapeFlowSubscription?.filters).toBe(filters);
|
||||
});
|
||||
|
||||
it("includes scoped option and equity subscriptions", () => {
|
||||
|
|
@ -101,6 +123,15 @@ describe("live manifest", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("terminal navigation", () => {
|
||||
it("exposes only Home and Tape as top-level destinations", () => {
|
||||
expect(NAV_ITEMS).toEqual([
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/tape", label: "Tape" }
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("live tape pausable helpers", () => {
|
||||
it("queues new items while paused and flushes them on resume", () => {
|
||||
let state = reducePausableTapeData(
|
||||
|
|
|
|||
|
|
@ -2291,7 +2291,6 @@ export const getLiveManifest = (
|
|||
if (pathname === "/tape") {
|
||||
return dedupeLiveSubscriptions([
|
||||
...baselineSubs,
|
||||
{ channel: "options", filters: flowFilters, ...optionScope },
|
||||
{ channel: "nbbo" },
|
||||
{ channel: "equities", ...equityScope },
|
||||
{ channel: "flow", filters: flowFilters },
|
||||
|
|
@ -2299,32 +2298,10 @@ export const getLiveManifest = (
|
|||
]);
|
||||
}
|
||||
|
||||
if (pathname === "/signals") {
|
||||
return dedupeLiveSubscriptions([
|
||||
...baselineSubs,
|
||||
{ channel: "alerts" },
|
||||
{ channel: "classifier-hits" },
|
||||
{ channel: "inferred-dark" }
|
||||
]);
|
||||
}
|
||||
|
||||
if (pathname === "/charts") {
|
||||
return dedupeLiveSubscriptions([
|
||||
...baselineSubs,
|
||||
...chartSubs,
|
||||
{ channel: "classifier-hits" },
|
||||
{ channel: "inferred-dark" }
|
||||
]);
|
||||
}
|
||||
|
||||
if (pathname === "/replay") {
|
||||
return baselineSubs;
|
||||
}
|
||||
|
||||
return dedupeLiveSubscriptions([
|
||||
...baselineSubs,
|
||||
{ channel: "equities", ...equityScope },
|
||||
{ channel: "flow" },
|
||||
{ channel: "flow", filters: flowFilters },
|
||||
{ channel: "alerts" },
|
||||
{ channel: "classifier-hits" },
|
||||
{ channel: "inferred-dark" },
|
||||
|
|
@ -4104,6 +4081,40 @@ const useTerminalState = () => {
|
|||
useEffect(() => {
|
||||
setReplaySource(null);
|
||||
}, [mode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedAlert && !selectedClassifierHit && !selectedDarkEvent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const dismissDrawers = () => {
|
||||
setSelectedAlert(null);
|
||||
setSelectedClassifierHit(null);
|
||||
setSelectedDarkEvent(null);
|
||||
};
|
||||
|
||||
const handlePointerDown = (event: MouseEvent) => {
|
||||
if ((event.target as Element | null)?.closest(".drawer")) {
|
||||
return;
|
||||
}
|
||||
dismissDrawers();
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
dismissDrawers();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [selectedAlert, selectedClassifierHit, selectedDarkEvent]);
|
||||
|
||||
const optionsScroll = useListScroll();
|
||||
const equitiesScroll = useListScroll();
|
||||
const flowScroll = useListScroll();
|
||||
|
|
@ -5174,13 +5185,10 @@ const useTerminal = (): TerminalState => {
|
|||
return value;
|
||||
};
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ href: "/", label: "Overview" },
|
||||
{ href: "/tape", label: "Tape" },
|
||||
{ href: "/signals", label: "Signals" },
|
||||
{ href: "/charts", label: "Charts" },
|
||||
{ href: "/replay", label: "Replay" }
|
||||
];
|
||||
export const NAV_ITEMS = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/tape", label: "Tape" }
|
||||
] as const;
|
||||
|
||||
type PageFrameProps = {
|
||||
title: string;
|
||||
|
|
@ -5221,6 +5229,7 @@ const FlowFilterSection = ({
|
|||
};
|
||||
|
||||
export const FlowFilterPopover = ({ filters, onChange }: FlowFilterPopoverProps) => {
|
||||
const pathname = usePathname();
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const activeCount = countActiveFlowFilterGroups(filters);
|
||||
|
|
@ -5279,6 +5288,10 @@ export const FlowFilterPopover = ({ filters, onChange }: FlowFilterPopoverProps)
|
|||
};
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
setOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<div className={`flow-filter-popover${open ? " is-open" : ""}`} ref={rootRef}>
|
||||
<button
|
||||
|
|
@ -5443,62 +5456,6 @@ const ShellMetricStrip = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const FeedStatusBar = () => {
|
||||
const state = useTerminal();
|
||||
const feeds = [
|
||||
{ label: "Opt", feed: state.options },
|
||||
{ label: "Eq", feed: state.equities },
|
||||
{ label: "Flow", feed: state.flow },
|
||||
{ label: "Alert", feed: state.alerts },
|
||||
{ label: "Rule", feed: state.classifierHits },
|
||||
{ label: "Dark", feed: state.inferredDark }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="feed-status-bar">
|
||||
{feeds.map(({ label, feed }) => (
|
||||
<div className={`feed-status feed-status-${feed.status}`} key={label}>
|
||||
<span className="feed-status-dot" />
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const OverviewBrief = () => {
|
||||
const state = useTerminal();
|
||||
|
||||
return (
|
||||
<div className="overview-strip">
|
||||
<div className="overview-cell">
|
||||
<span className="overview-label">Options</span>
|
||||
<strong>{formatFlowMetric(state.filteredOptions.length)}</strong>
|
||||
</div>
|
||||
<div className="overview-cell">
|
||||
<span className="overview-label">Equities</span>
|
||||
<strong>{formatFlowMetric(state.filteredEquities.length)}</strong>
|
||||
</div>
|
||||
<div className="overview-cell">
|
||||
<span className="overview-label">Flow</span>
|
||||
<strong>{formatFlowMetric(state.filteredFlow.length)}</strong>
|
||||
</div>
|
||||
<div className="overview-cell">
|
||||
<span className="overview-label">Alerts</span>
|
||||
<strong>{formatFlowMetric(state.filteredAlerts.length)}</strong>
|
||||
</div>
|
||||
<div className="overview-cell">
|
||||
<span className="overview-label">Rules</span>
|
||||
<strong>{formatFlowMetric(state.filteredClassifierHits.length)}</strong>
|
||||
</div>
|
||||
<div className="overview-cell">
|
||||
<span className="overview-label">Dark</span>
|
||||
<strong>{formatFlowMetric(state.filteredInferredDark.length)}</strong>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type OptionsPaneProps = {
|
||||
limit?: number;
|
||||
};
|
||||
|
|
@ -6356,11 +6313,19 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
|||
|
||||
<div className="terminal-frame">
|
||||
<header className="terminal-topbar">
|
||||
<FeedStatusBar />
|
||||
<div className="terminal-topbar-actions">
|
||||
<div className="terminal-topbar-controls">
|
||||
{state.selectedInstrumentLabel ? (
|
||||
<span className="instrument-focus-chip">
|
||||
<span>{state.selectedInstrumentLabel}</span>
|
||||
<button type="button" onClick={() => state.setSelectedInstrument(null)}>
|
||||
Clear
|
||||
</button>
|
||||
</span>
|
||||
) : null}
|
||||
<FlowFilterControls />
|
||||
<label className="terminal-filter">
|
||||
<span className="terminal-filter-label">Filter</span>
|
||||
<span className="terminal-filter-label">Ticker</span>
|
||||
<span className="terminal-filter-field">
|
||||
<input
|
||||
className="terminal-input"
|
||||
|
|
@ -6379,14 +6344,6 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
|||
>
|
||||
Clear
|
||||
</button>
|
||||
{state.selectedInstrumentLabel ? (
|
||||
<span className="instrument-focus-chip">
|
||||
<span>{state.selectedInstrumentLabel}</span>
|
||||
<button type="button" onClick={() => state.setSelectedInstrument(null)}>
|
||||
Clear
|
||||
</button>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="terminal-topbar-mode">
|
||||
<button
|
||||
|
|
@ -6436,13 +6393,11 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
|||
|
||||
export function OverviewRoute() {
|
||||
return (
|
||||
<PageFrame title="Overview">
|
||||
<OverviewBrief />
|
||||
<div className="page-grid page-grid-overview">
|
||||
<PageFrame title="Home">
|
||||
<div className="page-grid page-grid-home">
|
||||
<ChartPane />
|
||||
<AlertsPane limit={12} withStrip />
|
||||
<FlowPane limit={12} />
|
||||
<EquitiesPane limit={12} />
|
||||
<EquitiesPane />
|
||||
<AlertsPane withStrip />
|
||||
</div>
|
||||
</PageFrame>
|
||||
);
|
||||
|
|
@ -6450,7 +6405,7 @@ export function OverviewRoute() {
|
|||
|
||||
export function TapeRoute() {
|
||||
return (
|
||||
<PageFrame title="Tape" actions={<FlowFilterControls />}>
|
||||
<PageFrame title="Tape">
|
||||
<div className="page-grid page-grid-tape">
|
||||
<OptionsPane />
|
||||
<EquitiesPane />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue