chore(release): cut 0.1.83

Wait for the initial background turn to actually start before create returns a snapshot, without waiting for completion.

Freshly created agents now surface start failures as create failures, and both the WS/client and MCP surfaces reflect the shared create-agent lifecycle helper.

CHANGELOG.md

@@ -1,5 +1,70 @@
 # Changelog
 
+## 0.1.83 - 2026-05-26
+
+### Fixed
+
+- Creating an agent via MCP now waits for it to actually start, so failures surface as a clear create error
+- Scheduling an agent via MCP no longer rejects blank cadence placeholders
+- Draft messages show the agent mode chip again on models without thinking options
+
+## 0.1.82 - 2026-05-26
+
+### Added
+
+- **Rewind chat or files from any user message** ([#1154](https://github.com/getpaseo/paseo/pull/1154))
+- **See the cumulative cost of an agent session** ([#1163](https://github.com/getpaseo/paseo/pull/1163))
+- **Drop files onto the terminal to insert their paths** ([#1173](https://github.com/getpaseo/paseo/pull/1173))
+- **Tap a file path in the terminal to open it in the workspace preview** ([#1174](https://github.com/getpaseo/paseo/pull/1174))
+- **Approve OpenCode permissions for the whole session** ([#1168](https://github.com/getpaseo/paseo/pull/1168))
+- **Workspace scripts now appear on the mobile header** ([#1093](https://github.com/getpaseo/paseo/pull/1093) by [@ayhanmalkoc](https://github.com/ayhanmalkoc))
+- Devin CLI in the ACP provider catalog (by [@Alcimerio](https://github.com/Alcimerio))
+- OpenCode agents show their mode colors
+
+### Improved
+
+- Mobile terminal keyboard hides when you open a sidebar
+- Tool activity for read, write, and OpenCode tools renders more consistently ([#1171](https://github.com/getpaseo/paseo/pull/1171))
+- Compact workspace header actions are tidier
+- Settings latency readouts are easier to scan ([#1170](https://github.com/getpaseo/paseo/pull/1170))
+- Pull request merge is available as soon as GitHub reports the PR is ready ([#1172](https://github.com/getpaseo/paseo/pull/1172))
+
+### Fixed
+
+- Mobile slash command autocomplete no longer flickers or mis-layers
+- Interrupting an OpenCode agent returns it to idle instead of showing an error ([#1169](https://github.com/getpaseo/paseo/pull/1169))
+- Provider model selection per workspace is honored ([#1167](https://github.com/getpaseo/paseo/pull/1167))
+- Draft composer keeps the permission mode you selected ([#1175](https://github.com/getpaseo/paseo/pull/1175))
+- Terminal color queries no longer return malformed replies
+- File links in chat no longer crash when a message contains a bare '%' (by [@Elliotwu-7](https://github.com/Elliotwu-7))
+
+## 0.1.81 - 2026-05-24
+
+### Added
+
+- **Paseo can now be installed as a web app from supported browsers** ([#1144](https://github.com/getpaseo/paseo/pull/1144))
+- **Pi extension dialogs now appear as Paseo permission prompts** ([#1134](https://github.com/getpaseo/paseo/pull/1134) by [@yuruiz](https://github.com/yuruiz))
+- Added community links and a home button to the sidebar
+
+### Improved
+
+- **Mobile terminals load faster and restore existing output more smoothly** ([#1147](https://github.com/getpaseo/paseo/pull/1147))
+- Copying assistant messages preserves formatting
+- Agent metadata fallback failures now log each provider attempt for easier debugging
+
+### Fixed
+
+- Android: slash command suggestions stay interactive when opened from the composer
+- macOS: Alt+letter shortcuts work again
+- Terminal panes no longer flicker during resize
+- OpenCode MCP servers are injected once instead of being connected twice
+- Import session no longer shows empty sessions
+- Worktree archive status no longer reports false unpushed commits ([#1158](https://github.com/getpaseo/paseo/pull/1158))
+- The `/exit`, `/quit`, and `/q` slash command aliases now show as one row
+- Shortcut chord badges are readable in light mode
+- Segmented controls show their track under every segment
+- Sheet header search text is readable in dark mode
+
 ## 0.1.80 - 2026-05-21
 
 ### Fixed

CLAUDE.md

@@ -32,6 +32,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
 | [docs/design.md](docs/design.md)                               | Theme tokens — colors, fonts, spacing, radii, icons                                                                            |
 | [docs/hover.md](docs/hover.md)                                 | Hover — the canonical pattern (plain View + onPointerEnter/Leave, separate inner Pressable) and the three ways agents break it |
 | [docs/unistyles.md](docs/unistyles.md)                         | Unistyles gotchas — `useUnistyles()` is forbidden, alternatives in order                                                       |
+| [docs/floating-panels.md](docs/floating-panels.md)             | Anchored popovers — Portal/Modal escape for Android, lifecycle gates, keyboard-shared-value, status-bar offset, the flash      |
 | [docs/file-icons.md](docs/file-icons.md)                       | Material icon theme integration for the file explorer                                                                          |
 | [docs/providers.md](docs/providers.md)                         | Adding a new agent provider end-to-end                                                                                         |
 | [docs/custom-providers.md](docs/custom-providers.md)           | Custom provider config: Z.AI, Alibaba/Qwen, ACP agents, profiles, custom binaries                                              |

docs/agent-lifecycle.md

@@ -56,7 +56,7 @@ The asymmetry is intentional: a subagent's home is the parent's track, not the t
 
 ## The subagents track
 
-The collapsible section above the composer in an agent's pane (`packages/app/src/subagents/subagents-section.tsx`). Membership rule (`packages/app/src/subagents/subagents.ts`):
+The collapsible track above the composer in an agent's pane (`packages/app/src/subagents/track.tsx`). Membership rule (`packages/app/src/subagents/select.ts`):
 
 ```
 parentAgentId === thisAgent.id  AND  !archivedAt

docs/architecture.md

@@ -79,6 +79,7 @@ Cross-platform React Native app that connects to one or more daemons.
 - Expo Router navigation (`/h/[serverId]/workspace/[workspaceId]`, `/h/[serverId]/agent/[agentId]`, etc.)
 - `HostRuntimeController` manages saved host connections, reconnection, and per-host runtime state
 - `SessionContext` wraps the daemon client for the active session
+- Composer UI and submit/draft behavior live in `packages/app/src/composer/`; screens and panels should integrate it from there instead of dropping composer internals into `components/`, `hooks/`, or `screens/workspace/`
 - Timeline reducers in `timeline/session-stream-reducers.ts` handle compaction, gap detection, sequence-based deduplication
 - Voice features: dictation (STT) and voice agent (realtime)
 

docs/development.md

@@ -187,6 +187,20 @@ Point Playwright MCP at the running Expo web target. Under `npm run dev` (macOS/
 
 Do NOT use browser history (back/forward). Always navigate by clicking UI elements or using `browser_navigate` with the full URL — the app uses client-side routing and browser history breaks state.
 
+## App web deploys
+
+`packages/app` exports a single-page Expo web app and deploys the `dist/`
+directory to Cloudflare Pages with `npm run deploy:web --workspace=@getpaseo/app`.
+
+PWA install metadata lives in `packages/app/public/manifest.json` and is linked
+from `packages/app/public/index.html`. Keep the install icons in `public/` so
+Cloudflare serves them from stable root URLs after `expo export`.
+
+Do not add service-worker caching casually. Paseo is a live control surface for
+agents, and an aggressive service worker can strand installed users on stale web
+code. If offline behavior becomes a product requirement, add it deliberately
+with an update strategy and test the installed-app upgrade path.
+
 ## Expo troubleshooting
 
 ```bash

docs/floating-panels.md

@@ -0,0 +1,179 @@
+# Floating Panels
+
+Anchored popovers — tooltips, hover cards, dropdowns, autocompletes — that visually
+float above an anchor element on iOS, Android, and web. This doc captures the
+non-obvious traps. It is **not** a tutorial; it assumes you have seen the
+canonical files and are trying to add or change one.
+
+## Canonical files
+
+| File                                     | Use case                                                          |
+| ---------------------------------------- | ----------------------------------------------------------------- |
+| `components/ui/combobox.tsx`             | Anchored picker with search; mobile falls back to bottom sheet    |
+| `components/ui/tooltip.tsx`              | Non-interactive hover/long-press tooltip                          |
+| `components/workspace-hover-card.tsx`    | Desktop-web hover card with measure + computePosition + Portal    |
+| `components/ui/autocomplete-popover.tsx` | Slash-command autocomplete anchored to the focused composer input |
+
+Each handles a different mix of concerns: combobox owns input focus, tooltip is
+non-interactive, hover-card is web-only desktop, autocomplete keeps the composer
+input focused while its scrollable list lives in a Portal. There is no shared
+"floating panel" primitive yet — when a fifth use case shows up we can revisit;
+until then prefer copying the closest file and trimming.
+
+## Gotcha 1 — Android touch hit-test by parent bounds
+
+On Android, a child View whose bounds fall outside its parent's bounds renders
+correctly (with `overflow: visible`, the default) but **does not receive touch
+events**. `ViewGroup.dispatchTouchEvent` filters touches by the parent's hit
+rect first, then iterates children. A touch in the overflowing region never
+reaches the parent, let alone the child. iOS and web do not share this rule —
+iOS hit-test descends into overflowing children, web uses standard CSS pointer
+events. This is the bug that put autocomplete on this path: the popover was
+positioned `bottom: 100%` of its parent and worked on iOS/web for months;
+Android touches sailed straight through to the chat scroll view behind it.
+
+Two escape hatches in the codebase:
+
+- **`Modal`** (combobox, tooltip on native) — opens a new Android window, so
+  hit-testing starts fresh in that window. Side effect: a Modal opening on
+  Android can detach the IME from an underlying TextInput. Fine for combobox
+  (it has its own input) and tooltip (no input). **Not** fine for autocomplete
+  (the composer's input must stay focused so the user keeps typing).
+- **`<Portal>` from `@gorhom/portal`** (hover-card, autocomplete-popover) —
+  hoists the React subtree to a fixed mount point whose bounds cover the
+  screen. Same window, same IME, hit-test works because the new parent is
+  full-screen. This is the right default when you must keep IME attachment.
+  Choose the host by layer: app-global overlays use the root host; content
+  overlays can use the current `FloatingPanelPortalHost` so sliding sidebars
+  cover them.
+
+Choose Modal vs Portal by whether the underlying input can lose its keyboard.
+
+## Gotcha 2 — Portal breaks lifecycle and coordinate-system inheritance
+
+A Portal escapes Android's hit-test, but it also escapes two things you were
+quietly relying on:
+
+- **Lifecycle.** The portal'd subtree mounts at the app root, not inside your
+  component's natural ancestor chain. When the user navigates away, your
+  component may stay mounted (offscreen, in a tab) — the popover stays with it.
+  Gate `visible` on a screen-focus signal. For panes inside `agent-panel`, the
+  `isPaneFocused` prop already exists and flips on pane switches; pass
+  `visible={isYourOwnVisible && isPaneFocused}`.
+- **Transforms.** The composer is wrapped in a Reanimated `Animated.View` with
+  `translateY: -keyboardShift` (see `use-keyboard-shift-style.ts`). The chat
+  content has the same transform applied (`agent-panel.tsx:939`). They move
+  together because they share the SharedValue. A portal'd popover is outside
+  the composer tree — it does not get that transform unless you apply it
+  yourself.
+- **Layering.** The default root host renders after app content, so it sits
+  above compact sidebars. Content overlays that must sit below sidebars should
+  use the current `FloatingPanelPortalHost`.
+- **Coordinate systems.** `measureInWindow` gives window coordinates. A Portal
+  renders inside its host, not necessarily at window origin. Position anchored
+  content relative to the host: `anchorRect - hostRect`. This is what
+  `measureFloatingPanelPortalHost()` is for.
+
+The fix for transforms is Gotcha 3.
+
+## Gotcha 3 — Reanimated transforms vs `measureInWindow`
+
+`measureInWindow` returns the view's _current_ screen position. In theory that
+includes Reanimated-applied transforms (Reanimated updates native view
+properties, and Android's `getLocationInWindow` reads transformed coords). In
+practice it's racy — the measurement may snapshot mid-animation, and on Android
+with Reanimated worklets the result is not always stable.
+
+If the panel cannot stay inside the transformed ancestor, do not try to track
+the keyboard by re-measuring on every frame. Instead,
+**slave the popover's transform to the same SharedValue the composer uses**:
+
+1. Snapshot `openShift = shift.value` at the moment you measure the anchor.
+2. Apply `useAnimatedStyle(() => ({ transform: [{ translateY: openShift.value - shift.value }] }))`
+   to the popover wrapper.
+
+When `shift` equals `openShift`, the translate is 0 and the popover sits at
+the measured position. When the keyboard moves afterward, the delta translates
+the popover by exactly the amount the composer translates. They move in
+lockstep, no re-measurement needed.
+
+Re-measure on `Keyboard.addListener('keyboardDidShow'|'keyboardDidHide')` only
+to refresh the snapshot if the keyboard was mid-transition when the popover
+opened.
+
+## Gotcha 4 — Host-relative positioning before platform offsets
+
+The generic anchored-overlay rule is:
+
+1. Measure the anchor with `measureInWindow`.
+2. Measure the Portal host with `measureFloatingPanelPortalHost(hostName)`.
+3. Position with anchor coordinates relative to the host:
+
+```ts
+left = anchorRect.x - hostRect.x;
+bottom = hostRect.height - (anchorRect.y - hostRect.y) + offset;
+```
+
+Do this before adding any platform offset. If anchor and host are both measured
+with `measureInWindow`, Android's status-bar coordinate behavior cancels out.
+Only add a status-bar offset when the render surface is not measured in the same
+coordinate system. See `tooltip.tsx` for that separate case.
+
+## Gotcha 5 — The two-measurement flash
+
+If your popover needs `top` (or `left`) computed from both:
+
+- the anchor's screen position (`anchorRect` from `measureInWindow`), **and**
+- the popover's own size (`contentSize` from `onLayout`),
+
+then a naïve implementation will flash through three positions on every open:
+
+1. **Frame 1** — render with `top: -9999` (or any placeholder) while waiting
+   for either measurement. Wrapper has no `width`, so the inner content lays
+   out at its natural (often narrow) intrinsic width.
+2. **Frame 2** — `anchorRect` lands. Wrapper now has `width: anchorRect.width`.
+   But the stale `onLayout` from frame 1 has already set `contentSize` to the
+   narrow-width dimensions. `top = anchorRect.y - wrongHeight - gap` — visible
+   at the wrong spot.
+3. **Frame 3** — real `onLayout` fires with the correct width. `contentSize`
+   updates. Position snaps to the right place.
+
+The visible jump in frame 2 is the flash. Two pieces solve it, and you need
+both:
+
+- **Do not mount the floating content until `anchorRect` is set.** Return
+  `null` until then. This prevents the bad-width onLayout from happening at
+  all.
+- **Once `anchorRect` is set but `contentSize` isn't, render the wrapper with
+  the final width but `opacity: 0`.** The first visible paint is at the
+  correct position. This is the combobox pattern —
+  `shouldHideDesktopContent` at `combobox.tsx:481, 876`. **Do not** use
+  `top: -9999` as the placeholder; the layout work still happens at -9999 and
+  any subsequent state-flash is visible when you flip back.
+
+The "render invisible to measure, then reveal" pattern is the canonical
+solution to chicken-and-egg positioning in this codebase. Reach for it before
+anything fancier.
+
+## Recipe for a new anchored panel
+
+Before you write a new one, ask:
+
+1. **Can the underlying input lose its keyboard?** If yes, use Modal (simpler).
+   If no, use Portal.
+2. **Does the panel need to dismiss on screen change?** Almost always yes —
+   gate `visible` on an upstream focus prop (`isPaneFocused` or similar).
+3. **Is the panel rendered in a Portal host?** Measure the host too. Never use
+   raw window coordinates as local Portal coordinates.
+4. **Does the panel sit above something that moves with the keyboard?** If
+   yes, slave a Reanimated transform to the same SharedValue (Gotcha 3).
+   If no, you can probably skip the transform entirely.
+5. **Will the panel's content height vary?** If yes, you need both
+   `anchorRect` and `contentSize` for positioning → apply Gotcha 5 (return
+   null until anchor, then opacity-0 until contentSize). If no — content has
+   a known fixed max height — you might be able to use bottom-anchored
+   positioning (`bottom: windowHeight - anchor.y + gap`) and skip the
+   `contentSize` round-trip entirely. **But only if the height is genuinely
+   bounded**. Verify before you commit.
+
+Then copy the closest canonical file and trim.

docs/glossary.md

@@ -21,6 +21,13 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
 - **Schedule** — Cron-style trigger that creates remote agents. UI: CLI only (`paseo schedule`). Code: `ScheduleCreateRequest` (re-exported from `packages/server/src/shared/messages.ts`). Don't confuse with: Loop (iterative re-execution of one agent).
 - **Mode** — Provider-specific operational mode (plan, default, full-access, …). UI: icon-only. Code: `modeId` in `AgentSessionConfig` (`packages/server/src/shared/messages.ts:257`).
 - **Attachment** — GitHub PR or Issue bound to an agent prompt. UI: "Attach issue or PR". Code: `AgentAttachment` (`packages/server/src/shared/messages.ts:782`).
+- **Composer** — The whole prompt surface for sending work to an agent. Code: `Composer` (`packages/app/src/composer/index.tsx`). Don't call this "message input" except for the text-entry subcomponent.
+- **Composer input** — The text-entry surface inside the composer. Code: `MessageInput` (`packages/app/src/composer/input/input.tsx`).
+- **Composer toolbar** — The bottom control row inside the composer input. Contains agent controls, attachment button, voice controls, and stop/send controls. Code: `leftContent`, `beforeVoiceContent`, and `rightContent` slots in `MessageInput` (`packages/app/src/composer/input/input.tsx`). Forbidden: "Status bar".
+- **Agent controls** — Provider, model, mode, thinking, and provider-feature controls for an agent or draft agent. Code: `AgentControls` / `DraftAgentControls` (`packages/app/src/composer/agent-controls/index.tsx`). Forbidden: "Agent status bar".
+- **Composer footer** — Optional area rendered below the composer input but still inside the keyboard-shifted composer layout. Code: `Composer.footer` (`packages/app/src/composer/index.tsx`).
+- **Composer track** — A contextual lane above the composer input. Specific tracks use the `<thing> track` form: **Queue track**, **Subagents track**. Code: queue track inside `Composer` (`packages/app/src/composer/index.tsx`), `SubagentsTrack` (`packages/app/src/subagents/track.tsx`).
+- **Attachment tray** — The selected-attachments row inside the composer input, above the text input. Code: `renderAttachmentTray` (`packages/app/src/composer/index.tsx`). Forbidden: "Attachment bar".
 - **Conflict** — Two distinct senses; do NOT use the bare word in UI copy without qualifying which: (a) **stale-write conflict** on `paseo.json` ("Config changed on disk", code `stale_project_config`, `packages/app/src/screens/project-settings-screen.tsx:593`); (b) **git merge conflict** (no current UI string).
 
 ## Inconsistencies (documented, not papered over)

docs/mobile-testing.md

@@ -249,6 +249,23 @@ const { theme } = useUnistyles();
 
 Regular `View` components can safely use Unistyles dynamic styles — the conflict is specific to `Animated.View`.
 
+## Native Chat Stream Layout
+
+The native agent stream uses an inverted `FlatList`, so chat layout has three coordinate systems:
+
+- chronological stream order
+- strategy-ordered array order
+- native inverted cell visual order
+
+Do not compute stream neighbors, history/live-head seams, turn footer ownership, assistant block spacing, or tool sequence endings inside React render loops. Those policies live in `packages/app/src/agent-stream/layout.ts` and are unit-tested without React Native rendering.
+
+Platform-specific stream edges belong on `StreamStrategy`:
+
+- forward web uses the last history item as the history/live-head boundary and renders content before a footer
+- native inverted uses the first history item as the history/live-head boundary and compensates for inverted cell child order
+
+If a chat footer looks duplicated or appears above the assistant message on mobile, start with `packages/app/src/agent-stream/layout.test.ts`. Do not add a React Native renderer test for this class of bug; make the pure layout invariant fail first.
+
 ## iOS Simulator
 
 ```bash

docs/providers.md

@@ -24,17 +24,27 @@ Pi MCP support depends on the open-source `pi-mcp-adapter` extension being loade
 
 Pi import discovery reads Pi's persisted JSONL session files because Pi RPC does not expose a recent-session listing command. Resume and full history hydration still go through `pi --mode rpc` using the session file as `nativeHandle`.
 
+Pi RPC extension UI dialog requests (`select`, `input`, `editor`, `confirm`) are bridged into Paseo question permissions and answered with `extension_ui_response`. Fire-and-forget extension UI requests such as notifications are intentionally ignored by the provider adapter unless Paseo grows first-class UI for them.
+
+OpenCode MCP injection is dynamic and session-scoped. Call OpenCode's `mcp.add` endpoint with the MCP server config and do not follow it with `mcp.connect`; `connect` only toggles MCP servers already present in OpenCode's own config. New OpenCode versions return `McpServerNotFoundError`/404 for `connect` after a dynamic add because the server is not config-backed, while older versions silently swallowed the same missing-config path.
+
+OpenCode owns user message IDs. Do not pass Paseo-generated IDs to OpenCode prompt APIs; let OpenCode create `msg*` IDs and record the user timeline item from the `message.updated` event.
+
 Draft metadata lookups should avoid creating provider sessions when the upstream provider has top-level APIs for that metadata. Prefer `AgentClient.listModels`, `listModes`, `listCommands`, or `listFeatures` over creating a scratch `AgentSession`; scratch sessions can show up as empty native sessions in provider import/history UIs.
 
 ---
 
 ## Provider Snapshot Refresh Contract
 
-The daemon keeps one global provider snapshot, keyed to the home directory, for settings, selectors, and old model/mode list requests. Snapshot reads may probe providers only while the snapshot is cold. Once an entry is warm, its `ready`, `error`, or `unavailable` state stays cached until the user forces a refresh from settings/provider management.
+The daemon keeps provider snapshots per resolved working directory. Missing or blank cwd resolves to the user's home directory. Workspace selectors and old model/mode list requests should pass the cwd that will launch the provider so providers with project-specific models or modes are probed in the right context. Settings/provider management intentionally uses the home-directory snapshot.
 
-Do not add TTL revalidation, focus-triggered refreshes, selector-open refreshes, or config-reload refreshes. Registry/config replacement may update visible metadata such as label, description, default mode, enabled state, and provider membership, but it must not spawn provider processes. If a provider needs to be re-probed after a config change, route that through the explicit settings refresh path.
+Snapshot reads may probe providers only while the requested cwd scope is cold. Once an entry is warm, its `ready`, `error`, or `unavailable` state stays cached until an explicit refresh. Do not add TTL revalidation, focus-triggered refreshes, selector-open refreshes, or config-reload refreshes. Selector-open refetches may read an already-loading or stale React Query, but they must not force provider probing on their own.
 
-Boundary tests should assert observable behavior: cold reads may call provider availability/model/mode discovery; warm reads and registry replacement must not; explicit full or targeted refreshes must.
+Settings refresh is the user-facing "forget stale provider knowledge everywhere" action. A settings refresh clears provider snapshot caches and in-flight loads across all cwd scopes, then immediately refreshes only the home-directory snapshot with `force: true`. Workspace snapshots are re-probed lazily on the next scoped read; do not fan out a settings refresh across every known workspace.
+
+Registry/config replacement may update visible metadata such as label, description, default mode, enabled state, and provider membership, but it must not spawn provider processes. If a provider needs to be re-probed after a config change, route that through the explicit settings refresh path.
+
+Boundary tests should assert observable behavior: cold reads may call provider availability/model/mode discovery for that cwd; warm reads and registry replacement must not; explicit workspace refreshes affect only one cwd; settings refresh wipes all scopes but immediately refreshes only home.
 
 ---
 

docs/testing.md

@@ -111,7 +111,7 @@ Vitest picks up tests by suffix. The suffix tells the runner which category it b
 | `*.real.e2e.test.ts`  | E2E that hits a real provider (Claude/Codex/Copilot/OpenCode/Pi) — needs creds in `packages/server/.env.test` | `npm run test:integration:real` / `test:e2e:real`                                    |
 | `*.local.e2e.test.ts` | E2E that needs a local-only resource                                                                          | `npm run test:integration:local` / `test:e2e:local`                                  |
 
-App-level Playwright browser E2E lives in `packages/app/e2e/*.spec.ts` and runs via `npm run test:e2e --workspace=@getpaseo/app` (separate from Vitest E2E).
+App-level Playwright browser E2E lives in `packages/app/e2e/*.spec.ts` and runs via `npm run test:e2e --workspace=@getpaseo/app` (separate from Vitest E2E). App Playwright specs that hit real providers use `*.real.spec.ts` and run through `npm run test:e2e:real --workspace=@getpaseo/app`; the default app E2E project ignores that suffix so CI does not need provider credentials.
 
 ### Test setup
 

docs/unistyles.md

@@ -4,15 +4,17 @@ This app uses [`react-native-unistyles` v3](https://www.unistyl.es/) for theme-a
 
 That model is powerful, but it has sharp edges. Use this note when adding theme-dependent styles.
 
-## STOP — `useUnistyles()` Is Forbidden
+## STOP — `useUnistyles()` Is Banned
 
-**Do not call `useUnistyles()` unless every alternative below has been ruled out and you can explain in a code comment why.** The library authors themselves [strongly advise against it](https://www.unistyl.es/v3/references/use-unistyles):
+**Do not call `useUnistyles()`. Anywhere. New code MUST NOT add a call; existing call sites are tolerated only because nobody has rewritten them yet and will be converted as they are touched.** The library authors themselves [strongly advise against it](https://www.unistyl.es/v3/references/use-unistyles):
 
 > We strongly recommend **not using** this hook, as it will re-render your component on every change. This hook was created to simplify the migration process and should only be used when other methods fail.
 
-We have hit this gotcha repeatedly in Paseo. It manifests as periodic, lockstep re-renders of warm subtrees (agent streams, panels, sidebars) even when nothing the user can see has changed — confirmed in profiling: `AgentStreamView` re-rendering constantly with `theme` showing as the only changed input on every render. The hook subscribes the component to **all** Unistyles runtime changes (theme, breakpoint, insets, color scheme, scale) and returns a fresh object reference each call, which also breaks every downstream `useMemo`/`memo` boundary that includes a derived theme value.
+We have hit this gotcha repeatedly in Paseo. The hook subscribes the component to **every** Unistyles runtime change (theme, breakpoint, insets, color scheme, scale) and returns a fresh object reference each call. That means a periodic lockstep re-render of warm subtrees (agent streams, panels, sidebars) even when nothing the user can see has changed — confirmed in profiling, with `theme` as the only changed input every cycle. It also breaks every downstream `useMemo`/`memo` boundary that includes a derived theme value.
 
-Before reaching for `useUnistyles()`, work down this list of alternatives in order:
+Reviewers MUST reject PRs that introduce a new `useUnistyles()` call. There is no last-resort carveout. If you cannot solve a case with the alternatives below, file an issue and stop — do not paper over it with the hook.
+
+Use these alternatives in order:
 
 ### 1. `StyleSheet.create((theme) => ...)` — default
 
@@ -46,31 +48,9 @@ const ThemedBlur = withUnistyles(BlurView);
 
 (Mind the `> *` child-selector leak documented further down.)
 
-### 4. Lift the read into a tiny leaf component
+### 4. There is no "last resort"
 
-If only one prop in a large component needs a theme value at runtime, extract a small leaf component that calls `useUnistyles()` and accept its re-renders in isolation. Never let a whole stream / panel / sidebar / virtualized list subscribe.
-
-### 5. (Last resort) `useUnistyles()`
-
-Only acceptable when both of:
-
-- (a) The value is consumed by a 3rd-party library that cannot be wrapped with `withUnistyles` (per the upstream "When to use it?" list), AND
-- (b) The component is small, leaf-level, and not on a hot render path.
-
-If you add a new `useUnistyles()` call, leave a comment on the line explaining which of (a)/(b) applies and why each higher-priority alternative was ruled out.
-
-### Hot-path forbidden list
-
-Do not introduce `useUnistyles()` in or above any of these subtrees — re-renders here are observably expensive:
-
-- `AgentStreamView` and anything it renders (message rows, tool calls, plan card, todo list, activity log, compaction marker, copy buttons)
-- `AgentPanel` body (`packages/app/src/panels/agent-panel.tsx`)
-- `Composer` and `MessageInput`
-- `WorkspaceScreen` shell, `WorkspaceDesktopTabsRow`, deck wrapper
-- `LeftSidebar` row items, `SidebarWorkspaceList`, `CommandCenter`
-- Anything inside a virtualized list (`@tanstack/react-virtual`, `FlashList`)
-
-Reviewers must reject PRs that add `useUnistyles()` calls in these areas without a written justification matching the last-resort criteria above.
+There is no escape hatch. If none of (1)–(3) fit, the problem is upstream — fix it there or file an issue. The hook is not on the table.
 
 ## How Updates Propagate
 

nix/npm-deps.hash

@@ -1 +1 @@
-sha256-ipuV4cM3LUqMQ39LyB4X3ezz5UgxyHGEhpBOq7en2Jw=
+sha256-WAxd4FSYNGYPT7v0QYTkYF5AacMrpYU+zjMyMTcWufo=

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "paseo",
-  "version": "0.1.80",
+  "version": "0.1.83",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -12358,6 +12358,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -12367,6 +12385,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -13671,64 +13696,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@xterm/addon-clipboard": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-clipboard/-/addon-clipboard-0.2.0.tgz",
-      "integrity": "sha512-Dl31BCtBhLaUEECUbEiVcCLvLBbaeGYdT7NofB8OJkGTD3MWgBsaLjXvfGAD4tQNHhm6mbKyYkR7XD8kiZsdNg==",
-      "license": "MIT",
-      "dependencies": {
-        "js-base64": "^3.7.5"
-      }
-    },
-    "node_modules/@xterm/addon-fit": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
-      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
-      "license": "MIT"
-    },
-    "node_modules/@xterm/addon-image": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-image/-/addon-image-0.9.0.tgz",
-      "integrity": "sha512-oYWA8/QAr5/Emwl1xL7WCoOqeG3IZfpzEz/OVq1j4Oi9934TQmHiyubClikRf0D/jL3JNiNuz/Lsqx0kXQ02BA==",
-      "license": "MIT"
-    },
-    "node_modules/@xterm/addon-ligatures": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-ligatures/-/addon-ligatures-0.10.0.tgz",
-      "integrity": "sha512-/Few8ZSHMib7sGjRJoc5l7bCtEB9XJfkNofvPpOcWADxKaUl8og8P172j67OoACSNJAXqeCLIuvj8WFCBkcTxg==",
-      "license": "MIT",
-      "dependencies": {
-        "font-finder": "^1.1.0",
-        "font-ligatures": "^1.4.1"
-      },
-      "engines": {
-        "node": ">8.0.0"
-      }
-    },
-    "node_modules/@xterm/addon-search": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.16.0.tgz",
-      "integrity": "sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA==",
-      "license": "MIT"
-    },
-    "node_modules/@xterm/addon-unicode11": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz",
-      "integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==",
-      "license": "MIT"
-    },
-    "node_modules/@xterm/addon-web-links": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
-      "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw==",
-      "license": "MIT"
-    },
-    "node_modules/@xterm/addon-webgl": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.19.0.tgz",
-      "integrity": "sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A==",
-      "license": "MIT"
-    },
     "node_modules/@xterm/headless": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@xterm/headless/-/headless-6.0.0.tgz",
@@ -13738,15 +13705,6 @@
         "addons/*"
       ]
     },
-    "node_modules/@xterm/xterm": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
-      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
-      "license": "MIT",
-      "workspaces": [
-        "addons/*"
-      ]
-    },
     "node_modules/@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
@@ -22193,33 +22151,6 @@
         }
       }
     },
-    "node_modules/font-finder": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/font-finder/-/font-finder-1.1.0.tgz",
-      "integrity": "sha512-wpCL2uIbi6GurJbU7ZlQ3nGd61Ho+dSU6U83/xJT5UPFfN35EeCW/rOtS+5k+IuEZu2SYmHzDIPL9eA5tSYRAw==",
-      "license": "MIT",
-      "dependencies": {
-        "get-system-fonts": "^2.0.0",
-        "promise-stream-reader": "^1.0.1"
-      },
-      "engines": {
-        "node": ">8.0.0"
-      }
-    },
-    "node_modules/font-ligatures": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/font-ligatures/-/font-ligatures-1.4.1.tgz",
-      "integrity": "sha512-7W6zlfyhvCqShZ5ReUWqmSd9vBaUudW0Hxis+tqUjtHhsPU+L3Grf8mcZAtCiXHTzorhwdRTId2WeH/88gdFkw==",
-      "license": "MIT",
-      "dependencies": {
-        "font-finder": "^1.0.3",
-        "lru-cache": "^6.0.0",
-        "opentype.js": "^0.8.0"
-      },
-      "engines": {
-        "node": ">8.0.0"
-      }
-    },
     "node_modules/fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@@ -22603,15 +22534,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-system-fonts": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/get-system-fonts/-/get-system-fonts-2.0.2.tgz",
-      "integrity": "sha512-zzlgaYnHMIEgHRrfC7x0Qp0Ylhw/sHpM6MHXeVBTYIsvGf5GpbnClB+Q6rAPdn+0gd2oZZIo6Tj3EaWrt4VhDQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">8.0.0"
-      }
-    },
     "node_modules/get-tsconfig": {
       "version": "4.13.6",
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.6.tgz",
@@ -30211,15 +30133,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/promise-stream-reader": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-stream-reader/-/promise-stream-reader-1.0.1.tgz",
-      "integrity": "sha512-Tnxit5trUjBAqqZCGWwjyxhmgMN4hGrtpW3Oc/tRI4bpm/O2+ej72BB08l6JBnGQgVDGCLvHFGjGgQS6vzhwXg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">8.0.0"
-      }
-    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -36410,7 +36323,7 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -36426,15 +36339,15 @@
         "@react-navigation/native": "^7.1.8",
         "@tanstack/react-query": "^5.90.11",
         "@tanstack/react-virtual": "^3.13.21",
-        "@xterm/addon-clipboard": "^0.2.0",
-        "@xterm/addon-fit": "^0.11.0",
-        "@xterm/addon-image": "^0.9.0",
-        "@xterm/addon-ligatures": "^0.10.0",
-        "@xterm/addon-search": "^0.16.0",
-        "@xterm/addon-unicode11": "^0.9.0",
-        "@xterm/addon-web-links": "^0.12.0",
-        "@xterm/addon-webgl": "^0.19.0",
-        "@xterm/xterm": "^6.0.0",
+        "@xterm/addon-clipboard": "^0.3.0-beta.213",
+        "@xterm/addon-fit": "^0.12.0-beta.213",
+        "@xterm/addon-image": "^0.10.0-beta.213",
+        "@xterm/addon-ligatures": "^0.11.0-beta.213",
+        "@xterm/addon-search": "^0.17.0-beta.213",
+        "@xterm/addon-unicode11": "^0.10.0-beta.213",
+        "@xterm/addon-web-links": "^0.13.0-beta.213",
+        "@xterm/addon-webgl": "^0.20.0-beta.212",
+        "@xterm/xterm": "^6.1.0-beta.213",
         "buffer": "^6.0.3",
         "expo": "^54.0.18",
         "expo-asset": "~12.0.12",
@@ -36460,6 +36373,7 @@
         "expo-updates": "~29.0.12",
         "fast-deep-equal": "^3.1.3",
         "lucide-react-native": "^0.546.0",
+        "markdown-it": "^10.0.0",
         "mnemonic-id": "^3.2.7",
         "qrcode": "^1.5.4",
         "react": "19.1.0",
@@ -36487,12 +36401,13 @@
       "devDependencies": {
         "@playwright/test": "^1.56.1",
         "@testing-library/react": "^16.3.2",
+        "@types/markdown-it": "^14.1.2",
         "@types/qrcode": "^1.5.6",
         "@types/react": "~19.2.0",
         "@types/ws": "^8.18.1",
         "@vitest/browser": "^4.1.7",
         "@vitest/browser-playwright": "^4.1.7",
-        "@xterm/headless": "^6.0.0",
+        "@xterm/headless": "^6.1.0-beta.213",
         "dotenv": "^17.2.3",
         "eas-cli": "^16.24.1",
         "eslint": "^9.25.0",
@@ -36506,6 +36421,107 @@
         "ws": "^8.20.0"
       }
     },
+    "packages/app/node_modules/@xterm/addon-clipboard": {
+      "version": "0.3.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-clipboard/-/addon-clipboard-0.3.0-beta.213.tgz",
+      "integrity": "sha512-gFW1jSpKFhMN29ArgBXIyYzxrDcGeWVP943/BxcWelHthAjhWrt048LxkNtt7/FgF60ZfysIyvMXLeVetXfduA==",
+      "license": "MIT",
+      "dependencies": {
+        "js-base64": "^3.7.5"
+      },
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-fit": {
+      "version": "0.12.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.12.0-beta.213.tgz",
+      "integrity": "sha512-hFupt6CX7MNO0XKjugPpm2T3/PUGT2Y7o92Y9UyQAH0a7Da/H5nzkDbJLH1LZHfyUFaJOOvkJOQl8oreWMr/SQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-image": {
+      "version": "0.10.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-image/-/addon-image-0.10.0-beta.213.tgz",
+      "integrity": "sha512-L3QxLkj8g8TioVea9p1oVze52Jr75rRZPPLm1tgZl0X2EGJGFHnQzE3QRsgmYWI7R5j3kwwi3MRAkOAgvOK8uA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-ligatures": {
+      "version": "0.11.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-ligatures/-/addon-ligatures-0.11.0-beta.213.tgz",
+      "integrity": "sha512-4YLFsl+K/RfTrIxHuMLXvQ3iJmBtxHlLaC4sutPZT1Nkh01QxOmMAn+JZI2jm5u1RPO2F6WRfwu1jtqhunGCpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "lru-cache": "^6.0.0",
+        "opentype.js": "^0.8.0"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-search": {
+      "version": "0.17.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.17.0-beta.213.tgz",
+      "integrity": "sha512-SlXOagJg8ZH78T6tfoUqauJPAWo1N8yb8FamrHNsGP7HAFpOq3m1U9hH8q8iHeOQzs7VcVzD7J2/X3gAMJRn+g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-unicode11": {
+      "version": "0.10.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.10.0-beta.213.tgz",
+      "integrity": "sha512-Tk2u+4HrkOwlagO2w/Knc5RF2LLA9D2i6yxUMmnxFKaQ88qXOnyqEn4b+OhPCaWHJJnWsV5grjMMQq6utRGxcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-web-links": {
+      "version": "0.13.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.13.0-beta.213.tgz",
+      "integrity": "sha512-SNMLWgcVxchXTSxIzqZkQ7xennu0YVpmtDMVZi3K03JyFXw8NDu57B0O01JR8d7Rlk+EWk+B/aMxIehnCSgX6Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/addon-webgl": {
+      "version": "0.20.0-beta.212",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.20.0-beta.212.tgz",
+      "integrity": "sha512-RzaTYeukTXTJth+Sl7FzCmb8AqiyDrNWNnqG+/300qJbfHYfCMmBlBVZ0yCTSZIWMdgFbgkhmnmBN7Yzs6xoBA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^6.1.0-beta.213"
+      }
+    },
+    "packages/app/node_modules/@xterm/headless": {
+      "version": "6.1.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/headless/-/headless-6.1.0-beta.213.tgz",
+      "integrity": "sha512-D08E4Bl0HRhYZRL2o5PxD4FNQN9qXpI8QSw3CkKrsym5dtTRAqsynVYE8V8echQrxfb+EpR0CB5reM7tEGZ/fA==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
+    },
+    "packages/app/node_modules/@xterm/xterm": {
+      "version": "6.1.0-beta.213",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.1.0-beta.213.tgz",
+      "integrity": "sha512-bq5nJkgoZDSg6Ma4zgiQ7jlooGNo7U+HDa6vnhx43yXsVEK2laIF7R08bMYAuU0B+C9xX0gwSrcsW18GxjUoJQ==",
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
+    },
     "packages/app/node_modules/expo-clipboard": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/expo-clipboard/-/expo-clipboard-8.0.7.tgz",
@@ -36528,10 +36544,10 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/server": "0.1.80",
+        "@getpaseo/server": "0.1.83",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -36886,7 +36902,7 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@getpaseo/cli": "*",
@@ -37247,7 +37263,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "license": "MIT",
       "devDependencies": {
         "@types/react": "^18.0.25",
@@ -37283,7 +37299,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "dependencies": {
         "@lezer/common": "^1.5.0",
         "@lezer/cpp": "^1.1.5",
@@ -37621,7 +37637,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -37948,12 +37964,12 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.17.1",
         "@anthropic-ai/claude-agent-sdk": "^0.2.133",
-        "@getpaseo/highlight": "0.1.80",
-        "@getpaseo/relay": "0.1.80",
+        "@getpaseo/highlight": "0.1.83",
+        "@getpaseo/relay": "0.1.83",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.14.46",
@@ -38827,7 +38843,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.1.80",
+      "version": "0.1.83",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.29.1",
         "@cloudflare/workers-types": "^4.20260317.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.80",
+  "version": "0.1.83",
   "private": true,
   "description": "Paseo: voice-controlled development environment with OpenAI Realtime API",
   "keywords": [

packages/app/e2e/client-slash-commands.spec.ts

@@ -126,7 +126,7 @@ async function expectReplacementDraftMatchesPreviousSetup(page: Page): Promise<v
   await expect(
     page.getByRole("button", { name: "Select model (Ten second stream)" }),
   ).toBeVisible();
-  await expect(page.getByRole("button", { name: "Select agent mode (load-test)" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Select agent mode (Load test)" })).toBeVisible();
 }
 
 async function createAgentFromReplacementDraft(page: Page): Promise<void> {
@@ -181,7 +181,7 @@ test.describe("Client slash commands", () => {
       page,
       { title: "Slash quit autocomplete e2e" },
       async ({ agent, title }) => {
-        await selectClientSlashCommand(page, "/qu", "/quit");
+        await selectClientSlashCommand(page, "/qu", "/exit");
         await expectWorkspaceTabHidden(page, agent.id);
         await expectAgentArchivedInSessions(page, title);
       },

packages/app/e2e/composer-autocomplete.spec.ts

@@ -0,0 +1,536 @@
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+import { expect, test, type Page } from "./fixtures";
+import { composerLocator, expectComposerVisible } from "./helpers/composer";
+import { connectTerminalClient, type TerminalPerfDaemonClient } from "./helpers/terminal-perf";
+import { createTempGitRepo } from "./helpers/workspace";
+import { expectWorkspaceTabVisible } from "./helpers/archive-tab";
+
+const TEST_COMMANDS = [
+  {
+    name: "tdd",
+    description: "Write a red test, verify it fails for the right reason, implement to green",
+    argumentHint: "",
+  },
+  {
+    name: "help",
+    description: "Show help for the current agent session and available slash commands",
+    argumentHint: "",
+  },
+  {
+    name: "hello",
+    description: "Insert a friendly greeting prompt into the current composer",
+    argumentHint: "",
+  },
+  {
+    name: "heapdump",
+    description: "Dump the JavaScript heap for local desktop debugging",
+    argumentHint: "",
+  },
+  {
+    name: "health",
+    description: "Show runtime health checks and connection diagnostics",
+    argumentHint: "",
+  },
+  {
+    name: "history",
+    description: "Summarize recent session history",
+    argumentHint: "",
+  },
+  {
+    name: "handoff",
+    description: "Prepare a complete handoff note for another agent",
+    argumentHint: "[agent]",
+  },
+  {
+    name: "hover",
+    description: "Audit hover behavior in desktop web surfaces",
+    argumentHint: "",
+  },
+  {
+    name: "harness",
+    description: "Inspect the local test harness configuration",
+    argumentHint: "",
+  },
+  {
+    name: "hydrate",
+    description: "Refresh persisted state used by the current workspace",
+    argumentHint: "",
+  },
+  {
+    name: "highlight",
+    description: "Highlight important changes in the active diff",
+    argumentHint: "",
+  },
+  {
+    name: "home",
+    description: "Navigate back to the workspace home surface",
+    argumentHint: "",
+  },
+  {
+    name: "host",
+    description: "Inspect host connection metadata",
+    argumentHint: "",
+  },
+] as const;
+
+interface PopoverFrame {
+  exists: boolean;
+  top: number;
+  bottom: number;
+  height: number;
+  opacity: number;
+  display: string;
+  visibility: string;
+  timestamp: number;
+}
+
+interface PopoverFrameRecorderWindow extends Window {
+  __composerAutocompleteFrames?: PopoverFrame[];
+  __stopComposerAutocompleteFrameRecorder?: () => void;
+}
+
+async function getTopTestIdAtPoint(page: Page, x: number, y: number) {
+  return page.evaluate(
+    ([pointX, pointY]) => {
+      const element = document.elementFromPoint(pointX, pointY);
+      return element?.closest("[data-testid]")?.getAttribute("data-testid") ?? null;
+    },
+    [x, y],
+  );
+}
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+function getDaemonPort(): string {
+  const daemonPort = process.env.E2E_DAEMON_PORT;
+  if (!daemonPort || daemonPort === "6767") {
+    throw new Error("E2E_DAEMON_PORT must point at the isolated e2e daemon.");
+  }
+  return daemonPort;
+}
+
+function escapeRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+async function installListCommandsStub(page: Page): Promise<void> {
+  await page.routeWebSocket(new RegExp(`:${escapeRegex(getDaemonPort())}\\b`), (ws) => {
+    const server = ws.connectToServer();
+
+    ws.onMessage((message) => {
+      server.send(message);
+    });
+
+    server.onMessage((message) => {
+      if (typeof message !== "string") {
+        ws.send(message);
+        return;
+      }
+
+      try {
+        const parsed = JSON.parse(message) as {
+          type?: string;
+          message?: {
+            type?: string;
+            payload?: {
+              commands?: unknown;
+              error?: string | null;
+            };
+          };
+        };
+        if (
+          parsed.type === "session" &&
+          parsed.message?.type === "list_commands_response" &&
+          parsed.message.payload
+        ) {
+          parsed.message.payload.commands = TEST_COMMANDS;
+          parsed.message.payload.error = null;
+          ws.send(JSON.stringify(parsed));
+          return;
+        }
+      } catch {
+        // Forward non-JSON frames unchanged.
+      }
+
+      ws.send(message);
+    });
+  });
+}
+
+async function openProject(client: TerminalPerfDaemonClient, cwd: string): Promise<void> {
+  const opened = await client.openProject(cwd);
+  if (!opened.workspace) {
+    throw new Error(opened.error ?? `Failed to open project ${cwd}`);
+  }
+}
+
+async function cleanupWithin(timeoutMs: number, cleanup: () => Promise<void>): Promise<void> {
+  const operation = cleanup().catch(() => undefined);
+  await Promise.race([operation, new Promise<void>((resolve) => setTimeout(resolve, timeoutMs))]);
+}
+
+async function openReadyMockAgent(
+  page: Page,
+  options?: { expectWorkspaceTab?: boolean },
+): Promise<{
+  cleanup: () => Promise<void>;
+}> {
+  const repo = await createTempGitRepo("autocomplete-popover-");
+  const client = await connectTerminalClient();
+
+  try {
+    await openProject(client, repo.path);
+    const agent = await client.createAgent({
+      provider: "mock",
+      cwd: repo.path,
+      title: "Autocomplete popover regression",
+      modeId: "load-test",
+      model: "ten-second-stream",
+    });
+    const route = `${buildHostWorkspaceRoute(
+      getServerId(),
+      repo.path,
+    )}?open=${encodeURIComponent(`agent:${agent.id}`)}`;
+    await page.goto(route);
+    await page.waitForURL(
+      (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+      { timeout: 60_000 },
+    );
+    if (options?.expectWorkspaceTab !== false) {
+      await expectWorkspaceTabVisible(page, agent.id);
+    }
+    await expectComposerVisible(page);
+    return {
+      cleanup: async () => {
+        await cleanupWithin(2_000, () => client.close());
+        await cleanupWithin(2_000, () => repo.cleanup());
+      },
+    };
+  } catch (error) {
+    await cleanupWithin(2_000, () => client.close());
+    await cleanupWithin(2_000, () => repo.cleanup());
+    throw error;
+  }
+}
+
+async function visiblePopoverBox(
+  page: Page,
+): Promise<{ top: number; bottom: number; height: number }> {
+  const popover = page.getByTestId("composer-autocomplete-popover");
+  await expect(popover).toBeVisible({ timeout: 30_000 });
+  await expect
+    .poll(
+      async () =>
+        popover.evaluate((element) => {
+          const style = window.getComputedStyle(element);
+          return Number(style.opacity);
+        }),
+      { timeout: 30_000 },
+    )
+    .toBeGreaterThan(0.95);
+  const box = await popover.boundingBox();
+  if (!box) {
+    throw new Error("Autocomplete popover did not produce a bounding box.");
+  }
+  return {
+    top: box.y,
+    bottom: box.y + box.height,
+    height: box.height,
+  };
+}
+
+async function startPopoverFrameRecorder(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const win = window as PopoverFrameRecorderWindow;
+    win.__composerAutocompleteFrames = [];
+    let active = true;
+
+    const record = () => {
+      if (!active) return;
+
+      const element = document.querySelector('[data-testid="composer-autocomplete-popover"]');
+      if (element instanceof HTMLElement) {
+        const rect = element.getBoundingClientRect();
+        const style = window.getComputedStyle(element);
+        win.__composerAutocompleteFrames?.push({
+          exists: true,
+          top: rect.top,
+          bottom: rect.bottom,
+          height: rect.height,
+          opacity: Number(style.opacity),
+          display: style.display,
+          visibility: style.visibility,
+          timestamp: performance.now(),
+        });
+      } else {
+        win.__composerAutocompleteFrames?.push({
+          exists: false,
+          top: 0,
+          bottom: 0,
+          height: 0,
+          opacity: 0,
+          display: "none",
+          visibility: "hidden",
+          timestamp: performance.now(),
+        });
+      }
+
+      window.requestAnimationFrame(record);
+    };
+
+    win.__stopComposerAutocompleteFrameRecorder = () => {
+      active = false;
+    };
+    window.requestAnimationFrame(record);
+  });
+}
+
+async function stopPopoverFrameRecorder(page: Page): Promise<PopoverFrame[]> {
+  return page.evaluate(() => {
+    const win = window as PopoverFrameRecorderWindow;
+    win.__stopComposerAutocompleteFrameRecorder?.();
+    return win.__composerAutocompleteFrames ?? [];
+  });
+}
+
+function visiblePopoverFrames(frames: PopoverFrame[]): PopoverFrame[] {
+  return frames.filter(
+    (frame) =>
+      frame.exists &&
+      frame.height > 0 &&
+      frame.opacity > 0.95 &&
+      frame.display !== "none" &&
+      frame.visibility !== "hidden",
+  );
+}
+
+function formatFrame(frame: PopoverFrame | undefined): string {
+  if (!frame) return "none";
+  return JSON.stringify({
+    top: Math.round(frame.top),
+    bottom: Math.round(frame.bottom),
+    height: Math.round(frame.height),
+    opacity: frame.opacity,
+  });
+}
+
+function expectPopoverFramesStable(frames: PopoverFrame[]): void {
+  const visibleFrames = visiblePopoverFrames(frames);
+  expect(visibleFrames.length).toBeGreaterThan(0);
+
+  const finalFrame = visibleFrames[visibleFrames.length - 1];
+  const jumpingFrame = visibleFrames.find(
+    (frame) =>
+      Math.abs(frame.top - finalFrame.top) > 4 ||
+      Math.abs(frame.bottom - finalFrame.bottom) > 4 ||
+      Math.abs(frame.height - finalFrame.height) > 4,
+  );
+
+  expect(
+    jumpingFrame,
+    `expected first visible popover paint to be stable; first=${formatFrame(
+      visibleFrames[0],
+    )} jumping=${formatFrame(jumpingFrame)} final=${formatFrame(finalFrame)}`,
+  ).toBeUndefined();
+}
+
+function expectPopoverDoesNotDisappearAfterFirstVisible(frames: PopoverFrame[]): void {
+  const firstVisibleIndex = frames.findIndex(
+    (frame) =>
+      frame.exists &&
+      frame.height > 0 &&
+      frame.opacity > 0.95 &&
+      frame.display !== "none" &&
+      frame.visibility !== "hidden",
+  );
+  expect(firstVisibleIndex).toBeGreaterThanOrEqual(0);
+
+  const hiddenFrame = frames
+    .slice(firstVisibleIndex)
+    .find((frame) => !frame.exists || frame.opacity < 0.95);
+  expect(
+    hiddenFrame,
+    `expected mounted popover to stay visible while filtering; hidden=${formatFrame(hiddenFrame)}`,
+  ).toBeUndefined();
+}
+
+test.describe("Composer autocomplete", () => {
+  test("does not flash at the wrong position on the first slash command paint", async ({
+    page,
+  }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+      await input.click();
+
+      await startPopoverFrameRecorder(page);
+      await page.keyboard.type("/");
+      await expect(page.getByText("/help", { exact: true })).toBeVisible({ timeout: 30_000 });
+      await page.waitForTimeout(250);
+      const frames = await stopPopoverFrameRecorder(page);
+
+      expectPopoverFramesStable(frames);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("does not jump when deleting a slash command search", async ({ page }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+
+      await input.fill("/he");
+      const popover = page.getByTestId("composer-autocomplete-popover");
+      await expect(popover.getByText("/help", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+      const beforeDelete = await visiblePopoverBox(page);
+
+      await input.press("Backspace");
+      await expect(input).toHaveValue("/h");
+      await expect(popover.getByText("/history", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+      const afterDelete = await visiblePopoverBox(page);
+
+      expect(Math.abs(afterDelete.bottom - beforeDelete.bottom)).toBeLessThanOrEqual(4);
+      expect(afterDelete.height).toBeGreaterThan(beforeDelete.height);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("shrinks to filtered slash command results without moving the bottom edge", async ({
+    page,
+  }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+
+      await input.fill("/");
+      const popover = page.getByTestId("composer-autocomplete-popover");
+      await expect(popover.getByText("/help", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+      const allCommands = await visiblePopoverBox(page);
+
+      await input.fill("/tdd");
+      await expect(popover.getByText("/tdd", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+      const oneCommand = await visiblePopoverBox(page);
+
+      expect(Math.abs(oneCommand.bottom - allCommands.bottom)).toBeLessThanOrEqual(4);
+      expect(oneCommand.height).toBeLessThan(allCommands.height - 40);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("stays visible while filtering slash command results", async ({ page }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+
+      await input.fill("/");
+      const popover = page.getByTestId("composer-autocomplete-popover");
+      await expect(popover.getByText("/help", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+
+      await startPopoverFrameRecorder(page);
+      await page.keyboard.type("tdd", { delay: 40 });
+      await expect(popover.getByText("/tdd", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+      await page.waitForTimeout(250);
+      const frames = await stopPopoverFrameRecorder(page);
+
+      expectPopoverDoesNotDisappearAfterFirstVisible(frames);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("stays anchored to the composer when the desktop sidebar is open", async ({ page }) => {
+    await installListCommandsStub(page);
+    const agent = await openReadyMockAgent(page);
+
+    try {
+      await expect(page.getByTestId("sidebar-sessions")).toBeVisible({ timeout: 30_000 });
+      const input = composerLocator(page);
+      await expect(input).toBeEditable({ timeout: 30_000 });
+
+      await input.fill("/");
+      const popover = page.getByTestId("composer-autocomplete-popover");
+      await expect(popover.getByText("/help", { exact: true }).first()).toBeVisible({
+        timeout: 30_000,
+      });
+
+      const composerBox = await page.getByTestId("message-input-root").boundingBox();
+      const popoverBox = await popover.boundingBox();
+      expect(composerBox).not.toBeNull();
+      expect(popoverBox).not.toBeNull();
+
+      expect(Math.abs(popoverBox!.x - composerBox!.x)).toBeLessThanOrEqual(4);
+      expect(Math.abs(popoverBox!.width - composerBox!.width)).toBeLessThanOrEqual(4);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test.describe("compact sidebar layering", () => {
+    test.use({ viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true });
+
+    test("keeps the mobile agent sidebar above autocomplete", async ({ page }) => {
+      await installListCommandsStub(page);
+      const agent = await openReadyMockAgent(page, { expectWorkspaceTab: false });
+
+      try {
+        const input = composerLocator(page);
+        await expect(input).toBeEditable({ timeout: 30_000 });
+
+        await input.fill("/");
+        const popover = page.getByTestId("composer-autocomplete-popover");
+        await expect(popover.getByText("/help", { exact: true }).first()).toBeVisible({
+          timeout: 30_000,
+        });
+
+        await page.getByRole("button", { name: "Open menu" }).click();
+        await expect(page.getByTestId("sidebar-sessions")).toBeInViewport({ timeout: 5_000 });
+
+        const popoverBox = await popover.boundingBox();
+        expect(popoverBox).not.toBeNull();
+
+        const topTestId = await getTopTestIdAtPoint(
+          page,
+          popoverBox!.x + popoverBox!.width / 2,
+          popoverBox!.y + popoverBox!.height / 2,
+        );
+
+        expect(topTestId).not.toBe("composer-autocomplete-popover");
+      } finally {
+        await agent.cleanup();
+      }
+    });
+  });
+});

packages/app/e2e/global-setup.ts

@@ -537,13 +537,22 @@ async function awaitRelayReady(
   }
 }
 
-async function startRelay(): Promise<number> {
+async function getAvailablePortExcluding(excludedPorts: Set<number>): Promise<number> {
+  for (;;) {
+    const port = await getAvailablePort();
+    if (!excludedPorts.has(port)) {
+      return port;
+    }
+  }
+}
+
+async function startRelay(excludedPorts: Set<number>): Promise<number> {
   const relayDir = path.resolve(__dirname, "..", "..", "relay");
   const maxRelayStartupAttempts = 5;
   let lastRelayStartupError: unknown = null;
 
   for (let attempt = 1; attempt <= maxRelayStartupAttempts; attempt += 1) {
-    const relayPort = await getAvailablePort();
+    const relayPort = await getAvailablePortExcluding(excludedPorts);
     const buffer = createLineBuffer();
     const state: RelayStreamState = { failureLine: null, readyForSelectedPort: false };
 
@@ -729,7 +738,7 @@ export default async function globalSetup() {
   const dictation = await resolveDictationConfig();
 
   try {
-    const relayPort = await startRelay();
+    const relayPort = await startRelay(new Set([port, metroPort]));
     metroProcess = startMetro(metroPort, metroLineBuffer);
     daemonProcess = startDaemon({
       port,

packages/app/e2e/helpers/rewind-flow.ts

@@ -0,0 +1,342 @@
+import { randomUUID } from "node:crypto";
+import { execFileSync } from "node:child_process";
+import { existsSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { expect, type Page } from "@playwright/test";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+import { expectComposerEditable, submitMessage } from "./composer";
+import { connectTerminalClient, type TerminalPerfDaemonClient } from "./terminal-perf";
+
+export type RewindFlowProvider = "claude" | "codex" | "opencode" | "pi";
+export type RewindFlowMode = "conversation" | "files" | "both";
+
+export interface AgentHandle {
+  page: Page;
+  client: TerminalPerfDaemonClient;
+  agentId: string;
+  cwd: string;
+  provider: RewindFlowProvider;
+}
+
+export interface TranscriptMessage {
+  role: "user" | "assistant";
+  text: string | RegExp;
+}
+
+interface ProviderLaunchConfig {
+  provider: RewindFlowProvider;
+  model?: string;
+  thinkingOptionId?: string;
+  modeId?: string;
+}
+
+const SEND_TIMEOUT_MS = 240_000;
+const REWIND_TIMEOUT_MS = 120_000;
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+function fullAccessConfig(provider: RewindFlowProvider): ProviderLaunchConfig {
+  switch (provider) {
+    case "claude":
+      return { provider, model: "haiku", modeId: "bypassPermissions" };
+    case "codex":
+      return {
+        provider,
+        model: "gpt-5.4-mini",
+        thinkingOptionId: "low",
+        modeId: "full-access",
+      };
+    case "opencode":
+      return { provider, model: "opencode/big-pickle", modeId: "full-access" };
+    case "pi":
+      return {
+        provider,
+        model: "openrouter/google/gemini-2.5-flash-lite",
+        thinkingOptionId: "medium",
+      };
+  }
+}
+
+function agentRoute(cwd: string, agentId: string): string {
+  return `${buildHostWorkspaceRoute(getServerId(), cwd)}?open=${encodeURIComponent(
+    `agent:${agentId}`,
+  )}`;
+}
+
+async function openAgent(page: Page, input: { cwd: string; agentId: string }): Promise<void> {
+  await page.goto(agentRoute(input.cwd, input.agentId));
+  await page.waitForURL(
+    (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+    { timeout: 60_000 },
+  );
+  await assertComposerIdle({ page });
+}
+
+function visibleChatMessages(page: Page) {
+  return page
+    .locator('[data-testid="agent-chat-scroll"]:visible')
+    .first()
+    .locator('[data-testid="user-message"], [data-testid="assistant-message"]');
+}
+
+async function transcript(
+  page: Page,
+): Promise<Array<{ role: "user" | "assistant"; text: string }>> {
+  const rawMessages = await visibleChatMessages(page).evaluateAll((elements) =>
+    elements.map((element) => ({
+      role: (element.getAttribute("data-testid") === "user-message" ? "user" : "assistant") as
+        | "user"
+        | "assistant",
+      text: (element.textContent ?? "")
+        .replace(/\s+/g, " ")
+        .replace(/\d{1,2}:\d{2}\s?(?:AM|PM)$/u, "")
+        .trim(),
+    })),
+  );
+
+  return coalesceAssistantTurnSegments(rawMessages);
+}
+
+function coalesceAssistantTurnSegments(
+  messages: Array<{ role: "user" | "assistant"; text: string }>,
+): Array<{ role: "user" | "assistant"; text: string }> {
+  const transcriptMessages: Array<{ role: "user" | "assistant"; text: string }> = [];
+
+  for (const message of messages) {
+    const previous = transcriptMessages.at(-1);
+    if (message.role === "assistant" && previous?.role === "assistant") {
+      const joinedText =
+        previous.text && message.text
+          ? `${previous.text}\n${message.text}`
+          : previous.text || message.text;
+      transcriptMessages[transcriptMessages.length - 1] = {
+        role: "assistant",
+        text: joinedText,
+      };
+      continue;
+    }
+
+    transcriptMessages.push(message);
+  }
+
+  return transcriptMessages.filter(
+    (message) => message.role !== "assistant" || message.text.length > 0,
+  );
+}
+
+function expectedTextMatches(actual: string, expected: string | RegExp): boolean {
+  if (typeof expected === "string") {
+    return actual === expected;
+  }
+  return expected.test(actual);
+}
+
+function formatExpectedMessage(message: TranscriptMessage): string {
+  const text = typeof message.text === "string" ? JSON.stringify(message.text) : message.text;
+  return `${message.role}:${text}`;
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+}
+
+export async function launchAgent(input: {
+  page: Page;
+  provider: RewindFlowProvider;
+  cwd: string;
+  mode: "full-access";
+}): Promise<AgentHandle> {
+  execFileSync("git", ["init", "-b", "main"], { cwd: input.cwd, stdio: "ignore" });
+  execFileSync("git", ["config", "user.email", "paseo-test@example.com"], {
+    cwd: input.cwd,
+    stdio: "ignore",
+  });
+  execFileSync("git", ["config", "user.name", "Paseo Test"], {
+    cwd: input.cwd,
+    stdio: "ignore",
+  });
+  execFileSync("git", ["config", "commit.gpgsign", "false"], {
+    cwd: input.cwd,
+    stdio: "ignore",
+  });
+  writeFileSync(`${input.cwd}/README.md`, "# Paseo rewind flow\n", "utf8");
+  execFileSync("git", ["add", "README.md"], { cwd: input.cwd, stdio: "ignore" });
+  execFileSync("git", ["commit", "-m", "Initial commit"], { cwd: input.cwd, stdio: "ignore" });
+  const client = await connectTerminalClient();
+  const opened = await client.openProject(input.cwd);
+  if (!opened.workspace) {
+    throw new Error(opened.error ?? `Failed to open project ${input.cwd}`);
+  }
+  const agent = await client.createAgent({
+    ...fullAccessConfig(input.provider),
+    cwd: input.cwd,
+    title: `rewind-flow-${input.provider}-${randomUUID()}`,
+  });
+  const handle = {
+    page: input.page,
+    client,
+    agentId: agent.id,
+    cwd: input.cwd,
+    provider: input.provider,
+  };
+  await openAgent(input.page, { cwd: input.cwd, agentId: agent.id });
+  return handle;
+}
+
+export async function closeAgent(handle: AgentHandle): Promise<void> {
+  await handle.client.close().catch(() => undefined);
+}
+
+export async function sendMessage(handle: AgentHandle, text: string): Promise<void> {
+  const before = await transcript(handle.page);
+  await submitMessage(handle.page, text);
+  const finish = await handle.client.waitForFinish(handle.agentId, SEND_TIMEOUT_MS);
+  if (finish.status !== "idle") {
+    const suffix = finish.final?.lastError ? `: ${finish.final.lastError}` : "";
+    throw new Error(
+      `Expected agent ${handle.agentId} to become idle, got ${finish.status}${suffix}`,
+    );
+  }
+  if (finish.final?.lastError) {
+    throw new Error(finish.final.lastError);
+  }
+  await expect
+    .poll(async () => transcript(handle.page), { timeout: 30_000 })
+    .toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ role: "user", text }),
+        expect.objectContaining({ role: "assistant" }),
+      ]),
+    );
+  await expect
+    .poll(async () => transcript(handle.page).then((messages) => messages.length), {
+      timeout: 30_000,
+    })
+    .toBeGreaterThanOrEqual(before.length + 2);
+  await assertComposerIdle(handle);
+}
+
+export async function assertChatTranscript(
+  handle: Pick<AgentHandle, "page">,
+  expected: TranscriptMessage[],
+): Promise<void> {
+  await expect
+    .poll(
+      async () => {
+        const actual = await transcript(handle.page);
+        if (actual.length !== expected.length) {
+          return JSON.stringify(actual);
+        }
+        const matches = actual.every(
+          (message, index) =>
+            message.role === expected[index]?.role &&
+            expectedTextMatches(message.text, expected[index]!.text),
+        );
+        return matches ? "match" : JSON.stringify(actual);
+      },
+      { timeout: 30_000 },
+    )
+    .toBe("match");
+
+  const actual = await transcript(handle.page);
+  if (actual.length !== expected.length) {
+    throw new Error(
+      `Expected ${expected.length} chat messages (${expected
+        .map(formatExpectedMessage)
+        .join(", ")}), found ${actual.length}: ${JSON.stringify(actual)}`,
+    );
+  }
+}
+
+export async function rewindMessage(
+  handle: AgentHandle,
+  userMessageIndex: number,
+  mode: RewindFlowMode,
+): Promise<void> {
+  const beforeEpoch = await fetchTimelineEpoch(handle);
+  const userMessage = handle.page.getByTestId("user-message").nth(userMessageIndex);
+  await expect(userMessage).toBeVisible({ timeout: 30_000 });
+  const userMessages = (await transcript(handle.page)).filter((message) => message.role === "user");
+  const userText = userMessages[userMessageIndex]?.text;
+  if (!userText) {
+    throw new Error(`No user message found at index ${userMessageIndex}`);
+  }
+  await userMessage
+    .getByText(new RegExp(escapeRegExp(userText)))
+    .first()
+    .hover();
+  const trigger = userMessage.getByTestId("rewind-menu-trigger");
+  await expect(trigger).toBeVisible({ timeout: 10_000 });
+  await trigger.click();
+  await expect(handle.page.getByTestId("rewind-menu-content")).toBeVisible({ timeout: 10_000 });
+  const modeItem = handle.page.getByTestId(`rewind-menu-${mode}`);
+  await expect(modeItem).toBeVisible({ timeout: 10_000 });
+  await modeItem.click();
+  await expect(handle.page.getByTestId("rewind-menu-content")).toHaveCount(0, { timeout: 10_000 });
+  if (mode !== "files") {
+    await waitForNextTimelineEpoch(handle, beforeEpoch);
+  }
+  await assertComposerIdle(handle);
+}
+
+export async function assertFileExists(filePath: string): Promise<void> {
+  await expect.poll(() => existsSync(filePath), { timeout: 10_000 }).toBe(true);
+}
+
+export async function assertFileMissing(filePath: string): Promise<void> {
+  await expect.poll(() => existsSync(filePath), { timeout: 10_000 }).toBe(false);
+}
+
+export async function assertFileContains(filePath: string, text: string): Promise<void> {
+  await assertFileExists(filePath);
+  await expect.poll(() => readFileSync(filePath, "utf8"), { timeout: 10_000 }).toContain(text);
+}
+
+export async function assertComposerIdle(handle: Pick<AgentHandle, "page">): Promise<void> {
+  await expectComposerEditable(handle.page);
+  await expect(handle.page.getByRole("button", { name: /stop|cancel/i })).toHaveCount(0, {
+    timeout: 30_000,
+  });
+  await expect(handle.page.getByTestId("turn-working-indicator")).toHaveCount(0, {
+    timeout: 30_000,
+  });
+}
+
+export async function cleanupRewindFlow(input: {
+  handle?: AgentHandle;
+  cwd: string;
+}): Promise<void> {
+  if (input.handle) {
+    await closeAgent(input.handle);
+  }
+  rmSync(input.cwd, { recursive: true, force: true });
+}
+
+async function fetchTimelineEpoch(handle: AgentHandle): Promise<string | undefined> {
+  const client = handle.client as TerminalPerfDaemonClient & {
+    fetchAgentTimeline: (
+      agentId: string,
+      options?: { direction?: "head" | "tail"; projection?: "canonical"; limit?: number },
+    ) => Promise<{ epoch?: string }>;
+  };
+  const timeline = await client.fetchAgentTimeline(handle.agentId, {
+    direction: "tail",
+    projection: "canonical",
+    limit: 0,
+  });
+  return timeline.epoch;
+}
+
+async function waitForNextTimelineEpoch(
+  handle: AgentHandle,
+  beforeEpoch: string | undefined,
+): Promise<void> {
+  await expect
+    .poll(async () => fetchTimelineEpoch(handle), { timeout: REWIND_TIMEOUT_MS })
+    .not.toBe(beforeEpoch);
+}

packages/app/e2e/helpers/terminal-perf.ts

@@ -2,6 +2,7 @@ import { expect, type Page } from "@playwright/test";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { randomUUID } from "node:crypto";
+import { readFileSync } from "node:fs";
 import { createNodeWebSocketFactory, type NodeWebSocketFactory } from "./node-ws-factory";
 import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
 
@@ -29,12 +30,20 @@ export interface TerminalPerfDaemonClient {
     featureValues?: Record<string, unknown>;
     initialPrompt?: string;
   }): Promise<{ id: string; status: string }>;
+  fetchAgents(options?: { scope?: "active" }): Promise<{
+    entries: Array<{ agent: { id: string; cwd: string; title?: string | null } }>;
+  }>;
+  updateAgent(agentId: string, updates: { name?: string }): Promise<void>;
   waitForAgentUpsert(
     agentId: string,
     predicate: (snapshot: { status: string }) => boolean,
     timeout?: number,
   ): Promise<{ status: string }>;
   sendAgentMessage(agentId: string, text: string): Promise<void>;
+  waitForFinish(
+    agentId: string,
+    timeout?: number,
+  ): Promise<{ status: string; final?: { lastError?: string | null } | null }>;
   subscribeTerminal(
     terminalId: string,
   ): Promise<{ terminalId: string; slot: number; error: null } | { error: string }>;
@@ -68,6 +77,7 @@ interface TerminalPerfDaemonClientConfig {
   url: string;
   clientId: string;
   clientType: "cli";
+  appVersion?: string;
   webSocketFactory?: NodeWebSocketFactory;
 }
 
@@ -91,12 +101,22 @@ export async function connectTerminalClient(): Promise<TerminalPerfDaemonClient>
     url: getDaemonWsUrl(),
     clientId: `terminal-perf-${randomUUID()}`,
     clientType: "cli",
+    appVersion: loadAppVersion(),
     webSocketFactory,
   });
   await client.connect();
   return client;
 }
 
+function loadAppVersion(): string {
+  const packageJsonPath = path.resolve(__dirname, "../../package.json");
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8")) as { version?: unknown };
+  if (typeof packageJson.version !== "string" || packageJson.version.length === 0) {
+    throw new Error(`Missing app version in ${packageJsonPath}`);
+  }
+  return packageJson.version;
+}
+
 export function buildTerminalWorkspaceUrl(workspaceId: string, terminalId: string): string {
   const serverId = getServerId();
   const route = buildHostWorkspaceRoute(serverId, workspaceId);

packages/app/e2e/rewind-flow.claude.real.spec.ts

@@ -0,0 +1,7 @@
+import { defineRewindFlowSpec } from "./rewind-flow.shared";
+
+defineRewindFlowSpec({
+  provider: "claude",
+  rewindMode: "both",
+  fileReverted: true,
+});

packages/app/e2e/rewind-flow.codex.real.spec.ts

@@ -0,0 +1,7 @@
+import { defineRewindFlowSpec } from "./rewind-flow.shared";
+
+defineRewindFlowSpec({
+  provider: "codex",
+  rewindMode: "conversation",
+  fileReverted: false,
+});

packages/app/e2e/rewind-flow.opencode.real.spec.ts

@@ -0,0 +1,8 @@
+import { defineRewindFlowSpec } from "./rewind-flow.shared";
+
+defineRewindFlowSpec({
+  provider: "opencode",
+  initialRewindMode: "both",
+  rewindMode: "both",
+  fileReverted: true,
+});

packages/app/e2e/rewind-flow.pi.real.spec.ts

@@ -0,0 +1,7 @@
+import { defineRewindFlowSpec } from "./rewind-flow.shared";
+
+defineRewindFlowSpec({
+  provider: "pi",
+  rewindMode: "conversation",
+  fileReverted: false,
+});

packages/app/e2e/rewind-flow.shared.ts

@@ -0,0 +1,88 @@
+import { mkdtempSync, realpathSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { test } from "./fixtures";
+import {
+  assertChatTranscript,
+  assertComposerIdle,
+  assertFileContains,
+  assertFileExists,
+  assertFileMissing,
+  cleanupRewindFlow,
+  launchAgent,
+  rewindMessage,
+  sendMessage,
+  type AgentHandle,
+  type RewindFlowMode,
+  type RewindFlowProvider,
+} from "./helpers/rewind-flow";
+
+const FILE_PROMPT = "Use the Write tool to create ./qa.txt with the exact content: PASEO_QA_TOKEN";
+
+interface RewindFlowCase {
+  provider: RewindFlowProvider;
+  initialRewindMode?: RewindFlowMode;
+  rewindMode: RewindFlowMode;
+  fileReverted: boolean;
+}
+
+export function defineRewindFlowSpec(input: RewindFlowCase): void {
+  test.describe(`rewind flow - ${input.provider}`, () => {
+    test.setTimeout(600_000);
+
+    test("rewinds conversation and file-write turns without transcript drift", async ({ page }) => {
+      const cwd = realpathSync(
+        mkdtempSync(path.join(tmpdir(), `paseo-rewind-flow-${input.provider}-`)),
+      );
+      let handle: AgentHandle | undefined;
+
+      try {
+        handle = await launchAgent({
+          page,
+          provider: input.provider,
+          cwd,
+          mode: "full-access",
+        });
+
+        await sendMessage(handle, "hello");
+        await assertChatTranscript(handle, [
+          { role: "user", text: "hello" },
+          { role: "assistant", text: /.+/ },
+        ]);
+
+        await rewindMessage(handle, 0, input.initialRewindMode ?? "conversation");
+        await assertChatTranscript(handle, []);
+        await assertComposerIdle(handle);
+
+        await sendMessage(handle, "hello");
+        await assertChatTranscript(handle, [
+          { role: "user", text: "hello" },
+          { role: "assistant", text: /.+/ },
+        ]);
+
+        await sendMessage(handle, FILE_PROMPT);
+        await assertFileContains(path.join(cwd, "qa.txt"), "PASEO_QA_TOKEN");
+        await assertChatTranscript(handle, [
+          { role: "user", text: "hello" },
+          { role: "assistant", text: /.+/ },
+          { role: "user", text: /Use the Write tool/ },
+          { role: "assistant", text: /.+/ },
+        ]);
+
+        await rewindMessage(handle, 1, input.rewindMode);
+        if (input.fileReverted) {
+          await assertFileMissing(path.join(cwd, "qa.txt"));
+        } else {
+          await assertFileExists(path.join(cwd, "qa.txt"));
+        }
+        await assertChatTranscript(handle, [
+          { role: "user", text: "hello" },
+          { role: "assistant", text: /.+/ },
+        ]);
+        await assertComposerIdle(handle);
+      } finally {
+        await cleanupRewindFlow({ handle, cwd });
+      }
+    });
+  });
+}

packages/app/e2e/rewind-menu.ui-contract.spec.ts

@@ -0,0 +1,167 @@
+import { expect, test, type Page } from "./fixtures";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+import { connectTerminalClient } from "./helpers/terminal-perf";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  composerLocator,
+  expectComposerDraft,
+  expectComposerVisible,
+  fillComposerDraft,
+  submitMessage,
+} from "./helpers/composer";
+
+// UI plumbing contract against the dev mock provider. Real-provider behavior is tested in `daemon-e2e/*-rewind.real.e2e.test.ts`.
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+async function openAgent(page: Page, input: { cwd: string; agentId: string }): Promise<void> {
+  const agentUrl = `${buildHostWorkspaceRoute(
+    getServerId(),
+    input.cwd,
+  )}?open=${encodeURIComponent(`agent:${input.agentId}`)}`;
+  await page.goto(agentUrl);
+  await page.waitForURL(
+    (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+    { timeout: 60_000 },
+  );
+  await expectComposerVisible(page);
+}
+
+async function expectUserMessageCount(page: Page, expected: number): Promise<void> {
+  await expect(page.getByTestId("user-message")).toHaveCount(expected);
+}
+
+test.describe("Rewind sheet", () => {
+  test("rewinds from a user message sheet option", async ({ page }) => {
+    const repo = await createTempGitRepo("rewind-e2e-");
+    const client = await connectTerminalClient();
+    const firstPrompt = "emit 1 coalesced agent stream updates for first rewind turn.";
+    const secondPrompt = "Prepare deleted rewind turn assistant content.";
+    const replacementPrompt = "emit 1 coalesced agent stream updates for replacement rewind turn.";
+
+    try {
+      await client.openProject(repo.path);
+      const agent = await client.createAgent({
+        provider: "mock",
+        cwd: repo.path,
+        title: "Rewind e2e",
+        modeId: "load-test",
+        model: "ten-second-stream",
+        initialPrompt: firstPrompt,
+      });
+      await openAgent(page, { cwd: repo.path, agentId: agent.id });
+
+      await expect(page.getByText(firstPrompt, { exact: true })).toBeVisible();
+      await expectUserMessageCount(page, 1);
+      await submitMessage(page, secondPrompt);
+      await expect(page.getByText(secondPrompt, { exact: true })).toBeVisible();
+      await expect(page.getByText("Cycle 1", { exact: true })).toBeVisible();
+      await expectUserMessageCount(page, 2);
+
+      await page.getByText(firstPrompt, { exact: true }).hover();
+      await page.getByTestId("rewind-menu-trigger").first().click();
+      const rewindSheet = page.getByTestId("rewind-menu-content");
+      await expect(rewindSheet).toBeVisible();
+      await expect(
+        rewindSheet.getByText("This action cannot be undone", { exact: true }),
+      ).toBeVisible();
+      await page.getByTestId("rewind-menu-conversation").click();
+
+      await expect(page.getByTestId("rewind-menu-content")).toHaveCount(0);
+      await expect(page.getByText(secondPrompt, { exact: true })).toHaveCount(0);
+      await expect(page.getByText("Cycle 1", { exact: true })).toHaveCount(0);
+      await expectUserMessageCount(page, 1);
+      await expectComposerDraft(page, firstPrompt);
+
+      await submitMessage(page, replacementPrompt);
+      await expect(page.getByText(replacementPrompt, { exact: true })).toBeVisible();
+      await expect(page.getByText(secondPrompt, { exact: true })).toHaveCount(0);
+      await expect(page.getByText("Cycle 1", { exact: true })).toHaveCount(0);
+      await expectUserMessageCount(page, 2);
+
+      await fillComposerDraft(page, "");
+      await composerLocator(page).evaluate((element) => element.blur());
+      await page.getByText(replacementPrompt, { exact: true }).hover();
+      await page.getByTestId("rewind-menu-trigger").last().click();
+      await expect(page.getByTestId("rewind-menu-content")).toBeVisible();
+      await page.getByTestId("rewind-menu-files").click();
+      await expect(page.getByTestId("rewind-menu-content")).toHaveCount(0);
+      await expectComposerDraft(page, "");
+      await expectUserMessageCount(page, 2);
+
+      const preservedDraft = "Keep this human draft after rewind.";
+      await fillComposerDraft(page, preservedDraft);
+      await composerLocator(page).evaluate((element) => element.blur());
+      await page.getByText(replacementPrompt, { exact: true }).hover();
+      await page.getByTestId("rewind-menu-trigger").last().click();
+      await expect(page.getByTestId("rewind-menu-content")).toBeVisible();
+      await page.getByTestId("rewind-menu-files").click();
+      await expect(page.getByTestId("rewind-menu-content")).toHaveCount(0);
+      await expectComposerDraft(page, preservedDraft);
+      await expectUserMessageCount(page, 2);
+
+      await fillComposerDraft(page, "");
+      await composerLocator(page).evaluate((element) => element.blur());
+      await page.getByText(replacementPrompt, { exact: true }).hover();
+      await page.getByTestId("rewind-menu-trigger").last().click();
+      await expect(page.getByTestId("rewind-menu-content")).toBeVisible();
+      await page.getByTestId("rewind-menu-both").click();
+      await expect(page.getByTestId("rewind-menu-content")).toHaveCount(0);
+      await expectComposerDraft(page, replacementPrompt);
+      await expectUserMessageCount(page, 1);
+    } finally {
+      await client.close();
+      await repo.cleanup();
+    }
+  });
+
+  test("surfaces rewind failures without crashing the page", async ({ page }) => {
+    const repo = await createTempGitRepo("rewind-failure-e2e-");
+    const client = await connectTerminalClient();
+    const firstPrompt = "emit 1 coalesced agent stream updates for failed rewind turn.";
+    const rewindError = "No file checkpoint found for message rewind-failure-e2e.";
+
+    try {
+      await client.openProject(repo.path);
+      const agent = await client.createAgent({
+        provider: "mock",
+        cwd: repo.path,
+        title: "Rewind failure e2e",
+        modeId: "load-test",
+        model: "ten-second-stream",
+        featureValues: {
+          mockRewindError: rewindError,
+        },
+        initialPrompt: firstPrompt,
+      });
+      await openAgent(page, { cwd: repo.path, agentId: agent.id });
+
+      await expect(page.getByText(firstPrompt, { exact: true })).toBeVisible();
+
+      await page.getByText(firstPrompt, { exact: true }).hover();
+      await page.getByTestId("rewind-menu-trigger").first().click();
+      const rewindSheet = page.getByTestId("rewind-menu-content");
+      await expect(rewindSheet).toBeVisible();
+      await expect(
+        rewindSheet.getByText("This action cannot be undone", { exact: true }),
+      ).toBeVisible();
+      await page.getByTestId("rewind-menu-conversation").click();
+
+      await expect(page.getByTestId("app-toast-message")).toHaveText(rewindError);
+      await expect(page.getByText("Uncaught Error")).toHaveCount(0);
+
+      await page.getByText(firstPrompt, { exact: true }).hover();
+      await page.getByTestId("rewind-menu-trigger").first().click();
+      await expect(page.getByTestId("rewind-menu-content")).toBeVisible();
+    } finally {
+      await client.close();
+      await repo.cleanup();
+    }
+  });
+});

packages/app/e2e/terminal-protocol-query.spec.ts

@@ -0,0 +1,61 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { test, expect } from "./fixtures";
+import { TerminalE2EHarness } from "./helpers/terminal-dsl";
+import { getTerminalBufferText, waitForTerminalContent } from "./helpers/terminal-perf";
+
+const OSC11_CAPTURE_SCRIPT = `
+let captured = Buffer.alloc(0);
+
+function finish() {
+  process.stdout.write("PASEO_OSC11_CAPTURE:" + JSON.stringify(captured.toString("latin1")) + "\\n");
+  process.exit(0);
+}
+
+process.stdout.write("\\x1b]11;?\\x07");
+if (process.stdin.isTTY) {
+  process.stdin.setRawMode(true);
+}
+process.stdin.resume();
+process.stdin.on("data", (chunk) => {
+  captured = Buffer.concat([captured, chunk]);
+  if (captured.includes(Buffer.from("rgb:"))) {
+    finish();
+  }
+});
+setTimeout(finish, 700);
+`;
+
+test.describe("Terminal protocol queries", () => {
+  let harness: TerminalE2EHarness;
+
+  test.beforeAll(async () => {
+    harness = await TerminalE2EHarness.create({ tempPrefix: "terminal-protocol-query-" });
+    await writeFile(path.join(harness.tempRepo.path, "osc11-capture.cjs"), OSC11_CAPTURE_SCRIPT);
+  });
+
+  test.afterAll(async () => {
+    await harness?.cleanup();
+  });
+
+  test("does not send browser OSC 11 color-query replies back to the PTY", async ({ page }) => {
+    const terminalInstance = await harness.createTerminal({ name: "osc11-query" });
+    try {
+      await harness.openTerminal(page, { terminalId: terminalInstance.id });
+      await harness.setupPrompt(page);
+
+      const terminal = harness.terminalSurface(page);
+      await terminal.pressSequentially("node osc11-capture.cjs\n", { delay: 0 });
+
+      await waitForTerminalContent(page, (text) => text.includes("PASEO_OSC11_CAPTURE:"), 10_000);
+      await page.waitForTimeout(500);
+
+      const text = await getTerminalBufferText(page);
+
+      expect(text).toContain("rgb:0b0b/0b0b/0b0b");
+      expect(text).not.toContain("rgb:ffff/ffff/ffff");
+    } finally {
+      await harness.killTerminal(terminalInstance.id);
+    }
+  });
+});

packages/app/e2e/user-message-contract.ui-contract.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test, type Page } from "./fixtures";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+import { connectTerminalClient } from "./helpers/terminal-perf";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  composerLocator,
+  expectComposerEditable,
+  expectComposerVisible,
+  fillComposerDraft,
+  submitMessage,
+} from "./helpers/composer";
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+async function openAgent(page: Page, input: { cwd: string; agentId: string }): Promise<void> {
+  const agentUrl = `${buildHostWorkspaceRoute(
+    getServerId(),
+    input.cwd,
+  )}?open=${encodeURIComponent(`agent:${input.agentId}`)}`;
+  await page.goto(agentUrl);
+  await page.waitForURL(
+    (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+    { timeout: 60_000 },
+  );
+  await expectComposerVisible(page);
+}
+
+async function expectUserMessageCount(page: Page, expected: number): Promise<void> {
+  await expect(page.getByTestId("user-message")).toHaveCount(expected, { timeout: 15_000 });
+}
+
+async function expectIdleComposer(page: Page): Promise<void> {
+  await expectComposerEditable(page);
+  await expect(page.getByRole("button", { name: /stop|cancel/i })).toHaveCount(0, {
+    timeout: 15_000,
+  });
+}
+
+async function expectNoLoadingRegressionAfterIdle(page: Page): Promise<void> {
+  await expectIdleComposer(page);
+  await page.waitForTimeout(1_000);
+  await expectIdleComposer(page);
+}
+
+test.describe("User message UI contract", () => {
+  test("dedupes mock provider user_message echoes across multi-turn sends", async ({ page }) => {
+    const repo = await createTempGitRepo("user-message-contract-e2e-");
+    const client = await connectTerminalClient();
+    const prompts = [
+      "emit 1 coalesced agent stream updates for user message contract turn one.",
+      "emit 1 coalesced agent stream updates for user message contract turn two.",
+      "emit 1 coalesced agent stream updates for user message contract turn three.",
+    ];
+
+    try {
+      await client.openProject(repo.path);
+      const agent = await client.createAgent({
+        provider: "mock",
+        cwd: repo.path,
+        title: "User message contract e2e",
+        modeId: "load-test",
+        model: "ten-second-stream",
+      });
+      await openAgent(page, { cwd: repo.path, agentId: agent.id });
+
+      for (let index = 0; index < prompts.length; index += 1) {
+        const prompt = prompts[index]!;
+        await submitMessage(page, prompt);
+        await expect(page.getByText(prompt, { exact: true })).toBeVisible({ timeout: 15_000 });
+        await expect(page.getByText("stress-update-0", { exact: true }).first()).toBeVisible({
+          timeout: 15_000,
+        });
+        await expectUserMessageCount(page, index + 1);
+        await expectNoLoadingRegressionAfterIdle(page);
+      }
+
+      await fillComposerDraft(page, "append");
+      await composerLocator(page).evaluate((element) => element.blur());
+      await expectUserMessageCount(page, 3);
+      await expectIdleComposer(page);
+    } finally {
+      await client.close();
+      await repo.cleanup();
+    }
+  });
+});

packages/app/e2e/workspace-agent-title-handoff.spec.ts

@@ -0,0 +1,239 @@
+import { test, expect, type Page } from "./fixtures";
+import { createTempGitRepo } from "./helpers/workspace";
+import { expectComposerVisible, submitMessage } from "./helpers/composer";
+import { connectTerminalClient, type TerminalPerfDaemonClient } from "./helpers/terminal-perf";
+import { waitForWorkspaceTabsVisible } from "./helpers/workspace-tabs";
+import { captureWsSessionFrames } from "./helpers/rename";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+
+interface WorkspaceTabProbeRecord {
+  at: number;
+  tabs: Array<{
+    testId: string;
+    text: string;
+    ariaLabel: string;
+  }>;
+}
+
+interface CapturedCreateAgentFrame {
+  initialPrompt: string | null;
+  configTitle: string | null;
+}
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set.");
+  }
+  return serverId;
+}
+
+async function installWorkspaceTabProbe(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    type ProbeRecord = WorkspaceTabProbeRecord;
+    type ProbeWindow = Window & {
+      __workspaceTabTitleProbe?: { records: ProbeRecord[]; stop: () => void };
+    };
+
+    const win = window as ProbeWindow;
+    win.__workspaceTabTitleProbe?.stop();
+
+    const records: ProbeRecord[] = [];
+    const isVisible = (element: Element): element is HTMLElement => {
+      if (!(element instanceof HTMLElement)) {
+        return false;
+      }
+      const rect = element.getBoundingClientRect();
+      const style = window.getComputedStyle(element);
+      return (
+        rect.width > 0 &&
+        rect.height > 0 &&
+        style.display !== "none" &&
+        style.visibility !== "hidden"
+      );
+    };
+    const snapshot = () => {
+      records.push({
+        at: performance.now(),
+        tabs: Array.from(document.querySelectorAll('[data-testid^="workspace-tab-"]'))
+          .filter(isVisible)
+          .map((element) => ({
+            testId: element.getAttribute("data-testid") ?? "",
+            text: (element.textContent ?? "").replace(/\s+/g, " ").trim(),
+            ariaLabel: element.getAttribute("aria-label") ?? "",
+          })),
+      });
+    };
+
+    snapshot();
+    const observer = new MutationObserver(snapshot);
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["aria-label", "class", "data-testid", "style"],
+    });
+    const interval = window.setInterval(snapshot, 20);
+    win.__workspaceTabTitleProbe = {
+      records,
+      stop: () => {
+        observer.disconnect();
+        window.clearInterval(interval);
+      },
+    };
+  });
+}
+
+async function readWorkspaceTabProbe(page: Page): Promise<WorkspaceTabProbeRecord[]> {
+  return page.evaluate(() => {
+    type ProbeWindow = Window & {
+      __workspaceTabTitleProbe?: { records: WorkspaceTabProbeRecord[]; stop: () => void };
+    };
+    const probe = (window as ProbeWindow).__workspaceTabTitleProbe;
+    probe?.stop();
+    return probe?.records ?? [];
+  });
+}
+
+function recordHasTabLabel(record: WorkspaceTabProbeRecord, label: string): boolean {
+  return record.tabs.some((tab) => tab.text.includes(label) || tab.ariaLabel.includes(label));
+}
+
+function createFrameStartsWithPrompt(
+  frame: CapturedCreateAgentFrame,
+  promptTitle: string,
+): boolean {
+  return frame.initialPrompt?.startsWith(promptTitle) ?? false;
+}
+
+function countCreateFramesForPrompt(
+  frames: CapturedCreateAgentFrame[],
+  promptTitle: string,
+): number {
+  return frames.filter((frame) => createFrameStartsWithPrompt(frame, promptTitle)).length;
+}
+
+function tabHasLoadingTitle(tab: WorkspaceTabProbeRecord["tabs"][number]): boolean {
+  return /Loading agent title|Loading\.\.\./.test(`${tab.text} ${tab.ariaLabel}`);
+}
+
+function recordHasLoadingTitle(record: WorkspaceTabProbeRecord): boolean {
+  return record.tabs.some(tabHasLoadingTitle);
+}
+
+async function waitForCreatedAgentId(
+  client: TerminalPerfDaemonClient,
+  cwd: string,
+): Promise<string> {
+  await expect
+    .poll(
+      async () => {
+        const result = await client.fetchAgents({ scope: "active" });
+        return result.entries
+          .filter((entry) => entry.agent.cwd === cwd)
+          .map((entry) => entry.agent.id);
+      },
+      { timeout: 30_000 },
+    )
+    .toHaveLength(1);
+  const result = await client.fetchAgents({ scope: "active" });
+  const agent = result.entries.find((entry) => entry.agent.cwd === cwd);
+  if (!agent) {
+    throw new Error(`Expected one created agent in ${cwd}`);
+  }
+  return agent.agent.id;
+}
+
+async function fetchActiveAgentTitle(
+  client: TerminalPerfDaemonClient,
+  agentId: string,
+): Promise<string | null> {
+  const result = await client.fetchAgents({ scope: "active" });
+  return result.entries.find((entry) => entry.agent.id === agentId)?.agent.title ?? null;
+}
+
+async function waitForPromptTabAgentActions(page: Page, promptTitle: string): Promise<void> {
+  const promptTab = page.getByRole("button", { name: promptTitle }).first();
+  await expect(promptTab).toBeVisible({ timeout: 15_000 });
+
+  const deadline = Date.now() + 15_000;
+  while (Date.now() < deadline) {
+    await promptTab.click({ button: "right" });
+    const renameAction = page.getByText("Rename", { exact: true }).first();
+    if (await renameAction.isVisible().catch(() => false)) {
+      await page.keyboard.press("Escape");
+      return;
+    }
+    await page.keyboard.press("Escape").catch(() => undefined);
+    await page.waitForTimeout(100);
+  }
+
+  throw new Error("Prompt tab did not expose agent tab actions after create handoff");
+}
+
+test.describe("Workspace agent title handoff", () => {
+  test("keeps the prompt as the optimistic tab title until the generated title arrives", async ({
+    page,
+  }) => {
+    test.setTimeout(120_000);
+    await page.setViewportSize({ width: 1440, height: 900 });
+
+    const client = await connectTerminalClient();
+    const repo = await createTempGitRepo("workspace-title-handoff-");
+
+    try {
+      const opened = await client.openProject(repo.path);
+      if (!opened.workspace) {
+        throw new Error(opened.error ?? "Failed to open test workspace");
+      }
+
+      const createFrames = captureWsSessionFrames(page, "create_agent_request", (inner) => {
+        const config = (inner.config ?? {}) as Record<string, unknown>;
+        return {
+          initialPrompt: typeof inner.initialPrompt === "string" ? inner.initialPrompt : null,
+          configTitle: typeof config.title === "string" ? config.title : null,
+        };
+      });
+
+      await page.goto(buildHostWorkspaceRoute(getServerId(), opened.workspace.id));
+      await waitForWorkspaceTabsVisible(page);
+      await page.getByTestId("workspace-new-agent-tab").click();
+      await expectComposerVisible(page);
+
+      const promptTitle = "Investigate optimistic tab title handoff";
+      const generatedTitle = "Generated Handoff Title";
+      await installWorkspaceTabProbe(page);
+      await submitMessage(page, `${promptTitle}\n\nMake the UI state deterministic.`);
+
+      const agentId = await waitForCreatedAgentId(client, repo.path);
+      await expect
+        .poll(() => countCreateFramesForPrompt(createFrames, promptTitle), {
+          timeout: 10_000,
+        })
+        .toBe(1);
+      expect(createFrames.at(-1)).toEqual({
+        initialPrompt: `${promptTitle}\n\nMake the UI state deterministic.`,
+        configTitle: null,
+      });
+
+      await waitForPromptTabAgentActions(page, promptTitle);
+
+      await client.updateAgent(agentId, { name: generatedTitle });
+      await expect
+        .poll(() => fetchActiveAgentTitle(client, agentId), { timeout: 10_000 })
+        .toBe(generatedTitle);
+      await expect(page.getByRole("button", { name: generatedTitle }).first()).toBeVisible({
+        timeout: 15_000,
+      });
+
+      const records = await readWorkspaceTabProbe(page);
+      expect(records.some((record) => recordHasTabLabel(record, promptTitle))).toBe(true);
+      expect(records.some((record) => recordHasTabLabel(record, generatedTitle))).toBe(true);
+      expect(records.filter(recordHasLoadingTitle)).toEqual([]);
+    } finally {
+      await client.close().catch(() => undefined);
+      await repo.cleanup();
+    }
+  });
+});

packages/app/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@getpaseo/app",
-  "version": "0.1.80",
+  "version": "0.1.83",
   "private": true,
   "main": "index.ts",
   "scripts": {
     "start": "cross-env APP_VARIANT=development expo start",
+    "build:terminal-webview": "node ./scripts/build-terminal-webview-html.mjs",
     "reset-project": "node ./scripts/reset-project.js",
     "build:workspace-deps": "npm run build --workspace=@getpaseo/highlight && npm run build --workspace=@getpaseo/expo-two-way-audio",
-    "eas-build-post-install": "npm run build:workspace-deps",
+    "eas-build-post-install": "npm run build:workspace-deps && npm run build:terminal-webview",
     "android": "npm run android:development",
     "android:development": "cross-env APP_VARIANT=development expo prebuild --platform android --non-interactive && cross-env APP_VARIANT=development expo run:android --variant=debug",
     "android:production": "cross-env APP_VARIANT=production expo prebuild --platform android --non-interactive && cross-env APP_VARIANT=production expo run:android --variant=release",
@@ -20,7 +21,8 @@
     "typecheck": "tsgo --noEmit",
     "test": "vitest run",
     "test:browser": "vitest run --project browser",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --project='Desktop Chrome'",
+    "test:e2e:real": "playwright test --project=real-provider",
     "test:e2e:ui": "playwright test --ui",
     "build": "npm run build:web",
     "build:web": "npm run build:workspace-deps && expo export --platform web",
@@ -41,15 +43,15 @@
     "@react-navigation/native": "^7.1.8",
     "@tanstack/react-query": "^5.90.11",
     "@tanstack/react-virtual": "^3.13.21",
-    "@xterm/addon-clipboard": "^0.2.0",
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/addon-image": "^0.9.0",
-    "@xterm/addon-ligatures": "^0.10.0",
-    "@xterm/addon-search": "^0.16.0",
-    "@xterm/addon-unicode11": "^0.9.0",
-    "@xterm/addon-web-links": "^0.12.0",
-    "@xterm/addon-webgl": "^0.19.0",
-    "@xterm/xterm": "^6.0.0",
+    "@xterm/addon-clipboard": "^0.3.0-beta.213",
+    "@xterm/addon-fit": "^0.12.0-beta.213",
+    "@xterm/addon-image": "^0.10.0-beta.213",
+    "@xterm/addon-ligatures": "^0.11.0-beta.213",
+    "@xterm/addon-search": "^0.17.0-beta.213",
+    "@xterm/addon-unicode11": "^0.10.0-beta.213",
+    "@xterm/addon-web-links": "^0.13.0-beta.213",
+    "@xterm/addon-webgl": "^0.20.0-beta.212",
+    "@xterm/xterm": "^6.1.0-beta.213",
     "buffer": "^6.0.3",
     "expo": "^54.0.18",
     "expo-asset": "~12.0.12",
@@ -75,6 +77,7 @@
     "expo-updates": "~29.0.12",
     "fast-deep-equal": "^3.1.3",
     "lucide-react-native": "^0.546.0",
+    "markdown-it": "^10.0.0",
     "mnemonic-id": "^3.2.7",
     "qrcode": "^1.5.4",
     "react": "19.1.0",
@@ -102,12 +105,13 @@
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@testing-library/react": "^16.3.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/qrcode": "^1.5.6",
     "@types/react": "~19.2.0",
     "@types/ws": "^8.18.1",
     "@vitest/browser": "^4.1.7",
     "@vitest/browser-playwright": "^4.1.7",
-    "@xterm/headless": "^6.0.0",
+    "@xterm/headless": "^6.1.0-beta.213",
     "dotenv": "^17.2.3",
     "eas-cli": "^16.24.1",
     "eslint": "^9.25.0",

packages/app/playwright.config.ts

@@ -27,6 +27,12 @@ export default defineConfig({
   projects: [
     {
       name: "Desktop Chrome",
+      testIgnore: ["**/*.real.spec.ts"],
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "real-provider",
+      testMatch: ["**/*.real.spec.ts"],
       use: { ...devices["Desktop Chrome"] },
     },
   ],

packages/app/public/index.html

@@ -4,10 +4,16 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="robots" content="noindex,nofollow" />
+    <meta name="theme-color" content="#181B1A" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Paseo" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
     />
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <title>%WEB_TITLE%</title>
     <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
     <style id="expo-reset">
@@ -19,6 +25,8 @@
       /* These styles disable body scrolling if you are using <ScrollView> */
       body {
         overflow: hidden;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }
       /* Prevent white flash before React mounts */
       @media (prefers-color-scheme: dark) {

packages/app/public/manifest.json

@@ -0,0 +1,27 @@
+{
+  "id": "/",
+  "name": "Paseo",
+  "short_name": "Paseo",
+  "description": "Monitor and control local AI coding agents from anywhere.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#181B1A",
+  "background_color": "#181B1A",
+  "categories": ["developer", "productivity", "utilities"],
+  "icons": [
+    {
+      "src": "/pwa-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/pwa-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

packages/app/scripts/build-terminal-webview-html.mjs

@@ -0,0 +1,89 @@
+import esbuild from "esbuild";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const appRoot = path.resolve(__dirname, "..");
+const repoRoot = path.resolve(appRoot, "../..");
+const entry = path.join(appRoot, "src/terminal/webview/terminal-emulator-webview-entry.ts");
+const output = path.join(appRoot, "src/terminal/webview/terminal-emulator-webview-html.ts");
+
+async function resolveTsPath(basePath) {
+  const candidates = [
+    basePath,
+    `${basePath}.ts`,
+    `${basePath}.tsx`,
+    `${basePath}.js`,
+    `${basePath}.jsx`,
+    path.join(basePath, "index.ts"),
+    path.join(basePath, "index.tsx"),
+    path.join(basePath, "index.js"),
+    path.join(basePath, "index.jsx"),
+  ];
+  for (const candidate of candidates) {
+    try {
+      const stat = await fs.stat(candidate);
+      if (stat.isFile()) return candidate;
+    } catch {
+      // try next candidate
+    }
+  }
+  return basePath;
+}
+
+const aliasPlugin = {
+  name: "paseo-alias",
+  setup(build) {
+    build.onResolve({ filter: /^@\// }, async (args) => ({
+      path: await resolveTsPath(path.join(appRoot, "src", args.path.slice(2))),
+    }));
+    build.onResolve({ filter: /^@server\// }, async (args) => ({
+      path: await resolveTsPath(
+        path.join(repoRoot, "packages/server/src", args.path.slice("@server/".length)),
+      ),
+    }));
+  },
+};
+
+const result = await esbuild.build({
+  entryPoints: [entry],
+  bundle: true,
+  write: false,
+  format: "iife",
+  platform: "browser",
+  target: ["ios15", "chrome100"],
+  loader: {
+    ".css": "text",
+  },
+  plugins: [aliasPlugin],
+  logLevel: "info",
+});
+
+const js = result.outputFiles[0]?.text;
+if (!js) {
+  throw new Error("terminal webview bundle produced no JavaScript");
+}
+
+const html = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
+  </head>
+  <body>
+    <script>${js}</script>
+  </body>
+</html>`;
+
+const contents = `// Generated by packages/app/scripts/build-terminal-webview-html.mjs.
+// Do not edit by hand.
+
+export const terminalEmulatorWebViewHtml = ${JSON.stringify(html)};
+`;
+
+await fs.writeFile(output, contents);
+console.log(`Wrote ${path.relative(repoRoot, output)} (${html.length} bytes)`);

packages/app/src/agent-stream/bottom-anchor-controller.test.ts

@@ -3,8 +3,8 @@ import {
   __private__,
   deriveBottomAnchorBlockedReason,
   type BottomAnchorMode,
-} from "./use-bottom-anchor-controller";
-import type { BottomAnchorTransportBehavior } from "./agent-stream-render-strategy";
+} from "./bottom-anchor-controller";
+import type { BottomAnchorTransportBehavior } from "./strategy";
 
 type MeasurementState = ReturnType<typeof createMeasurementState>;
 

packages/app/src/agent-stream/bottom-anchor-controller.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import type { BottomAnchorTransportBehavior } from "./agent-stream-render-strategy";
+import type { BottomAnchorTransportBehavior } from "./strategy";
 
 export type BottomAnchorMode = "sticky-bottom" | "detached";
 

packages/app/src/agent-stream/layout.test.ts

@@ -0,0 +1,222 @@
+import { describe, expect, it } from "vitest";
+import type { TurnTiming } from "@/timeline/turn-time";
+import type { StreamItem } from "@/types/stream";
+import {
+  orderHeadForStreamRenderStrategy,
+  orderTailForStreamRenderStrategy,
+  type StreamStrategy,
+} from "./strategy";
+import { resolveStreamRenderStrategy } from "./strategy-resolver";
+import { layoutStream, type StreamLayout, type StreamLayoutItem } from "./layout";
+
+function timestamp(seed: number): Date {
+  return new Date(`2026-01-01T00:00:${seed.toString().padStart(2, "0")}.000Z`);
+}
+
+function userMessage(id: string, seed: number): Extract<StreamItem, { kind: "user_message" }> {
+  return {
+    kind: "user_message",
+    id,
+    text: id,
+    timestamp: timestamp(seed),
+  };
+}
+
+function assistantMessage(
+  id: string,
+  seed: number,
+  block?: { groupId: string; index: number },
+): Extract<StreamItem, { kind: "assistant_message" }> {
+  return {
+    kind: "assistant_message",
+    id,
+    text: id,
+    timestamp: timestamp(seed),
+    ...(block ? { blockGroupId: block.groupId, blockIndex: block.index } : {}),
+  };
+}
+
+function toolCall(id: string, seed: number): Extract<StreamItem, { kind: "tool_call" }> {
+  return {
+    kind: "tool_call",
+    id,
+    timestamp: timestamp(seed),
+    payload: {
+      source: "orchestrator",
+      data: {
+        toolCallId: id,
+        toolName: "Shell",
+        arguments: "echo hi",
+        result: null,
+        status: "completed",
+      },
+    },
+  };
+}
+
+function thought(id: string, seed: number): Extract<StreamItem, { kind: "thought" }> {
+  return {
+    kind: "thought",
+    id,
+    text: id,
+    timestamp: timestamp(seed),
+    status: "ready",
+  };
+}
+
+function timingFor(...ids: string[]): Map<string, TurnTiming> {
+  const timing = {
+    startedAt: timestamp(1),
+    completedAt: timestamp(9),
+    durationMs: 8000,
+  };
+  return new Map(ids.map((id) => [id, timing]));
+}
+
+function strategyFor(platform: "web" | "android"): StreamStrategy {
+  return resolveStreamRenderStrategy({
+    platform,
+    isMobileBreakpoint: false,
+  });
+}
+
+function layoutFor(input: {
+  platform: "web" | "android";
+  agentStatus?: string;
+  tail: StreamItem[];
+  head?: StreamItem[];
+  timingIds?: string[];
+}): StreamLayout {
+  const strategy = strategyFor(input.platform);
+  return layoutStream({
+    strategy,
+    agentStatus: input.agentStatus ?? "idle",
+    history: orderTailForStreamRenderStrategy({
+      strategy,
+      streamItems: input.tail,
+    }),
+    liveHead: orderHeadForStreamRenderStrategy({
+      strategy,
+      streamHead: input.head ?? [],
+    }),
+    timingByAssistantId: timingFor(...(input.timingIds ?? [])),
+  });
+}
+
+function footerOwners(layout: StreamLayout): string[] {
+  const owners = [
+    ...layout.history.flatMap((item) => (item.completedFooter ? [item.item.id] : [])),
+    ...layout.liveHead.flatMap((item) => (item.completedFooter ? [item.item.id] : [])),
+    ...(layout.auxiliaryTurnFooter ? [layout.auxiliaryTurnFooter.itemId] : []),
+  ];
+  return owners;
+}
+
+function findLayoutItem(layout: StreamLayout, id: string): StreamLayoutItem {
+  const item = [...layout.history, ...layout.liveHead].find(
+    (candidate) => candidate.item.id === id,
+  );
+  if (!item) {
+    throw new Error(`Missing layout item ${id}`);
+  }
+  return item;
+}
+
+describe("layoutStream", () => {
+  it("does not duplicate footers when a native assistant turn spans history and live head", () => {
+    const historyBlock = assistantMessage("turn:block:0", 2, { groupId: "turn", index: 0 });
+    const headBlock = assistantMessage("turn:head", 3, { groupId: "turn", index: 1 });
+    const layout = layoutFor({
+      platform: "android",
+      tail: [userMessage("u1", 1), historyBlock],
+      head: [headBlock],
+      timingIds: [historyBlock.id, headBlock.id],
+    });
+
+    expect(footerOwners(layout)).toEqual([headBlock.id]);
+    expect(findLayoutItem(layout, historyBlock.id).belowItem?.id).toBe(headBlock.id);
+    expect(findLayoutItem(layout, historyBlock.id).completedFooter).toBeNull();
+  });
+
+  it("does not duplicate footers when a web assistant turn spans history and live head", () => {
+    const historyBlock = assistantMessage("turn:block:0", 2, { groupId: "turn", index: 0 });
+    const headBlock = assistantMessage("turn:head", 3, { groupId: "turn", index: 1 });
+    const layout = layoutFor({
+      platform: "web",
+      tail: [userMessage("u1", 1), historyBlock],
+      head: [headBlock],
+      timingIds: [historyBlock.id, headBlock.id],
+    });
+
+    expect(footerOwners(layout)).toEqual([headBlock.id]);
+    expect(findLayoutItem(layout, historyBlock.id).belowItem?.id).toBe(headBlock.id);
+    expect(findLayoutItem(layout, headBlock.id).aboveItem?.id).toBe(historyBlock.id);
+  });
+
+  it("keeps the completed footer visually after the assistant after a native user reply", () => {
+    const assistant = assistantMessage("a1", 2);
+    const layout = layoutFor({
+      platform: "android",
+      tail: [userMessage("u1", 1), assistant, userMessage("u2", 3)],
+      timingIds: [assistant.id],
+    });
+    const assistantRow = findLayoutItem(layout, assistant.id);
+
+    expect(layout.auxiliaryTurnFooter).toBeNull();
+    expect(assistantRow.completedFooter?.itemId).toBe(assistant.id);
+    expect(assistantRow.belowItem?.id).toBe("u2");
+    expect(assistantRow.frameOrder).toBe("footer-then-content");
+  });
+
+  it("keeps forward stream content before its completed footer", () => {
+    const assistant = assistantMessage("a1", 2);
+    const layout = layoutFor({
+      platform: "web",
+      tail: [userMessage("u1", 1), assistant, userMessage("u2", 3)],
+      timingIds: [assistant.id],
+    });
+    const assistantRow = findLayoutItem(layout, assistant.id);
+
+    expect(assistantRow.completedFooter?.itemId).toBe(assistant.id);
+    expect(assistantRow.frameOrder).toBe("content-then-footer");
+  });
+
+  it("compacts assistant block spacing across the history and live-head boundary", () => {
+    const historyBlock = assistantMessage("turn:block:0", 2, { groupId: "turn", index: 0 });
+    const headBlock = assistantMessage("turn:head", 3, { groupId: "turn", index: 1 });
+    const layout = layoutFor({
+      platform: "android",
+      tail: [userMessage("u1", 1), historyBlock],
+      head: [headBlock],
+      timingIds: [historyBlock.id, headBlock.id],
+    });
+
+    expect(findLayoutItem(layout, historyBlock.id).assistantSpacing).toBe("compactBottom");
+    expect(findLayoutItem(layout, headBlock.id).assistantSpacing).toBe("compactTop");
+  });
+
+  it("computes tool sequence position from strategy-aware neighbors", () => {
+    const shell = toolCall("tool-1", 2);
+    const thinking = thought("thought-1", 3);
+    const layout = layoutFor({
+      platform: "android",
+      tail: [userMessage("u1", 1), shell, thinking, assistantMessage("a1", 4)],
+    });
+
+    expect(findLayoutItem(layout, shell.id).toolSequence).toBe("first");
+    expect(findLayoutItem(layout, thinking.id).toolSequence).toBe("last");
+  });
+
+  it("keeps bottom and inline footer ownership mutually exclusive", () => {
+    const assistant = assistantMessage("a1", 2);
+    const layout = layoutFor({
+      platform: "web",
+      tail: [userMessage("u1", 1), assistant],
+      timingIds: [assistant.id],
+    });
+
+    expect(layout.auxiliaryTurnFooter?.itemId).toBe(assistant.id);
+    expect(findLayoutItem(layout, assistant.id).completedFooter).toBeNull();
+    expect(footerOwners(layout)).toEqual([assistant.id]);
+  });
+});

packages/app/src/agent-stream/layout.ts

@@ -0,0 +1,248 @@
+import type { TurnTiming } from "@/timeline/turn-time";
+import type { StreamItem } from "@/types/stream";
+import { getAssistantBlockSpacing, getGapBetweenStreamItems } from "./spacing";
+import type { StreamFrameChildOrder, StreamStrategy } from "./strategy";
+
+export type StreamToolSequence = "single" | "first" | "middle" | "last" | "none";
+
+export interface TurnFooterHost {
+  itemId: string;
+  items: StreamItem[];
+  timing?: TurnTiming;
+  startIndex: number;
+}
+
+export interface StreamLayoutItem {
+  item: StreamItem;
+  index: number;
+  items: StreamItem[];
+  aboveItem: StreamItem | null;
+  belowItem: StreamItem | null;
+  gapBelow: number;
+  assistantSpacing: "default" | "compactTop" | "compactBottom" | "compactBoth";
+  completedFooter: TurnFooterHost | null;
+  toolSequence: StreamToolSequence;
+  isFirstInUserGroup: boolean;
+  isLastInUserGroup: boolean;
+  isLastInToolSequence: boolean;
+  frameOrder: StreamFrameChildOrder;
+}
+
+export interface StreamLayout {
+  history: StreamLayoutItem[];
+  liveHead: StreamLayoutItem[];
+  auxiliaryTurnFooter: TurnFooterHost | null;
+  historyToHeadGap: number;
+}
+
+export interface StreamLayoutInput {
+  strategy: StreamStrategy;
+  agentStatus: string;
+  history: StreamItem[];
+  liveHead: StreamItem[];
+  timingByAssistantId: Map<string, TurnTiming>;
+}
+
+interface LayoutSegmentInput {
+  strategy: StreamStrategy;
+  agentStatus: string;
+  items: StreamItem[];
+  timingByAssistantId: Map<string, TurnTiming>;
+  auxiliaryTurnFooter: TurnFooterHost | null;
+  frameOrder: StreamFrameChildOrder;
+  boundaryIndex: number | null;
+  boundaryAboveItem: StreamItem | null;
+  boundaryBelowItem: StreamItem | null;
+}
+
+function createTurnFooterHost(input: {
+  item: StreamItem;
+  items: StreamItem[];
+  index: number;
+  timingByAssistantId: Map<string, TurnTiming>;
+}): TurnFooterHost {
+  return {
+    itemId: input.item.id,
+    items: input.items,
+    timing: input.timingByAssistantId.get(input.item.id),
+    startIndex: input.index,
+  };
+}
+
+function resolveAuxiliaryTurnFooter(input: StreamLayoutInput): TurnFooterHost | null {
+  if (input.agentStatus === "running") {
+    return null;
+  }
+
+  const footerItems = input.liveHead.length > 0 ? input.liveHead : input.history;
+  const startIndex = input.strategy.getLatestItemIndex(footerItems);
+  if (startIndex === null) {
+    return null;
+  }
+
+  const item = footerItems[startIndex];
+  if (!item || item.kind !== "assistant_message") {
+    return null;
+  }
+
+  return createTurnFooterHost({
+    item,
+    items: footerItems,
+    index: startIndex,
+    timingByAssistantId: input.timingByAssistantId,
+  });
+}
+
+function shouldRenderCompletedFooter(input: {
+  item: StreamItem;
+  belowItem: StreamItem | null;
+  agentStatus: string;
+  auxiliaryTurnFooter: TurnFooterHost | null;
+}): boolean {
+  return (
+    input.item.kind === "assistant_message" &&
+    input.auxiliaryTurnFooter?.itemId !== input.item.id &&
+    (input.belowItem?.kind === "user_message" ||
+      (input.belowItem === null && input.agentStatus !== "running"))
+  );
+}
+
+function isToolSequenceItem(item: StreamItem | null): boolean {
+  return item?.kind === "tool_call" || item?.kind === "thought" || item?.kind === "todo_list";
+}
+
+function getToolSequence(input: {
+  item: StreamItem;
+  aboveItem: StreamItem | null;
+  belowItem: StreamItem | null;
+}): StreamToolSequence {
+  if (!isToolSequenceItem(input.item)) {
+    return "none";
+  }
+
+  const hasAbove = isToolSequenceItem(input.aboveItem);
+  const hasBelow = isToolSequenceItem(input.belowItem);
+  if (hasAbove && hasBelow) {
+    return "middle";
+  }
+  if (hasAbove) {
+    return "last";
+  }
+  if (hasBelow) {
+    return "first";
+  }
+  return "single";
+}
+
+function getSegmentNeighbor(input: {
+  strategy: StreamStrategy;
+  items: StreamItem[];
+  index: number;
+  relation: "above" | "below";
+  boundaryIndex: number | null;
+  boundaryItem: StreamItem | null;
+}): StreamItem | null {
+  const neighbor = input.strategy.getNeighborItem(input.items, input.index, input.relation);
+  if (neighbor) {
+    return neighbor;
+  }
+  if (input.index === input.boundaryIndex) {
+    return input.boundaryItem;
+  }
+  return null;
+}
+
+function layoutSegment(input: LayoutSegmentInput): StreamLayoutItem[] {
+  return input.items.map((item, index) => {
+    const aboveItem = getSegmentNeighbor({
+      strategy: input.strategy,
+      items: input.items,
+      index,
+      relation: "above",
+      boundaryIndex: input.boundaryIndex,
+      boundaryItem: input.boundaryAboveItem,
+    });
+    const belowItem = getSegmentNeighbor({
+      strategy: input.strategy,
+      items: input.items,
+      index,
+      relation: "below",
+      boundaryIndex: input.boundaryIndex,
+      boundaryItem: input.boundaryBelowItem,
+    });
+    const assistantSpacing = getAssistantBlockSpacing({
+      item,
+      aboveItem,
+      belowItem,
+    });
+    const completedFooter = shouldRenderCompletedFooter({
+      item,
+      belowItem,
+      agentStatus: input.agentStatus,
+      auxiliaryTurnFooter: input.auxiliaryTurnFooter,
+    })
+      ? createTurnFooterHost({
+          item,
+          items: input.items,
+          index,
+          timingByAssistantId: input.timingByAssistantId,
+        })
+      : null;
+
+    return {
+      item,
+      index,
+      items: input.items,
+      aboveItem,
+      belowItem,
+      gapBelow: completedFooter ? 0 : getGapBetweenStreamItems(item, belowItem),
+      assistantSpacing,
+      completedFooter,
+      toolSequence: getToolSequence({ item, aboveItem, belowItem }),
+      isFirstInUserGroup: item.kind === "user_message" && aboveItem?.kind !== "user_message",
+      isLastInUserGroup: item.kind === "user_message" && belowItem?.kind !== "user_message",
+      isLastInToolSequence: isToolSequenceItem(item) && !isToolSequenceItem(belowItem),
+      frameOrder: input.frameOrder,
+    };
+  });
+}
+
+export function layoutStream(input: StreamLayoutInput): StreamLayout {
+  const auxiliaryTurnFooter = resolveAuxiliaryTurnFooter(input);
+  const historyBoundaryIndex = input.strategy.getHistoryLiveBoundaryIndex(input.history);
+  const liveHeadBoundaryIndex = input.strategy.getLiveHeadHistoryBoundaryIndex(input.liveHead);
+  const historyBoundaryItem =
+    historyBoundaryIndex === null ? null : (input.history[historyBoundaryIndex] ?? null);
+  const liveHeadBoundaryItem =
+    liveHeadBoundaryIndex === null ? null : (input.liveHead[liveHeadBoundaryIndex] ?? null);
+  const frameOrder = input.strategy.getFrameChildOrder();
+  const history = layoutSegment({
+    strategy: input.strategy,
+    agentStatus: input.agentStatus,
+    items: input.history,
+    timingByAssistantId: input.timingByAssistantId,
+    auxiliaryTurnFooter,
+    frameOrder,
+    boundaryIndex: historyBoundaryIndex,
+    boundaryAboveItem: null,
+    boundaryBelowItem: liveHeadBoundaryItem,
+  });
+  const liveHead = layoutSegment({
+    strategy: input.strategy,
+    agentStatus: input.agentStatus,
+    items: input.liveHead,
+    timingByAssistantId: input.timingByAssistantId,
+    auxiliaryTurnFooter,
+    frameOrder,
+    boundaryIndex: liveHeadBoundaryIndex,
+    boundaryAboveItem: historyBoundaryItem,
+    boundaryBelowItem: null,
+  });
+
+  return {
+    history,
+    liveHead,
+    auxiliaryTurnFooter,
+    historyToHeadGap: getGapBetweenStreamItems(historyBoundaryItem, liveHeadBoundaryItem),
+  };
+}

packages/app/src/agent-stream/model.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { StreamItem } from "@/types/stream";
-import { buildAgentStreamRenderModel } from "./agent-stream-render-model";
+import { buildAgentStreamRenderModel } from "./model";
 
 function createTimestamp(seed: number): Date {
   return new Date(`2026-01-01T00:00:${seed.toString().padStart(2, "0")}.000Z`);

packages/app/src/agent-stream/model.ts

@@ -5,12 +5,9 @@ import {
   findMountedWindowStart,
   getWebMountedRecentStreamItems,
   getWebPartialVirtualizationThreshold,
-} from "./agent-stream-web-virtualization";
-import {
-  orderHeadForStreamRenderStrategy,
-  orderTailForStreamRenderStrategy,
-} from "./stream-strategy";
-import { resolveStreamRenderStrategy } from "./stream-strategy-resolver";
+} from "./web-virtualization";
+import { orderHeadForStreamRenderStrategy, orderTailForStreamRenderStrategy } from "./strategy";
+import { resolveStreamRenderStrategy } from "./strategy-resolver";
 
 export interface StreamRenderSegments {
   historyVirtualized: StreamItem[];

packages/app/src/agent-stream/render-strategy.test.ts

@@ -3,6 +3,9 @@ import type { StreamItem } from "@/types/stream";
 import {
   collectAssistantTurnContentForStreamRenderStrategy,
   getBottomOffsetForStreamRenderStrategy,
+  getFrameChildOrderForStreamRenderStrategy,
+  getHistoryLiveBoundaryIndexForStreamRenderStrategy,
+  getLiveHeadHistoryBoundaryIndexForStreamRenderStrategy,
   getStreamEdgeSlotProps,
   getStreamNeighborIndex,
   getStreamNeighborItem,
@@ -10,8 +13,8 @@ import {
   orderHeadForStreamRenderStrategy,
   orderTailForStreamRenderStrategy,
   resolveBottomAnchorTransportBehavior,
-  resolveStreamRenderStrategy,
-} from "./agent-stream-render-strategy";
+} from "./strategy";
+import { resolveStreamRenderStrategy } from "./strategy-resolver";
 
 function createTimestamp(seed: number): Date {
   return new Date(`2026-01-01T00:00:0${seed}.000Z`);
@@ -328,3 +331,88 @@ describe("edge slot semantics", () => {
     });
   });
 });
+
+describe("layout strategy edges", () => {
+  const streamItems: StreamItem[] = [
+    userMessage("u1", "user-1", 1),
+    assistantMessage("a1", "assistant-1", 2),
+  ];
+
+  it("uses the newest history edge as the history/live boundary", () => {
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const inverted = resolveStreamRenderStrategy({
+      platform: "android",
+      isMobileBreakpoint: false,
+    });
+
+    const forwardHistory = orderTailForStreamRenderStrategy({ strategy: forward, streamItems });
+    const invertedHistory = orderTailForStreamRenderStrategy({ strategy: inverted, streamItems });
+
+    expect(
+      getHistoryLiveBoundaryIndexForStreamRenderStrategy({
+        strategy: forward,
+        history: forwardHistory,
+      }),
+    ).toBe(1);
+    expect(
+      getHistoryLiveBoundaryIndexForStreamRenderStrategy({
+        strategy: inverted,
+        history: invertedHistory,
+      }),
+    ).toBe(0);
+  });
+
+  it("uses the oldest live-head edge as the live-head/history boundary", () => {
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const inverted = resolveStreamRenderStrategy({
+      platform: "ios",
+      isMobileBreakpoint: false,
+    });
+
+    const forwardHead = orderHeadForStreamRenderStrategy({
+      strategy: forward,
+      streamHead: streamItems,
+    });
+    const invertedHead = orderHeadForStreamRenderStrategy({
+      strategy: inverted,
+      streamHead: streamItems,
+    });
+
+    expect(
+      getLiveHeadHistoryBoundaryIndexForStreamRenderStrategy({
+        strategy: forward,
+        liveHead: forwardHead,
+      }),
+    ).toBe(0);
+    expect(
+      getLiveHeadHistoryBoundaryIndexForStreamRenderStrategy({
+        strategy: inverted,
+        liveHead: invertedHead,
+      }),
+    ).toBe(1);
+  });
+
+  it("names the frame child order needed by native inverted cells", () => {
+    const forward = resolveStreamRenderStrategy({
+      platform: "web",
+      isMobileBreakpoint: false,
+    });
+    const inverted = resolveStreamRenderStrategy({
+      platform: "android",
+      isMobileBreakpoint: false,
+    });
+
+    expect(getFrameChildOrderForStreamRenderStrategy({ strategy: forward })).toBe(
+      "content-then-footer",
+    );
+    expect(getFrameChildOrderForStreamRenderStrategy({ strategy: inverted })).toBe(
+      "footer-then-content",
+    );
+  });
+});

packages/app/src/agent-stream/spacing.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { StreamItem } from "@/types/stream";
-import { getAssistantBlockSpacing, isSameAssistantBlockGroup } from "./agent-stream-view-data";
+import { getAssistantBlockSpacing, isSameAssistantBlockGroup } from "./spacing";
 
 function assistantBlock(params: {
   id: string;

packages/app/src/agent-stream/strategy-native.tsx

@@ -19,13 +19,13 @@ import {
 } from "react-native";
 import type { StreamItem } from "@/types/stream";
 import { useStableEvent } from "@/hooks/use-stable-event";
-import { useBottomAnchorController } from "./use-bottom-anchor-controller";
-import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./stream-strategy";
+import { useBottomAnchorController } from "./bottom-anchor-controller";
+import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./strategy";
 import {
   createStreamStrategy,
   isNearBottomForStreamRenderStrategy,
   resolveBottomAnchorTransportBehavior,
-} from "./stream-strategy";
+} from "./strategy";
 
 const DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION = Object.freeze({
   minIndexForVisible: 0,
@@ -380,6 +380,9 @@ export function createNativeStreamStrategy(): StreamStrategy {
     orderHeadReverse: true,
     assistantTurnTraversalStep: 1,
     edgeSlot: "header",
+    historyLiveBoundaryEdge: "first",
+    liveHeadHistoryBoundaryEdge: "last",
+    frameChildOrder: "footer-then-content",
     flatListInverted: true,
     overlayScrollbarInverted: true,
     maintainVisibleContentPosition: DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION,

packages/app/src/agent-stream/strategy-resolver.ts

@@ -1,6 +1,6 @@
-import type { ResolveStreamRenderStrategyInput, StreamStrategy } from "./stream-strategy";
-import { createNativeStreamStrategy } from "./stream-strategy-native";
-import { createWebStreamStrategy } from "./stream-strategy-web";
+import type { ResolveStreamRenderStrategyInput, StreamStrategy } from "./strategy";
+import { createNativeStreamStrategy } from "./strategy-native";
+import { createWebStreamStrategy } from "./strategy-web";
 
 export function resolveStreamRenderStrategy(
   input: ResolveStreamRenderStrategyInput,

packages/app/src/agent-stream/strategy-web.test.tsx

@@ -6,8 +6,8 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { StreamItem } from "@/types/stream";
-import type { StreamSegmentRenderers, StreamViewportHandle } from "./stream-strategy";
-import { createWebStreamStrategy } from "./stream-strategy-web";
+import type { StreamSegmentRenderers, StreamViewportHandle } from "./strategy";
+import { createWebStreamStrategy } from "./strategy-web";
 
 vi.hoisted(() => {
   Object.defineProperty(window, "matchMedia", {
@@ -25,7 +25,7 @@ vi.hoisted(() => {
   });
 });
 
-vi.mock("./use-web-scrollbar", () => ({ useWebElementScrollbar: () => null }));
+vi.mock("@/components/use-web-scrollbar", () => ({ useWebElementScrollbar: () => null }));
 
 function userMessage(index: number): StreamItem {
   return {

packages/app/src/agent-stream/strategy-web.tsx

@@ -10,9 +10,9 @@ import React, {
 } from "react";
 import { ActivityIndicator } from "react-native";
 import { measureElement as measureVirtualElement, useVirtualizer } from "@tanstack/react-virtual";
-import { estimateStreamItemHeight } from "./agent-stream-web-virtualization";
-import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./stream-strategy";
-import { createStreamStrategy } from "./stream-strategy";
+import { estimateStreamItemHeight } from "./web-virtualization";
+import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./strategy";
+import { createStreamStrategy } from "./strategy";
 
 interface CreateWebStreamStrategyInput {
   isMobileBreakpoint: boolean;
@@ -25,7 +25,7 @@ const USER_SCROLL_DELTA_EPSILON = 1;
 const AUTO_SCROLL_BOTTOM_THRESHOLD_PX = 64;
 const AUTO_SCROLL_RESUME_THRESHOLD_PX = 1;
 const HISTORY_START_THRESHOLD_PX = 96;
-import { useWebElementScrollbar } from "./use-web-scrollbar";
+import { useWebElementScrollbar } from "@/components/use-web-scrollbar";
 
 const historyStartSlotStyle: CSSProperties = {
   display: "flex",
@@ -610,6 +610,9 @@ export function createWebStreamStrategy(input: CreateWebStreamStrategyInput): St
     orderHeadReverse: false,
     assistantTurnTraversalStep: -1,
     edgeSlot: "footer",
+    historyLiveBoundaryEdge: "last",
+    liveHeadHistoryBoundaryEdge: "first",
+    frameChildOrder: "content-then-footer",
     flatListInverted: false,
     overlayScrollbarInverted: false,
     maintainVisibleContentPosition: undefined,

packages/app/src/agent-stream/strategy.ts

@@ -1,15 +1,16 @@
 import type { ComponentType, ReactElement, ReactNode, RefObject } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { StreamItem } from "@/types/stream";
-import type { StreamHistoryBoundary, StreamRenderSegments } from "./agent-stream-render-model";
+import type { StreamHistoryBoundary, StreamRenderSegments } from "./model";
 import type {
   BottomAnchorLocalRequest,
   BottomAnchorRouteRequest,
-} from "./use-bottom-anchor-controller";
+} from "./bottom-anchor-controller";
 
 type EdgeSlot = "header" | "footer";
 type NeighborRelation = "above" | "below";
 type AssistantTurnTraversalStep = -1 | 1;
+export type StreamFrameChildOrder = "content-then-footer" | "footer-then-content";
 
 export type MaintainVisibleContentPositionConfig = Readonly<{
   minIndexForVisible: number;
@@ -93,6 +94,10 @@ export interface StreamStrategy {
   ) => StreamEdgeSlotProps;
   getMaintainVisibleContentPosition: () => MaintainVisibleContentPositionConfig | undefined;
   getBottomAnchorTransportBehavior: () => BottomAnchorTransportBehavior;
+  getHistoryLiveBoundaryIndex: (history: StreamItem[]) => number | null;
+  getLiveHeadHistoryBoundaryIndex: (liveHead: StreamItem[]) => number | null;
+  getLatestItemIndex: (items: StreamItem[]) => number | null;
+  getFrameChildOrder: () => StreamFrameChildOrder;
   getFlatListInverted: () => boolean;
   getOverlayScrollbarInverted: () => boolean;
   shouldDisableParentScrollOnInlineDetailsExpansion: () => boolean;
@@ -107,6 +112,9 @@ interface StreamStrategyConfig {
   orderHeadReverse: boolean;
   assistantTurnTraversalStep: AssistantTurnTraversalStep;
   edgeSlot: EdgeSlot;
+  historyLiveBoundaryEdge: "first" | "last";
+  liveHeadHistoryBoundaryEdge: "first" | "last";
+  frameChildOrder: StreamFrameChildOrder;
   flatListInverted: boolean;
   overlayScrollbarInverted: boolean;
   maintainVisibleContentPosition?: MaintainVisibleContentPositionConfig;
@@ -175,6 +183,25 @@ export function createStreamStrategy(config: StreamStrategyConfig): StreamStrate
     },
     getMaintainVisibleContentPosition: () => config.maintainVisibleContentPosition,
     getBottomAnchorTransportBehavior: () => config.bottomAnchorTransportBehavior,
+    getHistoryLiveBoundaryIndex: (history) => {
+      if (history.length === 0) {
+        return null;
+      }
+      return config.historyLiveBoundaryEdge === "first" ? 0 : history.length - 1;
+    },
+    getLiveHeadHistoryBoundaryIndex: (liveHead) => {
+      if (liveHead.length === 0) {
+        return null;
+      }
+      return config.liveHeadHistoryBoundaryEdge === "first" ? 0 : liveHead.length - 1;
+    },
+    getLatestItemIndex: (items) => {
+      if (items.length === 0) {
+        return null;
+      }
+      return config.historyLiveBoundaryEdge === "first" ? 0 : items.length - 1;
+    },
+    getFrameChildOrder: () => config.frameChildOrder,
     getFlatListInverted: () => config.flatListInverted,
     getOverlayScrollbarInverted: () => config.overlayScrollbarInverted,
     shouldDisableParentScrollOnInlineDetailsExpansion: () =>
@@ -270,3 +297,23 @@ export function getStreamEdgeSlotProps(params: {
 }): StreamEdgeSlotProps {
   return params.strategy.getEdgeSlotProps(params.component, params.gapSize);
 }
+
+export function getHistoryLiveBoundaryIndexForStreamRenderStrategy(params: {
+  strategy: StreamStrategy;
+  history: StreamItem[];
+}): number | null {
+  return params.strategy.getHistoryLiveBoundaryIndex(params.history);
+}
+
+export function getLiveHeadHistoryBoundaryIndexForStreamRenderStrategy(params: {
+  strategy: StreamStrategy;
+  liveHead: StreamItem[];
+}): number | null {
+  return params.strategy.getLiveHeadHistoryBoundaryIndex(params.liveHead);
+}
+
+export function getFrameChildOrderForStreamRenderStrategy(params: {
+  strategy: StreamStrategy;
+}): StreamFrameChildOrder {
+  return params.strategy.getFrameChildOrder();
+}

packages/app/src/agent-stream/turn-footer.tsx

@@ -8,9 +8,10 @@ import type { StreamItem } from "@/types/stream";
 import {
   collectAssistantTurnContentForStreamRenderStrategy,
   type StreamStrategy,
-} from "./agent-stream-render-strategy";
-import { AssistantTurnFooter, LiveElapsed, STREAM_METADATA_FONT_SIZE } from "./message";
-import { SyncedLoader } from "./synced-loader";
+} from "./strategy";
+import { AssistantTurnFooter, LiveElapsed, STREAM_METADATA_FONT_SIZE } from "@/components/message";
+import type { TurnFooterHost } from "./layout";
+import { SyncedLoader } from "@/components/synced-loader";
 
 const ThemedSyncedLoader = withUnistyles(SyncedLoader);
 const workingIndicatorColorMapping = (theme: Theme) => ({
@@ -22,52 +23,6 @@ const workingIndicatorColorMapping = (theme: Theme) => ({
 
 export type TurnContentStrategy = StreamStrategy;
 
-export interface TurnFooterHost {
-  itemId: string;
-  items: StreamItem[];
-  timing?: TurnTiming;
-  startIndex: number;
-}
-
-export function resolveBottomTurnFooterHost(input: {
-  agentStatus: string;
-  history: StreamItem[];
-  liveHead: StreamItem[];
-  isInverted: boolean;
-  timingByAssistantId: Map<string, TurnTiming>;
-}): TurnFooterHost | null {
-  if (input.agentStatus === "running") {
-    return null;
-  }
-  const usesLiveHead = input.liveHead.length > 0;
-  const footerItems = usesLiveHead ? input.liveHead : input.history;
-  const startIndex = input.isInverted ? 0 : footerItems.length - 1;
-  const item = footerItems[startIndex];
-  if (!item || item.kind !== "assistant_message") {
-    return null;
-  }
-  return {
-    itemId: item.id,
-    items: footerItems,
-    timing: input.timingByAssistantId.get(item.id),
-    startIndex,
-  };
-}
-
-export function shouldRenderCompletedTurnFooter(input: {
-  item: StreamItem;
-  belowItem: StreamItem | undefined;
-  agentStatus: string;
-  suppressTurnFooter: boolean | undefined;
-}): boolean {
-  return (
-    input.item.kind === "assistant_message" &&
-    !input.suppressTurnFooter &&
-    (input.belowItem?.kind === "user_message" ||
-      (input.belowItem === undefined && input.agentStatus !== "running"))
-  );
-}
-
 export const TurnFooter = memo(function TurnFooter({
   isRunning,
   inFlightTurnStartedAt,

packages/app/src/agent-stream/view.tsx

@@ -36,8 +36,8 @@ import {
   CompactionMarker,
   MessageOuterSpacingProvider,
   type InlinePathTarget,
-} from "./message";
-import { PlanCard } from "./plan-card";
+} from "@/components/message";
+import { PlanCard } from "@/components/plan-card";
 import type { StreamItem } from "@/types/stream";
 import type { PendingPermission } from "@/types/shared";
 import type {
@@ -50,30 +50,18 @@ import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
 import { useLoadOlderAgentHistory } from "@/hooks/use-load-older-agent-history";
 import type { ToastApi } from "@/components/toast-host";
 import type { DaemonClient } from "@server/client/daemon-client";
-import { ToolCallDetailsContent } from "./tool-call-details";
-import { QuestionFormCard } from "./question-form-card";
-import { ToolCallSheetProvider } from "./tool-call-sheet";
-import {
-  buildAgentStreamRenderModel,
-  getStreamNeighborItem,
-  resolveStreamRenderStrategy,
-  type AgentStreamRenderModel,
-  type StreamSegmentRenderers,
-  type StreamViewportHandle,
-} from "./agent-stream-render-strategy";
-import { getAssistantBlockSpacing, getGapBetweenStreamItems } from "./agent-stream-view-data";
-import {
-  CompletedTurnFooterRow,
-  resolveBottomTurnFooterHost,
-  shouldRenderCompletedTurnFooter,
-  TurnFooter,
-  type TurnContentStrategy,
-  type TurnFooterHost,
-} from "./agent-stream-turn-footer";
+import { ToolCallDetailsContent } from "@/components/tool-call-details";
+import { QuestionFormCard } from "@/components/question-form-card";
+import { ToolCallSheetProvider } from "@/components/tool-call-sheet";
+import { type AgentStreamRenderModel, buildAgentStreamRenderModel } from "./model";
+import { resolveStreamRenderStrategy } from "./strategy-resolver";
+import { type StreamSegmentRenderers, type StreamViewportHandle } from "./strategy";
+import { CompletedTurnFooterRow, TurnFooter, type TurnContentStrategy } from "./turn-footer";
+import { layoutStream, type StreamLayoutItem } from "./layout";
 import {
   type BottomAnchorLocalRequest,
   type BottomAnchorRouteRequest,
-} from "./use-bottom-anchor-controller";
+} from "./bottom-anchor-controller";
 import {
   AssistantFileLinkResolverProvider,
   normalizeInlinePathTarget,
@@ -90,12 +78,6 @@ import { useStableEvent } from "@/hooks/use-stable-event";
 import { isWeb } from "@/constants/platform";
 import type { Theme } from "@/styles/theme";
 
-interface StreamItemBoundarySeams {
-  aboveItem?: StreamItem | null;
-  belowItem?: StreamItem | null;
-  suppressTurnFooter?: boolean;
-}
-
 function renderLiveAuxiliaryNode(input: {
   pendingPermissions: ReactNode;
   turnFooter: ReactNode;
@@ -133,40 +115,39 @@ function renderPendingPermissionsNode(input: {
 
 function renderStreamItemWithTurnFooter(input: {
   content: ReactNode;
-  item: StreamItem;
-  nextItem: StreamItem | undefined;
-  items: StreamItem[];
-  timing: AgentStreamRenderModel["turnTiming"]["byAssistantId"];
-  index: number;
-  agentStatus: string;
-  suppressTurnFooter: boolean | undefined;
+  layoutItem: StreamLayoutItem;
   strategy: TurnContentStrategy;
 }): ReactNode {
   if (!input.content) {
     return null;
   }
 
-  const showCompletedFooter = shouldRenderCompletedTurnFooter({
-    item: input.item,
-    belowItem: input.nextItem,
-    agentStatus: input.agentStatus,
-    suppressTurnFooter: input.suppressTurnFooter,
-  });
-  const gapBelow = showCompletedFooter
-    ? 0
-    : getGapBetweenStreamItems(input.item, input.nextItem ?? null);
+  const footerHost = input.layoutItem.completedFooter;
+  const footer = footerHost ? (
+    <CompletedTurnFooterRow
+      strategy={input.strategy}
+      items={footerHost.items}
+      timing={footerHost.timing}
+      startIndex={footerHost.startIndex}
+    />
+  ) : null;
+  const content = (
+    <StreamItemWrapper gapBelow={input.layoutItem.gapBelow}>{input.content}</StreamItemWrapper>
+  );
+
+  if (input.layoutItem.frameOrder === "footer-then-content") {
+    return (
+      <>
+        {footer}
+        {content}
+      </>
+    );
+  }
 
   return (
     <>
-      <StreamItemWrapper gapBelow={gapBelow}>{input.content}</StreamItemWrapper>
-      {showCompletedFooter ? (
-        <CompletedTurnFooterRow
-          strategy={input.strategy}
-          items={input.items}
-          timing={input.timing.get(input.item.id)}
-          startIndex={input.index}
-        />
-      ) : null}
+      {content}
+      {footer}
     </>
   );
 }
@@ -194,47 +175,26 @@ function renderListEmptyComponent(input: {
 
 function renderHistoryStreamItem(input: {
   item: StreamItem;
-  historyIndexById: Map<string, number>;
-  historyItems: StreamItem[];
-  lastHistoryItem: StreamItem | null;
-  firstLiveHeadItem: StreamItem | null;
-  bottomTurnFooterHost: TurnFooterHost | null;
-  renderStreamItem: (
-    item: StreamItem,
-    index: number,
-    items: StreamItem[],
-    seams?: StreamItemBoundarySeams,
-  ) => ReactNode;
+  layoutItemById: Map<string, StreamLayoutItem>;
+  renderStreamItem: (layoutItem: StreamLayoutItem) => ReactNode;
 }): ReactNode {
-  const historyIndex = input.historyIndexById.get(input.item.id);
-  if (historyIndex === undefined) {
+  const layoutItem = input.layoutItemById.get(input.item.id);
+  if (!layoutItem) {
     return null;
   }
-  const seamBelowItem =
-    input.item.id === input.lastHistoryItem?.id ? input.firstLiveHeadItem : null;
-  return input.renderStreamItem(input.item, historyIndex, input.historyItems, {
-    belowItem: seamBelowItem,
-    suppressTurnFooter: input.item.id === input.bottomTurnFooterHost?.itemId,
-  });
+  return input.renderStreamItem(layoutItem);
 }
 
 function renderLiveHeadStreamItem(input: {
   item: StreamItem;
-  index: number;
-  items: StreamItem[];
-  lastHistoryItem: StreamItem | null;
-  bottomTurnFooterHost: TurnFooterHost | null;
-  renderStreamItem: (
-    item: StreamItem,
-    index: number,
-    items: StreamItem[],
-    seams?: StreamItemBoundarySeams,
-  ) => ReactNode;
+  layoutItemById: Map<string, StreamLayoutItem>;
+  renderStreamItem: (layoutItem: StreamLayoutItem) => ReactNode;
 }): ReactNode {
-  return input.renderStreamItem(input.item, input.index, input.items, {
-    aboveItem: input.index === 0 ? input.lastHistoryItem : null,
-    suppressTurnFooter: input.item.id === input.bottomTurnFooterHost?.itemId,
-  });
+  const layoutItem = input.layoutItemById.get(input.item.id);
+  if (!layoutItem) {
+    return null;
+  }
+  return input.renderStreamItem(layoutItem);
 }
 
 export interface AgentStreamViewHandle {
@@ -396,6 +356,23 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
         isMobileBreakpoint: isMobile,
       });
     }, [agent.status, isMobile, streamHead, streamItems]);
+    const streamLayout = useMemo(
+      () =>
+        layoutStream({
+          strategy: streamRenderStrategy,
+          agentStatus: agent.status,
+          history: baseRenderModel.history,
+          liveHead: baseRenderModel.segments.liveHead,
+          timingByAssistantId: baseRenderModel.turnTiming.byAssistantId,
+        }),
+      [
+        agent.status,
+        baseRenderModel.history,
+        baseRenderModel.segments.liveHead,
+        baseRenderModel.turnTiming.byAssistantId,
+        streamRenderStrategy,
+      ],
+    );
     useImperativeHandle(
       ref,
       () => ({
@@ -432,73 +409,28 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     );
 
     const renderUserMessageItem = useCallback(
-      (
-        item: Extract<StreamItem, { kind: "user_message" }>,
-        index: number,
-        items: StreamItem[],
-        seamAboveItem: StreamItem | null,
-      ) => {
-        const aboveItem =
-          getStreamNeighborItem({
-            strategy: streamRenderStrategy,
-            items,
-            index,
-            relation: "above",
-          }) ??
-          seamAboveItem ??
-          undefined;
-        const belowItem = getStreamNeighborItem({
-          strategy: streamRenderStrategy,
-          items,
-          index,
-          relation: "below",
-        });
-        const isFirstInGroup = aboveItem?.kind !== "user_message";
-        const isLastInGroup = belowItem?.kind !== "user_message";
+      (layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "user_message" }>) => {
         return (
           <UserMessage
+            serverId={resolvedServerId}
+            agentId={agentId}
+            messageId={item.id}
             message={item.text}
             images={item.images}
             attachments={item.attachments}
             timestamp={item.timestamp.getTime()}
-            isFirstInGroup={isFirstInGroup}
-            isLastInGroup={isLastInGroup}
+            capabilities={agent.capabilities}
+            client={client}
+            isFirstInGroup={layoutItem.isFirstInUserGroup}
+            isLastInGroup={layoutItem.isLastInUserGroup}
           />
         );
       },
-      [streamRenderStrategy],
+      [agent.capabilities, agentId, client, resolvedServerId],
     );
 
     const renderAssistantMessageItem = useCallback(
-      (
-        item: Extract<StreamItem, { kind: "assistant_message" }>,
-        index: number,
-        items: StreamItem[],
-        seams: StreamItemBoundarySeams,
-      ) => {
-        const aboveItem =
-          getStreamNeighborItem({
-            strategy: streamRenderStrategy,
-            items,
-            index,
-            relation: "above",
-          }) ??
-          seams.aboveItem ??
-          undefined;
-        const belowItem =
-          getStreamNeighborItem({
-            strategy: streamRenderStrategy,
-            items,
-            index,
-            relation: "below",
-          }) ??
-          seams.belowItem ??
-          undefined;
-        const spacing = getAssistantBlockSpacing({
-          item,
-          aboveItem,
-          belowItem,
-        });
+      (layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "assistant_message" }>) => {
         return (
           <AssistantFileLinkResolverProvider
             client={client}
@@ -513,23 +445,16 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
               workspaceRoot={workspaceRoot}
               serverId={resolvedServerId}
               client={client}
-              spacing={spacing}
+              spacing={layoutItem.assistantSpacing}
             />
           </AssistantFileLinkResolverProvider>
         );
       },
-      [client, handleInlinePathPress, resolvedServerId, streamRenderStrategy, toast, workspaceRoot],
+      [client, handleInlinePathPress, resolvedServerId, toast, workspaceRoot],
     );
 
     const renderThoughtItem = useCallback(
-      (item: Extract<StreamItem, { kind: "thought" }>, index: number, items: StreamItem[]) => {
-        const nextItem = getStreamNeighborItem({
-          strategy: streamRenderStrategy,
-          items,
-          index,
-          relation: "below",
-        });
-        const isLastInSequence = nextItem?.kind !== "tool_call" && nextItem?.kind !== "thought";
+      (layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "thought" }>) => {
         return (
           <ToolCallSlot
             itemId={item.id}
@@ -537,23 +462,16 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             toolName="thinking"
             args={item.text}
             status={item.status === "ready" ? "completed" : "executing"}
-            isLastInSequence={isLastInSequence}
+            isLastInSequence={layoutItem.isLastInToolSequence}
           />
         );
       },
-      [streamRenderStrategy, setInlineDetailsExpanded],
+      [setInlineDetailsExpanded],
     );
 
     const renderToolCallItem = useCallback(
-      (item: Extract<StreamItem, { kind: "tool_call" }>, index: number, items: StreamItem[]) => {
+      (layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "tool_call" }>) => {
         const { payload } = item;
-        const nextItem = getStreamNeighborItem({
-          strategy: streamRenderStrategy,
-          items,
-          index,
-          relation: "below",
-        });
-        const isLastInSequence = nextItem?.kind !== "tool_call" && nextItem?.kind !== "thought";
 
         if (payload.source === "agent") {
           const data = payload.data;
@@ -579,7 +497,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
               detail={data.detail}
               cwd={agent.cwd}
               metadata={data.metadata}
-              isLastInSequence={isLastInSequence}
+              isLastInSequence={layoutItem.isLastInToolSequence}
               onOpenFilePath={handleToolCallOpenFile}
             />
           );
@@ -594,33 +512,29 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             args={data.arguments}
             result={data.result}
             status={data.status}
-            isLastInSequence={isLastInSequence}
+            isLastInSequence={layoutItem.isLastInToolSequence}
             onOpenFilePath={handleToolCallOpenFile}
           />
         );
       },
-      [agent.cwd, streamRenderStrategy, setInlineDetailsExpanded, handleToolCallOpenFile],
+      [agent.cwd, setInlineDetailsExpanded, handleToolCallOpenFile],
     );
 
     const renderStreamItemContent = useCallback(
-      (
-        item: StreamItem,
-        index: number,
-        items: StreamItem[],
-        seams: StreamItemBoundarySeams = {},
-      ) => {
+      (layoutItem: StreamLayoutItem) => {
+        const item = layoutItem.item;
         switch (item.kind) {
           case "user_message":
-            return renderUserMessageItem(item, index, items, seams.aboveItem ?? null);
+            return renderUserMessageItem(layoutItem, item);
 
           case "assistant_message":
-            return renderAssistantMessageItem(item, index, items, seams);
+            return renderAssistantMessageItem(layoutItem, item);
 
           case "thought":
-            return renderThoughtItem(item, index, items);
+            return renderThoughtItem(layoutItem, item);
 
           case "tool_call":
-            return renderToolCallItem(item, index, items);
+            return renderToolCallItem(layoutItem, item);
 
           case "activity_log":
             return (
@@ -651,54 +565,18 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [renderUserMessageItem, renderAssistantMessageItem, renderThoughtItem, renderToolCallItem],
     );
 
-    const bottomTurnFooterHost = useMemo(() => {
-      return resolveBottomTurnFooterHost({
-        agentStatus: agent.status,
-        history: baseRenderModel.history,
-        liveHead: baseRenderModel.segments.liveHead,
-        isInverted: streamRenderStrategy.getFlatListInverted(),
-        timingByAssistantId: baseRenderModel.turnTiming.byAssistantId,
-      });
-    }, [
-      agent.status,
-      baseRenderModel.history,
-      baseRenderModel.segments.liveHead,
-      baseRenderModel.turnTiming.byAssistantId,
-      streamRenderStrategy,
-    ]);
+    const bottomTurnFooterHost = streamLayout.auxiliaryTurnFooter;
 
     const renderStreamItem = useCallback(
-      (
-        item: StreamItem,
-        index: number,
-        items: StreamItem[],
-        seams: StreamItemBoundarySeams = {},
-      ) => {
-        const content = renderStreamItemContent(item, index, items, seams);
-        const nextItem = getStreamNeighborItem({
-          strategy: streamRenderStrategy,
-          items,
-          index,
-          relation: "below",
-        });
+      (layoutItem: StreamLayoutItem) => {
+        const content = renderStreamItemContent(layoutItem);
         return renderStreamItemWithTurnFooter({
           content,
-          item,
-          nextItem,
-          items,
-          timing: baseRenderModel.turnTiming.byAssistantId,
-          index,
-          agentStatus: agent.status,
-          suppressTurnFooter: seams.suppressTurnFooter,
+          layoutItem,
           strategy: streamRenderStrategy,
         });
       },
-      [
-        agent.status,
-        baseRenderModel.turnTiming.byAssistantId,
-        renderStreamItemContent,
-        streamRenderStrategy,
-      ],
+      [renderStreamItemContent, streamRenderStrategy],
     );
 
     const pendingPermissionItems = useMemo(
@@ -737,17 +615,14 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
         ...baseRenderModel,
         boundary: {
           ...baseRenderModel.boundary,
-          historyToHeadGap: getGapBetweenStreamItems(
-            baseRenderModel.history.at(-1) ?? null,
-            baseRenderModel.segments.liveHead[0] ?? null,
-          ),
+          historyToHeadGap: streamLayout.historyToHeadGap,
         },
         auxiliary: {
           pendingPermissions: pendingPermissionsNode,
           turnFooter: turnFooterNode,
         },
       };
-    }, [baseRenderModel, pendingPermissionsNode, turnFooterNode]);
+    }, [baseRenderModel, pendingPermissionsNode, streamLayout.historyToHeadGap, turnFooterNode]);
 
     const emptyStateStyle = useMemo(() => [stylesheet.emptyState, stylesheet.contentWrapper], []);
     const listEmptyComponent = useMemo(
@@ -755,38 +630,32 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [renderModel, emptyStateStyle],
     );
 
-    const historyItems = renderModel.history;
     const { boundary, auxiliary } = renderModel;
-    const lastHistoryItem = historyItems.at(-1) ?? null;
-    const firstLiveHeadItem = renderModel.segments.liveHead[0] ?? null;
 
-    const historyIndexById = useMemo(() => {
-      const indexById = new Map<string, number>();
-      historyItems.forEach((item, index) => {
-        indexById.set(item.id, index);
-      });
-      return indexById;
-    }, [historyItems]);
+    const layoutHistoryItemById = useMemo(() => {
+      const itemById = new Map<string, StreamLayoutItem>();
+      for (const item of streamLayout.history) {
+        itemById.set(item.item.id, item);
+      }
+      return itemById;
+    }, [streamLayout.history]);
+
+    const layoutLiveHeadItemById = useMemo(() => {
+      const itemById = new Map<string, StreamLayoutItem>();
+      for (const item of streamLayout.liveHead) {
+        itemById.set(item.item.id, item);
+      }
+      return itemById;
+    }, [streamLayout.liveHead]);
 
     const renderHistoryRow = useCallback(
       (item: StreamItem) =>
         renderHistoryStreamItem({
           item,
-          historyIndexById,
-          historyItems,
-          lastHistoryItem,
-          firstLiveHeadItem,
-          bottomTurnFooterHost,
+          layoutItemById: layoutHistoryItemById,
           renderStreamItem,
         }),
-      [
-        bottomTurnFooterHost,
-        firstLiveHeadItem,
-        historyIndexById,
-        historyItems,
-        lastHistoryItem,
-        renderStreamItem,
-      ],
+      [layoutHistoryItemById, renderStreamItem],
     );
 
     const renderHistoryVirtualizedRow = useCallback<
@@ -797,16 +666,13 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [renderHistoryRow],
     );
     const renderLiveHeadRow = useCallback<StreamSegmentRenderers["renderLiveHeadRow"]>(
-      (item, index, items) =>
+      (item) =>
         renderLiveHeadStreamItem({
           item,
-          index,
-          items,
-          lastHistoryItem,
-          bottomTurnFooterHost,
+          layoutItemById: layoutLiveHeadItemById,
           renderStreamItem,
         }),
-      [bottomTurnFooterHost, lastHistoryItem, renderStreamItem],
+      [layoutLiveHeadItemById, renderStreamItem],
     );
     const renderLiveAuxiliary = useCallback<StreamSegmentRenderers["renderLiveAuxiliary"]>(() => {
       return renderLiveAuxiliaryNode({

packages/app/src/agent-stream/web-virtualization.test.ts

@@ -13,7 +13,7 @@ import {
   getWebPartialVirtualizationThreshold,
   splitWebVirtualizedHistory,
   type IndexedStreamItem,
-} from "./agent-stream-web-virtualization";
+} from "./web-virtualization";
 
 function createTimestamp(seed: number): Date {
   return new Date(`2026-01-01T00:00:${seed.toString().padStart(2, "0")}.000Z`);

packages/app/src/app/_layout.tsx

@@ -30,6 +30,7 @@ import { LeftSidebar } from "@/components/left-sidebar";
 import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { WorkspaceSetupDialog } from "@/components/workspace-setup-dialog";
 import { WorkspaceShortcutTargetsSubscriber } from "@/components/workspace-shortcut-targets-subscriber";
+import { FloatingPanelPortalHost } from "@/components/ui/floating-panel-portal";
 import { getIsElectronRuntime, useIsCompactFormFactor } from "@/constants/layout";
 import { isNative, isWeb } from "@/constants/platform";
 import {
@@ -457,6 +458,7 @@ function AppContainer({
         )}
         <View style={flexStyle}>{children}</View>
       </View>
+      <FloatingPanelPortalHost />
       {isCompactLayout && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
       <DownloadToast />
       <RosettaCalloutSource />

packages/app/src/assistant-file-links/parse.test.ts

@@ -360,6 +360,25 @@ describe("parseAssistantFileLink", () => {
       }),
     ).toBeNull();
   });
+
+  it("does not throw when the input contains a literal '%' that is not a valid percent-escape", () => {
+    // Regressions for tool output strings like ping's "100% packet loss",
+    // Windows "%PATH%" references, and percentages such as "0% off".
+    // decodeURIComponent throws URIError on these; the parser must swallow
+    // it and return null rather than crash the renderer.
+    const cases = [
+      "/tmp/100% packet loss",
+      "/Users/test/project/0% off",
+      "/var/log/%PATH%/x.log",
+      "file:///tmp/100% packet loss",
+    ];
+    for (const value of cases) {
+      expect(() =>
+        parseAssistantFileLink(value, { workspaceRoot: "/Users/test/project" }),
+      ).not.toThrow();
+    }
+    expect(() => parseFileProtocolUrl("file:///tmp/100% packet loss")).not.toThrow();
+  });
 });
 
 describe("normalizeInlinePathTarget", () => {

packages/app/src/assistant-file-links/parse.ts

@@ -1,5 +1,13 @@
 import { isAbsolutePath } from "@/utils/path";
 
+function safeDecodeURIComponent(value: string): string {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+
 export interface InlinePathTarget {
   raw: string;
   path: string;
@@ -350,7 +358,7 @@ export function parseAssistantFileLink(
     return null;
   }
 
-  const normalizedPath = normalizePathToken(decodeURIComponent(parsedUrl.pathname));
+  const normalizedPath = normalizePathToken(safeDecodeURIComponent(parsedUrl.pathname));
   if (!normalizedPath || !isAbsolutePath(normalizedPath)) {
     return null;
   }
@@ -659,7 +667,7 @@ function normalizeFileUrlPath(pathname: string): string | null {
     return null;
   }
 
-  const decoded = decodeURIComponent(pathname).replace(/\\/g, "/");
+  const decoded = safeDecodeURIComponent(pathname).replace(/\\/g, "/");
   if (!decoded) {
     return null;
   }

packages/app/src/client-slash-commands/index.test.ts

@@ -57,33 +57,41 @@ function createAgent(overrides: Partial<Agent> = {}): Agent {
 }
 
 describe("resolveClientSlashCommand", () => {
-  it("declares the exact client commands that execute immediately", () => {
-    expect(CLIENT_SLASH_COMMANDS.map((command) => [command.name, command.execution])).toEqual([
-      ["quit", "immediate"],
-      ["exit", "immediate"],
-      ["q", "immediate"],
-      ["clear", "immediate"],
-      ["new", "immediate"],
+  it("declares the exact canonical client commands with their aliases", () => {
+    expect(
+      CLIENT_SLASH_COMMANDS.map((command) => [
+        command.name,
+        [...command.aliases],
+        command.execution,
+      ]),
+    ).toEqual([
+      ["exit", ["quit", "q"], "immediate"],
+      ["clear", ["new"], "immediate"],
     ]);
   });
 
-  it("resolves exact client commands after trimming", () => {
+  it("resolves canonical names and aliases after trimming", () => {
     expect(resolveClientSlashCommand({ text: " /quit ", hasAttachments: false })).toMatchObject({
+      name: "exit",
       kind: "archive-agent",
       execution: "immediate",
     });
-    expect(resolveClientSlashCommand({ text: "/exit", hasAttachments: false })?.kind).toBe(
-      "archive-agent",
-    );
-    expect(resolveClientSlashCommand({ text: "/q", hasAttachments: false })?.kind).toBe(
-      "archive-agent",
-    );
-    expect(resolveClientSlashCommand({ text: "/clear", hasAttachments: false })?.kind).toBe(
-      "replace-agent-with-draft",
-    );
-    expect(resolveClientSlashCommand({ text: "/new", hasAttachments: false })?.kind).toBe(
-      "replace-agent-with-draft",
-    );
+    expect(resolveClientSlashCommand({ text: "/exit", hasAttachments: false })).toMatchObject({
+      name: "exit",
+      kind: "archive-agent",
+    });
+    expect(resolveClientSlashCommand({ text: "/q", hasAttachments: false })).toMatchObject({
+      name: "exit",
+      kind: "archive-agent",
+    });
+    expect(resolveClientSlashCommand({ text: "/clear", hasAttachments: false })).toMatchObject({
+      name: "clear",
+      kind: "replace-agent-with-draft",
+    });
+    expect(resolveClientSlashCommand({ text: "/new", hasAttachments: false })).toMatchObject({
+      name: "clear",
+      kind: "replace-agent-with-draft",
+    });
   });
 
   it("leaves provider commands, arguments, ordinary messages, and attachment submits alone", () => {

packages/app/src/client-slash-commands/index.ts

@@ -6,6 +6,7 @@ export type ClientSlashCommandExecution = "immediate" | "insert";
 
 export interface ClientSlashCommand {
   name: string;
+  aliases: readonly string[];
   description: string;
   argumentHint: string;
   kind: ClientSlashCommandKind;
@@ -13,22 +14,9 @@ export interface ClientSlashCommand {
 }
 
 export const CLIENT_SLASH_COMMANDS: readonly ClientSlashCommand[] = [
-  {
-    name: "quit",
-    description: "Archive the current agent",
-    argumentHint: "",
-    kind: "archive-agent",
-    execution: "immediate",
-  },
   {
     name: "exit",
-    description: "Archive the current agent",
-    argumentHint: "",
-    kind: "archive-agent",
-    execution: "immediate",
-  },
-  {
-    name: "q",
+    aliases: ["quit", "q"],
     description: "Archive the current agent",
     argumentHint: "",
     kind: "archive-agent",
@@ -36,13 +24,7 @@ export const CLIENT_SLASH_COMMANDS: readonly ClientSlashCommand[] = [
   },
   {
     name: "clear",
-    description: "Archive this agent and start a fresh draft",
-    argumentHint: "",
-    kind: "replace-agent-with-draft",
-    execution: "immediate",
-  },
-  {
-    name: "new",
+    aliases: ["new"],
     description: "Archive this agent and start a fresh draft",
     argumentHint: "",
     kind: "replace-agent-with-draft",
@@ -50,7 +32,13 @@ export const CLIENT_SLASH_COMMANDS: readonly ClientSlashCommand[] = [
   },
 ];
 
-const COMMAND_BY_NAME = new Map(CLIENT_SLASH_COMMANDS.map((command) => [command.name, command]));
+const COMMAND_BY_NAME = new Map<string, ClientSlashCommand>();
+for (const command of CLIENT_SLASH_COMMANDS) {
+  COMMAND_BY_NAME.set(command.name, command);
+  for (const alias of command.aliases) {
+    COMMAND_BY_NAME.set(alias, command);
+  }
+}
 
 export function resolveClientSlashCommand(input: {
   text: string;

packages/app/src/components/adaptive-modal-sheet.tsx

@@ -3,7 +3,7 @@ import type { ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { Modal, Pressable, ScrollView, Text, TextInput, View } from "react-native";
 import type { TextInputProps } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { getOverlayRoot, OVERLAY_Z } from "../lib/overlay-root";
 import {
@@ -14,7 +14,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { ArrowLeft, Search, X } from "lucide-react-native";
 import { FileDropZone } from "@/components/file-drop-zone";
-import type { ImageAttachment } from "@/components/message-input";
+import type { ImageAttachment } from "@/composer/types";
 import {
   IsolatedBottomSheetModal,
   useIsolatedBottomSheetVisibility,
@@ -205,6 +205,9 @@ const styles = StyleSheet.create((theme) => ({
   adaptiveInputOutline: {
     outlineColor: theme.colors.accent,
   },
+  adaptiveInputText: {
+    color: theme.colors.foreground,
+  },
   adaptiveInputPlaceholder: {
     color: theme.colors.foregroundMuted,
   },
@@ -237,38 +240,43 @@ export type AdaptiveTextInputProps = TextInputProps & {
 // and visibly flicker/cursor-jump. Keep the rendered text native-owned; callers
 // can seed it once with initialValue and remount with resetKey for real resets.
 // See https://github.com/facebook/react-native/issues/44157
+//
+// Text color and placeholder color are owned by this leaf — not the caller.
+// `@gorhom/bottom-sheet` mounts header subtrees before the sheet is visible
+// under whatever theme is active at mount time, then keeps them mounted across
+// theme changes; any caller that paints color via `StyleSheet.create((theme) =>
+// ...)` from outside this leaf ends up with stale colors in dark mode (see
+// docs/unistyles.md "Hidden Sheet Content"). withUnistyles wraps the actual
+// TextInput so theme-driven re-renders land on the wrapper.
+const ThemedTextInput = withUnistyles(TextInput, (theme) => ({
+  placeholderTextColor: theme.colors.foregroundMuted,
+}));
+const ThemedBottomSheetTextInput = withUnistyles(BottomSheetTextInput, (theme) => ({
+  placeholderTextColor: theme.colors.foregroundMuted,
+}));
+
 export const AdaptiveTextInput = forwardRef<TextInput, AdaptiveTextInputProps>(
   function AdaptiveTextInputInner(props, ref) {
     const isMobile = useIsCompactFormFactor();
-    const {
-      value: _value,
-      initialValue,
-      resetKey,
-      defaultValue,
-      style,
-      placeholderTextColor,
-      ...inputProps
-    } = props;
-    // Recolor the browser's :focus-visible outline (defined in public/index.html)
-    // so it matches the active theme's accent instead of its hard-coded fallback.
-    // Consumer style wins if it sets outlineColor explicitly.
+    const { value: _value, initialValue, resetKey, defaultValue, style, ...inputProps } = props;
+    // Leaf-owned color goes LAST so callers cannot override it with a stale
+    // theme read. Outline color is theme-aware on web :focus-visible.
     const textInputProps = {
       ...inputProps,
       defaultValue: initialValue ?? defaultValue,
-      placeholderTextColor: placeholderTextColor ?? styles.adaptiveInputPlaceholder.color,
-      style: [styles.adaptiveInputOutline, style],
+      style: [styles.adaptiveInputOutline, style, styles.adaptiveInputText],
     };
 
     if (isMobile && isNative) {
       return (
-        <BottomSheetTextInput
+        <ThemedBottomSheetTextInput
           key={resetKey}
           ref={ref as unknown as Ref<never>}
           {...textInputProps}
         />
       );
     }
-    return <TextInput key={resetKey} ref={ref} {...textInputProps} />;
+    return <ThemedTextInput key={resetKey} ref={ref} {...textInputProps} />;
   },
 );
 
@@ -344,7 +352,6 @@ export function SheetHeaderView({
             // @ts-expect-error - outlineStyle is web-only
             style={SEARCH_INPUT_STYLE}
             placeholder={search.placeholder ?? "Search"}
-            placeholderTextColor={theme.colors.foregroundMuted}
             initialValue={search.initialValue}
             resetKey={search.resetKey}
             value={search.value}
@@ -400,7 +407,6 @@ export function InlineHeaderView({ header }: { header: SheetHeader }) {
             // @ts-expect-error - outlineStyle is web-only
             style={SEARCH_INPUT_STYLE}
             placeholder={header.search.placeholder ?? "Search"}
-            placeholderTextColor={theme.colors.foregroundMuted}
             initialValue={header.search.initialValue}
             resetKey={header.search.resetKey}
             value={header.search.value}

packages/app/src/components/agent-stream-render-strategy.ts

@@ -1,3 +0,0 @@
-export * from "./stream-strategy";
-export * from "./stream-strategy-resolver";
-export * from "./agent-stream-render-model";

packages/app/src/components/community-links.tsx

@@ -0,0 +1,66 @@
+import { useCallback } from "react";
+import { View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { Heart } from "lucide-react-native";
+import { Button } from "@/components/ui/button";
+import { GitHubIcon } from "@/components/icons/github-icon";
+import { DiscordIcon } from "@/components/icons/discord-icon";
+import { openExternalUrl } from "@/utils/open-external-url";
+
+const renderGitHubIcon = (color: string) => <GitHubIcon color={color} size={14} />;
+const renderDiscordIcon = (color: string) => <DiscordIcon color={color} size={14} />;
+
+export function CommunityLinks() {
+  const handleOpenGitHub = useCallback(() => {
+    void openExternalUrl("https://github.com/getpaseo/paseo");
+  }, []);
+
+  const handleOpenSponsor = useCallback(() => {
+    void openExternalUrl("https://github.com/sponsors/boudra");
+  }, []);
+
+  const handleOpenDiscord = useCallback(() => {
+    void openExternalUrl("https://discord.gg/jz8T2uahpH");
+  }, []);
+
+  return (
+    <View style={styles.row}>
+      <Button
+        variant="ghost"
+        size="sm"
+        leftIcon={renderGitHubIcon}
+        onPress={handleOpenGitHub}
+        testID="community-links-github-star"
+      >
+        Star
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        leftIcon={Heart}
+        onPress={handleOpenSponsor}
+        testID="community-links-sponsor"
+      >
+        Sponsor
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        leftIcon={renderDiscordIcon}
+        onPress={handleOpenDiscord}
+        testID="community-links-discord"
+      >
+        Community
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  row: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 0,
+  },
+}));

packages/app/src/components/composer-height-mirror.d.ts

@@ -1 +0,0 @@
-export * from "./composer-height-mirror.native";

packages/app/src/components/composer.status-controls.ts

@@ -1,5 +0,0 @@
-import type { DraftAgentStatusBarProps } from "./agent-status-bar";
-
-export function resolveStatusControlMode(statusControls?: DraftAgentStatusBarProps) {
-  return statusControls ? "draft" : "ready";
-}

packages/app/src/components/context-window-meter.tsx

@@ -6,6 +6,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 interface ContextWindowMeterProps {
   maxTokens: number;
   usedTokens: number;
+  totalCostUsd?: number | null;
 }
 
 const SVG_SIZE = 16;
@@ -43,6 +44,16 @@ function formatTokenCount(value: number): string {
   return Math.round(value).toString();
 }
 
+function formatSessionCost(value: number): string | null {
+  if (!Number.isFinite(value) || value <= 0) {
+    return null;
+  }
+  if (value < 0.01) {
+    return `$${value.toFixed(4)}`;
+  }
+  return `$${value.toFixed(2)}`;
+}
+
 function getMeterColors(
   percentage: number,
   theme: ReturnType<typeof useUnistyles>["theme"],
@@ -57,7 +68,11 @@ function getMeterColors(
   return { progress: theme.colors.foregroundMuted, track };
 }
 
-export function ContextWindowMeter({ maxTokens, usedTokens }: ContextWindowMeterProps) {
+export function ContextWindowMeter({
+  maxTokens,
+  usedTokens,
+  totalCostUsd,
+}: ContextWindowMeterProps) {
   const { theme } = useUnistyles();
   const percentage = getUsagePercentage(maxTokens, usedTokens);
 
@@ -69,6 +84,8 @@ export function ContextWindowMeter({ maxTokens, usedTokens }: ContextWindowMeter
   const roundedPercentage = Math.round(percentage);
   const dashOffset = CIRCUMFERENCE - (clampedPercentage / 100) * CIRCUMFERENCE;
   const colors = getMeterColors(clampedPercentage, theme);
+  const formattedSessionCost =
+    typeof totalCostUsd === "number" ? formatSessionCost(totalCostUsd) : null;
 
   return (
     <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile>
@@ -115,6 +132,9 @@ export function ContextWindowMeter({ maxTokens, usedTokens }: ContextWindowMeter
           <Text
             style={styles.tooltipDetail}
           >{`${formatTokenCount(usedTokens)} / ${formatTokenCount(maxTokens)} tokens`}</Text>
+          {formattedSessionCost ? (
+            <Text style={styles.tooltipDetail}>{`Session cost ${formattedSessionCost}`}</Text>
+          ) : null}
         </View>
       </TooltipContent>
     </Tooltip>

packages/app/src/components/file-drop-zone.tsx

@@ -4,7 +4,7 @@ import Animated, { useAnimatedStyle, withTiming, useSharedValue } from "react-na
 import { useEffect, useMemo } from "react";
 import { Upload } from "lucide-react-native";
 import { useFileDropZone } from "@/hooks/use-file-drop-zone";
-import type { ImageAttachment } from "./message-input";
+import type { ImageAttachment } from "@/composer/types";
 import { isWeb } from "@/constants/platform";
 
 interface FileDropZoneProps {

packages/app/src/components/icons/discord-icon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path } from "react-native-svg";
+
+interface DiscordIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function DiscordIcon({ size = 16, color = "currentColor" }: DiscordIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+    </Svg>
+  );
+}

packages/app/src/components/import-session-sheet.tsx

@@ -393,6 +393,7 @@ export function ImportSessionSheet({
   const queryClient = useQueryClient();
 
   const { entries: snapshotEntries, supportsSnapshot } = useProvidersSnapshot(serverId, {
+    cwd,
     enabled: visible,
   });
 

packages/app/src/components/left-sidebar.tsx

@@ -1,5 +1,5 @@
 import { router, usePathname } from "expo-router";
-import { FolderPlus, MessagesSquare, Settings, X } from "lucide-react-native";
+import { FolderPlus, Home, MessagesSquare, Settings, X } from "lucide-react-native";
 import {
   type Dispatch,
   memo,
@@ -58,6 +58,7 @@ import { resolveActiveHost } from "@/utils/active-host";
 import { formatConnectionStatus } from "@/utils/daemons";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
 import {
+  buildHostOpenProjectRoute,
   buildHostSessionsRoute,
   buildSettingsRoute,
   mapPathnameToServer,
@@ -94,6 +95,7 @@ interface SidebarSharedProps {
   handleRefresh: () => void;
   handleHostSelect: (nextServerId: string) => void;
   handleOpenProject: () => void;
+  handleHome: () => void;
   handleSettings: () => void;
   renderHostOption: (input: {
     option: ComboboxOption;
@@ -223,6 +225,17 @@ export const LeftSidebar = memo(function LeftSidebar({
     router.push(buildSettingsRoute());
   }, []);
 
+  const handleHomeMobile = useCallback(() => {
+    if (!activeServerId) return;
+    showMobileAgent();
+    router.push(buildHostOpenProjectRoute(activeServerId));
+  }, [activeServerId, showMobileAgent]);
+
+  const handleHomeDesktop = useCallback(() => {
+    if (!activeServerId) return;
+    router.push(buildHostOpenProjectRoute(activeServerId));
+  }, [activeServerId]);
+
   const handleViewMoreNavigate = useCallback(() => {
     if (!activeServerId) {
       return;
@@ -272,6 +285,7 @@ export const LeftSidebar = memo(function LeftSidebar({
         isOpen={isOpen}
         closeToAgent={showMobileAgent}
         handleOpenProject={handleOpenProjectMobile}
+        handleHome={handleHomeMobile}
         handleSettings={handleSettingsMobile}
         handleViewMoreNavigate={handleViewMoreNavigate}
       />
@@ -284,6 +298,7 @@ export const LeftSidebar = memo(function LeftSidebar({
       insetsTop={insets.top}
       isOpen={isOpen}
       handleOpenProject={handleOpenProjectDesktop}
+      handleHome={handleHomeDesktop}
       handleSettings={handleSettingsDesktop}
       handleViewMore={handleViewMoreNavigate}
     />
@@ -414,6 +429,7 @@ function SidebarFooter({
   handleHostSelect,
   renderHostOption,
   handleOpenProject,
+  handleHome,
   handleSettings,
 }: {
   theme: SidebarTheme;
@@ -427,6 +443,7 @@ function SidebarFooter({
   handleHostSelect: (nextServerId: string) => void;
   renderHostOption: SidebarSharedProps["renderHostOption"];
   handleOpenProject: () => void;
+  handleHome: () => void;
   handleSettings: () => void;
 }) {
   const newAgentKeys = useShortcutKeys("new-agent");
@@ -456,6 +473,13 @@ function SidebarFooter({
             <AddProjectTooltipContent newAgentKeys={newAgentKeys} />
           </TooltipContent>
         </Tooltip>
+        <FooterIconButton
+          onPress={handleHome}
+          testID="sidebar-home"
+          accessibilityLabel="Home"
+          icon={Home}
+          theme={theme}
+        />
         <FooterIconButton
           onPress={handleSettings}
           testID="sidebar-settings"
@@ -501,6 +525,7 @@ function MobileSidebar({
   handleHostSelect,
   renderHostOption,
   handleOpenProject,
+  handleHome,
   handleSettings,
   insetsTop,
   insetsBottom,
@@ -729,6 +754,7 @@ function MobileSidebar({
               handleHostSelect={handleHostSelect}
               renderHostOption={renderHostOption}
               handleOpenProject={handleOpenProject}
+              handleHome={handleHome}
               handleSettings={handleSettings}
             />
           </View>
@@ -758,6 +784,7 @@ function DesktopSidebar({
   handleHostSelect,
   renderHostOption,
   handleOpenProject,
+  handleHome,
   handleSettings,
   insetsTop,
   isOpen,
@@ -871,6 +898,7 @@ function DesktopSidebar({
           handleHostSelect={handleHostSelect}
           renderHostOption={renderHostOption}
           handleOpenProject={handleOpenProject}
+          handleHome={handleHome}
           handleSettings={handleSettings}
         />
 

packages/app/src/components/message.tsx

@@ -62,7 +62,6 @@ import Animated, {
 import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
 import { createMarkdownStyles } from "@/styles/markdown-styles";
 import { Fonts } from "@/constants/theme";
-import * as Clipboard from "expo-clipboard";
 import type { TodoEntry, UserMessageImageAttachment } from "@/types/stream";
 import type { AgentAttachment } from "@server/shared/messages";
 import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
@@ -73,6 +72,7 @@ import { useStableEvent } from "@/hooks/use-stable-event";
 import { HighlightedCodeBlock } from "@/components/highlighted-code-block";
 import { splitMarkdownBlocks } from "@/utils/split-markdown-blocks";
 import { formatDuration, formatMessageTimestamp } from "@/utils/time";
+import { writeMarkdownToRichClipboard } from "@/utils/rich-clipboard";
 import {
   getAssistantImageLoadStateFromMetadata,
   getAssistantImageMetadata,
@@ -102,15 +102,23 @@ import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-ur
 import { persistAttachmentFromBytes, persistAttachmentFromDataUrl } from "@/attachments/service";
 import type { DaemonClient } from "@server/client/daemon-client";
 import { isWeb, isNative } from "@/constants/platform";
+import type { AgentCapabilityFlags } from "@server/server/agent/agent-sdk-types";
+import { RewindMenu, type RewindMode } from "@/components/rewind/rewind-menu";
+import { useRewindAgentMutation } from "@/components/rewind/use-rewind-agent-mutation";
 export type { InlinePathTarget } from "@/assistant-file-links";
 
 type MarkdownStyles = Record<string, TextStyle & ViewStyle & { [key: string]: unknown }>;
 
 interface UserMessageProps {
+  serverId?: string;
+  agentId?: string;
+  messageId?: string;
   message: string;
   images?: UserMessageImageAttachment[];
   attachments?: AgentAttachment[];
   timestamp: number;
+  capabilities?: AgentCapabilityFlags;
+  client?: DaemonClient | null;
   isFirstInGroup?: boolean;
   isLastInGroup?: boolean;
   disableOuterSpacing?: boolean;
@@ -401,8 +409,14 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
   },
   copyButton: {
-    padding: theme.spacing[1],
+    alignSelf: "center",
+    width: 24,
+    height: 24,
+    padding: 0,
+    margin: 0,
     marginRight: -theme.spacing[1],
+    alignItems: "center",
+    justifyContent: "center",
   },
   trailingRow: {
     alignSelf: "flex-end",
@@ -450,10 +464,15 @@ function getUserMessageAttachmentLabel(attachment: AgentAttachment): string {
 }
 
 export const UserMessage = memo(function UserMessage({
+  serverId,
+  agentId,
+  messageId,
   message,
   images = [],
   attachments = [],
   timestamp,
+  capabilities,
+  client,
   isFirstInGroup = true,
   isLastInGroup = true,
   disableOuterSpacing,
@@ -469,10 +488,17 @@ export const UserMessage = memo(function UserMessage({
     () => formatMessageTimestamp(new Date(timestamp)),
     [timestamp],
   );
+  const rewindMutation = useRewindAgentMutation({ serverId, agentId, client, messageId });
 
   const handlePointerEnter = useCallback(() => setIsHovered(true), []);
   const handlePointerLeave = useCallback(() => setIsHovered(false), []);
   const getMessageContent = useCallback(() => message, [message]);
+  const handleRewind = useCallback(
+    (input: { mode: RewindMode; rewoundText: string }) => {
+      return rewindMutation.rewindAgent(input);
+    },
+    [rewindMutation],
+  );
 
   const containerStyle = useMemo(
     () => [
@@ -510,7 +536,7 @@ export const UserMessage = memo(function UserMessage({
   );
 
   return (
-    <View style={containerStyle}>
+    <View style={containerStyle} testID="user-message">
       <View
         style={userMessageStylesheet.content}
         onPointerEnter={handlePointerEnter}
@@ -549,6 +575,14 @@ export const UserMessage = memo(function UserMessage({
         {hasText ? (
           <View style={trailingRowStyle} pointerEvents={showTrailingRow ? "auto" : "none"}>
             <Text style={userMessageStylesheet.timestampText}>{formattedTimestamp}</Text>
+            {capabilities ? (
+              <RewindMenu
+                capabilities={capabilities}
+                isPending={rewindMutation.isPending}
+                rewoundText={message}
+                onRewind={handleRewind}
+              />
+            ) : null}
             <TurnCopyButton
               getContent={getMessageContent}
               containerStyle={userMessageStylesheet.copyButton}
@@ -1117,7 +1151,7 @@ export const TurnCopyButton = memo(function TurnCopyButton({
       return;
     }
 
-    await Clipboard.setStringAsync(content);
+    await writeMarkdownToRichClipboard(content);
     setCopied(true);
 
     if (copyTimeoutRef.current) {

packages/app/src/components/rewind/composer-restore.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "vitest";
+import { restoreComposerTextIfEmpty } from "./composer-restore";
+import { shouldRestoreComposerForRewindMode } from "./rewind-mode";
+
+describe("restoreComposerTextIfEmpty", () => {
+  test("restores the rewound message when the composer is empty", () => {
+    expect(
+      restoreComposerTextIfEmpty({
+        currentText: "",
+        rewoundText: "message before rewind",
+      }),
+    ).toBe("message before rewind");
+  });
+
+  test("preserves an existing composer draft", () => {
+    expect(
+      restoreComposerTextIfEmpty({
+        currentText: "keep this draft",
+        rewoundText: "message before rewind",
+      }),
+    ).toBe("keep this draft");
+  });
+});
+
+describe("shouldRestoreComposerForRewindMode", () => {
+  test("restores only conversation-mutating rewind modes", () => {
+    expect(shouldRestoreComposerForRewindMode("conversation")).toBe(true);
+    expect(shouldRestoreComposerForRewindMode("files")).toBe(false);
+    expect(shouldRestoreComposerForRewindMode("both")).toBe(true);
+  });
+});

packages/app/src/components/rewind/composer-restore.tsx

@@ -0,0 +1,68 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from "react";
+
+interface RewindComposerRestoreContextValue {
+  restoreTextIfComposerEmpty: (text: string) => void;
+}
+
+interface RewindComposerRestoreProviderProps {
+  text: string;
+  setText: (text: string) => void;
+  children: ReactNode;
+}
+
+const RewindComposerRestoreContext = createContext<RewindComposerRestoreContextValue | null>(null);
+
+export function restoreComposerTextIfEmpty(input: {
+  currentText: string;
+  rewoundText: string;
+}): string {
+  if (input.currentText.length > 0) {
+    return input.currentText;
+  }
+  return input.rewoundText;
+}
+
+export function RewindComposerRestoreProvider({
+  text,
+  setText,
+  children,
+}: RewindComposerRestoreProviderProps) {
+  const textRef = useRef(text);
+
+  useEffect(() => {
+    textRef.current = text;
+  }, [text]);
+
+  const restoreTextIfComposerEmpty = useCallback(
+    (rewoundText: string) => {
+      const nextText = restoreComposerTextIfEmpty({
+        currentText: textRef.current,
+        rewoundText,
+      });
+      if (nextText !== textRef.current) {
+        setText(nextText);
+      }
+    },
+    [setText],
+  );
+
+  const value = useMemo(() => ({ restoreTextIfComposerEmpty }), [restoreTextIfComposerEmpty]);
+
+  return (
+    <RewindComposerRestoreContext.Provider value={value}>
+      {children}
+    </RewindComposerRestoreContext.Provider>
+  );
+}
+
+export function useRewindComposerRestore(): RewindComposerRestoreContextValue | null {
+  return useContext(RewindComposerRestoreContext);
+}

packages/app/src/components/rewind/rewind-menu.tsx

@@ -0,0 +1,165 @@
+import { memo, useCallback, useMemo, useState, type ReactElement } from "react";
+import { Text, View } from "react-native";
+import { FileText, Layers, MessageSquare, Undo2 } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { type RewindMode, useRewindCapabilities } from "./use-rewind-capabilities";
+import type { AgentCapabilityFlags } from "@server/server/agent/agent-sdk-types";
+
+export type { RewindMode };
+
+interface RewindMenuProps {
+  capabilities: AgentCapabilityFlags;
+  rewoundText: string;
+  onRewind: (input: { mode: RewindMode; rewoundText: string }) => Promise<void> | void;
+  isPending?: boolean;
+  testID?: string;
+}
+
+function getIcon(mode: RewindMode, color: string): ReactElement {
+  switch (mode) {
+    case "conversation":
+      return <MessageSquare size={16} color={color} />;
+    case "files":
+      return <FileText size={16} color={color} />;
+    case "both":
+      return <Layers size={16} color={color} />;
+  }
+}
+
+export const RewindMenu = memo(function RewindMenu({
+  capabilities,
+  rewoundText,
+  onRewind,
+  isPending: isPendingProp = false,
+  testID = "rewind-menu",
+}: RewindMenuProps) {
+  const { theme } = useUnistyles();
+  const items = useRewindCapabilities(capabilities);
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingMode, setPendingMode] = useState<RewindMode | null>(null);
+  const isLocked = isPendingProp || pendingMode !== null;
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!next && pendingMode !== null) return;
+      setIsOpen(next);
+    },
+    [pendingMode],
+  );
+
+  const handleSelect = useCallback(
+    (mode: RewindMode) => async () => {
+      if (isLocked) return;
+      setPendingMode(mode);
+      try {
+        await onRewind({ mode, rewoundText });
+      } catch {
+        // useRewindAgentMutation owns the toast; the menu only owns flow state.
+      } finally {
+        setPendingMode(null);
+        setIsOpen(false);
+      }
+    },
+    [isLocked, onRewind, rewoundText],
+  );
+
+  const triggerStyle = useCallback(
+    () => [styles.trigger, isLocked ? styles.triggerDisabled : null],
+    [isLocked],
+  );
+
+  const tooltipContent = useMemo(
+    () => (
+      <TooltipContent side="top" align="center" offset={8}>
+        <Text style={styles.tooltipText}>Rewind to this message</Text>
+      </TooltipContent>
+    ),
+    [],
+  );
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+      <Tooltip delayDuration={250} enabledOnDesktop enabledOnMobile={false}>
+        <TooltipTrigger asChild>
+          <View style={styles.triggerSlot} collapsable={false}>
+            <DropdownMenuTrigger
+              accessibilityLabel="Rewind to this message"
+              accessibilityRole="button"
+              disabled={isLocked}
+              style={triggerStyle}
+              testID={`${testID}-trigger`}
+            >
+              {({ hovered, open }) => (
+                <Undo2
+                  size={16}
+                  color={hovered || open ? theme.colors.foreground : theme.colors.foregroundMuted}
+                />
+              )}
+            </DropdownMenuTrigger>
+          </View>
+        </TooltipTrigger>
+        {tooltipContent}
+      </Tooltip>
+      <DropdownMenuContent align="end" minWidth={220} side="bottom" testID={`${testID}-content`}>
+        <View style={styles.warningHeader}>
+          <Text style={styles.warningText}>This action cannot be undone</Text>
+        </View>
+        <DropdownMenuSeparator />
+        {items.map((item) => (
+          <DropdownMenuItem
+            key={item.mode}
+            closeOnSelect={false}
+            disabled={isLocked && pendingMode !== item.mode}
+            leading={getIcon(item.mode, theme.colors.foreground)}
+            onSelect={handleSelect(item.mode)}
+            status={pendingMode === item.mode ? "pending" : undefined}
+            testID={item.testID}
+          >
+            {item.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+});
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+  },
+  triggerDisabled: {
+    opacity: theme.opacity[50],
+  },
+  triggerSlot: {
+    alignSelf: "flex-start",
+  },
+  tooltipText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.xs,
+  },
+  warningHeader: {
+    paddingHorizontal: theme.spacing[3],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[2],
+  },
+  warningText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+  },
+}));

packages/app/src/components/rewind/rewind-mode.ts

@@ -0,0 +1,5 @@
+import type { RewindMode } from "./use-rewind-capabilities";
+
+export function shouldRestoreComposerForRewindMode(mode: RewindMode): boolean {
+  return mode === "conversation" || mode === "both";
+}

packages/app/src/components/rewind/use-rewind-agent-mutation.ts

@@ -0,0 +1,80 @@
+import { useCallback } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { useToast } from "@/contexts/toast-context";
+import type { DaemonClient } from "@server/client/daemon-client";
+import type { RewindMode } from "./use-rewind-capabilities";
+import { useRewindComposerRestore } from "./composer-restore";
+import { useSessionStore } from "@/stores/session-store";
+import { shouldRestoreComposerForRewindMode } from "./rewind-mode";
+import { clearOptimisticUserMessages } from "@/types/stream";
+
+interface UseRewindAgentMutationInput {
+  serverId?: string;
+  agentId?: string;
+  messageId?: string;
+  client?: DaemonClient | null;
+}
+
+interface RewindAgentInput {
+  mode: RewindMode;
+  rewoundText: string;
+}
+
+export function useRewindAgentMutation(input: UseRewindAgentMutationInput): {
+  rewindAgent: (input: RewindAgentInput) => Promise<void>;
+  isPending: boolean;
+} {
+  const toast = useToast();
+  const composerRestore = useRewindComposerRestore();
+  const { isPending, mutateAsync } = useMutation({
+    mutationFn: async ({ mode }: RewindAgentInput) => {
+      if (!input.client || !input.agentId || !input.messageId) {
+        throw new Error("Daemon client not available");
+      }
+      await input.client.rewindAgent(input.agentId, input.messageId, mode);
+      if (mode !== "files") {
+        if (input.serverId) {
+          const session = useSessionStore.getState().sessions[input.serverId];
+          useSessionStore.getState().setAgentStreamState(input.serverId, input.agentId, {
+            tail: clearOptimisticUserMessages(session?.agentStreamTail.get(input.agentId) ?? []),
+            head: clearOptimisticUserMessages(session?.agentStreamHead.get(input.agentId) ?? []),
+          });
+        }
+        const cursor = input.serverId
+          ? useSessionStore
+              .getState()
+              .sessions[input.serverId]?.agentTimelineCursor.get(input.agentId)
+          : undefined;
+        await input.client.fetchAgentTimeline(input.agentId, {
+          direction: "tail",
+          projection: "canonical",
+          ...(cursor ? { cursor: { epoch: cursor.epoch, seq: cursor.endSeq } } : {}),
+        });
+      }
+    },
+    onSuccess: (_data, variables) => {
+      if (!shouldRestoreComposerForRewindMode(variables.mode)) {
+        return;
+      }
+      composerRestore?.restoreTextIfComposerEmpty(variables.rewoundText);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to rewind agent");
+    },
+  });
+
+  const rewindAgent = useCallback(
+    async (rewindInput: RewindAgentInput) => {
+      if (isPending) {
+        return;
+      }
+      await mutateAsync(rewindInput);
+    },
+    [isPending, mutateAsync],
+  );
+
+  return {
+    rewindAgent,
+    isPending,
+  };
+}

packages/app/src/components/rewind/use-rewind-capabilities.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vitest";
+
+import { resolveRewindMenuItems } from "./use-rewind-capabilities";
+
+describe("resolveRewindMenuItems", () => {
+  test("returns no items when the provider declares no rewind capability", () => {
+    expect(
+      resolveRewindMenuItems({
+        supportsRewindConversation: false,
+        supportsRewindFiles: false,
+        supportsRewindBoth: false,
+      }),
+    ).toEqual([]);
+  });
+
+  test("returns only the capabilities declared by the provider", () => {
+    expect(
+      resolveRewindMenuItems({
+        supportsRewindConversation: true,
+        supportsRewindFiles: false,
+        supportsRewindBoth: true,
+      }),
+    ).toEqual([
+      {
+        mode: "conversation",
+        label: "Rewind conversation",
+        testID: "rewind-menu-conversation",
+      },
+      {
+        mode: "both",
+        label: "Rewind conversation and files",
+        testID: "rewind-menu-both",
+      },
+    ]);
+  });
+});

packages/app/src/components/rewind/use-rewind-capabilities.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import type { AgentCapabilityFlags } from "@server/server/agent/agent-sdk-types";
+
+export type RewindMode = "conversation" | "files" | "both";
+
+export interface RewindMenuItem {
+  mode: RewindMode;
+  label: string;
+  testID: string;
+}
+
+export function resolveRewindMenuItems(
+  capabilities:
+    | Pick<
+        AgentCapabilityFlags,
+        "supportsRewindConversation" | "supportsRewindFiles" | "supportsRewindBoth"
+      >
+    | null
+    | undefined,
+): RewindMenuItem[] {
+  if (!capabilities) {
+    return [];
+  }
+  const items: RewindMenuItem[] = [];
+  if (capabilities.supportsRewindConversation) {
+    items.push({
+      mode: "conversation",
+      label: "Rewind conversation",
+      testID: "rewind-menu-conversation",
+    });
+  }
+  if (capabilities.supportsRewindFiles) {
+    items.push({
+      mode: "files",
+      label: "Rewind files",
+      testID: "rewind-menu-files",
+    });
+  }
+  if (capabilities.supportsRewindBoth) {
+    items.push({
+      mode: "both",
+      label: "Rewind conversation and files",
+      testID: "rewind-menu-both",
+    });
+  }
+  return items;
+}
+
+export function useRewindCapabilities(
+  capabilities: Parameters<typeof resolveRewindMenuItems>[0],
+): RewindMenuItem[] {
+  return useMemo(() => resolveRewindMenuItems(capabilities), [capabilities]);
+}

packages/app/src/components/terminal-emulator.native.tsx

@@ -0,0 +1,664 @@
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type Ref,
+} from "react";
+import {
+  Keyboard,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import { WebView, type WebViewMessageEvent } from "react-native-webview";
+import type { ITheme } from "@xterm/xterm";
+import type { TerminalState } from "@server/shared/messages";
+import type { TerminalInputModeState } from "@server/shared/terminal-input-mode";
+import type { TerminalOutputData } from "../terminal/runtime/terminal-emulator-runtime";
+import type {
+  TerminalLocalFileLinkSource,
+  TerminalLocalFileLinkTarget,
+} from "../terminal/local-links/terminal-local-link-provider";
+import { terminalEmulatorWebViewHtml } from "../terminal/webview/terminal-emulator-webview-html";
+import type { PendingTerminalModifiers } from "../utils/terminal-keys";
+import type { TerminalRendererReadyChange } from "../utils/terminal-renderer-readiness";
+import { openExternalUrl } from "../utils/open-external-url";
+
+export interface TerminalEmulatorHandle {
+  writeOutput: (data: TerminalOutputData) => void;
+  restoreOutput: (data: TerminalOutputData) => void;
+  renderSnapshot: (state: TerminalState | null) => void;
+  clear: () => void;
+  blur: () => void;
+}
+
+interface TerminalEmulatorProps {
+  dom?: unknown;
+  ref: Ref<TerminalEmulatorHandle>;
+  streamKey: string;
+  testId?: string;
+  xtermTheme?: ITheme;
+  scrollbackLines: number;
+  swipeGesturesEnabled?: boolean;
+  onSwipeLeft?: () => void;
+  onSwipeRight?: () => void;
+  initialSnapshot?: TerminalState | null;
+  onInput?: (data: string) => Promise<void> | void;
+  onResize?: (input: { rows: number; cols: number }) => Promise<void> | void;
+  onTerminalKey?: (input: {
+    key: string;
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+  }) => Promise<void> | void;
+  onPendingModifiersConsumed?: () => Promise<void> | void;
+  onInputModeChange?: (state: TerminalInputModeState) => Promise<void> | void;
+  onResolveLocalFileLink?: (
+    source: TerminalLocalFileLinkSource,
+  ) => Promise<TerminalLocalFileLinkTarget | null> | TerminalLocalFileLinkTarget | null;
+  onOpenLocalFileLink?: (
+    target: TerminalLocalFileLinkTarget,
+    disposition: "main" | "side",
+  ) => Promise<void> | void;
+  onRendererReadyChange?: (change: TerminalRendererReadyChange) => void;
+  pendingModifiers?: PendingTerminalModifiers;
+  focusRequestToken?: number;
+  resizeRequestToken?: number;
+}
+
+type BridgeInboundMessage =
+  | {
+      type: "mount";
+      streamKey: string;
+      initialSnapshot: TerminalState | null;
+      scrollbackLines: number;
+      theme: ITheme;
+      pendingModifiers: PendingTerminalModifiers;
+      swipeGesturesEnabled: boolean;
+    }
+  | { type: "unmount"; streamKey: string }
+  | { type: "writeOutput"; streamKey: string; text: string }
+  | { type: "restoreOutput"; streamKey: string; text: string }
+  | { type: "renderSnapshot"; streamKey: string; state: TerminalState | null }
+  | { type: "clear"; streamKey: string }
+  | { type: "focus"; streamKey: string; forceRefocus?: boolean }
+  | { type: "resize"; streamKey: string }
+  | { type: "setTheme"; streamKey: string; theme: ITheme }
+  | { type: "setScrollback"; streamKey: string; lines: number }
+  | { type: "setPendingModifiers"; streamKey: string; pendingModifiers: PendingTerminalModifiers }
+  | { type: "setSwipeGesturesEnabled"; streamKey: string; enabled: boolean }
+  | {
+      type: "resolveLocalFileLinkResponse";
+      streamKey: string;
+      requestId: number;
+      target: TerminalLocalFileLinkTarget | null;
+    };
+
+type BridgeOutboundMessage =
+  | { type: "bridgeReady" }
+  | { type: "rendererReady"; streamKey: string; isReady: boolean }
+  | { type: "input"; streamKey: string; data: string }
+  | { type: "resize"; streamKey: string; rows: number; cols: number }
+  | {
+      type: "terminalKey";
+      streamKey: string;
+      key: string;
+      ctrl: boolean;
+      shift: boolean;
+      alt: boolean;
+      meta: boolean;
+    }
+  | { type: "pendingModifiersConsumed"; streamKey: string }
+  | { type: "inputModeChange"; streamKey: string; state: TerminalInputModeState }
+  | { type: "openExternalUrl"; streamKey: string; url: string }
+  | {
+      type: "resolveLocalFileLink";
+      streamKey: string;
+      requestId: number;
+      source: TerminalLocalFileLinkSource;
+    }
+  | {
+      type: "openLocalFileLink";
+      streamKey: string;
+      target: TerminalLocalFileLinkTarget;
+      disposition: "main" | "side";
+    }
+  | { type: "swipeLeft"; streamKey: string }
+  | { type: "swipeRight"; streamKey: string }
+  | { type: "debug"; message: string; details?: unknown };
+
+const TERMINAL_WEBVIEW_SOURCE = { html: terminalEmulatorWebViewHtml };
+const TERMINAL_WEBVIEW_ORIGIN_WHITELIST = ["*"];
+const BRIDGE_READY_TIMEOUT_MS = 2_500;
+const RENDERER_READY_TIMEOUT_MS = 2_500;
+const TERMINAL_TAP_MOVE_TOLERANCE_PX = 8;
+type WebViewProps = ComponentProps<typeof WebView>;
+interface PendingTerminalTap {
+  startX: number;
+  startY: number;
+  moved: boolean;
+}
+
+function buildThemeKey(theme: ITheme): string {
+  return JSON.stringify(theme);
+}
+
+function serializeForInjectedJavaScript(message: BridgeInboundMessage): string {
+  return JSON.stringify(message).replace(/<\/script/gi, "<\\/script");
+}
+
+function createMountMessage(input: {
+  streamKey: string;
+  initialSnapshot: TerminalState | null;
+  scrollbackLines: number;
+  theme: ITheme;
+  pendingModifiers: PendingTerminalModifiers;
+  swipeGesturesEnabled: boolean;
+}): BridgeInboundMessage {
+  return {
+    type: "mount",
+    streamKey: input.streamKey,
+    initialSnapshot: input.initialSnapshot,
+    scrollbackLines: input.scrollbackLines,
+    theme: input.theme,
+    pendingModifiers: input.pendingModifiers,
+    swipeGesturesEnabled: input.swipeGesturesEnabled,
+  };
+}
+
+export default function TerminalEmulator({
+  ref,
+  streamKey,
+  testId = "terminal-surface",
+  xtermTheme = {
+    background: "#0b0b0b",
+    foreground: "#e6e6e6",
+    cursor: "#e6e6e6",
+  },
+  scrollbackLines,
+  swipeGesturesEnabled = false,
+  onSwipeLeft,
+  onSwipeRight,
+  initialSnapshot = null,
+  onInput,
+  onResize,
+  onTerminalKey,
+  onPendingModifiersConsumed,
+  onInputModeChange,
+  onResolveLocalFileLink,
+  onOpenLocalFileLink,
+  onRendererReadyChange,
+  pendingModifiers = { ctrl: false, shift: false, alt: false },
+  focusRequestToken = 0,
+  resizeRequestToken = 0,
+}: TerminalEmulatorProps) {
+  const webViewRef = useRef<WebView>(null);
+  const [webViewEpoch, setWebViewEpoch] = useState(0);
+  const [bridgeReadyVersion, setBridgeReadyVersion] = useState(0);
+  const bridgeReadyRef = useRef(false);
+  const bridgeReadyVersionRef = useRef(0);
+  const rendererReadyVersionRef = useRef(0);
+  const pendingMessagesRef = useRef<BridgeInboundMessage[]>([]);
+  const outputDecoderRef = useRef(new TextDecoder());
+  const mountedStreamKeyRef = useRef<string | null>(null);
+  const bridgeReadyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const rendererReadyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingTapRef = useRef<PendingTerminalTap | null>(null);
+  const mountConfigRef = useRef({
+    streamKey,
+    initialSnapshot,
+    scrollbackLines,
+    theme: xtermTheme,
+    pendingModifiers,
+    swipeGesturesEnabled,
+  });
+  mountConfigRef.current = {
+    streamKey,
+    initialSnapshot,
+    scrollbackLines,
+    theme: xtermTheme,
+    pendingModifiers,
+    swipeGesturesEnabled,
+  };
+  const callbacksRef = useRef({
+    onInput,
+    onResize,
+    onTerminalKey,
+    onPendingModifiersConsumed,
+    onInputModeChange,
+    onRendererReadyChange,
+    onResolveLocalFileLink,
+    onOpenLocalFileLink,
+    onSwipeLeft,
+    onSwipeRight,
+  });
+  callbacksRef.current = {
+    onInput,
+    onResize,
+    onTerminalKey,
+    onPendingModifiersConsumed,
+    onInputModeChange,
+    onRendererReadyChange,
+    onResolveLocalFileLink,
+    onOpenLocalFileLink,
+    onSwipeLeft,
+    onSwipeRight,
+  };
+
+  const clearBridgeReadyTimeout = useCallback(() => {
+    if (bridgeReadyTimeoutRef.current === null) return;
+    clearTimeout(bridgeReadyTimeoutRef.current);
+    bridgeReadyTimeoutRef.current = null;
+  }, []);
+
+  const clearRendererReadyTimeout = useCallback(() => {
+    if (rendererReadyTimeoutRef.current === null) return;
+    clearTimeout(rendererReadyTimeoutRef.current);
+    rendererReadyTimeoutRef.current = null;
+  }, []);
+
+  const resetWebViewDocument = useCallback(() => {
+    clearBridgeReadyTimeout();
+    clearRendererReadyTimeout();
+    bridgeReadyRef.current = false;
+    pendingMessagesRef.current = [];
+    mountedStreamKeyRef.current = null;
+    callbacksRef.current.onRendererReadyChange?.({ streamKey, isReady: false });
+    setWebViewEpoch((value) => value + 1);
+  }, [clearBridgeReadyTimeout, clearRendererReadyTimeout, streamKey]);
+
+  const scheduleBridgeReadyWatchdog = useCallback(() => {
+    clearBridgeReadyTimeout();
+    const expectedBridgeReadyVersion = bridgeReadyVersionRef.current;
+    bridgeReadyTimeoutRef.current = setTimeout(() => {
+      bridgeReadyTimeoutRef.current = null;
+      if (bridgeReadyVersionRef.current !== expectedBridgeReadyVersion || bridgeReadyRef.current) {
+        return;
+      }
+      resetWebViewDocument();
+    }, BRIDGE_READY_TIMEOUT_MS);
+  }, [clearBridgeReadyTimeout, resetWebViewDocument]);
+
+  const scheduleRendererReadyWatchdog = useCallback(() => {
+    clearRendererReadyTimeout();
+    const expectedRendererReadyVersion = rendererReadyVersionRef.current;
+    rendererReadyTimeoutRef.current = setTimeout(() => {
+      rendererReadyTimeoutRef.current = null;
+      if (
+        rendererReadyVersionRef.current !== expectedRendererReadyVersion ||
+        mountedStreamKeyRef.current === streamKey
+      ) {
+        return;
+      }
+      resetWebViewDocument();
+    }, RENDERER_READY_TIMEOUT_MS);
+  }, [clearRendererReadyTimeout, resetWebViewDocument, streamKey]);
+
+  const flushPendingMessages = useCallback(() => {
+    if (!bridgeReadyRef.current || !webViewRef.current) return;
+    const pending = pendingMessagesRef.current.splice(0);
+    for (const message of pending) {
+      const payload = serializeForInjectedJavaScript(message);
+      webViewRef.current.injectJavaScript(
+        `window.__PASEO_TERMINAL_WEBVIEW_RECEIVE__ && window.__PASEO_TERMINAL_WEBVIEW_RECEIVE__(${payload}); true;`,
+      );
+    }
+  }, []);
+
+  const sendToWebView = useCallback((message: BridgeInboundMessage) => {
+    if (!bridgeReadyRef.current || !webViewRef.current) {
+      pendingMessagesRef.current.push(message);
+      return;
+    }
+    const payload = serializeForInjectedJavaScript(message);
+    webViewRef.current.injectJavaScript(
+      `window.__PASEO_TERMINAL_WEBVIEW_RECEIVE__ && window.__PASEO_TERMINAL_WEBVIEW_RECEIVE__(${payload}); true;`,
+    );
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    (): TerminalEmulatorHandle => ({
+      writeOutput: (data: TerminalOutputData) => {
+        const output = outputDecoderRef.current.decode(data, { stream: true });
+        if (output.length === 0) {
+          return;
+        }
+        sendToWebView({ type: "writeOutput", streamKey, text: output });
+      },
+      restoreOutput: (data: TerminalOutputData) => {
+        outputDecoderRef.current.decode();
+        const text = outputDecoderRef.current.decode(data, { stream: false });
+        if (text.length === 0) {
+          return;
+        }
+        sendToWebView({ type: "restoreOutput", streamKey, text });
+      },
+      renderSnapshot: (state: TerminalState | null) => {
+        outputDecoderRef.current.decode();
+        sendToWebView({ type: "renderSnapshot", streamKey, state });
+      },
+      clear: () => {
+        outputDecoderRef.current.decode();
+        sendToWebView({ type: "clear", streamKey });
+      },
+      blur: () => {
+        webViewRef.current?.injectJavaScript(
+          "window.__PASEO_TERMINAL_WEBVIEW_BLUR__ && window.__PASEO_TERMINAL_WEBVIEW_BLUR__(); true;",
+        );
+        Keyboard.dismiss();
+      },
+    }),
+    [sendToWebView, streamKey],
+  );
+
+  useEffect(() => {
+    outputDecoderRef.current.decode();
+  }, [streamKey]);
+
+  useEffect(() => {
+    if (bridgeReadyVersion <= 0) return;
+    const mountMessage = createMountMessage(mountConfigRef.current);
+    mountedStreamKeyRef.current = streamKey;
+    sendToWebView(mountMessage);
+    flushPendingMessages();
+    scheduleRendererReadyWatchdog();
+  }, [
+    bridgeReadyVersion,
+    flushPendingMessages,
+    scheduleRendererReadyWatchdog,
+    sendToWebView,
+    streamKey,
+  ]);
+
+  const themeKey = useMemo(() => buildThemeKey(xtermTheme), [xtermTheme]);
+  useEffect(() => {
+    if (!mountedStreamKeyRef.current) return;
+    sendToWebView({ type: "setTheme", streamKey, theme: xtermTheme });
+  }, [sendToWebView, streamKey, themeKey, xtermTheme]);
+
+  useEffect(() => {
+    if (!mountedStreamKeyRef.current) return;
+    sendToWebView({ type: "setScrollback", streamKey, lines: scrollbackLines });
+  }, [scrollbackLines, sendToWebView, streamKey]);
+
+  useEffect(() => {
+    if (!mountedStreamKeyRef.current) return;
+    sendToWebView({ type: "setPendingModifiers", streamKey, pendingModifiers });
+  }, [pendingModifiers, sendToWebView, streamKey]);
+
+  useEffect(() => {
+    if (!mountedStreamKeyRef.current) return;
+    sendToWebView({ type: "setSwipeGesturesEnabled", streamKey, enabled: swipeGesturesEnabled });
+  }, [sendToWebView, streamKey, swipeGesturesEnabled]);
+
+  useEffect(() => {
+    if (focusRequestToken <= 0) return;
+    sendToWebView({ type: "resize", streamKey });
+    sendToWebView({ type: "focus", streamKey });
+    webViewRef.current?.requestFocus();
+  }, [focusRequestToken, sendToWebView, streamKey]);
+
+  useEffect(() => {
+    if (resizeRequestToken <= 0) return;
+    sendToWebView({ type: "resize", streamKey });
+  }, [resizeRequestToken, sendToWebView, streamKey]);
+
+  useEffect(() => {
+    return () => {
+      if (mountedStreamKeyRef.current) {
+        const previousStreamKey = mountedStreamKeyRef.current;
+        callbacksRef.current.onRendererReadyChange?.({
+          streamKey: previousStreamKey,
+          isReady: false,
+        });
+        sendToWebView({ type: "unmount", streamKey: previousStreamKey });
+      }
+      bridgeReadyRef.current = false;
+      pendingMessagesRef.current = [];
+      mountedStreamKeyRef.current = null;
+      clearBridgeReadyTimeout();
+      clearRendererReadyTimeout();
+    };
+  }, [clearBridgeReadyTimeout, clearRendererReadyTimeout, sendToWebView]);
+
+  const handleLifecycleMessage = useCallback(
+    (message: BridgeOutboundMessage): boolean => {
+      if (message.type === "bridgeReady") {
+        bridgeReadyRef.current = true;
+        bridgeReadyVersionRef.current += 1;
+        clearBridgeReadyTimeout();
+        setBridgeReadyVersion((value) => value + 1);
+        return true;
+      }
+      if (message.type === "rendererReady") {
+        mountedStreamKeyRef.current = message.isReady ? message.streamKey : null;
+        if (message.isReady) {
+          rendererReadyVersionRef.current += 1;
+          clearRendererReadyTimeout();
+        }
+        callbacksRef.current.onRendererReadyChange?.({
+          streamKey: message.streamKey,
+          isReady: message.isReady,
+        });
+        return true;
+      }
+      return false;
+    },
+    [clearBridgeReadyTimeout, clearRendererReadyTimeout],
+  );
+
+  const resolveLocalFileLink = useCallback(
+    async (message: Extract<BridgeOutboundMessage, { type: "resolveLocalFileLink" }>) => {
+      try {
+        const target = await (callbacksRef.current.onResolveLocalFileLink?.(message.source) ??
+          null);
+        sendToWebView({
+          type: "resolveLocalFileLinkResponse",
+          streamKey: message.streamKey,
+          requestId: message.requestId,
+          target,
+        });
+      } catch {
+        sendToWebView({
+          type: "resolveLocalFileLinkResponse",
+          streamKey: message.streamKey,
+          requestId: message.requestId,
+          target: null,
+        });
+      }
+    },
+    [sendToWebView],
+  );
+
+  const handleTerminalMessage = useCallback(
+    (
+      message: Exclude<BridgeOutboundMessage, { type: "bridgeReady" } | { type: "rendererReady" }>,
+    ) => {
+      if (message.type === "resolveLocalFileLink") {
+        void resolveLocalFileLink(message);
+        return;
+      }
+      if (message.type === "openLocalFileLink") {
+        callbacksRef.current.onOpenLocalFileLink?.(message.target, message.disposition);
+        return;
+      }
+      switch (message.type) {
+        case "input":
+          callbacksRef.current.onInput?.(message.data);
+          break;
+        case "resize":
+          callbacksRef.current.onResize?.({ rows: message.rows, cols: message.cols });
+          break;
+        case "terminalKey":
+          callbacksRef.current.onTerminalKey?.({
+            key: message.key,
+            ctrl: message.ctrl,
+            shift: message.shift,
+            alt: message.alt,
+            meta: message.meta,
+          });
+          break;
+        case "pendingModifiersConsumed":
+          callbacksRef.current.onPendingModifiersConsumed?.();
+          break;
+        case "inputModeChange":
+          callbacksRef.current.onInputModeChange?.(message.state);
+          break;
+        case "openExternalUrl":
+          void openExternalUrl(message.url);
+          break;
+        case "swipeLeft":
+          callbacksRef.current.onSwipeLeft?.();
+          break;
+        case "swipeRight":
+          callbacksRef.current.onSwipeRight?.();
+          break;
+        case "debug":
+          break;
+      }
+    },
+    [resolveLocalFileLink],
+  );
+
+  const handleMessage = useCallback(
+    (event: WebViewMessageEvent) => {
+      let message: BridgeOutboundMessage;
+      try {
+        message = JSON.parse(event.nativeEvent.data) as BridgeOutboundMessage;
+      } catch {
+        return;
+      }
+
+      if (message.type === "bridgeReady" || message.type === "rendererReady") {
+        handleLifecycleMessage(message);
+        return;
+      }
+      handleTerminalMessage(message);
+    },
+    [handleLifecycleMessage, handleTerminalMessage],
+  );
+
+  const handleLoadStart = useCallback<NonNullable<WebViewProps["onLoadStart"]>>(() => {
+    bridgeReadyRef.current = false;
+    mountedStreamKeyRef.current = null;
+    scheduleBridgeReadyWatchdog();
+  }, [scheduleBridgeReadyWatchdog]);
+
+  const handleContentProcessDidTerminate = useCallback<
+    NonNullable<WebViewProps["onContentProcessDidTerminate"]>
+  >(() => {
+    resetWebViewDocument();
+  }, [resetWebViewDocument]);
+
+  const handleRenderProcessGone = useCallback<
+    NonNullable<WebViewProps["onRenderProcessGone"]>
+  >(() => {
+    resetWebViewDocument();
+  }, [resetWebViewDocument]);
+
+  const handleWebViewTouchStart = useCallback((event: GestureResponderEvent) => {
+    pendingTapRef.current = {
+      startX: event.nativeEvent.pageX,
+      startY: event.nativeEvent.pageY,
+      moved: false,
+    };
+  }, []);
+
+  const handleWebViewTouchMove = useCallback((event: GestureResponderEvent) => {
+    const pendingTap = pendingTapRef.current;
+    if (!pendingTap) return;
+    const dx = event.nativeEvent.pageX - pendingTap.startX;
+    const dy = event.nativeEvent.pageY - pendingTap.startY;
+    if (
+      Math.abs(dx) > TERMINAL_TAP_MOVE_TOLERANCE_PX ||
+      Math.abs(dy) > TERMINAL_TAP_MOVE_TOLERANCE_PX
+    ) {
+      pendingTap.moved = true;
+    }
+  }, []);
+
+  const handleWebViewTouchEnd = useCallback(() => {
+    const pendingTap = pendingTapRef.current;
+    pendingTapRef.current = null;
+    if (!pendingTap || pendingTap.moved) {
+      return;
+    }
+    webViewRef.current?.requestFocus();
+    sendToWebView({ type: "focus", streamKey, forceRefocus: true });
+  }, [sendToWebView, streamKey]);
+
+  const handleWebViewTouchCancel = useCallback(() => {
+    pendingTapRef.current = null;
+  }, []);
+
+  const backgroundColor = xtermTheme.background ?? "#0b0b0b";
+  const rootStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [styles.root, { backgroundColor }],
+    [backgroundColor],
+  );
+  const webViewStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [styles.webView, { backgroundColor }],
+    [backgroundColor],
+  );
+  const webViewContainerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [styles.webViewContainer, { backgroundColor }],
+    [backgroundColor],
+  );
+
+  return (
+    <View style={rootStyle} testID={testId}>
+      <WebView
+        key={webViewEpoch}
+        ref={webViewRef}
+        source={TERMINAL_WEBVIEW_SOURCE}
+        style={webViewStyle}
+        containerStyle={webViewContainerStyle}
+        originWhitelist={TERMINAL_WEBVIEW_ORIGIN_WHITELIST}
+        scrollEnabled
+        nestedScrollEnabled
+        bounces={false}
+        overScrollMode="never"
+        keyboardDisplayRequiresUserAction={false}
+        automaticallyAdjustContentInsets={false}
+        contentInsetAdjustmentBehavior="never"
+        textInteractionEnabled
+        allowsLinkPreview={false}
+        setSupportMultipleWindows={false}
+        setBuiltInZoomControls={false}
+        setDisplayZoomControls={false}
+        textZoom={100}
+        onTouchStart={handleWebViewTouchStart}
+        onTouchMove={handleWebViewTouchMove}
+        onTouchEnd={handleWebViewTouchEnd}
+        onTouchCancel={handleWebViewTouchCancel}
+        onMessage={handleMessage}
+        onLoadStart={handleLoadStart}
+        onContentProcessDidTerminate={handleContentProcessDidTerminate}
+        onRenderProcessGone={handleRenderProcessGone}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
+    overflow: "hidden",
+  },
+  webView: {
+    flex: 1,
+  },
+  webViewContainer: {
+    flex: 1,
+  },
+});

packages/app/src/components/terminal-emulator.tsx

@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
   type CSSProperties,
+  type DragEvent as ReactDragEvent,
   type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   type Ref,
@@ -19,7 +20,14 @@ import type { ITheme } from "@xterm/xterm";
 import type { TerminalState } from "@server/shared/messages";
 import type { TerminalInputModeState } from "@server/shared/terminal-input-mode";
 import type { PendingTerminalModifiers } from "../utils/terminal-keys";
-import { TerminalEmulatorRuntime } from "../terminal/runtime/terminal-emulator-runtime";
+import {
+  TerminalEmulatorRuntime,
+  type TerminalOutputData,
+} from "../terminal/runtime/terminal-emulator-runtime";
+import type {
+  TerminalLocalFileLinkSource,
+  TerminalLocalFileLinkTarget,
+} from "../terminal/local-links/terminal-local-link-provider";
 import type { TerminalRendererReadyChange } from "../utils/terminal-renderer-readiness";
 import { openExternalUrl } from "../utils/open-external-url";
 import { focusWithRetries } from "../utils/web-focus";
@@ -27,11 +35,19 @@ import {
   computeScrollOffsetFromDragDelta,
   computeVerticalScrollbarGeometry,
 } from "./web-desktop-scrollbar.math";
+import {
+  extractTerminalDropPaths,
+  isTerminalDragLeaveOutside,
+  isTerminalFileDrag,
+  prepareDroppedPathsForTerminal,
+} from "../terminal/drop/terminal-file-drop";
 
 export interface TerminalEmulatorHandle {
-  writeOutput: (text: string) => void;
+  writeOutput: (data: TerminalOutputData) => void;
+  restoreOutput: (data: TerminalOutputData) => void;
   renderSnapshot: (state: TerminalState | null) => void;
   clear: () => void;
+  blur: () => void;
 }
 
 const SCROLLBAR_HANDLE_WIDTH_IDLE = 6;
@@ -132,6 +148,13 @@ interface TerminalEmulatorProps {
   }) => Promise<void> | void;
   onPendingModifiersConsumed?: () => Promise<void> | void;
   onInputModeChange?: (state: TerminalInputModeState) => Promise<void> | void;
+  onResolveLocalFileLink?: (
+    source: TerminalLocalFileLinkSource,
+  ) => Promise<TerminalLocalFileLinkTarget | null> | TerminalLocalFileLinkTarget | null;
+  onOpenLocalFileLink?: (
+    target: TerminalLocalFileLinkTarget,
+    disposition: "main" | "side",
+  ) => Promise<void> | void;
   onRendererReadyChange?: (change: TerminalRendererReadyChange) => void;
   pendingModifiers?: PendingTerminalModifiers;
   focusRequestToken?: number;
@@ -199,6 +222,8 @@ export default function TerminalEmulator({
   onTerminalKey,
   onPendingModifiersConsumed,
   onInputModeChange,
+  onResolveLocalFileLink,
+  onOpenLocalFileLink,
   onRendererReadyChange,
   pendingModifiers = { ctrl: false, shift: false, alt: false },
   focusRequestToken = 0,
@@ -227,6 +252,8 @@ export default function TerminalEmulator({
     onTerminalKey,
     onPendingModifiersConsumed,
     onInputModeChange,
+    onResolveLocalFileLink,
+    onOpenLocalFileLink,
   });
   mountCallbacksRef.current = {
     onInput,
@@ -234,6 +261,8 @@ export default function TerminalEmulator({
     onTerminalKey,
     onPendingModifiersConsumed,
     onInputModeChange,
+    onResolveLocalFileLink,
+    onOpenLocalFileLink,
   };
   const initialSnapshotRef = useRef(initialSnapshot);
   initialSnapshotRef.current = initialSnapshot;
@@ -248,14 +277,20 @@ export default function TerminalEmulator({
   const [isDraggingScrollbar, setIsDraggingScrollbar] = useState(false);
   const [isScrollVisible, setIsScrollVisible] = useState(false);
   const [isScrollActive, setIsScrollActive] = useState(false);
+  const [isDropActive, setIsDropActive] = useState(false);
+  const dropActiveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const domBridgeRef = useRef<DOMImperativeFactory | null>(null);
   useDOMImperativeHandle(
     domBridgeRef,
     (): DOMImperativeFactory => ({
       writeOutput: (...args) => {
-        const text = args[0];
-        if (typeof text === "string") runtimeRef.current?.write({ text });
+        const data = args[0];
+        if (data instanceof Uint8Array) runtimeRef.current?.write({ data });
+      },
+      restoreOutput: (...args) => {
+        const data = args[0];
+        if (data instanceof Uint8Array) runtimeRef.current?.restoreOutput({ data });
       },
       renderSnapshot: (...args) => {
         const state = args[0];
@@ -268,14 +303,20 @@ export default function TerminalEmulator({
       clear: () => {
         runtimeRef.current?.clear();
       },
+      blur: () => {
+        runtimeRef.current?.blur();
+      },
     }),
     [],
   );
   useImperativeHandle(
     ref,
     (): TerminalEmulatorHandle => ({
-      writeOutput: (text: string) => {
-        runtimeRef.current?.write({ text });
+      writeOutput: (data: TerminalOutputData) => {
+        runtimeRef.current?.write({ data });
+      },
+      restoreOutput: (data: TerminalOutputData) => {
+        runtimeRef.current?.restoreOutput({ data });
       },
       renderSnapshot: (state: TerminalState | null) => {
         runtimeRef.current?.renderSnapshot({ state });
@@ -283,6 +324,9 @@ export default function TerminalEmulator({
       clear: () => {
         runtimeRef.current?.clear();
       },
+      blur: () => {
+        runtimeRef.current?.blur();
+      },
     }),
     [],
   );
@@ -459,10 +503,20 @@ export default function TerminalEmulator({
         onTerminalKey,
         onPendingModifiersConsumed,
         onInputModeChange,
+        onResolveLocalFileLink,
+        onOpenLocalFileLink,
         onOpenExternalUrl: openExternalUrl,
       },
     });
-  }, [onInput, onInputModeChange, onPendingModifiersConsumed, onResize, onTerminalKey]);
+  }, [
+    onInput,
+    onInputModeChange,
+    onOpenLocalFileLink,
+    onPendingModifiersConsumed,
+    onResolveLocalFileLink,
+    onResize,
+    onTerminalKey,
+  ]);
 
   useEffect(() => {
     runtimeRef.current?.setPendingModifiers({ pendingModifiers });
@@ -721,6 +775,110 @@ export default function TerminalEmulator({
     setIsHandleHovered(false);
   }, []);
 
+  const clearDropActiveTimeout = useCallback(() => {
+    if (dropActiveTimeoutRef.current === null) {
+      return;
+    }
+    clearTimeout(dropActiveTimeoutRef.current);
+    dropActiveTimeoutRef.current = null;
+  }, []);
+
+  const clearTerminalDropActive = useCallback(() => {
+    clearDropActiveTimeout();
+    setIsDropActive(false);
+  }, [clearDropActiveTimeout]);
+
+  const keepTerminalDropActive = useCallback(() => {
+    clearDropActiveTimeout();
+    setIsDropActive(true);
+    dropActiveTimeoutRef.current = setTimeout(() => {
+      dropActiveTimeoutRef.current = null;
+      setIsDropActive(false);
+    }, 180);
+  }, [clearDropActiveTimeout]);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) {
+      return () => {};
+    }
+
+    const handleDragEnter = (event: DragEvent) => {
+      if (!isTerminalFileDrag(event.dataTransfer)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      keepTerminalDropActive();
+    };
+
+    const handleDragOver = (event: DragEvent) => {
+      if (!isTerminalFileDrag(event.dataTransfer)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+      keepTerminalDropActive();
+    };
+
+    const handleDrop = (event: DragEvent) => {
+      if (!isTerminalFileDrag(event.dataTransfer)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      clearTerminalDropActive();
+
+      const paths = extractTerminalDropPaths(event.dataTransfer);
+      if (paths.length === 0) {
+        return;
+      }
+
+      runtimeRef.current?.focus();
+      mountCallbacksRef.current.onInput?.(prepareDroppedPathsForTerminal(paths));
+    };
+
+    root.addEventListener("dragenter", handleDragEnter, { capture: true });
+    root.addEventListener("dragover", handleDragOver, { capture: true });
+    root.addEventListener("drop", handleDrop, { capture: true });
+    window.addEventListener("dragend", clearTerminalDropActive);
+    window.addEventListener("drop", clearTerminalDropActive);
+
+    return () => {
+      root.removeEventListener("dragenter", handleDragEnter, { capture: true });
+      root.removeEventListener("dragover", handleDragOver, { capture: true });
+      root.removeEventListener("drop", handleDrop, { capture: true });
+      window.removeEventListener("dragend", clearTerminalDropActive);
+      window.removeEventListener("drop", clearTerminalDropActive);
+      clearDropActiveTimeout();
+    };
+  }, [clearDropActiveTimeout, clearTerminalDropActive, keepTerminalDropActive]);
+
+  const handleRootDragLeave = useCallback(
+    (event: ReactDragEvent<HTMLDivElement>) => {
+      if (!isTerminalFileDrag(event.dataTransfer)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      if (
+        !isTerminalDragLeaveOutside({
+          currentTarget: event.currentTarget,
+          relatedTarget: event.relatedTarget,
+        })
+      ) {
+        return;
+      }
+      clearTerminalDropActive();
+    },
+    [clearTerminalDropActive],
+  );
+
   const rootDivStyle = useMemo<CSSProperties>(
     () => ({
       position: "relative",
@@ -736,6 +894,19 @@ export default function TerminalEmulator({
     }),
     [xtermTheme.background],
   );
+  const dropOverlayStyle = useMemo<CSSProperties>(
+    () => ({
+      position: "absolute",
+      inset: 0,
+      zIndex: 9,
+      border: "1px solid rgba(78, 161, 255, 0.72)",
+      backgroundColor: "rgba(78, 161, 255, 0.16)",
+      opacity: isDropActive ? 1 : 0,
+      pointerEvents: "none",
+      transition: "opacity 120ms ease-out",
+    }),
+    [isDropActive],
+  );
   const handleContainerStyle = useMemo<CSSProperties>(
     () => ({
       position: "absolute",
@@ -784,8 +955,10 @@ export default function TerminalEmulator({
       style={rootDivStyle}
       onPointerDown={handleRootPointerDown}
       onContextMenu={handleRootContextMenu}
+      onDragLeave={handleRootDragLeave}
     >
       <div ref={hostRef} style={HOST_DIV_STYLE} />
+      <div style={dropOverlayStyle} />
       {scrollbarGeometry.isVisible ? (
         <div style={SCROLLBAR_CONTAINER_STYLE}>
           <div

packages/app/src/components/terminal-pane.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ActivityIndicator,
   Pressable,
-  ScrollView,
   Text,
   View,
   type PressableStateCallbackType,
@@ -25,7 +24,9 @@ import {
   TerminalStreamController,
   type TerminalStreamControllerStatus,
 } from "@/terminal/runtime/terminal-stream-controller";
+import { resolveTerminalRestoreOptions } from "@/terminal/runtime/terminal-restore-options";
 import { usePanelStore } from "@/stores/panel-store";
+import { useSessionStore } from "@/stores/session-store";
 import { toXtermTheme } from "@/utils/to-xterm-theme";
 import TerminalEmulator, { type TerminalEmulatorHandle } from "./terminal-emulator";
 import { useIsCompactFormFactor } from "@/constants/layout";
@@ -36,6 +37,16 @@ import {
   type TerminalRendererReadyChange,
 } from "@/utils/terminal-renderer-readiness";
 import { useAppSettings } from "@/hooks/use-settings";
+import { classifyForResolution, fetchDaemonResolution } from "@/assistant-file-links/resolver";
+import type {
+  TerminalLocalFileLinkSource,
+  TerminalLocalFileLinkTarget,
+} from "@/terminal/local-links/terminal-local-link-provider";
+import {
+  normalizeWorkspaceFileLocation,
+  type OpenFileDisposition,
+  type WorkspaceFileOpenRequest,
+} from "@/workspace/file-open";
 
 interface TerminalPaneProps {
   serverId: string;
@@ -44,6 +55,7 @@ interface TerminalPaneProps {
   isWorkspaceFocused: boolean;
   isPaneFocused: boolean;
   onOpenFileExplorer: () => void;
+  onOpenWorkspaceFile: (request: WorkspaceFileOpenRequest) => void;
 }
 
 const TERMINAL_REFIT_DELAYS_MS = [0, 48, 144, 320];
@@ -54,17 +66,17 @@ const MODIFIER_LABELS = {
   alt: "Alt",
 } as const;
 
-const KEY_BUTTONS: Array<{ id: string; label: string; key: string }> = [
-  { id: "esc", label: "Esc", key: "Escape" },
-  { id: "tab", label: "Tab", key: "Tab" },
-  { id: "up", label: "↑", key: "ArrowUp" },
-  { id: "down", label: "↓", key: "ArrowDown" },
-  { id: "left", label: "←", key: "ArrowLeft" },
-  { id: "right", label: "→", key: "ArrowRight" },
-  { id: "enter", label: "Enter", key: "Enter" },
-  { id: "backspace", label: "⌫", key: "Backspace" },
-  { id: "c", label: "C", key: "c" },
-];
+const KEY_BUTTONS = {
+  esc: { id: "esc", label: "Esc", key: "Escape" },
+  tab: { id: "tab", label: "Tab", key: "Tab" },
+  up: { id: "up", label: "↑", key: "ArrowUp" },
+  down: { id: "down", label: "↓", key: "ArrowDown" },
+  left: { id: "left", label: "←", key: "ArrowLeft" },
+  right: { id: "right", label: "→", key: "ArrowRight" },
+  enter: { id: "enter", label: "Enter", key: "Enter" },
+  backspace: { id: "backspace", label: "⌫", key: "Backspace" },
+  space: { id: "space", label: "Space", key: " " },
+} as const;
 
 interface ModifierState {
   ctrl: boolean;
@@ -155,6 +167,7 @@ export function TerminalPane({
   isWorkspaceFocused,
   isPaneFocused,
   onOpenFileExplorer,
+  onOpenWorkspaceFile,
 }: TerminalPaneProps) {
   const isAppVisible = useAppVisible();
   const { theme } = useUnistyles();
@@ -171,6 +184,9 @@ export function TerminalPane({
 
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
+  const supportsTerminalRestoreModes = useSessionStore(
+    (state) => state.sessions[serverId]?.serverInfo?.features?.["terminal-restore-modes"] === true,
+  );
 
   const scopeKey = useMemo(() => terminalScopeKey({ serverId, cwd }), [serverId, cwd]);
   const terminalStreamKey = useMemo(() => `${scopeKey}:${terminalId}`, [scopeKey, terminalId]);
@@ -214,6 +230,12 @@ export function TerminalPane({
   const requestTerminalReflow = useCallback(() => {
     setResizeRequestToken((current) => current + 1);
   }, []);
+  useEffect(() => {
+    if (!isMobile || !isWorkspaceFocused || mobileView === "agent") {
+      return;
+    }
+    emulatorRef.current?.blur();
+  }, [isMobile, isWorkspaceFocused, mobileView]);
   const handleRendererReadyChange = useCallback(
     (change: TerminalRendererReadyChange) => {
       setRendererReadyStreamKey((current) => applyTerminalRendererReadyChange(current, change));
@@ -354,11 +376,18 @@ export function TerminalPane({
     const controller = new TerminalStreamController({
       client,
       getPreferredSize: () => measuredTerminalSizeRef.current,
-      onOutput: ({ terminalId: outputTerminalId, text }) => {
+      onOutput: ({ terminalId: outputTerminalId, data }) => {
         if (!isWorkspaceFocused || terminalIdRef.current !== outputTerminalId) {
           return;
         }
-        emulatorRef.current?.writeOutput(text);
+        emulatorRef.current?.writeOutput(data);
+      },
+      onRestore: ({ terminalId: restoreTerminalId, data }) => {
+        workspaceTerminalSession.snapshots.clear({ terminalId: restoreTerminalId });
+        if (!isWorkspaceFocused || terminalIdRef.current !== restoreTerminalId) {
+          return;
+        }
+        emulatorRef.current?.restoreOutput(data);
       },
       onSnapshot: ({ terminalId: snapshotTerminalId, state }) => {
         workspaceTerminalSession.snapshots.set({ terminalId: snapshotTerminalId, state });
@@ -367,6 +396,12 @@ export function TerminalPane({
         }
         emulatorRef.current?.renderSnapshot(state);
       },
+      getRestoreOptions: () => {
+        return resolveTerminalRestoreOptions({
+          supportsTerminalRestoreModes,
+          size: measuredTerminalSizeRef.current,
+        });
+      },
       onStatusChange: handleStreamControllerStatus,
     });
 
@@ -386,6 +421,7 @@ export function TerminalPane({
     handleStreamControllerStatus,
     isConnected,
     isWorkspaceFocused,
+    supportsTerminalRestoreModes,
     workspaceTerminalSession.snapshots,
   ]);
 
@@ -611,6 +647,42 @@ export function TerminalPane({
   const handleInputModeChange = useCallback((state: TerminalInputModeState) => {
     inputModeRef.current = state;
   }, []);
+  const handleResolveLocalFileLink = useCallback(
+    async (source: TerminalLocalFileLinkSource): Promise<TerminalLocalFileLinkTarget | null> => {
+      const resolution = classifyForResolution(
+        { href: source.text, text: source.text, sourceType: "inline-code" },
+        { workspaceRoot: cwd },
+      );
+      if (resolution.kind === "resolved") {
+        return resolution.value.kind === "file" ? resolution.value.target : null;
+      }
+      if (!client) {
+        return null;
+      }
+      try {
+        return await fetchDaemonResolution({
+          ambiguousQuery: resolution.ambiguousQuery,
+          token: resolution.token,
+          target: resolution.target,
+          workspaceRoot: cwd,
+          getDirectorySuggestions: (input) => client.getDirectorySuggestions(input),
+        });
+      } catch {
+        return null;
+      }
+    },
+    [client, cwd],
+  );
+  const handleOpenLocalFileLink = useCallback(
+    (target: TerminalLocalFileLinkTarget, disposition: OpenFileDisposition) => {
+      const location = normalizeWorkspaceFileLocation(target);
+      if (!location) {
+        return;
+      }
+      onOpenWorkspaceFile({ location, disposition });
+    },
+    [onOpenWorkspaceFile],
+  );
 
   const toggleModifier = useCallback(
     (modifier: keyof ModifierState) => {
@@ -649,11 +721,13 @@ export function TerminalPane({
 
   const handleSwipeRight = useCallback(() => {
     if (!swipeGesturesEnabled) return;
+    emulatorRef.current?.blur();
     showMobileAgentList();
   }, [swipeGesturesEnabled, showMobileAgentList]);
 
   const handleSwipeLeft = useCallback(() => {
     if (!swipeGesturesEnabled) return;
+    emulatorRef.current?.blur();
     onOpenFileExplorer();
   }, [swipeGesturesEnabled, onOpenFileExplorer]);
   const showLoadingOverlay = shouldShowTerminalLoadingOverlay({
@@ -693,6 +767,8 @@ export function TerminalPane({
               onResize={handleTerminalResize}
               onTerminalKey={handleTerminalKey}
               onInputModeChange={handleInputModeChange}
+              onResolveLocalFileLink={handleResolveLocalFileLink}
+              onOpenLocalFileLink={handleOpenLocalFileLink}
               onPendingModifiersConsumed={handlePendingModifiersConsumed}
               pendingModifiers={modifiers}
               focusRequestToken={focusRequestToken}
@@ -720,18 +796,47 @@ export function TerminalPane({
 
       {isMobile ? (
         <View style={styles.keyboardContainer} testID="terminal-virtual-keyboard">
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={styles.keyboardRows}>
             <View style={styles.keyboardRow}>
-              {(Object.keys(MODIFIER_LABELS) as Array<keyof ModifierState>).map((modifier) => (
-                <ModifierButton
-                  key={modifier}
-                  modifier={modifier}
-                  active={modifiers[modifier]}
-                  onToggle={toggleModifier}
+              {[KEY_BUTTONS.esc, KEY_BUTTONS.tab].map((button) => (
+                <VirtualKeyButton
+                  key={button.id}
+                  id={button.id}
+                  label={button.label}
+                  keyValue={button.key}
+                  onSend={sendVirtualKey}
                 />
               ))}
 
-              {KEY_BUTTONS.map((button) => (
+              <ModifierButton modifier="ctrl" active={modifiers.ctrl} onToggle={toggleModifier} />
+
+              <VirtualKeyButton
+                id={KEY_BUTTONS.up.id}
+                label={KEY_BUTTONS.up.label}
+                keyValue={KEY_BUTTONS.up.key}
+                onSend={sendVirtualKey}
+              />
+
+              <ModifierButton modifier="shift" active={modifiers.shift} onToggle={toggleModifier} />
+
+              <VirtualKeyButton
+                id={KEY_BUTTONS.backspace.id}
+                label={KEY_BUTTONS.backspace.label}
+                keyValue={KEY_BUTTONS.backspace.key}
+                onSend={sendVirtualKey}
+              />
+            </View>
+
+            <View style={styles.keyboardRow}>
+              <ModifierButton modifier="alt" active={modifiers.alt} onToggle={toggleModifier} />
+
+              {[
+                KEY_BUTTONS.space,
+                KEY_BUTTONS.left,
+                KEY_BUTTONS.down,
+                KEY_BUTTONS.right,
+                KEY_BUTTONS.enter,
+              ].map((button) => (
                 <VirtualKeyButton
                   key={button.id}
                   id={button.id}
@@ -741,7 +846,7 @@ export function TerminalPane({
                 />
               ))}
             </View>
-          </ScrollView>
+          </View>
         </View>
       ) : null}
     </Animated.View>
@@ -788,21 +893,24 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[2],
     paddingVertical: theme.spacing[2],
   },
+  keyboardRows: {
+    gap: theme.spacing[1],
+  },
   keyboardRow: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[1],
-    paddingRight: theme.spacing[3],
   },
   keyButton: {
-    minWidth: 44,
+    flex: 1,
+    minWidth: 0,
     height: 34,
     borderRadius: theme.borderRadius.md,
     borderWidth: 1,
     borderColor: theme.colors.border,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: theme.spacing[2],
+    paddingHorizontal: theme.spacing[1],
     backgroundColor: theme.colors.surface1,
   },
   keyButtonHovered: {
@@ -816,6 +924,7 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.medium,
+    textAlign: "center",
   },
   keyButtonTextActive: {
     color: theme.colors.foreground,

packages/app/src/components/ui/autocomplete-popover.tsx

@@ -0,0 +1,183 @@
+import { useEffect, useMemo, useState, type ReactElement, type RefObject } from "react";
+import { Keyboard, View, useWindowDimensions } from "react-native";
+import { Portal } from "@gorhom/portal";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+} from "react-native-reanimated";
+import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet } from "react-native-unistyles";
+import { Autocomplete, type AutocompleteOption } from "@/components/ui/autocomplete";
+import {
+  measureFloatingPanelPortalHost,
+  useFloatingPanelPortalHostName,
+} from "@/components/ui/floating-panel-portal";
+import { SPACING } from "@/styles/theme";
+import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+
+const OFFSET_FROM_ANCHOR = SPACING[3];
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface RelativeAnchorRect {
+  x: number;
+  y: number;
+  width: number;
+  hostHeight: number;
+}
+
+function measureElement(element: View): Promise<Rect> {
+  return new Promise((resolve) => {
+    element.measureInWindow((x, y, width, height) => {
+      resolve({ x, y, width, height });
+    });
+  });
+}
+
+interface AutocompletePopoverProps {
+  visible: boolean;
+  anchorRef: RefObject<View | null>;
+  options: readonly AutocompleteOption[];
+  selectedIndex: number;
+  onSelect: (option: AutocompleteOption) => void;
+  isLoading?: boolean;
+  errorMessage?: string;
+  loadingText?: string;
+  emptyText?: string;
+}
+
+export function AutocompletePopover({
+  visible,
+  anchorRef,
+  options,
+  selectedIndex,
+  onSelect,
+  isLoading,
+  errorMessage,
+  loadingText,
+  emptyText,
+}: AutocompletePopoverProps): ReactElement | null {
+  "use no memo";
+  // React Compiler memoizes effect captures by reading SharedValue.value during render.
+  const [relativeAnchorRect, setRelativeAnchorRect] = useState<RelativeAnchorRect | null>(null);
+  const windowDimensions = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const portalHostName = useFloatingPanelPortalHostName();
+
+  const { height: rawKeyboardHeight } = useReanimatedKeyboardAnimation();
+  const bottomInsetSV = useSharedValue(insets.bottom);
+  useEffect(() => {
+    bottomInsetSV.value = insets.bottom;
+  }, [bottomInsetSV, insets.bottom]);
+
+  const shift = useDerivedValue(() =>
+    Math.max(0, Math.abs(rawKeyboardHeight.value) - bottomInsetSV.value),
+  );
+  const openShift = useSharedValue(0);
+
+  useEffect(() => {
+    if (!visible || (options.length > 0 && selectedIndex < 0)) {
+      setRelativeAnchorRect(null);
+      return;
+    }
+
+    let cancelled = false;
+    const remeasure = () => {
+      const anchorElement = anchorRef.current;
+      if (!anchorElement) return;
+      void Promise.all([
+        measureElement(anchorElement),
+        measureFloatingPanelPortalHost(portalHostName),
+      ]).then(([anchorRect, hostRect]) => {
+        if (cancelled || !hostRect) return undefined;
+        setRelativeAnchorRect({
+          x: anchorRect.x - hostRect.x,
+          y: anchorRect.y - hostRect.y,
+          width: anchorRect.width,
+          hostHeight: hostRect.height,
+        });
+        openShift.value = shift.value;
+        return undefined;
+      });
+    };
+
+    remeasure();
+    const raf = requestAnimationFrame(remeasure);
+    const subscriptions = (["keyboardDidShow", "keyboardDidHide"] as const).map((event) =>
+      Keyboard.addListener(event, () => requestAnimationFrame(remeasure)),
+    );
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(raf);
+      for (const sub of subscriptions) sub.remove();
+    };
+  }, [
+    visible,
+    options.length,
+    selectedIndex,
+    anchorRef,
+    portalHostName,
+    openShift,
+    shift,
+    windowDimensions.width,
+    windowDimensions.height,
+  ]);
+
+  const baseStyle = useMemo(() => {
+    if (!relativeAnchorRect) return null;
+    return inlineUnistylesStyle({
+      position: "absolute" as const,
+      bottom: relativeAnchorRect.hostHeight - relativeAnchorRect.y + OFFSET_FROM_ANCHOR,
+      left: relativeAnchorRect.x,
+      width: relativeAnchorRect.width,
+    });
+  }, [relativeAnchorRect]);
+
+  const animatedTransformStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: openShift.value - shift.value }],
+  }));
+
+  const composedStyle = useMemo(
+    () => [baseStyle, animatedTransformStyle],
+    [baseStyle, animatedTransformStyle],
+  );
+
+  if (!visible || !relativeAnchorRect || !baseStyle) return null;
+  if (options.length > 0 && selectedIndex < 0) return null;
+
+  return (
+    <Portal hostName={portalHostName}>
+      <View style={styles.overlay} pointerEvents="box-none">
+        <Animated.View testID="composer-autocomplete-popover" style={composedStyle}>
+          <Autocomplete
+            options={options}
+            selectedIndex={selectedIndex}
+            onSelect={onSelect}
+            isLoading={isLoading}
+            errorMessage={errorMessage}
+            loadingText={loadingText}
+            emptyText={emptyText}
+          />
+        </Animated.View>
+      </View>
+    </Portal>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+}));

packages/app/src/components/ui/autocomplete.tsx

@@ -206,6 +206,7 @@ export function Autocomplete({
     [ensureActiveItemVisible],
   );
 
+  const selectedOption = options[selectedIndex];
   const containerStyle = useMemo(() => [styles.container, { maxHeight }], [maxHeight]);
 
   if (isLoading) {
@@ -238,8 +239,6 @@ export function Autocomplete({
     );
   }
 
-  const selectedOption = options[selectedIndex];
-
   return (
     <View style={styles.outerWrapper}>
       {selectedOption?.kind === "command" && selectedOption.description ? (

packages/app/src/components/ui/combobox.tsx

@@ -194,7 +194,6 @@ export function SearchInput({
           // @ts-expect-error - outlineStyle is web-only
           style={SEARCH_INPUT_STYLE}
           placeholder={placeholder}
-          placeholderTextColor={theme.colors.foregroundMuted}
           initialValue={value}
           resetKey={resetKey}
           value={value}

packages/app/src/components/ui/floating-panel-portal.tsx

@@ -0,0 +1,86 @@
+import {
+  createContext,
+  type ReactElement,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
+import { StyleSheet, View } from "react-native";
+import { PortalHost } from "@gorhom/portal";
+
+export const DEFAULT_FLOATING_PANEL_PORTAL_HOST = "content-floating-panels";
+
+const FloatingPanelPortalHostNameContext = createContext(DEFAULT_FLOATING_PANEL_PORTAL_HOST);
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const portalHostElements = new Map<string, View>();
+
+function measureElement(element: View): Promise<Rect> {
+  return new Promise((resolve) => {
+    element.measureInWindow((x, y, width, height) => {
+      resolve({ x, y, width, height });
+    });
+  });
+}
+
+export function measureFloatingPanelPortalHost(name: string): Promise<Rect | null> {
+  const element = portalHostElements.get(name);
+  if (!element) return Promise.resolve(null);
+  return measureElement(element);
+}
+
+export function FloatingPanelPortalHostNameProvider({
+  hostName,
+  children,
+}: {
+  hostName: string;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <FloatingPanelPortalHostNameContext.Provider value={hostName}>
+      {children}
+    </FloatingPanelPortalHostNameContext.Provider>
+  );
+}
+
+export function useFloatingPanelPortalHostName(): string {
+  return useContext(FloatingPanelPortalHostNameContext);
+}
+
+export function FloatingPanelPortalHost({
+  name = DEFAULT_FLOATING_PANEL_PORTAL_HOST,
+}: {
+  name?: string;
+}): ReactElement {
+  const hostRef = useRef<View>(null);
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return undefined;
+    portalHostElements.set(name, host);
+    return () => {
+      if (portalHostElements.get(name) === host) {
+        portalHostElements.delete(name);
+      }
+    };
+  }, [name]);
+
+  return (
+    <View ref={hostRef} collapsable={false} pointerEvents="box-none" style={styles.host}>
+      <PortalHost name={name} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});

packages/app/src/components/ui/segmented-control.tsx

@@ -142,7 +142,6 @@ const styles = StyleSheet.create((theme) => ({
   container: {
     flexDirection: "row",
     alignItems: "stretch",
-    maxWidth: "100%",
     backgroundColor: theme.colors.surface2,
     borderRadius: theme.borderRadius.lg,
     gap: 2,

packages/app/src/components/ui/shortcut.tsx

@@ -4,23 +4,6 @@ import { StyleSheet } from "react-native-unistyles";
 import { formatShortcut, type ShortcutKey } from "@/utils/format-shortcut";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 
-function colorWithOpacity(color: string, opacity: number): string {
-  const hex = color.trim();
-  if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
-    const r = Number.parseInt(hex[1] + hex[1], 16);
-    const g = Number.parseInt(hex[2] + hex[2], 16);
-    const b = Number.parseInt(hex[3] + hex[3], 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  }
-  if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
-    const r = Number.parseInt(hex.slice(1, 3), 16);
-    const g = Number.parseInt(hex.slice(3, 5), 16);
-    const b = Number.parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  }
-  return `rgba(255, 255, 255, ${opacity})`;
-}
-
 export function Shortcut({
   keys,
   chord,
@@ -70,7 +53,7 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
     borderRadius: theme.borderRadius.md,
-    backgroundColor: colorWithOpacity(theme.colors.foreground, 0.05),
+    backgroundColor: theme.colors.surface2,
     borderWidth: 0,
   },
   sequence: {
@@ -82,6 +65,6 @@ const styles = StyleSheet.create((theme) => ({
   text: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: colorWithOpacity(theme.colors.foreground, 0.6),
+    color: theme.colors.foregroundMuted,
   },
 }));

packages/app/src/components/workspace-setup-dialog.tsx

@@ -3,23 +3,25 @@ import { Image, Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { createNameId } from "mnemonic-id";
 import { AdaptiveModalSheet, type SheetHeader } from "@/components/adaptive-modal-sheet";
-import { Composer } from "@/components/composer";
+import { Composer } from "@/composer";
+import { DraftAgentModeControl } from "@/composer/agent-controls/mode-control";
 import { useToast } from "@/contexts/toast-context";
-import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
+import { useAgentInputDraft } from "@/composer/draft/input-draft";
 import { useProjectIconQuery } from "@/hooks/use-project-icon-query";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { normalizeWorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
 import { useWorkspaceSetupStore } from "@/stores/workspace-setup-store";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import { encodeImages } from "@/utils/encode-images";
 import { toErrorMessage } from "@/utils/error-messages";
-import { splitComposerAttachmentsForSubmit } from "@/components/composer-attachments";
+import { splitComposerAttachmentsForSubmit } from "@/composer/attachments/submit";
 import type { CreateAgentRequestOptions, DaemonClient } from "@server/client/daemon-client";
 import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
 import { requireWorkspaceExecutionAuthority } from "@/utils/workspace-execution";
 import { navigateToAgent } from "@/utils/navigate-to-agent";
 import { navigateToPreparedWorkspaceTab } from "@/utils/workspace-navigation";
-import type { ImageAttachment, MessagePayload } from "./message-input";
+import type { ImageAttachment, MessagePayload } from "@/composer/types";
 
 function toProjectIconDataUri(icon: { mimeType: string; data: string } | null): string | null {
   if (!icon) {
@@ -63,7 +65,10 @@ function buildChatDraftComposerArgs({
 }) {
   return {
     initialServerId: serverId || null,
-    initialValues: workspaceDirectory ? { workingDir: workspaceDirectory } : undefined,
+    initialValues:
+      workspaceDirectory || sourceDirectory
+        ? { workingDir: workspaceDirectory || sourceDirectory }
+        : undefined,
     isVisible: pendingWorkspaceSetup !== null,
     onlineServerIds: isConnected && serverId ? [serverId] : [],
     lockedWorkingDir: workspaceDirectory || sourceDirectory || undefined,
@@ -344,18 +349,27 @@ export function WorkspaceSetupDialog() {
     addImagesRef.current = addImages;
   }, []);
 
+  const isCompact = useIsCompactFormFactor();
   const iconSource = useMemo(() => (iconDataUri ? { uri: iconDataUri } : null), [iconDataUri]);
-  const statusControlsWithDisabled = useMemo(
+  const agentControlsWithDisabled = useMemo(
     () =>
       composerState
         ? {
-            ...composerState.statusControls,
+            ...composerState.agentControls,
             disabled: pendingAction !== null,
           }
         : undefined,
     [composerState, pendingAction],
   );
 
+  const composerFooter = useMemo(
+    () =>
+      isCompact && agentControlsWithDisabled ? (
+        <DraftAgentModeControl placement="footer" {...agentControlsWithDisabled} />
+      ) : undefined,
+    [isCompact, agentControlsWithDisabled],
+  );
+
   const subtitleContent = useMemo(
     () => (
       <View style={styles.subtitleRow}>
@@ -409,9 +423,10 @@ export function WorkspaceSetupDialog() {
           clearDraft={chatDraft.clear}
           autoFocus
           commandDraftConfig={composerState?.commandDraftConfig}
-          statusControls={statusControlsWithDisabled}
+          agentControls={agentControlsWithDisabled}
           inputWrapperStyle={styles.composerInputWrapper}
           onAddImages={handleAddImagesCallback}
+          footer={composerFooter}
         />
       </View>
 

packages/app/src/composer/actions.test.ts

@@ -26,7 +26,7 @@ import {
   type ComposerSendClient,
   type QueueWriter,
   type QueuedComposerMessage,
-} from "./composer-actions";
+} from "./actions";
 
 const imageMetadata: AttachmentMetadata = {
   id: "img-1",
@@ -189,6 +189,7 @@ function createFakeStream(initialHead: Map<string, StreamItem[]> = new Map()): F
   const fake: FakeStream = {
     head: new Map(initialHead),
     tail: new Map(),
+    getTail: (agentId) => fake.tail.get(agentId),
     getHead: (agentId) => fake.head.get(agentId),
     setHead: (updater) => {
       fake.head = updater(fake.head);
@@ -353,6 +354,7 @@ describe("dispatchComposerAgentMessage", () => {
     expect(userMessage.images).toEqual([image]);
     expect(userMessage.attachments).toEqual(call.options.attachments);
     expect(userMessage.id).toBe(call.options.messageId);
+    expect(userMessage.optimistic).toBe(true);
   });
 
   it("appends to the existing head when one is present", async () => {

packages/app/src/composer/actions.ts

@@ -8,8 +8,14 @@ import {
   isWorkspaceAttachment,
   userAttachmentsOnly,
 } from "@/attachments/workspace-attachment-utils";
-import { splitComposerAttachmentsForSubmit } from "@/components/composer-attachments";
-import { generateMessageId, type StreamItem } from "@/types/stream";
+import { splitComposerAttachmentsForSubmit } from "@/composer/attachments/submit";
+import {
+  appendOptimisticUserMessageToStream,
+  buildOptimisticUserMessage,
+  generateMessageId,
+  type StreamItem,
+  type UserMessageItem,
+} from "@/types/stream";
 import type { PickedImageAttachmentInput } from "@/hooks/image-attachment-picker";
 
 export interface QueuedComposerMessage {
@@ -49,6 +55,7 @@ export interface ComposerCancelClient {
 }
 
 export interface AgentStreamWriter {
+  getTail: (agentId: string) => StreamItem[] | undefined;
   getHead: (agentId: string) => StreamItem[] | undefined;
   setHead: (updater: (prev: Map<string, StreamItem[]>) => Map<string, StreamItem[]>) => void;
   setTail: (updater: (prev: Map<string, StreamItem[]>) => Map<string, StreamItem[]>) => void;
@@ -130,14 +137,13 @@ export async function dispatchComposerAgentMessage(
 ): Promise<void> {
   const wirePayload = splitComposerAttachmentsForSubmit(input.attachments);
   const messageId = generateMessageId();
-  const userMessage: StreamItem = {
-    kind: "user_message",
+  const userMessage = buildOptimisticUserMessage({
     id: messageId,
     text: input.text,
     timestamp: new Date(),
-    ...(wirePayload.images.length > 0 ? { images: wirePayload.images } : {}),
-    ...(wirePayload.attachments.length > 0 ? { attachments: wirePayload.attachments } : {}),
-  };
+    images: wirePayload.images,
+    attachments: wirePayload.attachments,
+  });
   appendUserMessageToStream(input.agentId, userMessage, input.stream);
   const imagesData = await input.encodeImages(wirePayload.images);
   await input.client.sendAgentMessage(input.agentId, input.text, {
@@ -149,23 +155,29 @@ export async function dispatchComposerAgentMessage(
 
 function appendUserMessageToStream(
   agentId: string,
-  userMessage: StreamItem,
+  userMessage: UserMessageItem,
   stream: AgentStreamWriter,
 ): void {
-  const head = stream.getHead(agentId);
-  if (head && head.length > 0) {
+  const result = appendOptimisticUserMessageToStream({
+    tail: stream.getTail(agentId) ?? [],
+    head: stream.getHead(agentId) ?? [],
+    message: userMessage,
+    placement: "active-head",
+  });
+  if (result.changedHead) {
     stream.setHead((prev) => {
       const next = new Map(prev);
-      next.set(agentId, [...(prev.get(agentId) ?? []), userMessage]);
+      next.set(agentId, result.head);
+      return next;
+    });
+  }
+  if (result.changedTail) {
+    stream.setTail((prev) => {
+      const next = new Map(prev);
+      next.set(agentId, result.tail);
       return next;
     });
-    return;
   }
-  stream.setTail((prev) => {
-    const next = new Map(prev);
-    next.set(agentId, [...(prev.get(agentId) ?? []), userMessage]);
-    return next;
-  });
 }
 
 export interface QueueComposerMessageInput {

packages/app/src/composer/agent-controls/mode-control.tsx

@@ -0,0 +1,372 @@
+import { memo, useCallback, useMemo, useRef, useState, type ReactElement } from "react";
+import { Pressable, Text, View, type PressableStateCallbackType } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useShallow } from "zustand/shallow";
+import { useStoreWithEqualityFn } from "zustand/traditional";
+import {
+  ChevronDown,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldOff,
+  ShieldQuestionMark,
+} from "lucide-react-native";
+import { type SheetHeader } from "@/components/adaptive-modal-sheet";
+import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
+import { useSessionStore } from "@/stores/session-store";
+import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
+import { resolveProviderDefinition } from "@/utils/provider-definitions";
+import { useToast } from "@/contexts/toast-context";
+import { useIsCompactFormFactor } from "@/constants/layout";
+import { toErrorMessage } from "@/utils/error-messages";
+import { formatAgentModeLabel } from "@/composer/agent-controls/utils";
+import type { AgentMode, AgentProvider } from "@server/server/agent/agent-sdk-types";
+import {
+  getModeVisuals,
+  type AgentModeColorTier,
+  type AgentProviderDefinition,
+} from "@server/server/agent/provider-manifest";
+
+export type AgentModeControlPlacement = "toolbar" | "footer";
+
+function shouldRenderForPlacement(placement: AgentModeControlPlacement, isCompact: boolean) {
+  return placement === "footer" ? isCompact : !isCompact;
+}
+
+const MODE_ICONS = {
+  ShieldCheck,
+  ShieldAlert,
+  ShieldOff,
+  ShieldQuestionMark,
+} as const;
+
+interface ModePalette {
+  blue: { 500: string };
+  green: { 500: string };
+  red: { 500: string };
+  purple: { 500: string };
+}
+
+function getModeIconColor(colorTier: AgentModeColorTier | undefined, palette: ModePalette): string {
+  if (colorTier?.startsWith("#")) {
+    return colorTier;
+  }
+
+  switch (colorTier) {
+    case "safe":
+      return palette.green[500];
+    case "moderate":
+      return palette.blue[500];
+    case "dangerous":
+      return palette.red[500];
+    case "planning":
+      return palette.purple[500];
+    default:
+      return palette.blue[500];
+  }
+}
+
+interface ModeComboboxOptionProps {
+  option: ComboboxOption;
+  selected: boolean;
+  active: boolean;
+  onPress: () => void;
+  provider: string;
+  providerDefinitions: AgentProviderDefinition[];
+  iconColor: string;
+}
+
+function ModeComboboxOption({
+  option,
+  selected,
+  active,
+  onPress,
+  provider,
+  providerDefinitions,
+  iconColor,
+}: ModeComboboxOptionProps) {
+  const visuals = getModeVisuals(provider, option.id, providerDefinitions);
+  const IconComponent = visuals?.icon ? MODE_ICONS[visuals.icon] : ShieldCheck;
+  const leadingSlot = useMemo(
+    () => <IconComponent size={16} color={iconColor} />,
+    [IconComponent, iconColor],
+  );
+  return (
+    <ComboboxItem
+      label={option.label}
+      selected={selected}
+      active={active}
+      onPress={onPress}
+      leadingSlot={leadingSlot}
+    />
+  );
+}
+
+interface AgentModeControlViewProps {
+  provider: string;
+  providerDefinitions: AgentProviderDefinition[];
+  modeOptions: AgentMode[];
+  selectedModeId: string | null | undefined;
+  onSelectMode: (modeId: string) => void;
+  disabled?: boolean;
+}
+
+function normalizeSearchQuery(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+function AgentModeControlView({
+  provider,
+  providerDefinitions,
+  modeOptions,
+  selectedModeId,
+  onSelectMode,
+  disabled = false,
+}: AgentModeControlViewProps) {
+  const { theme } = useUnistyles();
+  const anchorRef = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const selectedMode = useMemo(() => {
+    if (modeOptions.length === 0) return null;
+    return modeOptions.find((m) => m.id === selectedModeId) ?? modeOptions[0];
+  }, [modeOptions, selectedModeId]);
+
+  const visuals = selectedMode
+    ? getModeVisuals(provider, selectedMode.id, providerDefinitions)
+    : undefined;
+  const Icon = visuals?.icon ? MODE_ICONS[visuals.icon] : ShieldCheck;
+  const iconColor = getModeIconColor(visuals?.colorTier, theme.colors.palette);
+  const selectedModeLabel = selectedMode ? formatAgentModeLabel(selectedMode) : "";
+
+  const allOptions = useMemo<ComboboxOption[]>(
+    () => modeOptions.map((m) => ({ id: m.id, label: formatAgentModeLabel(m) })),
+    [modeOptions],
+  );
+  const options = useMemo<ComboboxOption[]>(() => {
+    const q = normalizeSearchQuery(searchQuery);
+    if (!q) return allOptions;
+    return allOptions.filter((o) => o.label.toLowerCase().includes(q));
+  }, [allOptions, searchQuery]);
+
+  const handleOpenChange = useCallback((next: boolean) => {
+    setOpen(next);
+    if (!next) setSearchQuery("");
+  }, []);
+
+  const handlePress = useCallback(() => handleOpenChange(!open), [handleOpenChange, open]);
+  const handleSelect = useCallback(
+    (id: string) => {
+      onSelectMode(id);
+      handleOpenChange(false);
+    },
+    [onSelectMode, handleOpenChange],
+  );
+
+  const renderOption = useCallback(
+    (args: {
+      option: ComboboxOption;
+      selected: boolean;
+      active: boolean;
+      onPress: () => void;
+    }): ReactElement => (
+      <ModeComboboxOption
+        option={args.option}
+        selected={args.selected}
+        active={args.active}
+        onPress={args.onPress}
+        provider={provider}
+        providerDefinitions={providerDefinitions}
+        iconColor={theme.colors.foreground}
+      />
+    ),
+    [provider, providerDefinitions, theme.colors.foreground],
+  );
+
+  const pressableStyle = useCallback(
+    ({ pressed, hovered }: PressableStateCallbackType) => [
+      styles.chip,
+      hovered && styles.chipHovered,
+      (pressed || open) && styles.chipPressed,
+      disabled && styles.chipDisabled,
+    ],
+    [open, disabled],
+  );
+
+  const labelStyle = useMemo(() => [styles.chipLabel, { color: iconColor }], [iconColor]);
+
+  const sheetHeader = useMemo<SheetHeader>(
+    () => ({
+      title: "Mode",
+      search: {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search modes...",
+        testID: "mode-search-input",
+      },
+    }),
+    [searchQuery],
+  );
+
+  if (!selectedMode) return null;
+
+  return (
+    <>
+      <Pressable
+        ref={anchorRef}
+        collapsable={false}
+        disabled={disabled}
+        onPress={handlePress}
+        style={pressableStyle}
+        accessibilityRole="button"
+        accessibilityLabel={`Select agent mode (${selectedModeLabel})`}
+        testID="mode-control"
+      >
+        <Icon size={theme.iconSize.md} color={iconColor} />
+        <Text style={labelStyle}>{selectedModeLabel}</Text>
+        <ChevronDown size={theme.iconSize.sm} color={iconColor} />
+      </Pressable>
+      <Combobox
+        options={options}
+        value={selectedMode.id}
+        onSelect={handleSelect}
+        open={open}
+        onOpenChange={handleOpenChange}
+        anchorRef={anchorRef}
+        desktopPlacement="top-start"
+        header={sheetHeader}
+        renderOption={renderOption}
+      />
+    </>
+  );
+}
+
+const EMPTY_MODES: AgentMode[] = [];
+
+function compareAvailableModes(a: AgentMode[], b: AgentMode[]): boolean {
+  return a === b || JSON.stringify(a) === JSON.stringify(b);
+}
+
+interface AgentModeControlProps {
+  serverId: string;
+  agentId: string;
+  placement: AgentModeControlPlacement;
+}
+
+export const AgentModeControl = memo(function AgentModeControl({
+  serverId,
+  agentId,
+  placement,
+}: AgentModeControlProps) {
+  const isCompact = useIsCompactFormFactor();
+  const slice = useSessionStore(
+    useShallow((state) => {
+      const agent = state.sessions[serverId]?.agents?.get(agentId);
+      if (!agent) return null;
+      return {
+        provider: agent.provider,
+        cwd: agent.cwd,
+        currentModeId: agent.currentModeId,
+      };
+    }),
+  );
+  const availableModes = useStoreWithEqualityFn(
+    useSessionStore,
+    (state) => state.sessions[serverId]?.agents?.get(agentId)?.availableModes ?? EMPTY_MODES,
+    compareAvailableModes,
+  );
+  const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);
+  const toast = useToast();
+  const { entries: snapshotEntries } = useProvidersSnapshot(serverId, { cwd: slice?.cwd });
+
+  const providerDefinitions = useMemo<AgentProviderDefinition[]>(() => {
+    if (!slice?.provider) return [];
+    const definition = resolveProviderDefinition(slice.provider, snapshotEntries);
+    return definition ? [definition] : [];
+  }, [slice?.provider, snapshotEntries]);
+
+  const handleSelectMode = useCallback(
+    (modeId: string) => {
+      if (!client) return;
+      void client.setAgentMode(agentId, modeId).catch((error) => {
+        console.warn("[AgentModeControl] setAgentMode failed", error);
+        toast.error(toErrorMessage(error));
+      });
+    },
+    [agentId, client, toast],
+  );
+
+  if (!slice || availableModes.length === 0) return null;
+  if (!shouldRenderForPlacement(placement, isCompact)) return null;
+
+  return (
+    <AgentModeControlView
+      provider={slice.provider}
+      providerDefinitions={providerDefinitions}
+      modeOptions={availableModes}
+      selectedModeId={slice.currentModeId}
+      onSelectMode={handleSelectMode}
+      disabled={!client}
+    />
+  );
+});
+
+export interface DraftAgentModeControlProps {
+  selectedProvider: AgentProvider | null;
+  providerDefinitions: AgentProviderDefinition[];
+  modeOptions: AgentMode[];
+  selectedMode: string;
+  onSelectMode: (modeId: string) => void;
+  disabled?: boolean;
+  placement: AgentModeControlPlacement;
+}
+
+export function DraftAgentModeControl({
+  selectedProvider,
+  providerDefinitions,
+  modeOptions,
+  selectedMode,
+  onSelectMode,
+  disabled,
+  placement,
+}: DraftAgentModeControlProps) {
+  const isCompact = useIsCompactFormFactor();
+  if (!selectedProvider || modeOptions.length === 0) return null;
+  if (!shouldRenderForPlacement(placement, isCompact)) return null;
+  return (
+    <AgentModeControlView
+      provider={selectedProvider}
+      providerDefinitions={providerDefinitions}
+      modeOptions={modeOptions}
+      selectedModeId={selectedMode}
+      onSelectMode={onSelectMode}
+      disabled={disabled}
+    />
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  chip: {
+    height: 28,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    gap: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius["2xl"],
+  },
+  chipHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  chipPressed: {
+    backgroundColor: theme.colors.surface0,
+  },
+  chipDisabled: {
+    opacity: 0.5,
+  },
+  chipLabel: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+}));

packages/app/src/composer/agent-controls/mode.test.ts

@@ -1,14 +1,14 @@
 import { describe, expect, it } from "vitest";
-import { resolveStatusControlMode } from "./composer.status-controls";
+import { resolveAgentControlsMode } from "./mode";
 
-describe("resolveStatusControlMode", () => {
-  it("uses ready mode when no controlled status controls are provided", () => {
-    expect(resolveStatusControlMode(undefined)).toBe("ready");
+describe("resolveAgentControlsMode", () => {
+  it("uses ready mode when no controlled agent controls are provided", () => {
+    expect(resolveAgentControlsMode(undefined)).toBe("ready");
   });
 
-  it("uses draft mode when controlled status controls are provided", () => {
+  it("uses draft mode when controlled agent controls are provided", () => {
     expect(
-      resolveStatusControlMode({
+      resolveAgentControlsMode({
         providerDefinitions: [],
         selectedProvider: "codex",
         onSelectProvider: () => undefined,

packages/app/src/composer/agent-controls/mode.ts

@@ -0,0 +1,5 @@
+import type { DraftAgentControlsProps } from "@/composer/agent-controls";
+
+export function resolveAgentControlsMode(agentControls?: DraftAgentControlsProps) {
+  return agentControls ? "draft" : "ready";
+}

packages/app/src/composer/agent-controls/model-loading.test.ts

@@ -1,7 +1,7 @@
 import { QueryClient, QueryObserver } from "@tanstack/react-query";
 import { describe, expect, it } from "vitest";
 
-import { isProviderModelsQueryLoading } from "./agent-status-bar.model-loading";
+import { isProviderModelsQueryLoading } from "./model-loading";
 
 describe("isProviderModelsQueryLoading", () => {
   it("does not treat a disabled pending query as loading", () => {

packages/app/src/composer/agent-controls/utils.test.ts

@@ -1,17 +1,19 @@
 import { describe, expect, it } from "vitest";
 import {
+  formatAgentModeLabel,
   getFeatureHighlightColor,
   getFeatureTooltip,
-  getStatusSelectorHint,
+  getAgentControlHint,
+  formatThinkingOptionLabel,
   normalizeModelId,
   resolveAgentModelSelection,
-} from "./agent-status-bar.utils";
+} from "./utils";
 
-describe("getStatusSelectorHint", () => {
-  it("explains what each editable status control does", () => {
-    expect(getStatusSelectorHint("thinking")).toBe("Thinking mode");
-    expect(getStatusSelectorHint("model")).toBe("Change model");
-    expect(getStatusSelectorHint("mode")).toBe("Change permission mode");
+describe("getAgentControlHint", () => {
+  it("explains what each editable agent control does", () => {
+    expect(getAgentControlHint("thinking")).toBe("Thinking mode");
+    expect(getAgentControlHint("model")).toBe("Change model");
+    expect(getAgentControlHint("mode")).toBe("Change permission mode");
   });
 });
 
@@ -52,6 +54,36 @@ describe("normalizeModelId", () => {
   });
 });
 
+describe("formatAgentModeLabel", () => {
+  it("sentence-cases provider mode labels", () => {
+    expect(formatAgentModeLabel({ id: "plan", label: "Plan" })).toBe("Plan");
+    expect(formatAgentModeLabel({ id: "full-access", label: "Full Access" })).toBe("Full access");
+    expect(formatAgentModeLabel({ id: "auto-review", label: "Auto-review" })).toBe("Auto-review");
+    expect(formatAgentModeLabel({ id: "read_only", label: "read_only" })).toBe("Read only");
+    expect(formatAgentModeLabel({ id: "acceptEdits", label: "acceptEdits" })).toBe("Accept edits");
+  });
+
+  it("splits compact mode ids when no provider label is available", () => {
+    expect(formatAgentModeLabel({ id: "auto-review" })).toBe("Auto review");
+  });
+});
+
+describe("formatThinkingOptionLabel", () => {
+  it("formats compact thinking option labels for display", () => {
+    expect(formatThinkingOptionLabel({ id: "none", label: "none" })).toBe("None");
+    expect(formatThinkingOptionLabel({ id: "low", label: "low" })).toBe("Low");
+    expect(formatThinkingOptionLabel({ id: "medium", label: "medium" })).toBe("Medium");
+    expect(formatThinkingOptionLabel({ id: "high", label: "high" })).toBe("High");
+    expect(formatThinkingOptionLabel({ id: "xhigh", label: "xhigh" })).toBe("Extra high");
+  });
+
+  it("sentence-cases split provider labels", () => {
+    expect(formatThinkingOptionLabel({ id: "extra_high", label: "extra_high" })).toBe("Extra high");
+    expect(formatThinkingOptionLabel({ id: "think-hard", label: "think-hard" })).toBe("Think hard");
+    expect(formatThinkingOptionLabel({ id: "xhigh", label: "XHigh" })).toBe("Extra high");
+  });
+});
+
 describe("resolveAgentModelSelection", () => {
   it("prefers runtime model over configured model", () => {
     const selection = resolveAgentModelSelection({
@@ -97,6 +129,28 @@ describe("resolveAgentModelSelection", () => {
     expect(selection.displayThinking).toBe("High");
   });
 
+  it("formats raw thinking labels in the selected model display", () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: "a",
+          provider: "claude",
+          label: "Model A",
+          thinkingOptions: [
+            { id: "none", label: "none" },
+            { id: "xhigh", label: "xhigh" },
+          ],
+        },
+      ],
+      runtimeModelId: "a",
+      configuredModelId: null,
+      explicitThinkingOptionId: "xhigh",
+    });
+
+    expect(selection.selectedThinkingId).toBe("xhigh");
+    expect(selection.displayThinking).toBe("Extra high");
+  });
+
   it("falls back to the provider default model label instead of Auto", () => {
     const selection = resolveAgentModelSelection({
       models: [

packages/app/src/composer/agent-controls/utils.ts

@@ -1,9 +1,9 @@
 import type { AgentFeature, AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
 
-export type ExplainedStatusSelector = "mode" | "model" | "thinking";
+export type ExplainedAgentControl = "mode" | "model" | "thinking";
 export type FeatureHighlightColor = "blue" | "default" | "yellow";
 
-export function getStatusSelectorHint(selector: ExplainedStatusSelector): string {
+export function getAgentControlHint(selector: ExplainedAgentControl): string {
   switch (selector) {
     case "thinking":
       return "Thinking mode";
@@ -39,6 +39,50 @@ export function getFeatureHighlightColor(featureId: string): FeatureHighlightCol
   }
 }
 
+interface ControlLabelInput {
+  id: string;
+  label?: string | null;
+}
+
+function sentenceCase(value: string): string {
+  if (!value) {
+    return value;
+  }
+  return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+}
+
+function splitCompactLabel(value: string, splitHyphen: boolean): string {
+  const separatorPattern = splitHyphen ? /[_-]+/g : /_+/g;
+
+  return value
+    .replace(separatorPattern, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function formatControlLabel(option: ControlLabelInput, splitHyphen: boolean): string {
+  const rawLabel = (option.label ?? option.id).trim();
+  return sentenceCase(splitCompactLabel(rawLabel, splitHyphen));
+}
+
+export function formatAgentModeLabel(mode: ControlLabelInput): string {
+  return formatControlLabel(mode, mode.label == null);
+}
+
+export function formatThinkingOptionLabel(option: ControlLabelInput): string {
+  const rawLabel = (option.label ?? option.id).trim();
+  const compactId = option.id.replace(/[\s_-]+/g, "").toLowerCase();
+  const compactLabel = rawLabel.replace(/[\s_-]+/g, "").toLowerCase();
+
+  if (compactId === "xhigh" || compactLabel === "xhigh") {
+    return "Extra high";
+  }
+
+  return formatControlLabel(option, true);
+}
+
 function findModelById(
   models: AgentModelDefinition[] | null,
   modelId: string | null,
@@ -105,6 +149,21 @@ function resolveModelDisplay(
   };
 }
 
+function resolveThinkingDisplay(
+  effectiveThinking: ThinkingOption | null,
+  selectedThinkingId: string | null,
+): string {
+  if (effectiveThinking) {
+    return formatThinkingOptionLabel(effectiveThinking);
+  }
+
+  if (selectedThinkingId) {
+    return formatThinkingOptionLabel({ id: selectedThinkingId });
+  }
+
+  return "Unknown";
+}
+
 export function resolveAgentModelSelection(input: {
   models: AgentModelDefinition[] | null;
   runtimeModelId: string | null | undefined;
@@ -134,7 +193,7 @@ export function resolveAgentModelSelection(input: {
   const resolvedThinkingId = resolveThinkingId(explicitThinkingOptionId, selectedModel);
   const effectiveThinking = resolveEffectiveThinking(thinkingOptions, resolvedThinkingId);
   const selectedThinkingId = effectiveThinking?.id ?? null;
-  const displayThinking = effectiveThinking?.label ?? selectedThinkingId ?? "Unknown";
+  const displayThinking = resolveThinkingDisplay(effectiveThinking, selectedThinkingId);
 
   return {
     selectedModel,

packages/app/src/composer/attachments/submit.ts

@@ -1,4 +1,5 @@
-import type { AttachmentMetadata, ComposerAttachment } from "@/attachments/types";
+import type { ComposerAttachment } from "@/attachments/types";
+import type { ImageAttachment } from "@/composer/types";
 import {
   isWorkspaceAttachment,
   workspaceAttachmentToSubmitAttachment,
@@ -6,8 +7,6 @@ import {
 import type { AgentAttachment } from "@server/shared/messages";
 import { buildGitHubAttachmentFromSearchItem } from "@/utils/review-attachments";
 
-export type ImageAttachment = AttachmentMetadata;
-
 export function splitComposerAttachmentsForSubmit(attachments: ComposerAttachment[]): {
   images: ImageAttachment[];
   attachments: AgentAttachment[];

packages/app/src/composer/draft/create-flow.test.ts

@@ -0,0 +1,90 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useCreateFlowStore } from "@/stores/create-flow-store";
+import type { UserMessageImageAttachment } from "@/types/stream";
+import type { AgentAttachment } from "@server/shared/messages";
+import { useDraftAgentCreateFlow, type DraftCreateAttempt } from "./create-flow";
+
+describe("useDraftAgentCreateFlow", () => {
+  beforeEach(() => {
+    useCreateFlowStore.setState({ pendingByDraftId: {} });
+  });
+
+  it("renders a prepared new-workspace create attempt as optimistic chat before continuing it", async () => {
+    const image: UserMessageImageAttachment = {
+      id: "image-1",
+      mimeType: "image/png",
+      storageType: "web-indexeddb",
+      storageKey: "image-key",
+      createdAt: 123,
+    };
+    const attachment = {
+      type: "review",
+      cwd: "/repo",
+      summary: "Review",
+    } as unknown as AgentAttachment;
+    const attempt: DraftCreateAttempt = {
+      clientMessageId: "msg-prepared",
+      text: "build this",
+      timestamp: new Date("2026-05-25T00:00:00.000Z"),
+      images: [image],
+      attachments: [attachment],
+    };
+    const createRequest = vi.fn(
+      async (ctx: {
+        attempt: DraftCreateAttempt;
+        text: string;
+        images?: UserMessageImageAttachment[];
+        attachments?: AgentAttachment[];
+        cwd: string;
+      }) => ({
+        agentId: "agent-1",
+        result: { id: "agent-1", ctx },
+      }),
+    );
+    const onCreateSuccess = vi.fn();
+
+    const { result } = renderHook(() =>
+      useDraftAgentCreateFlow({
+        draftId: "draft-1",
+        getPendingServerId: () => "server-1",
+        initialAttempt: attempt,
+        buildDraftAgent: (currentAttempt) => ({ currentAttempt }),
+        createRequest,
+        onCreateSuccess,
+      }),
+    );
+
+    expect(result.current.isSubmitting).toBe(true);
+    expect(result.current.draftAgent).toEqual({ currentAttempt: attempt });
+    expect(result.current.optimisticStreamItems).toEqual([
+      {
+        kind: "user_message",
+        id: "msg-prepared",
+        text: "build this",
+        timestamp: attempt.timestamp,
+        optimistic: true,
+        images: [image],
+        attachments: [attachment],
+      },
+    ]);
+    expect(createRequest).not.toHaveBeenCalled();
+
+    await act(async () => {
+      await result.current.continueCreateFromAttempt({ attempt, cwd: "/repo" });
+    });
+
+    expect(createRequest).toHaveBeenCalledTimes(1);
+    expect(createRequest).toHaveBeenCalledWith({
+      attempt,
+      text: "build this",
+      images: [image],
+      attachments: [attachment],
+      cwd: "/repo",
+    });
+    expect(onCreateSuccess).toHaveBeenCalledTimes(1);
+  });
+});