> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sesameterminal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# App shell

# 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

| Viewport width | Layout |
| - | - |
| \< 768 | Mobile: header, content, optional stake bar, tab bar |
| 768–1279 | Desktop layout; rail shows icons only (48 px, labels in tooltips); ladder slots = `floor((width − rail − 440) / 232)`, at least 1 |
| ≥ 1280 | Full desktop; rail 64 px with labels; up to 4 ladder slots, same formula |

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

## Desktop (1440 × 900)

```
x: 0    64                                           512           744           976          1208        1440
   ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐ y 0
   │ [logo] [Polymarket] [[search] Search markets, teams, #tags  Ctrl K]   Cash       Exposure   Orders     │
   │                                                                       $1,234.56  $3,210.00  7          │
   │         (dot) Live   Stake $ [10|25|50|100]  [ Safe | Armed ]  [[x] Cancel all  7]  [moon]  [menu]     │ 48
   ├────┬────────────────────────────────────────────┬─────────────┬─────────────┬─────────────┬────────────┤
   │    │                                            │ Ladder 1    │ Ladder 2    │ Ladder 3    │ Ladder 4   │
   │Live│  Route content                             │ 232         │ 232         │ 232         │ 232        │
   │    │  (board: min 440 px wide)                  │             │             │             │            │
   │    │                                            │             │             │             │            │
   │Wtch│                                            │ (dock: Live │ and Watch-  │ list only)  │            │
   │    │                                            │             │             │             │            │
   │    │                                            │             │             │             │            │
   │Port│                                            │             │             │             │            │
   │   7│                                            │             │             │             │            │
   │Ordr│                                            │             │             │             │            │
   │   2│                                            │             │             │             │            │
   │Alrt│                                            │             │             │             │            │
   │    │                                            │             │             │             │            │
   │Sett│                                            │             │             │             │            │
   │    ├────────────────────────────────────────────┴─────────────┴─────────────┴─────────────┴────────────┤ 868
   │    │ [chevron-up]  Positions 12 · Orders 7 · Fills today 23                           bottom dock (32) │
   └────┴───────────────────────────────────────────────────────────────────────────────────────────────────┘ 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:

| Item | Size | Behaviour |
| - | - | - |
| Logo mark | 24 × 24 | Link to Live |
| Venue badge | 24 px pill, `--secondary` | `Polymarket`. Static today; becomes the venue filter when Yeet arrives |
| Search trigger | 320 × 32, `--muted` bg, `--muted-foreground` text, `Ctrl K` key hint | Opens the command palette |
| (spacer) | flex | |
| Cash / Exposure / Orders | Each: caption label over numeric value, min 96 px, right-aligned | Cash and Exposure link to Portfolio; Orders links to Orders. Values change instantly (never tweened). Stale-styled when the account feed is stale |
| Status pill | 24 px | Worst feed state; click opens the per-feed popover (components.md) |
| Stake selector | `Stake $` + segments 40 × 32 | components.md |
| Safe/Armed switch | 120 × 32 | components.md. When Armed, a 2 px `--warning` line runs along the top edge of the top bar |
| Cancel all | min 132 × 32 | components.md. Hotkey `Mod+Shift+X` |
| Theme toggle | icon 32 × 32 | Switches between dark and light and saves `theme_mode`. `system` is set in Settings |
| Menu | icon 32 × 32 | Settings, Hotkeys (`?`), Log out |

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](alerts.md#unread-count)). 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](portfolio.md), without group
    headers, with the Exit, Join, Add and cancel-orders (`[x] N`) actions.
  * **Orders:** order rows as in [orders.md](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)

```
   ┌──────────────────────────────────────┐
   │            (top safe area)           │
   ├──────────────────────────────────────┤ 0
   │ [logo] $1,234.56 (dot)               │ header 52: one row, drawn on two lines
   │              [ Safe | Armed ] [[x] 7]│
   ├══════════════════════════════════════┤ ← 2 px --warning line when Armed
   │                                      │
   │  Route content                       │
   │  (scrolls under the header)          │
   │                                      │
   │                                      │
   │                                      │
   │                                      │
   ├──────────────────────────────────────┤
   │ Stake $ [  10  |  25  |  50  | 100 ] │ stake bar 44 (Live, Watchlist)
   ├──────────────────────────────────────┤
   │                            7         │ tab bar 56: icon over label, count badge
   │ Live   Watch  Portfolio Orders Search│
   ├──────────────────────────────────────┤
   │           (bottom safe area)         │
   └──────────────────────────────────────┘
```

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`)

| Item | Visual / hit | Behaviour |
| - | - | - |
| Logo button | 24 / 44 × 44 | Opens the menu sheet: Alerts, Settings, Theme, Log out. Carries the unread notification count badge, as does the sheet's Alerts item |
| Cash | numeric (14/20 bold) | Tap: popover with cash, exposure, open orders |
| Status dot | 8 px / 44 × 44 | `--bid` live, `--warning` stale or reconnecting, `--destructive` disconnected or geoblocked, `--muted-foreground` trading off. Tap: status sheet with the per-feed list |
| Safe/Armed | 96 × 32 / 44 tall | components.md |
| Cancel all | 64 × 32 / 44 × 44 | `[x] 7`. Always visible, including above open sheets |

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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.