Skip to main content

​
App shell

The frame around every screen except login. Owned by FE-Platform. The shell stays still during route changes (its parts have their own view-transition-name).

​
Breakpoints

Pointer type, not width, decides touch sizing: (pointer: coarse) switches ladder rows to 44 px and grows hit areas (tokens.md).

​
Desktop (1440 × 900)

(The top bar is one 48 px row; it is drawn on three lines above only to fit the page. Rail items are a 20 px icon over the label: [radio] Live, [star] Watchlist, [briefcase] Portfolio, [list-ordered] Orders, [bell] Alerts, [settings] Settings. The numbers above Orders and Alerts are their count badges.)

​
Top bar (48 px, --card, 1 px --border bottom)

Left to right, 12 px gaps, 16 px side padding: The top bar never wraps. Below 1280 px, the Exposure counter hides first, then the search trigger shrinks to an icon button.

​
Left rail (64 px, full height below the top bar)

  • Items 64 × 56: 20 px icon over an 11 px label. Live, Watchlist, Portfolio, Orders, Alerts; Settings pinned to the bottom.
  • Active item: --accent bg, --foreground icon and label, 2 px --foreground bar on the left edge. Inactive: --muted-foreground.
  • Badges: Orders shows the open-order count; Alerts shows the unread notification count (alerts.md). 16 px pill, label text, --secondary bg (never red or green).
  • Hover preloads the route (preload: "intent").

​
Ladder dock (right side, Live and Watchlist)

  • Up to 4 slots, 232 px each, separated by 1 px --border. Slots fill left to right.
  • The route content (board, watchlist) keeps a minimum of 440 px; the slot count comes from the breakpoint formula.
  • Opening a ladder (row click, Enter, Alt+Enter in the palette): uses the next free slot. With all slots full, it replaces the least recently focused unpinned ladder. If all are pinned, the toast All ladders pinned appears and nothing opens.
  • Closing a ladder: its slot becomes an empty gap while the pointer is over the dock; when the pointer leaves, the remaining ladders close up in one frame. So a ladder never slides under the pointer.
  • Docked ladders and their pin state persist across routes and reloads (layouts).
  • On other routes, the dock is hidden but keeps its ladders.

​
Bottom dock

  • Collapsed: a 32 px bar across the content and ladder area. [chevron-up] toggle, then counts: Positions 12 · Orders 7 · Fills today 23. Clicking a count opens that tab.
  • Expanded: 240 px by default; drag the top edge between 160 and 480 px. Height is saved in layouts. Toggle with `.
  • Tabs (36 px): Positions, Orders, Fills. Each is a focusable panel (hotkeys in interactions.md).
    • Positions: position rows as in portfolio.md, without group headers, with the Exit, Join, Add and cancel-orders ([x] N) actions.
    • Orders: order rows as in orders.md, with steppers and cancel.
    • Fills: today’s fills, newest first: time, market, side, price, size, value. Read-only.
  • It collapses automatically on the Portfolio and Orders routes (same data); the user can still open it there.
  • Its data stays live when collapsed (the counts update).

​
Mobile (390 × 844)

Tab icons: [radio] Live, [star] Watchlist, [briefcase] Portfolio, [list-ordered] Orders, [search] Search. Other mobile wireframes draw this header as one line, app header, and the tab bar as tab bar.

​
Header (52 px + top inset, --card, sticky, --z-topbar)

Sheets and their dimmed overlay start below the header (top: header height + top inset), so Cancel all and Safe/Armed are never covered or dimmed, even with the ladder sheet open. Only the full-screen palette and dialogs cover the header.

​
Stake bar (44 px)

On Live and Watchlist, pinned above the tab bar; also inside the ladder sheet footer. Stake $ label and equal-width segments (components.md).

​
Tab bar (56 px + bottom inset, --z-rail)

  • Five tabs, each ≥ 78 × 56: Live, Watchlist, Portfolio, Orders (open-order badge), Search.
  • Search opens the palette full screen (command-palette.md).
  • Tapping the active tab scrolls its list to the top (scroll-behavior: smooth).
  • Tabs stay mounted; switching keeps scroll and state.

​
Alerts and Settings on mobile

Reached from the logo menu sheet or the palette (> alerts, > settings). They open as full-screen routes with a back button in place of the logo.