Mobile [UI]

# Mobile `[UI]`

Mobile is a **separate focused path, not a squeeze** — a different component tree around the same store. Three surfaces collapse to pill navigation.

## Domain workspace (`MobileWorkspace`)

**Seven** pill groups, **Chat centred** — three flanking each side. The old 6-leaf "Watch" catch-all
is split into a tighter **Research** (the research engine) and a **Reason** group (the mind surfaces),
and **Kanban** is promoted to its own pill (ad-hoc todo work is a first-class task, not buried in
Watch). Gated groups (Signals · Research · Reason · Plan need contributor+) drop out cleanly for
viewers, who then see just **Chat · Kanban · Outline**.

```mermaid
flowchart LR
    subgraph left [" "]
      direction LR
      S["**Signals**<br/>Streams · Threads · Merges<br/><i>contributor+</i>"]
      W["**Research**<br/>Cycles · Query · Runs · Articles<br/><i>contributor+</i>"]
      R["**Reason**<br/>Graphs · Readings · Positions<br/><i>contributor+</i>"]
    end
    C["**Chat**<br/>(centre, default)"]
    subgraph right [" "]
      direction LR
      K["**Kanban**<br/>(ad-hoc todo)"]
      Pl["**Plan**<br/>Operations · Reminders<br/><i>contributor+</i>"]
      O["**Outline**<br/>Summaries / List / Notes / Members"]
    end
    S --- W --- R --- C --- K --- Pl --- O
```

Pill order left → right: **Signals · Research · Reason | Chat | Kanban · Plan · Outline**.

## Constellation (`MOBILE_NAV`)

Also **seven** pills, Chat centred. **Kanban** (ad-hoc todo across the portfolio) is its own pill, and
the portfolio readouts split into **Manage** (Domains · Graph · Members) and **Analytics** (Runs ·
Context · Growth).

```mermaid
flowchart LR
    subgraph cleft [" "]
      direction LR
      cp["**Program**"]
      cs["**Steer**<br/>Notes · Streams · Merges · Position"]
      cnw["**News**<br/>Newsletter · Articles · Operations · Reminders"]
    end
    cc["**Chat**<br/>(centre)"]
    subgraph cright [" "]
      direction LR
      ck["**Kanban**"]
      cm["**Manage**<br/>Domains · Graph · Members"]
      ca["**Analytics**<br/>Runs · Context · Growth"]
    end
    cp --- cs --- cnw --- cc --- ck --- cm --- ca
```

Pill order left → right: **Program · Steer · News | Chat | Kanban · Manage · Analytics**.

## Home

The spine collapses to a drawer; the Domains tab is a 2-column grid of rounded-square tiles (`MobileHomeGrid` — constellation folders + independent domains intermixed by recency; a folder tile opens a modal listing its member domains). Opening a domain routes to `MobileWorkspace`.

- **Deep-links land on real leaves.** `phone-route.ts` is the pure projection of a navigation onto the pill's leaves (`phoneRouteForView` / `phoneRouteForFocus`): a `?view=notes` / `?note=` intent lands on **Outline's Notes lens** (the lens is shell-controlled so a link can name it), the scene-scoped Position surfaces drill straight into their detail, and a surface the phone has no leaf for routes nowhere rather than bouncing. `?game=1` opens the Scenario table; `?slides=1` (desktop-only player) lands on Outline → Summaries.
- Desktop equivalents: [ui/workspace-shell](workspace-shell.md) · [ui/center-views](center-views.md) · [ui/constellation](constellation.md) · [ui/home-console](home-console.md).
- Program story bars (`DomainStoriesBar` / `ConstellationStoriesBar`) are importance-ranked per channel — same projection as desktop ([flows/story-pipeline](../flows/story-pipeline.md)).

Raw Markdown source