chore(release): cut 0.2.3

* fix(app): keep provider settings above model selector

Desktop web comboboxes used the browser top layer, so ordinary modal portals could not cover them. Keep web overlays in one relative layer stack while preserving native bottom-sheet stacking.

* fix(app): route overlay keyboard ownership

* fix(app): preserve nested overlay ownership

* fix(app): route command center overlay input

* fix(app): preserve global overlay ancestry

* fix(app): register global dialog hosts

.github/workflows/ci.yml

@@ -349,6 +349,9 @@ jobs:
       - name: Install dependencies
         run: node scripts/npm-retry.mjs ci
 
+      - name: Build server stack
+        run: npm run build:server
+
       - name: Install agent CLIs for provider tests
         run: node scripts/npm-retry.mjs install -g @anthropic-ai/claude-code @openai/codex@0.105.0 opencode-ai
 

.mise.toml

@@ -1,10 +1,10 @@
-[env]
-ANDROID_HOME = "{{env.HOME}}/.local/share/mise/installs/android-sdk/21.0"
-_.path = [
-  "{{env.HOME}}/.local/share/mise/installs/android-sdk/21.0/cmdline-tools/21.0/bin",
-  "{{env.HOME}}/.local/share/mise/installs/android-sdk/21.0/platform-tools",
-  "{{env.HOME}}/.local/share/mise/installs/android-sdk/21.0/emulator",
-]
+[vars]
+android_sdk_version = '{{ read_file(path=".tool-versions") | split(pat="android-sdk") | last | trim | split(pat="\n") | first | trim }}'
 
-[tools]
-java = "21"
+[env]
+ANDROID_HOME = "{{ env.HOME }}/.local/share/mise/installs/android-sdk/{{ vars.android_sdk_version }}"
+_.path = [
+  "{{ env.HOME }}/.local/share/mise/installs/android-sdk/{{ vars.android_sdk_version }}/cmdline-tools/{{ vars.android_sdk_version }}/bin",
+  "{{ env.HOME }}/.local/share/mise/installs/android-sdk/{{ vars.android_sdk_version }}/platform-tools",
+  "{{ env.HOME }}/.local/share/mise/installs/android-sdk/{{ vars.android_sdk_version }}/emulator",
+]

CHANGELOG.md

@@ -1,78 +1,77 @@
 # Changelog
 
-## 0.2.0-beta.3 - 2026-07-22
+## 0.2.3 - 2026-07-27
 
 ### Added
 
-- Open the complete Changes view as a workspace tab ([#2298](https://github.com/getpaseo/paseo/pull/2298) by [@nikuscs](https://github.com/nikuscs))
-- Add files to chat directly from Files and Changes ([#2275](https://github.com/getpaseo/paseo/pull/2275) by [@nikuscs](https://github.com/nikuscs))
-- Open existing agents from Paseo links or the CLI ([#2324](https://github.com/getpaseo/paseo/pull/2324))
-- Use Oh My Pi's Write Approval mode to allow reads while requiring approval for changes ([#2228](https://github.com/getpaseo/paseo/pull/2228) by [@theslava](https://github.com/theslava))
+- Manage workspace scripts from the CLI and agent MCP tools ([#1992](https://github.com/getpaseo/paseo/pull/1992) by [@mcowger](https://github.com/mcowger))
+- Copy terminal IDs from terminal tab menus ([#2371](https://github.com/getpaseo/paseo/pull/2371))
+- Long Markdown lines wrap by default in the file editor ([#2459](https://github.com/getpaseo/paseo/pull/2459))
 
 ### Improved
 
-- Usage bars now warn as provider limits approach ([#2322](https://github.com/getpaseo/paseo/pull/2322) by [@cleiter](https://github.com/cleiter))
-- Oh My Pi advisor results now retain their structure and severity ([#2219](https://github.com/getpaseo/paseo/pull/2219) by [@ebg1223](https://github.com/ebg1223))
+- Desktop stops its managed daemon when you quit unless “Keep daemon running after quit” is enabled ([#2454](https://github.com/getpaseo/paseo/pull/2454))
+- Remote terminal and file traffic uses less bandwidth over encrypted connections ([#2480](https://github.com/getpaseo/paseo/pull/2480))
+- Workspace search now shows and matches project names ([#2345](https://github.com/getpaseo/paseo/pull/2345) by [@cleiter](https://github.com/cleiter))
+- Claude usage shows model-specific weekly limits ([#2303](https://github.com/getpaseo/paseo/pull/2303) by [@cleiter](https://github.com/cleiter))
+- OMP models show only the thinking levels they support ([#2171](https://github.com/getpaseo/paseo/pull/2171) by [@bendavid](https://github.com/bendavid))
 
 ### Fixed
 
-- Notifications now open the correct workspace and agent ([#2331](https://github.com/getpaseo/paseo/pull/2331))
-- Archived agents can be restored directly from History ([#2316](https://github.com/getpaseo/paseo/pull/2316))
-- CLI agent runs stay in the current workspace unless a new workspace is requested ([#2315](https://github.com/getpaseo/paseo/pull/2315))
-- Oh My Pi slash commands now include commands from every supported source ([#2175](https://github.com/getpaseo/paseo/pull/2175) by [@bendavid](https://github.com/bendavid))
-- Oh My Pi chats no longer stay stuck as running after delayed or incomplete completion events ([#2261](https://github.com/getpaseo/paseo/pull/2261), [#2282](https://github.com/getpaseo/paseo/pull/2282) by [@isac322](https://github.com/isac322))
+- Image uploads preserve the correct image format ([#2380](https://github.com/getpaseo/paseo/pull/2380))
+- Large file views no longer disconnect the session ([#2482](https://github.com/getpaseo/paseo/pull/2482))
+- Reaching the top of a chat loads the complete older history ([#2481](https://github.com/getpaseo/paseo/pull/2481))
+- Parent agents stay available while child agents are working ([#2458](https://github.com/getpaseo/paseo/pull/2458))
+- Stale client connections no longer exhaust daemon memory ([#2169](https://github.com/getpaseo/paseo/pull/2169))
+- Pin and unpin shortcuts work when sidebar sections are collapsed ([#2299](https://github.com/getpaseo/paseo/pull/2299) by [@cleiter](https://github.com/cleiter))
+- `Shift+Tab` no longer changes a background agent’s permission mode ([#1848](https://github.com/getpaseo/paseo/pull/1848) by [@cleiter](https://github.com/cleiter))
+- Proxied services preserve ports in redirects ([#2288](https://github.com/getpaseo/paseo/pull/2288) by [@cleiter](https://github.com/cleiter))
+- Provider settings open correctly above the model selector ([#2476](https://github.com/getpaseo/paseo/pull/2476))
+- Clicking the file editor correctly focuses its pane ([#2457](https://github.com/getpaseo/paseo/pull/2457))
 
-## 0.2.0-beta.2 - 2026-07-22
+## 0.2.2 - 2026-07-25
+
+### Fixed
+
+- Claude 5 models now use the correct context windows.
+
+## 0.2.1 - 2026-07-24
 
 ### Added
 
-- Edit files directly in the web and desktop apps ([#2270](https://github.com/getpaseo/paseo/pull/2270), [#2309](https://github.com/getpaseo/paseo/pull/2309))
-- Switch models from the Command Center for active agents and new drafts ([#2147](https://github.com/getpaseo/paseo/pull/2147) by [@kedrzu](https://github.com/kedrzu))
-- Configure workspace service ports with a fixed range or external allocator ([#2165](https://github.com/getpaseo/paseo/pull/2165) by [@mcowger](https://github.com/mcowger))
-- Search keyboard shortcuts by action, note, or key combination ([#2160](https://github.com/getpaseo/paseo/pull/2160))
-- Turn thinking off for supported Claude models ([#2257](https://github.com/getpaseo/paseo/pull/2257))
-- Use Pi's Max thinking level ([#2267](https://github.com/getpaseo/paseo/pull/2267) by [@ByteTrue](https://github.com/ByteTrue))
+- Claude Opus 5 is available
 
-### Improved
-
-- Improved parity of CLI and MCP tools for workspace, agent and schedule management ([#2186](https://github.com/getpaseo/paseo/pull/2186))
-- Pasted PR/MR links in the composer become auto-selected as a checkout option ([#2290](https://github.com/getpaseo/paseo/pull/2290))
-- Projects, workspaces and chat syncing is more efficient ([#2028](https://github.com/getpaseo/paseo/pull/2028), [#2185](https://github.com/getpaseo/paseo/pull/2185), [#2196](https://github.com/getpaseo/paseo/pull/2196), [#2206](https://github.com/getpaseo/paseo/pull/2206), [#2259](https://github.com/getpaseo/paseo/pull/2259), [#2263](https://github.com/getpaseo/paseo/pull/2263))
-- Make project creation more explicit ([#2098](https://github.com/getpaseo/paseo/pull/2098), [#2187](https://github.com/getpaseo/paseo/pull/2187))
-- Idle agents release processes automatically and resume when needed ([#2203](https://github.com/getpaseo/paseo/pull/2203), [#2209](https://github.com/getpaseo/paseo/pull/2209))
-- New Claude and Codex agents default to safer automatic approval modes when supported ([#2213](https://github.com/getpaseo/paseo/pull/2213))
-- Oh My Pi now supports Max thinking in imported and new sessions ([#2191](https://github.com/getpaseo/paseo/pull/2191) by [@mvanhorn](https://github.com/mvanhorn))
-- Commit history now includes recent pushed and base-branch commits ([#2312](https://github.com/getpaseo/paseo/pull/2312))
-- Permission and thinking changes made during a turn now show when they take effect ([#2201](https://github.com/getpaseo/paseo/pull/2201))
-
-### Fixed
-
-- Reused branches no longer attach an unrelated merged or closed pull request ([#2172](https://github.com/getpaseo/paseo/pull/2172) by [@nllptrx](https://github.com/nllptrx))
-- Pi compaction waits for long summaries instead of reporting a false timeout ([#2181](https://github.com/getpaseo/paseo/pull/2181) by [@jasonhnd](https://github.com/jasonhnd))
-- Pi chats keep new messages aligned with the correct history after an idle agent resumes ([#2313](https://github.com/getpaseo/paseo/pull/2313))
-- OpenCode follow-ups triggered by completed background work now remain visible ([#2258](https://github.com/getpaseo/paseo/pull/2258))
-- Codex no longer shows the parent agent as a phantom subagent ([#2214](https://github.com/getpaseo/paseo/pull/2214))
-- Local dictation now works in Nix-packaged installations ([#1587](https://github.com/getpaseo/paseo/pull/1587) by [@yhori991](https://github.com/yhori991))
-- The composer remains visible after submitting dictated text and returning to the app ([#2194](https://github.com/getpaseo/paseo/pull/2194))
-- Desktop's dictation shortcut remains responsive after finishing a recording ([#2268](https://github.com/getpaseo/paseo/pull/2268))
-- Projects can be renamed before their first workspace ([#2252](https://github.com/getpaseo/paseo/pull/2252) by [@albertodeago](https://github.com/albertodeago))
-- Settings keep showing a connected remote host when the local daemon is stopped ([#1749](https://github.com/getpaseo/paseo/pull/1749) by [@dwyanewang](https://github.com/dwyanewang))
-- Pinned workspaces no longer disappear briefly when reopening the compact sidebar ([#2210](https://github.com/getpaseo/paseo/pull/2210))
-- Session imports find older matches from the current workspace ([#2265](https://github.com/getpaseo/paseo/pull/2265) by [@nikuscs](https://github.com/nikuscs))
-
-## 0.2.0-beta.1 - 2026-07-17
+## 0.2.0 - 2026-07-24
 
 ### Added
 
 - Work with pull requests and merge requests from GitLab, Gitea, Forgejo, and Codeberg ([#1913](https://github.com/getpaseo/paseo/pull/1913) by [@nllptrx](https://github.com/nllptrx))
-- Use Oh My Pi as a native agent provider ([#2067](https://github.com/getpaseo/paseo/pull/2067) by [@ebg1223](https://github.com/ebg1223))
-- Browse branch commit history and open individual commit diffs from Changes ([#1534](https://github.com/getpaseo/paseo/pull/1534), [#2146](https://github.com/getpaseo/paseo/pull/2146) by [@adradr](https://github.com/adradr))
+- Edit files directly in the web and desktop apps ([#2270](https://github.com/getpaseo/paseo/pull/2270), [#2309](https://github.com/getpaseo/paseo/pull/2309), [#2277](https://github.com/getpaseo/paseo/pull/2277), [#2382](https://github.com/getpaseo/paseo/pull/2382) by [@dwyanewang](https://github.com/dwyanewang))
+- Oh My Pi (OMP) as a native agent provider ([#2067](https://github.com/getpaseo/paseo/pull/2067) by [@ebg1223](https://github.com/ebg1223))
+- Open the complete Changes view as a workspace tab ([#2298](https://github.com/getpaseo/paseo/pull/2298) by [@nikuscs](https://github.com/nikuscs))
+- Add files to chat directly from Files and Changes ([#2275](https://github.com/getpaseo/paseo/pull/2275) by [@nikuscs](https://github.com/nikuscs))
+- Browse workspace commit history and open individual commit diffs from Changes ([#1534](https://github.com/getpaseo/paseo/pull/1534), [#2146](https://github.com/getpaseo/paseo/pull/2146), [#2312](https://github.com/getpaseo/paseo/pull/2312) by [@adradr](https://github.com/adradr))
+- Switch models from the Command Center for active agents and new drafts ([#2147](https://github.com/getpaseo/paseo/pull/2147) by [@kedrzu](https://github.com/kedrzu))
+- Open existing agents from Paseo links or the CLI ([#2324](https://github.com/getpaseo/paseo/pull/2324))
+- Configure workspace service ports with a fixed range or external allocator ([#2165](https://github.com/getpaseo/paseo/pull/2165) by [@mcowger](https://github.com/mcowger))
+- Search keyboard shortcuts by action, note, or key combination ([#2160](https://github.com/getpaseo/paseo/pull/2160))
+- Turn thinking off for supported Claude models ([#2257](https://github.com/getpaseo/paseo/pull/2257))
+- Allow Pi's Max thinking level ([#2267](https://github.com/getpaseo/paseo/pull/2267) by [@ByteTrue](https://github.com/ByteTrue))
 - Open workspace files in more installed editors and file managers ([#2119](https://github.com/getpaseo/paseo/pull/2119))
 - Remove individual custom providers from Settings ([#1951](https://github.com/getpaseo/paseo/pull/1951))
 
 ### Improved
 
-- ACP provider catalog updated to the latest registry versions
+- Improved model selection on mobile ([#2361](https://github.com/getpaseo/paseo/pull/2361))
+- Selector popovers stay readable on iPad ([#2360](https://github.com/getpaseo/paseo/pull/2360) by [@yzim](https://github.com/yzim))
+- Projects, workspaces and chat syncing is more efficient ([#2028](https://github.com/getpaseo/paseo/pull/2028), [#2185](https://github.com/getpaseo/paseo/pull/2185), [#2196](https://github.com/getpaseo/paseo/pull/2196), [#2206](https://github.com/getpaseo/paseo/pull/2206), [#2259](https://github.com/getpaseo/paseo/pull/2259), [#2263](https://github.com/getpaseo/paseo/pull/2263))
+- CLI and MCP tools manage workspaces, agents, and schedules more consistently ([#2186](https://github.com/getpaseo/paseo/pull/2186))
+- Pasted PR/MR links in the composer become auto-selected as a checkout option ([#2290](https://github.com/getpaseo/paseo/pull/2290))
+- Make project creation more explicit ([#2098](https://github.com/getpaseo/paseo/pull/2098), [#2187](https://github.com/getpaseo/paseo/pull/2187))
+- Idle agents release processes automatically and resume when needed ([#2203](https://github.com/getpaseo/paseo/pull/2203), [#2209](https://github.com/getpaseo/paseo/pull/2209))
+- New Claude and Codex agents default to safer automatic approval modes when supported ([#2213](https://github.com/getpaseo/paseo/pull/2213))
+- Permission and thinking changes made during a turn now show when they take effect ([#2201](https://github.com/getpaseo/paseo/pull/2201))
+- Usage bars now warn as provider limits approach ([#2322](https://github.com/getpaseo/paseo/pull/2322) by [@cleiter](https://github.com/cleiter))
 - Workspace focus mode stays confined to the active workspace with a visible exit control ([#2151](https://github.com/getpaseo/paseo/pull/2151))
 - Desktop installs the newest available update instead of a cached older release ([#2149](https://github.com/getpaseo/paseo/pull/2149))
 - Remote daemon update failures now show specific recovery steps ([#2120](https://github.com/getpaseo/paseo/pull/2120))
@@ -80,12 +79,34 @@
 
 ### Fixed
 
+- Terminal pairing QR codes remain scannable in narrow terminals ([#2381](https://github.com/getpaseo/paseo/pull/2381))
+- Workspace creation stays responsive even with many active or archived workspaces ([#2355](https://github.com/getpaseo/paseo/pull/2355), [#2379](https://github.com/getpaseo/paseo/pull/2379))
+- Failed agent starts no longer leave provider processes running ([#2348](https://github.com/getpaseo/paseo/pull/2348) by [@dwyanewang](https://github.com/dwyanewang))
+- Completed OpenCode turns stay idle when late metadata updates arrive ([#2336](https://github.com/getpaseo/paseo/pull/2336) by [@mcowger](https://github.com/mcowger))
+- ACP image prompts no longer appear twice ([#2363](https://github.com/getpaseo/paseo/pull/2363))
+- Web chats stay pinned to the latest message at non-default browser zoom ([#2368](https://github.com/getpaseo/paseo/pull/2368))
+- Grouped tool-call loading animations display correctly ([#2369](https://github.com/getpaseo/paseo/pull/2369))
+- Notifications now open the correct workspace and agent ([#2331](https://github.com/getpaseo/paseo/pull/2331))
+- Archived agents can be restored directly from History ([#2316](https://github.com/getpaseo/paseo/pull/2316))
+- CLI agent runs stay in the current workspace unless a new workspace is requested ([#2315](https://github.com/getpaseo/paseo/pull/2315))
+- Reused branches no longer attach an unrelated merged or closed pull request ([#2172](https://github.com/getpaseo/paseo/pull/2172) by [@nllptrx](https://github.com/nllptrx))
+- Pi compaction waits for long summaries instead of reporting a false timeout ([#2181](https://github.com/getpaseo/paseo/pull/2181) by [@jasonhnd](https://github.com/jasonhnd))
+- Pi chats keep new messages aligned with the correct history after an idle agent resumes ([#2313](https://github.com/getpaseo/paseo/pull/2313))
+- OpenCode follow-ups triggered by completed background work now remain visible ([#2258](https://github.com/getpaseo/paseo/pull/2258))
+- Codex no longer shows the parent agent as a phantom subagent ([#2214](https://github.com/getpaseo/paseo/pull/2214))
+- Oh My Pi background notices appear as task notifications instead of raw system text ([#2218](https://github.com/getpaseo/paseo/pull/2218) by [@ebg1223](https://github.com/ebg1223))
+- Local dictation now works in Nix-packaged installations ([#1587](https://github.com/getpaseo/paseo/pull/1587) by [@yhori991](https://github.com/yhori991))
+- The composer remains visible after submitting dictated text and returning to the app ([#2194](https://github.com/getpaseo/paseo/pull/2194))
+- Desktop's dictation shortcut remains responsive after finishing a recording ([#2268](https://github.com/getpaseo/paseo/pull/2268))
+- Projects can be renamed before their first workspace ([#2252](https://github.com/getpaseo/paseo/pull/2252) by [@albertodeago](https://github.com/albertodeago))
+- Settings keep showing a connected remote host when the local daemon is stopped ([#1749](https://github.com/getpaseo/paseo/pull/1749) by [@dwyanewang](https://github.com/dwyanewang))
+- Pinned workspaces no longer disappear briefly when reopening the compact sidebar ([#2210](https://github.com/getpaseo/paseo/pull/2210))
 - Terminal panes no longer remain at 80x24 after focus or visibility changes ([#2059](https://github.com/getpaseo/paseo/pull/2059), [#2154](https://github.com/getpaseo/paseo/pull/2154) by [@cleiter](https://github.com/cleiter))
 - Sign-in popups in the desktop browser now complete successfully ([#2137](https://github.com/getpaseo/paseo/pull/2137))
 - Browser typing and shortcuts no longer submit the active Paseo prompt ([#1982](https://github.com/getpaseo/paseo/pull/1982))
 - Agent browser tabs remain controllable after switching workspaces ([#2156](https://github.com/getpaseo/paseo/pull/2156))
 - Archived workspaces now show the correct Unarchive or Restore action ([#2002](https://github.com/getpaseo/paseo/pull/2002))
-- Archived sessions can be reimported into the current workspace ([#2123](https://github.com/getpaseo/paseo/pull/2123))
+- Archived sessions can be reimported into the current workspace ([#2123](https://github.com/getpaseo/paseo/pull/2123), [#2265](https://github.com/getpaseo/paseo/pull/2265) by [@nikuscs](https://github.com/nikuscs))
 - Browser shortcuts no longer appear where browser tabs are unavailable ([#2116](https://github.com/getpaseo/paseo/pull/2116) by [@jasonhnd](https://github.com/jasonhnd))
 
 ## 0.1.110 - 2026-07-16

README.ja.md

@@ -151,23 +151,11 @@ npm run build:server
 npm run typecheck
 ```
 
-## コミュニティ
+## 関連プロジェクト
 
-- [paseo-relay](https://github.com/zenghongtu/paseo-relay) — Go 実装のセルフホスト型リレー
+- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — Elixir 製の公式分散リレー
 - [paseo-vscode](https://marketplace.visualstudio.com/items?itemName=hinnes.paseo-vscode) — VS Code 拡張機能
 
----
-
-<p align="center">
-  <a href="https://star-history.com/#getpaseo/paseo&Date">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date&theme=dark">
-      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date">
-      <img src="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date" alt="getpaseo/paseo のスター履歴チャート" width="600" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
 ## ライセンス
 
 AGPL-3.0

README.md

@@ -38,12 +38,6 @@
   <img src="https://paseo.sh/mobile-mockup.png" alt="Paseo mobile app" width="100%">
 </p>
 
-> [!NOTE]
-> I'm a solo maintainer and don't always keep up with GitHub Issues daily.
-> If something is urgent or blocking you, [Discord](https://discord.gg/jz8T2uahpH) is the fastest place to reach me.
-
----
-
 Run agents in parallel on your own machines. Ship from your phone or your desk.
 
 - **Self-hosted:** Agents run on your machine with your full dev environment. Use your tools, your configs, and your skills.
@@ -144,7 +138,7 @@ Quick monorepo package map:
 - `packages/app`: Expo client (iOS, Android, web)
 - `packages/cli`: `paseo` CLI for daemon and agent workflows
 - `packages/desktop`: Electron desktop app
-- `packages/relay`: Relay package for remote connectivity
+- `packages/relay`: Relay transport and encryption used by the daemon and clients
 - `packages/website`: Marketing site and documentation (`paseo.sh`)
 
 Common commands:
@@ -166,23 +160,11 @@ npm run build:server
 npm run typecheck
 ```
 
-## Community
+## Related projects
 
-- [paseo-relay](https://github.com/zenghongtu/paseo-relay) — self-hosted relay in Go
+- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — official distributed relay, written in Elixir
 - [paseo-vscode](https://marketplace.visualstudio.com/items?itemName=hinnes.paseo-vscode) — VS Code extension
 
----
-
-<p align="center">
-  <a href="https://star-history.com/#getpaseo/paseo&Date">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date&theme=dark">
-      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date">
-      <img src="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date" alt="Star history chart for getpaseo/paseo" width="600" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
 ## License
 
 AGPL-3.0

README.zh-CN.md

@@ -151,9 +151,9 @@ npm run build:server
 npm run typecheck
 ```
 
-## 社区
+## 相关项目
 
-- [paseo-relay](https://github.com/zenghongtu/paseo-relay) — Go 实现的自托管 relay
+- [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay) — 官方分布式 relay，使用 Elixir 编写
 - [paseo-vscode](https://marketplace.visualstudio.com/items?itemName=hinnes.paseo-vscode) — VS Code 扩展
 
 ### 自托管 relay TLS
@@ -202,18 +202,6 @@ server {
 }
 ```
 
----
-
-<p align="center">
-  <a href="https://star-history.com/#getpaseo/paseo&Date">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date&theme=dark">
-      <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date">
-      <img src="https://api.star-history.com/svg?repos=getpaseo/paseo&type=Date" alt="Star history chart for getpaseo/paseo" width="600" style="max-width: 100%;">
-    </picture>
-  </a>
-</p>
-
 ## License
 
 AGPL-3.0

SECURITY.md

@@ -22,7 +22,9 @@ The relay is designed to be untrusted. All traffic between your phone and daemon
 1. The daemon generates a persistent Curve25519 keypair on first run and stores it at `$PASEO_HOME/daemon-keypair.json` with mode `0600`
 2. The pairing URL (rendered as a QR code or opened directly) carries the daemon's public key in its URL fragment (`https://app.paseo.sh/#offer=...`). Fragments are not sent to the web server, so `app.paseo.sh` never sees the key.
 3. When the phone connects via the relay, it generates a fresh ephemeral Curve25519 keypair and sends an `e2ee_hello` message containing its public key. The daemon will not process any application messages until this handshake completes.
-4. Both sides perform a Curve25519 ECDH key exchange to derive a shared key. All subsequent messages are encrypted with XSalsa20-Poly1305 (NaCl `box`). The wire format is `[24-byte nonce][ciphertext]`, base64-encoded as a WebSocket text frame.
+4. Both sides perform a Curve25519 ECDH key exchange to derive a shared key. All subsequent messages are encrypted with XSalsa20-Poly1305 (NaCl `box`). The encrypted bundle is `[24-byte nonce][ciphertext]`. Peers optionally negotiate `binaryCiphertext` in `e2ee_hello` / `e2ee_ready`: negotiated application text is carried as a base64 WebSocket text frame, while application binary is carried as a raw WebSocket binary frame. A peer that does not negotiate the capability uses base64 text frames for both kinds.
+
+The WebSocket opcode is preserved end to end after negotiation; the receiver never guesses whether authenticated plaintext is text or binary from its byte contents. The plaintext handshake remains WebSocket text and contains only public keys and capability declarations.
 
 The relay sees only: IP addresses, timing, message sizes, session IDs, and the plaintext `e2ee_hello` / `e2ee_ready` handshake frames (which contain only public keys). It cannot read message contents, forge messages, or derive encryption keys from observing the handshake.
 

docs/agent-lifecycle.md

@@ -21,11 +21,12 @@ the agent runs through `ensureAgentLoaded()`, which resumes the durable provider
 same Paseo agent ID. Provider history is not appended again when the canonical timeline is already
 primed.
 
-The daemon collects an eligible idle runtime after two minutes and sweeps every 15 seconds. Only
+The daemon collects an eligible idle runtime after 30 minutes and sweeps every minute. Only
 unarchived, non-internal agents that are exactly `idle`, have no active or pending run, replacement,
 or permission, and have not been activated during the idle window are eligible. `running`,
-`initializing`, and `error` agents stay resident. Subagents are considered independently; collection
-does not cascade or change parentage.
+`initializing`, and `error` agents stay resident. An idle parent also stays resident while current
+in-memory state shows a running managed child or provider subagent. Otherwise agents are evaluated
+independently; collection does not cascade or change parentage.
 
 Active schedules targeting an existing agent protect that agent from collection. Paused, completed,
 and new-agent schedules do not. A pane may remain open after collection; its next prompt resumes the
@@ -83,9 +84,16 @@ only the route's explicit Unarchive or Restore action changes the archived works
 History navigation preserves the selected agent as an explicit recovery target. If both that agent
 and its workspace are archived, the workspace recovery action restores the workspace and unarchives
 the selected agent as one user action. Other archived agents in the restored workspace remain
-recoverable from History. Opening one pins its tab and renders the archived-agent callout before any
-provider timeline is loaded; **Unarchive** runs the provider's native unarchive hook (including Codex
-`thread/unarchive`) before the normal agent resume and timeline hydration flow.
+recoverable from History. Opening one pins its tab and renders the archived-agent callout. Authoritative
+timeline catch-up may load provider history with a runtime-only `history` resume purpose, which must
+leave both Paseo's `archivedAt` and the provider's native archive state unchanged. **Unarchive** remains
+the only transition back to an interactive runtime: it runs the provider's native unarchive hook
+(including Codex `thread/unarchive`) before the normal agent resume and timeline hydration flow.
+
+Provider session connection owns every process it spawns until the session is registered with
+`AgentManager`. If initialization, persisted-session resume, or initial history hydration fails,
+`connect()` must dispose that process before rethrowing; the manager cannot clean up a session it never
+received.
 
 ## Tabs vs archive
 

docs/android.md

@@ -27,13 +27,13 @@ The formula reserves three digits each for minor and patch. If either reaches `1
 
 ## Prerequisites (local dev)
 
-Local Android builds run on macOS (or Linux) and need the Android toolchain, pinned in `.tool-versions` (`java 21`, `android-sdk 21.0`) and wired up by `.mise.toml` (which sets `ANDROID_HOME` and puts `cmdline-tools/21.0/bin`, `platform-tools`, and `emulator` on `PATH`). With [mise](https://mise.jdx.dev):
+Local Android builds run on macOS (or Linux) and need the Android toolchain, pinned in `.tool-versions` (`java 21`, `android-sdk 21.0`) and wired up by `.mise.toml` (which derives `ANDROID_HOME` and the command-line tool paths from the `android-sdk` entry). With [mise](https://mise.jdx.dev):
 
 ```bash
 mise install        # java 21 + android-sdk 21.0 command-line tools
 ```
 
-> **Pin a real `android-sdk` version, not `latest`.** The mise `android-sdk` plugin's `latest` resolved to the ancient `1.0` bundle, whose `sdkmanager` (3.6.0) predates the `emulator` package and fails with `Failed to find package emulator`. `21.0` ships a current `sdkmanager`. If you bump it, update the version in `.tool-versions` and in all four paths in `.mise.toml`.
+> **Pin a real `android-sdk` version, not `latest`.** The mise `android-sdk` plugin's `latest` resolved to the ancient `1.0` bundle, whose `sdkmanager` (3.6.0) predates the `emulator` package and fails with `Failed to find package emulator`. `21.0` ships a current `sdkmanager`. If you bump it, update only the version in `.tool-versions`; `.mise.toml` derives its paths from that tool entry.
 
 `mise install` only lays down the command-line tools. Install the rest and create an emulator. On Apple Silicon:
 
@@ -120,6 +120,16 @@ PASEO_FDROID_BUILD=1 ./gradlew assembleRelease --no-daemon --max-workers=1 -Dorg
 
 The flag must be present for both prebuild and Gradle because Gradle starts Metro for the release bundle. Keep the source build serial and daemon-free as shown above: compiling every Expo module can exhaust memory when Gradle workers run in parallel. The profile enables source-built Expo modules, excludes the proprietary camera, Firebase notification, and Expo development-client native modules, disables EAS updates and Gradle dependency metadata, and substitutes JavaScript stubs for camera and notifications. The resulting app supports direct and pasted-link pairing but not QR scanning or push notifications.
 
+For a single-ABI APK, pass React Native's architecture property to Gradle:
+
+```bash
+PASEO_FDROID_BUILD=1 ./gradlew assembleRelease \
+  -PreactNativeArchitectures=arm64-v8a \
+  --no-daemon --max-workers=1 -Dorg.gradle.parallel=false
+```
+
+Supported values are `armeabi-v7a`, `arm64-v8a`, `x86`, and `x86_64`. The F-Droid profile filters native libraries to that ABI and changes the APK version code to `baseVersionCode * 10 + abiSuffix`, where the suffixes are ordered `1` through `4` in that same sequence. F-Droid metadata should use four build blocks with `VercodeOperation` entries `10 * %c + 1` through `10 * %c + 4` and pass the matching `reactNativeArchitectures` value in each build command. Builds without a single architecture keep the base version code.
+
 Keep the excluded npm packages installed. Normal builds use them, while the F-Droid profile removes only their Android native modules and config plugins. Paseo always applies `expo-gradle-jvmargs` with `-Xmx4096m` and `-XX:MaxMetaspaceSize=1024m` so local Expo prebuilds have enough Gradle heap whether they use precompiled AARs or source-built Expo modules.
 
 The EAS `production-apk` profile uses the large Android resource class. Release builds compile the native ABIs and run Hermes bundling in the same Gradle invocation; the default worker can exhaust its remaining memory and kill Hermes with exit code 137 even when Gradle's own heap is correctly sized.

docs/architecture.md

@@ -121,6 +121,7 @@ Commander.js CLI with Docker-style commands. Common agent operations are also ex
 - `paseo daemon start/stop/restart/status/pair/set-password`
 - `paseo chat ls/create/inspect/post/read/wait/delete`
 - `paseo terminal ls/create/capture/send-keys/kill`
+- `paseo script ls/start/stop`
 - `paseo loop run/ls/inspect/logs/stop`
 - `paseo schedule create/ls/inspect/update/pause/resume/run-once/logs/delete`
 - `paseo heartbeat create/update/delete`
@@ -132,16 +133,19 @@ Commander.js CLI with Docker-style commands. Common agent operations are also ex
 
 Communicates with the daemon via the same WebSocket protocol as the app.
 
-### `packages/relay` — E2E encrypted relay
+### `packages/relay` — Relay transport and E2E encryption
 
 Enables remote access when the daemon is behind a firewall.
 
 - Curve25519 ECDH key exchange + XSalsa20-Poly1305 (NaCl `box`) encryption
-- Relay server is zero-knowledge — it routes encrypted bytes, cannot read content
+- The relay is zero-knowledge — it routes encrypted bytes and cannot read content
 - Client and daemon channels with identical API (`createClientChannel`, `createDaemonChannel`)
 - Pairing via QR code transfers the daemon's public key to the client
+- Optional E2EE capability negotiation preserves application frame kind: text plaintext uses base64 ciphertext text frames, while binary plaintext uses raw ciphertext binary frames; mixed-version peers remain base64-only
 - Self-hosted relays opt into TLS with `daemon.relay.useTls` or `PASEO_RELAY_USE_TLS=true`; the public (client-facing) TLS setting can be overridden independently via `daemon.relay.publicUseTls` or `PASEO_RELAY_PUBLIC_USE_TLS`
 
+The production relay server lives in [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay). It is a distributed Elixir service. The Cloudflare relay implementation in this monorepo is retained as legacy code and is not deployed.
+
 See [SECURITY.md](../SECURITY.md) for the full threat model.
 
 ### Paseo Hub
@@ -208,7 +212,9 @@ There is no dedicated welcome message; the server emits a `status` session messa
 
 **Top-level WS envelopes** are `hello`, `recording_state`, `ping`/`pong`, and `session` (which wraps the rich union of session messages).
 
-Client liveness checks use the top-level JSON `ping`/`pong` envelope, not a session RPC and not RFC6455 protocol ping. The app runs through browser and React Native WebSocket APIs, which do not expose protocol ping, so this envelope is the portable way to test the direct or relay data path. Session RPC timeouts are operation failures and must not be treated as proof that the socket is dead.
+Client liveness checks use the top-level JSON `ping`/`pong` envelope, not a session RPC or RFC6455 control ping. Current clients ping every 10 seconds, beginning one interval after connecting. The first ping claims an application-ownership lease for that physical socket, all later inbound activity renews it, and the daemon forcibly terminates the socket if the lease expires. A legacy or raw socket that never sends an application ping never enters this lease and is not closed for omitting one. Session RPC timeouts are operation failures and must not be treated as proof that the socket is dead.
+
+Every physical send path enforces an 8 MiB outbound high-water mark, including JSON broadcasts, binary terminal frames, and the encrypted relay adapter's asynchronous queue. This sits above the terminal stream's 4 MiB soft backpressure threshold, leaving room for snapshot catch-up before the hard cutoff. JSON is serialized once per broadcast after sockets already at the limit are removed, then its exact byte length is checked for every remaining socket. A frame that would cross the limit is not sent; that physical socket is forcibly terminated without disturbing other sockets attached to the same logical session. Multiple tabs and simultaneous direct and relay paths may legitimately share a client id.
 
 Client session RPC waits default to 60s so slow relay or mobile networks do not turn a live but delayed daemon response into a false operation failure. Keep connect timeouts, app-level grace windows, explicit diagnostic latency probes, liveness ping timers, and genuinely long-running RPCs separate from this default.
 
@@ -246,6 +252,10 @@ Terminal I/O is sent as binary WebSocket frames decoded by `decodeTerminalStream
 Terminal PTY size is last-interacting-client-wins. A client claims the PTY size only when its terminal viewport genuinely changes size or the user focuses/taps the terminal. Passive rendering work — attaching, restoring visibility, font settling, renderer refits, or just looking at a visible terminal — must not send a resize frame. The server does not broadcast resize ownership; the resized PTY redraws through normal output, and every attached client renders that output in its own local viewport.
 
 There is also a separate file-transfer binary frame format in the same directory, used for download/upload streams.
+File downloads keep the existing `FileBegin`/`FileChunk`/`FileEnd` framing and stream 256 KiB chunks
+from one stable file handle. Each transfer awaits completion of its own physical WebSocket send before
+reading the next chunk; it is scoped to the requesting physical socket and does not queue unrelated
+messages or transfers.
 
 ### Compatibility rules
 
@@ -377,5 +387,5 @@ $PASEO_HOME/
 ## Deployment models
 
 1. **Local daemon** (default): `paseo daemon start` on `127.0.0.1:6767`
-2. **Managed desktop**: Electron app spawns daemon as subprocess
+2. **Managed desktop**: Electron app spawns daemon as subprocess, and stops it again on quit so that "restart the app" is a complete reset. Settings > Host > "Keep daemon running after quit" opts out. Only a daemon the desktop started is stopped — a daemon you started yourself with `paseo daemon start` is left alone (`paseo.pid` records `desktopManaged`).
 3. **Remote + relay**: Daemon behind firewall, relay bridges with E2E encryption

docs/docker.md

@@ -176,8 +176,9 @@ IPs and `localhost` are allowed by default.
 
 - Set `PASEO_PASSWORD` for any published port or network-reachable deployment.
 - Prefer HTTPS at the reverse proxy for direct browser access.
-- Use the Paseo relay for untrusted networks or mobile access when you do not
-  want to expose the daemon port directly.
+- Use the [official Paseo relay](https://github.com/getpaseo/paseo-relay) for
+  untrusted networks or mobile access when you do not want to expose the daemon
+  port directly.
 - The container is the isolation boundary for agents. Agents can read and write
   whatever you mount into `/workspace` and whatever credentials you place in
   `/home/paseo`.

docs/floating-panels.md

@@ -78,6 +78,29 @@ ordinary portals regardless of `z-index`, which would hide app toasts and
 tooltips behind the menu. The shared overlay scale keeps menus below toasts and
 lets tooltip portals paint above both.
 
+The shared overlay scale is relative for interactive surfaces: a base floating
+panel is below a base modal, while a floating panel rendered from inside a modal
+inherits that modal's layer and paints above it. Wrap portal content in
+`OverlayLayerProvider`; do not assign one global menu z-index. Desktop web
+comboboxes must use `overlay-root` too. Rendering them through React Native
+Web's `<Modal>` puts them in the browser top layer, where no ordinary modal
+portal can cover them.
+
+Painting and keyboard ownership use the same relative layer model. Register
+desktop modal, combobox, and dropdown focus scopes with `useWebOverlayRegistration`; the
+highest painted scope alone receives overlay keys, traps focus, and restores
+focus when it closes. Do not add component-local global Escape listeners: two
+stacked overlays would both close on one keypress.
+
+If an overlay is rendered by a global host rather than beneath its opener in
+the React tree, carry the opener's current layer through the host store and
+restore it with `OverlayLayerProvider`. Otherwise painting and keyboard
+ownership silently reset at the app root. When the opener is a global keyboard
+action and has no component context to carry, resolve the host layer with
+`useGlobalWebOverlayLayer` on its closed-to-open transition. It captures the
+current top registered layer before the new host joins the stack; do not give a
+global dialog a fixed root-derived modal layer.
+
 ## Gotcha 2 — Portal breaks lifecycle and coordinate-system inheritance
 
 A Portal escapes Android's hit-test, but it also escapes two things you were
@@ -129,6 +152,13 @@ lockstep, no re-measurement needed. Do not call
 can briefly report a stale nonzero height with closed progress, and the shared
 provider is where that is normalized.
 
+The provider also reconciles iOS from the controller's native `onEnd` event.
+The controller's stock iOS shared values update at move start and during an
+interactive move, but not at the terminal event, so JS contention can otherwise
+leave the last height/progress pair stuck in either the open or closed state.
+Keep that terminal reconciliation on the UI thread; a later focus or blur must
+not be required to repair the offset.
+
 Re-measure on `Keyboard.addListener('keyboardDidShow'|'keyboardDidHide')` only
 to refresh the snapshot if the keyboard was mid-transition when the popover
 opened.

docs/hub.md

@@ -45,8 +45,22 @@ replays the original prompt. A duplicate create returns the existing agent witho
 turn.
 
 Hub creates use the same agent creation path as trusted clients. They may select any existing
-worktree target shape and may request `autoArchive`. Worktree creation and terminal auto-archive use
-the shared workspace-aware lifecycle policy; Hub does not have a second launch or cleanup path.
+worktree target shape. Execution completion policy remains outside the daemon: a completed agent
+turn does not imply that the Hub execution is terminal.
+
+The Hub ends an execution by sending `hub.execution.control.request` with the durable execution ID
+and either `interrupt` or `archive`. The daemon resolves the agent from the authenticated daemon
+relationship plus that execution ID; callers cannot supply an agent ID or workspace path. Both
+actions are idempotent and continue to resolve from stored ownership after daemon restart.
+If no execution exists for that authenticated daemon and execution ID, interrupt and archive return
+success because the requested stopped or archived state already holds. An execution owned by another
+daemon is indistinguishable from a missing execution and is never exposed or affected.
+
+Interrupt uses the ordinary agent cancellation lifecycle. Archive first archives the owned agent.
+When that agent belongs to an active Paseo-owned worktree workspace, the daemon also archives the
+workspace through the shared workspace archive service, so the backing directory is removed only
+after its final active workspace reference disappears. Local and shared checkouts archive only the
+execution-owned agent.
 
 ## Disconnect and revocation
 

docs/product.md

@@ -43,7 +43,8 @@ This architecture means:
 
 - The daemon can run on any machine: laptop, VM, remote server
 - Multiple clients can connect simultaneously
-- Agents keep running when you close the app
+- Agents keep running when a client disconnects — the daemon owns them, not the client
+- Quitting the desktop app stops the daemon it started, so "restart the app" is a real fix; a daemon you run yourself is unaffected
 
 ## Target user
 

docs/release.md

@@ -78,7 +78,7 @@ This bumps the version across all workspaces, runs checks, publishes to npm, and
 
 The Docker workflow builds images from the checked-out source tree on pull requests and on `main` as non-publishing checks. Stable `vX.Y.Z` tag pushes publish `ghcr.io/getpaseo/paseo:X.Y.Z` and `ghcr.io/getpaseo/paseo:latest`; beta `vX.Y.Z-beta.N` tag pushes publish only `ghcr.io/getpaseo/paseo:X.Y.Z-beta.N` and never move `latest`.
 
-Relay deployment is manual-only while `relay.paseo.sh` bridges traffic to the Fly deployment. Releases and pushes to `main` do not deploy the Cloudflare relay worker. Deploy it explicitly with `gh workflow run deploy-relay.yml` only when the production bridge should change.
+The production relay is the Elixir service in [getpaseo/paseo-relay](https://github.com/getpaseo/paseo-relay), with its own deployment process. Paseo releases and pushes to this repository do not deploy it. The Cloudflare relay code and workflow in this repository are legacy and are not used in production.
 
 **Stable means stable.** If the user says "stable" or "ship stable", do not ask whether they want a beta first. They picked stable; treat it as a direct stable release. Only run the beta flow when the user explicitly says "beta".
 

docs/service-proxy.md

@@ -26,6 +26,18 @@ dev--feature-auth--miniweb.localhost
 
 Local and public routes use one combined leftmost label (`script--branch--project`). This keeps the hostname compatible with normal single-level wildcard DNS and TLS. If the combined label would exceed DNS's 63-character label limit, Paseo truncates it with a deterministic hash suffix to avoid collisions.
 
+## Managing workspace scripts
+
+Configured `paseo.json` scripts can be managed without addressing their backing terminal directly:
+
+```bash
+paseo script ls [--cwd <path> | --workspace <workspace-id>]
+paseo script start <name> [--cwd <path> | --workspace <workspace-id>]
+paseo script stop <name> [--cwd <path> | --workspace <workspace-id>]
+```
+
+The commands return the same script metadata shown by the workspace: lifecycle, service port, proxy URLs, health, exit code, and supervised terminal ID. `stop` terminates the managed terminal rather than only removing the proxy route, so normal script lifecycle cleanup remains authoritative. MCP exposes matching `list_workspace_scripts`, `start_workspace_script`, and `stop_workspace_script` tools; those require an explicit workspace ID.
+
 ## Configuration
 
 Add a `serviceProxy` block under `daemon` in `~/.paseo/config.json`:
@@ -95,6 +107,29 @@ server {
 }
 ```
 
+Nginx's `$host` drops the port. If you terminate on a non-default port, use `$http_host` instead so the port survives — that is what "forwards the `Host` header unchanged" means here.
+
+## Forwarded headers
+
+Paseo sets these when it forwards a request to a workspace service:
+
+| Header              | Value                                                                                                                                   |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `X-Forwarded-Host`  | The `Host` header verbatim, including the port when the client used one                                                                 |
+| `X-Forwarded-Proto` | The request scheme (`http` on the WebSocket upgrade path)                                                                               |
+| `X-Forwarded-For`   | The immediate peer address. Replaces any existing chain, so behind your own reverse proxy this is the proxy's address, not the client's |
+| `X-Forwarded-Port`  | The port from the `Host` header when it has one, otherwise whatever your proxy already set                                              |
+
+`X-Forwarded-Port` follows the same trust rule as `X-Forwarded-Host`: the authority Paseo observed wins. When the `Host` header carries a port, that port is reported and replaces any inbound `X-Forwarded-Port`, so a client cannot forge one. When `Host` carries no port there is nothing to observe, so a value your reverse proxy set survives untouched — that is the case where nginx's `$host` drops the port and `X-Forwarded-Port` is the only source. Paseo never derives the port from the scheme. Any other `X-Forwarded-*` header your proxy sends is passed through untouched.
+
+Services that build absolute URLs should prefer `Host` or `X-Forwarded-Host`.
+
+### The forwarded authority is not authenticated
+
+Route lookup normalizes the port away before matching a service hostname, so a client can address the daemon with any port in `Host` and still reach the service. That port is what lands in `X-Forwarded-Host` and `X-Forwarded-Port`. Paseo also does not check whether an inbound `X-Forwarded-Port` came from a proxy in `trustedProxies` — when `Host` carries no port, a client-supplied value is passed through.
+
+Treat the forwarded authority as client-influenced input. A service that builds password reset links, absolute redirects, or cached URLs from it should pin its own public origin in configuration rather than deriving one from request headers. This is not specific to `X-Forwarded-Port`: the `Host` header has always carried a client-chosen port.
+
 ## Environment variables
 
 The listen address and public base URL can also be set via environment variables, which take precedence over `config.json`:

docs/terminal-performance.md

@@ -32,9 +32,14 @@ Terminal frames share the daemon main event loop with all agent traffic. The `ev
 - **Browser perf specs (user-perceived path):** gated behind `PASEO_TERMINAL_PERF_E2E=1` —
   `packages/app/e2e/terminal-performance.spec.ts` and `packages/app/e2e/terminal-keystroke-stress.spec.ts` (per-stage keydown→xterm-commit breakdown under mock-agent load). Healthy: keydown→commit p50 ~18ms under 600-key burst.
 - **Production:** grep `daemon.log` for `ws_runtime_metrics` and read `eventLoopDelay` + `bufferedAmount`.
+- **Git pressure:** the same log line includes `git.commands` (limiter occupancy, queue age,
+  queue wait, execution time, failures, timeouts, and top operations),
+  `git.workspaceService` (daemon-global Git observer ownership), and per-session workspace Git
+  subscription totals under `runtime`. Queue wait and execution time are separate because the Git
+  command timeout begins only after a command acquires a limiter slot.
 
 ## Known remaining contention (follow-up candidates)
 
 - A single large `agent_stream` message (e.g. a 250KB diff payload) measurably delays terminal echo (~100ms-class dips) — cost is split between daemon serialization and app-side parse/render on the shared browser main thread.
-- Relay-attached clients pay pure-JS tweetnacl encryption + base64 per frame on the daemon main loop (`packages/relay/src/encrypted-channel.ts`).
+- Relay-attached clients pay pure-JS tweetnacl encryption on the daemon main loop (`packages/relay/src/encrypted-channel.ts`). Negotiated binary application frames stay binary ciphertext and avoid base64 encode/decode; text and mixed-version traffic remain base64 WebSocket text frames.
 - `sendToClient` re-stringifies session messages per socket; only matters for multi-socket connections.

nix/npm-deps.hash

@@ -1 +1 @@
-sha256-x6jiaw7zkCuBRlddLHD0tXQxolXwr7tzIQBfWu5xnUU=
+sha256-DaVBk1PxsNr1AQu/mTG1Inp67pLLDmc+Ed0IZ5GyzgY=

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "paseo",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -35211,7 +35211,7 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "@codemirror/commands": "6.10.4",
         "@codemirror/language": "6.12.4",
@@ -36236,18 +36236,19 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/client": "0.2.0-beta.3",
-        "@getpaseo/protocol": "0.2.0-beta.3",
-        "@getpaseo/server": "0.2.0-beta.3",
+        "@getpaseo/client": "0.2.3",
+        "@getpaseo/protocol": "0.2.3",
+        "@getpaseo/server": "0.2.3",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
         "tree-kill": "^1.2.2",
         "ws": "^8.14.2",
-        "yaml": "^2.8.4"
+        "yaml": "^2.8.4",
+        "zod": "^4.4.3"
       },
       "bin": {
         "paseo": "bin/paseo"
@@ -36487,10 +36488,10 @@
     },
     "packages/client": {
       "name": "@getpaseo/client",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
-        "@getpaseo/protocol": "0.2.0-beta.3",
-        "@getpaseo/relay": "0.2.0-beta.3",
+        "@getpaseo/protocol": "0.2.3",
+        "@getpaseo/relay": "0.2.3",
         "zod": "^4.4.3"
       },
       "devDependencies": {
@@ -36501,7 +36502,7 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@getpaseo/cli": "*",
@@ -36744,7 +36745,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "license": "MIT",
       "devDependencies": {
         "@types/jest": "^29.5.14",
@@ -37640,7 +37641,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "@codemirror/language": "6.12.4",
         "@codemirror/legacy-modes": "^6.5.3",
@@ -37872,7 +37873,7 @@
     },
     "packages/protocol": {
       "name": "@getpaseo/protocol",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "zod": "^4.4.3"
       },
@@ -37885,7 +37886,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -38103,15 +38104,15 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.17.1",
-        "@anthropic-ai/claude-agent-sdk": "^0.3.214",
+        "@anthropic-ai/claude-agent-sdk": "^0.3.220",
         "@anthropic-ai/sdk": "^0.104.2",
-        "@getpaseo/client": "0.2.0-beta.3",
-        "@getpaseo/highlight": "0.2.0-beta.3",
-        "@getpaseo/protocol": "0.2.0-beta.3",
-        "@getpaseo/relay": "0.2.0-beta.3",
+        "@getpaseo/client": "0.2.3",
+        "@getpaseo/highlight": "0.2.3",
+        "@getpaseo/protocol": "0.2.3",
+        "@getpaseo/relay": "0.2.3",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.14.46",
@@ -38155,22 +38156,22 @@
       }
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk/-/claude-agent-sdk-0.3.214.tgz",
-      "integrity": "sha512-wt5ImwhU+p259Zt4K/Q9v5xVi6ruxYO5+KFICyJxnjs/QFEClAeSRqhcXx1J8jgGfatPW1faw09hkm66680UjA==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk/-/claude-agent-sdk-0.3.220.tgz",
+      "integrity": "sha512-glc7SdwPkOkLw8oxwLo9PKTdLJGqW/PIR4urWXFoRtX9YllwozsEVc5Tc1+EvLSkfrsxPJqQWqOgpjUOQXf1oA==",
       "license": "SEE LICENSE IN README.md",
       "engines": {
         "node": ">=18.0.0"
       },
       "optionalDependencies": {
-        "@anthropic-ai/claude-agent-sdk-darwin-arm64": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-darwin-x64": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-linux-arm64": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-linux-arm64-musl": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-linux-x64": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-linux-x64-musl": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-win32-arm64": "0.3.214",
-        "@anthropic-ai/claude-agent-sdk-win32-x64": "0.3.214"
+        "@anthropic-ai/claude-agent-sdk-darwin-arm64": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-darwin-x64": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-linux-arm64": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-linux-arm64-musl": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-linux-x64": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-linux-x64-musl": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-win32-arm64": "0.3.220",
+        "@anthropic-ai/claude-agent-sdk-win32-x64": "0.3.220"
       },
       "peerDependencies": {
         "@anthropic-ai/sdk": ">=0.93.0",
@@ -38179,9 +38180,9 @@
       }
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-darwin-arm64": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-darwin-arm64/-/claude-agent-sdk-darwin-arm64-0.3.214.tgz",
-      "integrity": "sha512-vAAOeVtlXs3p7MpFVfvfu9ja32eaKtB+MDZnPxCbdzxJk5nofCHlNsHa1UJwXHOsP9lOnFYNIccYztsZ4DNaJA==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-darwin-arm64/-/claude-agent-sdk-darwin-arm64-0.3.220.tgz",
+      "integrity": "sha512-7VxlbEosK7DODiOnsjoVd0DSJzbnaPrM2jelMHI0y8zx1UnLS3WC6EFUXbvy74F2sXqEznh2tzn7EKWInaRN6Q==",
       "cpu": [
         "arm64"
       ],
@@ -38192,9 +38193,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-darwin-x64": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-darwin-x64/-/claude-agent-sdk-darwin-x64-0.3.214.tgz",
-      "integrity": "sha512-NTbV8U2yucxCWqEiDC7L0MUehNmd8x3Op8OGzLZRhMF3xmQBy2DxpXiNZgSwwKWNDC3HdgKmJM5ZBbT7XrF/0g==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-darwin-x64/-/claude-agent-sdk-darwin-x64-0.3.220.tgz",
+      "integrity": "sha512-X9RwDsSmbF6ultKZroaip+DL8WRgC64gHbrAwrRlAFSPNZV7zmJyP2ur8rW7KrxqmtuehdMMkw8+SAC/6hD2PA==",
       "cpu": [
         "x64"
       ],
@@ -38205,9 +38206,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-linux-arm64": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-arm64/-/claude-agent-sdk-linux-arm64-0.3.214.tgz",
-      "integrity": "sha512-KBCf+BlusG0ZcgvpjjHwv1kh+6WiR8vJbPjpR2udwkrtcQgKLN+24l+FeaQEzO2TL+ExCmM1KC4tNPvnPpy+tw==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-arm64/-/claude-agent-sdk-linux-arm64-0.3.220.tgz",
+      "integrity": "sha512-WkROPwWskqhKR9XgnmseHQ6rLi9zM9qt57IWoToIjL/eXOqDWipp7JXZ1L5ud+LrA42dunHPZfBwD/vXZ+A7LA==",
       "cpu": [
         "arm64"
       ],
@@ -38218,9 +38219,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-linux-arm64-musl": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-arm64-musl/-/claude-agent-sdk-linux-arm64-musl-0.3.214.tgz",
-      "integrity": "sha512-i06wQRsmevE7spY1ryYfs+NP+xdZ1FwAyTjDaF0k/xG+cgtzZYghTFUemdYF3GVwgWgpcava9GiCFDT3DoHI6w==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-arm64-musl/-/claude-agent-sdk-linux-arm64-musl-0.3.220.tgz",
+      "integrity": "sha512-OHoZOZ8Cf2TBr6oXIXPwyvUxj9jrq2w8E4poA8dMpacXszcPSPiCQCMuuOh4aWJzfeJE1+TtWxhKMVb2csXyZQ==",
       "cpu": [
         "arm64"
       ],
@@ -38231,9 +38232,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-linux-x64": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-x64/-/claude-agent-sdk-linux-x64-0.3.214.tgz",
-      "integrity": "sha512-vqadSceJkBKHaTUszxI35uTuECGWtsHWK/mOwIJ4b9DUtYYySz6EJEk4gHg4ccutisJ/oRVCpFXHIKFb+osrKw==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-x64/-/claude-agent-sdk-linux-x64-0.3.220.tgz",
+      "integrity": "sha512-tkTJFnpR9VifvWX2fmkCAPkT6+8Wk/gVu8B5jsVekKZPiZoWRHmMXO30BnZn+f0TZhgYP+82PSX3S8crH1kn+w==",
       "cpu": [
         "x64"
       ],
@@ -38244,9 +38245,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-linux-x64-musl": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-x64-musl/-/claude-agent-sdk-linux-x64-musl-0.3.214.tgz",
-      "integrity": "sha512-948RstHDhs0E69h+2dKYWIAL1kcwEme4zvtgNUwP8XpKXzWOhrTKmd6MAokHn25zwfuSx5d+HE0XHfFH6R4hLg==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-linux-x64-musl/-/claude-agent-sdk-linux-x64-musl-0.3.220.tgz",
+      "integrity": "sha512-K+FWj+LcGhC1Z7wqeWoLxm1iemcba5xKpLLFVwYm4V6HyMx3ruYd/2r2TiQtjT+JWeNFWIys0ScHiItR6vWAiA==",
       "cpu": [
         "x64"
       ],
@@ -38257,9 +38258,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-win32-arm64": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-win32-arm64/-/claude-agent-sdk-win32-arm64-0.3.214.tgz",
-      "integrity": "sha512-CEKlPFCPv+ee79utQMEDSsgeo2f27ulhNHpjrKIt1jXz5G04J7lAWN/QwvPDv9XaLBkWpyfqZWiPXlRcwuaO/w==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-win32-arm64/-/claude-agent-sdk-win32-arm64-0.3.220.tgz",
+      "integrity": "sha512-rIwgq0UwQExWl6KrHUyC4w5KwpL9l6nd95aUTx6RitexaAuEw//xtfTVLnuE4hDDQZFkzEwpdKc3nxDWoGcUbA==",
       "cpu": [
         "arm64"
       ],
@@ -38270,9 +38271,9 @@
       ]
     },
     "packages/server/node_modules/@anthropic-ai/claude-agent-sdk/node_modules/@anthropic-ai/claude-agent-sdk-win32-x64": {
-      "version": "0.3.214",
-      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-win32-x64/-/claude-agent-sdk-win32-x64-0.3.214.tgz",
-      "integrity": "sha512-cJMJfFoR9IWBZWnTtt9PnEm89hGOsZjoDNjOCEOF3+x+g/ANIXAjMJTcaQYv2HKh6MylWZ0AkxBASI+twkukaQ==",
+      "version": "0.3.220",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk-win32-x64/-/claude-agent-sdk-win32-x64-0.3.220.tgz",
+      "integrity": "sha512-MuOuXhbr66HlGaWXD2f3w0k2PsvmnbkwcUZ0dAe2poFLdl72GC2dapwwOBefxm9QmoNqk9+jmv/dSKGOVWyvLw==",
       "cpu": [
         "x64"
       ],
@@ -38648,7 +38649,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.2.0-beta.3",
+      "version": "0.2.3",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.29.1",
         "@cloudflare/workers-types": "^4.20260317.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.3",
   "private": true,
   "description": "Paseo: voice-controlled development environment for local AI coding agents",
   "keywords": [

packages/app/e2e/agent-timeline-pagination.spec.ts

@@ -1,7 +1,10 @@
 import { test } from "./fixtures";
 import {
+  expectLoadedTimelineDoesNotScroll,
   expectTimelinePromptNotMounted,
   expectTimelinePromptVisible,
+  holdNextOlderTimelinePage,
+  makeLoadedTimelineFitViewport,
   openAgentTimeline,
   scrollTimelineUntilOlderHistoryIsReachable,
   seedLongMockAgentTimeline,
@@ -25,4 +28,21 @@ test.describe("Agent timeline pagination", () => {
       await agent.cleanup();
     }
   });
+
+  test("loads older history when the initial page does not fill the viewport", async ({ page }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 30 });
+    try {
+      await makeLoadedTimelineFitViewport(page);
+      const olderPage = await holdNextOlderTimelinePage(page, agent);
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+      await expectLoadedTimelineDoesNotScroll(page);
+      await olderPage.expectLoading();
+      olderPage.release();
+      await expectTimelinePromptVisible(page, agent.oldestPrompt);
+    } finally {
+      await agent.cleanup();
+    }
+  });
 });

packages/app/e2e/bottom-sheet-reopen.spec.ts

@@ -123,4 +123,16 @@ test.describe("mobile bottom sheet reopen", () => {
       await openAndCloseModelSelectorTwice(page);
     });
   });
+
+  test("model selector closes after model selection", async ({ page }) => {
+    await withMobileMockAgent(page, async () => {
+      await openModelSelector(page);
+      const sheet = page.getByLabel("Bottom Sheet", { exact: true });
+
+      await sheet.getByText("Ten second stream", { exact: true }).click();
+
+      await expect(sheet).not.toBeVisible({ timeout: 10_000 });
+      await expect(page.getByRole("button", { name: /Ten second stream/ })).toBeVisible();
+    });
+  });
 });

packages/app/e2e/command-center-workspaces.spec.ts

@@ -55,9 +55,15 @@ test.describe("Command center workspaces", () => {
       );
       await expect(row).toBeVisible({ timeout: 30_000 });
       await expect(row).toContainText(WORKSPACE_TITLE);
-      await expect(row).toContainText(PRIMARY_HOST_LABEL);
       await expect(row).toContainText(WORKSPACE_BRANCH);
 
+      // The subtitle disambiguates by project: host · project · branch (multi-host).
+      const subtitle = row.getByTestId("command-center-workspace-subtitle");
+      await expect(subtitle).toContainText(PRIMARY_HOST_LABEL);
+      await expect(subtitle).toContainText(seeded.projectDisplayName);
+      await expect(subtitle).toContainText(WORKSPACE_BRANCH);
+
+      // The agent subtitle is unchanged by the shared-helper refactor.
       const agentRow = panel.getByTestId(`command-center-agent-${getServerId()}:${agent.id}`);
       await expect(agentRow).toContainText(AGENT_TITLE);
       await expect(agentRow).toContainText(PRIMARY_HOST_LABEL);
@@ -89,6 +95,10 @@ test.describe("Command center workspaces", () => {
       await expect(agentRow).toBeVisible();
       await expect(row).not.toBeVisible();
 
+      // The project name is now part of the workspace searchText.
+      await input.fill(seeded.projectDisplayName);
+      await expect(row).toBeVisible();
+
       await input.fill(AGENT_TITLE);
       await expect(agentRow).toBeVisible();
       await expect(row).not.toBeVisible();
@@ -103,4 +113,38 @@ test.describe("Command center workspaces", () => {
       await seeded.cleanup();
     }
   });
+
+  test("single-host workspace subtitle omits the host and shows project · branch", async ({
+    page,
+  }) => {
+    const seeded = await seedWorkspace({
+      repoPrefix: "command-center-workspace-single-",
+      title: WORKSPACE_TITLE,
+    });
+
+    try {
+      execFileSync("git", ["checkout", "-b", WORKSPACE_BRANCH], {
+        cwd: seeded.repoPath,
+        stdio: "ignore",
+      });
+      const refreshed = await seeded.client.checkoutRefresh(seeded.repoPath);
+      if (!refreshed.success) {
+        throw new Error(`Failed to refresh checkout: ${JSON.stringify(refreshed.error)}`);
+      }
+
+      // No secondary host: with a single host, the host label is gated away.
+      await gotoAppShell(page);
+
+      const panel = await openCommandCenter(page);
+      const row = panel.getByTestId(
+        `command-center-workspace-${getServerId()}:${seeded.workspaceId}`,
+      );
+      await expect(row).toBeVisible({ timeout: 30_000 });
+
+      const subtitle = row.getByTestId("command-center-workspace-subtitle");
+      await expect(subtitle).toHaveText(`${seeded.projectDisplayName} · ${WORKSPACE_BRANCH}`);
+    } finally {
+      await seeded.cleanup();
+    }
+  });
 });

packages/app/e2e/commit-diff-panel.spec.ts

@@ -5,6 +5,25 @@ import { test, expect } from "./fixtures";
 
 const COMMIT_SUBJECT = "Show commit timestamps";
 
+test("commit history explains when the workspace has no commits ahead of its base", async ({
+  page,
+  withWorkspace,
+}) => {
+  const workspace = await withWorkspace({ prefix: "commit-history-empty-workspace-" });
+  execFileSync("git", ["checkout", "-b", "feature"], { cwd: workspace.repoPath, stdio: "ignore" });
+  await workspace.navigateTo();
+
+  await page.getByRole("button", { name: "Open explorer" }).click();
+  const commitsSection = page.getByRole("button", { name: /Commits/i });
+  await expect(commitsSection).toBeVisible({ timeout: 30_000 });
+  await commitsSection.click();
+
+  await expect(page.getByTestId("commits-section-no-workspace-commits")).toHaveText(
+    "No commits ahead of main yet",
+    { timeout: 30_000 },
+  );
+});
+
 test("commit history shows dates and shares diff layout preferences", async ({
   page,
   withWorkspace,
@@ -23,6 +42,7 @@ test("commit history shows dates and shares diff layout preferences", async ({
     hasText: COMMIT_SUBJECT,
   });
   await expect(commitRow).toContainText(COMMIT_SUBJECT, { timeout: 30_000 });
+  await expect(page.locator('[data-testid^="commit-row-"]')).toHaveCount(1);
   await expect(commitRow).toContainText("Jan 15");
   await commitRow.click();
 

packages/app/e2e/file-editing.spec.ts

@@ -18,6 +18,14 @@ function editor(page: Page) {
   return page.getByTestId("file-source-editor").filter({ visible: true }).locator(".cm-content");
 }
 
+function hasHorizontalOverflow(element: HTMLElement): boolean {
+  return element.scrollWidth > element.clientWidth;
+}
+
+function fitsViewportWidth(element: HTMLElement): boolean {
+  return element.scrollWidth === element.clientWidth;
+}
+
 async function replaceEditorText(page: Page, content: string): Promise<void> {
   const contentElement = editor(page);
   await contentElement.click();
@@ -95,6 +103,34 @@ test.describe("CodeMirror workspace file editing", () => {
     }
   });
 
+  test("clicking the editor focuses its pane beside an agent", async ({ page }) => {
+    const target = "target.ts:42";
+    const session = await seedAgentWithFileLink(target);
+
+    try {
+      await page.setViewportSize({ width: 1280, height: 900 });
+      await openAgentRoute(page, session);
+
+      await page.getByRole("button", { name: "Split pane right" }).first().click();
+      await expect(page.getByTestId("workspace-tabs-row").filter({ visible: true })).toHaveCount(2);
+      await openWorkspaceFile(page, "target.ts");
+
+      await page
+        .getByTestId(`workspace-tab-agent_${session.agentId}`)
+        .filter({ visible: true })
+        .click();
+      await editor(page).click();
+      await page.keyboard.press("Alt+Shift+W");
+
+      await expect(page.getByTestId("workspace-tab-file_target.ts")).not.toBeVisible();
+      await expect(
+        page.getByTestId(`workspace-tab-agent_${session.agentId}`).filter({ visible: true }),
+      ).toBeVisible();
+    } finally {
+      await session.cleanup();
+    }
+  });
+
   test("shows the full file path and keeps editor controls stable", async ({
     page,
     withWorkspace,
@@ -174,6 +210,36 @@ test.describe("CodeMirror workspace file editing", () => {
     ).toHaveCSS("font-family", "monospace");
   });
 
+  test("wraps Markdown while source code remains horizontally scrollable", async ({
+    page,
+    withWorkspace,
+  }) => {
+    const workspace = await withWorkspace({ prefix: "file-editing-wrap-" });
+    const longLine = "word ".repeat(300);
+    await writeFile(path.join(workspace.repoPath, "notes.md"), `${longLine}\n`, "utf8");
+    await writeFile(
+      path.join(workspace.repoPath, "source.ts"),
+      `const value = "${longLine}";\n`,
+      "utf8",
+    );
+    await workspace.navigateTo();
+    await openWorkspaceFile(page, "notes.md");
+    await page.getByTestId("file-mode-source").click();
+
+    const markdownScroller = page
+      .getByTestId("file-source-editor")
+      .filter({ visible: true })
+      .locator(".cm-scroller");
+    await expect.poll(() => markdownScroller.evaluate(fitsViewportWidth)).toBe(true);
+
+    await openWorkspaceFile(page, "source.ts");
+    const sourceScroller = page
+      .getByTestId("file-source-editor")
+      .filter({ visible: true })
+      .locator(".cm-scroller");
+    await expect.poll(() => sourceScroller.evaluate(hasHorizontalOverflow)).toBe(true);
+  });
+
   test("autosaves, saves immediately, resolves conflicts, and restores live updates after reconnect", async ({
     page,
     withWorkspace,
@@ -239,6 +305,29 @@ test.describe("CodeMirror workspace file editing", () => {
     await expect(editor(page)).toContainText("const afterReconnect = 9;");
   });
 
+  test("preserves a UTF-8 BOM and uses the first line separator after saving", async ({
+    page,
+    withWorkspace,
+  }) => {
+    const workspace = await withWorkspace({ prefix: "file-editing-encoding-" });
+    const sourcePath = path.join(workspace.repoPath, "windows.ts");
+    await writeFile(
+      sourcePath,
+      Buffer.from("\uFEFFconst initial = true;\r\nconst mixed = true;\n", "utf8"),
+    );
+    await workspace.navigateTo();
+    await openWorkspaceFile(page, "windows.ts");
+
+    await replaceEditorText(page, "const saved = true;\nconst normalized = true;\n");
+    await editor(page).press("Control+s");
+
+    const expected = Buffer.from(
+      "\uFEFFconst saved = true;\r\nconst normalized = true;\r\n",
+      "utf8",
+    ).toString("hex");
+    await expect.poll(async () => (await readFile(sourcePath)).toString("hex")).toBe(expected);
+  });
+
   test("warns before closing a panel with an unsaved draft", async ({ page, withWorkspace }) => {
     const workspace = await withWorkspace({ prefix: "file-editing-draft-" });
     const sourcePath = path.join(workspace.repoPath, "draft.ts");

packages/app/e2e/helpers/agent-timeline-gate.ts

@@ -10,6 +10,11 @@ interface CreatedAgentTimelineGate {
   waitForForwardedResponse(): Promise<void>;
 }
 
+export interface AgentTimelineResponseGate {
+  release(): void;
+  waitForDelayedResponse(): Promise<void>;
+}
+
 function parseWebSocketJson(message: WebSocketMessage): unknown {
   const rawMessage = typeof message === "string" ? message : message.toString("utf8");
   try {
@@ -118,3 +123,53 @@ export async function delayCreatedAgentInitialTailResponse(
     waitForForwardedResponse: () => forwardedResponse,
   };
 }
+
+export async function delayAgentOlderTimelineResponse(
+  page: Page,
+  agentId: string,
+): Promise<AgentTimelineResponseGate> {
+  let releaseRequested = false;
+  let delayedResponseSeen = false;
+  const delayedForwards: Array<() => void> = [];
+  let resolveDelayedResponse: (() => void) | null = null;
+  const delayedResponse = new Promise<void>((resolve) => {
+    resolveDelayedResponse = resolve;
+  });
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    ws.onMessage((message) => {
+      server.send(message);
+    });
+    server.onMessage((message) => {
+      const sessionMessage = getSessionMessage(message);
+      const payload = sessionMessage ? getPayload(sessionMessage) : null;
+      if (
+        !delayedResponseSeen &&
+        sessionMessage?.type === "fetch_agent_timeline_response" &&
+        payload?.agentId === agentId &&
+        payload.direction === "before"
+      ) {
+        delayedResponseSeen = true;
+        resolveDelayedResponse?.();
+        if (releaseRequested) {
+          ws.send(message);
+          return;
+        }
+        delayedForwards.push(() => ws.send(message));
+        return;
+      }
+      ws.send(message);
+    });
+  });
+
+  return {
+    release() {
+      releaseRequested = true;
+      for (const forward of delayedForwards.splice(0)) {
+        forward();
+      }
+    },
+    waitForDelayedResponse: () => delayedResponse,
+  };
+}

packages/app/e2e/helpers/timeline-pagination.ts

@@ -1,5 +1,9 @@
 import { expect, type Page } from "@playwright/test";
 import { buildAgentRoute, seedMockAgentWorkspace, type MockAgentWorkspace } from "./mock-agent";
+import {
+  delayAgentOlderTimelineResponse,
+  type AgentTimelineResponseGate,
+} from "./agent-timeline-gate";
 
 interface LongTimelineAgentOptions {
   turns: number;
@@ -53,6 +57,39 @@ export async function expectTimelinePromptNotMounted(page: Page, prompt: string)
   await expect(page.getByText(prompt, { exact: true })).toHaveCount(0);
 }
 
+export async function makeLoadedTimelineFitViewport(page: Page): Promise<void> {
+  await page.setViewportSize({ width: 1280, height: 8_000 });
+}
+
+export async function expectLoadedTimelineDoesNotScroll(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await expect
+    .poll(async () =>
+      scroll.evaluate((element) => {
+        if (!(element instanceof HTMLElement)) {
+          throw new Error("Agent chat scroll element is not an HTMLElement");
+        }
+        return element.scrollHeight <= element.clientHeight;
+      }),
+    )
+    .toBe(true);
+}
+
+export async function holdNextOlderTimelinePage(
+  page: Page,
+  agent: LongTimelineAgent,
+): Promise<AgentTimelineResponseGate & { expectLoading(): Promise<void> }> {
+  const gate = await delayAgentOlderTimelineResponse(page, agent.agentId);
+  return {
+    ...gate,
+    async expectLoading() {
+      await gate.waitForDelayedResponse();
+      await expect(page.getByTestId("load-older-history-spinner")).toBeVisible();
+      await expectTimelinePromptNotMounted(page, agent.oldestPrompt);
+    },
+  };
+}
+
 export async function scrollTimelineToOldestLoadedEdge(page: Page): Promise<void> {
   const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
   await scroll.hover();

packages/app/e2e/new-workspace-codex-mode-preferences.spec.ts

@@ -100,11 +100,7 @@ async function selectMode(page: Page, label: string): Promise<void> {
   await expect(searchInput).toBeVisible({ timeout: 10_000 });
   await searchInput.fill(label);
 
-  const option = page
-    .getByRole("dialog")
-    .last()
-    .getByText(new RegExp(`^${escapeRegex(label)}$`, "i"))
-    .first();
+  const option = popup.getByText(new RegExp(`^${escapeRegex(label)}$`, "i")).first();
   await expect(option).toBeVisible({ timeout: 10_000 });
   await option.click({ force: true });
   await expect(searchInput).not.toBeVisible({ timeout: 5_000 });

packages/app/e2e/new-workspace-mode-cycle-safety.spec.ts

@@ -0,0 +1,146 @@
+import { expect, test, type Page } from "./fixtures";
+import { daemonWsRoutePattern } from "./helpers/daemon-port";
+import { openAgentRoute } from "./helpers/mock-agent";
+import { openGlobalNewWorkspaceComposer, selectNewWorkspaceProject } from "./helpers/new-workspace";
+import { seedWorkspace } from "./helpers/seed-client";
+import { getServerId } from "./helpers/server-id";
+
+const CREATE_AGENT_PREFERENCES_KEY = "@paseo:create-agent-preferences";
+
+type WebSocketMessage = string | Buffer;
+
+function parseWebSocketJson(message: WebSocketMessage): unknown {
+  const rawMessage = typeof message === "string" ? message : message.toString("utf8");
+  try {
+    return JSON.parse(rawMessage);
+  } catch {
+    return null;
+  }
+}
+
+function getSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
+  const envelope = parseWebSocketJson(message);
+  if (!envelope || typeof envelope !== "object") {
+    return null;
+  }
+  const maybeEnvelope = envelope as { type?: unknown; message?: unknown };
+  if (maybeEnvelope.type !== "session" || !maybeEnvelope.message) {
+    return null;
+  }
+  if (typeof maybeEnvelope.message !== "object") {
+    return null;
+  }
+  return maybeEnvelope.message as Record<string, unknown>;
+}
+
+// The draft mode control in New Workspace only mutates local form state; it never sends
+// set_agent_mode_request. So the only source of such a request while the New Workspace
+// composer is focused is a *live* agent's mode control. Recording those, keyed by agentId,
+// gives a direct signal that Shift+Tab leaked into a backgrounded agent.
+async function recordSetAgentModeRequests(page: Page): Promise<{
+  requestsForAgent(agentId: string): Array<{ agentId: string; modeId: string }>;
+}> {
+  const seen: Array<{ agentId: string; modeId: string }> = [];
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    ws.onMessage((message) => {
+      const sessionMessage = getSessionMessage(message);
+      if (sessionMessage?.type === "set_agent_mode_request") {
+        const agentId = typeof sessionMessage.agentId === "string" ? sessionMessage.agentId : "";
+        const modeId = typeof sessionMessage.modeId === "string" ? sessionMessage.modeId : "";
+        seen.push({ agentId, modeId });
+      }
+      server.send(message);
+    });
+    server.onMessage((message) => ws.send(message));
+  });
+  return {
+    requestsForAgent: (agentId: string) => seen.filter((request) => request.agentId === agentId),
+  };
+}
+
+async function seedCodexDefaultPreferences(page: Page, serverId: string): Promise<void> {
+  await page.addInitScript(
+    ({ preferencesKey, serverId: seededServerId }) => {
+      localStorage.setItem(
+        preferencesKey,
+        JSON.stringify({
+          serverId: seededServerId,
+          provider: "codex",
+          providerPreferences: {
+            codex: {
+              model: "gpt-5.4-mini",
+              mode: "auto",
+              thinkingByModel: { "gpt-5.4-mini": "low" },
+            },
+            mock: { model: "ten-second-stream" },
+          },
+        }),
+      );
+    },
+    { preferencesKey: CREATE_AGENT_PREFERENCES_KEY, serverId },
+  );
+}
+
+// Focus the New Workspace composer and cycle the execution mode with the keyboard.
+// Kept out of the test body so the test reads as intent rather than key mechanics.
+async function cycleNewWorkspaceMode(page: Page, presses: number): Promise<void> {
+  const composer = page.getByRole("textbox", { name: "Message agent..." });
+  await expect(composer).toBeVisible({ timeout: 30_000 });
+  await composer.click();
+  for (let i = 0; i < presses; i++) {
+    await page.keyboard.press("Shift+Tab");
+  }
+}
+
+test.describe("New Workspace mode cycle safety", () => {
+  test.describe.configure({ timeout: 240_000 });
+
+  // Regression guard for the P1 safety bug: cycling the execution mode with Shift+Tab in
+  // the New Workspace composer must never reach a backgrounded, still-mounted agent's mode
+  // control and silently change that (possibly running) agent's mode — e.g. into a
+  // permissive/bypass mode. See use-keyboard-action-handler.ts.
+  test("Shift+Tab in New Workspace never changes a backgrounded agent's mode", async ({ page }) => {
+    const serverId = getServerId();
+    const seeded = await seedWorkspace({ repoPrefix: "mode-cycle-safety-" });
+    await seedCodexDefaultPreferences(page, serverId);
+    const modeRequests = await recordSetAgentModeRequests(page);
+
+    try {
+      const agent = await seeded.client.createAgent({
+        provider: "codex",
+        cwd: seeded.repoPath,
+        workspaceId: seeded.workspaceId,
+        title: "mode cycle safety e2e",
+        modeId: "auto",
+        model: "gpt-5.4-mini",
+      });
+
+      // Mount the live agent tab: its mode control registers a mode-cycle keyboard handler.
+      await openAgentRoute(page, { workspaceId: seeded.workspaceId, agentId: agent.id });
+      await expect(page.getByTestId("mode-control").first()).toContainText("Default permissions", {
+        timeout: 30_000,
+      });
+
+      // Move to the New Workspace composer. The agent tab stays mounted in the background,
+      // so its handler is still registered when we cycle here.
+      await openGlobalNewWorkspaceComposer(page);
+      await selectNewWorkspaceProject(page, {
+        projectKey: seeded.projectId,
+        projectDisplayName: seeded.projectDisplayName,
+      });
+
+      await cycleNewWorkspaceMode(page, 6);
+
+      // fetchAgents is a real daemon round-trip; once it resolves, any mode change the
+      // presses would have triggered has already landed. Assert the running agent is
+      // untouched — both its committed mode and on the wire — with no fixed sleep.
+      const agents = await seeded.client.fetchAgents();
+      const backgroundAgent = agents.entries.find((entry) => entry.agent.id === agent.id)?.agent;
+      expect(backgroundAgent?.currentModeId).toBe("auto");
+      expect(modeRequests.requestsForAgent(agent.id)).toEqual([]);
+    } finally {
+      await seeded.cleanup();
+    }
+  });
+});

packages/app/e2e/provider-settings-refresh.spec.ts

@@ -1,3 +1,4 @@
+import type { Locator } from "@playwright/test";
 import { expect, test, type Page } from "./fixtures";
 import { expectComposerVisible } from "./helpers/composer";
 import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
@@ -63,6 +64,33 @@ async function closeSheetByHeaderButton(page: Page, testId: string) {
   await expect(sheet).not.toBeVisible({ timeout: 10_000 });
 }
 
+async function expectOverlayAbove(page: Page, frontTestId: string, backTestId: string) {
+  const frontCoversBack = await page.evaluate(
+    ({ frontTestId: frontId, backTestId: backId }) => {
+      const front = document.querySelector(`[data-testid="${frontId}"]`);
+      const back = document.querySelector(`[data-testid="${backId}"]`);
+      if (!(front instanceof HTMLElement) || !(back instanceof HTMLElement)) return false;
+
+      const frontRect = front.getBoundingClientRect();
+      const backRect = back.getBoundingClientRect();
+      const left = Math.max(frontRect.left, backRect.left);
+      const right = Math.min(frontRect.right, backRect.right);
+      const top = Math.max(frontRect.top, backRect.top);
+      const bottom = Math.min(frontRect.bottom, backRect.bottom);
+      if (left >= right || top >= bottom) return false;
+
+      const topElement = document.elementFromPoint((left + right) / 2, (top + bottom) / 2);
+      return topElement != null && front.contains(topElement);
+    },
+    { frontTestId, backTestId },
+  );
+  expect(frontCoversBack).toBe(true);
+}
+
+async function hasFocusWithin(locator: Locator): Promise<boolean> {
+  return locator.evaluate((element) => element.contains(document.activeElement));
+}
+
 async function expectProviderSettingsVisible(page: Page) {
   await expect(page.getByTestId("provider-settings-sheet")).toBeVisible({ timeout: 10_000 });
   await expect(page.getByRole("button", { name: "Add model" })).toBeVisible();
@@ -89,7 +117,69 @@ async function exerciseProviderSettingsStack(page: Page) {
   await expectProviderSettingsVisible(page);
 }
 
-test.describe("provider settings bottom-sheet stack", () => {
+test.describe("provider settings overlay stack", () => {
+  test("provider settings covers the desktop model selector without closing it", async ({
+    page,
+  }) => {
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "provider-modal-layer-",
+      title: "Provider modal layer e2e",
+    });
+
+    try {
+      await openAgentRoute(page, session);
+      await expectComposerVisible(page);
+
+      await page.getByRole("button", { name: /Select model/ }).click();
+      const selector = page.getByTestId("combobox-desktop-container");
+      await expect(selector).toBeVisible({ timeout: 10_000 });
+      const searchInput = page.getByRole("textbox", { name: /search models/i });
+      await expect(searchInput).toBeFocused();
+      await page.keyboard.press("Shift+Tab");
+      await expect.poll(() => hasFocusWithin(selector)).toBe(true);
+
+      await page.keyboard.press("Shift+?");
+      const shortcuts = page.getByTestId("keyboard-shortcuts-dialog");
+      await expect(shortcuts).toBeVisible({ timeout: 10_000 });
+      await expect(page.getByPlaceholder("Search shortcuts")).toBeFocused();
+      await page.keyboard.press("Escape");
+      await expect(shortcuts).not.toBeVisible({ timeout: 10_000 });
+      await expect(selector).toBeVisible();
+
+      await page.keyboard.press("ControlOrMeta+K");
+      const commandCenter = page.getByTestId("command-center-panel");
+      await expect(commandCenter).toBeVisible({ timeout: 10_000 });
+      await expect(commandCenter.getByTestId("command-center-input")).toBeFocused();
+      await page.keyboard.press("Escape");
+      await expect(commandCenter).not.toBeVisible({ timeout: 10_000 });
+      await expect(selector).toBeVisible();
+
+      await page.keyboard.press("ControlOrMeta+K");
+      await expect(commandCenter).toBeVisible({ timeout: 10_000 });
+      await commandCenter.getByText("Add project", { exact: true }).click();
+      const addProject = page.getByTestId("add-project-flow");
+      await expect(addProject).toBeVisible({ timeout: 10_000 });
+      await expect(addProject.getByTestId("add-project-flow-input")).toBeFocused();
+      await page.keyboard.press("Escape");
+      await expect(addProject).not.toBeVisible({ timeout: 10_000 });
+      await expect(selector).toBeVisible();
+
+      const settingsButton = page.getByTestId("selector-header-settings-mock");
+      await settingsButton.click();
+
+      const settings = page.getByTestId("provider-settings-sheet");
+      await expect(settings).toBeVisible({ timeout: 10_000 });
+      await expectOverlayAbove(page, "provider-settings-sheet", "combobox-desktop-container");
+
+      await page.keyboard.press("Escape");
+      await expect(settings).not.toBeVisible({ timeout: 10_000 });
+      await expect(selector).toBeVisible();
+      await expect(settingsButton).toBeFocused();
+    } finally {
+      await session.cleanup();
+    }
+  });
+
   test("provider settings and children close back through the model selector stack", async ({
     page,
   }) => {

packages/app/e2e/sidebar-workspace-pin-shortcut.spec.ts

@@ -0,0 +1,266 @@
+import { test, expect, type Page } from "./fixtures";
+import { gotoAppShell } from "./helpers/app";
+import { daemonWsRoutePattern } from "./helpers/daemon-port";
+import { seedWorkspace, type SeededWorkspace } from "./helpers/seed-client";
+import { getServerId } from "./helpers/server-id";
+
+// The pin shortcut used to be registered by the sidebar row itself, so it silently did nothing
+// whenever the row was unmounted — a collapsed project section being the common case. It now
+// lives in a single always-mounted handler keyed on the active route selection.
+const PIN_SHORTCUT = "ControlOrMeta+Shift+P";
+
+function workspaceRow(page: Page, workspaceId: string) {
+  return page.getByTestId(`sidebar-workspace-row-${getServerId()}:${workspaceId}`);
+}
+
+function pinnedSection(page: Page) {
+  return page.getByTestId("sidebar-pinned-section");
+}
+
+// Opens the workspace so it becomes the active route selection, which is what the shortcut acts on.
+async function openWorkspace(page: Page, workspaceId: string) {
+  const row = workspaceRow(page, workspaceId);
+  await expect(row).toBeVisible({ timeout: 30_000 });
+  await row.click();
+  await expect(page).toHaveURL(/\/workspace\//, { timeout: 30_000 });
+}
+
+// The project key is host-scoped and not exposed by the seed helper, so the header is addressed by
+// its display name, scoped to project rows so a workspace row can never match. Pressing the header
+// toggles the section, which unmounts every workspace row under it.
+async function collapseProjectSection(page: Page, project: SeededWorkspace): Promise<void> {
+  const header = page
+    .locator('[data-testid^="sidebar-project-row-"]')
+    .filter({ hasText: project.projectDisplayName });
+  await expect(header).toHaveCount(1, { timeout: 30_000 });
+
+  await header.click();
+  await expect(workspaceRow(page, project.workspaceId)).toHaveCount(0, { timeout: 10_000 });
+}
+
+async function switchToStatusGrouping(page: Page): Promise<void> {
+  await page.getByTestId("sidebar-display-preferences-menu").click();
+  await page.getByTestId("sidebar-grouping-status").click();
+  await expect(page.getByTestId("sidebar-status-list-scroll")).toBeVisible({ timeout: 10_000 });
+}
+
+// Status mode buckets workspaces by state rather than project, so the group holding this workspace
+// is discovered from the rows container it sits in rather than assumed.
+async function collapseStatusGroupContaining(page: Page, workspaceId: string): Promise<void> {
+  const rows = page
+    .locator('[data-testid^="sidebar-status-group-rows-"]')
+    .filter({ has: workspaceRow(page, workspaceId) });
+  await expect(rows).toHaveCount(1, { timeout: 30_000 });
+
+  const rowsTestId = await rows.getAttribute("data-testid");
+  const bucket = rowsTestId?.replace("sidebar-status-group-rows-", "");
+  expect(bucket).toBeTruthy();
+
+  await page.getByTestId(`sidebar-status-group-${bucket}`).click();
+  await expect(workspaceRow(page, workspaceId)).toHaveCount(0, { timeout: 10_000 });
+}
+
+function readSessionMessage(
+  message: string | Buffer,
+): { type?: unknown; requestId?: unknown } | null {
+  const raw = typeof message === "string" ? message : message.toString("utf8");
+  try {
+    const envelope = JSON.parse(raw) as { type?: unknown; message?: unknown };
+    if (envelope.type !== "session" || typeof envelope.message !== "object") {
+      return null;
+    }
+    return envelope.message as { type?: unknown; requestId?: unknown };
+  } catch {
+    return null;
+  }
+}
+
+const PIN_REJECTION_MESSAGE = "Pin rejected by test.";
+
+interface PinRpcGate {
+  /** Pin requests the client has sent so far. */
+  sentCount(): number;
+}
+
+// Proxies everything so the app boots against the real daemon, counting pin RPCs and optionally
+// rejecting the first `rejectFirst` of them. The count asserts how many pins one keypress actually
+// dispatched, which the rendered pin state cannot show — a toggle that fired twice lands back
+// where it started.
+async function installPinRpcGate(
+  page: Page,
+  options: { rejectFirst?: number } = {},
+): Promise<PinRpcGate> {
+  const rejectFirst = options.rejectFirst ?? 0;
+  let sent = 0;
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+
+    ws.onMessage((message) => {
+      const sessionMessage = readSessionMessage(message);
+      if (
+        sessionMessage?.type === "workspace.pin.set.request" &&
+        typeof sessionMessage.requestId === "string"
+      ) {
+        sent += 1;
+        if (sent <= rejectFirst) {
+          ws.send(
+            JSON.stringify({
+              type: "session",
+              message: {
+                type: "rpc_error",
+                payload: {
+                  requestId: sessionMessage.requestId,
+                  requestType: "workspace.pin.set.request",
+                  error: PIN_REJECTION_MESSAGE,
+                  code: "transport",
+                },
+              },
+            }),
+          );
+          return;
+        }
+      }
+
+      try {
+        server.send(message);
+      } catch {
+        // server socket already closed
+      }
+    });
+
+    server.onMessage((message) => {
+      try {
+        ws.send(message);
+      } catch {
+        // client socket already closed
+      }
+    });
+  });
+
+  return { sentCount: () => sent };
+}
+
+test.describe("Pin workspace shortcut", () => {
+  test("pins the active workspace while its project section is collapsed", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "pin-shortcut-collapsed-" });
+
+    try {
+      await gotoAppShell(page);
+      await openWorkspace(page, workspace.workspaceId);
+      await collapseProjectSection(page, workspace);
+
+      await page.keyboard.press(PIN_SHORTCUT);
+
+      await expect(pinnedSection(page)).toBeVisible({ timeout: 10_000 });
+      await expect(
+        pinnedSection(page).getByTestId(
+          `sidebar-workspace-row-${getServerId()}:${workspace.workspaceId}`,
+        ),
+      ).toBeVisible();
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+
+  test("unpins the active workspace while the Pinned section is collapsed", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "pin-shortcut-unpin-" });
+
+    try {
+      await gotoAppShell(page);
+      await openWorkspace(page, workspace.workspaceId);
+
+      await page.keyboard.press(PIN_SHORTCUT);
+      await expect(pinnedSection(page)).toBeVisible({ timeout: 10_000 });
+
+      await page.getByTestId("sidebar-pinned-section-header").click();
+      await expect(workspaceRow(page, workspace.workspaceId)).toHaveCount(0, { timeout: 10_000 });
+
+      await page.keyboard.press(PIN_SHORTCUT);
+
+      await expect(pinnedSection(page)).toHaveCount(0, { timeout: 10_000 });
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+
+  test("sends exactly one pin RPC per press when the row is rendered and selected", async ({
+    page,
+  }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "pin-shortcut-expanded-" });
+
+    try {
+      const gate = await installPinRpcGate(page);
+
+      await gotoAppShell(page);
+      await openWorkspace(page, workspace.workspaceId);
+
+      await page.keyboard.press(PIN_SHORTCUT);
+      await expect(pinnedSection(page)).toBeVisible({ timeout: 10_000 });
+      // Counting frames catches a press that produces zero or two RPCs — a misfiring in-flight
+      // guard, or a second dispatch path. It cannot detect a duplicate handler registration:
+      // `keyboardActionDispatcher.dispatch` returns at the first handler that returns true, so a
+      // shadowed second handler is unobservable from outside by design.
+      expect(gate.sentCount()).toBe(1);
+
+      await page.keyboard.press(PIN_SHORTCUT);
+      await expect(pinnedSection(page)).toHaveCount(0, { timeout: 10_000 });
+      expect(gate.sentCount()).toBe(2);
+      await expect(workspaceRow(page, workspace.workspaceId)).toHaveCount(1);
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+
+  test("pins the active workspace while its status group is collapsed", async ({ page }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "pin-shortcut-status-" });
+
+    try {
+      await gotoAppShell(page);
+      await openWorkspace(page, workspace.workspaceId);
+      await switchToStatusGrouping(page);
+      await collapseStatusGroupContaining(page, workspace.workspaceId);
+
+      await page.keyboard.press(PIN_SHORTCUT);
+
+      await expect(pinnedSection(page)).toBeVisible({ timeout: 10_000 });
+      await expect(
+        pinnedSection(page).getByTestId(
+          `sidebar-workspace-row-${getServerId()}:${workspace.workspaceId}`,
+        ),
+      ).toBeVisible();
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+
+  test("shows an error toast when the host rejects the pin, and the next press succeeds", async ({
+    page,
+  }) => {
+    const workspace = await seedWorkspace({ repoPrefix: "pin-shortcut-failure-" });
+
+    try {
+      const gate = await installPinRpcGate(page, { rejectFirst: 1 });
+
+      await gotoAppShell(page);
+      await openWorkspace(page, workspace.workspaceId);
+
+      await page.keyboard.press(PIN_SHORTCUT);
+
+      await expect(page.getByTestId("app-toast-message")).toContainText(PIN_REJECTION_MESSAGE, {
+        timeout: 10_000,
+      });
+      await expect(pinnedSection(page)).toHaveCount(0);
+      await expect(workspaceRow(page, workspace.workspaceId)).toHaveCount(1);
+
+      // The failure must leave the action usable: the in-flight guard has to release the key so a
+      // retry is not swallowed. Without that release the workspace is unpinnable for the session.
+      await page.keyboard.press(PIN_SHORTCUT);
+
+      await expect(pinnedSection(page)).toBeVisible({ timeout: 10_000 });
+      expect(gate.sentCount()).toBe(2);
+    } finally {
+      await workspace.cleanup();
+    }
+  });
+});

packages/app/e2e/tool-call-shimmer.spec.ts

@@ -0,0 +1,238 @@
+import type { Locator, Page } from "@playwright/test";
+import { test, expect } from "./fixtures";
+import { daemonWsRoutePattern } from "./helpers/daemon-port";
+import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+
+type WebSocketMessage = string | Buffer;
+
+interface ShimmerEvidence {
+  animationDuration: string;
+  endPx: number;
+  label: string;
+  renderedWidth: number;
+  startPx: number;
+}
+
+function parseSessionMessage(message: WebSocketMessage): Record<string, unknown> | null {
+  const raw = typeof message === "string" ? message : message.toString("utf8");
+  try {
+    const envelope = JSON.parse(raw) as { type?: unknown; message?: unknown };
+    return envelope.type === "session" && envelope.message && typeof envelope.message === "object"
+      ? (envelope.message as Record<string, unknown>)
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function getToolCallStatus(
+  message: WebSocketMessage,
+  agentId: string,
+): { callId: string; status: string } | null {
+  const sessionMessage = parseSessionMessage(message);
+  if (sessionMessage?.type !== "agent_stream") {
+    return null;
+  }
+  const payload = sessionMessage.payload as Record<string, unknown> | undefined;
+  if (payload?.agentId !== agentId) {
+    return null;
+  }
+  const event = payload.event as Record<string, unknown> | undefined;
+  const item = event?.item as Record<string, unknown> | undefined;
+  return event?.type === "timeline" &&
+    item?.type === "tool_call" &&
+    typeof item.callId === "string" &&
+    typeof item.status === "string"
+    ? { callId: item.callId, status: item.status }
+    : null;
+}
+
+function replaceToolCallStatus(message: WebSocketMessage, status: string): string {
+  const raw = typeof message === "string" ? message : message.toString("utf8");
+  const envelope = JSON.parse(raw) as {
+    message?: { payload?: { event?: { item?: { status?: string } } } };
+  };
+  const item = envelope.message?.payload?.event?.item;
+  if (!item) {
+    throw new Error("Expected a tool-call session message");
+  }
+  item.status = status;
+  return JSON.stringify(envelope);
+}
+
+async function gateSecondToolCall(page: Page, agentId: string) {
+  let firstCallId: string | null = null;
+  let secondCallId: string | null = null;
+  let secondRunningMessage: WebSocketMessage | null = null;
+  let releaseSecondRequested = false;
+  let pauseServerMessages = false;
+  let secondRunningForwarded = false;
+  let forwardSecondRunning: (() => void) | null = null;
+  let resolveFirstCompleted!: () => void;
+  let resolveSecondRunning!: () => void;
+  const firstCompleted = new Promise<void>((resolve) => {
+    resolveFirstCompleted = resolve;
+  });
+  const secondRunning = new Promise<void>((resolve) => {
+    resolveSecondRunning = resolve;
+  });
+
+  await page.routeWebSocket(daemonWsRoutePattern(), (ws) => {
+    const server = ws.connectToServer();
+    forwardSecondRunning = () => {
+      if (!secondRunningMessage || secondRunningForwarded) {
+        return;
+      }
+      ws.send(secondRunningMessage);
+      secondRunningForwarded = true;
+    };
+    ws.onMessage((message) => server.send(message));
+    server.onMessage((message) => {
+      if (pauseServerMessages) {
+        return;
+      }
+
+      const toolCall = getToolCallStatus(message, agentId);
+      if (!toolCall) {
+        ws.send(message);
+        return;
+      }
+      if (!firstCallId) {
+        firstCallId = toolCall.callId;
+      }
+      if (toolCall.callId === firstCallId) {
+        if (toolCall.status === "running" || toolCall.status === "executing") {
+          return;
+        }
+        if (toolCall.status === "completed") {
+          // The mock tool completes inside the daemon's coalescing window, so the
+          // browser naturally receives its authoritative completed state first.
+          ws.send(message);
+          resolveFirstCompleted();
+          return;
+        }
+      }
+
+      secondCallId ??= toolCall.callId;
+      if (
+        toolCall.callId === secondCallId &&
+        (toolCall.status === "running" || toolCall.status === "executing")
+      ) {
+        secondRunningMessage = message;
+        pauseServerMessages = true;
+        resolveSecondRunning();
+        if (releaseSecondRequested) {
+          forwardSecondRunning?.();
+        }
+        return;
+      }
+
+      if (toolCall.callId === secondCallId && toolCall.status === "completed") {
+        // Keep the second real tool call inspectably active. Production providers
+        // send this same status shape while their work remains in flight.
+        secondRunningMessage = replaceToolCallStatus(message, "running");
+        pauseServerMessages = true;
+        resolveSecondRunning();
+        if (releaseSecondRequested) {
+          forwardSecondRunning?.();
+        }
+        return;
+      }
+
+      ws.send(message);
+    });
+  });
+
+  return {
+    waitForFirstCompleted: () => firstCompleted,
+    waitForSecondRunning: () => secondRunning,
+    releaseSecondRunning() {
+      releaseSecondRequested = true;
+      if (secondRunningMessage) {
+        forwardSecondRunning?.();
+      }
+    },
+  };
+}
+
+async function readShimmerEvidence(locator: Locator): Promise<ShimmerEvidence> {
+  return locator.evaluate((root) => {
+    const shimmer = Array.from(root.querySelectorAll<HTMLElement>("*")).find((element) =>
+      getComputedStyle(element).animationName.includes("paseo-toolcall-shimmer"),
+    );
+    if (!shimmer) {
+      throw new Error("Expected a running shimmer inside the badge");
+    }
+    const style = getComputedStyle(shimmer);
+    return {
+      animationDuration: style.animationDuration,
+      endPx: Number.parseFloat(style.getPropertyValue("--paseo-shimmer-end")),
+      label: shimmer.textContent ?? "",
+      renderedWidth: shimmer.getBoundingClientRect().width,
+      startPx: Number.parseFloat(style.getPropertyValue("--paseo-shimmer-start")),
+    };
+  });
+}
+
+test("measures an overview heading that becomes loading after its idle mount", async ({
+  page,
+}, testInfo) => {
+  test.setTimeout(120_000);
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "@paseo:app-settings",
+      JSON.stringify({ toolCallDetailLevel: "overview" }),
+    );
+  });
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "tool-call-shimmer-",
+    title: "Tool-call shimmer",
+    model: "ten-second-stream",
+  });
+
+  try {
+    const gate = await gateSecondToolCall(page, agent.agentId);
+    await openAgentRoute(page, {
+      workspaceId: agent.workspaceId,
+      agentId: agent.agentId,
+    });
+    await agent.client.sendAgentMessage(agent.agentId, "Prove the overview shimmer lifecycle.");
+
+    await gate.waitForFirstCompleted();
+    const group = page.getByTestId("tool-call-group");
+    await expect(group).toBeVisible();
+    const idleGroupHandle = await group.elementHandle();
+    if (!idleGroupHandle) {
+      throw new Error("Expected the idle tool-call group to be mounted");
+    }
+    await expect(group.locator('[style*="paseo-toolcall-shimmer"]')).toHaveCount(0);
+
+    await gate.waitForSecondRunning();
+    gate.releaseSecondRunning();
+    await expect(group.locator('[style*="paseo-toolcall-shimmer"]')).not.toHaveCount(0);
+    const sameGroupNode = await group.evaluate(
+      (node, previous) => node === previous,
+      idleGroupHandle,
+    );
+
+    await group.click();
+    const runningChild = page.getByTestId("tool-call-badge").last();
+    await expect(runningChild).toBeVisible();
+    const header = await readShimmerEvidence(group);
+    const child = await readShimmerEvidence(runningChild);
+    const evidence = { sameGroupNode, header, child };
+    await testInfo.attach("tool-call-shimmer-evidence", {
+      body: JSON.stringify(evidence, null, 2),
+      contentType: "application/json",
+    });
+
+    expect(sameGroupNode).toBe(true);
+    expect(child.endPx).toBeGreaterThan(0);
+    expect(
+      header.endPx,
+      `The retained header rendered ${header.renderedWidth}px wide but its shimmer still ends at ${header.endPx}px`,
+    ).toBeGreaterThan(0);
+  } finally {
+    await agent.cleanup();
+  }
+});

packages/app/e2e/workspace-terminal-tab-rename.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "./fixtures";
+import { test, expect, type Page } from "./fixtures";
 import { clickNewTerminal, gotoWorkspace } from "./helpers/launcher";
 import { renameModalInput, renameModalSubmit } from "./helpers/rename";
 import { seedWorkspace, type SeededWorkspace } from "./helpers/seed-client";
@@ -36,7 +36,52 @@ async function waitForCreatedTerminalId(workspace: SeededWorkspace): Promise<str
   return terminal.id;
 }
 
+async function cleanupTerminal(
+  workspace: SeededWorkspace,
+  terminalId: string | null,
+): Promise<void> {
+  if (terminalId) {
+    await workspace.client.killTerminal(terminalId).catch(() => undefined);
+  }
+  await workspace.cleanup();
+}
+
+async function readClipboard(page: Page): Promise<string> {
+  return page.evaluate(() => navigator.clipboard.readText());
+}
+
 test.describe("Workspace terminal tab rename", () => {
+  test("right-click copy terminal id writes the terminal id to the clipboard", async ({
+    context,
+    page,
+  }) => {
+    test.setTimeout(60_000);
+
+    const workspace = await seedWorkspace({ repoPrefix: "workspace-terminal-copy-id-" });
+    let terminalId: string | null = null;
+
+    try {
+      await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+      await gotoWorkspace(page, workspace.workspaceId);
+      await clickNewTerminal(page);
+      terminalId = await waitForCreatedTerminalId(workspace);
+
+      const tab = page.getByTestId(`workspace-tab-terminal_${terminalId}`).first();
+      await expect(tab).toBeVisible({ timeout: 15_000 });
+
+      await tab.click({ button: "right" });
+      const copyTerminalId = page.getByTestId(
+        `workspace-tab-context-terminal_${terminalId}-copy-terminal-id`,
+      );
+      await expect(copyTerminalId).toBeVisible({ timeout: 10_000 });
+      await copyTerminalId.click();
+
+      await expect.poll(() => readClipboard(page)).toBe(terminalId);
+    } finally {
+      await cleanupTerminal(workspace, terminalId);
+    }
+  });
+
   test("right-click rename persists the terminal title and updates the tab label", async ({
     page,
   }) => {
@@ -74,10 +119,7 @@ test.describe("Workspace terminal tab rename", () => {
         .poll(() => fetchTerminalTitle(workspace, terminalId!))
         .toBe("My Renamed Terminal");
     } finally {
-      if (terminalId) {
-        await workspace.client.killTerminal(terminalId).catch(() => undefined);
-      }
-      await workspace.cleanup();
+      await cleanupTerminal(workspace, terminalId);
     }
   });
 });

packages/app/eas.json

@@ -19,6 +19,9 @@
       "channel": "production",
       "env": {
         "APP_VARIANT": "production"
+      },
+      "android": {
+        "resourceClass": "large"
       }
     },
     "production-apk": {

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/app",
-  "version": "0.2.0-beta.3",
+  "version": "0.2.3",
   "private": true,
   "main": "index.ts",
   "scripts": {

packages/app/plugins/with-fdroid-autolinking.js

@@ -11,6 +11,51 @@ const EXCLUDED_ANDROID_MODULES = [
   "expo-dev-menu-interface",
 ];
 
+const FDROID_ABI_VERSION_CODE_BLOCK = `// Paseo F-Droid single-ABI version codes
+def paseoAbiVersionCodes = [
+    "armeabi-v7a": 1,
+    "arm64-v8a": 2,
+    "x86": 3,
+    "x86_64": 4,
+]
+def paseoArchitectures = (findProperty("reactNativeArchitectures") ?: "")
+    .toString()
+    .split(",")
+    .collect { it.trim() }
+    .findAll { !it.isEmpty() }
+
+if (paseoArchitectures.size() == 1) {
+    def paseoAbi = paseoArchitectures[0]
+    def paseoAbiVersionCode = paseoAbiVersionCodes[paseoAbi]
+    if (paseoAbiVersionCode == null) {
+        throw new GradleException("Unsupported Paseo Android ABI: " + paseoAbi)
+    }
+    android.defaultConfig.versionCode = android.defaultConfig.versionCode * 10 + paseoAbiVersionCode
+}
+`;
+
+function configureFdroidAppBuildGradle(contents) {
+  let configuredContents = contents;
+
+  if (!configuredContents.includes("dependenciesInfo {")) {
+    const androidBlock = "android {";
+    if (!configuredContents.includes(androidBlock)) {
+      throw new Error("Could not disable F-Droid dependency metadata in app/build.gradle");
+    }
+
+    configuredContents = configuredContents.replace(
+      androidBlock,
+      `${androidBlock}\n    dependenciesInfo {\n        includeInApk = false\n        includeInBundle = false\n    }`,
+    );
+  }
+
+  if (!configuredContents.includes("// Paseo F-Droid single-ABI version codes")) {
+    configuredContents = `${configuredContents.trimEnd()}\n\n${FDROID_ABI_VERSION_CODE_BLOCK}`;
+  }
+
+  return configuredContents;
+}
+
 function withFdroidAutolinking(config) {
   config = withDangerousMod(config, [
     "android",
@@ -65,19 +110,7 @@ function withFdroidAutolinking(config) {
   });
 
   return withAppBuildGradle(config, (modConfig) => {
-    if (modConfig.modResults.contents.includes("dependenciesInfo {")) {
-      return modConfig;
-    }
-
-    const androidBlock = "android {";
-    if (!modConfig.modResults.contents.includes(androidBlock)) {
-      throw new Error("Could not disable F-Droid dependency metadata in app/build.gradle");
-    }
-
-    modConfig.modResults.contents = modConfig.modResults.contents.replace(
-      androidBlock,
-      `${androidBlock}\n    dependenciesInfo {\n        includeInApk = false\n        includeInBundle = false\n    }`,
-    );
+    modConfig.modResults.contents = configureFdroidAppBuildGradle(modConfig.modResults.contents);
     return modConfig;
   });
 }

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

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import {
   __private__,
   deriveBottomAnchorBlockedReason,
@@ -126,10 +126,15 @@ function createDriverHarness(input?: {
     measurementState,
     nearBottom: input?.isNearBottom ?? true,
   };
-  const scrollToBottom = vi.fn(() => {
+  const scrollAttempts: boolean[] = [];
+  let scrollToBottomBehavior = () => {
     context.nearBottom = true;
     context.measurementState.offsetY = 720;
-  });
+  };
+  const scrollToBottom = (animated: boolean) => {
+    scrollAttempts.push(animated);
+    scrollToBottomBehavior();
+  };
   const modeChanges: BottomAnchorMode[] = [];
   const driver = __private__.createBottomAnchorControllerDriver({
     getAgentId: () => context.agentId,
@@ -150,7 +155,10 @@ function createDriverHarness(input?: {
     context,
     driver,
     scheduler,
-    scrollToBottom,
+    scrollAttempts,
+    setScrollToBottomBehavior(next: () => void) {
+      scrollToBottomBehavior = next;
+    },
     modeChanges,
   };
 }
@@ -210,7 +218,7 @@ describe("bottom anchor controller driver", () => {
     });
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).not.toHaveBeenCalled();
+    expect(harness.scrollAttempts).toHaveLength(0);
     expect(harness.driver.getSnapshot()).toMatchObject({
       mode: "sticky-bottom",
       blockedReason: "waiting_for_history_readiness",
@@ -229,7 +237,7 @@ describe("bottom anchor controller driver", () => {
     harness.driver.reevaluate();
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
     expect(harness.driver.getSnapshot()).toMatchObject({
       blockedReason: null,
       pendingRequest: null,
@@ -237,6 +245,97 @@ describe("bottom anchor controller driver", () => {
     });
   });
 
+  it("preserves a blocked route anchor while a user scroll ends at the bottom", () => {
+    const harness = createDriverHarness({ authoritativeReady: false });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "initial-entry",
+      requestKey: "route:agent-1:initial-entry",
+    });
+    harness.scheduler.flushAll();
+
+    harness.driver.beginUserScroll();
+    harness.context.authoritativeReady = true;
+    harness.driver.notifyAuthoritativeHistoryMaybeChanged();
+    harness.driver.reevaluate();
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollAttempts).toHaveLength(0);
+
+    harness.driver.endUserScroll({ isNearBottom: true });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollAttempts).toHaveLength(1);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      blockedReason: null,
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+  });
+
+  it("preserves a blocked route anchor when layout moves after drag release", () => {
+    const harness = createDriverHarness({ authoritativeReady: false });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "resume",
+      requestKey: "route:agent-1:resume",
+    });
+    harness.scheduler.flushAll();
+
+    harness.driver.beginUserScroll();
+    harness.context.nearBottom = false;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 0,
+    });
+    harness.context.authoritativeReady = true;
+    harness.driver.notifyAuthoritativeHistoryMaybeChanged();
+    harness.driver.endUserScroll({ isNearBottom: true });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollAttempts).toHaveLength(1);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      blockedReason: null,
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+  });
+
+  it("lets a user scroll away supersede a blocked route anchor", () => {
+    const harness = createDriverHarness({ authoritativeReady: false });
+
+    harness.driver.applyRouteRequest({
+      agentId: "agent-1",
+      reason: "resume",
+      requestKey: "route:agent-1:resume",
+    });
+    harness.scheduler.flushAll();
+
+    harness.driver.beginUserScroll();
+    harness.context.nearBottom = false;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 48,
+    });
+    harness.driver.endUserScroll({ isNearBottom: false });
+    harness.context.authoritativeReady = true;
+    harness.driver.notifyAuthoritativeHistoryMaybeChanged();
+    harness.driver.reevaluate();
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollAttempts).toHaveLength(0);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "detached",
+      blockedReason: null,
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+  });
+
   it("suppresses sticky maintenance while detached", () => {
     const harness = createDriverHarness();
 
@@ -254,7 +353,74 @@ describe("bottom anchor controller driver", () => {
     harness.scheduler.flushAll();
 
     expect(harness.driver.getSnapshot().mode).toBe("detached");
-    expect(harness.scrollToBottom).not.toHaveBeenCalled();
+    expect(harness.scrollAttempts).toHaveLength(0);
+  });
+
+  it("pauses sticky maintenance while a user scroll owns the viewport", () => {
+    const harness = createDriverHarness({
+      transportBehavior: {
+        verificationDelayFrames: 2,
+        verificationRetryMode: "recheck",
+      },
+    });
+
+    harness.driver.prepareForStickyContentChange();
+    harness.driver.beginUserScroll();
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 1200,
+      contentHeight: 1400,
+    });
+    harness.context.nearBottom = false;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 1,
+    });
+    harness.scheduler.flushAll();
+
+    expect(harness.scrollAttempts).toHaveLength(1);
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+
+    harness.driver.endUserScroll({ isNearBottom: false });
+
+    expect(harness.driver.getSnapshot().mode).toBe("detached");
+  });
+
+  it("restores sticky maintenance when a user scroll returns to the bottom", () => {
+    const harness = createDriverHarness({
+      transportBehavior: {
+        verificationDelayFrames: 2,
+        verificationRetryMode: "recheck",
+      },
+    });
+
+    harness.driver.beginUserScroll();
+    harness.context.nearBottom = false;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: false,
+      scrollDelta: 48,
+    });
+    harness.driver.handleContentSizeChange({
+      previousContentHeight: 1200,
+      contentHeight: 1400,
+    });
+    harness.context.nearBottom = true;
+    harness.driver.handleScrollNearBottomChange({
+      nextIsNearBottom: true,
+      scrollDelta: -48,
+    });
+    harness.driver.endUserScroll({ isNearBottom: true });
+    harness.scheduler.flushAll();
+
+    expect(harness.driver.getSnapshot()).toMatchObject({
+      mode: "sticky-bottom",
+      pendingRequest: null,
+      pendingVerification: null,
+    });
+    expect(harness.scrollAttempts).toHaveLength(1);
   });
 
   it("switches back to sticky-bottom for explicit jump-to-bottom", () => {
@@ -271,7 +437,7 @@ describe("bottom anchor controller driver", () => {
 
     expect(harness.modeChanges).toContain("detached");
     expect(harness.modeChanges).toContain("sticky-bottom");
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
     expect(harness.driver.getSnapshot().mode).toBe("sticky-bottom");
   });
 
@@ -292,7 +458,7 @@ describe("bottom anchor controller driver", () => {
     });
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(2);
+    expect(harness.scrollAttempts).toHaveLength(2);
   });
 
   it("keeps a pending request blocked when stale container measurements arrive", () => {
@@ -313,7 +479,7 @@ describe("bottom anchor controller driver", () => {
     });
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).not.toHaveBeenCalled();
+    expect(harness.scrollAttempts).toHaveLength(0);
     expect(harness.driver.getSnapshot()).toMatchObject({
       blockedReason: "waiting_for_measurable_viewport",
       pendingRequest: {
@@ -326,7 +492,7 @@ describe("bottom anchor controller driver", () => {
     harness.driver.reevaluate();
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
     expect(harness.driver.getSnapshot().pendingRequest).toBeNull();
   });
 
@@ -338,7 +504,7 @@ describe("bottom anchor controller driver", () => {
       },
       isNearBottom: false,
     });
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = 0;
     });
 
@@ -348,16 +514,16 @@ describe("bottom anchor controller driver", () => {
     });
 
     harness.scheduler.flushFrame();
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
 
     harness.scheduler.flushFrame();
     harness.scheduler.flushFrame();
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
 
     harness.context.nearBottom = true;
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
     expect(harness.driver.getSnapshot().pendingRequest).toBeNull();
   });
 
@@ -375,7 +541,7 @@ describe("bottom anchor controller driver", () => {
       isNearBottom: false,
     });
 
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = 13476;
     });
 
@@ -386,7 +552,7 @@ describe("bottom anchor controller driver", () => {
     });
 
     harness.scheduler.flushFrame();
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
 
     harness.context.measurementState.contentHeight = 14804;
     harness.context.nearBottom = false;
@@ -409,7 +575,7 @@ describe("bottom anchor controller driver", () => {
 
     harness.scheduler.flushFrame();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(2);
+    expect(harness.scrollAttempts).toHaveLength(2);
     expect(harness.driver.getSnapshot()).toMatchObject({
       blockedReason: "waiting_for_post_layout_verification",
       pendingRequest: {
@@ -435,7 +601,7 @@ describe("bottom anchor controller driver", () => {
       isNearBottom: false,
     });
 
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = Math.max(
         0,
         harness.context.measurementState.contentHeight -
@@ -471,7 +637,7 @@ describe("bottom anchor controller driver", () => {
     harness.scheduler.flushFrame();
     harness.scheduler.flushFrame();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(2);
+    expect(harness.scrollAttempts).toHaveLength(2);
     expect(harness.driver.getSnapshot().pendingRequest).toMatchObject({
       reason: "resume",
     });
@@ -480,7 +646,7 @@ describe("bottom anchor controller driver", () => {
   it("keeps sticky-bottom during viewport growth until bottom is re-verified", () => {
     const harness = createDriverHarness();
     harness.context.nearBottom = false;
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = 720;
     });
 
@@ -492,7 +658,7 @@ describe("bottom anchor controller driver", () => {
     });
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(4);
+    expect(harness.scrollAttempts).toHaveLength(4);
     expect(harness.driver.getSnapshot()).toMatchObject({
       mode: "sticky-bottom",
       pendingRequest: null,
@@ -523,7 +689,7 @@ describe("bottom anchor controller driver", () => {
   it("keeps sticky-bottom during streaming growth until bottom is re-verified", () => {
     const harness = createDriverHarness();
     harness.context.nearBottom = false;
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = 900;
     });
 
@@ -533,7 +699,7 @@ describe("bottom anchor controller driver", () => {
     });
     harness.scheduler.flushAll();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(4);
+    expect(harness.scrollAttempts).toHaveLength(4);
     expect(harness.driver.getSnapshot()).toMatchObject({
       mode: "sticky-bottom",
       pendingRequest: null,
@@ -577,7 +743,7 @@ describe("bottom anchor controller driver", () => {
         contentMeasuredForKey: null,
       }),
     });
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = 0;
     });
 
@@ -588,7 +754,7 @@ describe("bottom anchor controller driver", () => {
       contentHeight: 1348,
     });
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
     expect(harness.driver.getSnapshot()).toMatchObject({
       mode: "sticky-bottom",
       pendingVerification: {
@@ -625,14 +791,14 @@ describe("bottom anchor controller driver", () => {
         contentMeasuredForKey: "native-virtualized",
       }),
     });
-    harness.scrollToBottom.mockImplementation(() => {
+    harness.setScrollToBottomBehavior(() => {
       harness.context.measurementState.offsetY = 0;
       harness.context.nearBottom = true;
     });
 
     harness.driver.prepareForStickyContentChange();
 
-    expect(harness.scrollToBottom).toHaveBeenCalledTimes(1);
+    expect(harness.scrollAttempts).toHaveLength(1);
     expect(harness.driver.getSnapshot()).toMatchObject({
       mode: "sticky-bottom",
       pendingVerification: {

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

@@ -68,6 +68,8 @@ interface BottomAnchorControllerDriver {
   resetForAgent: () => void;
   applyRouteRequest: (request: BottomAnchorRouteRequest | null) => void;
   requestLocalAnchor: (request: BottomAnchorLocalRequest) => void;
+  beginUserScroll: () => void;
+  endUserScroll: (params: { isNearBottom: boolean }) => void;
   detachByUser: () => void;
   handleViewportMetricsChange: (params: {
     previousViewportWidth: number;
@@ -243,6 +245,7 @@ function createBottomAnchorControllerDriver(
   let lastRouteRequestKey: string | null = null;
   let stickyMeasurementRevision = 0;
   let lastVerifiedStickyMeasurementRevision = 0;
+  let isUserScrollActive = false;
 
   const setBlockedReason = (nextBlockedReason: BottomAnchorBlockedReason | null) => {
     if (blockedReason === nextBlockedReason) {
@@ -411,10 +414,14 @@ function createBottomAnchorControllerDriver(
       | "viewport_change"
       | "content_size_change"
       | "scroll_near_bottom_change"
+      | "user_scroll_end"
       | "history_readiness_change"
       | "manual_reevaluate"
       | "retry_scroll",
   ) => {
+    if (isUserScrollActive) {
+      return;
+    }
     if (attemptHandle) {
       return;
     }
@@ -481,6 +488,7 @@ function createBottomAnchorControllerDriver(
       cancelPendingAttempt();
       stickyMeasurementRevision = 0;
       lastVerifiedStickyMeasurementRevision = 0;
+      isUserScrollActive = false;
       mode = "sticky-bottom";
       input.onModeChange("sticky-bottom");
     },
@@ -497,6 +505,38 @@ function createBottomAnchorControllerDriver(
     requestLocalAnchor(request) {
       createRequest(request);
     },
+    beginUserScroll() {
+      isUserScrollActive = true;
+      cancelPendingAttempt();
+    },
+    endUserScroll(params) {
+      isUserScrollActive = false;
+      if (params.isNearBottom) {
+        if (mode === "detached") {
+          setModeInternal("sticky-bottom");
+          pendingVerification = { requestId: null, retries: 0 };
+          evaluate(false, "user_scroll_end");
+          return;
+        }
+        if (pendingRequest) {
+          evaluate(false, "user_scroll_end");
+          return;
+        }
+        if (
+          !input.isNearBottom() ||
+          stickyMeasurementRevision !== lastVerifiedStickyMeasurementRevision
+        ) {
+          pendingVerification = { requestId: null, retries: 0 };
+          evaluate(false, "user_scroll_end");
+          return;
+        }
+        markStickyMeasurementVerified();
+        return;
+      }
+      if (mode === "sticky-bottom") {
+        this.detachByUser();
+      }
+    },
     detachByUser() {
       if (mode === "detached") {
         return;
@@ -511,6 +551,9 @@ function createBottomAnchorControllerDriver(
       ) {
         markStickyMeasurementChanged();
       }
+      if (isUserScrollActive) {
+        return;
+      }
       const shouldRestick = __private__.shouldRestickOnViewportChange({
         mode,
         previousViewportWidth: params.previousViewportWidth,
@@ -529,6 +572,9 @@ function createBottomAnchorControllerDriver(
       if (params.previousContentHeight !== params.contentHeight) {
         markStickyMeasurementChanged();
       }
+      if (isUserScrollActive) {
+        return;
+      }
       const shouldRestick = __private__.shouldRestickOnContentChange({
         mode,
         previousContentHeight: params.previousContentHeight,
@@ -558,6 +604,9 @@ function createBottomAnchorControllerDriver(
         return;
       }
       markStickyMeasurementChanged();
+      if (isUserScrollActive) {
+        return;
+      }
       if (!pendingRequest) {
         pendingVerification = { requestId: null, retries: 0 };
         if (attemptHandle) {
@@ -571,6 +620,9 @@ function createBottomAnchorControllerDriver(
     },
     handleScrollNearBottomChange(params) {
       const { nextIsNearBottom, scrollDelta } = params;
+      if (isUserScrollActive) {
+        return;
+      }
       if (
         nextIsNearBottom &&
         mode === "sticky-bottom" &&
@@ -737,6 +789,12 @@ export function useBottomAnchorController(input: {
     requestLocalAnchor(request: BottomAnchorLocalRequest) {
       driverRef.current?.requestLocalAnchor(request);
     },
+    beginUserScroll() {
+      driverRef.current?.beginUserScroll();
+    },
+    endUserScroll(params: { isNearBottom: boolean }) {
+      driverRef.current?.endUserScroll(params);
+    },
     detachByUser() {
       driverRef.current?.detachByUser();
     },

packages/app/src/agent-stream/history-start-pagination.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import {
+  createHistoryStartPaginationState,
+  evaluateHistoryStartPagination,
+  rearmHistoryStartPagination,
+} from "./history-start-pagination";
+
+const visibleHistoryStart = {
+  distanceFromHistoryStart: 0,
+  hasOlderHistory: true,
+  isLoadingOlderHistory: false,
+  isReady: true,
+  progressKey: "epoch-1:20",
+};
+
+describe("history start pagination", () => {
+  it("loads once for each authoritative history cursor", () => {
+    const initial = createHistoryStartPaginationState();
+    const first = evaluateHistoryStartPagination(initial, visibleHistoryStart);
+    const duplicate = evaluateHistoryStartPagination(first.state, visibleHistoryStart);
+    const nextPage = evaluateHistoryStartPagination(first.state, {
+      ...visibleHistoryStart,
+      progressKey: "epoch-1:10",
+    });
+
+    expect([first.shouldLoad, duplicate.shouldLoad, nextPage.shouldLoad]).toEqual([
+      true,
+      false,
+      true,
+    ]);
+  });
+
+  it("allows the same revision again after the user leaves the history edge", () => {
+    const first = evaluateHistoryStartPagination(
+      createHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+    const away = evaluateHistoryStartPagination(first.state, {
+      ...visibleHistoryStart,
+      distanceFromHistoryStart: 200,
+    });
+    const returned = evaluateHistoryStartPagination(away.state, visibleHistoryStart);
+
+    expect([first.shouldLoad, away.shouldLoad, returned.shouldLoad]).toEqual([true, false, true]);
+  });
+
+  it("re-arms the same cursor when the user makes another upward edge gesture", () => {
+    const first = evaluateHistoryStartPagination(
+      createHistoryStartPaginationState(),
+      visibleHistoryStart,
+    );
+    const retried = evaluateHistoryStartPagination(
+      rearmHistoryStartPagination(first.state),
+      visibleHistoryStart,
+    );
+
+    expect([first.shouldLoad, retried.shouldLoad]).toEqual([true, true]);
+  });
+
+  it("waits while history loading is unavailable or already active", () => {
+    const state = createHistoryStartPaginationState();
+
+    expect([
+      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, isReady: false }).shouldLoad,
+      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, hasOlderHistory: false })
+        .shouldLoad,
+      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, isLoadingOlderHistory: true })
+        .shouldLoad,
+      evaluateHistoryStartPagination(state, { ...visibleHistoryStart, progressKey: null })
+        .shouldLoad,
+    ]).toEqual([false, false, false, false]);
+  });
+});

packages/app/src/agent-stream/history-start-pagination.ts

@@ -0,0 +1,45 @@
+export const HISTORY_START_THRESHOLD_PX = 96;
+
+export interface HistoryStartPaginationState {
+  requestedProgressKey: string | null;
+}
+
+export function createHistoryStartPaginationState(): HistoryStartPaginationState {
+  return { requestedProgressKey: null };
+}
+
+export function rearmHistoryStartPagination(
+  _state: HistoryStartPaginationState,
+): HistoryStartPaginationState {
+  return createHistoryStartPaginationState();
+}
+
+export function evaluateHistoryStartPagination(
+  state: HistoryStartPaginationState,
+  input: {
+    distanceFromHistoryStart: number;
+    hasOlderHistory: boolean;
+    isLoadingOlderHistory: boolean;
+    isReady: boolean;
+    progressKey: string | null;
+  },
+): { state: HistoryStartPaginationState; shouldLoad: boolean } {
+  if (input.distanceFromHistoryStart > HISTORY_START_THRESHOLD_PX) {
+    return { state: createHistoryStartPaginationState(), shouldLoad: false };
+  }
+  if (
+    !input.isReady ||
+    !input.hasOlderHistory ||
+    input.isLoadingOlderHistory ||
+    input.progressKey === null
+  ) {
+    return { state, shouldLoad: false };
+  }
+  if (state.requestedProgressKey === input.progressKey) {
+    return { state, shouldLoad: false };
+  }
+  return {
+    state: { requestedProgressKey: input.progressKey },
+    shouldLoad: true,
+  };
+}

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

@@ -9,7 +9,6 @@ import {
 } from "react";
 import {
   FlatList,
-  ActivityIndicator,
   Keyboard,
   Platform,
   View,
@@ -17,8 +16,12 @@ import {
   type ListRenderItemInfo,
   type NativeScrollEvent,
   type NativeSyntheticEvent,
+  type ViewStyle,
 } from "react-native";
+import { withUnistyles } from "react-native-unistyles";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import type { StreamItem } from "@/types/stream";
+import type { Theme } from "@/styles/theme";
 import { useStableEvent } from "@/hooks/use-stable-event";
 import { useBottomAnchorController } from "./bottom-anchor-controller";
 import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./strategy";
@@ -27,12 +30,28 @@ import {
   isNearBottomForStreamRenderStrategy,
   resolveBottomAnchorTransportBehavior,
 } from "./strategy";
+import {
+  createHistoryStartPaginationState,
+  evaluateHistoryStartPagination,
+  rearmHistoryStartPagination,
+} from "./history-start-pagination";
 
 const DEFAULT_MAINTAIN_VISIBLE_CONTENT_POSITION = Object.freeze({
   minIndexForVisible: 0,
   autoscrollToTopThreshold: 0,
 });
-const HISTORY_START_THRESHOLD_PX = 96;
+
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+const foregroundMutedColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+const historyStartSlotStyle: ViewStyle = {
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: 32,
+  paddingTop: 4,
+  paddingBottom: 8,
+};
 
 interface HistoryRowDisplayVariants {
   regular?: StreamItem;
@@ -72,6 +91,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     onNearHistoryStart,
     isLoadingOlderHistory,
     hasOlderHistory,
+    olderHistoryProgressKey,
     scrollEnabled,
     listStyle,
     baseListContentContainerStyle,
@@ -89,10 +109,13 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     contentMeasuredForKey: null as string | null,
   });
   const scrollOffsetYRef = useRef(0);
+  const isUserScrollActiveRef = useRef(false);
+  const userScrollEndFrameIdRef = useRef<number | null>(null);
   const programmaticScrollEventBudgetRef = useRef(0);
   const [isNativeViewportSettling, setIsNativeViewportSettling] = useState(false);
   const nativeViewportSettlingFrameIdRef = useRef<number | null>(null);
   const historyStartReadyRef = useRef(false);
+  const historyStartPaginationStateRef = useRef(createHistoryStartPaginationState());
 
   const historyItems = useMemo(() => {
     if (segments.historyVirtualized.length === 0) {
@@ -121,6 +144,23 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       ),
     [displayStateHistoryRows, historyRowRevision?.contentById],
   );
+  const evaluateHistoryStart = useStableEvent(() => {
+    const metrics = streamViewportMetricsRef.current;
+    const hasMeasuredViewport =
+      metrics.viewportMeasuredForKey === metrics.containerKey &&
+      metrics.contentMeasuredForKey === metrics.containerKey;
+    const result = evaluateHistoryStartPagination(historyStartPaginationStateRef.current, {
+      distanceFromHistoryStart: metrics.contentHeight - metrics.viewportHeight - metrics.offsetY,
+      hasOlderHistory,
+      isLoadingOlderHistory,
+      isReady: historyStartReadyRef.current && hasMeasuredViewport,
+      progressKey: olderHistoryProgressKey,
+    });
+    historyStartPaginationStateRef.current = result.state;
+    if (result.shouldLoad) {
+      onNearHistoryStart();
+    }
+  });
 
   const clearNativeViewportSettling = useCallback(() => {
     if (nativeViewportSettlingFrameIdRef.current !== null) {
@@ -129,6 +169,13 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     }
   }, []);
 
+  const clearPendingUserScrollEnd = useCallback(() => {
+    if (userScrollEndFrameIdRef.current !== null) {
+      cancelAnimationFrame(userScrollEndFrameIdRef.current);
+      userScrollEndFrameIdRef.current = null;
+    }
+  }, []);
+
   const markNativeViewportSettling = useCallback(() => {
     clearNativeViewportSettling();
     setIsNativeViewportSettling(true);
@@ -208,16 +255,21 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       contentMeasuredForKey: null,
     };
     scrollOffsetYRef.current = 0;
+    isUserScrollActiveRef.current = false;
+    clearPendingUserScrollEnd();
     clearNativeViewportSettling();
     setIsNativeViewportSettling(false);
     historyStartReadyRef.current = false;
+    historyStartPaginationStateRef.current = createHistoryStartPaginationState();
     const frame = requestAnimationFrame(() => {
       historyStartReadyRef.current = true;
+      evaluateHistoryStart();
     });
     return () => {
       cancelAnimationFrame(frame);
+      clearPendingUserScrollEnd();
     };
-  }, [agentId, clearNativeViewportSettling]);
+  }, [agentId, clearNativeViewportSettling, clearPendingUserScrollEnd, evaluateHistoryStart]);
 
   useEffect(() => {
     const keyboardEvents = [
@@ -266,6 +318,19 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     };
   }, [agentId, bottomAnchorController, markNativeViewportSettling, viewportRef]);
 
+  const isScrollEventNearBottom = useStableEvent(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+      return isNearBottomForStreamRenderStrategy({
+        strategy,
+        offsetY: contentOffset.y,
+        threshold: 32,
+        contentHeight: contentSize.height,
+        viewportHeight: layoutMeasurement.height,
+      });
+    },
+  );
+
   const handleScroll = useStableEvent((event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
     const previousOffsetY = scrollOffsetYRef.current;
@@ -280,28 +345,16 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       contentMeasuredForKey: "native-virtualized",
     };
 
-    const nearBottom = isNearBottomForStreamRenderStrategy({
-      strategy,
-      offsetY: contentOffset.y,
-      threshold: 32,
-      contentHeight: streamViewportMetricsRef.current.contentHeight,
-      viewportHeight: streamViewportMetricsRef.current.viewportHeight,
-    });
+    const nearBottom = isScrollEventNearBottom(event);
     onNearBottomChange(nearBottom);
 
-    const distanceFromOldestEdge =
-      streamViewportMetricsRef.current.contentHeight -
-      streamViewportMetricsRef.current.viewportHeight -
-      contentOffset.y;
-    if (
-      historyStartReadyRef.current &&
-      hasOlderHistory &&
-      distanceFromOldestEdge <= HISTORY_START_THRESHOLD_PX
-    ) {
-      onNearHistoryStart();
-    }
+    evaluateHistoryStart();
 
-    if (programmaticScrollEventBudgetRef.current > 0 && contentOffset.y <= 8) {
+    if (
+      !isUserScrollActiveRef.current &&
+      programmaticScrollEventBudgetRef.current > 0 &&
+      contentOffset.y <= 8
+    ) {
       programmaticScrollEventBudgetRef.current -= 1;
     } else {
       programmaticScrollEventBudgetRef.current = 0;
@@ -312,6 +365,48 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
     }
   });
 
+  const handleScrollBeginDrag = useStableEvent(() => {
+    if (!isLoadingOlderHistory) {
+      historyStartPaginationStateRef.current = rearmHistoryStartPagination(
+        historyStartPaginationStateRef.current,
+      );
+    }
+    clearPendingUserScrollEnd();
+    isUserScrollActiveRef.current = true;
+    bottomAnchorController.beginUserScroll();
+    evaluateHistoryStart();
+  });
+
+  // Defer drag end so momentum can take ownership, but capture the terminal
+  // gesture position now because layout may move the viewport in the meantime.
+  const handleScrollEndDrag = useStableEvent((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const isNearBottom = isScrollEventNearBottom(event);
+    clearPendingUserScrollEnd();
+    userScrollEndFrameIdRef.current = requestAnimationFrame(() => {
+      userScrollEndFrameIdRef.current = null;
+      isUserScrollActiveRef.current = false;
+      bottomAnchorController.endUserScroll({ isNearBottom });
+    });
+  });
+
+  const handleMomentumScrollBegin = useStableEvent(() => {
+    clearPendingUserScrollEnd();
+  });
+
+  const handleMomentumScrollEnd = useStableEvent(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      // Android can emit momentum-end after a programmatic anchor correction.
+      // Only momentum that still owns the user gesture may settle scroll intent.
+      if (!isUserScrollActiveRef.current) {
+        return;
+      }
+      const isNearBottom = isScrollEventNearBottom(event);
+      clearPendingUserScrollEnd();
+      isUserScrollActiveRef.current = false;
+      bottomAnchorController.endUserScroll({ isNearBottom });
+    },
+  );
+
   const handleListLayout = useStableEvent((event: LayoutChangeEvent) => {
     const previousViewportWidth = streamViewportMetricsRef.current.viewportWidth;
     const previousViewportHeight = streamViewportMetricsRef.current.viewportHeight;
@@ -336,6 +431,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       previousViewportHeight,
       viewportHeight,
     });
+    evaluateHistoryStart();
   });
 
   const handleContentSizeChange = useStableEvent((_width: number, height: number) => {
@@ -351,8 +447,13 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       previousContentHeight,
       contentHeight: nextContentHeight,
     });
+    evaluateHistoryStart();
   });
 
+  useEffect(() => {
+    evaluateHistoryStart();
+  }, [evaluateHistoryStart, hasOlderHistory, isLoadingOlderHistory, olderHistoryProgressKey]);
+
   const renderItem = useStableEvent(
     ({ item, index }: ListRenderItemInfo<StreamItem>): ReactElement | null => {
       const rendered = renderHistoryMountedRow(item, index, historyItems);
@@ -392,15 +493,20 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
   ]);
 
   const historyFooterContent = useMemo(() => {
-    if (!isLoadingOlderHistory) {
+    if (!hasOlderHistory && !isLoadingOlderHistory) {
       return null;
     }
     return (
-      <View testID="load-older-history-spinner">
-        <ActivityIndicator size="small" />
+      <View
+        style={historyStartSlotStyle}
+        testID={isLoadingOlderHistory ? "load-older-history-spinner" : undefined}
+      >
+        {isLoadingOlderHistory ? (
+          <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+        ) : null}
       </View>
     );
-  }, [isLoadingOlderHistory]);
+  }, [hasOlderHistory, isLoadingOlderHistory]);
 
   // RN's FlatList strictMode keeps its internal renderItem wrapper stable when
   // data or the live header changes, preserving the row identities above.
@@ -419,6 +525,10 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       style={listStyle}
       onLayout={handleListLayout}
       onScroll={handleScroll}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      onScrollEndDrag={handleScrollEndDrag}
+      onMomentumScrollBegin={handleMomentumScrollBegin}
+      onMomentumScrollEnd={handleMomentumScrollEnd}
       scrollEventThrottle={16}
       onContentSizeChange={handleContentSizeChange}
       maintainVisibleContentPosition={maintainVisibleContentPosition}

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

@@ -133,6 +133,7 @@ describe("createWebStreamStrategy", () => {
             onNearHistoryStart: vi.fn(),
             isLoadingOlderHistory: false,
             hasOlderHistory: false,
+            olderHistoryProgressKey: null,
             scrollEnabled: true,
             listStyle: null,
             baseListContentContainerStyle: null,
@@ -176,6 +177,7 @@ describe("createWebStreamStrategy", () => {
       onNearHistoryStart: vi.fn(),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
+      olderHistoryProgressKey: null,
       scrollEnabled: true,
       listStyle: null,
       baseListContentContainerStyle: null,
@@ -199,6 +201,90 @@ describe("createWebStreamStrategy", () => {
     expect(renderLiveHeadRow).toHaveBeenCalledTimes(2);
   });
 
+  it("keeps bottom anchoring through subpixel browser rounding", () => {
+    const scrollTo = vi.fn();
+    HTMLElement.prototype.scrollTo = scrollTo;
+    const strategy = createWebStreamStrategy({ isMobileBreakpoint: false });
+    const viewportRef = React.createRef<StreamViewportHandle>();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    act(() => {
+      root?.render(
+        strategy.render({
+          agentId: "agent",
+          segments: {
+            historyVirtualized: [],
+            historyMounted: [userMessage(1)],
+            liveHead: [],
+          },
+          boundary: {
+            hasVirtualizedHistory: false,
+            hasMountedHistory: true,
+            hasLiveHead: false,
+          },
+          renderers: createRenderers(vi.fn()),
+          listEmptyComponent: null,
+          viewportRef,
+          routeBottomAnchorRequest: null,
+          isAuthoritativeHistoryReady: true,
+          onNearBottomChange: vi.fn(),
+          onNearHistoryStart: vi.fn(),
+          isLoadingOlderHistory: false,
+          hasOlderHistory: false,
+          olderHistoryProgressKey: null,
+          scrollEnabled: true,
+          listStyle: null,
+          baseListContentContainerStyle: null,
+          forwardListContentContainerStyle: null,
+        }),
+      );
+    });
+
+    const scrollContainer = container.querySelector('[data-testid="agent-chat-scroll"]');
+    if (!(scrollContainer instanceof HTMLElement)) {
+      throw new Error("Expected agent chat scroll container");
+    }
+    Object.defineProperty(scrollContainer, "clientHeight", { configurable: true, value: 766 });
+    Object.defineProperty(scrollContainer, "scrollHeight", { configurable: true, value: 5725 });
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 4959.1708984375,
+    });
+    scrollTo.mockClear();
+
+    act(() => {
+      viewportRef.current?.scrollToBottom("message-sent");
+    });
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 5725, behavior: "auto" });
+
+    scrollTo.mockClear();
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 4960.5,
+    });
+
+    act(() => {
+      viewportRef.current?.scrollToBottom("message-sent");
+    });
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 5725, behavior: "auto" });
+
+    scrollTo.mockClear();
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 4967,
+    });
+
+    act(() => {
+      viewportRef.current?.scrollToBottom("message-sent");
+    });
+
+    expect(scrollTo).not.toHaveBeenCalled();
+  });
+
   it("fires near-history-start when the user scrolls near the top", async () => {
     const strategy = createWebStreamStrategy({ isMobileBreakpoint: true });
     const viewportRef = React.createRef<StreamViewportHandle>();
@@ -231,6 +317,7 @@ describe("createWebStreamStrategy", () => {
             onNearHistoryStart,
             isLoadingOlderHistory: false,
             hasOlderHistory: true,
+            olderHistoryProgressKey: "epoch-1:20",
             scrollEnabled: true,
             listStyle: null,
             baseListContentContainerStyle: null,
@@ -240,10 +327,6 @@ describe("createWebStreamStrategy", () => {
       );
     });
 
-    await act(async () => {
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-    });
-
     const scrollContainer = container.querySelector('[data-testid="agent-chat-scroll"]');
     if (!(scrollContainer instanceof HTMLElement)) {
       throw new Error("Expected agent chat scroll container");
@@ -252,11 +335,109 @@ describe("createWebStreamStrategy", () => {
     Object.defineProperty(scrollContainer, "scrollHeight", { configurable: true, value: 1200 });
     Object.defineProperty(scrollContainer, "scrollTop", { configurable: true, value: 64 });
 
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    expect(onNearHistoryStart).not.toHaveBeenCalled();
+
     act(() => {
+      scrollContainer.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
       scrollContainer?.dispatchEvent(new Event("scroll"));
     });
 
     expect(onNearHistoryStart).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      scrollContainer.dispatchEvent(new WheelEvent("wheel", { deltaY: -1 }));
+    });
+
+    expect(onNearHistoryStart).toHaveBeenCalledTimes(2);
+  });
+
+  it("waits for bottom anchoring before evaluating a delayed initial tail", async () => {
+    HTMLElement.prototype.scrollTo = vi.fn(function (
+      this: HTMLElement,
+      options?: ScrollToOptions | number,
+      y?: number,
+    ) {
+      const top = typeof options === "object" ? (options.top ?? 0) : (y ?? 0);
+      Object.defineProperty(this, "scrollTop", { configurable: true, value: top });
+    });
+    const strategy = createWebStreamStrategy({ isMobileBreakpoint: true });
+    const viewportRef = React.createRef<StreamViewportHandle>();
+    const onNearHistoryStart = vi.fn();
+    const renderInput = {
+      agentId: "agent",
+      boundary: {
+        hasVirtualizedHistory: false,
+        hasMountedHistory: false,
+        hasLiveHead: false,
+      },
+      renderers: createRenderers(vi.fn()),
+      listEmptyComponent: null,
+      viewportRef,
+      routeBottomAnchorRequest: null,
+      isAuthoritativeHistoryReady: true,
+      onNearBottomChange: vi.fn(),
+      onNearHistoryStart,
+      isLoadingOlderHistory: false,
+      hasOlderHistory: false,
+      olderHistoryProgressKey: null,
+      scrollEnabled: true,
+      listStyle: null,
+      baseListContentContainerStyle: null,
+      forwardListContentContainerStyle: null,
+    };
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    act(() => {
+      root?.render(
+        strategy.render({
+          ...renderInput,
+          segments: { historyVirtualized: [], historyMounted: [], liveHead: [] },
+        }),
+      );
+    });
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    const scrollContainer = container.querySelector('[data-testid="agent-chat-scroll"]');
+    if (!(scrollContainer instanceof HTMLElement)) {
+      throw new Error("Expected agent chat scroll container");
+    }
+    Object.defineProperty(scrollContainer, "clientHeight", { configurable: true, value: 400 });
+    Object.defineProperty(scrollContainer, "scrollHeight", { configurable: true, value: 1200 });
+    Object.defineProperty(scrollContainer, "scrollTop", { configurable: true, value: 0 });
+
+    act(() => {
+      root?.render(
+        strategy.render({
+          ...renderInput,
+          segments: {
+            historyVirtualized: [],
+            historyMounted: [userMessage(1), userMessage(2)],
+            liveHead: [],
+          },
+          boundary: {
+            hasVirtualizedHistory: false,
+            hasMountedHistory: true,
+            hasLiveHead: false,
+          },
+          hasOlderHistory: true,
+          olderHistoryProgressKey: "epoch-1:20",
+        }),
+      );
+    });
+
+    expect(onNearHistoryStart).not.toHaveBeenCalled();
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+    expect(onNearHistoryStart).not.toHaveBeenCalled();
   });
 
   it("keeps initial route entry anchored when delayed route readiness arrives before user scroll", async () => {
@@ -295,6 +476,7 @@ describe("createWebStreamStrategy", () => {
       onNearHistoryStart: vi.fn(),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
+      olderHistoryProgressKey: null,
       scrollEnabled: true,
       listStyle: null,
       baseListContentContainerStyle: null,
@@ -402,6 +584,7 @@ describe("createWebStreamStrategy", () => {
       onNearHistoryStart: vi.fn(),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
+      olderHistoryProgressKey: null,
       scrollEnabled: true,
       listStyle: null,
       baseListContentContainerStyle: null,
@@ -498,6 +681,7 @@ describe("createWebStreamStrategy", () => {
       onNearHistoryStart: vi.fn(),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
+      olderHistoryProgressKey: null,
       scrollEnabled: true,
       listStyle: null,
       baseListContentContainerStyle: null,
@@ -596,6 +780,7 @@ describe("createWebStreamStrategy", () => {
       onNearHistoryStart: vi.fn(),
       isLoadingOlderHistory: false,
       hasOlderHistory: false,
+      olderHistoryProgressKey: null,
       scrollEnabled: true,
       listStyle: null,
       baseListContentContainerStyle: null,

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

@@ -8,11 +8,19 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { ActivityIndicator } from "react-native";
 import { measureElement as measureVirtualElement, useVirtualizer } from "@tanstack/react-virtual";
+import { withUnistyles } from "react-native-unistyles";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { useStableEvent } from "@/hooks/use-stable-event";
+import type { Theme } from "@/styles/theme";
 import { estimateStreamItemHeight } from "./web-virtualization";
 import type { StreamRenderInput, StreamStrategy, StreamViewportHandle } from "./strategy";
 import { createStreamStrategy } from "./strategy";
+import {
+  createHistoryStartPaginationState,
+  evaluateHistoryStartPagination,
+  rearmHistoryStartPagination,
+} from "./history-start-pagination";
 
 interface CreateWebStreamStrategyInput {
   isMobileBreakpoint: boolean;
@@ -22,9 +30,14 @@ type ScrollBehaviorLike = "auto" | "smooth";
 
 const WEB_BOTTOM_SETTLE_TIMEOUT_MS = 200;
 const USER_SCROLL_DELTA_EPSILON = 1;
+const BOTTOM_OVERSCROLL_TOLERANCE_PX = 2;
 const AUTO_SCROLL_BOTTOM_THRESHOLD_PX = 64;
 const AUTO_SCROLL_RESUME_THRESHOLD_PX = 1;
-const HISTORY_START_THRESHOLD_PX = 96;
+
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+const foregroundMutedColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
 
 const historyStartSlotStyle: CSSProperties = {
   display: "flex",
@@ -88,7 +101,8 @@ function getScrollContainerDistanceFromBottom(
 function isScrollContainerOverscrolledPastBottom(
   scrollContainer: Pick<HTMLElement, "scrollTop" | "clientHeight" | "scrollHeight">,
 ): boolean {
-  return getScrollContainerDistanceFromBottom(scrollContainer) < 0;
+  // Browser zoom can leave scrollTop fractional while the height metrics remain integer-valued.
+  return getScrollContainerDistanceFromBottom(scrollContainer) < -BOTTOM_OVERSCROLL_TOLERANCE_PX;
 }
 
 function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: boolean }) {
@@ -105,6 +119,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     onNearHistoryStart,
     isLoadingOlderHistory,
     hasOlderHistory,
+    olderHistoryProgressKey,
     scrollEnabled,
     isMobileBreakpoint,
   } = props;
@@ -131,6 +146,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   const pendingAutoScrollTimeoutRef = useRef<number | null>(null);
   const pendingVirtualRowMeasureFramesRef = useRef(new Map<Element, number>());
   const historyStartReadyRef = useRef(false);
+  const historyStartPaginationStateRef = useRef(createHistoryStartPaginationState());
   const shouldUseVirtualizer = segments.historyVirtualized.length > 0;
   const {
     renderHistoryVirtualizedRow,
@@ -171,6 +187,25 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   }, [rowVirtualizer]);
   const virtualRows = rowVirtualizer.getVirtualItems();
   const virtualTotalSize = rowVirtualizer.getTotalSize();
+  const evaluateHistoryStart = useStableEvent(() => {
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) {
+      return;
+    }
+    const bottomAnchorSettled =
+      !followOutputRef.current || isScrollContainerNearBottom(scrollContainer);
+    const result = evaluateHistoryStartPagination(historyStartPaginationStateRef.current, {
+      distanceFromHistoryStart: scrollContainer.scrollTop,
+      hasOlderHistory,
+      isLoadingOlderHistory,
+      isReady: historyStartReadyRef.current && bottomAnchorSettled,
+      progressKey: olderHistoryProgressKey,
+    });
+    historyStartPaginationStateRef.current = result.state;
+    if (result.shouldLoad) {
+      onNearHistoryStart();
+    }
+  });
 
   const measureVirtualizedRowElement = useCallback(
     (node: HTMLDivElement | null) => {
@@ -229,8 +264,9 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       scrollElementToBottom(scrollContainer, behavior);
       lastKnownScrollTopRef.current = scrollContainer.scrollTop;
       syncNearBottom(scrollContainer, onNearBottomChange);
+      evaluateHistoryStart();
     },
-    [onNearBottomChange],
+    [evaluateHistoryStart, onNearBottomChange],
   );
 
   const scheduleStickToBottom = useCallback(() => {
@@ -295,24 +331,20 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
 
     lastKnownScrollTopRef.current = currentScrollTop;
     updateScrollMetrics();
-    if (
-      historyStartReadyRef.current &&
-      hasOlderHistory &&
-      currentScrollTop <= HISTORY_START_THRESHOLD_PX
-    ) {
-      onNearHistoryStart();
-    }
-  }, [cancelPendingStickToBottom, hasOlderHistory, onNearHistoryStart, updateScrollMetrics]);
+    evaluateHistoryStart();
+  }, [cancelPendingStickToBottom, evaluateHistoryStart, updateScrollMetrics]);
 
   useEffect(() => {
+    historyStartPaginationStateRef.current = createHistoryStartPaginationState();
     const frame = window.requestAnimationFrame(() => {
       historyStartReadyRef.current = true;
+      evaluateHistoryStart();
     });
     return () => {
       window.cancelAnimationFrame(frame);
       historyStartReadyRef.current = false;
     };
-  }, [props.agentId]);
+  }, [evaluateHistoryStart, props.agentId]);
 
   useLayoutEffect(() => {
     if (!isActivationReady) {
@@ -368,7 +400,12 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
 
   useEffect(() => {
     updateScrollMetrics();
+    evaluateHistoryStart();
   }, [
+    evaluateHistoryStart,
+    hasOlderHistory,
+    isLoadingOlderHistory,
+    olderHistoryProgressKey,
     segments.historyMounted.length,
     segments.historyVirtualized.length,
     segments.liveHead.length,
@@ -384,8 +421,10 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     }
 
     updateScrollMetrics();
+    evaluateHistoryStart();
     const observer = new ResizeObserver(() => {
       updateScrollMetrics();
+      evaluateHistoryStart();
       if (!followOutputRef.current) {
         return;
       }
@@ -398,7 +437,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return () => {
       observer.disconnect();
     };
-  }, [scheduleStickToBottom, updateScrollMetrics]);
+  }, [evaluateHistoryStart, scheduleStickToBottom, updateScrollMetrics]);
 
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
@@ -408,8 +447,14 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
 
     const handleWheel = (event: WheelEvent) => {
       if (event.deltaY < 0) {
+        if (!isLoadingOlderHistory) {
+          historyStartPaginationStateRef.current = rearmHistoryStartPagination(
+            historyStartPaginationStateRef.current,
+          );
+        }
         pendingUserScrollUpIntentRef.current = true;
         cancelPendingStickToBottom();
+        evaluateHistoryStart();
       }
     };
     const handlePointerDown = () => {
@@ -432,8 +477,14 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       }
       const previousTouchY = lastTouchClientYRef.current;
       if (previousTouchY !== null && touch.clientY > previousTouchY + 1) {
+        if (!isLoadingOlderHistory) {
+          historyStartPaginationStateRef.current = rearmHistoryStartPagination(
+            historyStartPaginationStateRef.current,
+          );
+        }
         pendingUserScrollUpIntentRef.current = true;
         cancelPendingStickToBottom();
+        evaluateHistoryStart();
       }
       lastTouchClientYRef.current = touch.clientY;
     };
@@ -462,7 +513,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       scrollContainer.removeEventListener("touchend", handleTouchEnd);
       scrollContainer.removeEventListener("touchcancel", handleTouchEnd);
     };
-  }, [cancelPendingStickToBottom, handleDomScroll]);
+  }, [cancelPendingStickToBottom, evaluateHistoryStart, handleDomScroll, isLoadingOlderHistory]);
 
   useEffect(() => {
     const handle: StreamViewportHandle = {
@@ -544,15 +595,20 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     return renderLiveAuxiliary();
   }, [renderLiveAuxiliary]);
   const historyStartSlot = useMemo(() => {
-    if (!isLoadingOlderHistory) {
+    if (!hasOlderHistory && !isLoadingOlderHistory) {
       return null;
     }
     return (
-      <div style={historyStartSlotStyle} data-testid="load-older-history-spinner">
-        <ActivityIndicator size="small" />
+      <div
+        style={historyStartSlotStyle}
+        data-testid={isLoadingOlderHistory ? "load-older-history-spinner" : undefined}
+      >
+        {isLoadingOlderHistory ? (
+          <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+        ) : null}
       </div>
     );
-  }, [isLoadingOlderHistory]);
+  }, [hasOlderHistory, isLoadingOlderHistory]);
   const shouldRenderEmpty =
     !boundary.hasMountedHistory &&
     !boundary.hasVirtualizedHistory &&

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

@@ -72,6 +72,7 @@ export interface StreamRenderInput {
   onNearHistoryStart: () => void;
   isLoadingOlderHistory: boolean;
   hasOlderHistory: boolean;
+  olderHistoryProgressKey: string | null;
   scrollEnabled: boolean;
   listStyle: StyleProp<ViewStyle>;
   baseListContentContainerStyle: StyleProp<ViewStyle>;

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

@@ -1,3 +1,4 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import React, {
   forwardRef,
   memo,
@@ -17,7 +18,6 @@ import {
   Text,
   Pressable,
   Platform,
-  ActivityIndicator,
   type PressableStateCallbackType,
   type StyleProp,
   type ViewStyle,
@@ -247,6 +247,7 @@ export interface AgentStreamViewProps {
   historyPagination?: {
     hasOlder: boolean;
     isLoadingOlder: boolean;
+    progressKey: string | null;
     onLoadOlder: () => void;
   };
 }
@@ -388,10 +389,11 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       agentId,
       toast,
     });
-    const { isLoadingOlder, hasOlder, loadOlder } = historyPagination
+    const { isLoadingOlder, hasOlder, progressKey, loadOlder } = historyPagination
       ? {
           isLoadingOlder: historyPagination.isLoadingOlder,
           hasOlder: historyPagination.hasOlder,
+          progressKey: historyPagination.progressKey,
           loadOlder: historyPagination.onLoadOlder,
         }
       : agentHistoryPagination;
@@ -876,7 +878,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [pendingPermissions, agentId],
     );
 
-    const showRunningTurnFooter = context.status === "running";
+    const showRunningTurnFooter = baseRenderModel.turnTiming.isActive;
     const pendingPermissionsNode = useMemo(
       () =>
         renderPendingPermissionsNode({
@@ -1029,6 +1031,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
               onNearHistoryStart: loadOlder,
               isLoadingOlderHistory: isLoadingOlder,
               hasOlderHistory: hasOlder,
+              olderHistoryProgressKey: progressKey,
               scrollEnabled: streamScrollEnabled,
               listStyle: stylesheet.list,
               baseListContentContainerStyle: stylesheet.listContentContainer,
@@ -1138,6 +1141,7 @@ function historyPaginationPropsEqual(
   return (
     left?.hasOlder === right?.hasOlder &&
     left?.isLoadingOlder === right?.isLoadingOlder &&
+    left?.progressKey === right?.progressKey &&
     left?.onLoadOlder === right?.onLoadOlder
   );
 }
@@ -1194,7 +1198,7 @@ function ToolCallSlot({
   return <ToolCall {...rest} onInlineDetailsExpandedChange={handleExpandedChange} />;
 }
 
-const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedCheckIcon = withUnistyles(Check);
 const ThemedXIcon = withUnistyles(X);
 
@@ -1241,7 +1245,7 @@ function PermissionActionButton({
   return (
     <Pressable testID={testID} style={pressableStyle} onPress={handlePress} disabled={isResponding}>
       {isRespondingAction ? (
-        <ThemedActivityIndicator size="small" uniProps={colorMapping} />
+        <ThemedLoadingSpinner size="small" uniProps={colorMapping} />
       ) : (
         <View style={permissionStyles.optionContent}>
           <Icon size={14} uniProps={colorMapping} />

packages/app/src/app/_layout.tsx

@@ -32,6 +32,7 @@ import { AppDiagnosticHost } from "@/components/app-diagnostic-host";
 import { LeftSidebar } from "@/components/left-sidebar";
 import { WindowSidebarMenuToggle } from "@/components/headers/menu-header";
 import { SidebarModelProvider } from "@/components/sidebar/sidebar-model";
+import { WorkspacePinShortcutHandler } from "@/components/workspace-pin-shortcut-handler";
 import { CompactExplorerSidebarHost } from "@/components/compact-explorer-sidebar-host";
 import { ProviderSettingsHost } from "@/components/provider-settings-host";
 import { RootErrorBoundary } from "@/components/root-error-boundary";
@@ -551,6 +552,7 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
       <UpdateCalloutSource />
       <WorktreeSetupCalloutSource />
       <CommandCenterRootActions />
+      <WorkspacePinShortcutHandler />
       <CommandCenter />
       <AddProjectFlowHost />
       <HostChooserModal />

packages/app/src/assets/acp-provider-icons.ts

@@ -58,8 +58,6 @@ export const ACP_PROVIDER_ICON_SVGS = {
   nova: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">\n  <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1"/>\n  <circle cx="8" cy="8" r="4.5" fill="none" stroke="currentColor" stroke-width="0.3" opacity="0.5"/>\n  <line x1="8" y1="8" x2="13.5" y2="13.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>\n  <polygon points="14.5,14.5 12.3,13.5 13.5,12.3" fill="currentColor"/>\n  <line x1="8" y1="8" x2="2.5" y2="2.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>\n  <polygon points="1.5,1.5 3.7,2.5 2.5,3.7" fill="currentColor"/>\n  <circle cx="8" cy="8" r="1.3" fill="currentColor"/>\n  <circle cx="8" cy="8" r="0.6" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.7"/>\n</svg>\n',
   opencode:
     '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M13 14H3V2H13V14ZM10.5 4.4H5.5V11.6H10.5V4.4Z" fill="currentColor"/>\n</svg>\n',
-  "pi-acp":
-    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M1 1H11.7692V7.9999H8.17942V11.4999H4.58982V15H1V1ZM4.58982 4.50005V7.9999H8.17942V4.50005H4.58982Z" fill="currentColor"/>\n<path d="M11.7692 7.46154H15V15H11.7692V7.46154Z" fill="currentColor"/>\n</svg>\n',
   poolside:
     '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M2.63653 5.50522L2.18735 5.28559C2.09852 5.46726 2.12787 5.68456 2.26172 5.83616C2.39558 5.98775 2.60757 6.04379 2.79884 5.97814L2.63653 5.50522ZM5.83578 6.94285L5.3732 7.13265L5.5645 7.59886L6.02919 7.40392L5.83578 6.94285ZM10.7441 9.44034L10.2614 9.57083L10.393 10.0573L10.8784 9.92198L10.7441 9.44034ZM2.5 8.24963C2.4998 7.97349 2.27577 7.74979 1.99963 7.75C1.72349 7.75021 1.4998 7.97423 1.5 8.25037L2.5 8.24963ZM13.4143 10.7751C12.0197 13.6273 8.57701 14.8089 5.72485 13.4143L5.28559 14.3126C8.63389 15.9498 12.6754 14.5627 14.3126 11.2144L13.4143 10.7751ZM3.08571 5.72485C4.48031 2.87269 7.92299 1.69111 10.7751 3.08571L11.2144 2.18735C7.86611 0.550151 3.82455 1.93728 2.18735 5.28559L3.08571 5.72485ZM10.7751 3.08571C13.6273 4.48031 14.8089 7.92299 13.4143 10.7751L14.3126 11.2144C15.9498 7.86611 14.5627 3.82455 11.2144 2.18735L10.7751 3.08571ZM2.79884 5.97814C3.02201 5.90155 3.54835 5.84926 4.09141 6.00587C4.61256 6.15616 5.10736 6.48476 5.3732 7.13265L6.29835 6.75304C5.89213 5.76303 5.11508 5.26032 4.3685 5.04503C3.64385 4.83605 2.9066 4.8839 2.47422 5.0323L2.79884 5.97814ZM6.02919 7.40392C6.25314 7.30998 6.55771 7.25841 6.85281 7.36034C7.13062 7.45631 7.49214 7.72014 7.78743 8.4398L8.71257 8.0602C8.3358 7.14195 7.79046 6.62626 7.17931 6.41515C6.58544 6.21001 6.01893 6.32381 5.64236 6.48177L6.02919 7.40392ZM6.26827 7.19375C6.80493 6.26869 8.18817 4.18684 11.1653 3.10654L10.8242 2.16652C7.53166 3.36127 5.99463 5.67263 5.40329 6.69195L6.26827 7.19375ZM14.3364 10.8325C14.1845 10.39 13.7564 9.79897 13.14 9.37995C12.504 8.94759 11.6302 8.67426 10.6099 8.9587L10.8784 9.92198C11.5634 9.73102 12.1368 9.90713 12.5779 10.207C13.0385 10.5201 13.3174 10.9441 13.3905 11.1571L14.3364 10.8325ZM11.2268 9.30984C11.1236 8.92833 10.8783 8.39265 10.3638 8.02453C9.82769 7.6409 9.08331 7.49864 8.11574 7.76836L8.38426 8.73164C9.1221 8.52595 9.53979 8.66454 9.78189 8.83777C10.0457 9.02651 10.1946 9.32371 10.2614 9.57083L11.2268 9.30984ZM11.216 9.60556C11.6225 8.44463 12.4244 5.47936 11.4712 2.48487L10.5183 2.78819C11.3726 5.47172 10.6545 8.18331 10.2722 9.27512L11.216 9.60556ZM7.80082 8.03037L5.05604 13.6438L5.9544 14.0831L8.69918 8.46963L7.80082 8.03037ZM5.72485 13.4143C3.68742 12.4181 2.50158 10.3763 2.5 8.24963L1.5 8.25037C1.50185 10.7441 2.89229 13.1424 5.28559 14.3126L5.72485 13.4143Z" fill="currentColor"/>\n</svg>\n',
   qoder:

packages/app/src/attachments/file-types.test.ts

@@ -6,6 +6,7 @@ import {
   isRasterImageMimeType,
   isRasterImagePath,
   RASTER_IMAGE_FILE_EXTENSIONS,
+  resolveRasterImageMimeType,
 } from "./file-types";
 
 describe("attachment file types", () => {
@@ -37,4 +38,28 @@ describe("attachment file types", () => {
       new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "heic", "heif", "avif", "tif", "tiff"]),
     );
   });
+
+  it("uses explicit raster MIME metadata before the filename", () => {
+    expect(
+      resolveRasterImageMimeType({ mimeType: "image/jpeg", path: "/tmp/screenshot.png" }),
+    ).toBe("image/jpeg");
+    expect(
+      resolveRasterImageMimeType({
+        mimeType: "image/png; charset=binary",
+        path: "/tmp/screenshot.jpg",
+      }),
+    ).toBe("image/png");
+  });
+
+  it("uses the filename only when MIME metadata is absent", () => {
+    expect(resolveRasterImageMimeType({ mimeType: "", path: "/tmp/screenshot.png" })).toBe(
+      "image/png",
+    );
+    expect(
+      resolveRasterImageMimeType({
+        mimeType: "application/octet-stream",
+        path: "/tmp/screenshot.png",
+      }),
+    ).toBeNull();
+  });
 });

packages/app/src/attachments/file-types.ts

@@ -41,18 +41,31 @@ export function getRasterImageMimeTypeFromPath(path: string): string | null {
   return RASTER_IMAGE_MIME_TYPE_BY_EXTENSION[getFileExtension(path)] ?? null;
 }
 
+export function resolveRasterImageMimeType(input: {
+  mimeType?: string | null;
+  path?: string | null;
+}): string | null {
+  const suppliedMimeType = input.mimeType?.trim();
+  if (suppliedMimeType) {
+    const normalizedMimeType = suppliedMimeType.split(";", 1)[0]?.trim().toLowerCase();
+    if (normalizedMimeType === "image/jpg") {
+      return "image/jpeg";
+    }
+    return normalizedMimeType && RASTER_IMAGE_MIME_TYPES.has(normalizedMimeType)
+      ? normalizedMimeType
+      : null;
+  }
+  return input.path ? getRasterImageMimeTypeFromPath(input.path) : null;
+}
+
 export function isRasterImagePath(path: string): boolean {
   return getRasterImageMimeTypeFromPath(path) !== null;
 }
 
 export function isRasterImageMimeType(mimeType: string | null | undefined): boolean {
-  const normalized = mimeType?.split(";", 1)[0]?.trim().toLowerCase();
-  return Boolean(normalized && RASTER_IMAGE_MIME_TYPES.has(normalized));
+  return resolveRasterImageMimeType({ mimeType }) !== null;
 }
 
 export function isRasterImageFile(file: Pick<File, "name" | "type">): boolean {
-  if (isRasterImageMimeType(file.type)) {
-    return true;
-  }
-  return file.type.trim().length === 0 && isRasterImagePath(file.name);
+  return resolveRasterImageMimeType({ mimeType: file.type, path: file.name }) !== null;
 }

packages/app/src/command-center/command-center.tsx

@@ -31,6 +31,11 @@ import { useAggregatedAgents, type AggregatedAgent } from "@/hooks/use-aggregate
 import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
 import { useOpenAddProject } from "@/hooks/use-open-add-project";
 import { useProjects } from "@/hooks/use-projects";
+import {
+  OverlayLayerProvider,
+  useGlobalWebOverlayLayer,
+  useWebOverlayRegistration,
+} from "@/lib/overlay-root";
 import { useHosts } from "@/runtime/host-runtime";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
@@ -52,6 +57,7 @@ import type { CommandCenterContribution, CommandCenterIconProps } from "./contri
 import { useCommandCenterActions, useCommandCenterContributions } from "./provider";
 import {
   buildContributionSections,
+  joinSubtitleParts,
   moveActiveResultId,
   preserveActiveResultId,
   projectCommandCenterRows,
@@ -203,7 +209,7 @@ function useBuiltInSections(open: boolean, query: string): CommandCenterResultSe
   const { t } = useTranslation();
   const { agents } = useAggregatedAgents();
   const { projects } = useProjects({ enabled: open });
-  const showAgentHost = useHosts().length > 1;
+  const showHost = useHosts().length > 1;
 
   return useMemo(() => {
     if (!open) return [];
@@ -213,9 +219,11 @@ function useBuiltInSections(open: boolean, query: string): CommandCenterResultSe
         for (const workspace of host.workspaces) {
           if (workspace.archivingAt) continue;
           const title = workspace.title ?? workspace.name;
-          const subtitle = workspace.currentBranch
-            ? `${host.serverName} · ${workspace.currentBranch}`
-            : host.serverName;
+          const subtitle = joinSubtitleParts([
+            showHost ? host.serverName : null,
+            project.projectName,
+            workspace.currentBranch,
+          ]);
           const searchText = `${title} ${subtitle}`.toLowerCase();
           allWorkspaces.push({
             kind: "workspace",
@@ -251,13 +259,11 @@ function useBuiltInSections(open: boolean, query: string): CommandCenterResultSe
           ? workspaceTitleByKey.get(`${agent.serverId}:${agent.workspaceId}`)
           : undefined;
         const location = workspaceTitle ?? shortenPath(agent.cwd);
-        const subtitle = [
-          showAgentHost ? agent.serverLabel : null,
+        const subtitle = joinSubtitleParts([
+          showHost ? agent.serverLabel : null,
           location,
           formatTimeAgo(agent.lastActivityAt),
-        ]
-          .filter((part): part is string => Boolean(part))
-          .join(" · ");
+        ]);
         return {
           kind: "agent",
           id: `agent:${agent.serverId}:${agent.id}`,
@@ -282,7 +288,7 @@ function useBuiltInSections(open: boolean, query: string): CommandCenterResultSe
       },
       { id: "agents", rank: 3, title: t("shell.commandCenter.agents"), results: agentResults },
     ];
-  }, [agents, open, projects, query, showAgentHost, t]);
+  }, [agents, open, projects, query, showHost, t]);
 }
 
 interface CommandCenterState {
@@ -371,15 +377,6 @@ function useCommandCenterState(): CommandCenterState {
     return cancel;
   }, [open]);
 
-  useEffect(() => {
-    if (!open || !isWeb) return;
-    const listener = (event: KeyboardEvent) => {
-      if (key(event.key)) event.preventDefault();
-    };
-    window.addEventListener("keydown", listener, true);
-    return () => window.removeEventListener("keydown", listener, true);
-  }, [key, open]);
-
   return {
     open,
     query,
@@ -461,7 +458,11 @@ function ResultContent({ result }: { result: CommandCenterResult }) {
             <Text style={styles.title} numberOfLines={1}>
               {result.title}
             </Text>
-            <Text style={styles.subtitle} numberOfLines={1}>
+            <Text
+              style={styles.subtitle}
+              numberOfLines={1}
+              testID="command-center-workspace-subtitle"
+            >
               {result.subtitle}
             </Text>
           </View>
@@ -548,6 +549,7 @@ export function CommandCenter() {
   const state = useCommandCenterState();
   const isCompact = useIsCompactFormFactor();
   const showBottomSheet = isCompact && isNative;
+  const modalLayer = useGlobalWebOverlayLayer("modal", isWeb && state.open && !showBottomSheet);
   const listRef = useRef<FlatList<CommandCenterListRow>>(null);
   const bottomSheetListRef = useRef<BottomSheetFlatListMethods>(null);
   const bottomSheetInputRef = useRef<React.ElementRef<typeof BottomSheetTextInput>>(null);
@@ -613,6 +615,19 @@ export function CommandCenter() {
     [state],
   );
   const submit = useCallback(() => state.key("Enter"), [state]);
+  const handleWebOverlayKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!state.key(event.key)) return false;
+      event.preventDefault();
+      return true;
+    },
+    [state],
+  );
+  const setWebOverlayScope = useWebOverlayRegistration({
+    active: isWeb && state.open && !showBottomSheet,
+    layer: modalLayer,
+    onKeyDown: handleWebOverlayKeyDown,
+  });
   const backdrop = useCallback(
     (props: React.ComponentProps<typeof BottomSheetBackdrop>) => (
       <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} opacity={0.45} />
@@ -658,27 +673,29 @@ export function CommandCenter() {
   }
   if (!state.open) return null;
   return (
-    <Modal visible transparent animationType="fade" onRequestClose={state.close}>
-      <View style={styles.overlay}>
-        <Pressable style={styles.backdrop} onPress={state.close} />
-        <View testID="command-center-panel" style={styles.panel}>
-          <View style={styles.header}>
-            <ThemedTextInput
-              testID="command-center-input"
-              ref={state.inputRef}
-              value={state.query}
-              onChangeText={state.setQuery}
-              placeholder={t("shell.commandCenter.placeholder")}
-              style={styles.input}
-              autoCapitalize="none"
-              autoCorrect={false}
-              autoFocus
-            />
+    <OverlayLayerProvider layer={isWeb ? modalLayer : 0}>
+      <Modal visible transparent animationType="fade" onRequestClose={state.close}>
+        <View style={styles.overlay}>
+          <Pressable style={styles.backdrop} onPress={state.close} />
+          <View ref={setWebOverlayScope} testID="command-center-panel" style={styles.panel}>
+            <View style={styles.header}>
+              <ThemedTextInput
+                testID="command-center-input"
+                ref={state.inputRef}
+                value={state.query}
+                onChangeText={state.setQuery}
+                placeholder={t("shell.commandCenter.placeholder")}
+                style={styles.input}
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoFocus
+              />
+            </View>
+            <FlatList ref={listRef} style={styles.results} {...commonListProps} />
           </View>
-          <FlatList ref={listRef} style={styles.results} {...commonListProps} />
         </View>
-      </View>
-    </Modal>
+      </Modal>
+    </OverlayLayerProvider>
   );
 }
 

packages/app/src/command-center/results.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import type { CommandCenterContribution } from "./contributions";
 import {
   buildContributionSections,
+  joinSubtitleParts,
   moveActiveResultId,
   preserveActiveResultId,
   projectCommandCenterRows,
@@ -103,3 +104,35 @@ describe("Command Center result projection", () => {
     expect(projection.offsets[151]).toBe(32 + 150 * 56);
   });
 });
+
+describe("joinSubtitleParts", () => {
+  it("joins all present parts with a middle dot", () => {
+    expect(joinSubtitleParts(["a", "b", "c"])).toBe("a · b · c");
+  });
+
+  it("drops null and undefined parts", () => {
+    expect(joinSubtitleParts(["host", null, "master"])).toBe("host · master");
+    expect(joinSubtitleParts(["host", undefined, "master"])).toBe("host · master");
+  });
+
+  it("drops empty strings (Boolean parity — agents subtitle refactor guard)", () => {
+    expect(joinSubtitleParts(["", "paseo", "master"])).toBe("paseo · master");
+  });
+
+  it("returns an empty string when every part is null or empty", () => {
+    expect(joinSubtitleParts([null, undefined, ""])).toBe("");
+  });
+
+  it("returns a single part unchanged, with no separator", () => {
+    expect(joinSubtitleParts([null, "paseo", null])).toBe("paseo");
+  });
+
+  it("builds the workspace subtitle in host · project · branch order", () => {
+    // Single-host: host gated away, project leads.
+    expect(joinSubtitleParts([null, "paseo", "master"])).toBe("paseo · master");
+    // Multi-host: host first, then project, then branch.
+    expect(joinSubtitleParts(["host", "paseo", "master"])).toBe("host · paseo · master");
+    // No branch: degrades to project (or host · project).
+    expect(joinSubtitleParts([null, "paseo", null])).toBe("paseo");
+  });
+});

packages/app/src/command-center/results.ts

@@ -63,6 +63,11 @@ function matchesQuery(searchText: string, query: string): boolean {
   return !normalized || searchText.includes(normalized);
 }
 
+/** Join non-empty subtitle parts with " · ", dropping null/undefined/empty. */
+export function joinSubtitleParts(parts: readonly (string | null | undefined)[]): string {
+  return parts.filter((part): part is string => Boolean(part)).join(" · ");
+}
+
 function contributionSearchText(contribution: CommandCenterContribution): string {
   const presentationText =
     contribution.presentation.kind === "action"

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

@@ -3,17 +3,23 @@ import type { ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
-import type { TextInputProps } from "react-native";
+import type { StyleProp, TextInputProps, ViewStyle } from "react-native";
 import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
-import { getOverlayRoot, OVERLAY_Z } from "../lib/overlay-root";
+import {
+  getOverlayRoot,
+  OverlayLayerProvider,
+  useGlobalWebOverlayLayer,
+  useWebOverlayRegistration,
+} from "../lib/overlay-root";
 import {
   BottomSheetBackdrop,
   BottomSheetScrollView,
   BottomSheetTextInput,
+  useBottomSheetInternal,
   type BottomSheetBackgroundProps,
 } from "@gorhom/bottom-sheet";
-import Animated from "react-native-reanimated";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
 import { ArrowLeft, Search, X } from "lucide-react-native";
 import {
   IsolatedBottomSheetModal,
@@ -53,36 +59,8 @@ export interface SheetHeader {
   search?: SheetHeaderSearch;
 }
 
-type EscHandler = () => void;
-const escStack: EscHandler[] = [];
-let escListenerAttached = false;
 const ABSOLUTE_FILL_STYLE = { ...StyleSheet.absoluteFillObject };
 
-function handleEscKeyDown(event: KeyboardEvent) {
-  if (event.key !== "Escape") return;
-  const top = escStack[escStack.length - 1];
-  if (!top) return;
-  event.stopPropagation();
-  event.preventDefault();
-  top();
-}
-
-function pushEscHandler(handler: EscHandler): () => void {
-  escStack.push(handler);
-  if (!escListenerAttached && typeof window !== "undefined") {
-    window.addEventListener("keydown", handleEscKeyDown, true);
-    escListenerAttached = true;
-  }
-  return () => {
-    const index = escStack.lastIndexOf(handler);
-    if (index !== -1) escStack.splice(index, 1);
-    if (escStack.length === 0 && escListenerAttached && typeof window !== "undefined") {
-      window.removeEventListener("keydown", handleEscKeyDown, true);
-      escListenerAttached = false;
-    }
-  };
-}
-
 const styles = StyleSheet.create((theme) => ({
   desktopOverlay: {
     ...StyleSheet.absoluteFillObject,
@@ -90,7 +68,6 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
     alignItems: "center",
     padding: theme.spacing[6],
-    zIndex: OVERLAY_Z.modal,
     pointerEvents: "auto" as const,
   },
   desktopCard: {
@@ -203,6 +180,14 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[4],
     minHeight: 0,
   },
+  bottomSheetVisibleContent: {
+    minHeight: 0,
+    overflow: "hidden",
+  },
+  bottomSheetVisibleScroll: {
+    flex: 1,
+    minHeight: 0,
+  },
   desktopStaticContent: {
     flexShrink: 1,
     minHeight: 0,
@@ -248,6 +233,39 @@ function SheetBackground({ style }: BottomSheetBackgroundProps) {
   return <Animated.View pointerEvents="none" style={combinedStyle} />;
 }
 
+function BottomSheetVisibleContent({ children }: { children: ReactNode }) {
+  const { animatedDetentsState, animatedKeyboardState, animatedLayoutState, animatedPosition } =
+    useBottomSheetInternal();
+  const visibleContentStyle = useAnimatedStyle(() => {
+    const { containerHeight, handleHeight } = animatedLayoutState.get();
+    if (containerHeight < 0 || handleHeight < 0) {
+      return { height: 0 };
+    }
+
+    const initialDetentPosition = animatedDetentsState.get().detents?.[0];
+    const contentPosition =
+      initialDetentPosition == null
+        ? animatedPosition.get()
+        : Math.min(animatedPosition.get(), initialDetentPosition);
+
+    return {
+      height: Math.max(
+        0,
+        containerHeight -
+          contentPosition -
+          handleHeight -
+          animatedKeyboardState.get().heightWithinContainer,
+      ),
+    };
+  }, [animatedDetentsState, animatedKeyboardState, animatedLayoutState, animatedPosition]);
+
+  return (
+    <Animated.View style={[styles.bottomSheetVisibleContent, visibleContentStyle]}>
+      {children}
+    </Animated.View>
+  );
+}
+
 export type AdaptiveTextInputProps = TextInputProps & {
   initialValue?: string;
   resetKey?: string | number;
@@ -452,12 +470,16 @@ export interface AdaptiveModalSheetProps {
   children: ReactNode;
   /** Sticky footer rendered below the scrollable content. */
   footer?: ReactNode;
+  footerContainerStyle?: StyleProp<ViewStyle>;
   snapPoints?: string[];
   testID?: string;
   /** Override the max width of the desktop card. */
   desktopMaxWidth?: number;
   scrollable?: boolean;
   presentation?: "push" | "replace";
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  /** Size compact sheet content to the live snap height instead of its largest snap point. */
+  sizeContentToCurrentSnapPoint?: boolean;
 }
 
 export function AdaptiveModalSheet({
@@ -467,11 +489,14 @@ export function AdaptiveModalSheet({
   onDismiss,
   children,
   footer,
+  footerContainerStyle,
   snapPoints,
   testID,
   desktopMaxWidth,
   scrollable = true,
   presentation,
+  contentContainerStyle,
+  sizeContentToCurrentSnapPoint = false,
 }: AdaptiveModalSheetProps) {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
@@ -490,31 +515,37 @@ export function AdaptiveModalSheet({
     [footer, insets.bottom, isMobile, theme.spacing],
   );
   const bottomSheetContentStyle = useMemo(
+    // Gorhom spreads this outer array into StyleSheet.compose, which accepts two arguments on web.
     () => [
       styles.bottomSheetContent,
-      compactSafeAreaPadding.contentPaddingBottom != null
-        ? { paddingBottom: compactSafeAreaPadding.contentPaddingBottom }
-        : null,
+      [
+        contentContainerStyle,
+        compactSafeAreaPadding.contentPaddingBottom != null
+          ? { paddingBottom: compactSafeAreaPadding.contentPaddingBottom }
+          : null,
+      ],
     ],
-    [compactSafeAreaPadding.contentPaddingBottom],
+    [compactSafeAreaPadding.contentPaddingBottom, contentContainerStyle],
   );
   const bottomSheetStaticContentStyle = useMemo(
     () => [
       styles.bottomSheetStaticContent,
+      contentContainerStyle,
       compactSafeAreaPadding.contentPaddingBottom != null
         ? { paddingBottom: compactSafeAreaPadding.contentPaddingBottom }
         : null,
     ],
-    [compactSafeAreaPadding.contentPaddingBottom],
+    [compactSafeAreaPadding.contentPaddingBottom, contentContainerStyle],
   );
   const footerStyle = useMemo(
     () => [
       styles.footer,
+      footerContainerStyle,
       compactSafeAreaPadding.footerPaddingBottom != null
         ? { paddingBottom: compactSafeAreaPadding.footerPaddingBottom }
         : null,
     ],
-    [compactSafeAreaPadding.footerPaddingBottom],
+    [compactSafeAreaPadding.footerPaddingBottom, footerContainerStyle],
   );
   const handleIndicatorStyle = useMemo(
     () => ({ backgroundColor: theme.colors.palette.zinc[600] }),
@@ -527,6 +558,7 @@ export function AdaptiveModalSheet({
   });
   const [shouldRenderWeb, setShouldRenderWeb] = useState(visible);
   const [isWebClosing, setIsWebClosing] = useState(false);
+  const modalLayer = useGlobalWebOverlayLayer("modal", isWeb && !isMobile && shouldRenderWeb);
   const nativeModalDismissNotifiedRef = useRef(!visible);
   const handleDismiss = useCallback(() => {
     handleSheetDismiss();
@@ -555,19 +587,31 @@ export function AdaptiveModalSheet({
     () => [
       styles.desktopOverlay,
       isWeb && {
+        zIndex: modalLayer,
         opacity: isWebClosing ? 0 : 1,
         transitionDuration: `${WEB_EXIT_DURATION_MS}ms`,
         transitionProperty: "opacity",
         transitionTimingFunction: "ease",
       },
     ],
-    [isWebClosing],
+    [isWebClosing, modalLayer],
   );
 
-  useEffect(() => {
-    if (!isWeb || isMobile || !visible) return;
-    return pushEscHandler(onClose);
-  }, [visible, isMobile, onClose]);
+  const handleWebOverlayKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return false;
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+      return true;
+    },
+    [onClose],
+  );
+  const setWebOverlayScope = useWebOverlayRegistration({
+    active: isWeb && !isMobile && visible,
+    layer: modalLayer,
+    onKeyDown: handleWebOverlayKeyDown,
+  });
 
   useEffect(() => {
     if (visible) {
@@ -599,6 +643,25 @@ export function AdaptiveModalSheet({
   }, [visible, isMobile, notifyNativeModalDismiss]);
 
   if (isMobile) {
+    const sheetContent = (
+      <>
+        <SheetHeaderView header={header} onClose={onClose} testID={testID} />
+        {scrollable ? (
+          <BottomSheetScrollView
+            style={sizeContentToCurrentSnapPoint ? styles.bottomSheetVisibleScroll : undefined}
+            contentContainerStyle={bottomSheetContentStyle}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            {children}
+          </BottomSheetScrollView>
+        ) : (
+          <View style={bottomSheetStaticContentStyle}>{children}</View>
+        )}
+        {footer ? <View style={footerStyle}>{footer}</View> : null}
+      </>
+    );
+
     return (
       <IsolatedBottomSheetModal
         ref={sheetRef}
@@ -616,31 +679,23 @@ export function AdaptiveModalSheet({
         accessible={false}
         presentation={presentation}
       >
-        <SheetHeaderView header={header} onClose={onClose} testID={testID} />
-        {scrollable ? (
-          <BottomSheetScrollView
-            contentContainerStyle={bottomSheetContentStyle}
-            keyboardShouldPersistTaps="handled"
-            showsVerticalScrollIndicator={false}
-          >
-            {children}
-          </BottomSheetScrollView>
+        {sizeContentToCurrentSnapPoint ? (
+          <BottomSheetVisibleContent>{sheetContent}</BottomSheetVisibleContent>
         ) : (
-          <View style={bottomSheetStaticContentStyle}>{children}</View>
+          sheetContent
         )}
-        {footer ? <View style={footerStyle}>{footer}</View> : null}
       </IsolatedBottomSheetModal>
     );
   }
 
   const cardInner = (
-    <>
+    <OverlayLayerProvider layer={modalLayer}>
       <SheetHeaderView header={header} onClose={onClose} />
       {scrollable ? (
         <View style={styles.desktopScrollContainer}>
           <ScrollView
             style={styles.desktopScroll}
-            contentContainerStyle={styles.desktopContent}
+            contentContainerStyle={[styles.desktopContent, contentContainerStyle]}
             keyboardShouldPersistTaps="handled"
             showsVerticalScrollIndicator
           >
@@ -648,10 +703,10 @@ export function AdaptiveModalSheet({
           </ScrollView>
         </View>
       ) : (
-        <View style={styles.desktopStaticContent}>{children}</View>
+        <View style={[styles.desktopStaticContent, contentContainerStyle]}>{children}</View>
       )}
       {footer ? <View style={footerStyle}>{footer}</View> : null}
-    </>
+    </OverlayLayerProvider>
   );
 
   const desktopContent = (
@@ -661,7 +716,15 @@ export function AdaptiveModalSheet({
         style={ABSOLUTE_FILL_STYLE}
         onPress={onClose}
       />
-      <View style={desktopCardStyle}>{cardInner}</View>
+      <View
+        ref={setWebOverlayScope}
+        style={desktopCardStyle}
+        role="dialog"
+        aria-modal
+        tabIndex={-1}
+      >
+        {cardInner}
+      </View>
     </View>
   );
 

packages/app/src/components/add-project-flow.tsx

@@ -11,7 +11,15 @@ import {
   Search,
   Server,
 } from "lucide-react-native";
-import { useCallback, useEffect, useMemo, useRef, useState, type ComponentType } from "react";
+import {
+  createElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+} from "react";
 import {
   Modal,
   Pressable,
@@ -66,6 +74,11 @@ import { useFetchQuery } from "@/data/query";
 import { getOpenProjectFailureReason, registerProjectDescriptor } from "@/hooks/open-project";
 import { useIsLocalDaemon, useLocalDaemonServerId } from "@/hooks/use-is-local-daemon";
 import { useCloneGithubProject, useOpenProject } from "@/hooks/use-open-project";
+import {
+  OverlayLayerProvider,
+  useGlobalWebOverlayLayer,
+  useWebOverlayRegistration,
+} from "@/lib/overlay-root";
 import {
   useHosts,
   useHostRuntimeClient,
@@ -769,14 +782,20 @@ export function AddProjectFlow({ request, onClose }: AddProjectFlowProps) {
     [activeIndex, handleBack, rows, submitActive],
   );
 
-  useEffect(() => {
-    if (!isWeb || typeof window === "undefined") return;
-    const listener = (event: KeyboardEvent) => {
-      if (handleKey(event.key)) event.preventDefault();
-    };
-    window.addEventListener("keydown", listener, true);
-    return () => window.removeEventListener("keydown", listener, true);
-  }, [handleKey]);
+  const modalLayer = useGlobalWebOverlayLayer("modal", isWeb);
+  const handleWebOverlayKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!handleKey(event.key)) return false;
+      event.preventDefault();
+      return true;
+    },
+    [handleKey],
+  );
+  const setWebOverlayScope = useWebOverlayRegistration({
+    active: isWeb,
+    layer: modalLayer,
+    onKeyDown: handleWebOverlayKeyDown,
+  });
 
   const handleNativeKeyPress = useCallback(
     ({ nativeEvent: { key } }: { nativeEvent: { key: string } }) => {
@@ -816,11 +835,12 @@ export function AddProjectFlow({ request, onClose }: AddProjectFlowProps) {
       ? joinDirectoryPath(page.parentPath, page.name.trim())
       : null;
 
-  return (
+  const modal = (
     <Modal visible transparent animationType="fade" onRequestClose={isWeb ? undefined : handleBack}>
       <View style={styles.overlay} testID="add-project-flow">
         <Pressable style={styles.backdrop} onPress={onClose} testID="add-project-flow-backdrop" />
         <View
+          ref={setWebOverlayScope}
           style={styles.panel}
           testID={`add-project-flow-page-${page.kind}`}
           accessibilityLabel={`Add project: ${page.kind}`}
@@ -913,6 +933,8 @@ export function AddProjectFlow({ request, onClose }: AddProjectFlowProps) {
       </View>
     </Modal>
   );
+
+  return createElement(OverlayLayerProvider, { layer: isWeb ? modalLayer : 0 }, modal);
 }
 
 const styles = StyleSheet.create((theme) => ({

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

@@ -18,17 +18,16 @@ interface ContextWindowMeterProps {
   provider?: string | null;
   /** Reserve the meter footprint and show a loading ring while usage is pending. */
   pending?: boolean;
+  /** Optional glyph envelope for icon-toolbar alignment. */
+  glyphSize?: number;
 }
 
 const SVG_SIZE = 14;
 const COMPACT_SVG_SIZE = 12;
-const CENTER = SVG_SIZE / 2;
 const COMPACT_CENTER = COMPACT_SVG_SIZE / 2;
-const RADIUS = 6;
 const COMPACT_RADIUS = 5;
 const STROKE_WIDTH = 2;
 const COMPACT_STROKE_WIDTH = 1.75;
-const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const COMPACT_CIRCUMFERENCE = 2 * Math.PI * COMPACT_RADIUS;
 
 function isValidMaxTokens(value: number): boolean {
@@ -74,7 +73,7 @@ function getMeterColors(
   return { progress: theme.colors.foregroundMuted, track };
 }
 
-function getMeterGeometry(showPercentage: boolean) {
+function getMeterGeometry(showPercentage: boolean, glyphSize?: number) {
   if (showPercentage) {
     return {
       svgSize: COMPACT_SVG_SIZE,
@@ -85,12 +84,14 @@ function getMeterGeometry(showPercentage: boolean) {
       containerStyle: styles.containerWithLabel,
     };
   }
+  const resolvedSize = glyphSize ?? SVG_SIZE;
+  const resolvedStrokeWidth = glyphSize ? 2 : STROKE_WIDTH;
   return {
-    svgSize: SVG_SIZE,
-    center: CENTER,
-    radius: RADIUS,
-    strokeWidth: STROKE_WIDTH,
-    circumference: CIRCUMFERENCE,
+    svgSize: resolvedSize,
+    center: resolvedSize / 2,
+    radius: (resolvedSize - resolvedStrokeWidth) / 2,
+    strokeWidth: resolvedStrokeWidth,
+    circumference: Math.PI * (resolvedSize - resolvedStrokeWidth),
     containerStyle: styles.container,
   };
 }
@@ -103,6 +104,7 @@ export function ContextWindowMeter({
   serverId,
   provider,
   pending = false,
+  glyphSize,
 }: ContextWindowMeterProps) {
   const { theme } = useUnistyles();
   const { t } = useTranslation();
@@ -123,7 +125,7 @@ export function ContextWindowMeter({
     [refreshProviderUsage],
   );
 
-  const geometry = getMeterGeometry(showPercentage);
+  const geometry = getMeterGeometry(showPercentage, glyphSize);
 
   // No usage yet: reserve the footprint with a track-only ring while a session is
   // active so the real ring fades in without shifting siblings. Render nothing when

packages/app/src/components/dictation-controls.tsx

@@ -1,5 +1,6 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useMemo } from "react";
-import { View, Text, Pressable, ActivityIndicator } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { X, ArrowUp, RefreshCcw, Check, Mic, Pencil } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
@@ -98,7 +99,7 @@ export function DictationControls({
         </Pressable>
         {actionsDisabled ? (
           <View style={styles.loadingContainer}>
-            <ActivityIndicator size="small" color={theme.colors.foreground} />
+            <LoadingSpinner size="small" color={theme.colors.foreground} />
           </View>
         ) : null}
         {!actionsDisabled && isFailed ? (
@@ -221,7 +222,7 @@ export function DictationOverlay({
       <View style={overlayStyles.actionButtonsContainer}>
         {actionsDisabled ? (
           <View style={overlayStyles.loadingContainer}>
-            <ActivityIndicator size="small" color={theme.colors.accentForeground} />
+            <LoadingSpinner size="small" color={theme.colors.accentForeground} />
           </View>
         ) : null}
         {!actionsDisabled && isFailed ? (

packages/app/src/components/download-toast.tsx

@@ -1,7 +1,8 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Check, X, XCircle } from "lucide-react-native";
@@ -69,7 +70,7 @@ export function DownloadToast() {
     <View style={containerStyle} pointerEvents="box-none">
       <View style={styles.toast}>
         {activeDownload.status === "downloading" ? (
-          <ActivityIndicator size="small" color={theme.colors.foreground} />
+          <LoadingSpinner size="small" color={theme.colors.foreground} />
         ) : null}
         {activeDownload.status === "complete" ? (
           <Check size={18} color={theme.colors.primary} />

packages/app/src/components/file-drop/use-drop-listeners.ts

@@ -5,9 +5,9 @@ import type { ImageAttachment } from "@/composer/types";
 import { getDesktopHost } from "@/desktop/host";
 import { persistAttachmentFromBlob, persistAttachmentFromFileUri } from "@/attachments/service";
 import {
-  getRasterImageMimeTypeFromPath,
   isRasterImageFile,
   isRasterImagePath,
+  resolveRasterImageMimeType,
 } from "@/attachments/file-types";
 import { isWeb } from "@/constants/platform";
 import type { DroppedItem, DroppedPathItem, FileDropSink } from "./types";
@@ -27,14 +27,21 @@ interface DesktopDragDropEvent {
 }
 
 async function filePathToImageAttachment(path: string): Promise<ImageAttachment> {
-  const mimeType = getRasterImageMimeTypeFromPath(path) ?? "image/jpeg";
+  const mimeType = resolveRasterImageMimeType({ path });
+  if (!mimeType) {
+    throw new Error(`Unsupported image type for '${path}'.`);
+  }
   return await persistAttachmentFromFileUri({ uri: path, mimeType });
 }
 
 async function fileToImageAttachment(file: File): Promise<ImageAttachment> {
+  const mimeType = resolveRasterImageMimeType({ mimeType: file.type, path: file.name });
+  if (!mimeType) {
+    throw new Error(`Unsupported image type for '${file.name}'.`);
+  }
   return await persistAttachmentFromBlob({
     blob: file,
-    mimeType: file.type || "image/jpeg",
+    mimeType,
     fileName: file.name,
   });
 }

packages/app/src/components/file-explorer-pane.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, type ReactElement, type RefObj
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import {
-  ActivityIndicator,
   FlatList,
   ListRenderItemInfo,
   Pressable,
@@ -12,7 +11,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import * as Clipboard from "expo-clipboard";
 import { ChevronDown, Eye, EyeOff, RotateCw } from "lucide-react-native";
@@ -24,6 +23,7 @@ import {
   WORKSPACE_FILE_ROW_VERTICAL_PADDING,
 } from "@/components/tree-primitives";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import type { Theme } from "@/styles/theme";
 import type { AgentFileExplorerState, ExplorerEntry } from "@/stores/session-store";
 import { useSessionStore } from "@/stores/session-store";
 import { FileActionsMenu } from "@/components/file-actions-menu";
@@ -42,6 +42,11 @@ const SORT_OPTIONS: { value: SortOption }[] = [
   { value: "size" },
 ];
 
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+const foregroundMutedColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+
 function formatFileSize({ size }: { size: number }): string {
   if (size < 1024) {
     return `${size} B`;
@@ -163,7 +168,9 @@ function TreeRowItem({
             if (!isDirectory) {
               return <MaterialFileIcon fileName={entry.name} size={16} />;
             }
-            if (loading) return <ActivityIndicator size="small" />;
+            if (loading) {
+              return <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />;
+            }
             return <TreeChevron expanded={isExpanded} />;
           })()}
         </View>
@@ -549,7 +556,7 @@ function FileExplorerPaneContent(props: FileExplorerPaneContentProps) {
   if (showInitialLoading) {
     return (
       <View style={styles.centerState}>
-        <ActivityIndicator size="small" />
+        <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
         <Text style={styles.loadingText}>{t("workspace.fileExplorer.states.loading")}</Text>
       </View>
     );

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

@@ -7,7 +7,7 @@ interface OmpIconProps {
 
 export function OmpIcon({ size = 16, color = "currentColor" }: OmpIconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 64 64" fill={color}>
+    <Svg width={size} height={size} viewBox="4 4 56 56" fill={color}>
       <Path d="M10 14h44v9H43v33h-9V23h-9v22h-9V23H10z" />
     </Svg>
   );

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

@@ -7,7 +7,7 @@ interface PiIconProps {
 
 export function PiIcon({ size = 16, color = "currentColor" }: PiIconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 800 800" fill={color}>
+    <Svg width={size} height={size} viewBox="100 100 600 600" fill={color}>
       <Path
         d="M165.29 165.29 H517.36 V400 H400 V517.36 H282.65 V634.72 H165.29 Z M282.65 282.65 V400 H400 V282.65 Z"
         fill={color}

packages/app/src/components/message.tsx

@@ -1,9 +1,9 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   View,
   Text,
   Image,
   Pressable,
-  ActivityIndicator,
   type GestureResponderEvent,
   type LayoutChangeEvent,
   StyleProp,
@@ -172,6 +172,7 @@ const ThemedTodoCheckIcon = withUnistyles(Check);
 const ThemedFileSymlinkIcon = withUnistyles(FileSymlink);
 const ThemedTriangleAlertIcon = withUnistyles(TriangleAlertIcon);
 const ThemedChevronRightIcon = withUnistyles(ChevronRight);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 
 const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const foregroundMutedColorMapping = (theme: Theme) => ({
@@ -865,7 +866,9 @@ const AssistantMarkdownResolvedImage = memo(function AssistantMarkdownResolvedIm
     return (
       <View style={frameStyle}>
         <View style={stateSurfaceStyle}>
-          {loadState.status === "loading" ? <ActivityIndicator size="small" /> : null}
+          {loadState.status === "loading" ? (
+            <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+          ) : null}
           {loadState.status === "error" ? (
             <Text style={assistantMessageStylesheet.imageErrorText}>
               {t("message.attachments.imageUnavailable")}
@@ -1004,7 +1007,7 @@ function AssistantMarkdownImage({
   if (query.isLoading || dataImageQuery.isLoading) {
     return (
       <View style={stateFrameStyle}>
-        <ActivityIndicator size="small" />
+        <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
       </View>
     );
   }
@@ -2244,7 +2247,7 @@ export const CompactionMarker = memo(function CompactionMarker({
       <View style={compactionStylesheet.line} />
       <View style={compactionStylesheet.label}>
         {status === "loading" ? (
-          <ActivityIndicator size="small" color="#a1a1aa" />
+          <LoadingSpinner size="small" color="#a1a1aa" />
         ) : (
           <Scissors size={12} color="#a1a1aa" />
         )}
@@ -2657,7 +2660,9 @@ function computeShimmerMetrics(input: {
     Math.min(120, input.labelRowWidth > 0 ? input.labelRowWidth * 0.28 : 0),
   );
   const isWebShimmer = input.isLoading && isWeb;
-  const shouldMeasureWebShimmer = isWebShimmer;
+  // React Native Web only observes a node when onLayout exists at mount. Keep
+  // measuring while idle so a retained badge has dimensions when it starts loading.
+  const shouldMeasureWebShimmer = isWeb;
   const shouldMeasureNativeShimmer = input.isLoading && isNative;
   const isNativeShimmer =
     shouldMeasureNativeShimmer && input.labelRowWidth > 0 && input.labelRowHeight > 0;

packages/app/src/components/model-browser-view.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";
+import { resolveInitialModelBrowserView } from "./model-browser-view";
+
+function provider(id: string, label: string): ProviderSelectorProvider {
+  return {
+    id,
+    label,
+    modelSelection: { kind: "models", rows: [] },
+  };
+}
+
+describe("model browser initial view", () => {
+  const codex = provider("codex", "Codex");
+  const pi = provider("pi", "Pi");
+
+  it("opens a sole provider directly", () => {
+    expect(
+      resolveInitialModelBrowserView({
+        providers: [pi],
+        selectedProvider: "",
+        selectedModel: "",
+        favoriteKeys: new Set(),
+      }),
+    ).toEqual({ kind: "provider", providerId: "pi", providerLabel: "Pi" });
+  });
+
+  it("opens the selected provider when its model is not a favorite", () => {
+    expect(
+      resolveInitialModelBrowserView({
+        providers: [codex, pi],
+        selectedProvider: "pi",
+        selectedModel: "pi-pro",
+        favoriteKeys: new Set(),
+      }),
+    ).toEqual({ kind: "provider", providerId: "pi", providerLabel: "Pi" });
+  });
+
+  it("opens the provider overview when the selected model is a favorite", () => {
+    expect(
+      resolveInitialModelBrowserView({
+        providers: [codex, pi],
+        selectedProvider: "pi",
+        selectedModel: "pi-pro",
+        favoriteKeys: new Set(["pi:pi-pro"]),
+      }),
+    ).toEqual({ kind: "all" });
+  });
+});

packages/app/src/components/model-browser-view.ts

@@ -0,0 +1,40 @@
+import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";
+
+export type ModelBrowserView =
+  | { kind: "all" }
+  | { kind: "provider"; providerId: string; providerLabel: string };
+
+export function resolveInitialModelBrowserView({
+  providers,
+  selectedProvider,
+  selectedModel,
+  favoriteKeys,
+}: {
+  providers: ProviderSelectorProvider[];
+  selectedProvider: string;
+  selectedModel: string;
+  favoriteKeys: Set<string>;
+}): ModelBrowserView {
+  const singleProvider = providers.length === 1 ? providers[0] : undefined;
+  if (singleProvider) {
+    return {
+      kind: "provider",
+      providerId: singleProvider.id,
+      providerLabel: singleProvider.label,
+    };
+  }
+
+  const selectedFavoriteKey = `${selectedProvider}:${selectedModel}`;
+  const shouldOpenSelectedProvider =
+    selectedProvider.length > 0 &&
+    selectedModel.length > 0 &&
+    !favoriteKeys.has(selectedFavoriteKey);
+  if (shouldOpenSelectedProvider) {
+    const provider = providers.find((entry) => entry.id === selectedProvider);
+    if (provider) {
+      return { kind: "provider", providerId: provider.id, providerLabel: provider.label };
+    }
+  }
+
+  return { kind: "all" };
+}

packages/app/src/components/provider-diagnostic-sheet.tsx

@@ -3,13 +3,7 @@ import { AlertTriangle, Copy, FileText, Plus, RotateCw, Trash2 } from "lucide-re
 import type { TFunction } from "i18next";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  Pressable,
-  type PressableStateCallbackType,
-  Text,
-  View,
-} from "react-native";
+import { Pressable, type PressableStateCallbackType, Text, View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import {
   AdaptiveModalSheet,
@@ -365,7 +359,7 @@ function DiagnosticSubSheet({
     body = (
       <SurfaceCard key={visible ? "visible" : "hidden"}>
         <View style={sheetStyles.codeBlockLoading}>
-          <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+          <LoadingSpinner size="small" color={theme.colors.foregroundMuted} />
           <Text style={sheetStyles.mutedText}>{t("settings.providers.diagnostic.running")}</Text>
         </View>
       </SurfaceCard>
@@ -504,7 +498,7 @@ function ProviderModalBody(props: ProviderModalBodyProps) {
   if (discoveredCount === 0 && additionalCount === 0 && providerSnapshotRefreshing) {
     return (
       <View style={sheetStyles.emptyState}>
-        <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+        <LoadingSpinner size="small" color={theme.colors.foregroundMuted} />
         <Text style={sheetStyles.mutedText}>{t("settings.providers.models.loading")}</Text>
       </View>
     );

packages/app/src/components/provider-settings-host.tsx

@@ -1,11 +1,13 @@
 import { useCallback } from "react";
 import { ProviderDiagnosticSheet } from "@/components/provider-diagnostic-sheet";
+import { OverlayLayerProvider } from "@/lib/overlay-root";
 import { useProviderSettingsStore } from "@/stores/provider-settings-store";
 
 export function ProviderSettingsHost() {
   const serverId = useProviderSettingsStore((state) => state.serverId);
   const provider = useProviderSettingsStore((state) => state.provider);
   const visible = useProviderSettingsStore((state) => state.visible);
+  const overlayParentLayer = useProviderSettingsStore((state) => state.overlayParentLayer);
   const close = useProviderSettingsStore((state) => state.close);
 
   const handleClose = useCallback(() => {
@@ -17,12 +19,14 @@ export function ProviderSettingsHost() {
   }
 
   return (
-    <ProviderDiagnosticSheet
-      key={`${serverId}:${provider}`}
-      provider={provider}
-      serverId={serverId}
-      visible={visible}
-      onClose={handleClose}
-    />
+    <OverlayLayerProvider layer={overlayParentLayer}>
+      <ProviderDiagnosticSheet
+        key={`${serverId}:${provider}`}
+        provider={provider}
+        serverId={serverId}
+        visible={visible}
+        onClose={handleClose}
+      />
+    </OverlayLayerProvider>
   );
 }

packages/app/src/components/question-form-card.tsx

@@ -1,12 +1,6 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useState, useCallback, useMemo } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  Pressable,
-  ActivityIndicator,
-  type PressableStateCallbackType,
-} from "react-native";
+import { View, Text, TextInput, Pressable, type PressableStateCallbackType } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { Check, X } from "lucide-react-native";
@@ -581,7 +575,7 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
           testID="question-form-dismiss"
         >
           {respondingAction === "dismiss" ? (
-            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+            <LoadingSpinner size="small" color={theme.colors.foregroundMuted} />
           ) : (
             <View style={styles.actionContent}>
               <X size={14} color={theme.colors.foregroundMuted} />
@@ -599,7 +593,7 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
           testID="question-form-primary-action"
         >
           {respondingAction === "submit" ? (
-            <ActivityIndicator size="small" color={theme.colors.accentForeground} />
+            <LoadingSpinner size="small" color={theme.colors.accentForeground} />
           ) : (
             <View style={styles.actionContent}>
               <Check size={14} color={submitActionTextColor} />

packages/app/src/components/realtime-voice-overlay.tsx

@@ -1,6 +1,7 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Mic, MicOff, Square } from "lucide-react-native";
 import { FOOTER_HEIGHT } from "@/constants/layout";
@@ -75,7 +76,7 @@ export function RealtimeVoiceOverlay({
           style={stopButtonStyle}
         >
           {isSwitching ? (
-            <ActivityIndicator size="small" color={theme.colors.palette.white} />
+            <LoadingSpinner size="small" color={theme.colors.palette.white} />
           ) : (
             <Square
               size={theme.iconSize.lg}

packages/app/src/components/sidebar-workspace-list.tsx

@@ -1,8 +1,8 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   View,
   Text,
   Pressable,
-  ActivityIndicator,
   ScrollView,
   type GestureResponderEvent,
   type PressableStateCallbackType,
@@ -143,7 +143,7 @@ const DEFAULT_STATUS_DOT_OFFSET = 0;
 const EMPHASIZED_STATUS_DOT_OFFSET = -1;
 const ThemedExternalLink = withUnistyles(ExternalLink);
 const ThemedGitPullRequest = withUnistyles(GitPullRequest);
-const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedCircleAlert = withUnistyles(CircleAlert);
 const ThemedSyncedLoader = withUnistyles(SyncedLoader);
 const ThemedPlus = withUnistyles(Plus);
@@ -746,7 +746,7 @@ function ProjectLeadingVisualStatus({
   if (isArchiving) {
     return (
       <View style={styles.projectLeadingVisualSlot}>
-        <ThemedActivityIndicator size={8} uniProps={foregroundMutedColorMapping} />
+        <ThemedLoadingSpinner size={8} uniProps={foregroundMutedColorMapping} />
       </View>
     );
   }
@@ -855,7 +855,7 @@ function NewWorktreeButton({
           >
             {({ hovered, pressed }) =>
               loading ? (
-                <ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} />
+                <ThemedLoadingSpinner size={14} uniProps={foregroundMutedColorMapping} />
               ) : (
                 <ThemedPlus
                   size={15}
@@ -1368,17 +1368,6 @@ function WorkspaceRowWithMenu({
     },
   });
 
-  useKeyboardActionHandler({
-    handlerId: `workspace-pin-${workspace.workspaceKey}`,
-    actions: ["workspace.pin"],
-    enabled: selected && canPin,
-    priority: 0,
-    handle: () => {
-      onTogglePin?.();
-      return true;
-    },
-  });
-
   return (
     <>
       <WorkspaceRowInner

packages/app/src/components/sidebar/sidebar-status-list.tsx

@@ -549,17 +549,6 @@ function StatusWorkspaceRowWithMenu({
     },
   });
 
-  useKeyboardActionHandler({
-    handlerId: `workspace-pin-${workspace.workspaceKey}`,
-    actions: ["workspace.pin"],
-    enabled: selected && canPin,
-    priority: 0,
-    handle: () => {
-      onTogglePin?.();
-      return true;
-    },
-  });
-
   return (
     <>
       <StatusWorkspaceRowInner

packages/app/src/components/sidebar/sidebar-workspace-row-content.tsx

@@ -1,13 +1,7 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { memo, useCallback, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  Pressable,
-  Text,
-  View,
-  type GestureResponderEvent,
-  type ViewStyle,
-} from "react-native";
+import { Pressable, Text, View, type GestureResponderEvent, type ViewStyle } from "react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import {
   CircleAlert,
@@ -54,7 +48,7 @@ const purpleColorMapping = (theme: Theme) => ({ color: theme.colors.palette.purp
 
 const ThemedExternalLink = withUnistyles(ExternalLink);
 const ThemedGitPullRequest = withUnistyles(GitPullRequest);
-const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedCircleAlert = withUnistyles(CircleAlert);
 const ThemedSyncedLoader = withUnistyles(SyncedLoader);
 const ThemedMonitor = withUnistyles(Monitor);
@@ -207,7 +201,7 @@ function WorkspaceStatusIndicator({
   if (loading) {
     return (
       <View style={styles.workspaceStatusDot} testID="workspace-status-indicator-loading">
-        <ThemedActivityIndicator size={8} uniProps={foregroundMutedColorMapping} />
+        <ThemedLoadingSpinner size={8} uniProps={foregroundMutedColorMapping} />
       </View>
     );
   }

packages/app/src/components/split-container-pane-focus.ts

@@ -4,7 +4,6 @@ const INTERACTIVE_TARGET_SELECTOR = [
   "select",
   "[role='button']",
   "[role='link']",
-  "[contenteditable='true']",
   "[data-paseo-pane-focus-exempt='true']",
 ].join(", ");
 

packages/app/src/components/split-container.tsx

@@ -95,6 +95,7 @@ interface SplitContainerProps {
   onCloseTab: (tabId: string) => Promise<void> | void;
   onCopyResumeCommand: (agentId: string) => Promise<void> | void;
   onCopyAgentId: (agentId: string) => Promise<void> | void;
+  onCopyTerminalId: (terminalId: string) => Promise<void> | void;
   onCopyFilePath: (path: string) => Promise<void> | void;
   onReloadAgent: (agentId: string) => Promise<void> | void;
   onRenameTab: (tab: WorkspaceTabDescriptor) => void;
@@ -373,6 +374,7 @@ export function SplitContainer({
   onCloseTab,
   onCopyResumeCommand,
   onCopyAgentId,
+  onCopyTerminalId,
   onCopyFilePath,
   onReloadAgent,
   onRenameTab,
@@ -592,6 +594,7 @@ export function SplitContainer({
           onCloseTab={onCloseTab}
           onCopyResumeCommand={onCopyResumeCommand}
           onCopyAgentId={onCopyAgentId}
+          onCopyTerminalId={onCopyTerminalId}
           onCopyFilePath={onCopyFilePath}
           onReloadAgent={onReloadAgent}
           onRenameTab={onRenameTab}
@@ -738,6 +741,7 @@ function SplitNodeView({
   onCloseTab,
   onCopyResumeCommand,
   onCopyAgentId,
+  onCopyTerminalId,
   onCopyFilePath,
   onReloadAgent,
   onRenameTab,
@@ -795,6 +799,7 @@ function SplitNodeView({
           onCloseTab={onCloseTab}
           onCopyResumeCommand={onCopyResumeCommand}
           onCopyAgentId={onCopyAgentId}
+          onCopyTerminalId={onCopyTerminalId}
           onCopyFilePath={onCopyFilePath}
           onReloadAgent={onReloadAgent}
           onRenameTab={onRenameTab}
@@ -844,6 +849,7 @@ function SplitNodeView({
               onCloseTab={onCloseTab}
               onCopyResumeCommand={onCopyResumeCommand}
               onCopyAgentId={onCopyAgentId}
+              onCopyTerminalId={onCopyTerminalId}
               onCopyFilePath={onCopyFilePath}
               onReloadAgent={onReloadAgent}
               onRenameTab={onRenameTab}
@@ -899,6 +905,7 @@ function SplitPaneView({
   onCloseTab,
   onCopyResumeCommand,
   onCopyAgentId,
+  onCopyTerminalId,
   onCopyFilePath,
   onReloadAgent,
   onRenameTab,
@@ -1044,6 +1051,7 @@ function SplitPaneView({
             onCloseTab={onCloseTab}
             onCopyResumeCommand={onCopyResumeCommand}
             onCopyAgentId={onCopyAgentId}
+            onCopyTerminalId={onCopyTerminalId}
             onCopyFilePath={onCopyFilePath}
             onReloadAgent={onReloadAgent}
             onRenameTab={onRenameTab}

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

@@ -1,11 +1,6 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  ActivityIndicator,
-  Pressable,
-  Text,
-  View,
-  type PressableStateCallbackType,
-} from "react-native";
+import { Pressable, Text, View, type PressableStateCallbackType } from "react-native";
 import Animated, { runOnJS, useAnimatedReaction } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { encodeTerminalKeyInput } from "@getpaseo/protocol/terminal-key-input";
@@ -836,7 +831,7 @@ export function TerminalPane({
 
         {showLoadingOverlay ? (
           <View style={styles.attachOverlay} pointerEvents="none" testID="terminal-attach-loading">
-            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+            <LoadingSpinner size="small" color={theme.colors.foregroundMuted} />
           </View>
         ) : null}
       </View>

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

@@ -1,3 +1,4 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   default as React,
   useCallback,
@@ -8,7 +9,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
-import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import type {
   PressableProps,
   PressableStateCallbackType,
@@ -44,7 +45,7 @@ function ButtonIcon({ loading, leftIcon, iconSize, iconColor }: ButtonIconProps)
   if (loading) {
     return (
       <View>
-        <ActivityIndicator size="small" color={iconColor} />
+        <LoadingSpinner size="small" color={iconColor} />
       </View>
     );
   }

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

@@ -23,7 +23,9 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
+import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import {
@@ -61,6 +63,12 @@ import {
 } from "@/components/adaptive-modal-sheet";
 import { FloatingSurface } from "@/components/ui/floating";
 import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
+import {
+  getOverlayRoot,
+  OverlayLayerProvider,
+  useOverlayLayer,
+  useWebOverlayRegistration,
+} from "@/lib/overlay-root";
 import { buildDesktopFrameStyle } from "./combobox-frame-style";
 
 export { buildDesktopFrameStyle } from "./combobox-frame-style";
@@ -100,6 +108,8 @@ export interface ComboboxProps {
    */
   header?: SheetHeader;
   mobileChildrenScrollEnabled?: boolean;
+  /** Overrides the mobile scroll container spacing for custom child content. */
+  mobileChildrenContentContainerStyle?: StyleProp<ViewStyle>;
   presentation?: "push" | "replace";
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -860,45 +870,31 @@ function isDesktopKey(key: string): key is DesktopKey {
   return key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === "Escape";
 }
 
-function useWebKeyboardListener(
-  isOpen: boolean,
-  handleDesktopKey: (key: DesktopKey, event?: KeyboardEvent) => void,
-) {
-  useEffect(() => {
-    if (!IS_WEB || !isOpen) return;
-
-    const handler = (event: KeyboardEvent) => {
-      if (!isDesktopKey(event.key)) return;
-      handleDesktopKey(event.key, event);
-    };
-
-    // react-native-web's TextInput can stop propagation on key events, so listen in capture phase.
-    window.addEventListener("keydown", handler, true);
-    return () => {
-      window.removeEventListener("keydown", handler, true);
-    };
-  }, [handleDesktopKey, isOpen]);
-}
-
-function dispatchDesktopKey(input: DesktopKeyHandlerInput, key: DesktopKey, event?: KeyboardEvent) {
-  if (!input.isOpen) return;
-  if (!IS_WEB && input.isMobile) return;
+function dispatchDesktopKey(
+  input: DesktopKeyHandlerInput,
+  key: DesktopKey,
+  event?: KeyboardEvent,
+): boolean {
+  if (!input.isOpen) return false;
+  if (!IS_WEB && input.isMobile) return false;
 
   if (key === "ArrowDown" || key === "ArrowUp") {
     event?.preventDefault();
     handleDesktopArrowKey(input, key);
-    return;
+    return true;
   }
   if (key === "Enter") {
-    if (input.orderedVisibleOptions.length === 0) return;
+    if (input.orderedVisibleOptions.length === 0) return false;
     event?.preventDefault();
     handleDesktopEnterKey(input);
-    return;
+    return true;
   }
   if (key === "Escape") {
     event?.preventDefault();
     input.handleClose();
+    return true;
   }
+  return false;
 }
 
 function resolveInitialActiveIndex(
@@ -934,6 +930,7 @@ interface MobileBodyProps {
   searchable: boolean;
   hasChildren: boolean;
   mobileChildrenScrollEnabled: boolean;
+  mobileChildrenContentContainerStyle: StyleProp<ViewStyle>;
   presentation?: "push" | "replace";
   searchResetKey: number;
   searchPlaceholder: string;
@@ -947,6 +944,7 @@ interface MobileBodyProps {
   handleSelect: (id: string) => void;
   renderOption: RenderOptionFn | undefined;
   children: ReactNode;
+  safeAreaBottom: number;
 }
 
 function MobileComboboxBody(props: MobileBodyProps): ReactElement {
@@ -966,6 +964,10 @@ function MobileComboboxBody(props: MobileBodyProps): ReactElement {
     () => [styles.comboboxTitle, { color: props.titleColor }],
     [props.titleColor],
   );
+  const frameStyle = useMemo(
+    () => [styles.mobileSheetFrame, { paddingBottom: props.safeAreaBottom }],
+    [props.safeAreaBottom],
+  );
 
   const body = props.hasChildren ? (
     props.children
@@ -996,47 +998,55 @@ function MobileComboboxBody(props: MobileBodyProps): ReactElement {
       keyboardBlurBehavior="none"
       presentation={props.presentation}
     >
-      {props.header ? (
-        <SheetHeaderView header={props.header} onClose={props.onClose} />
-      ) : (
-        <>
-          <View style={styles.bottomSheetHeader}>
-            <Text key={props.titleColor} style={comboboxTitleStyle}>
-              {props.title}
-            </Text>
-          </View>
-          {props.stickyHeader}
-          {!props.hasChildren && props.searchable ? (
-            <SearchInput
-              placeholder={props.searchPlaceholder}
-              onChangeText={props.setSearchQueryWithCallback}
-              onSubmitEditing={props.handleSubmitSearch}
-              autoFocus={false}
-              useBottomSheetInput
-              resetKey={props.searchResetKey}
-            />
-          ) : null}
-        </>
-      )}
-      {props.hasChildren && !props.mobileChildrenScrollEnabled ? (
-        body
-      ) : (
-        <BottomSheetScrollView
-          contentContainerStyle={styles.comboboxScrollContent}
-          keyboardShouldPersistTaps="handled"
-          showsVerticalScrollIndicator={false}
-        >
-          {body}
-        </BottomSheetScrollView>
-      )}
-      {props.footer ? <View style={styles.footer}>{props.footer}</View> : null}
+      <View style={frameStyle}>
+        {props.header ? (
+          <SheetHeaderView header={props.header} onClose={props.onClose} />
+        ) : (
+          <>
+            <View style={styles.bottomSheetHeader}>
+              <Text key={props.titleColor} style={comboboxTitleStyle}>
+                {props.title}
+              </Text>
+            </View>
+            {props.stickyHeader}
+            {!props.hasChildren && props.searchable ? (
+              <SearchInput
+                placeholder={props.searchPlaceholder}
+                onChangeText={props.setSearchQueryWithCallback}
+                onSubmitEditing={props.handleSubmitSearch}
+                autoFocus={false}
+                useBottomSheetInput
+                resetKey={props.searchResetKey}
+              />
+            ) : null}
+          </>
+        )}
+        {props.hasChildren && !props.mobileChildrenScrollEnabled ? (
+          body
+        ) : (
+          <BottomSheetScrollView
+            style={styles.mobileSheetBody}
+            contentContainerStyle={[
+              styles.comboboxScrollContent,
+              props.mobileChildrenContentContainerStyle,
+            ]}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            {body}
+          </BottomSheetScrollView>
+        )}
+        {props.footer ? <View style={styles.footer}>{props.footer}</View> : null}
+      </View>
     </IsolatedBottomSheetModal>
   );
 }
 
 interface DesktopBodyProps {
+  overlayLayer: number;
   isOpen: boolean;
   handleClose: () => void;
+  handleDesktopKey: (key: DesktopKey, event?: KeyboardEvent) => boolean;
   refs: ReturnType<typeof useFloating>["refs"];
   shouldUseDesktopFade: boolean;
   desktopFrameStyle: StyleProp<ViewStyle>;
@@ -1151,14 +1161,38 @@ function DesktopComboboxOptionsBody(props: {
 }
 
 function DesktopComboboxBody(props: DesktopBodyProps): ReactElement {
-  return (
-    <Modal
-      transparent
-      animationType="none"
-      visible={props.isOpen}
-      onRequestClose={props.handleClose}
-    >
-      <View ref={props.refs.setOffsetParent} collapsable={false} style={styles.desktopOverlay}>
+  const handleDesktopKey = props.handleDesktopKey;
+  const handleWebOverlayKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!isDesktopKey(event.key)) return false;
+      return handleDesktopKey(event.key, event);
+    },
+    [handleDesktopKey],
+  );
+  const setWebOverlayScope = useWebOverlayRegistration({
+    active: isWeb && props.isOpen,
+    layer: props.overlayLayer,
+    onKeyDown: handleWebOverlayKeyDown,
+  });
+  const setFloatingRef = useCallback(
+    (node: View | null) => {
+      props.refs.setFloating(node);
+      setWebOverlayScope(node);
+    },
+    [props.refs, setWebOverlayScope],
+  );
+
+  const overlay = (
+    <OverlayLayerProvider layer={props.overlayLayer}>
+      <View
+        ref={props.refs.setOffsetParent}
+        collapsable={false}
+        style={[
+          styles.desktopOverlay,
+          isWeb ? styles.desktopOverlayWeb : null,
+          isWeb ? { zIndex: props.overlayLayer } : null,
+        ]}
+      >
         <Pressable style={styles.desktopBackdrop} onPress={props.handleClose} />
         <FloatingSurface
           testID="combobox-desktop-container"
@@ -1166,8 +1200,11 @@ function DesktopComboboxBody(props: DesktopBodyProps): ReactElement {
           exiting={props.shouldUseDesktopFade ? FadeOut.duration(100) : undefined}
           style={styles.desktopContainer}
           frameStyle={props.desktopFrameStyle}
-          ref={props.refs.setFloating}
+          ref={setFloatingRef}
           collapsable={false}
+          role="dialog"
+          aria-modal
+          tabIndex={-1}
           onLayout={props.handleDesktopContentLayout}
         >
           {props.hasChildren ? (
@@ -1200,6 +1237,21 @@ function DesktopComboboxBody(props: DesktopBodyProps): ReactElement {
           {props.footer ? <View style={styles.footer}>{props.footer}</View> : null}
         </FloatingSurface>
       </View>
+    </OverlayLayerProvider>
+  );
+
+  if (isWeb && typeof document !== "undefined") {
+    return createPortal(overlay, getOverlayRoot());
+  }
+
+  return (
+    <Modal
+      transparent
+      animationType="none"
+      visible={props.isOpen}
+      onRequestClose={props.handleClose}
+    >
+      {overlay}
     </Modal>
   );
 }
@@ -1222,6 +1274,7 @@ export function Combobox({
   title,
   header,
   mobileChildrenScrollEnabled = true,
+  mobileChildrenContentContainerStyle,
   presentation,
   open,
   onOpenChange,
@@ -1241,6 +1294,8 @@ export function Combobox({
   const resolvedEmptyText = emptyText ?? t("common.empty.noOptionsMatchSearch");
   const resolvedTitle = title ?? t("common.actions.select");
   const isMobile = useIsCompactFormFactor();
+  const floatingLayer = useOverlayLayer("floating");
+  const safeAreaInsets = useSafeAreaInsets();
   const titleColor = theme.colors.foreground;
   const effectiveOptionsPosition = resolveEffectiveOptionsPosition(isMobile, optionsPosition);
   const isDesktopAboveSearch = resolveIsDesktopAboveSearch(isMobile, effectiveOptionsPosition);
@@ -1445,7 +1500,7 @@ export function Combobox({
 
   const handleDesktopKey = useCallback(
     (key: DesktopKey, event?: KeyboardEvent) => {
-      dispatchDesktopKey(
+      return dispatchDesktopKey(
         {
           isOpen,
           isMobile,
@@ -1462,7 +1517,6 @@ export function Combobox({
     [activeIndex, handleClose, handleSelect, isMobile, isOpen, orderedVisibleOptions],
   );
 
-  useWebKeyboardListener(isOpen, handleDesktopKey);
   useDismissKeyboardOnOpen(isOpen, isMobile);
 
   const handleIndicatorStyle = useMemo(
@@ -1515,6 +1569,7 @@ export function Combobox({
         searchable={searchable}
         hasChildren={hasChildren}
         mobileChildrenScrollEnabled={mobileChildrenScrollEnabled}
+        mobileChildrenContentContainerStyle={mobileChildrenContentContainerStyle}
         presentation={presentation}
         searchResetKey={searchResetKey}
         searchPlaceholder={effectiveSearchPlaceholder}
@@ -1527,6 +1582,7 @@ export function Combobox({
         emptyText={resolvedEmptyText}
         handleSelect={handleSelect}
         renderOption={renderOption}
+        safeAreaBottom={safeAreaInsets.bottom}
       >
         {children}
       </MobileComboboxBody>
@@ -1537,8 +1593,10 @@ export function Combobox({
 
   return (
     <DesktopComboboxBody
+      overlayLayer={floatingLayer}
       isOpen={isOpen}
       handleClose={handleClose}
+      handleDesktopKey={handleDesktopKey}
       refs={refs}
       shouldUseDesktopFade={shouldUseDesktopFade}
       desktopFrameStyle={desktopFrameStyle}
@@ -1569,6 +1627,14 @@ export function Combobox({
 }
 
 const styles = StyleSheet.create((theme) => ({
+  mobileSheetFrame: {
+    flex: 1,
+    minHeight: 0,
+  },
+  mobileSheetBody: {
+    flex: 1,
+    minHeight: 0,
+  },
   searchInputContainer: {
     flexDirection: "row",
     alignItems: "center",
@@ -1680,6 +1746,10 @@ const styles = StyleSheet.create((theme) => ({
   desktopOverlay: {
     flex: 1,
   },
+  desktopOverlayWeb: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: "auto" as const,
+  },
   desktopBackdrop: {
     position: "absolute",
     top: 0,

packages/app/src/components/ui/context-menu.tsx

@@ -1,3 +1,4 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   type ComponentProps,
   createContext,
@@ -14,7 +15,6 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  ActivityIndicator,
   Dimensions,
   Modal,
   Platform,
@@ -630,7 +630,7 @@ function resolveLeadingContent(input: {
   successColor: string;
 }): ReactElement | null {
   if (input.isPending) {
-    return <ActivityIndicator size={16} color={input.pendingColor} />;
+    return <LoadingSpinner size={16} color={input.pendingColor} />;
   }
   if (input.isSuccess) {
     return <CheckCircle size={16} color={input.successColor} />;

packages/app/src/components/ui/dropdown-menu.tsx

@@ -1,3 +1,4 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   createContext,
   useCallback,
@@ -14,7 +15,6 @@ import {
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import {
-  ActivityIndicator,
   Modal,
   Pressable,
   Text,
@@ -34,7 +34,12 @@ import { FloatingScrollView, FloatingSurface } from "@/components/ui/floating";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { isWeb } from "@/constants/platform";
 import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
-import { getOverlayRoot, OVERLAY_Z } from "@/lib/overlay-root";
+import {
+  getOverlayRoot,
+  OverlayLayerProvider,
+  useOverlayLayer,
+  useWebOverlayRegistration,
+} from "@/lib/overlay-root";
 
 // Action status for menu items with loading/success feedback
 export type ActionStatus = "idle" | "pending" | "success";
@@ -185,6 +190,7 @@ function renderDropdownSurface(input: {
   content: ReactElement;
   surfaceNativeID: string;
   onExited: () => void;
+  scopeRef: (node: View | null) => void;
 }): ReactElement {
   const {
     frameStyle,
@@ -195,6 +201,7 @@ function renderDropdownSurface(input: {
     content,
     surfaceNativeID,
     onExited,
+    scopeRef,
   } = input;
 
   const body = scrollable ? (
@@ -212,7 +219,9 @@ function renderDropdownSurface(input: {
 
   return (
     <FloatingSurface
+      ref={scopeRef}
       collapsable={false}
+      tabIndex={-1}
       nativeID={surfaceNativeID}
       testID={testID}
       style={surfaceStyle}
@@ -449,6 +458,7 @@ export function DropdownMenuContent({
   testID?: string;
 }>): ReactElement | null {
   const { t } = useTranslation();
+  const floatingLayer = useOverlayLayer("floating");
   const { open, setOpen, triggerRef, flushPendingSelect } =
     useDropdownMenuContext("DropdownMenuContent");
   const [modalVisible, setModalVisible] = useState(false);
@@ -502,16 +512,21 @@ export function DropdownMenuContent({
     setOpen(false);
   }, [setOpen]);
 
-  useEffect(() => {
-    if (!isWeb || !modalVisible || typeof window === "undefined") return undefined;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
+  const handleWebOverlayKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return false;
+      event.preventDefault();
       event.stopPropagation();
       handleClose();
-    };
-    window.addEventListener("keydown", handleKeyDown, true);
-    return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [handleClose, modalVisible]);
+      return true;
+    },
+    [handleClose],
+  );
+  const setWebOverlayScope = useWebOverlayRegistration({
+    active: isWeb && modalVisible,
+    layer: floatingLayer,
+    onKeyDown: handleWebOverlayKeyDown,
+  });
 
   // Measure trigger when opening
   useEffect(() => {
@@ -631,27 +646,36 @@ export function DropdownMenuContent({
   );
 
   const overlay = (
-    <View style={[styles.overlay, isWeb ? styles.overlayWeb : null]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={t("menu.backdrop")}
-        style={styles.backdrop}
-        onPress={handleClose}
-        testID={testID ? `${testID}-backdrop` : undefined}
-      />
-      {!closing
-        ? renderDropdownSurface({
-            frameStyle,
-            testID,
-            surfaceStyle,
-            scrollable,
-            scrollViewportStyle,
-            content,
-            surfaceNativeID,
-            onExited: () => setModalVisible(false),
-          })
-        : null}
-    </View>
+    <OverlayLayerProvider layer={floatingLayer}>
+      <View
+        style={[
+          styles.overlay,
+          isWeb ? styles.overlayWeb : null,
+          isWeb ? { zIndex: floatingLayer } : null,
+        ]}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={t("menu.backdrop")}
+          style={styles.backdrop}
+          onPress={handleClose}
+          testID={testID ? `${testID}-backdrop` : undefined}
+        />
+        {!closing
+          ? renderDropdownSurface({
+              frameStyle,
+              testID,
+              surfaceStyle,
+              scrollable,
+              scrollViewportStyle,
+              content,
+              surfaceNativeID,
+              scopeRef: setWebOverlayScope,
+              onExited: () => setModalVisible(false),
+            })
+          : null}
+      </View>
+    </OverlayLayerProvider>
   );
 
   if (isWeb && typeof document !== "undefined") {
@@ -717,7 +741,7 @@ function resolveDropdownItemLeadingContent(input: {
 }): ReactElement | null {
   const { isPending, isSuccess, leading, theme } = input;
   if (isPending) {
-    return <ActivityIndicator size={16} color={theme.colors.foregroundMuted} />;
+    return <LoadingSpinner size={16} color={theme.colors.foregroundMuted} />;
   }
   if (isSuccess) {
     return <CheckCircle size={16} color={theme.colors.palette.green[500]} />;
@@ -905,7 +929,6 @@ const styles = StyleSheet.create((theme) => ({
   },
   overlayWeb: {
     ...StyleSheet.absoluteFillObject,
-    zIndex: OVERLAY_Z.modal,
     pointerEvents: "auto" as const,
   },
   backdrop: {

packages/app/src/components/ui/loading-spinner.tsx

@@ -3,8 +3,9 @@ import { ActivityIndicator, type ActivityIndicatorProps } from "react-native";
 interface LoadingSpinnerProps {
   color: string;
   size?: ActivityIndicatorProps["size"];
+  style?: ActivityIndicatorProps["style"];
 }
 
-export function LoadingSpinner({ color, size = "small" }: LoadingSpinnerProps) {
-  return <ActivityIndicator size={size} color={color} />;
+export function LoadingSpinner({ color, size = "small", style }: LoadingSpinnerProps) {
+  return <ActivityIndicator size={size} color={color} style={style} />;
 }

packages/app/src/components/workspace-pin-shortcut-handler.tsx

@@ -0,0 +1,9 @@
+import { useGlobalWorkspacePinAction } from "@/hooks/use-global-workspace-pin-action";
+
+// Headless host for the pin shortcut. The hook subscribes to the active workspace's pin state, so
+// it lives in its own component rather than the root layout — otherwise every pin toggle would
+// re-render the whole app shell.
+export function WorkspacePinShortcutHandler() {
+  useGlobalWorkspacePinAction();
+  return null;
+}

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

@@ -6,11 +6,9 @@ import { createNameId } from "mnemonic-id";
 import { AdaptiveModalSheet, type SheetHeader } from "@/components/adaptive-modal-sheet";
 import { FileDropZone } from "@/components/file-drop/file-drop-zone";
 import { Composer } from "@/composer";
-import { DraftAgentModeControl } from "@/composer/agent-controls/mode-control";
 import { useToast } from "@/contexts/toast-context";
 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";
@@ -382,7 +380,6 @@ export function WorkspaceSetupDialog() {
   const placeholderLabel = projectIconPlaceholderLabelFromDisplayName(workspaceTitle);
   const placeholderInitial = placeholderLabel.charAt(0).toUpperCase();
 
-  const isCompact = useIsCompactFormFactor();
   const iconSource = useMemo(() => (iconDataUri ? { uri: iconDataUri } : null), [iconDataUri]);
   const agentControlsWithDisabled = useMemo(
     () =>
@@ -395,14 +392,6 @@ export function WorkspaceSetupDialog() {
     [composerState, pendingAction],
   );
 
-  const composerFooter = useMemo(
-    () =>
-      isCompact && agentControlsWithDisabled ? (
-        <DraftAgentModeControl placement="footer" {...agentControlsWithDisabled} />
-      ) : undefined,
-    [isCompact, agentControlsWithDisabled],
-  );
-
   const subtitleContent = useMemo(
     () => (
       <View style={styles.subtitleRow}>
@@ -457,7 +446,6 @@ export function WorkspaceSetupDialog() {
           commandDraftConfig={composerState?.commandDraftConfig}
           agentControls={agentControlsWithDisabled}
           inputWrapperStyle={styles.composerInputWrapper}
-          footer={composerFooter}
         />
       </FileDropZone>
 

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

@@ -321,7 +321,11 @@ describe("pickAndPersistImages", () => {
     const persister = createFakePersister();
     const result = await pickAndPersistImages({
       pickImages: async () => [
-        { source: { kind: "file_uri", uri: "/tmp/x.jpg" }, mimeType: null, fileName: null },
+        {
+          source: { kind: "file_uri", uri: "/tmp/x.jpg" },
+          mimeType: "image/jpeg",
+          fileName: null,
+        },
       ],
       persister,
     });
@@ -333,6 +337,26 @@ describe("pickAndPersistImages", () => {
 });
 
 describe("dispatchComposerAgentMessage", () => {
+  it("removes the optimistic prompt when the host rejects it", async () => {
+    const rejection = new Error("Host rejected prompt");
+    const client = createFakeSendClient({ rejection });
+    const stream = createFakeStream();
+
+    await expect(
+      dispatchComposerAgentMessage({
+        client,
+        agentId: "agent",
+        text: "rejected prompt",
+        attachments: [],
+        encodeImages: passthroughEncodeImages,
+        stream,
+      }),
+    ).rejects.toBe(rejection);
+
+    expect(stream.head.get("agent")).toBeUndefined();
+    expect(stream.tail.get("agent") ?? []).toEqual([]);
+  });
+
   it("sends text + image data + structured attachments and appends user_message to the tail when head is empty", async () => {
     const client = createFakeSendClient();
     const stream = createFakeStream();

packages/app/src/composer/actions.ts

@@ -93,7 +93,7 @@ export async function pickAndPersistImages(input: {
   return await Promise.all(
     result.map(async (picked) => {
       const fileName = picked.fileName ?? null;
-      const mimeType = picked.mimeType || "image/jpeg";
+      const mimeType = picked.mimeType;
       if (picked.source.kind === "blob") {
         return await input.persister.persistFromBlob({
           blob: picked.source.blob,
@@ -186,40 +186,50 @@ export async function dispatchComposerAgentMessage(
     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, {
-    messageId,
-    images: imagesData ?? [],
-    attachments: wirePayload.attachments,
-  });
+  const rollbackOptimisticMessage = appendUserMessageToStream(
+    input.agentId,
+    userMessage,
+    input.stream,
+  );
+  try {
+    const imagesData = await input.encodeImages(wirePayload.images);
+    await input.client.sendAgentMessage(input.agentId, input.text, {
+      messageId,
+      images: imagesData ?? [],
+      attachments: wirePayload.attachments,
+    });
+  } catch (error) {
+    rollbackOptimisticMessage();
+    throw error;
+  }
 }
 
 function appendUserMessageToStream(
   agentId: string,
   userMessage: UserMessageItem,
   stream: AgentStreamWriter,
-): void {
+): () => void {
   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, result.head);
-      return next;
+  const write = result.changedHead ? stream.setHead : stream.setTail;
+  const items = result.changedHead ? result.head : result.tail;
+  write((prev) => new Map(prev).set(agentId, items));
+
+  return () => {
+    write((prev) => {
+      const current = prev.get(agentId);
+      if (!current) return prev;
+      const nextItems = current.filter(
+        (item) => item.id !== userMessage.id || item.kind !== "user_message" || !item.optimistic,
+      );
+      if (nextItems.length === current.length) return prev;
+      return new Map(prev).set(agentId, nextItems);
     });
-  }
-  if (result.changedTail) {
-    stream.setTail((prev) => {
-      const next = new Map(prev);
-      next.set(agentId, result.tail);
-      return next;
-    });
-  }
+  };
 }
 
 export interface QueueComposerMessageInput {

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

@@ -0,0 +1,173 @@
+import { forwardRef, useCallback, type ComponentType } from "react";
+import { Text, View, type PressableStateCallbackType } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
+import { useComposerControlLayout } from "@/composer/agent-controls/layout-context";
+import { ComposerToolbarGlyph } from "@/composer/agent-controls/glyph";
+
+export interface AgentControlIconProps {
+  size?: number;
+  color?: string;
+}
+
+export type AgentControlIcon = ComponentType<AgentControlIconProps>;
+
+interface AgentControlTriggerProps {
+  icon: AgentControlIcon;
+  iconColor?: string;
+  surface: "toolbar" | "sheet";
+  label: string;
+  value?: string;
+  showToolbarLabel?: boolean;
+  showCaret?: boolean;
+  open?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+  accessibilityLabel: string;
+  testID?: string;
+}
+
+export const AgentControlTrigger = forwardRef<View, AgentControlTriggerProps>(
+  function AgentControlTrigger(
+    {
+      icon: Icon,
+      iconColor,
+      surface,
+      label,
+      value,
+      showToolbarLabel = true,
+      showCaret = false,
+      open = false,
+      disabled = false,
+      onPress,
+      accessibilityLabel,
+      testID,
+    },
+    ref,
+  ) {
+    const { glyphSize } = useComposerControlLayout();
+    const isSheet = surface === "sheet";
+    const resolvedGlyphSize = isSheet ? 16 : glyphSize;
+    const resolvedIconColor = iconColor ?? styles.iconColor.color;
+    const showValue = isSheet || showToolbarLabel;
+    const triggerStyle = useCallback(
+      ({ pressed, hovered }: PressableStateCallbackType) => [
+        isSheet ? styles.sheetRow : styles.toolbarControl,
+        !isSheet && !showToolbarLabel && styles.toolbarIconOnly,
+        hovered && (isSheet ? styles.sheetRowInteractive : styles.hovered),
+        (pressed || open) && (isSheet ? styles.sheetRowInteractive : styles.pressed),
+        disabled && styles.disabled,
+      ],
+      [disabled, isSheet, open, showToolbarLabel],
+    );
+
+    return (
+      <ComboboxTrigger
+        ref={ref}
+        collapsable={false}
+        disabled={disabled}
+        onPress={onPress}
+        style={triggerStyle}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        testID={testID}
+        chevron={showCaret ? undefined : null}
+      >
+        {isSheet ? (
+          <View style={styles.sheetGlyph}>
+            <Icon size={resolvedGlyphSize} color={resolvedIconColor} />
+          </View>
+        ) : (
+          <ComposerToolbarGlyph size={resolvedGlyphSize}>
+            <Icon size={resolvedGlyphSize} color={resolvedIconColor} />
+          </ComposerToolbarGlyph>
+        )}
+        {isSheet ? (
+          <Text style={styles.sheetLabel} numberOfLines={1}>
+            {label}
+          </Text>
+        ) : null}
+        {showValue ? (
+          <Text style={isSheet ? styles.sheetValue : styles.toolbarValue} numberOfLines={1}>
+            {value ?? label}
+          </Text>
+        ) : null}
+      </ComboboxTrigger>
+    );
+  },
+);
+
+const styles = StyleSheet.create((theme) => ({
+  toolbarControl: {
+    height: 28,
+    minWidth: 0,
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius["2xl"],
+    backgroundColor: "transparent",
+  },
+  toolbarIconOnly: {
+    width: 28,
+    flexShrink: 0,
+    paddingHorizontal: 0,
+    justifyContent: "center",
+  },
+  toolbarValue: {
+    minWidth: 0,
+    flexShrink: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  sheetRow: {
+    minHeight: 44,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    marginHorizontal: -theme.spacing[1],
+    paddingHorizontal: theme.spacing[4],
+    borderRadius: theme.borderRadius["2xl"],
+    backgroundColor: theme.colors.surface1,
+  },
+  sheetRowInteractive: {
+    backgroundColor: theme.colors.surface2,
+  },
+  sheetGlyph: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  sheetLabel: {
+    flex: 1,
+    minWidth: 0,
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  sheetValue: {
+    maxWidth: "45%",
+    minWidth: 0,
+    flexShrink: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  hovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  pressed: {
+    backgroundColor: theme.colors.surface0,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  iconColor: {
+    color: theme.colors.foregroundMuted,
+  },
+}));

packages/app/src/composer/agent-controls/glyph.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+
+export function ComposerToolbarGlyph({ children, size }: { children: ReactNode; size: number }) {
+  return (
+    <View
+      style={size >= 20 ? styles.native : styles.web}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      pointerEvents="none"
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  web: {
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  native: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

packages/app/src/composer/agent-controls/layout-context.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext, type ReactNode } from "react";
+import type { ComposerControlPresentation } from "@/composer/agent-controls/layout";
+
+interface ComposerControlLayoutValue {
+  glyphSize: number;
+  presentation: ComposerControlPresentation;
+}
+
+const DEFAULT_LAYOUT: ComposerControlLayoutValue = {
+  glyphSize: 16,
+  presentation: {
+    showCarets: true,
+    showThinkingLabel: true,
+    showModeLabel: true,
+    aggregateFeatures: false,
+  },
+};
+
+const ComposerControlLayoutContext = createContext(DEFAULT_LAYOUT);
+
+export function ComposerControlLayoutProvider({
+  value,
+  children,
+}: {
+  value: ComposerControlLayoutValue;
+  children: ReactNode;
+}) {
+  return (
+    <ComposerControlLayoutContext.Provider value={value}>
+      {children}
+    </ComposerControlLayoutContext.Provider>
+  );
+}
+
+export function useComposerControlLayout(): ComposerControlLayoutValue {
+  return useContext(ComposerControlLayoutContext);
+}

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

@@ -0,0 +1,168 @@
+import { describe, expect, it } from "vitest";
+import {
+  COMPOSER_TOOLBAR_GEOMETRY,
+  resolveComposerControlDensity,
+  resolveComposerControlPresentation,
+  resolveComposerToolbarGlyphSize,
+} from "./layout";
+
+describe("composer control layout", () => {
+  it("removes labels in priority order as the toolbar narrows", () => {
+    expect(resolveComposerControlPresentation("full")).toEqual({
+      showCarets: true,
+      showThinkingLabel: true,
+      showModeLabel: true,
+      aggregateFeatures: false,
+    });
+    expect(resolveComposerControlPresentation("condensed")).toEqual({
+      showCarets: false,
+      showThinkingLabel: false,
+      showModeLabel: true,
+      aggregateFeatures: true,
+    });
+    expect(resolveComposerControlPresentation("tight")).toEqual({
+      showCarets: false,
+      showThinkingLabel: false,
+      showModeLabel: false,
+      aggregateFeatures: true,
+    });
+  });
+
+  it("uses local available width and hysteresis to avoid density churn", () => {
+    const controls = {
+      hasModel: true,
+      hasThinking: true,
+      hasMode: true,
+      features: [{ type: "toggle" as const }],
+      fontScale: 1,
+    };
+
+    expect(
+      resolveComposerControlDensity({
+        availableWidth: 420,
+        currentDensity: "full",
+        controls,
+      }),
+    ).toBe("full");
+    expect(
+      resolveComposerControlDensity({
+        availableWidth: 380,
+        currentDensity: "full",
+        controls,
+      }),
+    ).toBe("condensed");
+    expect(
+      resolveComposerControlDensity({
+        availableWidth: 290,
+        currentDensity: "condensed",
+        controls,
+      }),
+    ).toBe("condensed");
+    expect(
+      resolveComposerControlDensity({
+        availableWidth: 280,
+        currentDensity: "condensed",
+        controls,
+      }),
+    ).toBe("tight");
+    expect(
+      resolveComposerControlDensity({
+        availableWidth: 300,
+        currentDensity: "tight",
+        controls,
+      }),
+    ).toBe("tight");
+    expect(
+      resolveComposerControlDensity({
+        availableWidth: 312,
+        currentDensity: "tight",
+        controls,
+      }),
+    ).toBe("condensed");
+  });
+
+  it("budgets extra features and larger text before restoring full labels", () => {
+    const base = {
+      availableWidth: 430,
+      currentDensity: "condensed" as const,
+    };
+
+    expect(
+      resolveComposerControlDensity({
+        ...base,
+        controls: {
+          hasModel: true,
+          hasThinking: true,
+          hasMode: true,
+          features: [{ type: "toggle" }],
+          fontScale: 1,
+        },
+      }),
+    ).toBe("full");
+    expect(
+      resolveComposerControlDensity({
+        ...base,
+        controls: {
+          hasModel: true,
+          hasThinking: true,
+          hasMode: true,
+          features: [{ type: "toggle" }, { type: "select", label: "Tools" }],
+          fontScale: 1,
+        },
+      }),
+    ).toBe("condensed");
+    expect(
+      resolveComposerControlDensity({
+        ...base,
+        controls: {
+          hasModel: true,
+          hasThinking: true,
+          hasMode: true,
+          features: [{ type: "toggle" }],
+          fontScale: 1.25,
+        },
+      }),
+    ).toBe("condensed");
+  });
+
+  it("condenses before a labeled feature would overflow", () => {
+    const base = {
+      availableWidth: 430,
+      currentDensity: "full" as const,
+      controls: {
+        hasModel: true,
+        hasThinking: true,
+        hasMode: true,
+        fontScale: 1,
+      },
+    };
+
+    expect(
+      resolveComposerControlDensity({
+        ...base,
+        controls: { ...base.controls, features: [{ type: "toggle" }] },
+      }),
+    ).toBe("full");
+    expect(
+      resolveComposerControlDensity({
+        ...base,
+        controls: {
+          ...base.controls,
+          features: [{ type: "select", label: "A much longer localized feature label" }],
+        },
+      }),
+    ).toBe("condensed");
+  });
+
+  it("gives every toolbar control one shell and one platform glyph envelope", () => {
+    expect(COMPOSER_TOOLBAR_GEOMETRY).toEqual({
+      controlSize: 28,
+      controlGap: 4,
+      iconLabelGap: 4,
+      labelPadding: 8,
+      caretSize: 14,
+    });
+    expect(resolveComposerToolbarGlyphSize("web")).toBe(16);
+    expect(resolveComposerToolbarGlyphSize("native")).toBe(20);
+  });
+});

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

@@ -0,0 +1,134 @@
+export type ComposerControlDensity = "full" | "condensed" | "tight";
+
+export interface ComposerControlPresence {
+  hasModel: boolean;
+  hasThinking: boolean;
+  hasMode: boolean;
+  features: readonly ComposerFeatureControlPresence[];
+  fontScale: number;
+}
+
+export type ComposerFeatureControlPresence = { type: "toggle" } | { type: "select"; label: string };
+
+export interface ComposerControlPresentation {
+  showCarets: boolean;
+  showThinkingLabel: boolean;
+  showModeLabel: boolean;
+  aggregateFeatures: boolean;
+}
+
+export const COMPOSER_TOOLBAR_GEOMETRY = {
+  controlSize: 28,
+  controlGap: 4,
+  iconLabelGap: 4,
+  labelPadding: 8,
+  caretSize: 14,
+} as const;
+
+const DENSITY_HYSTERESIS = 12;
+
+function normalizedFontScale(fontScale: number): number {
+  return Number.isFinite(fontScale) ? Math.max(1, fontScale) : 1;
+}
+
+function sumControlWidths(widths: number[]): number {
+  if (widths.length === 0) return 0;
+  return (
+    widths.reduce((total, width) => total + width, 0) +
+    (widths.length - 1) * COMPOSER_TOOLBAR_GEOMETRY.controlGap
+  );
+}
+
+function estimateLabelWidth(label: string, fontScale: number): number {
+  return Array.from(label).length * 7 * fontScale;
+}
+
+function resolveFeatureControlWidth(
+  feature: ComposerFeatureControlPresence,
+  fontScale: number,
+): number {
+  if (feature.type === "toggle") return COMPOSER_TOOLBAR_GEOMETRY.controlSize;
+  return (
+    COMPOSER_TOOLBAR_GEOMETRY.controlSize +
+    COMPOSER_TOOLBAR_GEOMETRY.iconLabelGap +
+    COMPOSER_TOOLBAR_GEOMETRY.labelPadding * 2 +
+    estimateLabelWidth(feature.label, fontScale)
+  );
+}
+
+function resolveCondensedFloor(controls: ComposerControlPresence): number {
+  const fontScale = normalizedFontScale(controls.fontScale);
+  const widths: number[] = [];
+  if (controls.hasModel) widths.push(36 + 60 * fontScale);
+  if (controls.hasThinking) widths.push(COMPOSER_TOOLBAR_GEOMETRY.controlSize);
+  if (controls.hasMode) widths.push(36 + 96 * fontScale);
+  if (controls.features.length > 0) widths.push(COMPOSER_TOOLBAR_GEOMETRY.controlSize);
+  return sumControlWidths(widths);
+}
+
+function resolveFullFloor(controls: ComposerControlPresence): number {
+  const fontScale = normalizedFontScale(controls.fontScale);
+  const widths: number[] = [];
+  if (controls.hasModel) widths.push(50 + 70 * fontScale);
+  if (controls.hasThinking) widths.push(54 + 48 * fontScale);
+  if (controls.hasMode) widths.push(54 + 96 * fontScale);
+  for (const feature of controls.features) {
+    widths.push(resolveFeatureControlWidth(feature, fontScale));
+  }
+  return sumControlWidths(widths);
+}
+
+export function resolveComposerControlDensity(input: {
+  availableWidth: number;
+  currentDensity: ComposerControlDensity;
+  controls: ComposerControlPresence;
+}): ComposerControlDensity {
+  const fullFloor = resolveFullFloor(input.controls);
+  const condensedFloor = resolveCondensedFloor(input.controls);
+
+  if (input.currentDensity === "full") {
+    if (input.availableWidth >= fullFloor - DENSITY_HYSTERESIS) return "full";
+    return input.availableWidth >= condensedFloor ? "condensed" : "tight";
+  }
+
+  if (input.currentDensity === "condensed") {
+    if (input.availableWidth >= fullFloor + DENSITY_HYSTERESIS) return "full";
+    if (input.availableWidth < condensedFloor - DENSITY_HYSTERESIS) return "tight";
+    return "condensed";
+  }
+
+  if (input.availableWidth >= fullFloor + DENSITY_HYSTERESIS) return "full";
+  if (input.availableWidth >= condensedFloor + DENSITY_HYSTERESIS) return "condensed";
+  return "tight";
+}
+
+export function resolveComposerControlPresentation(
+  density: ComposerControlDensity,
+): ComposerControlPresentation {
+  if (density === "full") {
+    return {
+      showCarets: true,
+      showThinkingLabel: true,
+      showModeLabel: true,
+      aggregateFeatures: false,
+    };
+  }
+  if (density === "condensed") {
+    return {
+      showCarets: false,
+      showThinkingLabel: false,
+      showModeLabel: true,
+      aggregateFeatures: true,
+    };
+  }
+  return {
+    showCarets: false,
+    showThinkingLabel: false,
+    showModeLabel: false,
+    aggregateFeatures: true,
+  };
+}
+
+export function resolveComposerToolbarGlyphSize(platform: "web" | "native"): number {
+  return platform === "native" ? 20 : 16;
+}

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

@@ -1,5 +1,4 @@
 import {
-  memo,
   useCallback,
   useMemo,
   useRef,
@@ -8,7 +7,7 @@ import {
   type ReactElement,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, View, type PressableStateCallbackType } from "react-native";
+import { Text, View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useShallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
@@ -22,7 +21,6 @@ import {
   ShieldPlus,
   ShieldQuestionMark,
 } from "lucide-react-native";
-import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
 import { type SheetHeader } from "@/components/adaptive-modal-sheet";
 import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -32,7 +30,6 @@ import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import { mergeProviderPreferences, useFormPreferences } from "@/hooks/use-form-preferences";
 import { resolveProviderDefinition } from "@/utils/provider-definitions";
 import { useToast } from "@/contexts/toast-context";
-import { useIsCompactFormFactor } from "@/constants/layout";
 import { toErrorMessage } from "@/utils/error-messages";
 import { showProviderNoticeToast } from "@/utils/provider-notice-toast";
 import { formatAgentModeLabel, getAgentControlHintKey } from "@/composer/agent-controls/utils";
@@ -41,15 +38,11 @@ import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
 import { resolveNextAgentModeId } from "@/composer/agent-controls/mode";
 import { useComposerKeyboardScope } from "@/composer/keyboard-scope";
-import type { AgentMode, AgentProvider } from "@getpaseo/protocol/agent-types";
+import { useComposerControlLayout } from "@/composer/agent-controls/layout-context";
+import { AgentControlTrigger } from "@/composer/agent-controls/control";
+import type { AgentMode } from "@getpaseo/protocol/agent-types";
 import { getModeVisuals, type AgentProviderDefinition } from "@getpaseo/protocol/provider-manifest";
 
-export type AgentModeControlPlacement = "toolbar" | "footer";
-
-function shouldRenderForPlacement(placement: AgentModeControlPlacement, isCompact: boolean) {
-  return placement === "footer" ? isCompact : !isCompact;
-}
-
 interface ModeIconProps {
   size?: number;
   color?: string;
@@ -102,7 +95,7 @@ function ModeComboboxOption({
   );
 }
 
-interface AgentModeControlViewProps {
+export interface AgentModeControlValue {
   provider: string;
   providerDefinitions: AgentProviderDefinition[];
   modeOptions: AgentMode[];
@@ -115,20 +108,24 @@ function normalizeSearchQuery(value: string): string {
   return value.trim().toLowerCase();
 }
 
-function AgentModeControlView({
+export function AgentModeControl({
   provider,
   providerDefinitions,
   modeOptions,
   selectedModeId,
   onSelectMode,
   disabled = false,
-}: AgentModeControlViewProps) {
+  surface = "toolbar",
+  onClose,
+}: AgentModeControlValue & { surface?: "toolbar" | "sheet"; onClose?: () => void }) {
   const { theme } = useUnistyles();
+  const { presentation } = useComposerControlLayout();
   const { t } = useTranslation();
   const { isActiveComposer } = useComposerKeyboardScope();
   const cycleShortcutKeys = useShortcutKeys("cycle-agent-mode");
   const anchorRef = useRef<View>(null);
   const keyboardHandlerIdRef = useRef(`mode-control:${Math.random().toString(36).slice(2)}`);
+  const openRef = useRef(false);
   const [open, setOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -140,7 +137,7 @@ function AgentModeControlView({
   const visuals = selectedMode
     ? getModeVisuals(provider, selectedMode.id, providerDefinitions)
     : undefined;
-  const Icon = visuals?.icon ? MODE_ICONS[visuals.icon] : undefined;
+  const Icon = visuals?.icon ? (MODE_ICONS[visuals.icon] ?? Bot) : Bot;
   const iconColor = theme.colors.foregroundMuted;
   const selectedModeLabel = selectedMode ? formatAgentModeLabel(selectedMode) : "";
 
@@ -154,10 +151,18 @@ function AgentModeControlView({
     return allOptions.filter((o) => o.label.toLowerCase().includes(q));
   }, [allOptions, searchQuery]);
 
-  const handleOpenChange = useCallback((next: boolean) => {
-    setOpen(next);
-    if (!next) setSearchQuery("");
-  }, []);
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      const wasOpen = openRef.current;
+      openRef.current = next;
+      setOpen(next);
+      if (!next) {
+        setSearchQuery("");
+        if (wasOpen) onClose?.();
+      }
+    },
+    [onClose],
+  );
 
   const handlePress = useCallback(() => handleOpenChange(!open), [handleOpenChange, open]);
   const handleSelect = useCallback(
@@ -208,18 +213,6 @@ function AgentModeControlView({
     [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 = styles.chipLabel;
-
   const sheetHeader = useMemo<SheetHeader>(
     () => ({
       title: t("agentControls.mode.title"),
@@ -238,21 +231,23 @@ function AgentModeControlView({
     <>
       <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
         <TooltipTrigger asChild triggerRefProp="ref">
-          <ComboboxTrigger
+          <AgentControlTrigger
             ref={anchorRef}
-            collapsable={false}
+            icon={Icon}
+            iconColor={iconColor}
+            surface={surface}
+            label={t("agentControls.mode.title")}
+            value={selectedModeLabel}
+            showToolbarLabel={presentation.showModeLabel}
+            showCaret={surface === "toolbar" && presentation.showCarets}
+            open={open}
             disabled={disabled}
             onPress={handlePress}
-            style={pressableStyle}
-            accessibilityRole="button"
             accessibilityLabel={t("agentControls.mode.selectWithValue", {
               value: selectedModeLabel,
             })}
             testID="mode-control"
-          >
-            {Icon ? <Icon size={theme.iconSize.md} color={iconColor} /> : null}
-            <Text style={labelStyle}>{selectedModeLabel}</Text>
-          </ComboboxTrigger>
+          />
         </TooltipTrigger>
         <TooltipContent side="top" align="center" offset={8}>
           <View style={styles.tooltipRow}>
@@ -269,6 +264,7 @@ function AgentModeControlView({
         onOpenChange={handleOpenChange}
         anchorRef={anchorRef}
         desktopPlacement="top-start"
+        desktopMinWidth={260}
         header={sheetHeader}
         renderOption={renderOption}
       />
@@ -282,21 +278,10 @@ function compareAvailableModes(a: AgentMode[], b: AgentMode[]): boolean {
   return a === b || JSON.stringify(a) === JSON.stringify(b);
 }
 
-interface AgentModeControlProps {
-  serverId: string;
-  agentId: string;
-  placement: AgentModeControlPlacement;
-  isCompactLayout?: boolean;
-}
-
-export const AgentModeControl = memo(function AgentModeControl({
-  serverId,
-  agentId,
-  placement,
-  isCompactLayout,
-}: AgentModeControlProps) {
-  const isCompactFormFactor = useIsCompactFormFactor();
-  const isCompact = isCompactLayout ?? isCompactFormFactor;
+export function useLiveAgentModeControl(
+  serverId: string,
+  agentId: string,
+): AgentModeControlValue | null {
   const slice = useSessionStore(
     useShallow((state) => {
       const agent = state.sessions[serverId]?.agents?.get(agentId);
@@ -349,82 +334,20 @@ export const AgentModeControl = memo(function AgentModeControl({
     [agentId, client, slice?.provider, toast, updatePreferences],
   );
 
-  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;
-  isCompactLayout?: boolean;
-}
-
-export function DraftAgentModeControl({
-  selectedProvider,
-  providerDefinitions,
-  modeOptions,
-  selectedMode,
-  onSelectMode,
-  disabled,
-  placement,
-  isCompactLayout,
-}: DraftAgentModeControlProps) {
-  const isCompactFormFactor = useIsCompactFormFactor();
-  const isCompact = isCompactLayout ?? isCompactFormFactor;
-  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}
-    />
-  );
+  return useMemo(() => {
+    if (!slice || availableModes.length === 0) return null;
+    return {
+      provider: slice.provider,
+      providerDefinitions,
+      modeOptions: availableModes,
+      selectedModeId: slice.currentModeId,
+      onSelectMode: handleSelectMode,
+      disabled: !client,
+    };
+  }, [availableModes, client, handleSelectMode, providerDefinitions, slice]);
 }
 
 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,
-  },
   tooltipRow: {
     flexDirection: "row",
     alignItems: "center",

packages/app/src/composer/agent-controls/model-sheet.tsx

@@ -0,0 +1,275 @@
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Keyboard, ScrollView, Text, View, type PressableStateCallbackType } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import type { AgentProvider } from "@getpaseo/protocol/agent-types";
+import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
+import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
+import { getProviderIcon } from "@/components/provider-icons";
+import { ModelBrowser, useModelBrowser } from "@/components/model-browser";
+import { ComposerToolbarGlyph } from "@/composer/agent-controls/glyph";
+import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";
+import { useIsCompactFormFactor } from "@/constants/layout";
+
+const SNAP_POINTS = ["80%", "90%"];
+const MODEL_LIST_TOP_INSET = 4;
+const MODEL_ROW_STRIDE = 44;
+const MODEL_VIEWPORT_VISIBLE_ROWS = 4.5;
+const FIXED_MODEL_VIEWPORT_HEIGHT =
+  MODEL_LIST_TOP_INSET + MODEL_ROW_STRIDE * MODEL_VIEWPORT_VISIBLE_ROWS;
+
+interface CompactModelSheetProps {
+  providers: ProviderSelectorProvider[];
+  selectedProvider: string;
+  selectedModel: string;
+  onSelect: (provider: string, modelId: string) => void;
+  isLoading: boolean;
+  favoriteKeys: Set<string>;
+  onToggleFavorite?: (provider: string, modelId: string) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onRetryProvider?: (provider: AgentProvider) => void;
+  isRetryingProvider?: boolean;
+  disabled?: boolean;
+  serverId?: string | null;
+  glyphSize: number;
+  children: ReactNode;
+}
+
+function shortModelLabel(label: string): string {
+  const separatorIndex = label.lastIndexOf("/");
+  return separatorIndex === -1 ? label : label.slice(separatorIndex + 1);
+}
+
+export function CompactModelSheet({
+  providers,
+  selectedProvider,
+  selectedModel,
+  onSelect,
+  isLoading,
+  favoriteKeys,
+  onToggleFavorite,
+  onOpen,
+  onClose,
+  onRetryProvider,
+  isRetryingProvider = false,
+  disabled = false,
+  serverId = null,
+  glyphSize,
+  children,
+}: CompactModelSheetProps) {
+  const { t } = useTranslation();
+  const usesBottomSheet = useIsCompactFormFactor();
+  const [isOpen, setIsOpen] = useState(false);
+  const browser = useModelBrowser({
+    providers,
+    selectedProvider,
+    selectedModel,
+    isLoading,
+    favoriteKeys,
+    serverId,
+  });
+  const { prepareToOpen, reset } = browser;
+  const ProviderIcon =
+    selectedProvider.trim().length > 0 ? getProviderIcon(selectedProvider) : null;
+  const compactFooter = useMemo(
+    () =>
+      usesBottomSheet ? (
+        <View style={styles.compactFooter} testID="agent-controls-settings-list">
+          <View style={styles.modelViewportDivider} />
+          <View style={[styles.controlsContent, styles.compactControlsContent]}>{children}</View>
+        </View>
+      ) : undefined,
+    [children, usesBottomSheet],
+  );
+
+  const open = useCallback(() => {
+    Keyboard.dismiss();
+    prepareToOpen();
+    setIsOpen(true);
+    onOpen?.();
+  }, [onOpen, prepareToOpen]);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    reset();
+    onClose?.();
+  }, [onClose, reset]);
+
+  const handleSelect = useCallback(
+    (provider: string, modelId: string) => {
+      onSelect(provider, modelId);
+      close();
+    },
+    [close, onSelect],
+  );
+
+  const toggle = useCallback(() => {
+    if (isOpen) {
+      close();
+      return;
+    }
+    open();
+  }, [close, isOpen, open]);
+
+  const triggerStyle = useCallback(
+    ({ hovered, pressed }: PressableStateCallbackType) => [
+      styles.trigger,
+      hovered && styles.triggerHovered,
+      (pressed || isOpen) && styles.triggerPressed,
+      disabled && styles.triggerDisabled,
+    ],
+    [disabled, isOpen],
+  );
+
+  return (
+    <>
+      <ComboboxTrigger
+        collapsable={false}
+        disabled={disabled}
+        onPress={toggle}
+        style={triggerStyle}
+        accessibilityRole="button"
+        accessibilityLabel={t("modelSelector.selectedModel", {
+          model: browser.selectedModelLabel,
+        })}
+        testID="combined-model-selector"
+        chevron={null}
+      >
+        {ProviderIcon ? (
+          <ComposerToolbarGlyph size={glyphSize}>
+            <ProviderIcon size={glyphSize} color={styles.providerIcon.color} />
+          </ComposerToolbarGlyph>
+        ) : null}
+        <Text style={styles.triggerText} numberOfLines={1}>
+          {shortModelLabel(browser.triggerLabel)}
+        </Text>
+      </ComboboxTrigger>
+
+      <AdaptiveModalSheet
+        header={browser.header}
+        visible={isOpen}
+        onClose={close}
+        snapPoints={SNAP_POINTS}
+        scrollable={false}
+        sizeContentToCurrentSnapPoint={usesBottomSheet}
+        footer={compactFooter}
+        footerContainerStyle={usesBottomSheet ? styles.compactFooterContainer : undefined}
+        contentContainerStyle={styles.sheetBody}
+        testID="agent-controls-model-sheet"
+      >
+        <View
+          style={[
+            styles.modelViewport,
+            usesBottomSheet ? styles.flexibleModelViewport : styles.fixedModelViewport,
+          ]}
+          testID="agent-controls-model-viewport"
+        >
+          <ModelBrowser
+            state={browser}
+            onSelect={handleSelect}
+            onToggleFavorite={onToggleFavorite}
+            onRetryProvider={onRetryProvider}
+            isRetryingProvider={isRetryingProvider}
+            scrolling="independent"
+          />
+        </View>
+        {!usesBottomSheet ? (
+          <>
+            <View style={styles.modelViewportDivider} />
+            <ScrollView
+              style={styles.controlsScroll}
+              contentContainerStyle={styles.controlsContent}
+              keyboardShouldPersistTaps="handled"
+              showsVerticalScrollIndicator={false}
+              testID="agent-controls-settings-list"
+            >
+              {children}
+            </ScrollView>
+          </>
+        ) : null}
+      </AdaptiveModalSheet>
+    </>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    height: 28,
+    minWidth: 0,
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius["2xl"],
+    backgroundColor: "transparent",
+  },
+  triggerHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  triggerPressed: {
+    backgroundColor: theme.colors.surface0,
+  },
+  triggerDisabled: {
+    opacity: 0.5,
+  },
+  triggerText: {
+    minWidth: 0,
+    flexShrink: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  providerIcon: {
+    color: theme.colors.foregroundMuted,
+  },
+  sheetBody: {
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    gap: 0,
+  },
+  modelViewport: {
+    overflow: "hidden",
+    backgroundColor: theme.colors.surfaceSidebar,
+  },
+  flexibleModelViewport: {
+    flex: 1,
+    minHeight: 0,
+  },
+  fixedModelViewport: {
+    height: FIXED_MODEL_VIEWPORT_HEIGHT,
+    minHeight: FIXED_MODEL_VIEWPORT_HEIGHT,
+  },
+  modelViewportDivider: {
+    height: 1,
+    flexShrink: 0,
+    backgroundColor: theme.colors.border,
+  },
+  controlsScroll: {
+    flex: 1,
+    minHeight: 0,
+  },
+  compactFooterContainer: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    gap: 0,
+    paddingHorizontal: 0,
+    paddingTop: 0,
+    borderTopWidth: 0,
+  },
+  compactFooter: {
+    minWidth: 0,
+  },
+  compactControlsContent: {
+    paddingBottom: 0,
+  },
+  controlsContent: {
+    paddingHorizontal: theme.spacing[2],
+    paddingTop: theme.spacing[3],
+    paddingBottom: theme.spacing[3],
+    gap: theme.spacing[1],
+  },
+}));

packages/app/src/composer/attachments/workspace.tsx

@@ -45,6 +45,7 @@ interface ComposerWorkspaceAttachmentBinding {
   buildOutgoingAttachments: (normalAttachments: UserComposerAttachment[]) => ComposerAttachment[];
   removeAttachment: (input: RemoveWorkspaceAttachmentInput) => boolean;
   openAttachment: (input: OpenWorkspaceAttachmentInput) => boolean;
+  beginSubmit: (attachments: readonly ComposerAttachment[]) => void;
   clearSentAttachments: (attachments: readonly ComposerAttachment[]) => void;
   completeSubmit: (input: CompleteSubmitInput) => void;
   resetSuppression: () => void;
@@ -196,12 +197,22 @@ function useWorkspaceAttachmentBinding({
     setSuppressedKeys([]);
   }, []);
 
+  const beginSubmit = useCallback((attachments: readonly ComposerAttachment[]) => {
+    const keys = attachments.filter(isWorkspaceAttachment).map(getAttachmentKey);
+    if (keys.length === 0) return;
+    setSuppressedKeys((current) => {
+      const next = new Set(current);
+      for (const key of keys) next.add(key);
+      return next.size === current.length ? current : Array.from(next);
+    });
+  }, []);
+
   const completeSubmit = useCallback(
     ({ result, outgoingAttachments }: CompleteSubmitInput) => {
       if (result === "submitted") {
         clearSentAttachments(outgoingAttachments);
       }
-      if (result === "queued" || result === "submitted") {
+      if (result === "queued" || result === "submitted" || result === "failed") {
         resetSuppression();
       }
     },
@@ -213,6 +224,7 @@ function useWorkspaceAttachmentBinding({
     buildOutgoingAttachments,
     removeAttachment,
     openAttachment,
+    beginSubmit,
     clearSentAttachments,
     completeSubmit,
     resetSuppression,

packages/app/src/composer/draft/import-pill.tsx

@@ -19,6 +19,7 @@ export function ComposerImportPill({ onPress, disabled = false }: ComposerImport
   const handleHoverIn = useCallback(() => setIsHovered(true), []);
   const handleHoverOut = useCallback(() => setIsHovered(false), []);
   const bodyStyle = useMemo(() => [styles.body, isHovered && styles.bodyHovered], [isHovered]);
+  const labelStyle = useMemo(() => [styles.label, isHovered && styles.labelHovered], [isHovered]);
   return (
     <View style={styles.row}>
       <Pressable
@@ -32,7 +33,7 @@ export function ComposerImportPill({ onPress, disabled = false }: ComposerImport
         style={bodyStyle}
       >
         <ThemedImportIcon size={14} uniProps={iconColorMapping} />
-        <Text style={styles.label} numberOfLines={1}>
+        <Text style={labelStyle} numberOfLines={1}>
           {t("importSession.title")}
         </Text>
       </Pressable>
@@ -50,7 +51,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
-    borderRadius: theme.borderRadius.md,
+    borderRadius: theme.borderRadius.xl,
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
     backgroundColor: theme.colors.surface1,
@@ -59,7 +60,10 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface2,
   },
   label: {
-    color: theme.colors.foreground,
+    color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
   },
+  labelHovered: {
+    color: theme.colors.foreground,
+  },
 }));

packages/app/src/composer/draft/workspace-tab.tsx

@@ -9,7 +9,6 @@ import { useContainerWidthBelow } from "@/hooks/use-container-width";
 import invariant from "tiny-invariant";
 import { Composer } from "@/composer";
 import { FileDropZone } from "@/components/file-drop/file-drop-zone";
-import { DraftAgentModeControl } from "@/composer/agent-controls/mode-control";
 import { ComposerImportPill } from "@/composer/draft/import-pill";
 import { AgentStreamView } from "@/agent-stream/view";
 import { composerWorkspaceAttachment } from "@/composer/attachments/workspace";
@@ -609,57 +608,6 @@ export function WorkspaceDraftAgentTab({
     focusInputRef.current = focus;
   }, []);
 
-  const handleProviderSelectWithFocus = useCallback(
-    (provider: Parameters<typeof composerState.setProviderFromUser>[0]) => {
-      composerState.setProviderFromUser(provider);
-      focusInputRef.current?.();
-    },
-    [composerState],
-  );
-
-  const handleModeSelectWithFocus = useCallback(
-    (modeId: string) => {
-      composerState.setModeFromUser(modeId);
-      focusInputRef.current?.();
-    },
-    [composerState],
-  );
-
-  const handleModelSelectWithFocus = useCallback(
-    (modelId: string) => {
-      composerState.setModelFromUser(modelId);
-      focusInputRef.current?.();
-    },
-    [composerState],
-  );
-
-  const handleProviderAndModelSelectWithFocus = useCallback(
-    (
-      provider: Parameters<typeof composerState.setProviderAndModelFromUser>[0],
-      modelId: string,
-    ) => {
-      composerState.setProviderAndModelFromUser(provider, modelId);
-      focusInputRef.current?.();
-    },
-    [composerState],
-  );
-
-  const handleThinkingOptionSelectWithFocus = useCallback(
-    (optionId: string) => {
-      composerState.setThinkingOptionFromUser(optionId);
-      focusInputRef.current?.();
-    },
-    [composerState],
-  );
-
-  const handleSetFeatureWithFocus = useCallback(
-    (featureId: string, value: unknown) => {
-      composerState.agentControls.onSetFeature?.(featureId, value);
-      focusInputRef.current?.();
-    },
-    [composerState],
-  );
-
   const { style: composerKeyboardStyle } = useKeyboardShiftStyle({
     mode: "translate",
   });
@@ -680,39 +628,11 @@ export function WorkspaceDraftAgentTab({
   const composerAgentControls = useMemo(
     () => ({
       ...composerState.agentControls,
-      onSelectProvider: handleProviderSelectWithFocus,
-      onSelectMode: handleModeSelectWithFocus,
-      onSelectModel: handleModelSelectWithFocus,
-      onSelectProviderAndModel: handleProviderAndModelSelectWithFocus,
-      onSelectThinkingOption: handleThinkingOptionSelectWithFocus,
-      onSetFeature: handleSetFeatureWithFocus,
       onDropdownClose: handleDropdownCloseFocus,
       disabled: isSubmitting,
     }),
-    [
-      composerState.agentControls,
-      handleProviderSelectWithFocus,
-      handleModeSelectWithFocus,
-      handleModelSelectWithFocus,
-      handleProviderAndModelSelectWithFocus,
-      handleThinkingOptionSelectWithFocus,
-      handleSetFeatureWithFocus,
-      handleDropdownCloseFocus,
-      isSubmitting,
-    ],
+    [composerState.agentControls, handleDropdownCloseFocus, isSubmitting],
   );
-  const composerFooter = useMemo(
-    () =>
-      isCompactComposerLayout ? (
-        <DraftAgentModeControl
-          placement="footer"
-          {...composerAgentControls}
-          isCompactLayout={isCompactComposerLayout}
-        />
-      ) : undefined,
-    [isCompactComposerLayout, composerAgentControls],
-  );
-
   return (
     <FileDropZone style={styles.container}>
       <View style={styles.contentContainer}>
@@ -770,7 +690,6 @@ export function WorkspaceDraftAgentTab({
           onFocusInput={handleFocusInputCallback}
           commandDraftConfig={composerState.commandDraftConfig}
           agentControls={composerAgentControls}
-          footer={composerFooter}
           isCompactLayout={isCompactComposerLayout}
         />
       </ReanimatedAnimated.View>

packages/app/src/composer/index.tsx

@@ -1,8 +1,8 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   View,
   Pressable,
   Text,
-  ActivityIndicator,
   StyleSheet as RNStyleSheet,
   type PressableStateCallbackType,
 } from "react-native";
@@ -232,6 +232,7 @@ function renderContextWindowMeter(
   serverId: string,
   provider: string | null,
   pending: boolean,
+  glyphSize: number,
 ): ReactElement | null {
   const hasData = contextWindowMaxTokens !== null && contextWindowUsedTokens !== null;
   if (!hasData && !pending) {
@@ -246,21 +247,16 @@ function renderContextWindowMeter(
       serverId={serverId}
       provider={provider}
       pending={pending}
+      glyphSize={glyphSize}
     />
   );
 }
 
 function resolveContextWindowPlacement(
   meter: ReactElement | null,
-  isMobile: boolean,
-): { beforeVoiceContent: ReactNode; footerInlineContent: ReactNode } {
-  if (isMobile) {
-    return { beforeVoiceContent: null, footerInlineContent: meter };
-  }
-  return {
-    beforeVoiceContent: <View style={styles.contextWindowMeterSlot}>{meter}</View>,
-    footerInlineContent: null,
-  };
+  reserveSlot: boolean,
+): ReactNode {
+  return reserveSlot ? <View style={styles.contextWindowMeterSlot}>{meter}</View> : null;
 }
 
 interface RenderLeftContentArgs {
@@ -302,23 +298,6 @@ interface RenderAttachmentTrayArgs {
   };
 }
 
-function renderComposerFooter(
-  footer: ReactNode,
-  footerInlineContent: ReactNode,
-): ReactElement | null {
-  if (!footer && !footerInlineContent) return null;
-  return (
-    <View style={styles.footer}>
-      <View style={styles.footerContent}>
-        <View style={styles.footerLeft}>
-          {footer}
-          {footerInlineContent}
-        </View>
-      </View>
-    </View>
-  );
-}
-
 function renderAttachmentTray(args: RenderAttachmentTrayArgs): ReactElement | null {
   const {
     selectedAttachments,
@@ -861,8 +840,6 @@ interface ComposerProps {
   agentControls?: DraftAgentControlsProps;
   /** Extra styles merged onto the message input wrapper (e.g. elevated background). */
   inputWrapperStyle?: import("react-native").ViewStyle;
-  /** Rendered below the input, inside the keyboard-shifted container. */
-  footer?: ReactNode;
   /** When true, a parent wrapper owns the keyboard shift, so the composer skips its own. */
   externalKeyboardShift?: boolean;
   /** Optional panel/container layout breakpoint. Defaults to the screen breakpoint. */
@@ -907,7 +884,7 @@ function ComposerCancelButton({
     ? t("composer.cancel.cancelingAgent")
     : t("composer.cancel.stopAgent");
   const icon = isCancellingAgent ? (
-    <ActivityIndicator size="small" color="white" />
+    <LoadingSpinner size="small" color="white" />
   ) : (
     <Square size={buttonIconSize} color="white" fill="white" />
   );
@@ -1007,7 +984,7 @@ function ComposerVoiceModeButton({
   const renderTriggerContent = useCallback(
     ({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => {
       if (isVoiceSwitching) {
-        return <ActivityIndicator size="small" color="white" />;
+        return <LoadingSpinner size="small" color="white" />;
       }
       const colorMapping = hovered ? iconForegroundMapping : iconForegroundMutedMapping;
       return <ThemedAudioLines size={buttonIconSize} uniProps={colorMapping} />;
@@ -1072,7 +1049,6 @@ export function Composer({
   onAttentionPromptSend,
   agentControls,
   inputWrapperStyle,
-  footer,
   externalKeyboardShift,
   isCompactLayout: isCompactLayoutOverride,
 }: ComposerProps) {
@@ -1119,6 +1095,7 @@ export function Composer({
     buildOutgoingAttachments,
     removeAttachment,
     openAttachment,
+    beginSubmit,
     clearSentAttachments,
     completeSubmit,
     resetSuppression,
@@ -1396,6 +1373,9 @@ export function Composer({
           queueMessage(queuedText, queuedAttachments);
         },
         submitMessage: async ({ message: submitText, attachments: submitAttachments }) => {
+          if (submitBehavior !== "preserve-and-lock") {
+            beginSubmit(submitAttachments);
+          }
           await submitMessage(submitText, submitAttachments);
         },
         clearDraft,
@@ -1417,6 +1397,7 @@ export function Composer({
     },
     [
       allowEmptySubmit,
+      beginSubmit,
       clearDraft,
       completeSubmit,
       hasExternalContent,
@@ -1800,6 +1781,7 @@ export function Composer({
 
   const contextWindowPending =
     agentState.status === "initializing" || agentState.status === "running";
+  const contextWindowMeterGlyphSize = isCompactLayout ? ICON_SIZE.md : buttonIconSize;
 
   const contextWindowMeter = useMemo(
     () =>
@@ -1807,24 +1789,25 @@ export function Composer({
         contextWindowMaxTokens,
         contextWindowUsedTokens,
         agentState.totalCostUsd,
-        isCompactLayout,
+        false,
         serverId,
         agentState.provider,
         contextWindowPending,
+        contextWindowMeterGlyphSize,
       ),
     [
       contextWindowMaxTokens,
       contextWindowUsedTokens,
       agentState.totalCostUsd,
-      isCompactLayout,
       serverId,
       agentState.provider,
       contextWindowPending,
+      contextWindowMeterGlyphSize,
     ],
   );
-  const { beforeVoiceContent, footerInlineContent } = useMemo(
-    () => resolveContextWindowPlacement(contextWindowMeter, isCompactLayout),
-    [contextWindowMeter, isCompactLayout],
+  const beforeVoiceContent = useMemo(
+    () => resolveContextWindowPlacement(contextWindowMeter, hasAgent),
+    [contextWindowMeter, hasAgent],
   );
 
   const hasGithubAttachment = useMemo(
@@ -2155,7 +2138,6 @@ export function Composer({
             </View>
           </View>
         </View>
-        {renderComposerFooter(footer, footerInlineContent)}
       </Animated.View>
     </ComposerKeyboardScopeProvider>
   );
@@ -2191,50 +2173,6 @@ const styles = StyleSheet.create((theme: Theme) => ({
     maxWidth: MAX_CONTENT_WIDTH,
     gap: theme.spacing[3],
   },
-  footer: {
-    width: "100%",
-    paddingHorizontal: theme.spacing[4],
-    // Negative margin pulls the footer up against the input area's paddingBottom.
-    // On mobile, leave a 3px gap (no token sits below spacing[1]); desktop keeps more.
-    marginTop: {
-      xs: -(theme.spacing[4] - 3),
-      md: -theme.spacing[3],
-    },
-    alignItems: "center",
-    paddingBottom: {
-      xs: 0,
-      md: theme.spacing[2],
-    },
-  },
-  footerContent: {
-    width: "100%",
-    maxWidth: MAX_CONTENT_WIDTH,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    // On mobile, the negative margins below cancel each glyph's internal padding
-    // to reach the composer border; this inset adds a small visual gap from it.
-    paddingLeft: {
-      xs: 5,
-      md: 10,
-    },
-    paddingRight: {
-      xs: 5,
-      md: 10,
-    },
-  },
-  footerLeft: {
-    flexShrink: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-    // On mobile, cancel the leading glyph's internal padding (chip paddingHorizontal)
-    // so its icon aligns to the composer border before the footer inset is applied.
-    marginLeft: {
-      xs: -theme.spacing[2],
-      md: 0,
-    },
-  },
   messageInputContainer: {
     position: "relative",
     width: "100%",
@@ -2257,6 +2195,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
   contextWindowMeterSlot: {
     width: 28,
     height: 28,
+    flexShrink: 0,
     alignItems: "center",
     justifyContent: "center",
   },

packages/app/src/composer/input/input.tsx

@@ -1,10 +1,10 @@
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   View,
   Text,
   TextInput,
   Pressable,
   Platform,
-  ActivityIndicator,
   useWindowDimensions,
   NativeSyntheticEvent,
   TextInputContentSizeChangeEventData,
@@ -445,7 +445,7 @@ function SendButtonContent({
   buttonIconSize: number;
 }) {
   if (isSubmitLoading) {
-    return <ThemedActivityIndicator size="small" uniProps={iconAccentForegroundMapping} />;
+    return <ThemedLoadingSpinner size="small" uniProps={iconAccentForegroundMapping} />;
   }
   if (submitIcon === "return") {
     return <ThemedCornerDownLeft size={buttonIconSize} uniProps={iconAccentForegroundMapping} />;
@@ -2000,7 +2000,7 @@ const ThemedMic = withUnistyles(Mic);
 const ThemedMicOff = withUnistyles(MicOff);
 const ThemedArrowUp = withUnistyles(ArrowUp);
 const ThemedCornerDownLeft = withUnistyles(CornerDownLeft);
-const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const ThemedTextInput = withUnistyles(TextInput);
 
 const iconForegroundMapping = (theme: Theme) => ({ color: theme.colors.foreground });

packages/app/src/contexts/session-context.tsx

@@ -485,11 +485,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
         serverId,
         bumpHistorySyncGeneration,
         refreshDirectories: () => getHostRuntimeStore().refreshDirectories(serverId),
-      }).catch((error) => {
-        console.error("[SessionProvider] resume revalidation failed", {
-          serverId,
-          error: toErrorMessage(error),
-        });
       });
     },
     [bumpHistorySyncGeneration, serverId],

packages/app/src/contexts/session-resume-revalidation.test.ts

@@ -32,4 +32,21 @@ describe("session resume revalidation", () => {
     expect(revalidated).toBe(false);
     expect(calls).toEqual([]);
   });
+
+  it("defers stale resume revalidation while the host is disconnected", async () => {
+    const calls: string[] = [];
+
+    const revalidated = await revalidateSessionAfterResume({
+      awayMs: SESSION_STALE_AFTER_MS,
+      serverId: "server",
+      bumpHistorySyncGeneration: (serverId) => calls.push(`history:${serverId}`),
+      refreshDirectories: async () => {
+        calls.push("directories");
+        throw new Error("Host server is not connected");
+      },
+    });
+
+    expect(revalidated).toBe(false);
+    expect(calls).toEqual(["history:server", "directories"]);
+  });
 });