chore(release): cut 0.1.90

Forward selection state into native draggable lists so virtualized workspace rows update when the active route changes.

Keep floating caller styles array-shaped and strip Unistyles metadata from owned inline geometry to avoid runtime style warnings.

.agents/skills/release-beta/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: release-beta
-description: Cut a beta release of Paseo. Use when the user says "release beta", "cut a beta", "ship a beta", "beta release", or "/release-beta". Betas are silent release candidates — no changelog, no website move.
+description: Cut a beta release of Paseo. Use when the user says "release beta", "cut a beta", "ship a beta", "beta release", or "/release-beta". Betas are silent release candidates — no changelog, no website move, npm only on the beta dist-tag.
 user-invocable: true
 ---
 
@@ -8,4 +8,4 @@ user-invocable: true
 
 Read `docs/release.md` in the Paseo repo and follow the **Beta flow** section end-to-end. Run the **Beta release** completion checklist at the bottom of that doc.
 
-Key rule the doc enforces — betas don't touch `CHANGELOG.md`. Don't draft release notes.
+Key rules the doc enforces — betas don't touch `CHANGELOG.md`, don't draft release notes, and publish npm only with the explicit `beta` dist-tag.

CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.1.90 - 2026-06-04
+
+### Added
+
+- **Group the sidebar by status so workspaces waiting on you, ready to review, working, and done are visible at a glance** ([#1317](https://github.com/getpaseo/paseo/pull/1317))
+- **Start a new workspace from the global sidebar button without choosing a project first** ([#1324](https://github.com/getpaseo/paseo/pull/1324))
+- **Open the active file directly in your editor, file manager, or GitHub instead of only opening the workspace root** ([#1285](https://github.com/getpaseo/paseo/pull/1285) by [@aaronzhongg](https://github.com/aaronzhongg))
+- **Automatically archive clean PR workspaces after the PR is merged from host settings** ([#1313](https://github.com/getpaseo/paseo/pull/1313))
+- **Desktop-managed Paseo skills stay current after installing a newer desktop build** ([#1309](https://github.com/getpaseo/paseo/pull/1309))
+- **Dart files and Dart code blocks are now syntax-highlighted** ([#1326](https://github.com/getpaseo/paseo/pull/1326))
+
+### Improved
+
+- Sidebar workspaces can be marked as read when they are ready to review or failed ([#1317](https://github.com/getpaseo/paseo/pull/1317))
+- Child agents keep unattended permissions when delegated across providers ([#1315](https://github.com/getpaseo/paseo/pull/1315))
+- Scheduled agents open with the real prompt and title instead of looking empty ([#1316](https://github.com/getpaseo/paseo/pull/1316))
+- Git controls prioritize the action that gets a ready branch shipped ([#1316](https://github.com/getpaseo/paseo/pull/1316))
+- Multiple agent questions are shown one at a time
+- OpenCode questions with free-write answers show the typed response in Paseo
+- Delegated agent activity is visible on the parent workspace
+- Sessions are ordered by latest activity
+- ACP provider catalog entries are updated for Claude Agent, Cline, Codebuddy Code, Factory Droid, and Qoder
+
+### Fixed
+
+- Timeline catch-up no longer leaves older messages unloaded
+- Markdown code in file previews renders correctly
+- Long dictation retries no longer stall new audio
+- Settings host picker navigation works from host settings pages
+- Diff gutter rows stay aligned with changed code
+- Mobile sidebar gestures stay responsive under load
+- Compact sheets keep their footer and bottom spacing visible
+
 ## 0.1.89 - 2026-06-02
 
 ### Added

docs/agent-lifecycle.md

@@ -54,6 +54,12 @@ Closing a tab on a **subagent** (any agent with `parentAgentId`) is **layout-onl
 
 The asymmetry is intentional: a subagent's home is the parent's track, not the tab. Tabs are ephemeral viewing slots; the track is the persistent record of the parent's children.
 
+## Workspace activity
+
+Agent lifecycle status stays literal: a parent agent is `idle` when its own turn is idle, even if a child is running.
+
+Workspace status is an aggregate activity signal. Root agents contribute their normal state bucket to their own workspace. Running subagents contribute `running` to their root parent's workspace, not to the subagent's current `cwd` or worktree. Non-running subagent attention, permission, and error states stay in the parent's subagents track and do not escalate the workspace bucket.
+
 ## The subagents track
 
 The collapsible track above the composer in an agent's pane (`packages/app/src/subagents/track.tsx`). Membership rule (`packages/app/src/subagents/select.ts`):

docs/data-model.md

@@ -30,7 +30,7 @@ $PASEO_HOME/
 └── push-tokens.json                     # Expo push notification tokens
 ```
 
-The `agents/{sanitized-cwd}/` directory name is derived from the agent's `cwd` by stripping the filesystem root and replacing path separators with `-` (Windows drive letters become a `C-` style prefix). Atomic writes (temp file + rename): agent records, chat, project/workspace registries, push tokens. Non-atomic (plain `writeFile`): `config.json`, `schedules/*.json`, `loops/loops.json`, `server-id`, `daemon-keypair.json`.
+The `agents/{sanitized-cwd}/` directory name is derived from the agent's `cwd` by stripping the filesystem root and replacing path separators with `-` (Windows drive letters become a `C-` style prefix). Persistent server stores write atomically by writing a temp file in the target directory and then renaming it into place.
 
 ---
 
@@ -187,7 +187,7 @@ Local speech model ids are intentionally narrow: STT uses `parakeet-tdt-0.6b-v2-
 
 **Path:** `$PASEO_HOME/schedules/{id}.json`
 
-One file per schedule. ID is 8 hex characters. Writes are direct (not atomic).
+One file per schedule. ID is 8 hex characters.
 
 | Field       | Type                                  | Description                      |
 | ----------- | ------------------------------------- | -------------------------------- |

docs/design.md

@@ -94,6 +94,8 @@ Five primitives. The pick is determined by option count, the need to search, and
 
 `<AdaptiveModalSheet>` is for a focused task. Multi-field forms (`packages/app/src/components/add-host-modal.tsx`, `packages/app/src/components/pair-link-modal.tsx`, `packages/app/src/components/project-picker-modal.tsx`), confirmations with detail, anything that earns a backdrop. Bottom sheet on compact, centered card on desktop. Raw `Modal` is wrong for any of these.
 
+`<AdaptiveModalSheet>` owns compact bottom safe-area padding inside the sheet so the sheet background still reaches the screen bottom. If a sheet's first snap point is shorter than its header, content, and safe-area clearance, raise that snap point rather than moving the sheet container.
+
 `confirmDialog` is for destructive yes/no and imperative confirmation. Promise-based: `await confirmDialog({ destructive: true, ... })`. Anything where a wrong click loses work.
 
 Three themes is `DropdownMenu`. Thirty hosts is `Combobox`. A label and a value is `AdaptiveModalSheet`. "Are you sure?" is `confirmDialog`.

docs/development.md

@@ -204,6 +204,23 @@ For tighter loops, you can rebuild a single workspace:
 - Changed `packages/server/src/*`, `packages/cli/src/*`, `packages/relay/src/*`, or `packages/highlight/src/*`: `npm run build:server`.
 - Changed app build dependencies: `npm run build:app-deps`.
 
+## ACP provider catalog versions
+
+The in-app ACP provider catalog pins package-runner entries (`npx`, `npm exec`,
+and `uvx`) to exact package versions. Run the drift checker regularly — and
+before releases — so catalog installs do not sit on stale agent versions:
+
+```bash
+npm run acp:version-drift        # report stale/non-exact package pins
+npm run acp:version-drift:check  # same, exits non-zero on drift
+npm run acp:version-drift:update # rewrite catalog pins to latest exact versions
+```
+
+The checker updates only package-runner catalog entries. Providers that use a
+preinstalled binary such as `opencode acp`, `cursor-agent acp`, or `goose acp`
+are reported as skipped because their versions are owned by the user's local
+install.
+
 ## CLI reference
 
 Use `npm run cli` to run the in-repo CLI from source (`npx tsx packages/cli/src/index.ts`). The globally installed `paseo` binary on macOS is a symlink into the installed Paseo desktop app, not this checkout — use it to drive the desktop's built-in daemon, but use `npm run cli` when you want to talk to the CLI you are editing.

docs/providers.md

@@ -30,6 +30,8 @@ OpenCode MCP injection is dynamic and session-scoped. Call OpenCode's `mcp.add`
 
 OpenCode owns user message IDs. Do not pass Paseo-generated IDs to OpenCode prompt APIs; let OpenCode create `msg*` IDs and record the user timeline item from the `message.updated` event.
 
+Every provider adapter owns its canonical user-message timeline rows. When a foreground prompt is accepted, the adapter must emit exactly one `user_message` timeline item for that submitted prompt, using the same message ID it gives to or receives from the provider runtime. Optimistic client messages are UI-only and provider transcript echoes are optional; neither is allowed to be the only source of truth. If the provider later echoes the same submitted user message, dedupe by provider-visible message ID, not by text.
+
 Draft metadata lookups should avoid creating provider sessions when the upstream provider has top-level APIs for that metadata. Prefer `AgentClient.listModels`, `listModes`, `listCommands`, or `listFeatures` over creating a scratch `AgentSession`; scratch sessions can show up as empty native sessions in provider import/history UIs.
 
 ---

docs/release.md

@@ -9,6 +9,9 @@ A release has exactly two steps. The agent does the first, the user authorizes t
 **Preparation** (local, reversible — agent does this):
 
 - format, lint, typecheck all green
+- ACP provider catalog drift checked with `npm run acp:version-drift:check`;
+  if stale package-runner pins are intentional, say so explicitly, otherwise run
+  `npm run acp:version-drift:update` and commit the updated catalog
 - draft the changelog, show it to the user, wait for review
 - run the pre-release sanity check, surface findings to the user
 - confirm CI is green
@@ -30,7 +33,7 @@ Rules that apply to both steps:
 There are two supported ways to ship from `main`:
 
 1. **Direct stable release**: you are ready to ship the current `main` commit to everyone immediately.
-2. **Beta flow**: silent release candidates. Betas don't touch the changelog, don't move the website, and don't publish npm or production mobile builds.
+2. **Beta flow**: silent release candidates. Betas don't touch the changelog, don't move the website, and publish npm only on the explicit `beta` dist-tag.
 
 ## Standard release (patch)
 
@@ -63,14 +66,15 @@ npm run release:push         # Push HEAD + tag (triggers CI workflows)
 ## Beta flow
 
 ```bash
-npm run release:beta:patch       # Bump to X.Y.Z-beta.1, push commit + tag
+npm run release:beta:patch       # Bump to X.Y.Z-beta.1, publish npm beta, push commit + tag
 # ... test desktop and APK prerelease assets from GitHub Releases ...
 npm run release:beta:next        # Optional: cut X.Y.Z-beta.2, beta.3, ...
 npm run release:promote          # Promote X.Y.Z-beta.N to stable X.Y.Z
 ```
 
 - Beta tags are published GitHub prereleases like `v0.1.41-beta.1`
-- Betas publish desktop assets and APKs for testing, but they do not publish npm packages and do not trigger the production web/mobile release flows
+- Betas publish npm packages with `--tag beta`, so `npm install @getpaseo/cli@beta` opts in while plain `npm install @getpaseo/cli` stays on `latest`
+- Betas publish desktop assets and APKs for testing, but they do not trigger the production web/mobile release flows
 - `release:promote` creates a fresh stable tag like `v0.1.41`; the final release never reuses the beta tag
 - Desktop assets now come from the Electron package at `packages/desktop`
 - Beta releases use Electron's `beta` update channel. Users on the stable channel only receive stable releases; users on the beta channel receive beta releases and the final stable release when it is published.
@@ -300,6 +304,7 @@ This ensures the checkout ref matches the actual code on `main` with the fix inc
 - `release:prepare` refreshes workspace `node_modules` links to prevent stale types
 - `npm run dev:desktop` and `npm run build:desktop` target the Electron desktop package in `packages/desktop`
 - If `release:publish` partially fails, re-run it — npm skips already-published versions
+- If `release:publish:beta` partially fails, re-run it — npm skips already-published versions and keeps prereleases off `latest` because every publish uses `--tag beta`
 - The website uses GitHub's latest published release API for download links, so published beta prereleases do not replace the stable download target.
 
 ## Changelog format
@@ -420,6 +425,7 @@ The changelog covers **stable-to-stable**. Betas are not represented. When you p
 
 - [ ] Working tree is clean and the intended commit is on `main`
 - [ ] `npm run release:beta:patch` (or `:next`) completes successfully
+- [ ] npm shows the version under the `beta` dist-tag, not `latest`
 - [ ] GitHub `Desktop Release` workflow for the `v*-beta.N` tag is green
 - [ ] GitHub `Android APK Release` workflow for the same tag is green
 

docs/unistyles.md

@@ -88,6 +88,8 @@ Do not split a component into plain and Unistyles variants just to handle one hi
 
 When a reusable component has a prop whose whole job is dynamic geometry, make that prop the seam. For example, `FloatingSurface.frameStyle` and `FloatingScrollView.style` own their own escape hatch so menu, tooltip, hover-card, and combobox callers can stay declarative instead of knowing about Unistyles internals.
 
+Do not flatten a caller-provided style array and pass the flattened object back to a React Native component. Unistyles style entries carry `unistyles_*` metadata; flattening two entries produces one object with multiple metadata keys and triggers the runtime warning: "use array syntax instead of object syntax." Preserve caller styles as arrays, and only flatten the dynamic geometry value you explicitly own. If that owned value was flattened from a mixed style prop, strip `unistyles_*` metadata before sending it through `inlineUnistylesStyle`.
+
 ## Main Gotcha: `contentContainerStyle`
 
 `ScrollView.contentContainerStyle` is the canonical trap. It looks like a style prop, but it is not the same prop that Unistyles' remapped native component registers by default. The upstream tutorial calls this out directly in its [ScrollView Background Issue](https://www.unistyl.es/v3/tutorial/settings-screen#scrollview-background-issue) section.

nix/npm-deps.hash

@@ -1 +1 @@
-sha256-R2EUXh8wV0bjdeDNWMhFzd3iDV/dpkLUikbX7nzoMXQ=
+sha256-MEG/ywKGhzW6D2iw9KIodi6wKpClWYxy++Mba+79Kt8=

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "paseo",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -36953,7 +36953,7 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -37178,12 +37178,12 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/client": "0.1.89",
-        "@getpaseo/protocol": "0.1.89",
-        "@getpaseo/server": "0.1.89",
+        "@getpaseo/client": "0.1.90",
+        "@getpaseo/protocol": "0.1.90",
+        "@getpaseo/server": "0.1.90",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -37429,10 +37429,10 @@
     },
     "packages/client": {
       "name": "@getpaseo/client",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
-        "@getpaseo/protocol": "0.1.89",
-        "@getpaseo/relay": "0.1.89",
+        "@getpaseo/protocol": "0.1.90",
+        "@getpaseo/relay": "0.1.90",
         "zod": "^3.23.8"
       },
       "devDependencies": {
@@ -37452,7 +37452,7 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@getpaseo/cli": "*",
@@ -37704,7 +37704,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "license": "MIT",
       "devDependencies": {
         "@types/react": "^18.0.25",
@@ -37740,7 +37740,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "@codemirror/language": "^6.12.3",
         "@codemirror/legacy-modes": "^6.5.3",
@@ -37971,7 +37971,7 @@
     },
     "packages/protocol": {
       "name": "@getpaseo/protocol",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "zod": "^3.23.8"
       },
@@ -37992,7 +37992,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -38210,14 +38210,14 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.17.1",
         "@anthropic-ai/claude-agent-sdk": "^0.2.133",
-        "@getpaseo/client": "0.1.89",
-        "@getpaseo/highlight": "0.1.89",
-        "@getpaseo/protocol": "0.1.89",
-        "@getpaseo/relay": "0.1.89",
+        "@getpaseo/client": "0.1.90",
+        "@getpaseo/highlight": "0.1.90",
+        "@getpaseo/protocol": "0.1.90",
+        "@getpaseo/relay": "0.1.90",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.14.46",
@@ -38989,7 +38989,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.1.89",
+      "version": "0.1.90",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.29.1",
         "@cloudflare/workers-types": "^4.20260317.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "private": true,
   "description": "Paseo: voice-controlled development environment with OpenAI Realtime API",
   "keywords": [
@@ -36,7 +36,8 @@
   "scripts": {
     "dev": "./scripts/dev.sh",
     "dev:win": "powershell ./scripts/dev.ps1",
-    "dev:server": "npm run build:server-deps && concurrently --kill-others --names protocol,client,server --prefix-colors yellow,blue,cyan \"npm run watch:protocol\" \"npm run watch:client\" \"npm run dev:server:raw\"",
+    "dev:server": "npm run build:server-deps && npm run dev:server:watch",
+    "dev:server:watch": "concurrently --kill-others --names protocol,client,server --prefix-colors yellow,blue,cyan \"npm run watch:protocol\" \"npm run watch:client\" \"npm run dev:server:raw\"",
     "dev:server:raw": "npm run dev --workspace=@getpaseo/server",
     "dev:app": "npm run start --workspace=@getpaseo/app",
     "dev:website": "npm run dev --workspace=@getpaseo/website",
@@ -44,12 +45,19 @@
     "prepare": "lefthook install --force",
     "build": "npm run build --workspaces --if-present",
     "build:highlight": "npm run build --workspace=@getpaseo/highlight",
+    "build:highlight:clean": "npm run build:clean --workspace=@getpaseo/highlight",
     "build:relay": "npm run build --workspace=@getpaseo/relay",
+    "build:relay:clean": "npm run build:clean --workspace=@getpaseo/relay",
     "build:protocol": "npm run build --workspace=@getpaseo/protocol",
+    "build:protocol:clean": "npm run build:clean --workspace=@getpaseo/protocol",
     "build:client": "npm run build:protocol && npm run build --workspace=@getpaseo/client",
+    "build:client:clean": "npm run build:protocol:clean && npm run build:clean --workspace=@getpaseo/client",
     "build:server-deps": "npm run build:highlight && npm run build:relay && npm run build:client",
+    "build:server-deps:clean": "npm run build:highlight:clean && npm run build:relay:clean && npm run build:client:clean",
     "build:server": "npm run build:server-deps && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli",
+    "build:server:clean": "npm run build:server-deps:clean && npm run build:clean --workspace=@getpaseo/server && npm run build:clean --workspace=@getpaseo/cli",
     "build:app-deps": "npm run build:highlight && npm run build:client && npm run build --workspace=@getpaseo/expo-two-way-audio",
+    "build:app-deps:clean": "npm run build:highlight:clean && npm run build:client:clean && npm run build --workspace=@getpaseo/expo-two-way-audio",
     "watch:protocol": "tsc -p packages/protocol/tsconfig.json --watch --preserveWatchOutput",
     "watch:client": "tsc -p packages/client/tsconfig.json --watch --preserveWatchOutput",
     "typecheck": "npm run typecheck --workspaces --if-present",
@@ -62,6 +70,9 @@
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
     "knip": "knip",
+    "acp:version-drift": "node scripts/check-acp-catalog-version-drift.mjs",
+    "acp:version-drift:check": "node scripts/check-acp-catalog-version-drift.mjs --fail-on-drift",
+    "acp:version-drift:update": "node scripts/check-acp-catalog-version-drift.mjs --update",
     "start": "npm run start --workspace=@getpaseo/server",
     "android": "npm run android --workspace=@getpaseo/app",
     "android:development": "npm run android:development --workspace=@getpaseo/app",
@@ -73,7 +84,7 @@
     "web": "npm run web --workspace=@getpaseo/app",
     "dev:desktop": "npm run dev --workspace=@getpaseo/desktop",
     "dev:win:desktop": "npm run dev:win --workspace=@getpaseo/desktop",
-    "build:desktop": "npm run build:app-deps && npm run build:server-deps && npm run build --workspace=@getpaseo/server && cd packages/app && cross-env PASEO_WEB_PLATFORM=electron npx expo export --platform web && cd ../.. && npm run build --workspace=@getpaseo/desktop --",
+    "build:desktop": "npm run build:app-deps:clean && cd packages/app && cross-env PASEO_WEB_PLATFORM=electron npx expo export --platform web && cd ../.. && npm run build --workspace=@getpaseo/desktop --",
     "db:query": "npm run db:query --workspace=@getpaseo/server --",
     "cli": "npx tsx packages/cli/src/index.js",
     "version": "npm run version:sync-internal && npm run release:prepare && git add -A",
@@ -87,14 +98,16 @@
     "version:all:beta:major": "node scripts/set-release-version.mjs --mode beta-major",
     "version:all:beta:next": "node scripts/set-release-version.mjs --mode beta-next",
     "version:all:promote": "node scripts/set-release-version.mjs --mode promote",
-    "release:check": "npm run release:prepare && npm run typecheck --workspace=@getpaseo/highlight && npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/protocol && npm run build:client && npm run typecheck --workspace=@getpaseo/client && npm run build:server && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/highlight && npm pack --dry-run --workspace=@getpaseo/relay && npm pack --dry-run --workspace=@getpaseo/protocol && npm pack --dry-run --workspace=@getpaseo/client && npm pack --dry-run --workspace=@getpaseo/server && npm pack --dry-run --workspace=@getpaseo/cli",
+    "release:check": "npm run release:prepare && npm run typecheck --workspace=@getpaseo/highlight && npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/protocol && npm run build:client:clean && npm run typecheck --workspace=@getpaseo/client && npm run build:server:clean && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/highlight && npm pack --dry-run --workspace=@getpaseo/relay && npm pack --dry-run --workspace=@getpaseo/protocol && npm pack --dry-run --workspace=@getpaseo/client && npm pack --dry-run --workspace=@getpaseo/server && npm pack --dry-run --workspace=@getpaseo/cli",
     "release:publish:dry-run": "npm publish --dry-run --workspace=@getpaseo/highlight --access public && npm publish --dry-run --workspace=@getpaseo/relay --access public && npm publish --dry-run --workspace=@getpaseo/protocol --access public && npm publish --dry-run --workspace=@getpaseo/client --access public && npm publish --dry-run --workspace=@getpaseo/server --access public && npm publish --dry-run --workspace=@getpaseo/cli --access public",
+    "release:publish:beta:dry-run": "npm publish --dry-run --workspace=@getpaseo/highlight --access public --tag beta && npm publish --dry-run --workspace=@getpaseo/relay --access public --tag beta && npm publish --dry-run --workspace=@getpaseo/protocol --access public --tag beta && npm publish --dry-run --workspace=@getpaseo/client --access public --tag beta && npm publish --dry-run --workspace=@getpaseo/server --access public --tag beta && npm publish --dry-run --workspace=@getpaseo/cli --access public --tag beta",
     "release:publish": "npm publish --workspace=@getpaseo/highlight --access public && npm publish --workspace=@getpaseo/relay --access public && npm publish --workspace=@getpaseo/protocol --access public && npm publish --workspace=@getpaseo/client --access public && npm publish --workspace=@getpaseo/server --access public && npm publish --workspace=@getpaseo/cli --access public",
+    "release:publish:beta": "npm publish --workspace=@getpaseo/highlight --access public --tag beta && npm publish --workspace=@getpaseo/relay --access public --tag beta && npm publish --workspace=@getpaseo/protocol --access public --tag beta && npm publish --workspace=@getpaseo/client --access public --tag beta && npm publish --workspace=@getpaseo/server --access public --tag beta && npm publish --workspace=@getpaseo/cli --access public --tag beta",
     "release:push": "node scripts/push-current-release-tag.mjs",
-    "release:beta:patch": "npm run release:check && npm run version:all:beta:patch && npm run release:push",
-    "release:beta:minor": "npm run release:check && npm run version:all:beta:minor && npm run release:push",
-    "release:beta:major": "npm run release:check && npm run version:all:beta:major && npm run release:push",
-    "release:beta:next": "npm run release:check && npm run version:all:beta:next && npm run release:push",
+    "release:beta:patch": "npm run release:check && npm run version:all:beta:patch && npm run release:publish:beta && npm run release:push",
+    "release:beta:minor": "npm run release:check && npm run version:all:beta:minor && npm run release:publish:beta && npm run release:push",
+    "release:beta:major": "npm run release:check && npm run version:all:beta:major && npm run release:publish:beta && npm run release:push",
+    "release:beta:next": "npm run release:check && npm run version:all:beta:next && npm run release:publish:beta && npm run release:push",
     "release:promote": "npm run release:check && npm run version:all:promote && npm run release:publish && npm run release:push",
     "release:patch": "npm run release:check && npm run version:all:patch && npm run release:publish && npm run release:push",
     "release:minor": "npm run release:check && npm run version:all:minor && npm run release:publish && npm run release:push",

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

@@ -0,0 +1,28 @@
+import { test } from "./fixtures";
+import {
+  expectTimelinePromptNotMounted,
+  expectTimelinePromptVisible,
+  openAgentTimeline,
+  scrollTimelineUntilOlderHistoryIsReachable,
+  seedLongMockAgentTimeline,
+} from "./helpers/timeline-pagination";
+
+test.describe("Agent timeline pagination", () => {
+  test("loads older history when the user scrolls to the top of a long agent timeline", async ({
+    page,
+  }) => {
+    test.setTimeout(120_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      await openAgentTimeline(page, agent);
+      await expectTimelinePromptVisible(page, agent.newestPrompt);
+      await expectTimelinePromptNotMounted(page, agent.oldestPrompt);
+
+      await scrollTimelineUntilOlderHistoryIsReachable(page);
+
+      await expectTimelinePromptVisible(page, agent.oldestPrompt);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+});

packages/app/e2e/diff-row-alignment.spec.ts

@@ -0,0 +1,505 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { type Page } from "@playwright/test";
+import { buildHostWorkspaceRoute, buildSettingsSectionRoute } from "../src/utils/host-routes";
+import { test, expect } from "./fixtures";
+import { getServerId } from "./helpers/server-id";
+import { connectSeedClient } from "./helpers/seed-client";
+import { createTempGitRepo } from "./helpers/workspace";
+import { waitForWorkspaceTabsVisible } from "./helpers/workspace-tabs";
+
+interface DirtyWorkspace {
+  id: string;
+}
+
+interface CleanupTask {
+  run: () => Promise<void>;
+}
+
+const cleanupTasks: CleanupTask[] = [];
+const APP_SETTINGS_KEY = "@paseo:app-settings";
+const CHANGES_PREFERENCES_KEY = "@paseo:changes-preferences";
+
+const BEFORE = `import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+interface UseMountedTabSetInput {
+  activeTabId: string | null;
+  allTabIds: string[];
+  cap: number;
+}
+
+interface UseMountedTabSetResult {
+  mountedTabIds: Set<string>;
+}
+
+function createInitialMountedTabIds(input: UseMountedTabSetInput): Set<string> {
+  if (!input.activeTabId || !input.allTabIds.includes(input.activeTabId)) {
+    return new Set<string>();
+  }
+  return new Set<string>([input.activeTabId]);
+}
+
+function setsEqual(left: Set<string>, right: Set<string>): boolean {
+  if (left.size !== right.size) {
+    return false;
+  }
+  for (const value of left) {
+    if (!right.has(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function useMountedTabSet(input: UseMountedTabSetInput): UseMountedTabSetResult {
+  const { activeTabId, allTabIds, cap } = input;
+  const allTabIdsKey = allTabIds.join("\\u0000");
+  const availableTabIds = useMemo(() => {
+    void allTabIdsKey;
+    return new Set(allTabIds);
+  }, [allTabIds, allTabIdsKey]);
+  const [mountedTabIds, setMountedTabIds] = useState(() => createInitialMountedTabIds(input));
+  const lruRef = useRef(activeTabId && allTabIds.includes(activeTabId) ? [activeTabId] : []);
+
+  useLayoutEffect(() => {
+    const nextLru = lruRef.current.filter((tabId) => availableTabIds.has(tabId));
+    if (activeTabId && availableTabIds.has(activeTabId)) {
+      const existingIndex = nextLru.indexOf(activeTabId);
+      if (existingIndex >= 0) {
+        nextLru.splice(existingIndex, 1);
+      }
+      nextLru.unshift(activeTabId);
+    }
+    if (nextLru.length > cap) {
+      nextLru.length = cap;
+    }
+
+    lruRef.current = nextLru;
+    setMountedTabIds((previousMountedTabIds) => {
+      const nextMountedTabIds = new Set(nextLru);
+      return setsEqual(previousMountedTabIds, nextMountedTabIds)
+        ? previousMountedTabIds
+        : nextMountedTabIds;
+    });
+  }, [activeTabId, availableTabIds, cap]);
+
+  return { mountedTabIds };
+}
+`;
+
+const AFTER = `import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+interface UseMountedTabSetInput {
+  activeTabId: string | null;
+  allTabIds: string[];
+  cap: number;
+}
+
+interface UseMountedTabSetResult {
+  mountedTabIds: Set<string>;
+}
+
+interface DeriveRenderMountedTabIdsInput {
+  activeTabId: string | null;
+  availableTabIds: Set<string>;
+  cap: number;
+  mountedTabIds: Set<string>;
+}
+
+function createInitialMountedTabIds(input: UseMountedTabSetInput): Set<string> {
+  if (!input.activeTabId || !input.allTabIds.includes(input.activeTabId)) {
+    return new Set<string>();
+  }
+  return new Set<string>([input.activeTabId]);
+}
+
+function setsEqual(left: Set<string>, right: Set<string>): boolean {
+  if (left.size !== right.size) {
+    return false;
+  }
+  for (const value of left) {
+    if (!right.has(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function deriveRenderMountedTabIds(input: DeriveRenderMountedTabIdsInput): Set<string> {
+  const { activeTabId, availableTabIds, cap, mountedTabIds } = input;
+  if (!activeTabId || !availableTabIds.has(activeTabId) || mountedTabIds.has(activeTabId)) {
+    return mountedTabIds;
+  }
+
+  const next = new Set<string>([activeTabId]);
+  const maxSize = Math.max(1, cap);
+  for (const tabId of mountedTabIds) {
+    if (next.size >= maxSize) {
+      break;
+    }
+    if (availableTabIds.has(tabId)) {
+      next.add(tabId);
+    }
+  }
+  return next;
+}
+
+export function useMountedTabSet(input: UseMountedTabSetInput): UseMountedTabSetResult {
+  const { activeTabId, allTabIds, cap } = input;
+  const allTabIdsKey = allTabIds.join("\\u0000");
+  const availableTabIds = useMemo(() => {
+    void allTabIdsKey;
+    return new Set(allTabIds);
+  }, [allTabIds, allTabIdsKey]);
+  const [mountedTabIds, setMountedTabIds] = useState(() => createInitialMountedTabIds(input));
+  const lruRef = useRef(activeTabId && allTabIds.includes(activeTabId) ? [activeTabId] : []);
+  const renderMountedTabIds = useMemo(
+    () =>
+      deriveRenderMountedTabIds({
+        activeTabId,
+        availableTabIds,
+        cap,
+        mountedTabIds,
+      }),
+    [activeTabId, availableTabIds, cap, mountedTabIds],
+  );
+
+  useLayoutEffect(() => {
+    const nextLru = lruRef.current.filter((tabId) => availableTabIds.has(tabId));
+    if (activeTabId && availableTabIds.has(activeTabId)) {
+      const existingIndex = nextLru.indexOf(activeTabId);
+      if (existingIndex >= 0) {
+        nextLru.splice(existingIndex, 1);
+      }
+      nextLru.unshift(activeTabId);
+    }
+    if (nextLru.length > cap) {
+      nextLru.length = cap;
+    }
+
+    lruRef.current = nextLru;
+    setMountedTabIds((previousMountedTabIds) => {
+      const nextMountedTabIds = new Set(nextLru);
+      return setsEqual(previousMountedTabIds, nextMountedTabIds)
+        ? previousMountedTabIds
+        : nextMountedTabIds;
+    });
+  }, [activeTabId, availableTabIds, cap]);
+
+  return { mountedTabIds: renderMountedTabIds };
+}
+`;
+
+test.afterEach(async () => {
+  for (const task of cleanupTasks.splice(0)) {
+    await task.run();
+  }
+});
+
+test("changes diff keeps code rows aligned with the gutter", async ({ page }) => {
+  const workspace = await createWorkspaceWithMountedTabDiff();
+  await useCodeFont(page, 9);
+  await useUnwrappedDiffLines(page);
+  await openWorkspaceChanges(page, workspace);
+
+  await expectDiffCodeFontSize(page, 9);
+  await expectVisibleDiffRowsAligned(page);
+  await expectDiffCodeTextAlignedWithGutterText(page, [
+    {
+      codeText: "function createInitialMountedTabIds(input: UseMountedTabSetInput)",
+      lineNumber: "20",
+    },
+    { codeText: "return next;", lineNumber: "55" },
+    { codeText: "useLayoutEffect(() => {", lineNumber: "78" },
+  ]);
+  await expectHoverCommentButtonAlignedWithCodeLine(page, {
+    codeText: "function createInitialMountedTabIds(input: UseMountedTabSetInput)",
+    lineNumber: "20",
+  });
+});
+
+test("changes diff keeps unwrapped gutter and code rows aligned after code size changes", async ({
+  page,
+}) => {
+  const workspace = await createWorkspaceWithMountedTabDiff();
+  await useCodeFont(page, 12);
+  await useUnwrappedDiffLines(page);
+  await openWorkspaceChanges(page, workspace);
+
+  await changeCodeFontSizeFromSettings(page, 18);
+  await returnToWorkspaceChanges(page);
+  await scrollToLowerUnwrappedDiffRows(page);
+
+  await expectDiffCodeFontSize(page, 18);
+  await expectVisibleDiffRowsShareTypography(page);
+  await expectVisibleDiffRowsAligned(page);
+});
+
+async function useCodeFont(page: Page, codeFontSize: number): Promise<void> {
+  await page.addInitScript(
+    ({ settingsKey, fontSize }) => {
+      localStorage.setItem(
+        settingsKey,
+        JSON.stringify({
+          theme: "dark",
+          sendBehavior: "interrupt",
+          serviceUrlBehavior: "ask",
+          terminalScrollbackLines: 10_000,
+          uiFontFamily: "",
+          monoFontFamily: "",
+          uiFontSize: 16,
+          codeFontSize: fontSize,
+          syntaxTheme: "one",
+        }),
+      );
+    },
+    { settingsKey: APP_SETTINGS_KEY, fontSize: codeFontSize },
+  );
+}
+
+async function useUnwrappedDiffLines(page: Page): Promise<void> {
+  await page.addInitScript(
+    ({ preferencesKey }) => {
+      localStorage.setItem(
+        preferencesKey,
+        JSON.stringify({ layout: "unified", wrapLines: false, hideWhitespace: false }),
+      );
+    },
+    { preferencesKey: CHANGES_PREFERENCES_KEY },
+  );
+}
+
+async function expectDiffCodeFontSize(page: Page, fontSize: number): Promise<void> {
+  const actualFontSize = await page
+    .getByTestId("diff-code-text-1")
+    .evaluate((text) => Number.parseFloat(getComputedStyle(text).fontSize));
+  expect(actualFontSize).toBe(fontSize);
+}
+
+async function expectVisibleDiffRowsAligned(page: Page): Promise<void> {
+  const geometry = await readVisibleDiffRowGeometry(page);
+  expect(geometry.maxDelta, JSON.stringify(geometry.rows, null, 2)).toBeLessThanOrEqual(1);
+}
+
+async function expectVisibleDiffRowsShareTypography(page: Page): Promise<void> {
+  const geometry = await readVisibleDiffRowGeometry(page);
+  expect(geometry.mismatchedTypography, JSON.stringify(geometry, null, 2)).toEqual([]);
+}
+
+async function readVisibleDiffRowGeometry(page: Page): Promise<{
+  maxDelta: number;
+  mismatchedTypography: { index: number; gutterLineHeight: number; codeLineHeight: number }[];
+  rows: {
+    index: number;
+    gutterTop: number;
+    codeTop: number;
+    delta: number;
+    gutterLineHeight: number;
+    codeLineHeight: number;
+  }[];
+}> {
+  return page.locator("body").evaluate(({ ownerDocument }) => {
+    const root = ownerDocument.querySelector('[data-testid="diff-file-0-body"]');
+    if (!root) {
+      throw new Error("Expanded diff body is not mounted");
+    }
+
+    const readRows = (prefix: string, textPrefix: string) =>
+      Array.from(root.querySelectorAll<HTMLElement>(`[data-testid^="${prefix}"]`)).map((row) => {
+        const testId = row.getAttribute("data-testid") ?? "";
+        const index = Number(testId.slice(prefix.length));
+        const rect = row.getBoundingClientRect();
+        const text = root.querySelector<HTMLElement>(`[data-testid="${textPrefix}${index}"]`);
+        const lineHeight = text ? Number.parseFloat(getComputedStyle(text).lineHeight) : 0;
+        return { index, top: rect.top, height: rect.height, lineHeight };
+      });
+
+    const gutters = new Map(
+      readRows("diff-gutter-row-", "diff-gutter-text-").map((row) => [row.index, row]),
+    );
+    const codes = readRows("diff-code-row-", "diff-code-text-");
+    const rows = codes
+      .map((code) => {
+        const gutter = gutters.get(code.index);
+        if (!gutter) {
+          throw new Error(`Missing gutter row ${code.index}`);
+        }
+        return {
+          index: code.index,
+          gutterTop: gutter.top,
+          codeTop: code.top,
+          delta: Math.abs(code.top - gutter.top),
+          gutterLineHeight: gutter.lineHeight,
+          codeLineHeight: code.lineHeight,
+        };
+      })
+      .filter((row) => row.gutterTop >= 0 && row.codeTop >= 0);
+
+    return {
+      maxDelta: Math.max(...rows.map((row) => row.delta)),
+      mismatchedTypography: rows
+        .filter((row) => Math.abs(row.gutterLineHeight - row.codeLineHeight) > 0.5)
+        .map((row) => ({
+          index: row.index,
+          gutterLineHeight: row.gutterLineHeight,
+          codeLineHeight: row.codeLineHeight,
+        })),
+      rows,
+    };
+  });
+}
+
+async function createWorkspaceWithMountedTabDiff(): Promise<DirtyWorkspace> {
+  const repo = await createTempGitRepo("diff-row-alignment-", {
+    files: [{ path: "src/use-mounted-tab-set.ts", content: BEFORE }],
+  });
+  const client = await connectSeedClient();
+  cleanupTasks.push({
+    run: async () => {
+      await client.close().catch(() => undefined);
+      await repo.cleanup().catch(() => undefined);
+    },
+  });
+
+  await writeFile(path.join(repo.path, "src/use-mounted-tab-set.ts"), AFTER);
+  const opened = await client.openProject(repo.path);
+  if (!opened.workspace) {
+    throw new Error(opened.error ?? `Failed to open project ${repo.path}`);
+  }
+  return { id: opened.workspace.id };
+}
+
+async function openWorkspaceChanges(page: Page, workspace: DirtyWorkspace): Promise<void> {
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await page.goto(buildHostWorkspaceRoute(getServerId(), workspace.id));
+  await waitForWorkspaceTabsVisible(page);
+  await page.getByRole("button", { name: "Open explorer" }).click();
+  await openChangesInVisibleExplorer(page);
+  await page.getByTestId("diff-file-0").click();
+  await expectExpandedMountedTabDiff(page);
+}
+
+async function openChangesInVisibleExplorer(page: Page): Promise<void> {
+  await expect(page.getByTestId("explorer-tab-changes")).toBeVisible({ timeout: 30_000 });
+  await expect(page.getByText("use-mounted-tab-set.ts")).toBeVisible({ timeout: 30_000 });
+}
+
+async function expectExpandedMountedTabDiff(page: Page): Promise<void> {
+  await expect(page.getByTestId("diff-file-0-body")).toBeVisible({ timeout: 30_000 });
+  await expect(page.getByText("function createInitialMountedTabIds")).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+async function changeCodeFontSizeFromSettings(page: Page, codeFontSize: number): Promise<void> {
+  await page.getByTestId("sidebar-settings").click();
+  await expect(page).toHaveURL(new RegExp(`${buildSettingsSectionRoute("general")}|/settings$`));
+  await page.getByRole("button", { name: "Appearance" }).click();
+  await page.getByLabel("Code font size").fill(String(codeFontSize));
+  await page.getByLabel("Code font size").press("Enter");
+  await expect(page.getByLabel("Code font size")).toHaveValue(String(codeFontSize));
+}
+
+async function returnToWorkspaceChanges(page: Page): Promise<void> {
+  await page.getByTestId("settings-back-to-workspace").click();
+  await waitForWorkspaceTabsVisible(page);
+  await openChangesInVisibleExplorer(page);
+  await expectExpandedMountedTabDiff(page);
+}
+
+async function scrollToLowerUnwrappedDiffRows(page: Page): Promise<void> {
+  const lastRowIndex = await page.getByTestId("diff-file-0-body").evaluate((root) => {
+    const rows = Array.from(root.querySelectorAll<HTMLElement>('[data-testid^="diff-code-row-"]'));
+    if (rows.length === 0) {
+      throw new Error("No unwrapped code rows are mounted");
+    }
+    return Math.max(
+      ...rows.map((row) => Number((row.getAttribute("data-testid") ?? "").slice(14))),
+    );
+  });
+  await page.getByTestId(`diff-code-row-${lastRowIndex}`).scrollIntoViewIfNeeded();
+  await expect(page.getByTestId(`diff-code-row-${lastRowIndex}`)).toBeVisible();
+}
+
+async function expectDiffCodeTextAlignedWithGutterText(
+  page: Page,
+  lines: { codeText: string; lineNumber: string }[],
+): Promise<void> {
+  const geometries = await readDiffTextGeometry(page, lines);
+  for (const geometry of geometries) {
+    expect(geometry.codeTop, geometry.codeText).toBeCloseTo(geometry.gutterTop, 0);
+  }
+}
+
+async function expectHoverCommentButtonAlignedWithCodeLine(
+  page: Page,
+  line: { codeText: string; lineNumber: string },
+): Promise<void> {
+  const target = await readDiffTextGeometry(page, [line]).then((rows) => rows[0]);
+  if (!target) {
+    throw new Error(`Could not find target line ${line.lineNumber}`);
+  }
+  await page.getByTestId(`diff-code-row-${target.index}`).hover();
+  const geometry = await page
+    .getByTestId(`diff-gutter-action-${target.index}`)
+    .evaluate((action, expectedCodeCenterY) => {
+      const rect = action.getBoundingClientRect();
+      return {
+        actionCenterY: rect.top + rect.height / 2,
+        codeCenterY: expectedCodeCenterY,
+      };
+    }, target.codeCenterY);
+  expect(geometry.actionCenterY).toBeCloseTo(geometry.codeCenterY, 0);
+}
+
+async function readDiffTextGeometry(
+  page: Page,
+  lines: { codeText: string; lineNumber: string }[],
+): Promise<
+  { index: number; codeText: string; codeTop: number; gutterTop: number; codeCenterY: number }[]
+> {
+  return page.locator("body").evaluate(({ ownerDocument }, targets) => {
+    const root = ownerDocument.querySelector('[data-testid="explorer-content-area"]');
+    if (!root) {
+      throw new Error("Changes panel is not mounted");
+    }
+
+    const readIndexedElements = (prefix: string) =>
+      Array.from(root.querySelectorAll<HTMLElement>(`[data-testid^="${prefix}"]`)).map(
+        (element) => {
+          const testId = element.getAttribute("data-testid") ?? "";
+          return { index: Number(testId.slice(prefix.length)), element };
+        },
+      );
+
+    const gutterTexts = readIndexedElements("diff-gutter-text-");
+    const codeTexts = readIndexedElements("diff-code-text-");
+
+    return targets.map((target) => {
+      const gutter = gutterTexts.find(
+        ({ element }) => (element.textContent ?? "").trim() === target.lineNumber,
+      );
+      if (!gutter) {
+        throw new Error(`Could not find gutter line ${target.lineNumber}`);
+      }
+      const code = codeTexts.find(
+        ({ index, element }) =>
+          index === gutter.index && (element.textContent ?? "").includes(target.codeText),
+      );
+      if (!code) {
+        throw new Error(`Could not find code row ${target.codeText}`);
+      }
+
+      const codeRect = code.element.getBoundingClientRect();
+      const gutterRect = gutter.element.getBoundingClientRect();
+
+      return {
+        index: gutter.index,
+        codeText: target.codeText,
+        codeTop: codeRect.top,
+        gutterTop: gutterRect.top,
+        codeCenterY: codeRect.top + codeRect.height / 2,
+      };
+    });
+  }, lines);
+}

packages/app/e2e/helpers/desktop-updates.ts

@@ -1,4 +1,5 @@
 import { readFileSync } from "node:fs";
+import { appendFile } from "node:fs/promises";
 import { expect, type Page } from "@playwright/test";
 import { openSettings } from "./app";
 import { getE2EDaemonPort } from "./daemon-port";
@@ -64,6 +65,21 @@ export interface DesktopBridgeConfig {
    * false so tests that only assert copy don't inadvertently trigger state changes.
    */
   confirmShouldAccept?: boolean;
+  editorTargets?: DesktopEditorTargetConfig[];
+  editorRecordPath?: string;
+}
+
+interface DesktopEditorTargetConfig {
+  id: string;
+  label: string;
+  kind: "editor" | "file-manager";
+}
+
+interface DesktopEditorOpenRecord {
+  editorId: string;
+  path: string;
+  cwd?: string;
+  mode?: "open" | "reveal";
 }
 
 export interface ConfirmDialogCall {
@@ -74,6 +90,7 @@ export interface ConfirmDialogCall {
 declare global {
   interface Window {
     __capturedDialogCall: ConfirmDialogCall | undefined;
+    __recordDesktopEditorOpen?: (input: DesktopEditorOpenRecord) => Promise<void>;
   }
 }
 
@@ -87,6 +104,15 @@ declare global {
  * can assert dialog copy without depending on window.confirm concatenation.
  */
 export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfig): Promise<void> {
+  if (config.editorRecordPath) {
+    await page.exposeFunction(
+      "__recordDesktopEditorOpen",
+      async (input: DesktopEditorOpenRecord) => {
+        await appendFile(config.editorRecordPath as string, `${JSON.stringify(input)}\n`, "utf8");
+      },
+    );
+  }
+
   await page.addInitScript((cfg) => {
     // Mutable state shared across IPC calls within this page
     let manageDaemon = cfg.manageBuiltInDaemon ?? false;
@@ -108,7 +134,19 @@ export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfi
       };
     }
 
-    (window as unknown as { paseoDesktop: unknown }).paseoDesktop = {
+    const desktopBridge: {
+      platform: string;
+      invoke: (command: string, args?: Record<string, unknown>) => Promise<unknown>;
+      dialog: {
+        ask: (message: string, options?: Record<string, unknown>) => Promise<boolean>;
+      };
+      getPendingOpenProject: () => Promise<string | null>;
+      events: { on: () => Promise<() => void> };
+      editor?: {
+        listTargets: () => Promise<DesktopEditorTargetConfig[]>;
+        openTarget: (input: DesktopEditorOpenRecord) => Promise<void>;
+      };
+    } = {
       platform: "darwin",
       invoke: async (command: string, args?: Record<string, unknown>) => {
         if (command === "check_app_update") {
@@ -202,15 +240,26 @@ export async function injectDesktopBridge(page: Page, config: DesktopBridgeConfi
       getPendingOpenProject: async () => null,
       events: { on: async () => () => undefined },
     };
+
+    if (cfg.editorTargets) {
+      desktopBridge.editor = {
+        listTargets: async () => cfg.editorTargets ?? [],
+        openTarget: async (input: DesktopEditorOpenRecord) => {
+          await window.__recordDesktopEditorOpen?.(input);
+        },
+      };
+    }
+
+    (window as unknown as { paseoDesktop: unknown }).paseoDesktop = desktopBridge;
   }, config);
 }
 
 export async function openDesktopSettings(page: Page, serverId: string): Promise<void> {
   await openSettings(page);
   await openSettingsHost(page, serverId);
-  // The daemon-lifecycle card moved to the Daemon section in the flat-settings
+  // The daemon-lifecycle card moved to the Host section in the flat-settings
   // layout; navigate there before asserting it.
-  await openSettingsHostSection(page, serverId, "daemon");
+  await openSettingsHostSection(page, serverId, "host");
   await expect(page.getByTestId("host-page-daemon-lifecycle-card")).toBeVisible({
     timeout: 15_000,
   });

packages/app/e2e/helpers/new-workspace.ts

@@ -124,14 +124,30 @@ export async function openNewWorkspaceComposer(
   });
 }
 
-export async function clickNewWorkspaceButton(
+export async function openGlobalNewWorkspaceComposer(page: Page): Promise<void> {
+  await page.getByTestId("sidebar-new-workspace").click();
+
+  await expect(page).toHaveURL(/\/h\/[^/]+\/new(?:\?.*)?$/, {
+    timeout: 30_000,
+  });
+}
+
+export async function expectNewWorkspaceProjectSelected(
   page: Page,
-  input: { projectKey: string; projectDisplayName: string; prompt?: string },
+  projectDisplayName: string,
+): Promise<void> {
+  const projectPicker = page.getByRole("button", { name: "Workspace project" });
+  await expect(projectPicker).toBeVisible({ timeout: 30_000 });
+  await expect(projectPicker).toContainText(projectDisplayName);
+}
+
+export async function submitNewWorkspacePrompt(
+  page: Page,
+  prompt = "Hello from e2e",
 ): Promise<void> {
-  await openNewWorkspaceComposer(page, input);
   const composer = page.getByRole("textbox", { name: "Message agent..." });
   await expect(composer).toBeVisible({ timeout: 30_000 });
-  await composer.fill(input.prompt ?? "Hello from e2e");
+  await composer.fill(prompt);
   const createButton = page
     .getByTestId("message-input-root")
     .getByRole("button", { name: "Create" });
@@ -139,6 +155,14 @@ export async function clickNewWorkspaceButton(
   await createButton.click();
 }
 
+export async function clickNewWorkspaceButton(
+  page: Page,
+  input: { projectKey: string; projectDisplayName: string; prompt?: string },
+): Promise<void> {
+  await openNewWorkspaceComposer(page, input);
+  await submitNewWorkspacePrompt(page, input.prompt);
+}
+
 export async function openStartingRefPicker(page: Page): Promise<void> {
   const trigger = page.getByTestId("new-workspace-ref-picker-trigger");
   await expect(trigger).toBeVisible({ timeout: 30_000 });
@@ -177,7 +201,9 @@ export async function selectPickerOptionByKeyboard(page: Page, label: string): P
   const searchInput = page.getByPlaceholder("Search branches and PRs");
   await expect(searchInput).toBeVisible({ timeout: 30_000 });
   await page.keyboard.type(label);
-  await page.keyboard.press("ArrowDown");
+  await expect(page.getByTestId(`new-workspace-ref-picker-branch-${label}`)).toBeVisible({
+    timeout: 10_000,
+  });
   await page.keyboard.press("Enter");
 }
 
@@ -212,7 +238,13 @@ export async function expectComposerGithubAttachmentPill(
 
 export async function assertNewWorkspaceSidebarAndHeader(
   page: Page,
-  input: { serverId: string; previousWorkspaceId: string; projectDisplayName: string },
+  input: {
+    serverId: string;
+    previousWorkspaceId: string;
+    projectDisplayName: string;
+    assertSidebarRow?: boolean;
+    assertHeader?: boolean;
+  },
 ): Promise<{ workspaceId: string }> {
   // Wait for URL to redirect to the newly created workspace.
   // Uses URL as source of truth to avoid picking up sidebar rows from concurrent tests.
@@ -230,15 +262,19 @@ export async function assertNewWorkspaceSidebarAndHeader(
     throw new Error(`Expected URL to redirect to a new workspace.\nCurrent URL: ${page.url()}`);
   }
 
-  const createdWorkspaceRow = page.getByTestId(
-    `sidebar-workspace-row-${input.serverId}:${workspaceId}`,
-  );
-  await expect(createdWorkspaceRow.first()).toBeVisible({ timeout: 30_000 });
+  if (input.assertSidebarRow !== false) {
+    const createdWorkspaceRow = page.getByTestId(
+      `sidebar-workspace-row-${input.serverId}:${workspaceId}`,
+    );
+    await expect(createdWorkspaceRow.first()).toBeVisible({ timeout: 30_000 });
+  }
 
-  await expectWorkspaceHeader(page, {
-    title: workspaceLabelFromPath(workspaceId),
-    subtitle: input.projectDisplayName,
-  });
+  if (input.assertHeader !== false) {
+    await expectWorkspaceHeader(page, {
+      title: workspaceLabelFromPath(workspaceId),
+      subtitle: input.projectDisplayName,
+    });
+  }
 
   return { workspaceId };
 }

packages/app/e2e/helpers/questions.ts

@@ -0,0 +1,61 @@
+import { expect, type Page } from "@playwright/test";
+
+export async function waitForQuestionPrompt(page: Page, timeout = 30_000): Promise<void> {
+  await expect(page.getByTestId("question-form-card").first()).toBeVisible({ timeout });
+}
+
+export async function expectCurrentQuestion(
+  page: Page,
+  input: { index: number; total: number; question: string },
+): Promise<void> {
+  const card = page.getByTestId("question-form-card").first();
+  await expect(card.getByTestId("question-form-current-question")).toHaveText(input.question);
+  await expect(
+    card.getByRole("button", { name: `Question ${input.index} of ${input.total}` }),
+  ).toHaveAttribute("aria-selected", "true");
+}
+
+export async function expectQuestionHidden(page: Page, question: string): Promise<void> {
+  await expect(page.getByText(question, { exact: true })).toHaveCount(0);
+}
+
+export async function chooseQuestionOption(page: Page, option: string): Promise<void> {
+  await page
+    .getByTestId("question-form-card")
+    .first()
+    .getByRole("button", { name: option })
+    .click();
+}
+
+export async function expectQuestionOptionSelected(page: Page, option: string): Promise<void> {
+  await expect(
+    page.getByTestId("question-form-card").first().getByRole("button", { name: option }),
+  ).toHaveAttribute("aria-selected", "true");
+}
+
+export async function openQuestion(
+  page: Page,
+  input: { index: number; total: number },
+): Promise<void> {
+  await page
+    .getByTestId("question-form-card")
+    .first()
+    .getByRole("button", { name: `Question ${input.index} of ${input.total}` })
+    .click();
+}
+
+export async function fillQuestionAnswer(
+  page: Page,
+  input: { question: string; answer: string },
+): Promise<void> {
+  await page
+    .getByTestId("question-form-card")
+    .first()
+    .getByRole("textbox", { name: input.question })
+    .fill(input.answer);
+}
+
+export async function submitQuestionAnswers(page: Page): Promise<void> {
+  await page.getByTestId("question-form-primary-action").click();
+  await expect(page.getByTestId("question-form-card")).toHaveCount(0, { timeout: 30_000 });
+}

packages/app/e2e/helpers/settings.ts

@@ -1,8 +1,18 @@
 import { expect, type Page } from "@playwright/test";
-import { TEST_HOST_LABEL } from "./daemon-registry";
+import { buildCreateAgentPreferences, buildSeededHost, TEST_HOST_LABEL } from "./daemon-registry";
 import { escapeRegex } from "./regex";
 import { getServerId } from "./server-id";
 
+const DISABLE_DEFAULT_SEED_ONCE_KEY = "@paseo:e2e-disable-default-seed-once";
+const SEED_NONCE_KEY = "@paseo:e2e-seed-nonce";
+const REGISTRY_KEY = "@paseo:daemon-registry";
+
+interface SavedSettingsHostInput {
+  serverId: string;
+  label: string;
+  endpoint: string;
+}
+
 const SECTION_LABELS = {
   general: "General",
   appearance: "Appearance",
@@ -15,7 +25,7 @@ const SECTION_LABELS = {
 
 export type SettingsSection = keyof typeof SECTION_LABELS | "projects";
 
-type HostSection = "connections" | "orchestration" | "providers" | "daemon";
+type HostSection = "connections" | "agents" | "workspaces" | "providers" | "host";
 
 export async function openSettingsSection(page: Page, section: SettingsSection): Promise<void> {
   const sidebar = page.getByTestId("settings-sidebar");
@@ -84,6 +94,60 @@ export async function openCompactSettings(page: Page): Promise<void> {
   await expect(page.getByTestId("settings-sidebar")).toBeVisible();
 }
 
+export async function seedSavedSettingsHosts(
+  page: Page,
+  hosts: SavedSettingsHostInput[],
+): Promise<void> {
+  await page.goto("/");
+  const nowIso = new Date().toISOString();
+  const registry = hosts.map((host) =>
+    buildSeededHost({
+      serverId: host.serverId,
+      label: host.label,
+      endpoint: host.endpoint,
+      nowIso,
+    }),
+  );
+  const firstHost = registry[0];
+  if (!firstHost) {
+    throw new Error("Expected at least one settings host fixture.");
+  }
+  const preferences = buildCreateAgentPreferences(firstHost.serverId);
+
+  await page.evaluate(
+    ({ keys, storedRegistry, storedPreferences }) => {
+      const nonce = localStorage.getItem(keys.seedNonce);
+      if (!nonce) {
+        throw new Error("Expected e2e seed nonce before overriding settings host registry.");
+      }
+
+      localStorage.setItem(keys.registry, JSON.stringify(storedRegistry));
+      localStorage.setItem("@paseo:create-agent-preferences", JSON.stringify(storedPreferences));
+      localStorage.setItem(keys.disableDefaultSeedOnce, nonce);
+    },
+    {
+      keys: {
+        disableDefaultSeedOnce: DISABLE_DEFAULT_SEED_ONCE_KEY,
+        registry: REGISTRY_KEY,
+        seedNonce: SEED_NONCE_KEY,
+      },
+      storedRegistry: registry,
+      storedPreferences: preferences,
+    },
+  );
+}
+
+export async function selectSettingsHost(page: Page, serverId: string): Promise<void> {
+  await page.getByTestId("settings-host-picker").click();
+  await page.getByTestId(`settings-host-picker-item-${serverId}`).click();
+}
+
+export async function expectSettingsHostPickerLabel(page: Page, label: string): Promise<void> {
+  await expect(
+    page.getByTestId("settings-host-picker").getByText(label, { exact: true }),
+  ).toBeVisible();
+}
+
 export async function expectCompactSettingsList(page: Page): Promise<void> {
   await expect(page).toHaveURL(/\/settings$/);
   await expect(page.getByTestId("settings-sidebar")).toBeVisible();
@@ -231,9 +295,9 @@ export async function openHostSection(
 }
 
 export async function expectHostActionCards(page: Page, serverId: string): Promise<void> {
-  // Restart + remove cards live on the Daemon section; providers moved to its
+  // Restart + remove cards live on the Host section; providers moved to its
   // own Providers section (asserted via expectHostProvidersCard).
-  await openSettingsHostSection(page, serverId, "daemon");
+  await openSettingsHostSection(page, serverId, "host");
   await expect(page.getByTestId("host-page-restart-card")).toBeVisible();
   await expect(page.getByTestId("host-page-restart-button")).toBeVisible();
   await expect(page.getByTestId("host-page-remove-host-card")).toBeVisible();
@@ -296,9 +360,10 @@ export async function expectRetiredSidebarSectionsAbsent(page: Page): Promise<vo
 
   // Host group rows are now flat top-level sections (no drill-in).
   await expect(sidebar.getByTestId("settings-host-section-connections")).toBeVisible();
-  await expect(sidebar.getByTestId("settings-host-section-orchestration")).toBeVisible();
+  await expect(sidebar.getByTestId("settings-host-section-agents")).toBeVisible();
+  await expect(sidebar.getByTestId("settings-host-section-workspaces")).toBeVisible();
   await expect(sidebar.getByTestId("settings-host-section-providers")).toBeVisible();
-  await expect(sidebar.getByTestId("settings-host-section-daemon")).toBeVisible();
+  await expect(sidebar.getByTestId("settings-host-section-host")).toBeVisible();
 
   // The old per-host entry rows are replaced by the host picker.
   await expect(sidebar.locator('[data-testid^="settings-host-entry-"]')).toHaveCount(0);

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

@@ -0,0 +1,102 @@
+import { expect, type Page } from "@playwright/test";
+import { buildAgentRoute, seedMockAgentWorkspace, type MockAgentWorkspace } from "./mock-agent";
+
+interface LongTimelineAgentOptions {
+  turns: number;
+}
+
+interface LongTimelineAgent extends MockAgentWorkspace {
+  oldestPrompt: string;
+  newestPrompt: string;
+}
+
+const PROMPT_PREFIX = "timeline-pagination-turn";
+
+function promptForTurn(index: number): string {
+  return `${PROMPT_PREFIX}-${index}: emit 1 coalesced agent stream updates`;
+}
+
+export async function seedLongMockAgentTimeline(
+  options: LongTimelineAgentOptions,
+): Promise<LongTimelineAgent> {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "timeline-pagination-",
+    title: "Timeline pagination regression",
+    model: "ten-second-stream",
+  });
+
+  for (let index = 0; index < options.turns; index += 1) {
+    await agent.client.sendAgentMessage(agent.agentId, promptForTurn(index));
+    await agent.client.waitForFinish(agent.agentId, 15_000);
+  }
+
+  return {
+    ...agent,
+    oldestPrompt: promptForTurn(0),
+    newestPrompt: promptForTurn(options.turns - 1),
+  };
+}
+
+export async function openAgentTimeline(page: Page, agent: LongTimelineAgent): Promise<void> {
+  await page.goto(buildAgentRoute(agent.cwd, agent.agentId));
+  await page.waitForURL(
+    (url) => url.pathname.includes("/workspace/") && !url.searchParams.has("open"),
+    { timeout: 60_000 },
+  );
+}
+
+export async function expectTimelinePromptVisible(page: Page, prompt: string): Promise<void> {
+  await expect(page.getByText(prompt, { exact: true })).toBeVisible({ timeout: 30_000 });
+}
+
+export async function expectTimelinePromptNotMounted(page: Page, prompt: string): Promise<void> {
+  await expect(page.getByText(prompt, { exact: true })).toHaveCount(0);
+}
+
+export async function scrollTimelineToOldestLoadedEdge(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await scroll.hover();
+  await page.mouse.wheel(0, -20_000);
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      }),
+  );
+  await scroll.evaluate((element) => {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("Agent chat scroll element is not an HTMLElement");
+    }
+    element.scrollTop = 0;
+    element.dispatchEvent(new Event("scroll", { bubbles: true }));
+  });
+}
+
+export async function scrollTimelineUntilOlderHistoryIsReachable(page: Page): Promise<void> {
+  const scroll = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  const previousHeight = await scroll.evaluate((element) => {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error("Agent chat scroll element is not an HTMLElement");
+    }
+    return element.scrollHeight;
+  });
+
+  await page.evaluate(
+    () =>
+      new Promise<void>((resolve) => {
+        requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      }),
+  );
+  await scrollTimelineToOldestLoadedEdge(page);
+  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;
+      }),
+    )
+    .toBeGreaterThan(previousHeight);
+  await scrollTimelineToOldestLoadedEdge(page);
+}

packages/app/e2e/new-workspace.spec.ts

@@ -7,16 +7,17 @@ import {
   archiveWorkspaceFromDaemon,
   archiveLocalWorkspaceFromDaemon,
   assertNewWorkspaceSidebarAndHeader,
-  clickNewWorkspaceButton,
   closeBranchPicker,
   connectNewWorkspaceDaemonClient,
   createWorktreeViaDaemon,
   delayBrowserAgentCreatedStatus,
   expectComposerGithubAttachmentPill,
+  expectNewWorkspaceProjectSelected,
   expectPickerClosed,
   expectPickerOpen,
   expectPickerSelected,
   expectStartingRefPickerTriggerPr,
+  openGlobalNewWorkspaceComposer,
   openBranchPicker,
   openNewWorkspaceComposer,
   openProjectViaDaemon,
@@ -24,6 +25,7 @@ import {
   selectBranchInPicker,
   selectGitHubPrInPicker,
   selectPickerOptionByKeyboard,
+  submitNewWorkspacePrompt,
 } from "./helpers/new-workspace";
 import { createTempGitRepo, readWorktreeBranchInfo } from "./helpers/workspace";
 import { getServerId } from "./helpers/server-id";
@@ -36,6 +38,147 @@ import {
   workspaceLabelFromPath,
 } from "./helpers/workspace-ui";
 
+interface WorkspaceStatusGroupEvent {
+  rowTestId: string;
+  bucket: string;
+  indicatorTestId: string | null;
+  label: string;
+  at: number;
+}
+
+async function switchSidebarToStatusGrouping(page: import("@playwright/test").Page) {
+  await page.getByTestId("sidebar-grouping-selector").click();
+  await page.getByTestId("sidebar-grouping-status").click();
+  await expect(page.getByTestId("sidebar-status-group-done")).toBeVisible({ timeout: 30_000 });
+}
+
+async function startTrackingSidebarStatusGroups(page: import("@playwright/test").Page) {
+  await page.evaluate(() => {
+    interface StatusGroupEvent {
+      rowTestId: string;
+      bucket: string;
+      indicatorTestId: string | null;
+      label: string;
+      at: number;
+    }
+    const win = window as typeof window & {
+      __workspaceStatusGroupEvents?: StatusGroupEvent[];
+      __workspaceStatusGroupObserver?: MutationObserver;
+    };
+    win.__workspaceStatusGroupEvents = [];
+    win.__workspaceStatusGroupObserver?.disconnect();
+
+    const capture = () => {
+      const events = win.__workspaceStatusGroupEvents;
+      if (!events) return;
+      const groups = document.querySelectorAll<HTMLElement>(
+        '[data-testid^="sidebar-status-group-"]',
+      );
+      for (const group of groups) {
+        const groupTestId = group.getAttribute("data-testid") ?? "";
+        const bucket = groupTestId.replace("sidebar-status-group-", "");
+        const label = group.textContent ?? "";
+        const block = group.parentElement?.parentElement;
+        if (!block) continue;
+        const rows = block.querySelectorAll<HTMLElement>('[data-testid^="sidebar-workspace-row-"]');
+        for (const row of rows) {
+          const rowTestId = row.getAttribute("data-testid");
+          if (!rowTestId) continue;
+          const indicatorTestId =
+            row
+              .querySelector<HTMLElement>('[data-testid^="workspace-status-indicator-"]')
+              ?.getAttribute("data-testid") ?? null;
+          const last = events.at(-1);
+          if (
+            last?.rowTestId === rowTestId &&
+            last.bucket === bucket &&
+            last.indicatorTestId === indicatorTestId
+          ) {
+            continue;
+          }
+          events.push({ rowTestId, bucket, indicatorTestId, label, at: performance.now() });
+        }
+      }
+    };
+
+    capture();
+    const observer = new MutationObserver(capture);
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+    win.__workspaceStatusGroupObserver = observer;
+  });
+}
+
+async function getTrackedSidebarStatusGroups(
+  page: import("@playwright/test").Page,
+): Promise<WorkspaceStatusGroupEvent[]> {
+  return page.evaluate(() => {
+    const win = window as typeof window & {
+      __workspaceStatusGroupEvents?: WorkspaceStatusGroupEvent[];
+    };
+    return win.__workspaceStatusGroupEvents ?? [];
+  });
+}
+
+async function waitForWorkspaceStatusGroupEvent(input: {
+  page: import("@playwright/test").Page;
+  rowTestId: string;
+  bucket: string;
+}) {
+  await input.page.waitForFunction(
+    ({ expectedRowTestId, expectedBucket }) => {
+      const win = window as typeof window & {
+        __workspaceStatusGroupEvents?: WorkspaceStatusGroupEvent[];
+      };
+      for (const event of win.__workspaceStatusGroupEvents ?? []) {
+        if (event.rowTestId === expectedRowTestId && event.bucket === expectedBucket) {
+          return true;
+        }
+      }
+      return false;
+    },
+    { expectedRowTestId: input.rowTestId, expectedBucket: input.bucket },
+    { timeout: 30_000 },
+  );
+}
+
+async function expectWorkspaceStatusGroupEvents(input: {
+  page: import("@playwright/test").Page;
+  rowTestId: string;
+  includes: string;
+  excludes: string;
+  includesIndicator?: string;
+  excludesIndicator?: string;
+}) {
+  await waitForWorkspaceStatusGroupEvent({
+    page: input.page,
+    rowTestId: input.rowTestId,
+    bucket: input.includes,
+  });
+  const createdWorkspaceEvents = (await getTrackedSidebarStatusGroups(input.page)).filter(
+    (event) => event.rowTestId === input.rowTestId,
+  );
+  expect(createdWorkspaceEvents.map((event) => event.bucket)).toContain(input.includes);
+  expect(createdWorkspaceEvents.filter((event) => event.bucket === input.excludes)).toEqual([]);
+  if (input.includesIndicator) {
+    expect(createdWorkspaceEvents.map((event) => event.indicatorTestId)).toContain(
+      input.includesIndicator,
+    );
+  }
+  if (input.excludesIndicator) {
+    expect(
+      createdWorkspaceEvents.filter((event) => event.indicatorTestId === input.excludesIndicator),
+    ).toEqual([]);
+  }
+}
+
+async function submitNewWorkspaceWithoutPrompt(page: import("@playwright/test").Page) {
+  const createButton = page
+    .getByTestId("message-input-root")
+    .getByRole("button", { name: "Create" });
+  await expect(createButton).toBeVisible({ timeout: 30_000 });
+  await createButton.click();
+}
+
 test.describe("New workspace flow", () => {
   let client: Awaited<ReturnType<typeof connectNewWorkspaceDaemonClient>>;
   const localWorkspaceIds = new Set<string>();
@@ -193,7 +336,7 @@ test.describe("New workspace flow", () => {
     }
   });
 
-  test("clicking new workspace redirects, renders header, shows sidebar row, and keeps one agent tab", async ({
+  test("global new workspace uses the last active project and creates one agent tab", async ({
     page,
   }) => {
     const serverId = getServerId();
@@ -217,15 +360,16 @@ test.describe("New workspace flow", () => {
         subtitle: openedProject.projectDisplayName,
       });
 
-      await clickNewWorkspaceButton(page, {
-        projectKey: openedProject.projectKey,
-        projectDisplayName: openedProject.projectDisplayName,
-      });
+      await openGlobalNewWorkspaceComposer(page);
+      await expectNewWorkspaceProjectSelected(page, openedProject.projectDisplayName);
+      await submitNewWorkspacePrompt(page);
 
       const createdWorkspace = await assertNewWorkspaceSidebarAndHeader(page, {
         serverId,
         previousWorkspaceId: openedProject.workspaceId,
         projectDisplayName: openedProject.projectDisplayName,
+        assertSidebarRow: false,
+        assertHeader: false,
       });
       createdWorktreeIds.add(createdWorkspace.workspaceId);
 
@@ -312,6 +456,8 @@ test.describe("New workspace flow", () => {
         serverId,
         previousWorkspaceId: openedProject.workspaceId,
         projectDisplayName: openedProject.projectDisplayName,
+        assertSidebarRow: false,
+        assertHeader: false,
       });
       createdWorktreeIds.add(createdWorkspace.workspaceId);
 
@@ -343,6 +489,117 @@ test.describe("New workspace flow", () => {
     }
   });
 
+  test("new workspace with initial agent never appears in the Done status group", async ({
+    page,
+  }) => {
+    const serverId = getServerId();
+
+    const tempRepo = await createTempGitRepo("new-workspace-status-optimistic-");
+
+    try {
+      const openedProject = await openProjectViaDaemon(client, tempRepo.path);
+      localWorkspaceIds.add(openedProject.workspaceId);
+
+      await gotoAppShell(page);
+      await waitForSidebarHydration(page);
+
+      await switchWorkspaceViaSidebar({
+        page,
+        serverId,
+        targetWorkspacePath: openedProject.workspaceId,
+      });
+      await expectWorkspaceHeader(page, {
+        title: openedProject.workspaceName,
+        subtitle: openedProject.projectDisplayName,
+      });
+
+      await switchSidebarToStatusGrouping(page);
+      await startTrackingSidebarStatusGroups(page);
+
+      await openGlobalNewWorkspaceComposer(page);
+      await expectNewWorkspaceProjectSelected(page, openedProject.projectDisplayName);
+      await submitNewWorkspacePrompt(page);
+
+      const createdWorkspace = await assertNewWorkspaceSidebarAndHeader(page, {
+        serverId,
+        previousWorkspaceId: openedProject.workspaceId,
+        projectDisplayName: openedProject.projectDisplayName,
+        assertSidebarRow: false,
+        assertHeader: false,
+      });
+      createdWorktreeIds.add(createdWorkspace.workspaceId);
+
+      const rowTestId = `sidebar-workspace-row-${serverId}:${createdWorkspace.workspaceId}`;
+      await expectWorkspaceStatusGroupEvents({
+        page,
+        rowTestId,
+        includes: "running",
+        excludes: "done",
+        includesIndicator: "workspace-status-indicator-running",
+      });
+    } finally {
+      await tempRepo.cleanup();
+    }
+  });
+
+  test("new workspace without an initial agent appears in the Done status group", async ({
+    page,
+  }) => {
+    const serverId = getServerId();
+
+    const tempRepo = await createTempGitRepo("new-workspace-status-empty-");
+
+    try {
+      const openedProject = await openProjectViaDaemon(client, tempRepo.path);
+      localWorkspaceIds.add(openedProject.workspaceId);
+
+      await gotoAppShell(page);
+      await waitForSidebarHydration(page);
+
+      await switchWorkspaceViaSidebar({
+        page,
+        serverId,
+        targetWorkspacePath: openedProject.workspaceId,
+      });
+      await expectWorkspaceHeader(page, {
+        title: openedProject.workspaceName,
+        subtitle: openedProject.projectDisplayName,
+      });
+
+      await switchSidebarToStatusGrouping(page);
+      await startTrackingSidebarStatusGroups(page);
+
+      await openGlobalNewWorkspaceComposer(page);
+      await expectNewWorkspaceProjectSelected(page, openedProject.projectDisplayName);
+      await submitNewWorkspaceWithoutPrompt(page);
+
+      const createdWorkspace = await assertNewWorkspaceSidebarAndHeader(page, {
+        serverId,
+        previousWorkspaceId: openedProject.workspaceId,
+        projectDisplayName: openedProject.projectDisplayName,
+      });
+      createdWorktreeIds.add(createdWorkspace.workspaceId);
+
+      const rowTestId = `sidebar-workspace-row-${serverId}:${createdWorkspace.workspaceId}`;
+      await expectWorkspaceStatusGroupEvents({
+        page,
+        rowTestId,
+        includes: "done",
+        excludes: "running",
+        excludesIndicator: "workspace-status-indicator-loading",
+      });
+      await expectWorkspaceStatusGroupEvents({
+        page,
+        rowTestId,
+        includes: "done",
+        excludes: "running",
+        excludesIndicator: "workspace-status-indicator-running",
+      });
+    } finally {
+      await tempRepo.cleanup();
+    }
+  });
+
   test("selected branch becomes the base of a new workspace worktree", async ({ page }) => {
     const serverId = getServerId();
 
@@ -400,7 +657,7 @@ test.describe("New workspace flow", () => {
     }
   });
 
-  test("branch picker opens via keyboard, navigates options, and selects on Enter", async ({
+  test("branch picker opens via keyboard and selects the filtered option on Enter", async ({
     page,
   }) => {
     const tempRepo = await createTempGitRepo("picker-keyboard-", { branches: ["main", "dev"] });

packages/app/e2e/question-prompt-pagination.spec.ts

@@ -0,0 +1,73 @@
+import { test } from "./fixtures";
+import { openAgentRoute, seedMockAgentWorkspace } from "./helpers/mock-agent";
+import {
+  chooseQuestionOption,
+  expectCurrentQuestion,
+  expectQuestionHidden,
+  expectQuestionOptionSelected,
+  fillQuestionAnswer,
+  openQuestion,
+  submitQuestionAnswers,
+  waitForQuestionPrompt,
+} from "./helpers/questions";
+
+const TOTAL_QUESTIONS = 3;
+const SURFACE_QUESTION = "Which surface should this apply to?";
+const ROLLOUT_QUESTION = "Which rollout should we use?";
+const SUCCESS_QUESTION = "What success criteria should we use?";
+
+test.describe("Question prompt pagination", () => {
+  test("shows one question at a time with numbered navigation", async ({ page }) => {
+    test.setTimeout(180_000);
+
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "question-pagination-",
+      title: "Question pagination e2e",
+      initialPrompt: "Emit synthetic questions.",
+    });
+
+    try {
+      await openAgentRoute(page, session);
+      await waitForQuestionPrompt(page, 120_000);
+
+      await expectCurrentQuestion(page, {
+        index: 1,
+        total: TOTAL_QUESTIONS,
+        question: SURFACE_QUESTION,
+      });
+      await expectQuestionHidden(page, ROLLOUT_QUESTION);
+      await expectQuestionHidden(page, SUCCESS_QUESTION);
+
+      await chooseQuestionOption(page, "App");
+      await expectCurrentQuestion(page, {
+        index: 2,
+        total: TOTAL_QUESTIONS,
+        question: ROLLOUT_QUESTION,
+      });
+
+      await openQuestion(page, { index: 1, total: TOTAL_QUESTIONS });
+      await expectCurrentQuestion(page, {
+        index: 1,
+        total: TOTAL_QUESTIONS,
+        question: SURFACE_QUESTION,
+      });
+      await expectQuestionOptionSelected(page, "App");
+
+      await openQuestion(page, { index: 2, total: TOTAL_QUESTIONS });
+      await chooseQuestionOption(page, "Behind feature flag");
+      await expectCurrentQuestion(page, {
+        index: 3,
+        total: TOTAL_QUESTIONS,
+        question: SUCCESS_QUESTION,
+      });
+
+      await fillQuestionAnswer(page, {
+        question: SUCCESS_QUESTION,
+        answer: "Only one prompt is visible at a time.",
+      });
+      await submitQuestionAnswers(page);
+    } finally {
+      await session.cleanup();
+    }
+  });
+});

packages/app/e2e/settings-host-page.spec.ts

@@ -33,15 +33,15 @@ test.describe("Settings host page", () => {
     await expectHostConnectionsCard(page, port);
   });
 
-  test("orchestration section shows the inject MCP toggle", async ({ page }) => {
+  test("agents section shows the inject MCP toggle", async ({ page }) => {
     const serverId = getServerId();
 
     await gotoAppShell(page);
     await openSettings(page);
     await openSettingsHost(page, serverId);
 
-    await openHostSection(page, serverId, "orchestration");
-    await expectSettingsHeader(page, "Orchestration");
+    await openHostSection(page, serverId, "agents");
+    await expectSettingsHeader(page, "Agents");
     await expectHostInjectMcpCard(page);
   });
 
@@ -56,15 +56,15 @@ test.describe("Settings host page", () => {
     await expectSettingsHeader(page, "Providers");
   });
 
-  test("daemon section shows the host label and restart/remove action cards", async ({ page }) => {
+  test("host section shows the host label and restart/remove action cards", async ({ page }) => {
     const serverId = getServerId();
 
     await gotoAppShell(page);
     await openSettings(page);
     await openSettingsHost(page, serverId);
 
-    await openHostSection(page, serverId, "daemon");
-    await expectSettingsHeader(page, "Daemon");
+    await openHostSection(page, serverId, "host");
+    await expectSettingsHeader(page, "Host");
     await expectHostLabelDisplayed(page);
     await expectHostActionCards(page, serverId);
   });
@@ -75,14 +75,14 @@ test.describe("Settings host page", () => {
     await gotoAppShell(page);
     await openSettings(page);
     await openSettingsHost(page, serverId);
-    await openHostSection(page, serverId, "daemon");
+    await openHostSection(page, serverId, "host");
 
     await expectHostLabelDisplayed(page);
     await clickEditHostLabel(page);
     await expectHostLabelEditMode(page, TEST_HOST_LABEL);
   });
 
-  test("daemon section does not render pair-device or daemon-lifecycle rows for a remote daemon", async ({
+  test("host section does not render pair-device or daemon-lifecycle rows for a remote daemon", async ({
     page,
   }) => {
     const serverId = getServerId();
@@ -90,7 +90,7 @@ test.describe("Settings host page", () => {
     await gotoAppShell(page);
     await openSettings(page);
     await openSettingsHost(page, serverId);
-    await openHostSection(page, serverId, "daemon");
+    await openHostSection(page, serverId, "host");
 
     // TODO: add local-daemon fixture for positive Pair/Daemon coverage.
     await expectHostNoLocalOnlyRows(page);
@@ -113,7 +113,7 @@ test.describe("Settings host page", () => {
 
     await expectHostPageVisible(page, serverId);
     await expectSettingsHeader(page, "Connections");
-    await openHostSection(page, serverId, "daemon");
+    await openHostSection(page, serverId, "host");
     await expectHostLabelDisplayed(page);
     await expectHostActionCards(page, serverId);
   });

packages/app/e2e/settings-navigation.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "./fixtures";
 import { gotoAppShell, openSettings } from "./helpers/app";
+import { getE2EDaemonPort } from "./helpers/daemon-port";
 import {
   openSettingsSection,
   expectSettingsHeader,
@@ -26,7 +27,12 @@ import {
   expectAboutContent,
   expectGeneralContent,
   expectAppearanceContent,
+  seedSavedSettingsHosts,
+  selectSettingsHost,
+  expectSettingsHostPickerLabel,
+  openSettingsHostSection,
 } from "./helpers/settings";
+import { getServerId } from "./helpers/server-id";
 
 test.describe("Settings sidebar navigation", () => {
   test("clicking a sidebar section updates the URL and renders the section", async ({ page }) => {
@@ -157,4 +163,28 @@ test.describe("Settings — compact master-detail", () => {
     await expect(page).toHaveURL(/\/settings$/);
     await expectSettingsSidebarVisible(page);
   });
+
+  test("switching the host picker on the settings list scopes host rows without navigating", async ({
+    page,
+  }) => {
+    const primaryServerId = getServerId();
+    const secondaryServerId = "srv_e2e_settings_secondary";
+    const secondaryHostLabel = "Stable horse";
+    const endpoint = `127.0.0.1:${getE2EDaemonPort()}`;
+
+    await seedSavedSettingsHosts(page, [
+      { serverId: primaryServerId, label: "First horse", endpoint },
+      { serverId: secondaryServerId, label: secondaryHostLabel, endpoint },
+    ]);
+    await gotoAppShell(page);
+    await openCompactSettings(page);
+
+    await selectSettingsHost(page, secondaryServerId);
+
+    await expect(page).toHaveURL(/\/settings$/);
+    await expectSettingsSidebarVisible(page);
+    await expectSettingsHostPickerLabel(page, secondaryHostLabel);
+
+    await openSettingsHostSection(page, secondaryServerId, "connections");
+  });
 });

packages/app/e2e/workspace-open-in-editor.spec.ts

@@ -5,8 +5,10 @@ import { injectDesktopBridge } from "./helpers/desktop-updates";
 import { clickSettingsBackToWorkspace } from "./helpers/settings";
 
 interface EditorOpenRecord {
-  command: string;
-  args: string[];
+  editorId: string;
+  path: string;
+  cwd?: string;
+  mode?: "open" | "reveal";
 }
 
 function requireE2EEnv(name: string): string {
@@ -43,8 +45,8 @@ async function chooseEditorTarget(page: Page, targetId: "vscode"): Promise<void>
 
 async function expectEditorOpened(input: {
   recordPath: string;
-  command: string;
-  workspacePath: string;
+  editorId: string;
+  path: string;
   afterCount: number;
 }): Promise<void> {
   await expect
@@ -53,10 +55,7 @@ async function expectEditorOpened(input: {
         const records = await readEditorOpenRecords(input.recordPath);
         return records
           .slice(input.afterCount)
-          .some(
-            (record) =>
-              record.command === input.command && record.args.includes(input.workspacePath),
-          );
+          .some((record) => record.editorId === input.editorId && record.path === input.path);
       },
       { timeout: 30_000 },
     )
@@ -73,7 +72,14 @@ test.describe("Workspace open in editor", () => {
     const serverId = requireE2EEnv("E2E_SERVER_ID");
     const recordPath = requireE2EEnv("E2E_EDITOR_RECORD_PATH");
     await rm(recordPath, { force: true });
-    await injectDesktopBridge(page, { serverId });
+    await injectDesktopBridge(page, {
+      serverId,
+      editorTargets: [
+        { id: "cursor", label: "Cursor", kind: "editor" },
+        { id: "vscode", label: "VS Code", kind: "editor" },
+      ],
+      editorRecordPath: recordPath,
+    });
 
     const workspace = await withWorkspace({ prefix: "workspace-editor-target-" });
     await workspace.navigateTo();
@@ -81,8 +87,8 @@ test.describe("Workspace open in editor", () => {
     await chooseEditorTarget(page, "vscode");
     await expectEditorOpened({
       recordPath,
-      command: "code",
-      workspacePath: workspace.repoPath,
+      editorId: "vscode",
+      path: workspace.repoPath,
       afterCount: 0,
     });
     const recordsAfterSelection = (await readEditorOpenRecords(recordPath)).length;
@@ -94,8 +100,8 @@ test.describe("Workspace open in editor", () => {
     await page.getByTestId("workspace-open-in-editor-primary").click();
     await expectEditorOpened({
       recordPath,
-      command: "code",
-      workspacePath: workspace.repoPath,
+      editorId: "vscode",
+      path: workspace.repoPath,
       afterCount: recordsAfterSelection,
     });
     const recordsAfterReturnOpen = (await readEditorOpenRecords(recordPath)).length;
@@ -105,8 +111,8 @@ test.describe("Workspace open in editor", () => {
     await page.getByTestId("workspace-open-in-editor-primary").click();
     await expectEditorOpened({
       recordPath,
-      command: "code",
-      workspacePath: workspace.repoPath,
+      editorId: "vscode",
+      path: workspace.repoPath,
       afterCount: recordsAfterReturnOpen,
     });
   });

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/app",
-  "version": "0.1.89",
+  "version": "0.1.90",
   "private": true,
   "main": "index.ts",
   "scripts": {

packages/app/src/app/_layout.tsx

@@ -40,6 +40,8 @@ import {
 } from "@/contexts/horizontal-scroll-context";
 import { SessionProvider } from "@/contexts/session-context";
 import {
+  MOBILE_VISUAL_PANEL_AGENT,
+  MOBILE_VISUAL_PANEL_AGENT_LIST,
   SidebarAnimationProvider,
   useSidebarAnimation,
 } from "@/contexts/sidebar-animation-context";
@@ -493,7 +495,6 @@ function MobileGestureWrapper({
   children: ReactNode;
   chromeEnabled: boolean;
 }) {
-  const mobileView = usePanelStore((state) => state.mobileView);
   const showMobileAgentList = usePanelStore((state) => state.showMobileAgentList);
   const horizontalScroll = useHorizontalScrollOptional();
   const {
@@ -503,12 +504,13 @@ function MobileGestureWrapper({
     animateToOpen,
     animateToClose,
     isGesturing,
+    mobileVisualPanel,
     gestureAnimatingRef,
     openGestureRef,
   } = useSidebarAnimation();
   const touchStartX = useSharedValue(0);
   const touchStartY = useSharedValue(0);
-  const openGestureEnabled = chromeEnabled && mobileView === "agent";
+  const openGestureEnabled = chromeEnabled;
 
   const handleGestureOpen = useCallback(() => {
     gestureAnimatingRef.current = true;
@@ -538,6 +540,11 @@ function MobileGestureWrapper({
           const absDeltaX = Math.abs(deltaX);
           const absDeltaY = Math.abs(deltaY);
 
+          if (mobileVisualPanel.value !== MOBILE_VISUAL_PANEL_AGENT) {
+            stateManager.fail();
+            return;
+          }
+
           if (horizontalScroll?.isAnyScrolledRight.value) {
             stateManager.fail();
             return;
@@ -579,9 +586,11 @@ function MobileGestureWrapper({
           isGesturing.value = false;
           const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
           if (shouldOpen) {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT_LIST;
             animateToOpen();
             runOnJS(handleGestureOpen)();
           } else {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT;
             animateToClose();
           }
         })
@@ -593,6 +602,7 @@ function MobileGestureWrapper({
       windowWidth,
       translateX,
       backdropOpacity,
+      mobileVisualPanel,
       animateToOpen,
       animateToClose,
       handleGestureOpen,

packages/app/src/app/h/[serverId]/new.tsx

@@ -9,14 +9,10 @@ export default function HostNewWorkspaceRoute() {
     projectId?: string;
   }>();
   const serverId = typeof params.serverId === "string" ? params.serverId : "";
-  const sourceDirectory = typeof params.dir === "string" ? params.dir : "";
+  const sourceDirectory = typeof params.dir === "string" ? params.dir : undefined;
   const displayName = typeof params.name === "string" ? params.name : undefined;
   const projectId = typeof params.projectId === "string" ? params.projectId : undefined;
 
-  if (!sourceDirectory) {
-    return null;
-  }
-
   return (
     <NewWorkspaceScreen
       serverId={serverId}

packages/app/src/app/settings/hosts/[serverId]/[hostSection].tsx

@@ -2,13 +2,13 @@ import { useLocalSearchParams } from "expo-router";
 import { useMemo } from "react";
 import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import SettingsScreen from "@/screens/settings-screen";
-import { type HostSectionSlug, isHostSectionSlug } from "@/utils/host-routes";
+import { normalizeHostSectionSlug } from "@/utils/host-routes";
 
 export default function SettingsHostSectionRoute() {
   const params = useLocalSearchParams<{ serverId?: string; hostSection?: string }>();
   const serverId = typeof params.serverId === "string" ? params.serverId.trim() : "";
   const rawSection = typeof params.hostSection === "string" ? params.hostSection : "";
-  const section: HostSectionSlug = isHostSectionSlug(rawSection) ? rawSection : "connections";
+  const section = normalizeHostSectionSlug(rawSection) ?? "connections";
   const view = useMemo(() => ({ kind: "host" as const, serverId, section }), [serverId, section]);
 
   return (

packages/app/src/components/adaptive-modal-sheet-layout.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { getCompactSheetSafeAreaPadding } from "@/components/adaptive-modal-sheet-layout";
+
+describe("getCompactSheetSafeAreaPadding", () => {
+  it("adds the bottom inset to compact sheet footers", () => {
+    expect(
+      getCompactSheetSafeAreaPadding({
+        isCompact: true,
+        hasFooter: true,
+        baseContentPadding: 24,
+        baseFooterPadding: 12,
+        safeAreaBottom: 34,
+      }),
+    ).toEqual({ footerPaddingBottom: 46 });
+  });
+
+  it("adds the bottom inset to compact sheet content when there is no footer", () => {
+    expect(
+      getCompactSheetSafeAreaPadding({
+        isCompact: true,
+        hasFooter: false,
+        baseContentPadding: 24,
+        baseFooterPadding: 12,
+        safeAreaBottom: 34,
+      }),
+    ).toEqual({ contentPaddingBottom: 58 });
+  });
+
+  it("does not inset desktop sheets", () => {
+    expect(
+      getCompactSheetSafeAreaPadding({
+        isCompact: false,
+        hasFooter: false,
+        baseContentPadding: 24,
+        baseFooterPadding: 12,
+        safeAreaBottom: 34,
+      }),
+    ).toEqual({});
+  });
+});

packages/app/src/components/adaptive-modal-sheet-layout.ts

@@ -0,0 +1,30 @@
+export interface CompactSheetSafeAreaPaddingInput {
+  isCompact: boolean;
+  hasFooter: boolean;
+  baseContentPadding: number;
+  baseFooterPadding: number;
+  safeAreaBottom: number;
+}
+
+export interface CompactSheetSafeAreaPadding {
+  contentPaddingBottom?: number;
+  footerPaddingBottom?: number;
+}
+
+export function getCompactSheetSafeAreaPadding({
+  isCompact,
+  hasFooter,
+  baseContentPadding,
+  baseFooterPadding,
+  safeAreaBottom,
+}: CompactSheetSafeAreaPaddingInput): CompactSheetSafeAreaPadding {
+  if (!isCompact || safeAreaBottom <= 0) {
+    return {};
+  }
+
+  if (hasFooter) {
+    return { footerPaddingBottom: baseFooterPadding + safeAreaBottom };
+  }
+
+  return { contentPaddingBottom: baseContentPadding + safeAreaBottom };
+}

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

@@ -19,7 +19,9 @@ import {
   IsolatedBottomSheetModal,
   useIsolatedBottomSheetVisibility,
 } from "@/components/ui/isolated-bottom-sheet-modal";
+import { getCompactSheetSafeAreaPadding } from "@/components/adaptive-modal-sheet-layout";
 import { isNative, isWeb } from "@/constants/platform";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // Horizontal indent token shared by the sheet header (title, back arrow,
 // leading icon, search input icon) and any row primitive rendered inside the
@@ -458,7 +460,46 @@ export function AdaptiveModalSheet({
 }: AdaptiveModalSheetProps) {
   const { theme } = useUnistyles();
   const isMobile = useIsCompactFormFactor();
+  const insets = useSafeAreaInsets();
   const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);
+  const compactSafeAreaPadding = useMemo(
+    () =>
+      getCompactSheetSafeAreaPadding({
+        isCompact: isMobile,
+        hasFooter: Boolean(footer),
+        baseContentPadding: theme.spacing[SHEET_HORIZONTAL_PADDING_SCALE],
+        baseFooterPadding: theme.spacing[3],
+        safeAreaBottom: insets.bottom,
+      }),
+    [footer, insets.bottom, isMobile, theme.spacing],
+  );
+  const bottomSheetContentStyle = useMemo(
+    () => [
+      styles.bottomSheetContent,
+      compactSafeAreaPadding.contentPaddingBottom != null
+        ? { paddingBottom: compactSafeAreaPadding.contentPaddingBottom }
+        : null,
+    ],
+    [compactSafeAreaPadding.contentPaddingBottom],
+  );
+  const bottomSheetStaticContentStyle = useMemo(
+    () => [
+      styles.bottomSheetStaticContent,
+      compactSafeAreaPadding.contentPaddingBottom != null
+        ? { paddingBottom: compactSafeAreaPadding.contentPaddingBottom }
+        : null,
+    ],
+    [compactSafeAreaPadding.contentPaddingBottom],
+  );
+  const footerStyle = useMemo(
+    () => [
+      styles.footer,
+      compactSafeAreaPadding.footerPaddingBottom != null
+        ? { paddingBottom: compactSafeAreaPadding.footerPaddingBottom }
+        : null,
+    ],
+    [compactSafeAreaPadding.footerPaddingBottom],
+  );
   const handleIndicatorStyle = useMemo(
     () => ({ backgroundColor: theme.colors.surface2 }),
     [theme.colors.surface2],
@@ -506,16 +547,16 @@ export function AdaptiveModalSheet({
         <SheetHeaderView header={header} onClose={onClose} testID={testID} />
         {scrollable ? (
           <BottomSheetScrollView
-            contentContainerStyle={styles.bottomSheetContent}
+            contentContainerStyle={bottomSheetContentStyle}
             keyboardShouldPersistTaps="handled"
             showsVerticalScrollIndicator={false}
           >
             {children}
           </BottomSheetScrollView>
         ) : (
-          <View style={styles.bottomSheetStaticContent}>{children}</View>
+          <View style={bottomSheetStaticContentStyle}>{children}</View>
         )}
-        {footer ? <View style={styles.footer}>{footer}</View> : null}
+        {footer ? <View style={footerStyle}>{footer}</View> : null}
       </IsolatedBottomSheetModal>
     );
   }
@@ -534,7 +575,7 @@ export function AdaptiveModalSheet({
       ) : (
         <View style={styles.desktopStaticContent}>{children}</View>
       )}
-      {footer ? <View style={styles.footer}>{footer}</View> : null}
+      {footer ? <View style={footerStyle}>{footer}</View> : null}
     </>
   );
 

packages/app/src/components/agent-list.tsx

@@ -324,7 +324,7 @@ export function AgentList({
 
   const handleAgentLongPress = useCallback(
     (agent: AggregatedAgent) => {
-      const isRunning = agent.status === "running" || agent.status === "initializing";
+      const isRunning = agent.status === "running";
       if (isRunning) {
         setActionAgent(agent);
         return;

packages/app/src/components/diff-stat.tsx

@@ -28,6 +28,7 @@ const styles = StyleSheet.create((theme) => ({
   row: {
     flexDirection: "row",
     alignItems: "center",
+    height: 20,
     gap: 4,
     flexShrink: 0,
   },

packages/app/src/components/draggable-list.native.tsx

@@ -29,6 +29,7 @@ export function DraggableList<T>({
   useDragHandle: _useDragHandle = false,
   refreshing,
   onRefresh,
+  extraData,
   simultaneousGestureRef,
   waitFor,
   onDragBegin: onDragBeginProp,
@@ -116,6 +117,7 @@ export function DraggableList<T>({
       ListEmptyComponent={ListEmptyComponent}
       showsVerticalScrollIndicator={showsVerticalScrollIndicator}
       scrollEnabled={scrollEnabled}
+      extraData={extraData}
       simultaneousHandlers={simultaneousHandlers}
       // Higher activation distance reduces accidental drag capture while nested
       // lists are inside a scroll container.

packages/app/src/components/draggable-list.types.ts

@@ -46,6 +46,8 @@ export interface DraggableListProps<T> {
   onRefresh?: () => void;
   /** Fill remaining space when content is smaller than container */
   contentContainerFlexGrow?: boolean;
+  /** External row state that should invalidate virtualized native cells. */
+  extraData?: unknown;
   /** Gesture ref for simultaneous handling with parent gestures (e.g., sidebar close) */
   simultaneousGestureRef?: MutableRefObject<GestureType | undefined>;
   /** Gesture ref(s) that the list should wait for before handling scroll */

packages/app/src/components/draggable-list.web.tsx

@@ -135,6 +135,7 @@ export function DraggableList<T>({
   showsVerticalScrollIndicator = true,
   enableDesktopWebScrollbar = false,
   scrollEnabled = true,
+  extraData: _extraData,
   useDragHandle = false,
   // simultaneousGestureRef is native-only, ignored on web
   onDragBegin,

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

@@ -23,6 +23,11 @@ import {
   type ExplorerTab,
 } from "@/stores/panel-store";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
+import {
+  MOBILE_VISUAL_PANEL_AGENT,
+  MOBILE_VISUAL_PANEL_FILE_EXPLORER,
+  useSidebarAnimation,
+} from "@/contexts/sidebar-animation-context";
 import { HEADER_INNER_HEIGHT, useIsCompactFormFactor } from "@/constants/layout";
 import { GitDiffPane } from "@/git/diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
@@ -63,6 +68,8 @@ export function ExplorerSidebar({
   const { width: viewportWidth } = useWindowDimensions();
   const closeTouchStartX = useSharedValue(0);
   const closeTouchStartY = useSharedValue(0);
+  const { mobileVisualPanel, gestureAnimatingRef: mobilePanelGestureAnimatingRef } =
+    useSidebarAnimation();
 
   const { style: mobileKeyboardInsetStyle } = useKeyboardShiftStyle({
     mode: "padding",
@@ -114,10 +121,11 @@ export function ExplorerSidebar({
 
   const handleCloseFromGesture = useCallback(() => {
     gestureAnimatingRef.current = true;
+    mobilePanelGestureAnimatingRef.current = true;
     showMobileAgent();
-  }, [gestureAnimatingRef, showMobileAgent]);
+  }, [gestureAnimatingRef, mobilePanelGestureAnimatingRef, showMobileAgent]);
 
-  const enableSidebarCloseGesture = isMobile && isOpen;
+  const enableSidebarCloseGesture = isMobile;
 
   const handleTabPress = useCallback(
     (tab: ExplorerTab) => {
@@ -158,6 +166,11 @@ export function ExplorerSidebar({
           const absDeltaX = Math.abs(deltaX);
           const absDeltaY = Math.abs(deltaY);
 
+          if (mobileVisualPanel.value !== MOBILE_VISUAL_PANEL_FILE_EXPLORER) {
+            stateManager.fail();
+            return;
+          }
+
           // Fail quickly on clear leftward or vertical intent so child views keep control.
           if (deltaX <= -10) {
             stateManager.fail();
@@ -193,9 +206,11 @@ export function ExplorerSidebar({
             windowWidth,
           });
           if (shouldClose) {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT;
             animateToClose();
             runOnJS(handleCloseFromGesture)();
           } else {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_FILE_EXPLORER;
             animateToOpen();
           }
         })
@@ -207,6 +222,7 @@ export function ExplorerSidebar({
       windowWidth,
       translateX,
       backdropOpacity,
+      mobileVisualPanel,
       animateToOpen,
       animateToClose,
       handleCloseFromGesture,

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

@@ -1,15 +1,26 @@
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, type ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type { FileReadResult } from "@getpaseo/client/internal/daemon-client";
-import Markdown, { MarkdownIt } from "react-native-markdown-display";
+import Markdown, {
+  type ASTNode,
+  MarkdownIt,
+  type RenderRules,
+} from "react-native-markdown-display";
 import {
   ActivityIndicator,
   Image as RNImage,
+  Linking,
   ScrollView as RNScrollView,
   Text,
+  type TextProps,
+  type TextStyle,
   View,
+  type ViewStyle,
 } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { AppearanceStyleBoundary } from "@/components/appearance-style-boundary";
+import { HighlightedCodeBlock } from "@/components/highlighted-code-block";
+import { MarkdownParagraphView, MarkdownTextSpan } from "@/components/markdown-text";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { useSessionStore, type ExplorerFile } from "@/stores/session-store";
 import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
@@ -22,6 +33,7 @@ import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import { isRenderedMarkdownFile } from "@/components/file-pane-render-mode";
 import { isWeb } from "@/constants/platform";
 import { createMarkdownStyles } from "@/styles/markdown-styles";
+import { getMarkdownListMarker, getMarkdownListSpacing } from "@/utils/markdown-list";
 import type { AttachmentMetadata } from "@/attachments/types";
 import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
 import { persistAttachmentFromBytes } from "@/attachments/service";
@@ -46,6 +58,8 @@ interface FilePreviewBodyProps {
   imagePreviewUri: string | null;
 }
 
+type MarkdownStyles = Record<string, TextStyle & ViewStyle & { [key: string]: unknown }>;
+
 function trimNonEmpty(value: string | null | undefined): string | null {
   if (typeof value !== "string") {
     return null;
@@ -116,6 +130,295 @@ function clampLineSelection(input: {
   return { lineStart, lineEnd: Math.max(lineStart, lineEnd) };
 }
 
+interface MarkdownInheritedTextProps {
+  inheritedStyles: TextStyle;
+  textStyle: TextStyle;
+  style?: TextStyle;
+  monoSurface?: boolean;
+  onPress?: TextProps["onPress"];
+  accessibilityRole?: TextProps["accessibilityRole"];
+  children: ReactNode;
+}
+
+function MarkdownInheritedText({
+  inheritedStyles,
+  textStyle,
+  style: overrideStyle,
+  monoSurface,
+  onPress,
+  accessibilityRole,
+  children,
+}: MarkdownInheritedTextProps) {
+  const style = useMemo(
+    () => [inheritedStyles, textStyle, overrideStyle],
+    [inheritedStyles, textStyle, overrideStyle],
+  );
+  return (
+    <MarkdownTextSpan
+      monoSurface={monoSurface}
+      onPress={onPress}
+      accessibilityRole={accessibilityRole}
+      style={style}
+    >
+      {children}
+    </MarkdownTextSpan>
+  );
+}
+
+interface MarkdownListItemContentProps {
+  contentStyle: ViewStyle;
+  children: ReactNode;
+}
+
+const MARKDOWN_LIST_ITEM_CONTENT_FLEX: ViewStyle = { flex: 1, flexShrink: 1, minWidth: 0 };
+const EMPTY_TEXT_STYLE: TextStyle = {};
+
+function MarkdownListItemContent({ contentStyle, children }: MarkdownListItemContentProps) {
+  const style = useMemo(() => [contentStyle, MARKDOWN_LIST_ITEM_CONTENT_FLEX], [contentStyle]);
+  return <View style={style}>{children}</View>;
+}
+
+interface MarkdownListViewProps {
+  baseStyle: ViewStyle;
+  spacing: { marginTop: number; marginBottom: number };
+  children: ReactNode;
+}
+
+function MarkdownListView({ baseStyle, spacing, children }: MarkdownListViewProps) {
+  const style = useMemo(() => [baseStyle, spacing], [baseStyle, spacing]);
+  return <View style={style}>{children}</View>;
+}
+
+interface FilePreviewMarkdownLinkProps {
+  href: string;
+  inheritedStyles: TextStyle;
+  linkStyle: TextStyle;
+  onLinkPress?: (url: string) => boolean;
+  children: ReactNode;
+}
+
+function FilePreviewMarkdownLink({
+  href,
+  inheritedStyles,
+  linkStyle,
+  onLinkPress,
+  children,
+}: FilePreviewMarkdownLinkProps) {
+  const handlePress = useCallback(() => {
+    if (!href) return;
+    if (onLinkPress?.(href) === false) return;
+    void Linking.openURL(href);
+  }, [href, onLinkPress]);
+
+  return (
+    <MarkdownInheritedText
+      inheritedStyles={inheritedStyles}
+      textStyle={linkStyle}
+      accessibilityRole="link"
+      onPress={handlePress}
+    >
+      {children}
+    </MarkdownInheritedText>
+  );
+}
+
+function getMarkdownLinkHref(node: ASTNode): string {
+  const href = node.attributes?.href;
+  return typeof href === "string" ? href : "";
+}
+
+function createFilePreviewMarkdownRules(): RenderRules {
+  return {
+    text: (
+      node: ASTNode,
+      _children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <MarkdownInheritedText
+        key={node.key}
+        inheritedStyles={inheritedStyles}
+        textStyle={styles.text}
+      >
+        {node.content}
+      </MarkdownInheritedText>
+    ),
+    textgroup: (
+      node: ASTNode,
+      children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <MarkdownInheritedText
+        key={node.key}
+        inheritedStyles={inheritedStyles}
+        textStyle={styles.textgroup}
+      >
+        {children}
+      </MarkdownInheritedText>
+    ),
+    strong: (
+      node: ASTNode,
+      children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <MarkdownInheritedText
+        key={node.key}
+        inheritedStyles={inheritedStyles}
+        textStyle={styles.strong}
+      >
+        {children}
+      </MarkdownInheritedText>
+    ),
+    em: (
+      node: ASTNode,
+      children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <MarkdownInheritedText key={node.key} inheritedStyles={inheritedStyles} textStyle={styles.em}>
+        {children}
+      </MarkdownInheritedText>
+    ),
+    s: (
+      node: ASTNode,
+      children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <MarkdownInheritedText key={node.key} inheritedStyles={inheritedStyles} textStyle={styles.s}>
+        {children}
+      </MarkdownInheritedText>
+    ),
+    hardbreak: (node: ASTNode) => <MarkdownTextSpan key={node.key}>{"\n"}</MarkdownTextSpan>,
+    softbreak: (node: ASTNode) => <MarkdownTextSpan key={node.key}>{"\n"}</MarkdownTextSpan>,
+    code_block: (
+      node: ASTNode,
+      _children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <HighlightedCodeBlock
+        key={node.key}
+        code={node.content}
+        language={null}
+        inheritedStyles={inheritedStyles}
+        textStyle={styles.code_block}
+      />
+    ),
+    fence: (
+      node: ASTNode,
+      _children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <HighlightedCodeBlock
+        key={node.key}
+        code={node.content}
+        language={node.sourceInfo}
+        inheritedStyles={inheritedStyles}
+        textStyle={styles.fence}
+      />
+    ),
+    code_inline: (
+      node: ASTNode,
+      _children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      inheritedStyles: TextStyle = {},
+    ) => (
+      <MarkdownInheritedText
+        key={node.key}
+        inheritedStyles={inheritedStyles}
+        textStyle={styles.code_inline}
+        monoSurface
+      >
+        {node.content ?? ""}
+      </MarkdownInheritedText>
+    ),
+    bullet_list: (
+      node: ASTNode,
+      children: ReactNode[],
+      parent: ASTNode[],
+      styles: MarkdownStyles,
+    ) => (
+      <MarkdownListView
+        key={node.key}
+        baseStyle={styles.bullet_list}
+        spacing={getMarkdownListSpacing(node, parent)}
+      >
+        {children}
+      </MarkdownListView>
+    ),
+    ordered_list: (
+      node: ASTNode,
+      children: ReactNode[],
+      parent: ASTNode[],
+      styles: MarkdownStyles,
+    ) => (
+      <MarkdownListView
+        key={node.key}
+        baseStyle={styles.ordered_list}
+        spacing={getMarkdownListSpacing(node, parent)}
+      >
+        {children}
+      </MarkdownListView>
+    ),
+    list_item: (
+      node: ASTNode,
+      children: ReactNode[],
+      parent: ASTNode[],
+      styles: MarkdownStyles,
+    ) => {
+      const { isOrdered, marker } = getMarkdownListMarker(node, parent);
+      const iconStyle = isOrdered ? styles.ordered_list_icon : styles.bullet_list_icon;
+      const contentStyle = isOrdered ? styles.ordered_list_content : styles.bullet_list_content;
+
+      return (
+        <View key={node.key} style={styles.list_item}>
+          <Text style={iconStyle}>{marker}</Text>
+          <MarkdownListItemContent contentStyle={contentStyle}>{children}</MarkdownListItemContent>
+        </View>
+      );
+    },
+    paragraph: (
+      node: ASTNode,
+      children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+    ) => (
+      <MarkdownParagraphView key={node.key} paragraphStyle={styles.paragraph}>
+        {children}
+      </MarkdownParagraphView>
+    ),
+    link: (
+      node: ASTNode,
+      children: ReactNode[],
+      _parent: ASTNode[],
+      styles: MarkdownStyles,
+      onLinkPress?: (url: string) => boolean,
+    ) => (
+      <FilePreviewMarkdownLink
+        key={node.key}
+        href={getMarkdownLinkHref(node)}
+        inheritedStyles={EMPTY_TEXT_STYLE}
+        linkStyle={styles.link}
+        onLinkPress={onLinkPress}
+      >
+        {children}
+      </FilePreviewMarkdownLink>
+    ),
+  };
+}
+
 const CodeLine = React.memo(function CodeLine({
   tokens,
   lineNumber,
@@ -198,6 +501,7 @@ function FilePreviewBody({
   const filePath = location.path;
   const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
   const markdownParser = useMemo(() => MarkdownIt({ typographer: true, linkify: true }), []);
+  const markdownRules = useMemo(() => createFilePreviewMarkdownRules(), []);
   const isMarkdownFile =
     preview?.kind === "text" && isRenderedMarkdownFile(filePath) && !location.lineStart;
 
@@ -280,9 +584,11 @@ function FilePreviewBody({
             scrollEventThrottle={16}
             showsVerticalScrollIndicator={!showDesktopWebScrollbar}
           >
-            <Markdown style={markdownStyles} markdownit={markdownParser}>
-              {preview.content ?? ""}
-            </Markdown>
+            <AppearanceStyleBoundary>
+              <Markdown style={markdownStyles} rules={markdownRules} markdownit={markdownParser}>
+                {preview.content ?? ""}
+              </Markdown>
+            </AppearanceStyleBoundary>
           </RNScrollView>
           {scrollbar.overlay}
         </View>

packages/app/src/components/icons/editor-app-icons.tsx

@@ -1,11 +1,7 @@
 import { SquareTerminal } from "lucide-react-native";
 import { useMemo } from "react";
 import { Image, type ImageSourcePropType } from "react-native";
-import {
-  isKnownEditorTargetId,
-  type EditorTargetId,
-  type KnownEditorTargetId,
-} from "@getpaseo/protocol/messages";
+import { isKnownEditorTargetId, type EditorTargetId } from "@/workspace/editor-targets";
 
 interface EditorAppIconProps {
   editorId: EditorTargetId;
@@ -14,7 +10,7 @@ interface EditorAppIconProps {
 }
 
 /* eslint-disable @typescript-eslint/no-require-imports */
-const EDITOR_APP_IMAGES: Record<KnownEditorTargetId, ImageSourcePropType> = {
+const EDITOR_APP_IMAGES: Record<string, ImageSourcePropType> = {
   cursor: require("../../../assets/images/editor-apps/cursor.png"),
   vscode: require("../../../assets/images/editor-apps/vscode.png"),
   webstorm: require("../../../assets/images/editor-apps/webstorm.png"),
@@ -25,15 +21,16 @@ const EDITOR_APP_IMAGES: Record<KnownEditorTargetId, ImageSourcePropType> = {
 };
 /* eslint-enable @typescript-eslint/no-require-imports */
 
-export function hasBundledEditorAppIcon(editorId: EditorTargetId): editorId is KnownEditorTargetId {
-  return isKnownEditorTargetId(editorId);
+export function hasBundledEditorAppIcon(editorId: EditorTargetId): boolean {
+  return isKnownEditorTargetId(editorId) && EDITOR_APP_IMAGES[editorId] !== undefined;
 }
 
 export function EditorAppIcon({ editorId, size = 16, color }: EditorAppIconProps) {
   const imageStyle = useMemo(() => ({ width: size, height: size }), [size]);
-  if (!hasBundledEditorAppIcon(editorId)) {
+  const source = EDITOR_APP_IMAGES[editorId];
+  if (!source) {
     return <SquareTerminal size={size} color={color} />;
   }
 
-  return <Image source={EDITOR_APP_IMAGES[editorId]} style={imageStyle} resizeMode="contain" />;
+  return <Image source={source} style={imageStyle} resizeMode="contain" />;
 }

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

@@ -1,5 +1,5 @@
 import { router, usePathname } from "expo-router";
-import { FolderPlus, Home, MessagesSquare, Settings, X } from "lucide-react-native";
+import { FolderPlus, Home, MessagesSquare, Plus, Search, Settings, X } from "lucide-react-native";
 import {
   type Dispatch,
   memo,
@@ -34,12 +34,17 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 import { SidebarHeaderRow } from "@/components/sidebar/sidebar-header-row";
+import { SidebarGroupingSelector } from "@/components/sidebar/sidebar-grouping-selector";
 import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
 import { Shortcut } from "@/components/ui/shortcut";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
+import {
+  MOBILE_VISUAL_PANEL_AGENT,
+  MOBILE_VISUAL_PANEL_AGENT_LIST,
+  useSidebarAnimation,
+} from "@/contexts/sidebar-animation-context";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useSidebarShortcutModel } from "@/hooks/use-sidebar-shortcut-model";
@@ -47,6 +52,8 @@ import {
   type SidebarProjectEntry,
   useSidebarWorkspacesList,
 } from "@/hooks/use-sidebar-workspaces-list";
+import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
+import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { useHostRuntimeSnapshot, useHosts } from "@/runtime/host-runtime";
 import {
   MAX_SIDEBAR_WIDTH,
@@ -59,6 +66,7 @@ import { formatConnectionStatus } from "@/utils/daemons";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
 import {
   buildHostOpenProjectRoute,
+  buildHostNewWorkspaceRoute,
   buildHostSessionsRoute,
   buildSettingsRoute,
   mapPathnameToServer,
@@ -89,6 +97,7 @@ interface SidebarSharedProps {
   isInitialLoad: boolean;
   isRevalidating: boolean;
   isManualRefresh: boolean;
+  groupMode: SidebarGroupMode;
   collapsedProjectKeys: SidebarShortcutModel["collapsedProjectKeys"];
   shortcutIndexByWorkspaceKey: SidebarShortcutModel["shortcutIndexByWorkspaceKey"];
   toggleProjectCollapsed: SidebarShortcutModel["toggleProjectCollapsed"];
@@ -192,6 +201,10 @@ export const LeftSidebar = memo(function LeftSidebar({
   const { collapsedProjectKeys, shortcutIndexByWorkspaceKey, toggleProjectCollapsed } =
     useSidebarShortcutModel({ projects, isInitialLoad });
 
+  const groupMode = useSidebarViewStore((state) =>
+    activeServerId ? state.getGroupMode(activeServerId) : "project",
+  );
+
   const [isManualRefresh, setIsManualRefresh] = useState(false);
 
   const handleRefresh = useCallback(() => {
@@ -268,6 +281,7 @@ export const LeftSidebar = memo(function LeftSidebar({
     isInitialLoad,
     isRevalidating,
     isManualRefresh,
+    groupMode,
     collapsedProjectKeys,
     shortcutIndexByWorkspaceKey,
     toggleProjectCollapsed,
@@ -417,6 +431,21 @@ function AddProjectTooltipContent({
   );
 }
 
+function HeaderIconTooltipContent({
+  label,
+  shortcutKeys,
+}: {
+  label: string;
+  shortcutKeys?: ReturnType<typeof useShortcutKeys>;
+}) {
+  return (
+    <View style={styles.tooltipRow}>
+      <Text style={styles.tooltipText}>{label}</Text>
+      {shortcutKeys ? <Shortcut chord={shortcutKeys} /> : null}
+    </View>
+  );
+}
+
 function SidebarFooter({
   theme,
   activeServerId,
@@ -518,6 +547,7 @@ function MobileSidebar({
   isInitialLoad,
   isRevalidating,
   isManualRefresh,
+  groupMode,
   collapsedProjectKeys,
   shortcutIndexByWorkspaceKey,
   toggleProjectCollapsed,
@@ -542,6 +572,7 @@ function MobileSidebar({
     animateToOpen,
     animateToClose,
     isGesturing,
+    mobileVisualPanel,
     gestureAnimatingRef,
     closeGestureRef,
   } = useSidebarAnimation();
@@ -578,7 +609,7 @@ function MobileSidebar({
     () =>
       Gesture.Pan()
         .withRef(closeGestureRef)
-        .enabled(isOpen)
+        .enabled(true)
         .manualActivation(true)
         .onTouchesDown((event) => {
           const touch = event.changedTouches[0];
@@ -600,6 +631,11 @@ function MobileSidebar({
           const absDeltaX = Math.abs(deltaX);
           const absDeltaY = Math.abs(deltaY);
 
+          if (mobileVisualPanel.value !== MOBILE_VISUAL_PANEL_AGENT_LIST) {
+            stateManager.fail();
+            return;
+          }
+
           if (deltaX >= 10) {
             stateManager.fail();
             return;
@@ -629,9 +665,11 @@ function MobileSidebar({
           isGesturing.value = false;
           const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
           if (shouldClose) {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT;
             animateToClose();
             runOnJS(handleCloseFromGesture)();
           } else {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT_LIST;
             animateToOpen();
           }
         })
@@ -639,11 +677,11 @@ function MobileSidebar({
           isGesturing.value = false;
         }),
     [
-      isOpen,
       closeGestureRef,
       closeTouchStartX,
       closeTouchStartY,
       isGesturing,
+      mobileVisualPanel,
       windowWidth,
       translateX,
       backdropOpacity,
@@ -698,13 +736,16 @@ function MobileSidebar({
       <GestureDetector gesture={closeGesture} touchAction="pan-y">
         <Animated.View style={mobileSidebarStyle} pointerEvents="auto">
           <View style={styles.sidebarContent} pointerEvents="auto">
-            <SidebarHeaderRow
-              icon={MessagesSquare}
-              label="Sessions"
-              onPress={handleViewMore}
-              isActive={isSessionsActive}
-              testID="sidebar-sessions"
-            />
+            <View style={styles.sidebarHeaderRow}>
+              <SidebarHeaderRow
+                icon={MessagesSquare}
+                label="Sessions"
+                onPress={handleViewMore}
+                isActive={isSessionsActive}
+                testID="sidebar-sessions"
+              />
+            </View>
+            <WorkspacesSectionHeader serverId={activeServerId} />
             <Pressable
               style={styles.mobileCloseButton}
               onPress={closeToAgent}
@@ -733,6 +774,7 @@ function MobileSidebar({
                 collapsedProjectKeys={collapsedProjectKeys}
                 onToggleProjectCollapsed={toggleProjectCollapsed}
                 shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
+                groupMode={groupMode}
                 projects={projects}
                 isRefreshing={isManualRefresh && isRevalidating}
                 onRefresh={handleRefresh}
@@ -777,6 +819,7 @@ function DesktopSidebar({
   isInitialLoad,
   isRevalidating,
   isManualRefresh,
+  groupMode,
   collapsedProjectKeys,
   shortcutIndexByWorkspaceKey,
   toggleProjectCollapsed,
@@ -860,14 +903,17 @@ function DesktopSidebar({
         <View style={styles.sidebarDragArea}>
           <TitlebarDragRegion />
           {padding.top > 0 ? <View style={paddingTopSpacerStyle} /> : null}
-          <SidebarHeaderRow
-            icon={MessagesSquare}
-            label="Sessions"
-            onPress={handleViewMore}
-            isActive={isSessionsActive}
-            testID="sidebar-sessions"
-          />
+          <View style={styles.sidebarHeaderRow}>
+            <SidebarHeaderRow
+              icon={MessagesSquare}
+              label="Sessions"
+              onPress={handleViewMore}
+              isActive={isSessionsActive}
+              testID="sidebar-sessions"
+            />
+          </View>
         </View>
+        <WorkspacesSectionHeader serverId={activeServerId} />
 
         {isInitialLoad ? (
           <SidebarAgentListSkeleton />
@@ -877,6 +923,7 @@ function DesktopSidebar({
             collapsedProjectKeys={collapsedProjectKeys}
             onToggleProjectCollapsed={toggleProjectCollapsed}
             shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
+            groupMode={groupMode}
             projects={projects}
             isRefreshing={isManualRefresh && isRevalidating}
             onRefresh={handleRefresh}
@@ -911,6 +958,90 @@ function DesktopSidebar({
   );
 }
 
+function WorkspacesSectionHeader({ serverId }: { serverId: string | null }) {
+  const { theme } = useUnistyles();
+  const setCommandCenterOpen = useKeyboardShortcutsStore((state) => state.setCommandCenterOpen);
+  const commandCenterKeys = useShortcutKeys("toggle-command-center");
+  const handleSearchPress = useCallback(() => setCommandCenterOpen(true), [setCommandCenterOpen]);
+  const handleNewWorkspacePress = useCallback(() => {
+    if (!serverId) {
+      return;
+    }
+    router.push(buildHostNewWorkspaceRoute(serverId));
+  }, [serverId]);
+  const searchButtonStyle = useCallback(
+    ({ hovered = false, pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
+      styles.workspacesHeaderIconButton,
+      (hovered || pressed) && styles.workspacesHeaderIconButtonHovered,
+    ],
+    [],
+  );
+
+  return (
+    <View style={styles.workspacesSectionHeader}>
+      <Text style={styles.workspacesSectionTitle}>Workspaces</Text>
+      <View style={styles.workspacesSectionActions}>
+        <Tooltip delayDuration={300}>
+          <TooltipTrigger asChild>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="New workspace"
+              testID="sidebar-new-workspace"
+              style={searchButtonStyle}
+              onPress={handleNewWorkspacePress}
+            >
+              {({ hovered, pressed }) => (
+                <Plus
+                  size={14}
+                  color={
+                    hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted
+                  }
+                />
+              )}
+            </Pressable>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <HeaderIconTooltipContent label="New workspace" />
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip delayDuration={300}>
+          <TooltipTrigger asChild>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Open command center"
+              testID="sidebar-command-center-search"
+              style={searchButtonStyle}
+              onPress={handleSearchPress}
+            >
+              {({ hovered, pressed }) => (
+                <Search
+                  size={14}
+                  color={
+                    hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted
+                  }
+                />
+              )}
+            </Pressable>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <HeaderIconTooltipContent label="Search" shortcutKeys={commandCenterKeys} />
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip delayDuration={300}>
+          <TooltipTrigger asChild>
+            <View>
+              <SidebarGroupingSelector serverId={serverId} />
+            </View>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <HeaderIconTooltipContent label="Display preferences" />
+          </TooltipContent>
+        </Tooltip>
+      </View>
+    </View>
+  );
+}
+
 // Static styles for Animated.Views — must NOT use Unistyles dynamic theme to
 // avoid the "Unable to find node on an unmounted component" crash when Unistyles
 // tries to patch the native node that Reanimated also manages.
@@ -932,6 +1063,39 @@ const staticStyles = RNStyleSheet.create({
 });
 
 const styles = StyleSheet.create((theme) => ({
+  sidebarHeaderRow: {
+    position: "relative",
+  },
+  workspacesSectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+    paddingLeft: theme.spacing[2] + theme.spacing[3],
+    paddingRight: theme.spacing[4],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[1],
+  },
+  workspacesSectionTitle: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  workspacesSectionActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+  },
+  workspacesHeaderIconButton: {
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.borderRadius.md,
+  },
+  workspacesHeaderIconButtonHovered: {
+    backgroundColor: theme.colors.surfaceSidebarHover,
+  },
   sidebarContent: {
     flex: 1,
     minHeight: 0,

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

@@ -16,6 +16,7 @@ import {
 } from "@/components/adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { isWeb } from "@/constants/platform";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
 import { useDaemonConfig } from "@/hooks/use-daemon-config";
@@ -359,6 +360,69 @@ interface ProviderModalBodyProps {
   theme: { iconSize: { md: number }; colors: { foregroundMuted: string } };
 }
 
+interface ProviderSheetFooterInput {
+  fetchedAtLabel: string | null;
+  isCompact: boolean;
+  modelsRefreshing: boolean;
+  onOpenAddSheet: () => void;
+  onOpenDiagSheet: () => void;
+  onRefreshModels: () => void;
+}
+
+function renderProviderSheetFooter({
+  fetchedAtLabel,
+  isCompact,
+  modelsRefreshing,
+  onOpenAddSheet,
+  onOpenDiagSheet,
+  onRefreshModels,
+}: ProviderSheetFooterInput) {
+  const contentStyle = isCompact ? sheetStyles.compactFooterContent : sheetStyles.footerContent;
+  const actionsStyle = isCompact ? sheetStyles.compactFooterActions : sheetStyles.footerActions;
+  const buttonStyle = isCompact ? sheetStyles.compactFooterButton : null;
+  const metaStyle = isCompact ? COMPACT_FOOTER_META_STYLE : sheetStyles.footerMeta;
+
+  return (
+    <View style={contentStyle}>
+      {fetchedAtLabel || !isCompact ? (
+        <Text style={metaStyle} numberOfLines={1}>
+          {fetchedAtLabel ? `Updated ${fetchedAtLabel}` : ""}
+        </Text>
+      ) : null}
+      <View style={actionsStyle}>
+        <Button
+          variant="secondary"
+          size="sm"
+          leftIcon={Plus}
+          onPress={onOpenAddSheet}
+          style={buttonStyle}
+        >
+          Add model
+        </Button>
+        <Button
+          variant="secondary"
+          size="sm"
+          leftIcon={FileText}
+          onPress={onOpenDiagSheet}
+          style={buttonStyle}
+        >
+          Diagnostic
+        </Button>
+        <Button
+          variant="default"
+          size="sm"
+          leftIcon={modelsRefreshing ? undefined : RotateCw}
+          onPress={onRefreshModels}
+          disabled={modelsRefreshing}
+          style={buttonStyle}
+        >
+          {modelsRefreshing ? "Refreshing…" : "Refresh"}
+        </Button>
+      </View>
+    </View>
+  );
+}
+
 function ProviderModalBody(props: ProviderModalBodyProps) {
   const {
     discoveredCount,
@@ -446,6 +510,7 @@ export function ProviderDiagnosticSheet({
   serverId,
 }: ProviderDiagnosticSheetProps) {
   const { theme } = useUnistyles();
+  const isCompact = useIsCompactFormFactor();
   const { entries: snapshotEntries, refresh, isRefreshing } = useProvidersSnapshot(serverId);
   const { config, patchConfig } = useDaemonConfig(serverId);
   const [query, setQuery] = useState("");
@@ -545,38 +610,20 @@ export function ProviderDiagnosticSheet({
     [providerLabel],
   );
 
-  const footer = (
-    <>
-      <Text style={sheetStyles.footerMeta} numberOfLines={1}>
-        {fetchedAtLabel ? `Updated ${fetchedAtLabel}` : ""}
-      </Text>
-      <View style={sheetStyles.footerActions}>
-        <Button variant="secondary" size="sm" leftIcon={Plus} onPress={handleOpenAddSheet}>
-          Add model
-        </Button>
-        <Button variant="secondary" size="sm" leftIcon={FileText} onPress={handleOpenDiagSheet}>
-          Diagnostic
-        </Button>
-        <Button
-          variant="default"
-          size="sm"
-          leftIcon={modelsRefreshing ? undefined : RotateCw}
-          onPress={handleRefreshModels}
-          disabled={modelsRefreshing}
-        >
-          {modelsRefreshing ? "Refreshing…" : "Refresh"}
-        </Button>
-      </View>
-    </>
-  );
-
   return (
     <>
       <AdaptiveModalSheet
         header={sheetHeader}
         visible={visible}
         onClose={onClose}
-        footer={footer}
+        footer={renderProviderSheetFooter({
+          fetchedAtLabel,
+          isCompact,
+          modelsRefreshing,
+          onOpenAddSheet: handleOpenAddSheet,
+          onOpenDiagSheet: handleOpenDiagSheet,
+          onRefreshModels: handleRefreshModels,
+        })}
         snapPoints={MAIN_SNAP_POINTS}
       >
         <ProviderModalBody
@@ -692,16 +739,36 @@ const sheetStyles = StyleSheet.create((theme) => ({
     alignItems: "center",
     gap: theme.spacing[3],
   },
+  footerContent: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+  },
+  compactFooterContent: {
+    flex: 1,
+    gap: theme.spacing[2],
+  },
   footerMeta: {
     flex: 1,
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
   },
+  compactFooterMeta: {
+    flex: 0,
+  },
   footerActions: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
   },
+  compactFooterActions: {
+    gap: theme.spacing[2],
+  },
+  compactFooterButton: {
+    alignSelf: "stretch",
+  },
   formGroup: {
     gap: theme.spacing[3],
   },
@@ -741,6 +808,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
 }));
 
 const FORM_INPUT_STYLE = [sheetStyles.formInput, isWeb && { outlineStyle: "none" }];
+const COMPACT_FOOTER_META_STYLE = [sheetStyles.footerMeta, sheetStyles.compactFooterMeta];
 
 const MAIN_SNAP_POINTS = ["65%", "92%"];
 const ADD_SNAP_POINTS = ["40%"];

packages/app/src/components/question-form-card-core.test.ts

@@ -76,4 +76,27 @@ describe("question form card core", () => {
       Response: "custom",
     });
   });
+
+  test("shows text input for questions that allow other answers", () => {
+    const questions = parseQuestionFormQuestions({
+      questions: [
+        {
+          question: "Pick or type",
+          header: "Response",
+          options: [{ label: "A" }],
+          allowOther: true,
+          multiSelect: false,
+        },
+      ],
+    });
+
+    if (!questions) throw new Error("questions did not parse");
+    const [question] = questions;
+    if (!question) throw new Error("question missing");
+    expect(questionShowsTextInput(question)).toBe(true);
+    expect(areQuestionsAnswered(questions, {}, { 0: "custom" })).toBe(true);
+    expect(buildQuestionFormAnswers(questions, {}, { 0: "custom" })).toEqual({
+      Response: "custom",
+    });
+  });
 });

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

@@ -9,7 +9,7 @@ import {
 } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
-import { Check, CircleHelp, X } from "lucide-react-native";
+import { Check, X } from "lucide-react-native";
 import type { PendingPermission } from "@/types/shared";
 import type { AgentPermissionResponse } from "@getpaseo/protocol/agent-types";
 import { isWeb } from "@/constants/platform";
@@ -82,9 +82,18 @@ function QuestionOptionRow({
     () => [styles.optionDescription, { color: theme.colors.foregroundMuted }],
     [theme.colors.foregroundMuted],
   );
+  const accessibilityState = useMemo(() => ({ selected: isSelected }), [isSelected]);
 
   return (
-    <Pressable style={pressableStyle} onPress={handlePress} disabled={isResponding}>
+    <Pressable
+      style={pressableStyle}
+      onPress={handlePress}
+      disabled={isResponding}
+      accessibilityRole="button"
+      accessibilityLabel={option.label}
+      accessibilityState={accessibilityState}
+      aria-selected={isSelected}
+    >
       <View style={styles.optionItemContent}>
         <View style={styles.optionTextBlock}>
           <Text style={optionLabelStyle}>{option.label}</Text>
@@ -102,8 +111,73 @@ function QuestionOptionRow({
   );
 }
 
+interface QuestionNavButtonProps {
+  index: number;
+  total: number;
+  isActive: boolean;
+  isResponding: boolean;
+  onSelect: (index: number) => void;
+}
+
+function QuestionNavButton({
+  index,
+  total,
+  isActive,
+  isResponding,
+  onSelect,
+}: QuestionNavButtonProps) {
+  const { theme } = useUnistyles();
+  const accessibilityState = useMemo(() => ({ selected: isActive }), [isActive]);
+  const handlePress = useCallback(() => {
+    onSelect(index);
+  }, [index, onSelect]);
+  const pressableStyle = useCallback(
+    ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => {
+      return [
+        styles.questionNavButton,
+        {
+          backgroundColor:
+            isActive || Boolean(hovered) ? theme.colors.surface2 : theme.colors.surface1,
+          borderColor: isActive ? theme.colors.foregroundMuted : theme.colors.border,
+        },
+        pressed && styles.optionItemPressed,
+      ];
+    },
+    [
+      isActive,
+      theme.colors.border,
+      theme.colors.foregroundMuted,
+      theme.colors.surface1,
+      theme.colors.surface2,
+    ],
+  );
+  const textStyle = useMemo(
+    () => [
+      styles.questionNavText,
+      { color: isActive ? theme.colors.foreground : theme.colors.foregroundMuted },
+    ],
+    [isActive, theme.colors.foreground, theme.colors.foregroundMuted],
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Question ${index + 1} of ${total}`}
+      accessibilityState={accessibilityState}
+      aria-selected={isActive}
+      testID={`question-form-question-nav-${index + 1}`}
+      style={pressableStyle}
+      onPress={handlePress}
+      disabled={isResponding}
+    >
+      <Text style={textStyle}>{index + 1}</Text>
+    </Pressable>
+  );
+}
+
 interface QuestionOtherInputProps {
   qIndex: number;
+  accessibilityLabel: string;
   value: string;
   placeholder: string;
   isResponding: boolean;
@@ -113,6 +187,7 @@ interface QuestionOtherInputProps {
 
 function QuestionOtherInput({
   qIndex,
+  accessibilityLabel,
   value,
   placeholder,
   isResponding,
@@ -149,6 +224,7 @@ function QuestionOtherInput({
     <TextInput
       // @ts-expect-error - outlineStyle is web-only
       style={otherInputStyle}
+      accessibilityLabel={accessibilityLabel}
       placeholder={placeholder}
       placeholderTextColor={theme.colors.foregroundMuted}
       value={value}
@@ -163,15 +239,19 @@ function QuestionOtherInput({
 export function QuestionFormCard({ permission, onRespond, isResponding }: QuestionFormCardProps) {
   const { theme } = useUnistyles();
   const isMobile = useIsCompactFormFactor();
-  const questions = parseQuestionFormQuestions(permission.request.input);
+  const questions = useMemo(
+    () => parseQuestionFormQuestions(permission.request.input),
+    [permission.request.input],
+  );
 
   const [selections, setSelections] = useState<Record<number, Set<number>>>({});
   const [otherTexts, setOtherTexts] = useState<Record<number, string>>({});
   const [respondingAction, setRespondingAction] = useState<"submit" | "dismiss" | null>(null);
+  const [activeQuestionIndex, setActiveQuestionIndex] = useState(0);
 
-  const toggleOption = useCallback((qIndex: number, optIndex: number, multiSelect: boolean) => {
-    setSelections((prev) => {
-      const current = prev[qIndex] ?? new Set<number>();
+  const toggleOption = useCallback(
+    (qIndex: number, optIndex: number, multiSelect: boolean) => {
+      const current = selections[qIndex] ?? new Set<number>();
       const next = new Set(current);
       if (multiSelect) {
         if (next.has(optIndex)) {
@@ -179,23 +259,27 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
         } else {
           next.add(optIndex);
         }
+      } else if (next.has(optIndex)) {
+        next.clear();
       } else {
-        if (next.has(optIndex)) {
-          next.clear();
-        } else {
-          next.clear();
-          next.add(optIndex);
-        }
+        next.clear();
+        next.add(optIndex);
       }
-      return { ...prev, [qIndex]: next };
-    });
-    setOtherTexts((prev) => {
-      if (!prev[qIndex]) return prev;
-      const next = { ...prev };
-      delete next[qIndex];
-      return next;
-    });
-  }, []);
+
+      setSelections((prev) => ({ ...prev, [qIndex]: next }));
+      setOtherTexts((prev) => {
+        if (!prev[qIndex]) return prev;
+        const nextTexts = { ...prev };
+        delete nextTexts[qIndex];
+        return nextTexts;
+      });
+
+      if (!multiSelect && next.size > 0 && qIndex === activeQuestionIndex && questions) {
+        setActiveQuestionIndex(Math.min(qIndex + 1, questions.length - 1));
+      }
+    },
+    [activeQuestionIndex, questions, selections],
+  );
 
   const setOtherText = useCallback((qIndex: number, text: string) => {
     setOtherTexts((prev) => ({ ...prev, [qIndex]: text }));
@@ -208,6 +292,10 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
   }, []);
 
   const allAnswered = areQuestionsAnswered(questions, selections, otherTexts);
+  const resolvedActiveQuestionIndex = questions
+    ? Math.min(activeQuestionIndex, questions.length - 1)
+    : 0;
+  const activeQuestion = questions?.[resolvedActiveQuestionIndex];
 
   const handleSubmit = useCallback(() => {
     if (!questions || !allAnswered || isResponding) return;
@@ -248,6 +336,10 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
     });
   }, [questions, onRespond, otherTexts, permission.request.input, selections]);
 
+  const handleSelectQuestion = useCallback((index: number) => {
+    setActiveQuestionIndex(index);
+  }, []);
+
   const dismissButtonStyle = useCallback(
     ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
       styles.actionButton,
@@ -262,22 +354,16 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
 
   const submitDisabled = !allAnswered || isResponding;
   const submitButtonStyle = useCallback(
-    ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
+    ({ pressed }: PressableStateCallbackType & { hovered?: boolean }) => [
       styles.actionButton,
       {
-        backgroundColor: hovered && !submitDisabled ? theme.colors.surface2 : theme.colors.surface1,
-        borderColor: submitDisabled ? theme.colors.border : theme.colors.borderAccent,
+        backgroundColor: theme.colors.accent,
+        borderColor: theme.colors.accent,
         opacity: submitDisabled ? 0.5 : 1,
       },
       pressed && !submitDisabled ? styles.optionItemPressed : null,
     ],
-    [
-      submitDisabled,
-      theme.colors.surface2,
-      theme.colors.surface1,
-      theme.colors.border,
-      theme.colors.borderAccent,
-    ],
+    [submitDisabled, theme.colors.accent],
   );
 
   const containerStyle = useMemo(
@@ -294,6 +380,10 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
     () => [styles.questionText, { color: theme.colors.foreground }],
     [theme.colors.foreground],
   );
+  const questionNavStyle = useMemo(
+    () => [styles.questionNav, isMobile && styles.questionNavMobile],
+    [isMobile],
+  );
   const actionsContainerStyle = useMemo(
     () => [styles.actionsContainer, !isMobile && styles.actionsContainerDesktop],
     [isMobile],
@@ -302,9 +392,7 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
     () => [styles.actionText, { color: theme.colors.foregroundMuted }],
     [theme.colors.foregroundMuted],
   );
-  const submitActionTextColor = allAnswered
-    ? theme.colors.foreground
-    : theme.colors.foregroundMuted;
+  const submitActionTextColor = theme.colors.accentForeground;
   const submitActionTextStyle = useMemo(
     () => [styles.actionText, { color: submitActionTextColor }],
     [submitActionTextColor],
@@ -315,52 +403,76 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
   }
 
   const dismissLabel = resolveDismissLabel(questions);
+  const selected = selections[resolvedActiveQuestionIndex] ?? new Set<number>();
+  const otherText = otherTexts[resolvedActiveQuestionIndex] ?? "";
+  const showTextInput = activeQuestion ? questionShowsTextInput(activeQuestion) : false;
 
   return (
-    <View style={containerStyle}>
-      {questions.map((q, qIndex) => {
-        const selected = selections[qIndex] ?? new Set<number>();
-        const otherText = otherTexts[qIndex] ?? "";
-        const showTextInput = questionShowsTextInput(q);
-
-        return (
-          <View key={q.question} style={styles.questionBlock}>
-            <View style={styles.questionHeader}>
-              <Text style={questionTextStyle}>{q.question}</Text>
-              <CircleHelp size={14} color={theme.colors.foregroundMuted} />
-            </View>
-            {q.options.length > 0 ? (
-              <View style={styles.optionsWrap}>
-                {q.options.map((opt, optIndex) => (
-                  <QuestionOptionRow
-                    key={opt.label}
-                    qIndex={qIndex}
-                    optIndex={optIndex}
-                    option={opt}
-                    isSelected={selected.has(optIndex)}
-                    multiSelect={q.multiSelect}
-                    isResponding={isResponding}
-                    onToggle={toggleOption}
-                  />
-                ))}
-              </View>
-            ) : null}
-            {showTextInput ? (
-              <QuestionOtherInput
-                qIndex={qIndex}
-                value={otherText}
-                placeholder={getQuestionInputPlaceholder(q)}
+    <View style={containerStyle} testID="question-form-card">
+      <View style={styles.questionTopRow}>
+        <View style={styles.questionHeader}>
+          <Text testID="question-form-current-question" style={questionTextStyle}>
+            {activeQuestion?.question}
+          </Text>
+        </View>
+        <View style={questionNavStyle} testID="question-form-question-nav">
+          {questions.map((question, qIndex) => {
+            const isActive = qIndex === resolvedActiveQuestionIndex;
+            return (
+              <QuestionNavButton
+                key={question.header}
+                index={qIndex}
+                total={questions.length}
+                isActive={isActive}
                 isResponding={isResponding}
-                onChange={setOtherText}
-                onSubmit={handleSubmit}
+                onSelect={handleSelectQuestion}
               />
-            ) : null}
-          </View>
-        );
-      })}
+            );
+          })}
+        </View>
+      </View>
+
+      {activeQuestion ? (
+        <View key={activeQuestion.question} style={styles.questionBlock}>
+          {activeQuestion.options.length > 0 ? (
+            <View style={styles.optionsWrap}>
+              {activeQuestion.options.map((opt, optIndex) => (
+                <QuestionOptionRow
+                  key={opt.label}
+                  qIndex={resolvedActiveQuestionIndex}
+                  optIndex={optIndex}
+                  option={opt}
+                  isSelected={selected.has(optIndex)}
+                  multiSelect={activeQuestion.multiSelect}
+                  isResponding={isResponding}
+                  onToggle={toggleOption}
+                />
+              ))}
+            </View>
+          ) : null}
+          {showTextInput ? (
+            <QuestionOtherInput
+              qIndex={resolvedActiveQuestionIndex}
+              accessibilityLabel={activeQuestion.question}
+              value={otherText}
+              placeholder={getQuestionInputPlaceholder(activeQuestion)}
+              isResponding={isResponding}
+              onChange={setOtherText}
+              onSubmit={handleSubmit}
+            />
+          ) : null}
+        </View>
+      ) : null}
 
       <View style={actionsContainerStyle}>
-        <Pressable style={dismissButtonStyle} onPress={handleDeny} disabled={isResponding}>
+        <Pressable
+          style={dismissButtonStyle}
+          onPress={handleDeny}
+          disabled={isResponding}
+          accessibilityRole="button"
+          accessibilityLabel={dismissLabel}
+          testID="question-form-dismiss"
+        >
           {respondingAction === "dismiss" ? (
             <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
           ) : (
@@ -371,9 +483,16 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
           )}
         </Pressable>
 
-        <Pressable style={submitButtonStyle} onPress={handleSubmit} disabled={submitDisabled}>
+        <Pressable
+          style={submitButtonStyle}
+          onPress={handleSubmit}
+          disabled={submitDisabled}
+          accessibilityRole="button"
+          accessibilityLabel="Submit"
+          testID="question-form-primary-action"
+        >
           {respondingAction === "submit" ? (
-            <ActivityIndicator size="small" color={theme.colors.foreground} />
+            <ActivityIndicator size="small" color={theme.colors.accentForeground} />
           ) : (
             <View style={styles.actionContent}>
               <Check size={14} color={submitActionTextColor} />
@@ -396,21 +515,50 @@ const styles = StyleSheet.create((theme) => ({
   questionBlock: {
     gap: theme.spacing[2],
   },
+  questionTopRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.spacing[3],
+  },
   questionHeader: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
     paddingBottom: theme.spacing[1],
+    flex: 1,
   },
   questionText: {
     flex: 1,
     fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.medium,
     lineHeight: 22,
   },
   optionsWrap: {
     gap: theme.spacing[1],
   },
+  questionNav: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.spacing[1],
+  },
+  questionNavMobile: {
+    paddingRight: theme.spacing[1],
+  },
+  questionNavButton: {
+    minWidth: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 999,
+    borderWidth: theme.borderWidth[1],
+  },
+  questionNavText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: "700",
+  },
   optionItem: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -90,6 +90,7 @@ function workspace(input: {
     workspaceKind: input.name === "main" ? "local_checkout" : "worktree",
     name: input.name,
     status: input.status ?? "done",
+    statusEnteredAt: null,
     archivingAt: null,
     diffStat: null,
     scripts: input.scripts ?? [],

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

@@ -11,7 +11,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import * as Haptics from "expo-haptics";
-import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { slugify, validateBranchSlug, MAX_SLUG_LENGTH } from "@getpaseo/protocol/branch-slug";
 import { ProjectIconView } from "@/components/project-icon-view";
 import { AdaptiveRenameModal } from "@/components/rename-modal";
@@ -41,17 +41,14 @@ import { DiffStat } from "@/components/diff-stat";
 import {
   Archive,
   CircleAlert,
+  CircleCheck,
   ChevronDown,
   ChevronRight,
   Copy,
   ExternalLink,
   FolderPlus,
-  FolderGit2,
   GitPullRequest,
-  Globe,
   Settings,
-  SquareTerminal,
-  Monitor,
   MoreVertical,
   Pencil,
   Plus,
@@ -60,16 +57,16 @@ import {
 import { NestableScrollContainer } from "react-native-draggable-flatlist";
 import { DraggableList, type DraggableRenderItemInfo } from "./draggable-list";
 import type { DraggableListDragHandleProps } from "./draggable-list.types";
-import { getHostRuntimeStore, isHostRuntimeConnected } from "@/runtime/host-runtime";
+import { getHostRuntimeStore } from "@/runtime/host-runtime";
 import { useIsCompactFormFactor } from "@/constants/layout";
-import { projectIconQueryKey, projectIconToDataUri } from "@/hooks/use-project-icon-query";
+import { useProjectIconDataByProjectKey } from "@/projects/project-icons";
 import {
   buildHostNewWorkspaceRoute,
   buildProjectSettingsRoute,
   parseHostWorkspaceRouteFromPathname,
 } from "@/utils/host-routes";
 import {
-  createSidebarWorkspaceEntry,
+  useSidebarWorkspaceEntry,
   type SidebarProjectEntry,
   type SidebarWorkspaceEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
@@ -98,16 +95,29 @@ import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-disp
 import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
 import { isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
 import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
+import { SidebarStatusWorkspaceList } from "@/components/sidebar/sidebar-status-list";
+import {
+  SidebarWorkspaceRowFrame,
+  SidebarWorkspaceRowContent,
+  SidebarWorkspaceShortcutBadge,
+  SidebarWorkspaceTrailingActionBase,
+  SidebarWorkspaceTrailingActionOverlay,
+  SidebarWorkspaceTrailingActionSlot,
+} from "@/components/sidebar/sidebar-workspace-row-content";
+import {
+  useProjectNamesMap,
+  useStatusModeWorkspaceEntries,
+} from "@/hooks/use-status-mode-workspaces";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
+import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attention";
 import type { PrHint } from "@/git/use-pr-status-query";
 import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model";
-import { useSessionStore, type WorkspaceDescriptor } from "@/stores/session-store";
-import { useWorkspaceFields } from "@/stores/session-store-hooks";
+import { useSessionStore } from "@/stores/session-store";
 import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect";
 import { openExternalUrl } from "@/utils/open-external-url";
 import {
@@ -119,8 +129,6 @@ import {
   archiveWorkspaceOptimistically,
   archiveWorkspacesOptimistically,
 } from "@/workspace/workspace-archive";
-import { WorkspaceHoverCard } from "@/components/workspace-hover-card";
-import { GitHubIcon } from "@/components/icons/github-icon";
 import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
 
 const workspaceKeyExtractor = (workspace: SidebarWorkspaceEntry) => workspace.workspaceKey;
@@ -134,15 +142,11 @@ const DEFAULT_STATUS_DOT_OFFSET = 0;
 const EMPHASIZED_STATUS_DOT_OFFSET = -1;
 const ThemedExternalLink = withUnistyles(ExternalLink);
 const ThemedGitPullRequest = withUnistyles(GitPullRequest);
-const ThemedGitHubIcon = withUnistyles(GitHubIcon);
 const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
 const ThemedCircleAlert = withUnistyles(CircleAlert);
+const ThemedCircleCheck = withUnistyles(CircleCheck);
 const ThemedSyncedLoader = withUnistyles(SyncedLoader);
-const ThemedMonitor = withUnistyles(Monitor);
-const ThemedFolderGit2 = withUnistyles(FolderGit2);
 const ThemedFolderPlus = withUnistyles(FolderPlus);
-const ThemedGlobe = withUnistyles(Globe);
-const ThemedSquareTerminal = withUnistyles(SquareTerminal);
 const ThemedMoreVertical = withUnistyles(MoreVertical);
 const ThemedTrash2 = withUnistyles(Trash2);
 const ThemedSettings = withUnistyles(Settings);
@@ -156,7 +160,6 @@ const foregroundMutedColorMapping = (theme: Theme) => ({
 });
 const redColorMapping = (theme: Theme) => ({ color: theme.colors.palette.red[500] });
 const amberColorMapping = (theme: Theme) => ({ color: theme.colors.palette.amber[500] });
-const blueColorMapping = (theme: Theme) => ({ color: theme.colors.palette.blue[500] });
 const greenColorMapping = (theme: Theme) => ({ color: theme.colors.palette.green[500] });
 const purpleColorMapping = (theme: Theme) => ({ color: theme.colors.palette.purple[500] });
 const syncedLoaderColorMapping = (theme: Theme) => ({
@@ -177,17 +180,6 @@ function getPrIconUniMapping(state: PrHint["state"]) {
   }
 }
 
-function useStableProjectIconData(
-  data: (string | null)[],
-  signature: string,
-): readonly (string | null)[] {
-  const stableRef = useRef<{ signature: string; data: (string | null)[] } | null>(null);
-  if (stableRef.current?.signature !== signature) {
-    stableRef.current = { signature, data };
-  }
-  return stableRef.current.data;
-}
-
 function isWorkspaceSelected(input: {
   selection: ActiveWorkspaceSelection | null;
   serverId: string | null;
@@ -216,6 +208,10 @@ function isProjectSelectedByRoute(input: {
   );
 }
 
+function activeWorkspaceSelectionKey(selection: ActiveWorkspaceSelection | null): string {
+  return selection ? `${selection.serverId}:${selection.workspaceId}` : "";
+}
+
 function selectionForSelectedWorkspace(
   selected: boolean,
   workspace: SidebarWorkspaceEntry,
@@ -229,6 +225,7 @@ interface SidebarWorkspaceListProps {
   collapsedProjectKeys: ReadonlySet<string>;
   onToggleProjectCollapsed: (projectKey: string) => void;
   shortcutIndexByWorkspaceKey: Map<string, number>;
+  groupMode: "project" | "status";
   isRefreshing?: boolean;
   onRefresh?: () => void;
   onWorkspacePress?: () => void;
@@ -281,6 +278,7 @@ interface WorkspaceRowInnerProps {
   onCopyBranchName?: () => void;
   onCopyPath?: () => void;
   onRename?: () => void;
+  onMarkAsRead?: () => void;
   archiveShortcutKeys?: ShortcutKey[][] | null;
 }
 
@@ -294,19 +292,6 @@ function getWorkspaceArchiveStatus(
   return "idle";
 }
 
-function useSidebarWorkspaceEntry(
-  serverId: string | null,
-  workspaceId: string | null,
-): SidebarWorkspaceEntry | null {
-  const projectWorkspaceEntry = useCallback(
-    (workspace: WorkspaceDescriptor): SidebarWorkspaceEntry =>
-      createSidebarWorkspaceEntry({ serverId: serverId ?? "", workspace }),
-    [serverId],
-  );
-
-  return useWorkspaceFields(serverId, workspaceId, projectWorkspaceEntry);
-}
-
 export function PrBadge({ hint }: { hint: PrHint }) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -367,6 +352,23 @@ function workspaceKebabStyle({
   return [styles.kebabButton, hovered && styles.kebabButtonHovered];
 }
 
+function getProjectWorkspaceRowStyle({
+  isDragging,
+  selected,
+  isHovered,
+}: {
+  isDragging: boolean;
+  selected: boolean;
+  isHovered: boolean;
+}) {
+  return [
+    styles.workspaceRow,
+    isDragging && styles.workspaceRowDragging,
+    selected && styles.sidebarRowSelected,
+    isHovered && styles.workspaceRowHovered,
+  ];
+}
+
 function noop() {}
 
 const prBadgeStyles = StyleSheet.create((theme) => ({
@@ -391,100 +393,6 @@ const prBadgeStyles = StyleSheet.create((theme) => ({
 
 const prBadgeTextHoveredCombined = [prBadgeStyles.text, prBadgeStyles.textHovered];
 
-function ChecksBadge({ checks }: { checks: PrHint["checks"] }): ReactElement | null {
-  if (!checks || checks.length === 0) return null;
-
-  const failed = checks.filter((c) => c.status === "failure").length;
-  if (failed === 0) return null;
-
-  const label = `${failed} failed`;
-
-  return (
-    <View style={checksBadgeStyles.badge}>
-      <ThemedGitHubIcon size={10} uniProps={redColorMapping} />
-      <Text style={checksBadgeStyles.text}>{label}</Text>
-    </View>
-  );
-}
-
-const checksBadgeStyles = StyleSheet.create((theme) => ({
-  badge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 2,
-  },
-  text: {
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.normal,
-    lineHeight: 14,
-    color: theme.colors.palette.red[500],
-  },
-}));
-
-function WorkspaceStatusIndicator({
-  bucket,
-  workspaceKind,
-  loading = false,
-}: {
-  bucket: SidebarWorkspaceEntry["statusBucket"];
-  workspaceKind: SidebarWorkspaceEntry["workspaceKind"];
-  loading?: boolean;
-}) {
-  const shouldShowSyncedLoader = shouldRenderSyncedStatusLoader({ bucket });
-
-  if (loading) {
-    return (
-      <View style={styles.workspaceStatusDot}>
-        <ThemedActivityIndicator size={8} uniProps={foregroundMutedColorMapping} />
-      </View>
-    );
-  }
-
-  if (shouldShowSyncedLoader) {
-    return (
-      <View style={styles.workspaceStatusDot}>
-        <ThemedSyncedLoader size={11} uniProps={syncedLoaderColorMapping} />
-      </View>
-    );
-  }
-
-  if (bucket === "needs_input") {
-    return (
-      <View style={styles.workspaceStatusDot}>
-        <ThemedCircleAlert size={14} uniProps={amberColorMapping} />
-      </View>
-    );
-  }
-
-  let KindIcon: typeof ThemedMonitor | null;
-  if (workspaceKind === "local_checkout") KindIcon = ThemedMonitor;
-  else if (workspaceKind === "worktree") KindIcon = ThemedFolderGit2;
-  else KindIcon = null;
-  if (!KindIcon) return null;
-
-  const dotColorStyle = getStatusDotColorStyle(bucket);
-  const statusDotSize = isEmphasizedStatusDotBucket(bucket)
-    ? EMPHASIZED_STATUS_DOT_SIZE
-    : DEFAULT_STATUS_DOT_SIZE;
-  const statusDotOffset =
-    statusDotSize === EMPHASIZED_STATUS_DOT_SIZE
-      ? EMPHASIZED_STATUS_DOT_OFFSET
-      : DEFAULT_STATUS_DOT_OFFSET;
-
-  return (
-    <View style={styles.workspaceStatusDot}>
-      <KindIcon size={14} uniProps={foregroundMutedColorMapping} />
-      {dotColorStyle ? (
-        <StatusDotOverlay
-          dotColorStyle={dotColorStyle}
-          size={statusDotSize}
-          offset={statusDotOffset}
-        />
-      ) : null}
-    </View>
-  );
-}
-
 function StatusDotOverlay({
   dotColorStyle,
   size,
@@ -620,6 +528,9 @@ function ProjectRowTrailingActions({
 const trash2LeadingIcon = <ThemedTrash2 size={14} uniProps={foregroundMutedColorMapping} />;
 const settingsLeadingIcon = <ThemedSettings size={14} uniProps={foregroundMutedColorMapping} />;
 const copyLeadingIcon = <ThemedCopy size={14} uniProps={foregroundMutedColorMapping} />;
+const markAsReadLeadingIcon = (
+  <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />
+);
 const archiveLeadingIcon = <ThemedArchive size={14} uniProps={foregroundMutedColorMapping} />;
 const renameLeadingIcon = <ThemedPencil size={14} uniProps={foregroundMutedColorMapping} />;
 
@@ -685,8 +596,6 @@ function WorkspaceRowRightGroup({
   workspace,
   isHovered,
   isTouchPlatform,
-  showScriptsIcon,
-  hasRunningService,
   isCreating,
   showShortcutBadge,
   shortcutNumber,
@@ -695,6 +604,7 @@ function WorkspaceRowRightGroup({
   archivePendingLabel,
   archiveShortcutKeys,
   onArchive,
+  onMarkAsRead,
   onCopyBranchName,
   onCopyPath,
   onRename,
@@ -702,8 +612,6 @@ function WorkspaceRowRightGroup({
   workspace: SidebarWorkspaceEntry;
   isHovered: boolean;
   isTouchPlatform: boolean;
-  showScriptsIcon: boolean;
-  hasRunningService: boolean;
   isCreating: boolean;
   showShortcutBadge: boolean;
   shortcutNumber: number | null;
@@ -712,48 +620,49 @@ function WorkspaceRowRightGroup({
   archivePendingLabel?: string;
   archiveShortcutKeys?: ShortcutKey[][] | null;
   onArchive?: () => void;
+  onMarkAsRead?: () => void;
   onCopyBranchName?: () => void;
   onCopyPath?: () => void;
   onRename?: () => void;
 }) {
+  const showShortcut = showShortcutBadge && shortcutNumber !== null;
   const showKebab = Boolean(onArchive && (isHovered || isTouchPlatform));
+  const showKebabInSlot = showKebab && !showShortcut;
+  const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
   return (
-    <View style={styles.workspaceRowRight}>
-      {showScriptsIcon ? (
-        <View testID="workspace-globe-icon" accessibilityLabel="Scripts available">
-          {hasRunningService ? (
-            <ThemedGlobe size={12} uniProps={blueColorMapping} />
-          ) : (
-            <ThemedSquareTerminal size={12} uniProps={blueColorMapping} />
-          )}
-        </View>
-      ) : null}
+    <>
       {isCreating ? <Text style={styles.workspaceCreatingText}>Creating...</Text> : null}
-      {showKebab && onArchive ? (
-        <WorkspaceKebabMenu
-          workspaceKey={workspace.workspaceKey}
-          onCopyPath={onCopyPath}
-          onCopyBranchName={onCopyBranchName}
-          onRename={onRename}
-          onArchive={onArchive}
-          archiveLabel={archiveLabel}
-          archiveStatus={archiveStatus}
-          archivePendingLabel={archivePendingLabel}
-          archiveShortcutKeys={archiveShortcutKeys}
-        />
+      {shouldRenderActionSlot ? (
+        <SidebarWorkspaceTrailingActionSlot>
+          <SidebarWorkspaceTrailingActionBase
+            visible={Boolean(workspace.diffStat && !showKebabInSlot && !showShortcut)}
+          >
+            {workspace.diffStat ? (
+              <DiffStat
+                additions={workspace.diffStat.additions}
+                deletions={workspace.diffStat.deletions}
+              />
+            ) : null}
+          </SidebarWorkspaceTrailingActionBase>
+          <SidebarWorkspaceTrailingActionOverlay visible={showKebabInSlot}>
+            {onArchive ? (
+              <WorkspaceKebabMenu
+                workspaceKey={workspace.workspaceKey}
+                onCopyPath={onCopyPath}
+                onCopyBranchName={onCopyBranchName}
+                onRename={onRename}
+                onMarkAsRead={onMarkAsRead}
+                onArchive={onArchive}
+                archiveLabel={archiveLabel}
+                archiveStatus={archiveStatus}
+                archivePendingLabel={archivePendingLabel}
+                archiveShortcutKeys={archiveShortcutKeys}
+              />
+            ) : null}
+          </SidebarWorkspaceTrailingActionOverlay>
+        </SidebarWorkspaceTrailingActionSlot>
       ) : null}
-      {!showKebab && workspace.diffStat ? (
-        <DiffStat
-          additions={workspace.diffStat.additions}
-          deletions={workspace.diffStat.deletions}
-        />
-      ) : null}
-      {showShortcutBadge && shortcutNumber !== null ? (
-        <View style={styles.shortcutBadge}>
-          <Text style={styles.shortcutBadgeText}>{shortcutNumber}</Text>
-        </View>
-      ) : null}
-    </View>
+    </>
   );
 }
 
@@ -762,6 +671,7 @@ function WorkspaceKebabMenu({
   onCopyPath,
   onCopyBranchName,
   onRename,
+  onMarkAsRead,
   onArchive,
   archiveLabel,
   archiveStatus,
@@ -772,6 +682,7 @@ function WorkspaceKebabMenu({
   onCopyPath?: () => void;
   onCopyBranchName?: () => void;
   onRename?: () => void;
+  onMarkAsRead?: () => void;
   onArchive: () => void;
   archiveLabel?: string;
   archiveStatus?: "idle" | "pending" | "success";
@@ -821,6 +732,15 @@ function WorkspaceKebabMenu({
             Rename workspace
           </DropdownMenuItem>
         ) : null}
+        {onMarkAsRead ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
+            leading={markAsReadLeadingIcon}
+            onSelect={onMarkAsRead}
+          >
+            Mark as read
+          </DropdownMenuItem>
+        ) : null}
         <DropdownMenuItem
           testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
           leading={archiveLeadingIcon}
@@ -1327,8 +1247,8 @@ function ProjectHeaderRow({
         removeProjectStatus={removeProjectStatus}
       />
       {showShortcutBadge && shortcutNumber !== null ? (
-        <View style={styles.shortcutBadge}>
-          <Text style={styles.shortcutBadgeText}>{shortcutNumber}</Text>
+        <View style={styles.projectShortcutBadgeOverlay} pointerEvents="none">
+          <SidebarWorkspaceShortcutBadge number={shortcutNumber} />
         </View>
       ) : null}
     </>
@@ -1404,9 +1324,7 @@ function WorkspaceRowInner({
   archiveShortcutKeys,
 }: WorkspaceRowInnerProps) {
   const _isCompact = useIsCompactFormFactor();
-  const [isHovered, setIsHovered] = useState(false);
   const isTouchPlatform = platformIsNative;
-  const prHint = workspace.prHint;
   const interaction = useLongPressDragInteraction({
     drag,
     menuController,
@@ -1426,96 +1344,76 @@ function WorkspaceRowInner({
     onPress();
   }, [interaction.didLongPressRef, onPress]);
 
-  const handlePointerEnter = useCallback(() => setIsHovered(true), []);
-  const handlePointerLeave = useCallback(() => setIsHovered(false), []);
-
-  const workspaceRowStyle = useCallback(
-    ({ pressed }: PressableStateCallbackType) => [
-      styles.workspaceRow,
-      isDragging && styles.workspaceRowDragging,
-      selected && styles.sidebarRowSelected,
-      isHovered && styles.workspaceRowHovered,
-      pressed && styles.workspaceRowPressed,
-    ],
-    [isDragging, selected, isHovered],
-  );
-
-  const isDesktop = !isTouchPlatform;
-  const showScriptsIcon = isDesktop && workspace.hasRunningScripts;
-  const hasRunningService = workspace.scripts.some(
-    (s) => s.lifecycle === "running" && (s.type ?? "service") === "service",
-  );
-
   const accessibilityState = useMemo(() => ({ selected }), [selected]);
-  const workspaceBranchTextStyle = useMemo(
-    () => [
-      styles.workspaceBranchText,
-      isHovered && styles.workspaceBranchTextHovered,
-      isCreating && styles.workspaceBranchTextCreating,
-    ],
-    [isHovered, isCreating],
-  );
+
   return (
-    <WorkspaceHoverCard workspace={workspace} prHint={prHint} isDragging={isDragging}>
-      <View
-        {...dragAttributes}
-        {...dragHandleProps?.listeners}
-        ref={dragHandleProps?.setActivatorNodeRef as unknown as Ref<View>}
-        style={styles.workspaceRowContainer}
-        onPointerEnter={handlePointerEnter}
-        onPointerLeave={handlePointerLeave}
-      >
-        <Pressable
-          disabled={isArchiving}
-          aria-selected={selected}
-          accessibilityRole="button"
-          accessibilityState={accessibilityState}
-          style={workspaceRowStyle}
-          onPressIn={interaction.handlePressIn}
-          onTouchMove={interaction.handleTouchMove}
-          onPressOut={interaction.handlePressOut}
-          onPress={handlePress}
-          testID={`sidebar-workspace-row-${workspace.workspaceKey}`}
-        >
-          <View style={styles.workspaceRowMain}>
-            <View style={styles.workspaceRowLeft}>
-              <WorkspaceStatusIndicator
-                bucket={workspace.statusBucket}
-                workspaceKind={workspace.workspaceKind}
-                loading={isArchiving || isCreating}
-              />
-              <Text style={workspaceBranchTextStyle} numberOfLines={1}>
-                {workspace.name}
-              </Text>
-            </View>
-            <WorkspaceRowRightGroup
-              workspace={workspace}
-              isHovered={isHovered}
-              isTouchPlatform={isTouchPlatform}
-              showScriptsIcon={showScriptsIcon}
-              hasRunningService={hasRunningService}
-              isCreating={isCreating}
-              showShortcutBadge={showShortcutBadge}
-              shortcutNumber={shortcutNumber}
-              archiveLabel={archiveLabel}
-              archiveStatus={archiveStatus}
-              archivePendingLabel={archivePendingLabel}
-              archiveShortcutKeys={archiveShortcutKeys}
-              onArchive={onArchive}
-              onCopyBranchName={onCopyBranchName}
-              onCopyPath={onCopyPath}
-              onRename={onRename}
-            />
+    <SidebarWorkspaceRowFrame workspace={workspace} isDragging={isDragging}>
+      {({ isHovered, hoverHandlers }) => {
+        const isDesktop = !isTouchPlatform;
+        const showScriptsIcon = isDesktop && workspace.hasRunningScripts;
+        const hasRunningService = workspace.scripts.some(
+          (s) => s.lifecycle === "running" && (s.type ?? "service") === "service",
+        );
+        let scriptIconKind: "service" | "command" | null = null;
+        if (showScriptsIcon) {
+          scriptIconKind = hasRunningService ? "service" : "command";
+        }
+        const workspaceRowStyle = getProjectWorkspaceRowStyle({
+          isDragging,
+          selected,
+          isHovered,
+        });
+        return (
+          <View
+            {...dragAttributes}
+            {...dragHandleProps?.listeners}
+            ref={dragHandleProps?.setActivatorNodeRef as unknown as Ref<View>}
+            style={styles.workspaceRowContainer}
+            {...hoverHandlers}
+          >
+            <Pressable
+              disabled={isArchiving}
+              aria-selected={selected}
+              accessibilityRole="button"
+              accessibilityState={accessibilityState}
+              style={workspaceRowStyle}
+              onPressIn={interaction.handlePressIn}
+              onTouchMove={interaction.handleTouchMove}
+              onPressOut={interaction.handlePressOut}
+              onPress={handlePress}
+              testID={`sidebar-workspace-row-${workspace.workspaceKey}`}
+            >
+              <SidebarWorkspaceRowContent
+                workspace={workspace}
+                scriptIconKind={scriptIconKind}
+                isHovered={isHovered}
+                isLoading={isArchiving || isCreating}
+                isCreating={isCreating}
+                shortcutNumber={shortcutNumber}
+                showShortcutBadge={showShortcutBadge}
+              >
+                <WorkspaceRowRightGroup
+                  workspace={workspace}
+                  isHovered={isHovered}
+                  isTouchPlatform={isTouchPlatform}
+                  isCreating={isCreating}
+                  showShortcutBadge={showShortcutBadge}
+                  shortcutNumber={shortcutNumber}
+                  archiveLabel={archiveLabel}
+                  archiveStatus={archiveStatus}
+                  archivePendingLabel={archivePendingLabel}
+                  archiveShortcutKeys={archiveShortcutKeys}
+                  onArchive={onArchive}
+                  onCopyBranchName={onCopyBranchName}
+                  onCopyPath={onCopyPath}
+                  onRename={onRename}
+                />
+              </SidebarWorkspaceRowContent>
+            </Pressable>
           </View>
-          {prHint ? (
-            <View style={styles.workspacePrBadgeRow}>
-              <PrBadge hint={prHint} />
-              <ChecksBadge checks={prHint.checks} />
-            </View>
-          ) : null}
-        </Pressable>
-      </View>
-    </WorkspaceHoverCard>
+        );
+      }}
+    </SidebarWorkspaceRowFrame>
   );
 }
 
@@ -1722,6 +1620,15 @@ function WorkspaceRowWithMenu({
   }, []);
 
   const archiveShortcutKeys = useShortcutKeys("archive-worktree");
+  const { hasClearableAttention, clearAttention } = useClearWorkspaceAttention({
+    serverId: workspace.serverId,
+    workspaceId: workspace.workspaceId,
+  });
+  const handleMarkAsRead = useCallback(() => {
+    void clearAttention().catch((error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to mark workspace as read");
+    });
+  }, [clearAttention, toast]);
 
   useKeyboardActionHandler({
     handlerId: `worktree-archive-${workspace.workspaceKey}`,
@@ -1759,6 +1666,7 @@ function WorkspaceRowWithMenu({
         onCopyBranchName={canCopyBranchName ? handleCopyBranchName : undefined}
         onCopyPath={handleCopyPath}
         onRename={canCopyBranchName ? handleOpenRename : undefined}
+        onMarkAsRead={hasClearableAttention ? handleMarkAsRead : undefined}
         archiveShortcutKeys={selected ? archiveShortcutKeys : null}
       />
       <AdaptiveRenameModal
@@ -2370,6 +2278,7 @@ function ProjectBlock({
               keyExtractor={workspaceKeyExtractor}
               renderItem={renderWorkspace}
               onDragEnd={handleWorkspaceDragEnd}
+              extraData={activeWorkspaceSelectionKey(activeWorkspaceSelection)}
               scrollEnabled={false}
               useDragHandle
               nestable={useNestable}
@@ -2386,18 +2295,6 @@ function ProjectBlock({
 type ProjectBlockProps = Parameters<typeof ProjectBlock>[0];
 
 function areProjectBlockPropsEqual(previous: ProjectBlockProps, next: ProjectBlockProps): boolean {
-  const previousActive = isProjectSelectedByRoute({
-    selection: previous.activeWorkspaceSelection,
-    project: previous.project,
-    serverId: previous.serverId,
-    enabled: previous.selectionEnabled,
-  });
-  const nextActive = isProjectSelectedByRoute({
-    selection: next.activeWorkspaceSelection,
-    project: next.project,
-    serverId: next.serverId,
-    enabled: next.selectionEnabled,
-  });
   return (
     previous.project === next.project &&
     previous.collapsed === next.collapsed &&
@@ -2417,7 +2314,35 @@ function areProjectBlockPropsEqual(previous: ProjectBlockProps, next: ProjectBlo
     previous.dragHandleProps === next.dragHandleProps &&
     previous.useNestable === next.useNestable &&
     previous.creatingWorkspaceIds === next.creatingWorkspaceIds &&
-    previousActive === nextActive
+    areProjectBlockSelectionsEqual(previous, next)
+  );
+}
+
+function areProjectBlockSelectionsEqual(
+  previous: ProjectBlockProps,
+  next: ProjectBlockProps,
+): boolean {
+  const previousActive = isProjectSelectedByRoute({
+    selection: previous.activeWorkspaceSelection,
+    project: previous.project,
+    serverId: previous.serverId,
+    enabled: previous.selectionEnabled,
+  });
+  const nextActive = isProjectSelectedByRoute({
+    selection: next.activeWorkspaceSelection,
+    project: next.project,
+    serverId: next.serverId,
+    enabled: next.selectionEnabled,
+  });
+  if (previousActive !== nextActive) {
+    return false;
+  }
+  if (!previousActive) {
+    return true;
+  }
+  return (
+    activeWorkspaceSelectionKey(previous.activeWorkspaceSelection) ===
+    activeWorkspaceSelectionKey(next.activeWorkspaceSelection)
   );
 }
 
@@ -2429,6 +2354,7 @@ export function SidebarWorkspaceList({
   collapsedProjectKeys,
   onToggleProjectCollapsed,
   shortcutIndexByWorkspaceKey,
+  groupMode,
   isRefreshing: _isRefreshing = false,
   onRefresh: _onRefresh,
   onWorkspacePress,
@@ -2437,6 +2363,75 @@ export function SidebarWorkspaceList({
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
   const pathname = usePathname();
+
+  if (groupMode === "status") {
+    return (
+      <SidebarStatusModeWrapper
+        serverId={serverId}
+        projects={projects}
+        shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
+        onWorkspacePress={onWorkspacePress}
+      />
+    );
+  }
+
+  return (
+    <ProjectModeList
+      projects={projects}
+      serverId={serverId}
+      collapsedProjectKeys={collapsedProjectKeys}
+      onToggleProjectCollapsed={onToggleProjectCollapsed}
+      shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
+      onWorkspacePress={onWorkspacePress}
+      onAddProject={onAddProject}
+      listFooterComponent={listFooterComponent}
+      parentGestureRef={parentGestureRef}
+      pathname={pathname}
+    />
+  );
+}
+
+function SidebarStatusModeWrapper({
+  serverId,
+  projects,
+  shortcutIndexByWorkspaceKey: _projectShortcutIndex,
+  onWorkspacePress,
+}: {
+  serverId: string | null;
+  projects: SidebarProjectEntry[];
+  shortcutIndexByWorkspaceKey: Map<string, number>;
+  onWorkspacePress?: () => void;
+}) {
+  const hydratedWorkspaces = useStatusModeWorkspaceEntries({ serverId, projects });
+  const projectNamesByKey = useProjectNamesMap(serverId);
+  const showShortcutBadges = useShowShortcutBadges();
+
+  return (
+    <SidebarStatusWorkspaceList
+      workspaces={hydratedWorkspaces}
+      projectNamesByKey={projectNamesByKey}
+      serverId={serverId}
+      shortcutIndexByWorkspaceKey={_projectShortcutIndex}
+      showShortcutBadges={showShortcutBadges}
+      onWorkspacePress={onWorkspacePress}
+    />
+  );
+}
+
+function ProjectModeList({
+  projects,
+  serverId,
+  collapsedProjectKeys,
+  onToggleProjectCollapsed,
+  shortcutIndexByWorkspaceKey,
+  onWorkspacePress,
+  onAddProject,
+  listFooterComponent,
+  parentGestureRef,
+  pathname,
+}: Omit<SidebarWorkspaceListProps, "groupMode" | "isRefreshing" | "onRefresh"> & {
+  pathname: string;
+}) {
   const [creatingWorkspaceIds, setCreatingWorkspaceIds] = useState<Set<string>>(() => new Set());
   const creatingWorkspaceTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
     new Map(),
@@ -2454,75 +2449,21 @@ export function SidebarWorkspaceList({
   );
   const selectionEnabled = isWorkspaceRoute;
   const activeWorkspaceSelection = useActiveWorkspaceSelection();
-
-  const projectIconRequests = useMemo(() => {
-    if (!serverId) {
-      return [];
-    }
-    const unique = new Map<string, { serverId: string; cwd: string }>();
-    for (const project of projects) {
-      const cwd = project.iconWorkingDir.trim();
-      if (!cwd) {
-        continue;
-      }
-      unique.set(`${serverId}:${cwd}`, { serverId, cwd });
-    }
-    return Array.from(unique.values());
-  }, [projects, serverId]);
-
-  const projectIconQueries = useQueries({
-    queries: projectIconRequests.map((request) => ({
-      queryKey: projectIconQueryKey(request.serverId, request.cwd),
-      queryFn: async () => {
-        const client = getHostRuntimeStore().getClient(request.serverId);
-        if (!client) {
-          return null;
-        }
-        const result = await client.requestProjectIcon(request.cwd);
-        return result.icon;
-      },
-      select: projectIconToDataUri,
-      enabled: Boolean(
-        getHostRuntimeStore().getClient(request.serverId) &&
-        isHostRuntimeConnected(getHostRuntimeStore().getSnapshot(request.serverId)) &&
-        request.cwd,
-      ),
-      staleTime: Infinity,
-      gcTime: 1000 * 60 * 60,
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    })),
-  });
-
-  const projectIconSignature = projectIconQueries.map((query) => query.data ?? "").join("\u0000");
-  const projectIconData = useStableProjectIconData(
-    projectIconQueries.map((query) => query.data ?? null),
-    projectIconSignature,
+  const nativeScrollGestureProps = useMemo(
+    () =>
+      parentGestureRef
+        ? ({
+            // NestableScrollContainer forwards props to RNGH ScrollView. Keep
+            // vertical scroll and sidebar close pan simultaneous: vertical
+            // intent scrolls immediately, clear horizontal intent can still
+            // activate close from inside the list.
+            simultaneousHandlers: parentGestureRef,
+          } as object)
+        : undefined,
+    [parentGestureRef],
   );
 
-  const projectIconByProjectKey = useMemo(() => {
-    const iconByServerAndCwd = new Map<string, string | null>();
-    for (let index = 0; index < projectIconRequests.length; index += 1) {
-      const request = projectIconRequests[index];
-      if (!request) {
-        continue;
-      }
-      iconByServerAndCwd.set(`${request.serverId}:${request.cwd}`, projectIconData[index] ?? null);
-    }
-
-    const byProject = new Map<string, string | null>();
-    for (const project of projects) {
-      const cwd = project.iconWorkingDir.trim();
-      if (!cwd || !serverId) {
-        byProject.set(project.projectKey, null);
-        continue;
-      }
-      byProject.set(project.projectKey, iconByServerAndCwd.get(`${serverId}:${cwd}`) ?? null);
-    }
-
-    return byProject;
-  }, [projectIconData, projectIconRequests, projects, serverId]);
+  const projectIconByProjectKey = useProjectIconDataByProjectKey({ serverId, projects });
 
   useEffect(() => {
     const timeouts = creatingWorkspaceTimeoutsRef.current;
@@ -2713,6 +2654,7 @@ export function SidebarWorkspaceList({
           keyExtractor={projectKeyExtractor}
           renderItem={renderProject}
           onDragEnd={handleProjectDragEnd}
+          extraData={activeWorkspaceSelectionKey(activeWorkspaceSelection)}
           scrollEnabled={false}
           useDragHandle
           nestable={platformIsNative}
@@ -2728,6 +2670,7 @@ export function SidebarWorkspaceList({
     <View style={styles.container}>
       {platformIsNative ? (
         <NestableScrollContainer
+          {...nativeScrollGestureProps}
           style={styles.list}
           contentContainerStyle={styles.listContent}
           showsVerticalScrollIndicator={false}
@@ -2791,6 +2734,7 @@ const styles = StyleSheet.create((theme) => ({
     textAlign: "center",
   },
   projectRow: {
+    position: "relative",
     minHeight: 36,
     paddingVertical: theme.spacing[2],
     paddingHorizontal: theme.spacing[2],
@@ -2927,6 +2871,11 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
   },
   projectActionTooltipShortcut: {},
+  projectShortcutBadgeOverlay: {
+    position: "absolute",
+    top: theme.spacing[2] + 1,
+    right: theme.spacing[2],
+  },
   workspaceRow: {
     minHeight: 36,
     marginBottom: theme.spacing[1],
@@ -3047,24 +2996,6 @@ const styles = StyleSheet.create((theme) => ({
   kebabButtonHovered: {
     backgroundColor: theme.colors.surface2,
   },
-  shortcutBadge: {
-    minWidth: 18,
-    height: 18,
-    paddingHorizontal: theme.spacing[1],
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.borderRadius.sm,
-    borderWidth: 1,
-    borderColor: theme.colors.surface2,
-    backgroundColor: theme.colors.surface0,
-    flexShrink: 0,
-  },
-  shortcutBadgeText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    fontWeight: theme.fontWeight.medium,
-    lineHeight: 14,
-  },
   statusDotNeedsInput: {
     backgroundColor: theme.colors.palette.amber[500],
     borderColor: theme.colors.surface0,

packages/app/src/components/sidebar/sidebar-grouping-selector.tsx

@@ -0,0 +1,113 @@
+import { useCallback } from "react";
+import { Text, View, type PressableStateCallbackType } from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { Settings2 } from "lucide-react-native";
+import type { Theme } from "@/styles/theme";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { useSidebarViewStore, type SidebarGroupMode } from "@/stores/sidebar-view-store";
+import { isWeb as platformIsWeb } from "@/constants/platform";
+
+const ThemedSettings2 = withUnistyles(Settings2);
+const filterColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+const GROUP_MODE_ITEMS: Array<{ value: SidebarGroupMode; label: string }> = [
+  { value: "project", label: "Project" },
+  { value: "status", label: "Status" },
+];
+
+export function SidebarGroupingSelector({ serverId }: { serverId: string | null }) {
+  const groupMode = useSidebarViewStore((state) =>
+    serverId ? state.getGroupMode(serverId) : "project",
+  );
+  const setGroupMode = useSidebarViewStore((state) => state.setGroupMode);
+
+  const handleSelect = useCallback(
+    (mode: SidebarGroupMode) => {
+      if (!serverId) return;
+      setGroupMode(serverId, mode);
+    },
+    [serverId, setGroupMode],
+  );
+
+  const triggerStyle = useCallback(
+    ({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) => [
+      styles.trigger,
+      hovered && styles.triggerHovered,
+    ],
+    [],
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        style={triggerStyle}
+        accessibilityRole={platformIsWeb ? undefined : "button"}
+        accessibilityLabel="Sidebar grouping"
+        testID="sidebar-grouping-selector"
+      >
+        <ThemedSettings2 size={14} uniProps={filterColorMapping} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" width={180} testID="sidebar-grouping-menu">
+        <View style={styles.menuHeader}>
+          <Text style={styles.menuHeaderLabel}>Group by</Text>
+        </View>
+        {GROUP_MODE_ITEMS.map((item) => (
+          <GroupModeMenuItem
+            key={item.value}
+            item={item}
+            isSelected={groupMode === item.value}
+            onSelect={handleSelect}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function GroupModeMenuItem({
+  item,
+  isSelected,
+  onSelect,
+}: {
+  item: { value: SidebarGroupMode; label: string };
+  isSelected: boolean;
+  onSelect: (mode: SidebarGroupMode) => void;
+}) {
+  const handleSelect = useCallback(() => onSelect(item.value), [item.value, onSelect]);
+  return (
+    <DropdownMenuItem
+      testID={`sidebar-grouping-${item.value}`}
+      selected={isSelected}
+      onSelect={handleSelect}
+    >
+      {item.label}
+    </DropdownMenuItem>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.borderRadius.md,
+  },
+  triggerHovered: {
+    backgroundColor: theme.colors.surfaceSidebarHover,
+  },
+  menuHeader: {
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+  },
+  menuHeaderLabel: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foregroundMuted,
+  },
+}));

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

@@ -0,0 +1,931 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import { View, Text, Pressable, ScrollView, type PressableStateCallbackType } from "react-native";
+import { NestableScrollContainer } from "react-native-draggable-flatlist";
+import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
+import { useActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
+import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
+import {
+  buildStatusGroups,
+  buildStatusShortcutIndex,
+  type StatusGroup,
+} from "@/hooks/sidebar-status-view-model";
+import { isWeb as platformIsWeb, isNative as platformIsNative } from "@/constants/platform";
+import { StyleSheet } from "react-native-unistyles";
+import type { Theme } from "@/styles/theme";
+import { withUnistyles } from "react-native-unistyles";
+import {
+  ChevronDown,
+  ChevronRight,
+  CircleAlert,
+  CircleCheck,
+  CircleDot,
+  CircleX,
+  MoreVertical,
+  Copy,
+  Archive,
+  Pencil,
+} from "lucide-react-native";
+import { DiffStat } from "@/components/diff-stat";
+import { useSidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/contexts/toast-context";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getHostRuntimeStore } from "@/runtime/host-runtime";
+import { invalidateCheckoutGitQueriesForClient } from "@/git/query-keys";
+import { slugify, validateBranchSlug, MAX_SLUG_LENGTH } from "@getpaseo/protocol/branch-slug";
+import { AdaptiveRenameModal } from "@/components/rename-modal";
+import {
+  requireWorkspaceExecutionDirectory,
+  resolveWorkspaceExecutionDirectory,
+} from "@/utils/workspace-execution";
+import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect";
+import { archiveWorkspaceOptimistically } from "@/workspace/workspace-archive";
+import { useCheckoutGitActionsStore } from "@/git/actions-store";
+import { confirmRiskyWorktreeArchive } from "@/git/worktree-archive-warning";
+import { confirmDialog } from "@/utils/confirm-dialog";
+import * as Clipboard from "expo-clipboard";
+import { Shortcut } from "@/components/ui/shortcut";
+import type { ShortcutKey } from "@/utils/format-shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
+import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
+import { useClearWorkspaceAttention } from "@/hooks/use-clear-workspace-attention";
+import {
+  SidebarWorkspaceRowFrame,
+  SidebarWorkspaceRowContent,
+  SidebarWorkspaceTrailingActionBase,
+  SidebarWorkspaceTrailingActionOverlay,
+  SidebarWorkspaceTrailingActionSlot,
+} from "@/components/sidebar/sidebar-workspace-row-content";
+import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
+
+// Themed icon wrappers
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+const blueColorMapping = (theme: Theme) => ({ color: theme.colors.palette.blue[500] });
+const amberColorMapping = (theme: Theme) => ({ color: theme.colors.palette.amber[500] });
+const redColorMapping = (theme: Theme) => ({ color: theme.colors.palette.red[500] });
+const greenColorMapping = (theme: Theme) => ({ color: theme.colors.palette.green[500] });
+
+const ThemedChevronDown = withUnistyles(ChevronDown);
+const ThemedChevronRight = withUnistyles(ChevronRight);
+const ThemedCircleAlert = withUnistyles(CircleAlert);
+const ThemedCircleCheck = withUnistyles(CircleCheck);
+const ThemedCircleDot = withUnistyles(CircleDot);
+const ThemedCircleX = withUnistyles(CircleX);
+const ThemedMoreVertical = withUnistyles(MoreVertical);
+const ThemedCopy = withUnistyles(Copy);
+const ThemedArchive = withUnistyles(Archive);
+const ThemedPencil = withUnistyles(Pencil);
+
+const copyLeadingIcon = <ThemedCopy size={14} uniProps={foregroundMutedColorMapping} />;
+const markAsReadLeadingIcon = (
+  <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />
+);
+const archiveLeadingIcon = <ThemedArchive size={14} uniProps={foregroundMutedColorMapping} />;
+const renameLeadingIcon = <ThemedPencil size={14} uniProps={foregroundMutedColorMapping} />;
+
+interface StatusWorkspaceListProps {
+  workspaces: SidebarWorkspaceEntry[];
+  projectNamesByKey: Map<string, string>;
+  serverId: string | null;
+  shortcutIndexByWorkspaceKey: Map<string, number>;
+  showShortcutBadges: boolean;
+  onWorkspacePress?: () => void;
+}
+
+export function SidebarStatusWorkspaceList({
+  workspaces,
+  projectNamesByKey,
+  serverId,
+  shortcutIndexByWorkspaceKey: _projectShortcutIndex,
+  showShortcutBadges,
+  onWorkspacePress,
+}: StatusWorkspaceListProps) {
+  const groups = useMemo(
+    () => buildStatusGroups(workspaces, projectNamesByKey),
+    [workspaces, projectNamesByKey],
+  );
+  const collapsedStatusGroupKeys = useSidebarCollapsedSectionsStore(
+    (state) => state.collapsedStatusGroupKeys,
+  );
+
+  const statusShortcutIndex = useMemo(
+    () =>
+      showShortcutBadges
+        ? buildStatusShortcutIndex(
+            groups.filter((group) => !collapsedStatusGroupKeys.has(group.bucket)),
+          )
+        : new Map<string, number>(),
+    [collapsedStatusGroupKeys, groups, showShortcutBadges],
+  );
+
+  return (
+    <View style={styles.container}>
+      {platformIsNative ? (
+        <NestableScrollContainer
+          style={styles.list}
+          contentContainerStyle={styles.listContent}
+          showsVerticalScrollIndicator={false}
+          testID="sidebar-status-list-scroll"
+        >
+          <StatusGroupList
+            groups={groups}
+            collapsedStatusGroupKeys={collapsedStatusGroupKeys}
+            projectNamesByKey={projectNamesByKey}
+            serverId={serverId}
+            shortcutIndex={statusShortcutIndex}
+            showShortcutBadges={showShortcutBadges}
+            onWorkspacePress={onWorkspacePress}
+          />
+        </NestableScrollContainer>
+      ) : (
+        <ScrollView
+          style={styles.list}
+          contentContainerStyle={styles.listContent}
+          showsVerticalScrollIndicator={false}
+          testID="sidebar-status-list-scroll"
+        >
+          <StatusGroupList
+            groups={groups}
+            collapsedStatusGroupKeys={collapsedStatusGroupKeys}
+            projectNamesByKey={projectNamesByKey}
+            serverId={serverId}
+            shortcutIndex={statusShortcutIndex}
+            showShortcutBadges={showShortcutBadges}
+            onWorkspacePress={onWorkspacePress}
+          />
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+function StatusGroupList({
+  groups,
+  collapsedStatusGroupKeys,
+  projectNamesByKey,
+  serverId,
+  shortcutIndex,
+  showShortcutBadges,
+  onWorkspacePress,
+}: {
+  groups: StatusGroup[];
+  collapsedStatusGroupKeys: ReadonlySet<string>;
+  projectNamesByKey: Map<string, string>;
+  serverId: string | null;
+  shortcutIndex: Map<string, number>;
+  showShortcutBadges: boolean;
+  onWorkspacePress?: () => void;
+}) {
+  return (
+    <>
+      {groups.map((group) => (
+        <View key={group.bucket} style={styles.statusGroupBlock}>
+          <StatusGroupHeader group={group} collapsed={collapsedStatusGroupKeys.has(group.bucket)} />
+          {!collapsedStatusGroupKeys.has(group.bucket) ? (
+            <View style={styles.statusWorkspaceListContainer}>
+              {group.rows.map((workspace) => (
+                <StatusWorkspaceRow
+                  key={workspace.workspaceKey}
+                  workspace={workspace}
+                  projectName={projectNamesByKey.get(workspace.projectKey) ?? ""}
+                  serverId={serverId}
+                  shortcutNumber={shortcutIndex.get(workspace.workspaceKey) ?? null}
+                  showShortcutBadge={showShortcutBadges}
+                  onWorkspacePress={onWorkspacePress}
+                />
+              ))}
+            </View>
+          ) : null}
+        </View>
+      ))}
+    </>
+  );
+}
+
+function StatusGroupHeader({ group, collapsed }: { group: StatusGroup; collapsed: boolean }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const toggleStatusGroupCollapsed = useSidebarCollapsedSectionsStore(
+    (state) => state.toggleStatusGroupCollapsed,
+  );
+  const handlePress = useCallback(() => {
+    toggleStatusGroupCollapsed(group.bucket);
+  }, [group.bucket, toggleStatusGroupCollapsed]);
+  const handleHoverIn = useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = useCallback(() => setIsHovered(false), []);
+  const rowStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType) => [
+      styles.statusGroupRow,
+      isHovered && styles.statusGroupRowHovered,
+      pressed && styles.statusGroupRowPressed,
+    ],
+    [isHovered],
+  );
+  const accessibilityState = useMemo(() => ({ expanded: !collapsed }), [collapsed]);
+
+  return (
+    <View onPointerEnter={handleHoverIn} onPointerLeave={handleHoverOut}>
+      <Pressable
+        accessibilityRole={platformIsWeb ? undefined : "button"}
+        accessibilityLabel={`${group.label} status group`}
+        accessibilityState={accessibilityState}
+        style={rowStyle}
+        onPress={handlePress}
+        testID={`sidebar-status-group-${group.bucket}`}
+      >
+        <View style={styles.statusGroupRowLeft}>
+          <View style={styles.statusGroupLeadingVisualSlot}>
+            <StatusGroupLeadingVisual
+              bucket={group.bucket}
+              collapsed={collapsed}
+              showChevron={isHovered}
+            />
+          </View>
+          <View style={styles.statusGroupTitleGroup}>
+            <Text style={styles.statusGroupTitle} numberOfLines={1}>
+              {group.label}
+            </Text>
+          </View>
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+function StatusGroupLeadingVisual({
+  bucket,
+  collapsed,
+  showChevron,
+}: {
+  bucket: StatusGroup["bucket"];
+  collapsed: boolean;
+  showChevron: boolean;
+}) {
+  if (!showChevron) {
+    return <StatusGroupIcon bucket={bucket} />;
+  }
+  if (collapsed) {
+    return <ThemedChevronRight size={14} uniProps={foregroundMutedColorMapping} />;
+  }
+  return <ThemedChevronDown size={14} uniProps={foregroundMutedColorMapping} />;
+}
+
+function StatusGroupIcon({ bucket }: { bucket: StatusGroup["bucket"] }) {
+  switch (bucket) {
+    case "needs_input":
+      return <ThemedCircleAlert size={14} uniProps={amberColorMapping} />;
+    case "failed":
+      return <ThemedCircleX size={14} uniProps={redColorMapping} />;
+    case "attention":
+      return <ThemedCircleCheck size={14} uniProps={greenColorMapping} />;
+    case "running":
+      return <ThemedCircleDot size={14} uniProps={blueColorMapping} />;
+    case "done":
+      return <ThemedCircleCheck size={14} uniProps={foregroundMutedColorMapping} />;
+  }
+}
+
+const StatusWorkspaceRow = memo(function StatusWorkspaceRow({
+  workspace,
+  projectName,
+  serverId,
+  shortcutNumber,
+  showShortcutBadge,
+  onWorkspacePress,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  projectName: string;
+  serverId: string | null;
+  shortcutNumber: number | null;
+  showShortcutBadge: boolean;
+  onWorkspacePress?: () => void;
+}) {
+  const hydratedWorkspace = useSidebarWorkspaceEntry(serverId, workspace.workspaceId);
+  const activeWorkspaceSelection = useActiveWorkspaceSelection();
+  const selected =
+    activeWorkspaceSelection?.serverId === workspace.serverId &&
+    activeWorkspaceSelection?.workspaceId === workspace.workspaceId;
+
+  const handlePress = useCallback(() => {
+    if (!serverId) return;
+    onWorkspacePress?.();
+    navigateToWorkspace(serverId, workspace.workspaceId);
+  }, [serverId, onWorkspacePress, workspace.workspaceId]);
+
+  if (!hydratedWorkspace) return null;
+
+  return (
+    <StatusWorkspaceRowWithMenu
+      workspace={hydratedWorkspace}
+      projectName={projectName}
+      selected={selected}
+      shortcutNumber={shortcutNumber}
+      showShortcutBadge={showShortcutBadge}
+      onPress={handlePress}
+    />
+  );
+});
+
+function StatusWorkspaceRowWithMenu({
+  workspace,
+  projectName,
+  selected,
+  shortcutNumber,
+  showShortcutBadge,
+  onPress,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  projectName: string;
+  selected: boolean;
+  shortcutNumber: number | null;
+  showShortcutBadge: boolean;
+  onPress: () => void;
+}) {
+  const toast = useToast();
+  const archiveWorktree = useCheckoutGitActionsStore((state) => state.archiveWorktree);
+  const queryClient = useQueryClient();
+  const [isArchivingWorkspace, setIsArchivingWorkspace] = useState(false);
+  const [isRenameOpen, setIsRenameOpen] = useState(false);
+  const workspaceDirectory = resolveWorkspaceExecutionDirectory({
+    workspaceDirectory: workspace.workspaceDirectory,
+  });
+  const archiveStatus = useCheckoutGitActionsStore((state) =>
+    workspaceDirectory
+      ? state.getStatus({
+          serverId: workspace.serverId,
+          cwd: workspaceDirectory,
+          actionId: "archive-worktree",
+        })
+      : "idle",
+  );
+  const isWorktree = workspace.workspaceKind === "worktree";
+  const isArchiving = isWorktree ? workspace.archivingAt !== null : isArchivingWorkspace;
+
+  const redirectAfterArchive = useCallback(() => {
+    redirectIfArchivingActiveWorkspace({
+      serverId: workspace.serverId,
+      workspaceId: workspace.workspaceId,
+      activeWorkspaceSelection: selected
+        ? { serverId: workspace.serverId, workspaceId: workspace.workspaceId }
+        : null,
+    });
+  }, [selected, workspace]);
+
+  const archiveWorktreeAfterConfirmation = useCallback(async () => {
+    if (isArchiving) return;
+    const confirmed = await confirmRiskyWorktreeArchive({
+      worktreeName: workspace.name,
+      isDirty: workspace.archiveHasUncommittedChanges,
+      aheadOfOrigin: workspace.archiveUnpushedCommitCount,
+      diffStat: workspace.diffStat,
+    });
+    if (!confirmed) return;
+    let archiveDirectory: string;
+    try {
+      archiveDirectory = requireWorkspaceExecutionDirectory({
+        workspaceId: workspace.workspaceId,
+        workspaceDirectory: workspace.workspaceDirectory,
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Workspace path not available");
+      return;
+    }
+    redirectAfterArchive();
+    void archiveWorktree({
+      serverId: workspace.serverId,
+      cwd: archiveDirectory,
+      worktreePath: archiveDirectory,
+    }).catch((error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to archive worktree");
+    });
+  }, [archiveWorktree, isArchiving, redirectAfterArchive, toast, workspace]);
+
+  const hideWorkspaceAfterConfirmation = useCallback(async () => {
+    if (isArchivingWorkspace) return;
+    const confirmed = await confirmDialog({
+      title: "Hide workspace?",
+      message: `Hide "${workspace.name}" from the sidebar?\n\nFiles on disk will not be changed.`,
+      confirmLabel: "Hide",
+      cancelLabel: "Cancel",
+      destructive: true,
+    });
+    if (!confirmed) return;
+    const client = getHostRuntimeStore().getClient(workspace.serverId);
+    if (!client) {
+      toast.error("Host is not connected");
+      return;
+    }
+    setIsArchivingWorkspace(true);
+    try {
+      await archiveWorkspaceOptimistically({
+        client,
+        workspace,
+        afterHide: redirectAfterArchive,
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to hide workspace");
+    } finally {
+      setIsArchivingWorkspace(false);
+    }
+  }, [isArchivingWorkspace, redirectAfterArchive, toast, workspace]);
+
+  const handleCopyPath = useCallback(() => {
+    let copyTargetDirectory: string;
+    try {
+      copyTargetDirectory = requireWorkspaceExecutionDirectory({
+        workspaceId: workspace.workspaceId,
+        workspaceDirectory: workspace.workspaceDirectory,
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Workspace path not available");
+      return;
+    }
+    void Clipboard.setStringAsync(copyTargetDirectory);
+    toast.copied("Path copied");
+  }, [toast, workspace.workspaceDirectory, workspace.workspaceId]);
+
+  const handleCopyBranchName = useCallback(() => {
+    void Clipboard.setStringAsync(workspace.name);
+    toast.copied("Branch name copied");
+  }, [toast, workspace.name]);
+
+  const renameMutation = useMutation({
+    mutationFn: async (branch: string) => {
+      const client = getHostRuntimeStore().getClient(workspace.serverId);
+      if (!client) throw new Error("Host is not connected");
+      const targetCwd = requireWorkspaceExecutionDirectory({
+        workspaceId: workspace.workspaceId,
+        workspaceDirectory: workspace.workspaceDirectory,
+      });
+      const payload = await client.renameBranch({ cwd: targetCwd, branch });
+      if (!payload.success || payload.error) {
+        throw new Error(payload.error?.message ?? "Failed to rename branch");
+      }
+      return { targetCwd };
+    },
+    onSuccess: async ({ targetCwd }) => {
+      await invalidateCheckoutGitQueriesForClient(queryClient, {
+        serverId: workspace.serverId,
+        cwd: targetCwd,
+      });
+    },
+  });
+
+  const handleOpenRename = useCallback(() => setIsRenameOpen(true), []);
+  const handleCloseRename = useCallback(() => setIsRenameOpen(false), []);
+  const handleSubmitRename = useCallback(
+    async (value: string) => {
+      await renameMutation.mutateAsync(slugify(value));
+    },
+    [renameMutation],
+  );
+  const validateRenameSlug = useCallback((value: string): string | null => {
+    const result = validateBranchSlug(slugify(value));
+    if (result.valid) return null;
+    return result.error ?? "Invalid branch name";
+  }, []);
+
+  const archiveShortcutKeys = useShortcutKeys("archive-worktree");
+  const { hasClearableAttention, clearAttention } = useClearWorkspaceAttention({
+    serverId: workspace.serverId,
+    workspaceId: workspace.workspaceId,
+  });
+  const handleMarkAsRead = useCallback(() => {
+    void clearAttention().catch((error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to mark workspace as read");
+    });
+  }, [clearAttention, toast]);
+
+  useKeyboardActionHandler({
+    handlerId: `worktree-archive-${workspace.workspaceKey}`,
+    actions: ["worktree.archive"],
+    enabled: selected && !isArchiving,
+    priority: 0,
+    handle: () => {
+      if (isWorktree) {
+        void archiveWorktreeAfterConfirmation();
+      } else {
+        void hideWorkspaceAfterConfirmation();
+      }
+      return true;
+    },
+  });
+
+  let computedArchiveStatus: "idle" | "pending" | "success" = "idle";
+  if (isWorktree) {
+    computedArchiveStatus = archiveStatus;
+  } else if (isArchivingWorkspace) {
+    computedArchiveStatus = "pending";
+  }
+
+  return (
+    <>
+      <StatusWorkspaceRowInner
+        workspace={workspace}
+        projectName={projectName}
+        selected={selected}
+        shortcutNumber={shortcutNumber}
+        showShortcutBadge={showShortcutBadge}
+        onPress={onPress}
+        isArchiving={isArchiving}
+        archiveLabel={isWorktree ? "Archive worktree" : "Hide from sidebar"}
+        archiveStatus={computedArchiveStatus}
+        archivePendingLabel={isWorktree ? "Archiving..." : "Hiding..."}
+        onArchive={isWorktree ? archiveWorktreeAfterConfirmation : hideWorkspaceAfterConfirmation}
+        onCopyBranchName={workspace.projectKind === "git" ? handleCopyBranchName : undefined}
+        onCopyPath={handleCopyPath}
+        onRename={workspace.projectKind === "git" ? handleOpenRename : undefined}
+        onMarkAsRead={hasClearableAttention ? handleMarkAsRead : undefined}
+        archiveShortcutKeys={selected ? archiveShortcutKeys : null}
+      />
+      <AdaptiveRenameModal
+        visible={isRenameOpen}
+        title="Rename workspace"
+        initialValue={workspace.name}
+        placeholder="branch-name"
+        submitLabel="Rename"
+        validate={validateRenameSlug}
+        maxLength={MAX_SLUG_LENGTH}
+        onClose={handleCloseRename}
+        onSubmit={handleSubmitRename}
+        testID={`sidebar-workspace-rename-modal-${workspace.workspaceKey}`}
+      />
+    </>
+  );
+}
+
+function StatusWorkspaceRowInner({
+  workspace,
+  projectName,
+  selected,
+  shortcutNumber,
+  showShortcutBadge,
+  onPress,
+  isArchiving,
+  archiveLabel,
+  archiveStatus = "idle",
+  archivePendingLabel,
+  onArchive,
+  onCopyBranchName,
+  onCopyPath,
+  onRename,
+  onMarkAsRead,
+  archiveShortcutKeys,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  projectName: string;
+  selected: boolean;
+  shortcutNumber: number | null;
+  showShortcutBadge: boolean;
+  onPress: () => void;
+  isArchiving: boolean;
+  archiveLabel?: string;
+  archiveStatus?: "idle" | "pending" | "success";
+  archivePendingLabel?: string;
+  onArchive?: () => void;
+  onCopyBranchName?: () => void;
+  onCopyPath?: () => void;
+  onRename?: () => void;
+  onMarkAsRead?: () => void;
+  archiveShortcutKeys?: ShortcutKey[][] | null;
+}) {
+  const isTouchPlatform = platformIsNative;
+
+  const isDesktop = !isTouchPlatform;
+  const showScriptsIcon = isDesktop && workspace.hasRunningScripts;
+  const hasRunningService = workspace.scripts.some(
+    (s) => s.lifecycle === "running" && (s.type ?? "service") === "service",
+  );
+  let scriptIconKind: "service" | "command" | null = null;
+  if (showScriptsIcon) {
+    scriptIconKind = hasRunningService ? "service" : "command";
+  }
+
+  const accessibilityState = useMemo(() => ({ selected }), [selected]);
+
+  return (
+    <SidebarWorkspaceRowFrame workspace={workspace}>
+      {({ isHovered, hoverHandlers }) => {
+        const showShortcut = showShortcutBadge && shortcutNumber !== null;
+        const showKebab = Boolean(onArchive && (isHovered || isTouchPlatform));
+        const showKebabInSlot = showKebab && !showShortcut;
+        const shouldRenderActionSlot = Boolean(onArchive || workspace.diffStat);
+        const workspaceRowStyle = getStatusWorkspaceRowStyle({ selected, isHovered });
+        return (
+          <View style={styles.workspaceRowContainer} {...hoverHandlers}>
+            <Pressable
+              disabled={isArchiving}
+              accessibilityRole="button"
+              accessibilityState={accessibilityState}
+              style={workspaceRowStyle}
+              onPress={onPress}
+              testID={`sidebar-workspace-row-${workspace.workspaceKey}`}
+            >
+              <SidebarWorkspaceRowContent
+                workspace={workspace}
+                subtitle={projectName}
+                scriptIconKind={scriptIconKind}
+                isHovered={isHovered}
+                isLoading={isArchiving}
+                shortcutNumber={shortcutNumber}
+                showShortcutBadge={showShortcutBadge}
+              >
+                {shouldRenderActionSlot ? (
+                  <StatusWorkspaceActionSlot
+                    workspace={workspace}
+                    showBase={Boolean(workspace.diffStat && !showKebabInSlot && !showShortcut)}
+                    showOverlay={showKebabInSlot}
+                    onCopyPath={onCopyPath}
+                    onCopyBranchName={onCopyBranchName}
+                    onRename={onRename}
+                    onMarkAsRead={onMarkAsRead}
+                    onArchive={onArchive}
+                    archiveLabel={archiveLabel}
+                    archiveStatus={archiveStatus}
+                    archivePendingLabel={archivePendingLabel}
+                    archiveShortcutKeys={archiveShortcutKeys}
+                  />
+                ) : null}
+              </SidebarWorkspaceRowContent>
+            </Pressable>
+          </View>
+        );
+      }}
+    </SidebarWorkspaceRowFrame>
+  );
+}
+
+function StatusWorkspaceActionSlot({
+  workspace,
+  showBase,
+  showOverlay,
+  onCopyPath,
+  onCopyBranchName,
+  onRename,
+  onMarkAsRead,
+  onArchive,
+  archiveLabel,
+  archiveStatus,
+  archivePendingLabel,
+  archiveShortcutKeys,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  showBase: boolean;
+  showOverlay: boolean;
+  onCopyPath?: () => void;
+  onCopyBranchName?: () => void;
+  onRename?: () => void;
+  onMarkAsRead?: () => void;
+  onArchive?: () => void;
+  archiveLabel?: string;
+  archiveStatus?: "idle" | "pending" | "success";
+  archivePendingLabel?: string;
+  archiveShortcutKeys?: ShortcutKey[][] | null;
+}) {
+  return (
+    <SidebarWorkspaceTrailingActionSlot>
+      <SidebarWorkspaceTrailingActionBase visible={showBase}>
+        {workspace.diffStat ? (
+          <DiffStat
+            additions={workspace.diffStat.additions}
+            deletions={workspace.diffStat.deletions}
+          />
+        ) : null}
+      </SidebarWorkspaceTrailingActionBase>
+      <SidebarWorkspaceTrailingActionOverlay visible={showOverlay}>
+        {onArchive ? (
+          <StatusKebabMenu
+            workspaceKey={workspace.workspaceKey}
+            onCopyPath={onCopyPath}
+            onCopyBranchName={onCopyBranchName}
+            onRename={onRename}
+            onMarkAsRead={onMarkAsRead}
+            onArchive={onArchive}
+            archiveLabel={archiveLabel}
+            archiveStatus={archiveStatus}
+            archivePendingLabel={archivePendingLabel}
+            archiveShortcutKeys={archiveShortcutKeys}
+          />
+        ) : null}
+      </SidebarWorkspaceTrailingActionOverlay>
+    </SidebarWorkspaceTrailingActionSlot>
+  );
+}
+
+function StatusKebabMenu({
+  workspaceKey,
+  onCopyPath,
+  onCopyBranchName,
+  onRename,
+  onMarkAsRead,
+  onArchive,
+  archiveLabel,
+  archiveStatus,
+  archivePendingLabel,
+  archiveShortcutKeys,
+}: {
+  workspaceKey: string;
+  onCopyPath?: () => void;
+  onCopyBranchName?: () => void;
+  onRename?: () => void;
+  onMarkAsRead?: () => void;
+  onArchive: () => void;
+  archiveLabel?: string;
+  archiveStatus?: "idle" | "pending" | "success";
+  archivePendingLabel?: string;
+  archiveShortcutKeys?: ShortcutKey[][] | null;
+}) {
+  const archiveTrailing = useMemo(
+    () => (archiveShortcutKeys ? <Shortcut chord={archiveShortcutKeys} /> : null),
+    [archiveShortcutKeys],
+  );
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        hitSlop={8}
+        style={kebabStyle}
+        accessibilityRole={platformIsWeb ? undefined : "button"}
+        accessibilityLabel="Workspace actions"
+        testID={`sidebar-workspace-kebab-${workspaceKey}`}
+      >
+        {({ hovered }: { hovered?: boolean }) => (
+          <ThemedMoreVertical
+            size={14}
+            uniProps={hovered ? foregroundColorMapping : foregroundMutedColorMapping}
+          />
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" width={260}>
+        {onCopyPath ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-copy-path-${workspaceKey}`}
+            leading={copyLeadingIcon}
+            onSelect={onCopyPath}
+          >
+            Copy path
+          </DropdownMenuItem>
+        ) : null}
+        {onCopyBranchName ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-copy-branch-name-${workspaceKey}`}
+            leading={copyLeadingIcon}
+            onSelect={onCopyBranchName}
+          >
+            Copy branch name
+          </DropdownMenuItem>
+        ) : null}
+        {onRename ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-rename-${workspaceKey}`}
+            leading={renameLeadingIcon}
+            onSelect={onRename}
+          >
+            Rename workspace
+          </DropdownMenuItem>
+        ) : null}
+        {onMarkAsRead ? (
+          <DropdownMenuItem
+            testID={`sidebar-workspace-menu-mark-as-read-${workspaceKey}`}
+            leading={markAsReadLeadingIcon}
+            onSelect={onMarkAsRead}
+          >
+            Mark as read
+          </DropdownMenuItem>
+        ) : null}
+        <DropdownMenuItem
+          testID={`sidebar-workspace-menu-archive-${workspaceKey}`}
+          leading={archiveLeadingIcon}
+          trailing={archiveTrailing}
+          status={archiveStatus}
+          pendingLabel={archivePendingLabel}
+          onSelect={onArchive}
+        >
+          {archiveLabel ?? "Archive"}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function kebabStyle({ hovered = false }: PressableStateCallbackType & { hovered?: boolean }) {
+  return [styles.kebabButton, hovered && styles.kebabButtonHovered];
+}
+
+function getStatusWorkspaceRowStyle({
+  selected,
+  isHovered,
+}: {
+  selected: boolean;
+  isHovered: boolean;
+}) {
+  return [
+    styles.workspaceRow,
+    selected && styles.sidebarRowSelected,
+    isHovered && styles.workspaceRowHovered,
+  ];
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    paddingHorizontal: theme.spacing[2],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[4],
+  },
+  statusGroupBlock: {
+    marginBottom: theme.spacing[1],
+  },
+  statusWorkspaceListContainer: {},
+  statusGroupRow: {
+    minHeight: 36,
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    marginBottom: theme.spacing[2],
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+    userSelect: "none",
+  },
+  statusGroupRowHovered: {
+    backgroundColor: theme.colors.surfaceSidebarHover,
+  },
+  statusGroupRowPressed: {
+    backgroundColor: theme.colors.surface2,
+  },
+  statusGroupRowLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    flex: 1,
+    minWidth: 0,
+  },
+  statusGroupLeadingVisualSlot: {
+    position: "relative",
+    width: theme.iconSize.md,
+    height: theme.iconSize.md,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  statusGroupTitleGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    flex: 1,
+    minWidth: 0,
+  },
+  statusGroupTitle: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: "400",
+    minWidth: 0,
+    flexShrink: 1,
+  },
+  workspaceRowContainer: {
+    position: "relative",
+  },
+  workspaceRow: {
+    minHeight: 36,
+    marginBottom: theme.spacing[1],
+    paddingVertical: theme.spacing[2],
+    paddingLeft: theme.spacing[3] + theme.spacing[3],
+    paddingRight: theme.spacing[3],
+    borderRadius: theme.borderRadius.lg,
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    gap: theme.spacing[1],
+    userSelect: "none",
+  },
+  workspaceRowHovered: {
+    backgroundColor: theme.colors.surfaceSidebarHover,
+  },
+  workspaceRowPressed: {
+    backgroundColor: theme.colors.surface2,
+  },
+  sidebarRowSelected: {
+    backgroundColor: theme.colors.surfaceSidebarHover,
+  },
+  kebabButton: {
+    padding: 2,
+    borderRadius: 4,
+    marginLeft: 2,
+  },
+  kebabButtonHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+}));

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

@@ -0,0 +1,550 @@
+import { memo, useCallback, useMemo, useState, type ReactNode } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type ViewStyle,
+} from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  CircleAlert,
+  ExternalLink,
+  Folder,
+  FolderGit2,
+  GitPullRequest,
+  Globe,
+  Monitor,
+  SquareTerminal,
+} from "lucide-react-native";
+import { GitHubIcon } from "@/components/icons/github-icon";
+import { WorkspaceHoverCard } from "@/components/workspace-hover-card";
+import { SyncedLoader } from "@/components/synced-loader";
+import type { SidebarWorkspaceEntry } from "@/hooks/use-sidebar-workspaces-list";
+import type { Theme } from "@/styles/theme";
+import type { PrHint } from "@/git/use-pr-status-query";
+import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
+import { isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
+import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
+import { openExternalUrl } from "@/utils/open-external-url";
+
+const WORKSPACE_STATUS_DOT_WIDTH = 14;
+const DEFAULT_STATUS_DOT_SIZE = 7;
+const EMPHASIZED_STATUS_DOT_SIZE = 9;
+const DEFAULT_STATUS_DOT_OFFSET = 0;
+const EMPHASIZED_STATUS_DOT_OFFSET = -1;
+
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const amberColorMapping = (theme: Theme) => ({ color: theme.colors.palette.amber[500] });
+const syncedLoaderColorMapping = (theme: Theme) => ({
+  color:
+    theme.colorScheme === "light"
+      ? theme.colors.palette.amber[700]
+      : theme.colors.palette.amber[500],
+});
+const blueColorMapping = (theme: Theme) => ({ color: theme.colors.palette.blue[500] });
+const greenColorMapping = (theme: Theme) => ({ color: theme.colors.palette.green[500] });
+const redColorMapping = (theme: Theme) => ({ color: theme.colors.palette.red[500] });
+const purpleColorMapping = (theme: Theme) => ({ color: theme.colors.palette.purple[500] });
+
+const ThemedExternalLink = withUnistyles(ExternalLink);
+const ThemedGitPullRequest = withUnistyles(GitPullRequest);
+const ThemedGitHubIcon = withUnistyles(GitHubIcon);
+const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedCircleAlert = withUnistyles(CircleAlert);
+const ThemedSyncedLoader = withUnistyles(SyncedLoader);
+const ThemedMonitor = withUnistyles(Monitor);
+const ThemedFolder = withUnistyles(Folder);
+const ThemedFolderGit2 = withUnistyles(FolderGit2);
+const ThemedGlobe = withUnistyles(Globe);
+const ThemedSquareTerminal = withUnistyles(SquareTerminal);
+
+type SidebarWorkspaceScriptIconKind = "service" | "command";
+
+export function SidebarWorkspaceRowFrame({
+  workspace,
+  isDragging = false,
+  children,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  isDragging?: boolean;
+  children: (input: {
+    isHovered: boolean;
+    hoverHandlers: { onPointerEnter: () => void; onPointerLeave: () => void };
+  }) => ReactNode;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+  const handlePointerEnter = useCallback(() => setIsHovered(true), []);
+  const handlePointerLeave = useCallback(() => setIsHovered(false), []);
+  const hoverHandlers = useMemo(
+    () => ({ onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave }),
+    [handlePointerEnter, handlePointerLeave],
+  );
+
+  return (
+    <WorkspaceHoverCard workspace={workspace} prHint={workspace.prHint} isDragging={isDragging}>
+      {children({ isHovered, hoverHandlers })}
+    </WorkspaceHoverCard>
+  );
+}
+
+export const SidebarWorkspaceRowContent = memo(function SidebarWorkspaceRowContent({
+  workspace,
+  subtitle,
+  scriptIconKind = null,
+  isHovered,
+  isLoading,
+  isCreating = false,
+  shortcutNumber = null,
+  showShortcutBadge = false,
+  children,
+}: {
+  workspace: SidebarWorkspaceEntry;
+  subtitle?: string | null;
+  scriptIconKind?: SidebarWorkspaceScriptIconKind | null;
+  isHovered: boolean;
+  isLoading: boolean;
+  isCreating?: boolean;
+  shortcutNumber?: number | null;
+  showShortcutBadge?: boolean;
+  children?: ReactNode;
+}) {
+  const workspaceBranchTextStyle = useMemo(
+    () => [
+      styles.workspaceBranchText,
+      scriptIconKind ? styles.workspaceBranchTextWithAccessory : styles.workspaceBranchTextFlexible,
+      isHovered && styles.workspaceBranchTextHovered,
+      isCreating && styles.workspaceBranchTextCreating,
+    ],
+    [scriptIconKind, isHovered, isCreating],
+  );
+
+  return (
+    <View style={styles.workspaceRowContent}>
+      <View style={styles.workspaceRowMain}>
+        <View style={styles.workspaceRowLeft}>
+          <WorkspaceStatusIndicator
+            bucket={workspace.statusBucket}
+            workspaceKind={workspace.workspaceKind}
+            loading={isLoading}
+          />
+          <Text style={workspaceBranchTextStyle} numberOfLines={1}>
+            {workspace.name}
+          </Text>
+          {scriptIconKind ? <WorkspaceScriptIcon kind={scriptIconKind} /> : null}
+        </View>
+        <View style={styles.workspaceRowRight}>{children}</View>
+      </View>
+      {showShortcutBadge && shortcutNumber !== null ? (
+        <View style={styles.shortcutBadgeOverlay} pointerEvents="none">
+          <SidebarWorkspaceShortcutBadge number={shortcutNumber} />
+        </View>
+      ) : null}
+      {subtitle ? (
+        <Text style={styles.workspaceSubtitle} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      ) : null}
+      {workspace.prHint ? (
+        <View style={styles.workspacePrBadgeRow}>
+          <PrBadge hint={workspace.prHint} />
+          <ChecksBadge checks={workspace.prHint.checks} />
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+function WorkspaceScriptIcon({ kind }: { kind: SidebarWorkspaceScriptIconKind }) {
+  return (
+    <View
+      style={styles.workspaceTitleAccessory}
+      accessibilityLabel="Scripts available"
+      testID={kind === "service" ? "workspace-globe-icon" : "workspace-terminal-icon"}
+    >
+      {kind === "service" ? (
+        <ThemedGlobe size={12} uniProps={blueColorMapping} />
+      ) : (
+        <ThemedSquareTerminal size={12} uniProps={blueColorMapping} />
+      )}
+    </View>
+  );
+}
+
+function WorkspaceStatusIndicator({
+  bucket,
+  workspaceKind,
+  loading = false,
+}: {
+  bucket: SidebarWorkspaceEntry["statusBucket"];
+  workspaceKind: SidebarWorkspaceEntry["workspaceKind"];
+  loading?: boolean;
+}) {
+  const shouldShowSyncedLoader = shouldRenderSyncedStatusLoader({ bucket });
+
+  if (loading) {
+    return (
+      <View style={styles.workspaceStatusDot} testID="workspace-status-indicator-loading">
+        <ThemedActivityIndicator size={8} uniProps={foregroundMutedColorMapping} />
+      </View>
+    );
+  }
+
+  if (shouldShowSyncedLoader) {
+    return (
+      <View style={styles.workspaceStatusDot} testID="workspace-status-indicator-running">
+        <ThemedSyncedLoader size={11} uniProps={syncedLoaderColorMapping} />
+      </View>
+    );
+  }
+
+  if (bucket === "needs_input") {
+    return (
+      <View style={styles.workspaceStatusDot}>
+        <ThemedCircleAlert size={14} uniProps={amberColorMapping} />
+      </View>
+    );
+  }
+
+  let KindIcon: typeof ThemedMonitor;
+  if (workspaceKind === "local_checkout") KindIcon = ThemedMonitor;
+  else if (workspaceKind === "worktree") KindIcon = ThemedFolderGit2;
+  else KindIcon = ThemedFolder;
+
+  const dotColorStyle = getStatusDotColorStyle(bucket);
+  const statusDotSize = isEmphasizedStatusDotBucket(bucket)
+    ? EMPHASIZED_STATUS_DOT_SIZE
+    : DEFAULT_STATUS_DOT_SIZE;
+  const statusDotOffset =
+    statusDotSize === EMPHASIZED_STATUS_DOT_SIZE
+      ? EMPHASIZED_STATUS_DOT_OFFSET
+      : DEFAULT_STATUS_DOT_OFFSET;
+  return (
+    <View style={styles.workspaceStatusDot}>
+      <KindIcon size={14} uniProps={foregroundMutedColorMapping} />
+      {dotColorStyle ? (
+        <StatusDotOverlay
+          dotColorStyle={dotColorStyle}
+          size={statusDotSize}
+          offset={statusDotOffset}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+function StatusDotOverlay({
+  dotColorStyle,
+  size,
+  offset,
+}: {
+  dotColorStyle: ViewStyle;
+  size: number;
+  offset: number;
+}) {
+  const overlayStyle = useMemo(
+    () => [
+      styles.statusDotOverlay,
+      dotColorStyle,
+      {
+        width: size,
+        height: size,
+        right: offset,
+        bottom: offset,
+      },
+    ],
+    [dotColorStyle, offset, size],
+  );
+  return <View style={overlayStyle} />;
+}
+
+function PrBadge({ hint }: { hint: PrHint }) {
+  const [isHovered, setIsHovered] = useState(false);
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      event.stopPropagation();
+      void openExternalUrl(hint.url);
+    },
+    [hint.url],
+  );
+  const textStyle = useMemo(
+    () => (isHovered ? [prBadgeStyles.text, prBadgeStyles.textHovered] : prBadgeStyles.text),
+    [isHovered],
+  );
+  const iconUniProps = isHovered ? foregroundColorMapping : getPrIconUniMapping(hint.state);
+
+  const handlePressIn = useCallback((event: GestureResponderEvent) => event.stopPropagation(), []);
+  const handleHoverIn = useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = useCallback(() => setIsHovered(false), []);
+
+  const pressableStyle = useMemo(
+    () => [prBadgeStyles.badge, isHovered && prBadgeStyles.badgePressed],
+    [isHovered],
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={`Pull request #${hint.number}`}
+      hitSlop={4}
+      onPressIn={handlePressIn}
+      onPress={handlePress}
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      style={pressableStyle}
+    >
+      {isHovered ? (
+        <ThemedExternalLink size={12} uniProps={iconUniProps} />
+      ) : (
+        <ThemedGitPullRequest size={12} uniProps={iconUniProps} />
+      )}
+      <Text style={textStyle} numberOfLines={1}>
+        #{hint.number}
+      </Text>
+    </Pressable>
+  );
+}
+
+function ChecksBadge({ checks }: { checks: PrHint["checks"] }) {
+  if (!checks || checks.length === 0) return null;
+  const failed = checks.filter((check) => check.status === "failure").length;
+  if (failed === 0) return null;
+  return (
+    <View style={checksBadgeStyles.badge}>
+      <ThemedGitHubIcon size={10} uniProps={redColorMapping} />
+      <Text style={checksBadgeStyles.text}>{failed} failed</Text>
+    </View>
+  );
+}
+
+function getPrIconUniMapping(state: PrHint["state"]) {
+  switch (state) {
+    case "merged":
+      return purpleColorMapping;
+    case "open":
+      return greenColorMapping;
+    case "closed":
+      return redColorMapping;
+  }
+}
+
+function getStatusDotColorStyle(bucket: SidebarStateBucket) {
+  switch (bucket) {
+    case "needs_input":
+      return styles.statusDotNeedsInput;
+    case "failed":
+      return styles.statusDotFailed;
+    case "running":
+      return styles.statusDotRunning;
+    case "attention":
+      return styles.statusDotAttention;
+    case "done":
+      return null;
+  }
+}
+
+const prBadgeStyles = StyleSheet.create((theme) => ({
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+  },
+  badgePressed: {
+    opacity: 0.82,
+  },
+  text: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    lineHeight: 14,
+    color: theme.colors.foregroundMuted,
+  },
+  textHovered: {
+    color: theme.colors.foreground,
+  },
+}));
+
+const checksBadgeStyles = StyleSheet.create((theme) => ({
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+  },
+  text: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    lineHeight: 14,
+    color: theme.colors.palette.red[500],
+  },
+}));
+
+export const sidebarWorkspaceRowStyles = StyleSheet.create((theme) => ({
+  rowRight: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.spacing[2],
+    flexShrink: 0,
+  },
+  shortcutBadge: {
+    minWidth: 18,
+    height: 18,
+    paddingHorizontal: theme.spacing[1],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.borderRadius.sm,
+    borderWidth: 1,
+    borderColor: theme.colors.surface2,
+    backgroundColor: theme.colors.surface0,
+    flexShrink: 0,
+  },
+  shortcutBadgeText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    lineHeight: 14,
+  },
+  hidden: { opacity: 0 },
+  trailingActionSlot: {
+    position: "relative",
+    minWidth: 18,
+    minHeight: 20,
+    flexShrink: 0,
+    alignItems: "flex-end",
+    justifyContent: "flex-start",
+  },
+  trailingActionOverlay: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+  },
+}));
+
+export function SidebarWorkspaceShortcutBadge({ number }: { number: number }) {
+  return (
+    <View style={sidebarWorkspaceRowStyles.shortcutBadge}>
+      <Text style={sidebarWorkspaceRowStyles.shortcutBadgeText}>{number}</Text>
+    </View>
+  );
+}
+
+export function SidebarWorkspaceTrailingActionSlot({ children }: { children: ReactNode }) {
+  return <View style={sidebarWorkspaceRowStyles.trailingActionSlot}>{children}</View>;
+}
+
+export function SidebarWorkspaceTrailingActionBase({
+  visible,
+  children,
+}: {
+  visible: boolean;
+  children: ReactNode;
+}) {
+  if (!children) return null;
+  return <View style={visible ? undefined : sidebarWorkspaceRowStyles.hidden}>{children}</View>;
+}
+
+export function SidebarWorkspaceTrailingActionOverlay({
+  visible,
+  children,
+}: {
+  visible: boolean;
+  children: ReactNode;
+}) {
+  if (!visible || !children) return null;
+  return <View style={sidebarWorkspaceRowStyles.trailingActionOverlay}>{children}</View>;
+}
+
+const styles = StyleSheet.create((theme) => ({
+  workspaceRowContent: {
+    position: "relative",
+  },
+  workspaceRowMain: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: theme.spacing[2],
+    width: "100%",
+  },
+  workspaceRowLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    flex: 1,
+    minWidth: 0,
+  },
+  workspaceRowRight: sidebarWorkspaceRowStyles.rowRight,
+  shortcutBadgeOverlay: {
+    position: "absolute",
+    top: 1,
+    right: 0,
+  },
+  workspaceStatusDot: {
+    position: "relative",
+    width: WORKSPACE_STATUS_DOT_WIDTH,
+    height: 20,
+    borderRadius: theme.borderRadius.full,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  statusDotOverlay: {
+    position: "absolute",
+    borderRadius: theme.borderRadius.full,
+    borderWidth: 1,
+  },
+  workspaceBranchText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: "400",
+    lineHeight: 20,
+    opacity: 0.76,
+    minWidth: 0,
+  },
+  workspaceBranchTextFlexible: {
+    flex: 1,
+  },
+  workspaceBranchTextWithAccessory: {
+    flexShrink: 1,
+  },
+  workspaceTitleAccessory: {
+    height: 20,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  workspaceBranchTextCreating: {
+    opacity: 0.92,
+  },
+  workspaceBranchTextHovered: {
+    opacity: 1,
+  },
+  workspaceSubtitle: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    lineHeight: 14,
+    marginLeft: WORKSPACE_STATUS_DOT_WIDTH + theme.spacing[2],
+  },
+  workspacePrBadgeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    marginTop: theme.spacing[1],
+    paddingLeft: WORKSPACE_STATUS_DOT_WIDTH + theme.spacing[2],
+  },
+  statusDotNeedsInput: {
+    backgroundColor: theme.colors.palette.amber[500],
+    borderColor: theme.colors.surface0,
+  },
+  statusDotFailed: {
+    backgroundColor: theme.colors.palette.red[500],
+    borderColor: theme.colors.surface0,
+  },
+  statusDotRunning: {
+    backgroundColor: theme.colors.palette.blue[500],
+    borderColor: theme.colors.surface0,
+  },
+  statusDotAttention: {
+    backgroundColor: theme.colors.palette.green[500],
+    borderColor: theme.colors.surface0,
+  },
+}));

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

@@ -59,6 +59,7 @@ import {
   type SheetHeader,
 } from "@/components/adaptive-modal-sheet";
 import { FloatingSurface } from "@/components/ui/floating";
+import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
 
 const IS_WEB = isWeb;
 
@@ -1022,7 +1023,7 @@ function MobileComboboxBody(props: MobileBodyProps): ReactElement {
       backgroundComponent={ComboboxSheetBackground}
       handleIndicatorStyle={props.handleIndicatorStyle}
       keyboardBehavior="extend"
-      keyboardBlurBehavior="restore"
+      keyboardBlurBehavior="none"
     >
       {props.header ? (
         <SheetHeaderView header={props.header} onClose={props.onClose} />
@@ -1482,6 +1483,7 @@ export function Combobox({
   );
 
   useWebKeyboardListener(isOpen, handleDesktopKey);
+  useDismissKeyboardOnOpen(isOpen, isMobile);
 
   const handleIndicatorStyle = useMemo(
     () => ({ backgroundColor: theme.colors.palette.zinc[600] }),

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

@@ -32,6 +32,7 @@ import { FloatingScrollView, FloatingSurface } from "@/components/ui/floating";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useWebScrollbarStyle } from "@/hooks/use-web-scrollbar-style";
 import { isWeb } from "@/constants/platform";
+import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
 
 // Action status for menu items with loading/success feedback
 export type ActionStatus = "idle" | "pending" | "success";
@@ -244,6 +245,7 @@ export function DropdownMenu({
     defaultOpen,
     onOpenChange,
   });
+  useDismissKeyboardOnOpen(isOpen);
 
   const flushPendingSelect = useCallback(() => {
     const pendingSelect = pendingSelectRef.current;

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

@@ -21,9 +21,12 @@ export const FloatingSurface = forwardRef<View, FloatingSurfaceProps>(function F
 ): ReactElement {
   const inlineFrameStyle = useMemo(() => {
     const flattened = StyleSheet.flatten(frameStyle);
-    return flattened ? inlineUnistylesStyle(flattened) : undefined;
+    return flattened ? inlineUnistylesStyle(stripUnistylesMetadata(flattened)) : undefined;
   }, [frameStyle]);
-  const surfaceStyle = useMemo(() => [style, inlineFrameStyle], [inlineFrameStyle, style]);
+  const surfaceStyle = useMemo(
+    () => appendStyle(style, inlineFrameStyle),
+    [inlineFrameStyle, style],
+  );
   return <Animated.View {...props} ref={ref} style={surfaceStyle} />;
 });
 
@@ -46,7 +49,7 @@ export function FloatingScrollView({
 }: FloatingScrollViewProps): ReactElement {
   const inlineStyle = useMemo(() => {
     const flattened = StyleSheet.flatten(style);
-    return flattened ? inlineUnistylesStyle(flattened) : undefined;
+    return flattened ? inlineUnistylesStyle(stripUnistylesMetadata(flattened)) : undefined;
   }, [style]);
 
   return (
@@ -61,3 +64,26 @@ export function FloatingScrollView({
     </ScrollView>
   );
 }
+
+function appendStyle(
+  style: StyleProp<ViewStyle>,
+  extraStyle: ViewStyle | undefined,
+): StyleProp<ViewStyle> {
+  if (!extraStyle) {
+    return style;
+  }
+  if (Array.isArray(style)) {
+    return [...style, extraStyle];
+  }
+  return [style, extraStyle];
+}
+
+function stripUnistylesMetadata(style: ViewStyle): ViewStyle {
+  const cleanStyle: Record<string, unknown> = { ...style };
+  for (const key of Object.keys(cleanStyle)) {
+    if (key.startsWith("unistyles_")) {
+      delete cleanStyle[key];
+    }
+  }
+  return cleanStyle as ViewStyle;
+}

packages/app/src/components/ui/keyboard-dismiss.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { Keyboard } from "react-native";
+
+export function useDismissKeyboardOnOpen(isOpen: boolean, enabled = true) {
+  useEffect(() => {
+    if (!enabled || !isOpen) return;
+
+    Keyboard.dismiss();
+    const frame = requestAnimationFrame(() => Keyboard.dismiss());
+    const timer = setTimeout(() => Keyboard.dismiss(), 150);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
+  }, [enabled, isOpen]);
+}

packages/app/src/components/ui/switch.test.tsx

@@ -10,6 +10,7 @@ const { theme } = vi.hoisted(() => ({
     colors: {
       surface3: "#333",
       accent: "#0a84ff",
+      accentForeground: "#fff",
       palette: { white: "#fff" },
     },
   },

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

@@ -53,6 +53,11 @@ export function Switch({
   }));
 
   const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(
+      progress.value,
+      [0, 1],
+      [theme.colors.palette.white, theme.colors.accentForeground],
+    ),
     transform: [{ translateX: progress.value * thumbTravel }],
   }));
 
@@ -116,7 +121,6 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
   },
   thumb: {
-    backgroundColor: theme.colors.palette.white,
     shadowColor: "rgba(0, 0, 0, 0.25)",
     shadowOffset: { width: 0, height: 1 },
     shadowRadius: 2,

packages/app/src/components/workspace-shortcut-targets-subscriber.test.tsx

@@ -10,6 +10,7 @@ import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { useSessionStore, type WorkspaceDescriptor } from "@/stores/session-store";
 import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
+import { useSidebarViewStore } from "@/stores/sidebar-view-store";
 import { WorkspaceShortcutTargetsSubscriber } from "./workspace-shortcut-targets-subscriber";
 
 vi.hoisted(() => {
@@ -20,18 +21,22 @@ function workspaceDescriptor(input: {
   id: string;
   name?: string;
   projectId?: string;
+  projectDisplayName?: string;
+  status?: WorkspaceDescriptor["status"];
+  statusEnteredAt?: Date | null;
 }): WorkspaceDescriptor {
   return {
     id: input.id,
     projectId: input.projectId ?? "project-1",
-    projectDisplayName: "Project 1",
+    projectDisplayName: input.projectDisplayName ?? "Project 1",
     projectRootPath: "/repo/main",
     workspaceDirectory: `/repo/main/${input.id}`,
     projectKind: "git",
     workspaceKind: "worktree",
     name: input.name ?? input.id,
-    status: "done",
+    status: input.status ?? "done",
     archivingAt: null,
+    statusEnteredAt: input.statusEnteredAt ?? null,
     diffStat: null,
     scripts: [],
   };
@@ -56,6 +61,9 @@ describe("WorkspaceShortcutTargetsSubscriber", () => {
       projectOrderByServerId: {},
       workspaceOrderByServerAndProject: {},
     });
+    useSidebarViewStore.setState({
+      groupModeByServerId: {},
+    });
 
     act(() => {
       useSessionStore.getState().initializeSession("srv", null as unknown as DaemonClient);
@@ -95,6 +103,72 @@ describe("WorkspaceShortcutTargetsSubscriber", () => {
     ]);
   });
 
+  it("publishes status-mode shortcut targets in visual status order", async () => {
+    act(() => {
+      useSidebarViewStore.getState().setGroupMode("srv", "status");
+      useSessionStore.getState().setWorkspaces(
+        "srv",
+        new Map([
+          [
+            "ws-done",
+            workspaceDescriptor({
+              id: "ws-done",
+              name: "Done",
+              projectId: "project-1",
+              projectDisplayName: "Project 1",
+              status: "done",
+              statusEnteredAt: new Date("2026-01-01T00:00:00.000Z"),
+            }),
+          ],
+          [
+            "ws-running-old",
+            workspaceDescriptor({
+              id: "ws-running-old",
+              name: "Running old",
+              projectId: "project-2",
+              projectDisplayName: "Project 2",
+              status: "running",
+              statusEnteredAt: new Date("2026-02-01T00:00:00.000Z"),
+            }),
+          ],
+          [
+            "ws-needs-input",
+            workspaceDescriptor({
+              id: "ws-needs-input",
+              name: "Needs input",
+              projectId: "project-1",
+              projectDisplayName: "Project 1",
+              status: "needs_input",
+              statusEnteredAt: new Date("2026-01-15T00:00:00.000Z"),
+            }),
+          ],
+          [
+            "ws-running-new",
+            workspaceDescriptor({
+              id: "ws-running-new",
+              name: "Running new",
+              projectId: "project-2",
+              projectDisplayName: "Project 2",
+              status: "running",
+              statusEnteredAt: new Date("2026-03-01T00:00:00.000Z"),
+            }),
+          ],
+        ]),
+      );
+    });
+
+    await act(async () => {
+      root?.render(<WorkspaceShortcutTargetsSubscriber enabled={true} serverId="srv" />);
+    });
+
+    expect(useKeyboardShortcutsStore.getState().sidebarShortcutWorkspaceTargets).toEqual([
+      { serverId: "srv", workspaceId: "ws-needs-input" },
+      { serverId: "srv", workspaceId: "ws-running-new" },
+      { serverId: "srv", workspaceId: "ws-running-old" },
+      { serverId: "srv", workspaceId: "ws-done" },
+    ]);
+  });
+
   it("clears targets when disabled", async () => {
     await act(async () => {
       root?.render(<WorkspaceShortcutTargetsSubscriber enabled={true} serverId="srv" />);

packages/app/src/components/workspace-shortcut-targets-subscriber.tsx

@@ -1,8 +1,16 @@
 import { useEffect, useMemo } from "react";
+import {
+  useProjectNamesMap,
+  useStatusModeWorkspaceEntries,
+} from "@/hooks/use-status-mode-workspaces";
 import { useSidebarWorkspacesList } from "@/hooks/use-sidebar-workspaces-list";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { useSidebarCollapsedSectionsStore } from "@/stores/sidebar-collapsed-sections-store";
-import { buildSidebarShortcutModel } from "@/utils/sidebar-shortcuts";
+import { useSidebarViewStore } from "@/stores/sidebar-view-store";
+import {
+  buildSidebarShortcutModel,
+  buildStatusSidebarShortcutModel,
+} from "@/utils/sidebar-shortcuts";
 
 export function WorkspaceShortcutTargetsSubscriber({
   enabled,
@@ -12,21 +20,45 @@ export function WorkspaceShortcutTargetsSubscriber({
   serverId: string | null;
 }) {
   const { projects } = useSidebarWorkspacesList({ serverId, enabled });
+  const statusWorkspaces = useStatusModeWorkspaceEntries({
+    serverId: enabled ? serverId : null,
+    projects,
+  });
+  const projectNamesByKey = useProjectNamesMap(enabled ? serverId : null);
+  const groupMode = useSidebarViewStore((state) =>
+    enabled && serverId ? state.getGroupMode(serverId) : "project",
+  );
   const collapsedProjectKeys = useSidebarCollapsedSectionsStore(
     (state) => state.collapsedProjectKeys,
   );
+  const collapsedStatusGroupKeys = useSidebarCollapsedSectionsStore(
+    (state) => state.collapsedStatusGroupKeys,
+  );
   const setSidebarShortcutWorkspaceTargets = useKeyboardShortcutsStore(
     (state) => state.setSidebarShortcutWorkspaceTargets,
   );
 
-  const shortcutModel = useMemo(
-    () =>
-      buildSidebarShortcutModel({
-        projects,
-        collapsedProjectKeys,
-      }),
-    [collapsedProjectKeys, projects],
-  );
+  const shortcutModel = useMemo(() => {
+    if (groupMode === "status") {
+      return buildStatusSidebarShortcutModel({
+        workspaces: statusWorkspaces,
+        projectNamesByKey,
+        collapsedStatusGroupKeys,
+      });
+    }
+
+    return buildSidebarShortcutModel({
+      projects,
+      collapsedProjectKeys,
+    });
+  }, [
+    collapsedProjectKeys,
+    collapsedStatusGroupKeys,
+    groupMode,
+    projectNamesByKey,
+    projects,
+    statusWorkspaces,
+  ]);
 
   useEffect(() => {
     if (!enabled || !serverId) {

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

@@ -2,6 +2,8 @@ import {
   View,
   Text,
   TextInput,
+  Pressable,
+  Platform,
   ActivityIndicator,
   useWindowDimensions,
   NativeSyntheticEvent,
@@ -46,6 +48,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { AdaptiveModalSheet, type SheetHeader } from "@/components/adaptive-modal-sheet";
+import { useDismissKeyboardOnOpen } from "@/components/ui/keyboard-dismiss";
 import { useWebElementScrollbar } from "@/components/use-web-scrollbar";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useIosHardwareKeyboardSubmit } from "@/hooks/use-ios-hardware-keyboard-submit";
@@ -138,6 +142,8 @@ const MIN_INPUT_HEIGHT_DESKTOP = 46;
 const DEFAULT_MAX_INPUT_HEIGHT = 160;
 const MAX_INPUT_VIEWPORT_RATIO = 0.5;
 const MIN_INPUT_HEIGHT = isWeb ? MIN_INPUT_HEIGHT_DESKTOP : MIN_INPUT_HEIGHT_MOBILE;
+const ATTACHMENT_SHEET_HEADER: SheetHeader = { title: "Add attachment" };
+const ATTACHMENT_SHEET_SNAP_POINTS = ["34%", "45%"];
 
 type WebTextInputKeyPressEvent = NativeSyntheticEvent<
   TextInputKeyPressEventData & {
@@ -198,6 +204,55 @@ function AttachmentMenuList({ items }: { items: AttachmentMenuItem[] }) {
   );
 }
 
+function AttachmentSheetItem({
+  item,
+  onSelect,
+}: {
+  item: AttachmentMenuItem;
+  onSelect: (item: AttachmentMenuItem) => void;
+}) {
+  const handlePress = useCallback(() => {
+    onSelect(item);
+  }, [item, onSelect]);
+  const pressableStyle = useCallback(
+    ({ pressed }: { pressed: boolean }) => [
+      styles.attachmentSheetItem,
+      pressed && styles.attachmentSheetItemPressed,
+      item.disabled && styles.buttonDisabled,
+    ],
+    [item.disabled],
+  );
+
+  return (
+    <Pressable
+      testID={`message-input-attachment-menu-item-${item.id}`}
+      accessibilityRole="button"
+      disabled={item.disabled}
+      onPress={handlePress}
+      style={pressableStyle}
+    >
+      {item.icon ? <View style={styles.attachmentSheetItemIcon}>{item.icon}</View> : null}
+      <Text style={styles.attachmentSheetItemText}>{item.label}</Text>
+    </Pressable>
+  );
+}
+
+function AttachmentSheetList({
+  items,
+  onSelect,
+}: {
+  items: AttachmentMenuItem[];
+  onSelect: (item: AttachmentMenuItem) => void;
+}) {
+  return (
+    <View style={styles.attachmentSheetList}>
+      {items.map((item) => (
+        <AttachmentSheetItem key={item.id} item={item} onSelect={onSelect} />
+      ))}
+    </View>
+  );
+}
+
 function AttachmentDropdown({
   isConnected,
   disabled,
@@ -211,12 +266,73 @@ function AttachmentDropdown({
   renderAttachButtonIcon: (input: { hovered?: boolean }) => React.ReactElement;
   attachmentMenuItems: AttachmentMenuItem[];
 }) {
+  const isCompact = useIsCompactFormFactor();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  useDismissKeyboardOnOpen(isSheetOpen, isCompact);
+
+  const isButtonDisabled = !isConnected || disabled;
+  const handleOpenSheet = useCallback(() => {
+    if (isButtonDisabled) return;
+    setIsSheetOpen(true);
+  }, [isButtonDisabled]);
+  const handleCloseSheet = useCallback(() => {
+    setIsSheetOpen(false);
+  }, []);
+  const handleSheetItemSelect = useCallback((item: AttachmentMenuItem) => {
+    if (item.disabled) return;
+    setIsSheetOpen(false);
+    if (Platform.OS === "ios") {
+      setTimeout(item.onSelect, 250);
+      return;
+    }
+    item.onSelect();
+  }, []);
+  const mobileAttachButtonStyle = useCallback(
+    (state: { pressed: boolean; hovered?: boolean }) => {
+      if (typeof attachButtonStyle === "function") {
+        return attachButtonStyle({ ...state, hovered: Boolean(state.hovered), open: isSheetOpen });
+      }
+      return attachButtonStyle;
+    },
+    [attachButtonStyle, isSheetOpen],
+  );
+  const renderMobileAttachButtonIcon = useCallback(
+    ({ hovered }: { hovered?: boolean }) => renderAttachButtonIcon({ hovered }),
+    [renderAttachButtonIcon],
+  );
+
+  if (isCompact) {
+    return (
+      <>
+        <Pressable
+          disabled={isButtonDisabled}
+          accessibilityLabel="Add attachment"
+          accessibilityRole="button"
+          testID="message-input-attach-button"
+          onPress={handleOpenSheet}
+          style={mobileAttachButtonStyle}
+        >
+          {renderMobileAttachButtonIcon}
+        </Pressable>
+        <AdaptiveModalSheet
+          header={ATTACHMENT_SHEET_HEADER}
+          visible={isSheetOpen}
+          onClose={handleCloseSheet}
+          snapPoints={ATTACHMENT_SHEET_SNAP_POINTS}
+          testID="message-input-attachment-menu"
+        >
+          <AttachmentSheetList items={attachmentMenuItems} onSelect={handleSheetItemSelect} />
+        </AdaptiveModalSheet>
+      </>
+    );
+  }
+
   return (
     <DropdownMenu>
       <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
         <TooltipTrigger asChild>
           <DropdownMenuTrigger
-            disabled={!isConnected || disabled}
+            disabled={isButtonDisabled}
             accessibilityLabel="Add attachment"
             accessibilityRole="button"
             testID="message-input-attach-button"
@@ -1950,6 +2066,31 @@ const styles = StyleSheet.create((theme: Theme) => ({
   buttonDisabled: {
     opacity: 0.5,
   },
+  attachmentSheetList: {
+    gap: theme.spacing[1],
+  },
+  attachmentSheetItem: {
+    minHeight: 44,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[2],
+    borderRadius: theme.borderRadius.xl,
+  },
+  attachmentSheetItemPressed: {
+    backgroundColor: theme.colors.surface2,
+  },
+  attachmentSheetItemIcon: {
+    width: 20,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  attachmentSheetItemText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.normal,
+  },
   overlayContainer: {
     position: "absolute",
     display: "flex",

packages/app/src/contexts/explorer-sidebar-animation-context.tsx

@@ -11,6 +11,12 @@ import { useWindowDimensions } from "react-native";
 import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
 import { type GestureType } from "react-native-gesture-handler";
 import { useIsCompactFormFactor } from "@/constants/layout";
+import {
+  MOBILE_VISUAL_PANEL_AGENT,
+  MOBILE_VISUAL_PANEL_AGENT_LIST,
+  MOBILE_VISUAL_PANEL_FILE_EXPLORER,
+  useSidebarAnimation,
+} from "@/contexts/sidebar-animation-context";
 import { selectIsFileExplorerOpen, usePanelStore } from "@/stores/panel-store";
 import {
   getRightSidebarAnimationTargets,
@@ -35,9 +41,21 @@ const ExplorerSidebarAnimationContext = createContext<ExplorerSidebarAnimationCo
   null,
 );
 
+function getMobileVisualPanel(mobileView: "agent" | "agent-list" | "file-explorer"): number {
+  if (mobileView === "agent-list") {
+    return MOBILE_VISUAL_PANEL_AGENT_LIST;
+  }
+  if (mobileView === "file-explorer") {
+    return MOBILE_VISUAL_PANEL_FILE_EXPLORER;
+  }
+  return MOBILE_VISUAL_PANEL_AGENT;
+}
+
 export function ExplorerSidebarAnimationProvider({ children }: { children: ReactNode }) {
+  const { mobileVisualPanel } = useSidebarAnimation();
   const { width: windowWidth } = useWindowDimensions();
   const isCompactLayout = useIsCompactFormFactor();
+  const mobileView = usePanelStore((state) => state.mobileView);
   const isOpen = usePanelStore((state) =>
     selectIsFileExplorerOpen(state, { isCompact: isCompactLayout }),
   );
@@ -53,6 +71,7 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
 
   // Track previous isOpen to detect changes
   const prevIsOpen = useRef(isOpen);
+  const prevMobileView = useRef(mobileView);
   const prevWindowWidth = useRef(windowWidth);
 
   // Sync animation with store state changes (e.g., backdrop tap, programmatic open/close)
@@ -63,11 +82,13 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
       previousWindowWidth: prevWindowWidth.current,
       nextWindowWidth: windowWidth,
     });
+    const didMobileViewChange = prevMobileView.current !== mobileView;
     const previousIsOpen = prevIsOpen.current;
     prevIsOpen.current = isOpen;
+    prevMobileView.current = mobileView;
     prevWindowWidth.current = windowWidth;
 
-    if (!didStateChange) {
+    if (!didStateChange && !didMobileViewChange) {
       return;
     }
 
@@ -81,6 +102,10 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
       return;
     }
 
+    if (isCompactLayout) {
+      mobileVisualPanel.value = getMobileVisualPanel(mobileView);
+    }
+
     const targets = getRightSidebarAnimationTargets({ isOpen, windowWidth });
 
     if (previousIsOpen !== isOpen) {
@@ -97,7 +122,16 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
 
     translateX.value = targets.translateX;
     backdropOpacity.value = targets.backdropOpacity;
-  }, [isOpen, translateX, backdropOpacity, windowWidth, isGesturing]);
+  }, [
+    isOpen,
+    mobileView,
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    isGesturing,
+    isCompactLayout,
+    mobileVisualPanel,
+  ]);
 
   const animateToOpen = useCallback(() => {
     "worklet";

packages/app/src/contexts/session-context.service-status.test.ts

@@ -19,6 +19,7 @@ function workspace(input: {
     name: "main",
     status: "running",
     archivingAt: null,
+    statusEnteredAt: null,
     diffStat: null,
     scripts: input.scripts ?? [],
   };

packages/app/src/contexts/session-workspace-upserts.test.ts

@@ -18,6 +18,7 @@ const baseWorkspace: WorkspaceDescriptor = {
   name: "feature",
   status: "done",
   archivingAt: "2026-04-30T00:00:00.000Z",
+  statusEnteredAt: null,
   diffStat: null,
   scripts: [],
 };

packages/app/src/contexts/sidebar-animation-context.tsx

@@ -20,6 +20,9 @@ import {
 
 const ANIMATION_DURATION = 220;
 const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
+export const MOBILE_VISUAL_PANEL_AGENT = 0;
+export const MOBILE_VISUAL_PANEL_AGENT_LIST = 1;
+export const MOBILE_VISUAL_PANEL_FILE_EXPLORER = 2;
 
 interface SidebarAnimationContextValue {
   translateX: SharedValue<number>;
@@ -28,6 +31,7 @@ interface SidebarAnimationContextValue {
   animateToOpen: () => void;
   animateToClose: () => void;
   isGesturing: SharedValue<boolean>;
+  mobileVisualPanel: SharedValue<number>;
   gestureAnimatingRef: React.MutableRefObject<boolean>;
   openGestureRef: React.MutableRefObject<GestureType | undefined>;
   closeGestureRef: React.MutableRefObject<GestureType | undefined>;
@@ -35,9 +39,20 @@ interface SidebarAnimationContextValue {
 
 const SidebarAnimationContext = createContext<SidebarAnimationContextValue | null>(null);
 
+function getMobileVisualPanel(mobileView: "agent" | "agent-list" | "file-explorer"): number {
+  if (mobileView === "agent-list") {
+    return MOBILE_VISUAL_PANEL_AGENT_LIST;
+  }
+  if (mobileView === "file-explorer") {
+    return MOBILE_VISUAL_PANEL_FILE_EXPLORER;
+  }
+  return MOBILE_VISUAL_PANEL_AGENT;
+}
+
 export function SidebarAnimationProvider({ children }: { children: ReactNode }) {
   const { width: windowWidth } = useWindowDimensions();
   const isCompactLayout = useIsCompactFormFactor();
+  const mobileView = usePanelStore((state) => state.mobileView);
   const isOpen = usePanelStore((state) =>
     selectIsAgentListOpen(state, { isCompact: isCompactLayout }),
   );
@@ -47,12 +62,14 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
   const translateX = useSharedValue(initialTargets.translateX);
   const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
+  const mobileVisualPanel = useSharedValue(getMobileVisualPanel(mobileView));
   const gestureAnimatingRef = useRef(false);
   const openGestureRef = useRef<GestureType | undefined>(undefined);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
   const prevIsOpen = useRef(isOpen);
+  const prevMobileView = useRef(mobileView);
   const prevWindowWidth = useRef(windowWidth);
 
   // Sync animation with store state changes (e.g., backdrop tap, programmatic open/close)
@@ -63,12 +80,14 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       previousWindowWidth: prevWindowWidth.current,
       nextWindowWidth: windowWidth,
     });
+    const didMobileViewChange = prevMobileView.current !== mobileView;
     const previousIsOpen = prevIsOpen.current;
     prevIsOpen.current = isOpen;
+    prevMobileView.current = mobileView;
     prevWindowWidth.current = windowWidth;
     const didOpen = !previousIsOpen && isOpen;
 
-    if (!didStateChange) {
+    if (!didStateChange && !didMobileViewChange) {
       return;
     }
 
@@ -89,6 +108,10 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       return;
     }
 
+    if (isCompactLayout) {
+      mobileVisualPanel.value = getMobileVisualPanel(mobileView);
+    }
+
     const targets = getLeftSidebarAnimationTargets({ isOpen, windowWidth });
 
     if (previousIsOpen !== isOpen) {
@@ -105,7 +128,16 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
 
     translateX.value = targets.translateX;
     backdropOpacity.value = targets.backdropOpacity;
-  }, [isOpen, translateX, backdropOpacity, windowWidth, isGesturing, isCompactLayout]);
+  }, [
+    isOpen,
+    mobileView,
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    isGesturing,
+    isCompactLayout,
+    mobileVisualPanel,
+  ]);
 
   const animateToOpen = useCallback(() => {
     "worklet";
@@ -139,6 +171,7 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToOpen,
       animateToClose,
       isGesturing,
+      mobileVisualPanel,
       gestureAnimatingRef,
       openGestureRef,
       closeGestureRef,
@@ -150,6 +183,7 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToOpen,
       animateToClose,
       isGesturing,
+      mobileVisualPanel,
       gestureAnimatingRef,
       openGestureRef,
       closeGestureRef,

packages/app/src/data/acp-provider-catalog.ts

@@ -17,10 +17,10 @@ const CATALOG_DATA = [
     title: "Agoragentic",
     description:
       "Agent marketplace with 174+ AI capabilities. Browse, invoke, and pay for agent services settled in USDC on Base L2.",
-    version: "1.3.0",
+    version: "1.3.2",
     iconId: "agoragentic-acp",
     installLink: "https://agoragentic.com",
-    command: ["npx", "-y", "agoragentic-mcp@1.3.0", "--acp"],
+    command: ["npx", "-y", "agoragentic-mcp@1.3.2", "--acp"],
   },
   {
     id: "amp-acp",
@@ -36,10 +36,10 @@ const CATALOG_DATA = [
     title: "Auggie CLI",
     description:
       "Augment Code's powerful software agent, backed by industry-leading context engine",
-    version: "0.26.0",
+    version: "0.28.0",
     iconId: "auggie",
     installLink: "https://www.augmentcode.com/",
-    command: ["npx", "-y", "@augmentcode/auggie@0.26.0", "--acp"],
+    command: ["npx", "-y", "@augmentcode/auggie@0.28.0", "--acp"],
     env: {
       AUGMENT_DISABLE_AUTO_UPDATE: "1",
     },
@@ -57,29 +57,29 @@ const CATALOG_DATA = [
     id: "claude-acp",
     title: "Claude Agent",
     description: "ACP wrapper for Anthropic's Claude",
-    version: "0.32.0",
+    version: "0.41.0",
     iconId: "claude-acp",
     installLink: "https://github.com/agentclientprotocol/claude-agent-acp",
-    command: ["npx", "-y", "@agentclientprotocol/claude-agent-acp@0.32.0"],
+    command: ["npx", "-y", "@agentclientprotocol/claude-agent-acp@0.41.0"],
   },
   {
     id: "cline",
     title: "Cline",
     description:
       "Autonomous coding agent CLI - capable of creating/editing files, running commands, using the browser, and more",
-    version: "3",
+    version: "3.0.17",
     iconId: "cline",
     installLink: "https://cline.bot/cli",
-    command: ["npx", "-y", "cline@3", "--acp"],
+    command: ["npx", "-y", "cline@3.0.17", "--acp"],
   },
   {
     id: "codebuddy-code",
     title: "Codebuddy Code",
     description: "Tencent Cloud's official intelligent coding tool",
-    version: "2.95.0",
+    version: "2.103.0",
     iconId: "codebuddy-code",
     installLink: "https://www.codebuddy.cn/cli/",
-    command: ["npx", "-y", "@tencent-ai/codebuddy-code@2.95.0", "--acp"],
+    command: ["npx", "-y", "@tencent-ai/codebuddy-code@2.103.0", "--acp"],
   },
   {
     id: "codex-acp",
@@ -130,10 +130,10 @@ const CATALOG_DATA = [
     id: "deepagents",
     title: "DeepAgents",
     description: "Batteries-included AI coding and general purpose agent powered by LangChain.",
-    version: "0.1.7",
+    version: "0.1.12",
     iconId: "deepagents",
     installLink: "https://docs.langchain.com/oss/javascript/deepagents/overview",
-    command: ["npx", "-y", "deepagents-acp@0.1.7"],
+    command: ["npx", "-y", "deepagents-acp@0.1.12"],
   },
   {
     id: "deepseek-tui",
@@ -157,29 +157,29 @@ const CATALOG_DATA = [
     id: "dimcode",
     title: "DimCode",
     description: "A coding agent that puts leading models at your command.",
-    version: "0.0.66",
+    version: "0.0.77",
     iconId: "dimcode",
     installLink: "https://dimcode.dev/docs/acp.html",
-    command: ["npx", "-y", "dimcode@0.0.66", "acp"],
+    command: ["npx", "-y", "dimcode@0.0.77", "acp"],
   },
   {
     id: "dirac",
     title: "Dirac",
     description:
       "Reduces API costs by more than 50%, produces better and faster work. Uses Hash anchored parallel edits, AST manipulation and a whole lot of neat optimizations. Fully Open Source.",
-    version: "0.3.36",
+    version: "0.3.44",
     iconId: "dirac",
     installLink: "https://dirac.run",
-    command: ["npx", "-y", "dirac-cli@0.3.36", "--acp"],
+    command: ["npx", "-y", "dirac-cli@0.3.44", "--acp"],
   },
   {
     id: "factory-droid",
     title: "Factory Droid",
     description: "Factory Droid - AI coding agent powered by Factory AI",
-    version: "0.119.0",
+    version: "0.140.0",
     iconId: "factory-droid",
     installLink: "https://factory.ai/product/cli",
-    command: ["npx", "-y", "droid@0.119.0", "exec", "--output-format", "acp-daemon"],
+    command: ["npx", "-y", "droid@0.140.0", "exec", "--output-format", "acp-daemon"],
     env: {
       DROID_DISABLE_AUTO_UPDATE: "true",
       FACTORY_DROID_AUTO_UPDATE_ENABLED: "false",
@@ -189,38 +189,38 @@ const CATALOG_DATA = [
     id: "fast-agent",
     title: "fast-agent",
     description: "Code and build agents with comprehensive multi-provider support",
-    version: "0.7.0",
+    version: "0.7.15",
     iconId: "fast-agent",
     installLink: "https://fast-agent.ai/acp/",
-    command: ["uvx", "fast-agent-acp@latest", "-x"],
+    command: ["uvx", "--from", "fast-agent-acp==0.7.15", "fast-agent-acp", "-x"],
   },
   {
     id: "gemini",
     title: "Gemini CLI",
     description: "Google's official CLI for Gemini",
-    version: "0.41.1",
+    version: "0.45.0",
     iconId: "gemini",
     installLink: "https://geminicli.com",
-    command: ["npx", "-y", "@google/gemini-cli@0.41.1", "--acp"],
+    command: ["npx", "-y", "@google/gemini-cli@0.45.0", "--acp"],
   },
   {
     id: "github-copilot-cli",
     title: "GitHub Copilot",
     description: "GitHub's AI pair programmer",
-    version: "1.0.41",
+    version: "1.0.59",
     iconId: "github-copilot-cli",
     installLink: "https://github.com/features/copilot/cli/",
-    command: ["npx", "-y", "@github/copilot@1.0.41", "--acp"],
+    command: ["npx", "-y", "@github/copilot@1.0.59", "--acp"],
   },
   {
     id: "glm-acp-agent",
     title: "GLM Agent",
     description:
       "ACP agent powered by Zhipu AI's GLM Coding Plan models (glm-5.1, glm-5-turbo, glm-4.7, glm-4.5-air). Supports streaming, tool calls, mid-session model switching, image input via Z.AI Coding Plan Vision MCP, and session load/fork/resume with on-disk persistence.",
-    version: "1.1.2",
+    version: "1.1.4",
     iconId: "glm-acp-agent",
     installLink: "https://github.com/stefandevo/glm-acp-agent",
-    command: ["npx", "-y", "glm-acp-agent@1.1.2"],
+    command: ["npx", "-y", "glm-acp-agent@1.1.4"],
   },
   {
     id: "goose",
@@ -294,7 +294,7 @@ const CATALOG_DATA = [
     version: "0.1.44",
     iconId: "minion-code",
     installLink: "https://github.com/femto/minion-code",
-    command: ["uvx", "minion-code@latest", "acp"],
+    command: ["uvx", "--from", "minion-code==0.1.44", "minion-code", "acp"],
   },
   {
     id: "mistral-vibe",
@@ -309,10 +309,10 @@ const CATALOG_DATA = [
     id: "nova",
     title: "Nova",
     description: "Nova by Compass AI - a fully-fledged software engineer at your command",
-    version: "1.1.4",
+    version: "1.1.14",
     iconId: "nova",
     installLink: "https://www.compassap.ai/portfolio/nova.html",
-    command: ["npx", "-y", "@compass-ai/nova@1.1.4", "acp"],
+    command: ["npx", "-y", "@compass-ai/nova@1.1.14", "acp"],
   },
   {
     id: "opencode",
@@ -327,10 +327,10 @@ const CATALOG_DATA = [
     id: "pi-acp",
     title: "pi ACP",
     description: "ACP adapter for pi coding agent",
-    version: "0.0.26",
+    version: "0.0.27",
     iconId: "pi-acp",
     installLink: "https://github.com/svkozak/pi-acp",
-    command: ["npx", "-y", "pi-acp@0.0.26"],
+    command: ["npx", "-y", "pi-acp@0.0.27"],
   },
   {
     id: "poolside",
@@ -345,19 +345,19 @@ const CATALOG_DATA = [
     id: "qoder",
     title: "Qoder CLI",
     description: "AI coding assistant with agentic capabilities",
-    version: "0.2.6",
+    version: "1.0.14",
     iconId: "qoder",
     installLink: "https://qoder.com",
-    command: ["npx", "-y", "@qoder-ai/qodercli@0.2.6", "--acp"],
+    command: ["npx", "-y", "@qoder-ai/qodercli@1.0.14", "--acp"],
   },
   {
     id: "qwen-code",
     title: "Qwen Code",
     description: "Alibaba's Qwen coding assistant",
-    version: "0.15.6",
+    version: "0.17.1",
     iconId: "qwen-code",
     installLink: "https://qwenlm.github.io/qwen-code-docs/en/users/overview",
-    command: ["npx", "-y", "@qwen-code/qwen-code@0.15.6", "--acp", "--experimental-skills"],
+    command: ["npx", "-y", "@qwen-code/qwen-code@0.17.1", "--acp", "--experimental-skills"],
   },
   {
     id: "sigit",

packages/app/src/desktop/components/integrations-section.tsx

@@ -8,11 +8,7 @@ import { SettingsSection } from "@/screens/settings/settings-section";
 import { Button } from "@/components/ui/button";
 import { openExternalUrl } from "@/utils/open-external-url";
 import { confirmDialog } from "@/utils/confirm-dialog";
-import {
-  shouldUseDesktopDaemon,
-  type SkillOp,
-  type SkillsStatus,
-} from "@/desktop/daemon/desktop-daemon";
+import { shouldUseDesktopDaemon, type SkillsStatus } from "@/desktop/daemon/desktop-daemon";
 import { useCliInstall, useSkillsStatus } from "@/desktop/hooks/use-install-status";
 
 const CLI_DOCS_URL = "https://paseo.sh/docs/cli";
@@ -21,21 +17,6 @@ const ROW_WITH_BORDER_STYLE = [settingsStyles.row, settingsStyles.rowBorder];
 const UNINSTALL_MESSAGE =
   "Removes all Paseo orchestration skills from ~/.agents, ~/.claude, ~/.codex.";
 
-const OP_KIND_ORDER: Record<SkillOp["kind"], number> = { add: 0, update: 1, delete: 2 };
-const OP_KIND_LABEL: Record<SkillOp["kind"], string> = {
-  add: "Add skill",
-  update: "Update skill",
-  delete: "Delete skill",
-};
-
-function formatUpdateMessage(ops: readonly SkillOp[]): string {
-  const sorted = [...ops].sort((a, b) => {
-    const kindOrder = OP_KIND_ORDER[a.kind] - OP_KIND_ORDER[b.kind];
-    return kindOrder !== 0 ? kindOrder : a.name.localeCompare(b.name);
-  });
-  return sorted.map((op) => `${OP_KIND_LABEL[op.kind]} ${op.name}`).join("\n");
-}
-
 export function IntegrationsSection() {
   const { theme } = useUnistyles();
   const showSection = shouldUseDesktopDaemon();
@@ -75,15 +56,8 @@ export function IntegrationsSection() {
 
   const handleUpdateSkills = useCallback(async () => {
     if (isSkillsWorking) return;
-    const ops = skillsStatus?.ops ?? [];
-    const confirmed = await confirmDialog({
-      title: "Update Paseo skills?",
-      message: ops.length > 0 ? formatUpdateMessage(ops) : "Sync bundled skills to your machine.",
-      confirmLabel: "Update",
-    });
-    if (!confirmed) return;
     await updateSkills();
-  }, [isSkillsWorking, skillsStatus, updateSkills]);
+  }, [isSkillsWorking, updateSkills]);
 
   const handleUninstallSkills = useCallback(async () => {
     if (isSkillsWorking) return;

packages/app/src/desktop/host.ts

@@ -51,6 +51,24 @@ export interface DesktopOpenerBridge {
   openUrl?: (url: string) => Promise<void>;
 }
 
+export interface DesktopEditorTargetDescriptor {
+  id: string;
+  label: string;
+  kind: "editor" | "file-manager";
+}
+
+export interface DesktopEditorOpenTargetInput {
+  editorId: string;
+  path: string;
+  cwd?: string;
+  mode?: "open" | "reveal";
+}
+
+export interface DesktopEditorBridge {
+  listTargets?: () => Promise<DesktopEditorTargetDescriptor[]>;
+  openTarget?: (input: DesktopEditorOpenTargetInput) => Promise<void>;
+}
+
 export interface DesktopWebUtilsBridge {
   getPathForFile?: (file: File) => string;
 }
@@ -111,6 +129,7 @@ export interface DesktopHostBridge {
   dialog?: DesktopDialogBridge;
   notification?: DesktopNotificationBridge;
   opener?: DesktopOpenerBridge;
+  editor?: DesktopEditorBridge;
   webUtils?: DesktopWebUtilsBridge;
   menu?: DesktopMenuBridge;
   browser?: DesktopBrowserBridge;

packages/app/src/dictation/dictation-stream-sender.test.ts

@@ -137,4 +137,30 @@ describe("DictationStreamSender", () => {
 
     expect(client.chunks.map((c) => c.seq)).toEqual([0, 1]);
   });
+
+  it("does not replay long buffered native dictation in one synchronous burst", async () => {
+    const client = new FakeDaemonClient();
+    client.isConnected = false;
+    const sender = new DictationStreamSender({
+      client: client as unknown as DaemonClient,
+      format: "audio/pcm;rate=16000;bits=16",
+      createDictationId: () => "d1",
+    });
+
+    for (let seq = 0; seq < 480; seq += 1) {
+      sender.enqueueSegment(`native-frame-${seq}`);
+    }
+
+    client.isConnected = true;
+    const finish = sender.finish(sender.getFinalSeq());
+
+    await tick();
+
+    expect(client.chunks.length).toBeLessThanOrEqual(128);
+    await expect(finish).resolves.toEqual({
+      dictationId: "d1",
+      text: "ok",
+    });
+    expect(client.finishes).toEqual([{ dictationId: "d1", finalSeq: 479 }]);
+  });
 });

packages/app/src/dictation/dictation-stream-sender.ts

@@ -1,6 +1,10 @@
 import { generateMessageId } from "@/types/stream";
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 
+const MAX_CHUNKS_PER_FLUSH_TURN = 128;
+
+const waitForNextFlushTurn = (): Promise<void> => new Promise((resolve) => setTimeout(resolve, 0));
+
 export interface DictationStreamSenderParams {
   client: DaemonClient | null;
   format: string;
@@ -33,6 +37,8 @@ export class DictationStreamSender {
   private sendSeq = 0;
   private segments: string[] = [];
   private streamReady = false;
+  private flushTimer: ReturnType<typeof setTimeout> | null = null;
+  private drainWaiters: Array<() => void> = [];
 
   private startGeneration = 0;
   private startPromise: Promise<void> | null = null;
@@ -64,6 +70,7 @@ export class DictationStreamSender {
   }
 
   clearAll(): void {
+    this.clearScheduledFlush();
     this.dictationId = null;
     this.sendSeq = 0;
     this.segments = [];
@@ -73,6 +80,7 @@ export class DictationStreamSender {
   }
 
   resetStreamForReplay(): void {
+    this.clearScheduledFlush();
     this.dictationId = null;
     this.sendSeq = 0;
     this.streamReady = false;
@@ -108,13 +116,18 @@ export class DictationStreamSender {
     }
 
     let sent = 0;
-    while (this.sendSeq < this.segments.length) {
+    while (this.sendSeq < this.segments.length && sent < MAX_CHUNKS_PER_FLUSH_TURN) {
       const seq = this.sendSeq;
       const audio = this.segments[seq];
       client.sendDictationStreamChunk(dictationId, seq, audio, this.format);
       this.sendSeq = seq + 1;
       sent += 1;
     }
+    if (this.hasPendingSegments()) {
+      this.scheduleFlush();
+    } else {
+      this.resolveDrainWaiters();
+    }
     return sent;
   }
 
@@ -184,6 +197,7 @@ export class DictationStreamSender {
     }
 
     this.flush();
+    await this.waitForFlushDrain();
     return client.finishDictationStream(dictationId, finalSeq);
   }
 
@@ -195,4 +209,47 @@ export class DictationStreamSender {
     }
     this.resetStreamForReplay();
   }
+
+  private hasPendingSegments(): boolean {
+    return this.sendSeq < this.segments.length;
+  }
+
+  private scheduleFlush(): void {
+    if (this.flushTimer) {
+      return;
+    }
+    this.flushTimer = setTimeout(() => {
+      this.flushTimer = null;
+      this.flush();
+    }, 0);
+  }
+
+  private clearScheduledFlush(): void {
+    if (!this.flushTimer) {
+      return;
+    }
+    clearTimeout(this.flushTimer);
+    this.flushTimer = null;
+  }
+
+  private async waitForFlushDrain(): Promise<void> {
+    while (this.hasPendingSegments()) {
+      const client = this.client;
+      if (!client?.isConnected || !this.dictationId || !this.streamReady) {
+        throw new Error("Failed to flush dictation stream");
+      }
+      await new Promise<void>((resolve) => {
+        this.drainWaiters.push(resolve);
+      });
+      await waitForNextFlushTurn();
+    }
+  }
+
+  private resolveDrainWaiters(): void {
+    const waiters = this.drainWaiters;
+    this.drainWaiters = [];
+    for (const resolve of waiters) {
+      resolve();
+    }
+  }
 }

packages/app/src/git/actions-store.test.ts

@@ -43,6 +43,7 @@ function workspace(input: Partial<WorkspaceDescriptor> & Pick<WorkspaceDescripto
     name: input.name ?? input.id,
     status: input.status ?? "done",
     archivingAt: input.archivingAt ?? null,
+    statusEnteredAt: null,
     diffStat: input.diffStat ?? null,
     scripts: input.scripts ?? [],
   } satisfies WorkspaceDescriptor;

packages/app/src/git/diff-pane.tsx

@@ -25,9 +25,9 @@ import {
   type ViewStyle,
   type TextStyle,
 } from "react-native";
-import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
-import { ICON_SIZE, type Theme } from "@/styles/theme";
-import { useIsCompactFormFactor } from "@/constants/layout";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { BORDER_WIDTH, ICON_SIZE, SPACING, type Theme } from "@/styles/theme";
+import { useIsCompactFormFactor, WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import {
   AlignJustify,
   Archive,
@@ -55,10 +55,10 @@ import {
 import { useCheckoutStatusQuery } from "@/git/use-status-query";
 import { useCheckoutPrStatusQuery } from "@/git/use-pr-status-query";
 import { useChangesPreferences } from "@/hooks/use-changes-preferences";
+import { useAppSettings } from "@/hooks/use-settings";
 import { DiffScroll } from "@/components/diff-scroll";
 import { syntaxTokenStyleFor } from "@/styles/syntax-token-styles";
 import { CODE_SURFACE_DATASET } from "@/styles/code-surface";
-import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { shouldAnchorHeaderBeforeCollapse } from "@/git/diff-scroll";
 import {
   buildSplitDiffRows,
@@ -123,6 +123,7 @@ function fileHeaderPressableStyle({ pressed }: PressableStateCallbackType) {
 interface HighlightedTextProps {
   tokens: HighlightToken[];
   wrapLines?: boolean;
+  testID?: string;
 }
 
 type WrappedWebTextStyle = TextStyle & {
@@ -143,13 +144,10 @@ function HighlightedToken({ token }: { token: HighlightToken }) {
   return <Text style={syntaxTokenStyleFor(token.style)}>{token.text}</Text>;
 }
 
-function HighlightedText({ tokens, wrapLines = false }: HighlightedTextProps) {
-  const { theme } = useUnistyles();
-  const lineHeight = theme.lineHeight.diff;
-
+function HighlightedText({ tokens, wrapLines = false, testID }: HighlightedTextProps) {
   const containerStyle = useMemo(
-    () => [styles.diffLineText, { lineHeight, ...getWrappedTextStyle(wrapLines) }],
-    [lineHeight, wrapLines],
+    () => [styles.diffTextMetrics, styles.diffLineText, getWrappedTextStyle(wrapLines)],
+    [wrapLines],
   );
 
   const keyedTokens = useMemo(
@@ -158,7 +156,7 @@ function HighlightedText({ tokens, wrapLines = false }: HighlightedTextProps) {
   );
 
   return (
-    <Text style={containerStyle}>
+    <Text style={containerStyle} testID={testID}>
       {keyedTokens.map(({ key, token }) => (
         <HighlightedToken key={key} token={token} />
       ))}
@@ -252,6 +250,8 @@ function DiffGutterCell({
   reviewActions,
   isLineHovered,
   style,
+  textTestID,
+  actionTestID,
 }: {
   lineNumber: number | null;
   type: DiffLine["type"] | undefined | null;
@@ -260,6 +260,8 @@ function DiffGutterCell({
   reviewActions?: InlineReviewActions;
   isLineHovered?: boolean;
   style?: StyleProp<ViewStyle>;
+  textTestID?: string;
+  actionTestID?: string;
 }) {
   const containerStyle = useMemo(
     () => [
@@ -272,6 +274,7 @@ function DiffGutterCell({
   );
   const textStyle = useMemo(
     () => [
+      styles.diffTextMetrics,
       styles.lineNumberText,
       type === "add" && styles.addLineNumberText,
       type === "remove" && styles.removeLineNumberText,
@@ -296,8 +299,9 @@ function DiffGutterCell({
       isLineHovered={isLineHovered}
       onStartComment={onStartComment}
       style={containerStyle}
+      actionTestID={actionTestID}
     >
-      <Text numberOfLines={1} style={textStyle}>
+      <Text numberOfLines={1} style={textStyle} testID={textTestID}>
         {formatDiffGutterText(lineNumber)}
       </Text>
     </InlineReviewGutterCell>
@@ -312,6 +316,7 @@ function DiffTextLine({
   onHoverChange,
   hoverTargetKey,
   onHoverTargetChange,
+  textTestID,
 }: {
   line: DiffLine;
   wrapLines: boolean;
@@ -320,6 +325,7 @@ function DiffTextLine({
   onHoverChange?: (hovered: boolean) => void;
   hoverTargetKey?: string | null;
   onHoverTargetChange?: (key: string | null) => void;
+  textTestID?: string;
 }) {
   const visibleTokens = hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
 
@@ -329,6 +335,7 @@ function DiffTextLine({
   );
   const textStyle = useMemo(
     () => [
+      styles.diffTextMetrics,
       styles.diffLineText,
       getWrappedTextStyle(wrapLines),
       line.type === "add" && styles.addLineText,
@@ -349,9 +356,11 @@ function DiffTextLine({
       style={containerStyle}
     >
       {line.type !== "header" && visibleTokens ? (
-        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} testID={textTestID} />
       ) : (
-        <Text style={textStyle}>{formatDiffContentText(line.content)}</Text>
+        <Text style={textStyle} testID={textTestID}>
+          {formatDiffContentText(line.content)}
+        </Text>
       )}
     </LongPressableLine>
   );
@@ -380,6 +389,7 @@ function SplitTextLine({
   );
   const textStyle = useMemo(
     () => [
+      styles.diffTextMetrics,
       styles.diffLineText,
       getWrappedTextStyle(wrapLines),
       line?.type === "add" && styles.addLineText,
@@ -432,6 +442,7 @@ function DiffLineView({
   );
   const textStyle = useMemo(
     () => [
+      styles.diffTextMetrics,
       styles.diffLineText,
       getWrappedTextStyle(wrapLines),
       line.type === "add" && styles.addLineText,
@@ -487,6 +498,7 @@ function SplitDiffLine({
   );
   const textStyle = useMemo(
     () => [
+      styles.diffTextMetrics,
       styles.diffLineText,
       getWrappedTextStyle(wrapLines),
       line?.type === "add" && styles.addLineText,
@@ -896,6 +908,7 @@ function DiffFileBody({
   file,
   layout,
   wrapLines,
+  codeFontSize,
   reviewActions,
   onBodyHeightChange,
   testID,
@@ -903,6 +916,7 @@ function DiffFileBody({
   file: ParsedDiffFile;
   layout: "unified" | "split";
   wrapLines: boolean;
+  codeFontSize: number;
   reviewActions?: InlineReviewActions;
   onBodyHeightChange?: (file: ParsedDiffFile, height: number) => void;
   testID?: string;
@@ -910,7 +924,6 @@ function DiffFileBody({
   const [scrollViewWidth, setScrollViewWidth] = useState(0);
   const [bodyWidth, setBodyWidth] = useState(0);
   const [hoveredReviewTargetKey, setHoveredReviewTargetKey] = useState<string | null>(null);
-  const { theme } = useUnistyles();
 
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
@@ -950,7 +963,7 @@ function DiffFileBody({
             hunk.newStart + hunk.newCount,
           );
         }
-        const gutterWidth = lineNumberGutterWidth(maxLineNo, theme.fontSize.code);
+        const gutterWidth = lineNumberGutterWidth(maxLineNo, codeFontSize);
 
         if (layout === "split") {
           const rows = buildSplitDiffRows(file);
@@ -981,8 +994,8 @@ function DiffFileBody({
           return (
             <View style={styles.diffContent} dataSet={CODE_SURFACE_DATASET}>
               <View style={styles.linesContainer}>
-                {computedLines.map(({ line, lineNumber, key, reviewTarget }) => (
-                  <View key={key}>
+                {computedLines.map(({ line, lineNumber, key, reviewTarget }, index) => (
+                  <View key={key} testID={`diff-wrapped-row-${index}`}>
                     <DiffLineView
                       line={line}
                       lineNumber={lineNumber}
@@ -1008,8 +1021,8 @@ function DiffFileBody({
         return (
           <View style={DIFF_CONTENT_ROW_STYLE} dataSet={CODE_SURFACE_DATASET}>
             <View style={styles.gutterColumn}>
-              {computedLines.map(({ line, lineNumber, key, reviewTarget }) => (
-                <View key={key}>
+              {computedLines.map(({ line, lineNumber, key, reviewTarget }, index) => (
+                <View key={key} testID={`diff-gutter-row-${index}`}>
                   <DiffGutterCell
                     lineNumber={lineNumber}
                     type={line.type}
@@ -1019,6 +1032,8 @@ function DiffFileBody({
                     isLineHovered={
                       reviewTarget?.key !== undefined && hoveredReviewTargetKey === reviewTarget.key
                     }
+                    textTestID={`diff-gutter-text-${index}`}
+                    actionTestID={`diff-gutter-action-${index}`}
                   />
                   <InlineReviewGutterSpacer
                     reviewTarget={reviewTarget}
@@ -1035,8 +1050,8 @@ function DiffFileBody({
               contentContainerStyle={styles.diffContentInner}
             >
               <View style={linesContainerRowStyle}>
-                {computedLines.map(({ line, key, reviewTarget }) => (
-                  <View key={key}>
+                {computedLines.map(({ line, key, reviewTarget }, index) => (
+                  <View key={key} testID={`diff-code-row-${index}`}>
                     <DiffTextLine
                       line={line}
                       wrapLines={false}
@@ -1044,6 +1059,7 @@ function DiffFileBody({
                       reviewActions={reviewActions}
                       hoverTargetKey={reviewTarget?.key ?? null}
                       onHoverTargetChange={setHoveredReviewTargetKey}
+                      textTestID={`diff-code-text-${index}`}
                     />
                     <InlineReviewThreadContent
                       reviewTarget={reviewTarget}
@@ -1074,6 +1090,27 @@ type PressableStyleFn = (
   state: PressableStateCallbackType & { hovered?: boolean; open?: boolean },
 ) => StyleProp<ViewStyle>;
 
+const foregroundIconColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
+const ThemedAlignJustify = withUnistyles(AlignJustify);
+const ThemedColumns2 = withUnistyles(Columns2);
+const ThemedPilcrow = withUnistyles(Pilcrow);
+const ThemedWrapText = withUnistyles(WrapText);
+const ThemedListChevronsDownUp = withUnistyles(ListChevronsDownUp);
+const ThemedListChevronsUpDown = withUnistyles(ListChevronsUpDown);
+const ThemedGitCommitHorizontal = withUnistyles(GitCommitHorizontal);
+const ThemedDownload = withUnistyles(Download);
+const ThemedUpload = withUnistyles(Upload);
+const ThemedArrowDownUp = withUnistyles(ArrowDownUp);
+const ThemedGitHubIcon = withUnistyles(GitHubIcon);
+const ThemedGitMerge = withUnistyles(GitMerge);
+const ThemedRefreshCcw = withUnistyles(RefreshCcw);
+const ThemedArchive = withUnistyles(Archive);
+const ThemedGitBranch = withUnistyles(GitBranch);
+const ThemedChevronDown = withUnistyles(ChevronDown);
+
 interface DiffLayoutToggleGroupProps {
   layout: "unified" | "split";
   unifiedToggleStyle: PressableStyleFn;
@@ -1089,7 +1126,6 @@ function DiffLayoutToggleGroup({
   onUnified,
   onSplit,
 }: DiffLayoutToggleGroupProps) {
-  const { theme } = useUnistyles();
   return (
     <View style={styles.toggleButtonGroup}>
       <Tooltip delayDuration={300}>
@@ -1101,9 +1137,11 @@ function DiffLayoutToggleGroup({
             onPress={onUnified}
             style={unifiedToggleStyle}
           >
-            <AlignJustify
+            <ThemedAlignJustify
               size={14}
-              color={layout === "unified" ? theme.colors.foreground : theme.colors.foregroundMuted}
+              uniProps={
+                layout === "unified" ? foregroundIconColorMapping : foregroundMutedIconColorMapping
+              }
             />
           </Pressable>
         </TooltipTrigger>
@@ -1120,9 +1158,11 @@ function DiffLayoutToggleGroup({
             onPress={onSplit}
             style={splitToggleStyle}
           >
-            <Columns2
+            <ThemedColumns2
               size={14}
-              color={layout === "split" ? theme.colors.foreground : theme.colors.foregroundMuted}
+              uniProps={
+                layout === "split" ? foregroundIconColorMapping : foregroundMutedIconColorMapping
+              }
             />
           </Pressable>
         </TooltipTrigger>
@@ -1147,7 +1187,6 @@ function DiffWhitespaceToggle({
   toggleStyle,
   onToggle,
 }: DiffWhitespaceToggleProps) {
-  const { theme } = useUnistyles();
   return (
     <Tooltip delayDuration={300}>
       <TooltipTrigger asChild>
@@ -1158,9 +1197,9 @@ function DiffWhitespaceToggle({
           style={toggleStyle}
           onPress={onToggle}
         >
-          <Pilcrow
+          <ThemedPilcrow
             size={isMobile ? 18 : 14}
-            color={hideWhitespace ? theme.colors.foreground : theme.colors.foregroundMuted}
+            uniProps={hideWhitespace ? foregroundIconColorMapping : foregroundMutedIconColorMapping}
           />
         </Pressable>
       </TooltipTrigger>
@@ -1190,15 +1229,14 @@ function DiffFilesToolbar({
   onToggleWrapLines,
   onToggleExpandAll,
 }: DiffFilesToolbarProps) {
-  const { theme } = useUnistyles();
   return (
     <View style={styles.diffStatusButtons}>
       <Tooltip delayDuration={300}>
         <TooltipTrigger asChild>
           <Pressable style={wrapLinesToggleStyle} onPress={onToggleWrapLines}>
-            <WrapText
+            <ThemedWrapText
               size={isMobile ? 18 : 14}
-              color={wrapLines ? theme.colors.foreground : theme.colors.foregroundMuted}
+              uniProps={wrapLines ? foregroundIconColorMapping : foregroundMutedIconColorMapping}
             />
           </Pressable>
         </TooltipTrigger>
@@ -1212,9 +1250,15 @@ function DiffFilesToolbar({
         <TooltipTrigger asChild>
           <Pressable style={expandAllToggleStyle} onPress={onToggleExpandAll}>
             {allExpanded ? (
-              <ListChevronsDownUp size={isMobile ? 18 : 14} color={theme.colors.foregroundMuted} />
+              <ThemedListChevronsDownUp
+                size={isMobile ? 18 : 14}
+                uniProps={foregroundMutedIconColorMapping}
+              />
             ) : (
-              <ListChevronsUpDown size={isMobile ? 18 : 14} color={theme.colors.foregroundMuted} />
+              <ThemedListChevronsUpDown
+                size={isMobile ? 18 : 14}
+                uniProps={foregroundMutedIconColorMapping}
+              />
             )}
           </Pressable>
         </TooltipTrigger>
@@ -1236,7 +1280,6 @@ interface DiffRefreshButtonProps {
 
 const ThemedRotateCw = withUnistyles(RotateCw);
 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
-const refreshIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
 
 function DiffRefreshButton({ isRefreshing, toggleStyle, onPress }: DiffRefreshButtonProps) {
   return (
@@ -1252,9 +1295,12 @@ function DiffRefreshButton({ isRefreshing, toggleStyle, onPress }: DiffRefreshBu
         >
           <View style={styles.refreshIcon}>
             {isRefreshing ? (
-              <ThemedLoadingSpinner size={ICON_SIZE.sm} uniProps={refreshIconColorMapping} />
+              <ThemedLoadingSpinner
+                size={ICON_SIZE.sm}
+                uniProps={foregroundMutedIconColorMapping}
+              />
             ) : (
-              <ThemedRotateCw size={ICON_SIZE.sm} uniProps={refreshIconColorMapping} />
+              <ThemedRotateCw size={ICON_SIZE.sm} uniProps={foregroundMutedIconColorMapping} />
             )}
           </View>
         </Pressable>
@@ -1322,7 +1368,6 @@ interface DiffBodyContentProps {
   handleDiffListScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onContentSizeChange: (width: number, height: number) => void;
   showDesktopWebScrollbar: boolean;
-  foregroundMutedColor: string;
 }
 
 function DiffBodyContent({
@@ -1344,12 +1389,11 @@ function DiffBodyContent({
   handleDiffListScroll,
   onContentSizeChange,
   showDesktopWebScrollbar,
-  foregroundMutedColor,
 }: DiffBodyContentProps) {
   if (isStatusLoading) {
     return (
       <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={foregroundMutedColor} />
+        <ThemedActivityIndicator size="large" uniProps={foregroundMutedIconColorMapping} />
         <Text style={styles.loadingText}>Checking repository...</Text>
       </View>
     );
@@ -1371,7 +1415,7 @@ function DiffBodyContent({
   if (isDiffLoading) {
     return (
       <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={foregroundMutedColor} />
+        <ThemedActivityIndicator size="large" uniProps={foregroundMutedIconColorMapping} />
       </View>
     );
   }
@@ -1483,30 +1527,27 @@ function computePrErrorMessage(
   return prPayloadError?.message ?? null;
 }
 
-function buildDiffModeTriggerStyle(surfaceColor: string): PressableStyleFn {
+function buildDiffModeTriggerStyle(): PressableStyleFn {
   return ({ hovered, pressed, open }) => [
     styles.diffModeTrigger,
-    (Boolean(hovered) || pressed || Boolean(open)) &&
-      inlineUnistylesStyle({ backgroundColor: surfaceColor }),
+    (Boolean(hovered) || pressed || Boolean(open)) && styles.diffModeTriggerHovered,
   ];
 }
 
-function buildExpandAllButtonStyle(surfaceColor: string): PressableStyleFn {
+function buildExpandAllButtonStyle(): PressableStyleFn {
   return ({ hovered, pressed }) => [
     styles.expandAllButton,
-    (Boolean(hovered) || pressed) && inlineUnistylesStyle({ backgroundColor: surfaceColor }),
+    (Boolean(hovered) || pressed) && styles.toggleButtonSelected,
   ];
 }
 
 function buildToggleButtonStyle(
   selected: boolean,
   baseStyles: StyleProp<ViewStyle> | StyleProp<ViewStyle>[],
-  surfaceColor: string,
 ): PressableStyleFn {
   return ({ hovered, pressed }) => [
     baseStyles,
-    (selected || Boolean(hovered) || pressed) &&
-      inlineUnistylesStyle({ backgroundColor: surfaceColor }),
+    (selected || Boolean(hovered) || pressed) && styles.toggleButtonSelected,
   ];
 }
 
@@ -1521,7 +1562,7 @@ export function GitDiffPane({
   hideHeaderRow,
   enabled,
 }: GitDiffPaneProps) {
-  const { theme } = useUnistyles();
+  const { settings: appSettings } = useAppSettings();
   const isMobile = useIsCompactFormFactor();
   const showDesktopWebScrollbar = isWeb && !isMobile;
   const canUseSplitLayout = isWeb && !isMobile;
@@ -1557,56 +1598,44 @@ export function GitDiffPane({
     handleLayoutChange("split");
   }, [handleLayoutChange]);
 
-  const controlSurfaceColor = theme.colors.surface2;
-  const diffModeTriggerStyle = useMemo(
-    () => buildDiffModeTriggerStyle(controlSurfaceColor),
-    [controlSurfaceColor],
+  const codeFontSize = appSettings.codeFontSize;
+  const diffBodyLineHeight = Math.round(codeFontSize * 1.5);
+  const diffBodyTypographyKey = [appSettings.monoFontFamily, codeFontSize, diffBodyLineHeight].join(
+    ":",
   );
+  const diffModeTriggerStyle = useMemo(() => buildDiffModeTriggerStyle(), []);
 
   const unifiedToggleStyle = useMemo(
     () =>
-      buildToggleButtonStyle(
-        changesPreferences.layout === "unified",
-        [styles.toggleButton, styles.toggleButtonGroupStart],
-        controlSurfaceColor,
-      ),
-    [changesPreferences.layout, controlSurfaceColor],
+      buildToggleButtonStyle(changesPreferences.layout === "unified", [
+        styles.toggleButton,
+        styles.toggleButtonGroupStart,
+      ]),
+    [changesPreferences.layout],
   );
 
   const splitToggleStyle = useMemo(
     () =>
-      buildToggleButtonStyle(
-        changesPreferences.layout === "split",
-        [styles.toggleButton, styles.toggleButtonGroupEnd],
-        controlSurfaceColor,
-      ),
-    [changesPreferences.layout, controlSurfaceColor],
+      buildToggleButtonStyle(changesPreferences.layout === "split", [
+        styles.toggleButton,
+        styles.toggleButtonGroupEnd,
+      ]),
+    [changesPreferences.layout],
   );
 
   const hideWhitespaceToggleStyle = useMemo(
-    () =>
-      buildToggleButtonStyle(
-        changesPreferences.hideWhitespace,
-        styles.expandAllButton,
-        controlSurfaceColor,
-      ),
-    [changesPreferences.hideWhitespace, controlSurfaceColor],
+    () => buildToggleButtonStyle(changesPreferences.hideWhitespace, styles.expandAllButton),
+    [changesPreferences.hideWhitespace],
   );
 
   const wrapLinesToggleStyle = useMemo(
-    () => buildToggleButtonStyle(wrapLines, styles.expandAllButton, controlSurfaceColor),
-    [wrapLines, controlSurfaceColor],
+    () => buildToggleButtonStyle(wrapLines, styles.expandAllButton),
+    [wrapLines],
   );
 
-  const expandAllToggleStyle = useMemo(
-    () => buildExpandAllButtonStyle(controlSurfaceColor),
-    [controlSurfaceColor],
-  );
+  const expandAllToggleStyle = useMemo(() => buildExpandAllButtonStyle(), []);
 
-  const refreshToggleStyle = useMemo(
-    () => buildExpandAllButtonStyle(controlSurfaceColor),
-    [controlSurfaceColor],
-  );
+  const refreshToggleStyle = useMemo(() => buildExpandAllButtonStyle(), []);
 
   const toast = useToast();
   const refreshSupported = useSessionStore(
@@ -1754,9 +1783,8 @@ export function GitDiffPane({
   const bodyHeightByKeyRef = useRef<Record<string, number>>({});
   const defaultHeaderHeightRef = useRef<number>(44);
   const [heightVersion, setHeightVersion] = useState(0);
-  const diffBodyLineHeight = theme.lineHeight.diff;
-  const diffBodyChromeHeight = theme.borderWidth[1] * 2;
-  const statusBodyHeightEstimate = diffBodyChromeHeight + theme.spacing[4] * 2 + diffBodyLineHeight;
+  const diffBodyChromeHeight = BORDER_WIDTH[1] * 2;
+  const statusBodyHeightEstimate = diffBodyChromeHeight + SPACING[4] * 2 + diffBodyLineHeight;
   const { flatItems, stickyHeaderIndices } = useMemo(() => {
     const items: DiffFlatItem[] = [];
     const stickyIndices: number[] = [];
@@ -1777,12 +1805,13 @@ export function GitDiffPane({
   const getBodyHeightKey = useCallback(
     (file: ParsedDiffFile): string => {
       if (file.status === "too_large" || file.status === "binary") {
-        return `${effectiveLayout}:${wrapLines ? "wrap" : "scroll"}:${file.path}:${file.status}`;
+        return `${effectiveLayout}:${wrapLines ? "wrap" : "scroll"}:${diffBodyTypographyKey}:${file.path}:${file.status}`;
       }
 
       return [
         effectiveLayout,
         wrapLines ? "wrap" : "scroll",
+        diffBodyTypographyKey,
         file.path,
         file.status ?? "ok",
         file.additions,
@@ -1792,7 +1821,7 @@ export function GitDiffPane({
         getDiffContentLength(file),
       ].join(":");
     },
-    [effectiveLayout, wrapLines],
+    [diffBodyTypographyKey, effectiveLayout, wrapLines],
   );
 
   const estimateBodyHeight = useCallback(
@@ -1961,6 +1990,7 @@ export function GitDiffPane({
           file={item.file}
           layout={effectiveLayout}
           wrapLines={wrapLines}
+          codeFontSize={codeFontSize}
           reviewActions={reviewActions}
           onBodyHeightChange={handleBodyHeightChange}
           testID={`diff-file-${item.fileIndex}-body`}
@@ -1968,6 +1998,7 @@ export function GitDiffPane({
       );
     },
     [
+      codeFontSize,
       effectiveLayout,
       handleBodyHeightChange,
       handleHeaderHeightChange,
@@ -2015,34 +2046,41 @@ export function GitDiffPane({
     () => ({
       expandedPathsArray,
       effectiveLayout,
+      diffBodyTypographyKey,
       heightVersion,
       wrapLines,
       reviewActions,
     }),
-    [expandedPathsArray, effectiveLayout, heightVersion, wrapLines, reviewActions],
+    [
+      expandedPathsArray,
+      effectiveLayout,
+      diffBodyTypographyKey,
+      heightVersion,
+      wrapLines,
+      reviewActions,
+    ],
   );
 
   const hasChanges = files.length > 0;
   const diffErrorMessage = diffPayloadError?.message ?? null;
   const prErrorMessage = computePrErrorMessage(githubFeaturesEnabled, prPayloadError);
   const baseRefLabel = useMemo(() => computeBaseRefLabel(baseRef), [baseRef]);
-  const iconColor = theme.colors.foregroundMuted;
   const gitActionsIcons = useMemo(
     () => ({
-      commit: <GitCommitHorizontal size={16} color={iconColor} />,
-      pull: <Download size={16} color={iconColor} />,
-      push: <Upload size={16} color={iconColor} />,
-      pullAndPush: <ArrowDownUp size={16} color={iconColor} />,
-      viewPr: <GitHubIcon size={16} color={iconColor} />,
-      createPr: <GitHubIcon size={16} color={iconColor} />,
-      mergePrSquash: <GitHubIcon size={16} color={iconColor} />,
-      mergePrMerge: <GitHubIcon size={16} color={iconColor} />,
-      mergePrRebase: <GitHubIcon size={16} color={iconColor} />,
-      merge: <GitMerge size={16} color={iconColor} />,
-      mergeFromBase: <RefreshCcw size={16} color={iconColor} />,
-      archive: <Archive size={16} color={iconColor} />,
+      commit: <ThemedGitCommitHorizontal size={16} uniProps={foregroundMutedIconColorMapping} />,
+      pull: <ThemedDownload size={16} uniProps={foregroundMutedIconColorMapping} />,
+      push: <ThemedUpload size={16} uniProps={foregroundMutedIconColorMapping} />,
+      pullAndPush: <ThemedArrowDownUp size={16} uniProps={foregroundMutedIconColorMapping} />,
+      viewPr: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      createPr: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergePrSquash: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergePrMerge: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergePrRebase: <ThemedGitHubIcon size={16} uniProps={foregroundMutedIconColorMapping} />,
+      merge: <ThemedGitMerge size={16} uniProps={foregroundMutedIconColorMapping} />,
+      mergeFromBase: <ThemedRefreshCcw size={16} uniProps={foregroundMutedIconColorMapping} />,
+      archive: <ThemedArchive size={16} uniProps={foregroundMutedIconColorMapping} />,
     }),
-    [iconColor],
+    [],
   );
   const { gitActions, branchLabel } = useGitActions({ serverId, cwd, icons: gitActionsIcons });
   const committedDiffDescription = useMemo(
@@ -2076,7 +2114,6 @@ export function GitDiffPane({
       handleDiffListScroll={handleDiffListScroll}
       onContentSizeChange={scrollbar.onContentSizeChange}
       showDesktopWebScrollbar={showDesktopWebScrollbar}
-      foregroundMutedColor={theme.colors.foregroundMuted}
     />
   );
 
@@ -2085,7 +2122,7 @@ export function GitDiffPane({
       {!hideHeaderRow ? (
         <View style={styles.header} testID="changes-header">
           <View style={styles.headerLeft}>
-            <GitBranch size={16} color={theme.colors.foregroundMuted} />
+            <ThemedGitBranch size={16} uniProps={foregroundMutedIconColorMapping} />
             <Text style={styles.branchLabel} testID="changes-branch" numberOfLines={1}>
               {branchLabel}
             </Text>
@@ -2107,7 +2144,7 @@ export function GitDiffPane({
                 <Text style={styles.diffStatusText} numberOfLines={1}>
                   {diffMode === "uncommitted" ? "Uncommitted" : "Committed"}
                 </Text>
-                <ChevronDown size={12} color={theme.colors.foregroundMuted} />
+                <ThemedChevronDown size={12} uniProps={foregroundMutedIconColorMapping} />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" width={260} testID="changes-diff-status-menu">
                 <DropdownMenuItem
@@ -2551,13 +2588,15 @@ const styles = StyleSheet.create((theme) => ({
     elevation: 4,
     overflow: "visible",
   },
+  diffTextMetrics: {
+    fontSize: theme.fontSize.code,
+    lineHeight: theme.lineHeight.diff,
+    fontFamily: theme.fontFamily.mono,
+  },
   lineNumberText: {
     width: "100%",
     textAlign: "right",
     paddingRight: theme.spacing[2],
-    fontSize: theme.fontSize.code,
-    lineHeight: theme.lineHeight.diff,
-    fontFamily: theme.fontFamily.mono,
     color: theme.colors.foregroundMuted,
     userSelect: "none",
   },
@@ -2570,9 +2609,6 @@ const styles = StyleSheet.create((theme) => ({
   diffLineText: {
     flex: 1,
     paddingRight: theme.spacing[3],
-    fontSize: theme.fontSize.code,
-    lineHeight: theme.lineHeight.diff,
-    fontFamily: theme.fontFamily.mono,
     color: theme.colors.foreground,
     userSelect: "text",
   },
@@ -2621,7 +2657,7 @@ const styles = StyleSheet.create((theme) => ({
   },
 }));
 
-const HEADER_LINE_TEXT_STYLE = [styles.diffLineText, styles.headerLineText];
+const HEADER_LINE_TEXT_STYLE = [styles.diffTextMetrics, styles.diffLineText, styles.headerLineText];
 const FILE_SECTION_BODY_STYLE = [styles.fileSectionBodyContainer, styles.fileSectionBorder];
 const DIFF_CONTENT_SPLIT_ROW_STYLE = [styles.diffContent, styles.splitRow];
 const DIFF_CONTENT_ROW_STYLE = [styles.diffContent, styles.diffContentRow];

packages/app/src/git/github-url.test.ts

@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vitest";
-import { buildGitHubBranchTreeUrl, parseGitHubRepoFromRemote } from "./github-url";
+import {
+  buildGitHubBlobUrl,
+  buildGitHubBranchTreeUrl,
+  parseGitHubRepoFromRemote,
+} from "./github-url";
 
 describe("parseGitHubRepoFromRemote", () => {
   it.each([
@@ -51,3 +55,78 @@ describe("buildGitHubBranchTreeUrl", () => {
     ).toBeNull();
   });
 });
+
+describe("buildGitHubBlobUrl", () => {
+  it("builds a blob URL for a file path", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "git@github.com:acme/repo.git",
+        branch: "main",
+        path: "src/index.ts",
+      }),
+    ).toBe("https://github.com/acme/repo/blob/main/src/index.ts");
+  });
+
+  it("appends a single-line anchor", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "https://github.com/acme/repo.git",
+        branch: "main",
+        path: "src/index.ts",
+        lineStart: 12,
+      }),
+    ).toBe("https://github.com/acme/repo/blob/main/src/index.ts#L12");
+  });
+
+  it("appends a line range anchor", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "https://github.com/acme/repo.git",
+        branch: "main",
+        path: "src/index.ts",
+        lineStart: 12,
+        lineEnd: 20,
+      }),
+    ).toBe("https://github.com/acme/repo/blob/main/src/index.ts#L12-L20");
+  });
+
+  it("strips leading slashes and encodes path segments", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "https://github.com/acme/repo.git",
+        branch: "main",
+        path: "/src/a b/c#d.ts",
+      }),
+    ).toBe("https://github.com/acme/repo/blob/main/src/a%20b/c%23d.ts");
+  });
+
+  it("normalizes harmless dot segments in the blob path", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "https://github.com/acme/repo.git",
+        branch: "main",
+        path: "./src/../index.ts",
+      }),
+    ).toBe("https://github.com/acme/repo/blob/main/index.ts");
+  });
+
+  it("returns null for blob paths that escape above the repo root", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "https://github.com/acme/repo.git",
+        branch: "main",
+        path: "../outside.ts",
+      }),
+    ).toBeNull();
+  });
+
+  it("returns null when the path is missing", () => {
+    expect(
+      buildGitHubBlobUrl({
+        remoteUrl: "https://github.com/acme/repo.git",
+        branch: "main",
+        path: "",
+      }),
+    ).toBeNull();
+  });
+});

packages/app/src/git/github-url.ts

@@ -20,3 +20,50 @@ export function buildGitHubBranchTreeUrl(input: {
   const encodedBranch = branch.split("/").map(encodeURIComponent).join("/");
   return `https://github.com/${repo}/tree/${encodedBranch}`;
 }
+
+function normalizeGitHubBlobPath(path: string | null | undefined): string | null {
+  const segments: string[] = [];
+  const trimmed = path?.trim().replace(/\\/g, "/").replace(/^\/+/, "");
+  if (!trimmed) {
+    return null;
+  }
+  for (const segment of trimmed.split("/")) {
+    if (!segment || segment === ".") {
+      continue;
+    }
+    if (segment === "..") {
+      if (segments.length === 0) {
+        return null;
+      }
+      segments.pop();
+      continue;
+    }
+    segments.push(segment);
+  }
+  return segments.join("/") || null;
+}
+
+export function buildGitHubBlobUrl(input: {
+  remoteUrl: string | null | undefined;
+  branch: string | null | undefined;
+  path: string | null | undefined;
+  lineStart?: number;
+  lineEnd?: number;
+}): string | null {
+  const repo = parseGitHubRepoFromRemote(input.remoteUrl);
+  const branch = input.branch?.trim();
+  const filePath = normalizeGitHubBlobPath(input.path);
+  if (!repo || !branch || branch === "HEAD" || !filePath) {
+    return null;
+  }
+  const encodedBranch = branch.split("/").map(encodeURIComponent).join("/");
+  const encodedPath = filePath.split("/").map(encodeURIComponent).join("/");
+  let url = `https://github.com/${repo}/blob/${encodedBranch}/${encodedPath}`;
+  if (input.lineStart && input.lineStart > 0) {
+    url += `#L${input.lineStart}`;
+    if (input.lineEnd && input.lineEnd > input.lineStart) {
+      url += `-L${input.lineEnd}`;
+    }
+  }
+  return url;
+}

packages/app/src/git/policy.test.ts

@@ -366,45 +366,62 @@ describe("git-actions-policy", () => {
     );
   });
 
-  it("respects the ship preference when choosing between PR merge and local merge", () => {
-    const prPreferredActions = buildGitActions(
+  it("promotes ready PR merge over update-from-base", () => {
+    const actions = buildGitActions(
       createInput({
         hasRemote: true,
         isOnBaseBranch: false,
         aheadCount: 2,
+        behindBaseCount: 3,
         hasPullRequest: true,
         pullRequestUrl: "https://example.com/pr/456",
         pullRequestState: "open",
         pullRequestMergeable: "MERGEABLE",
-        pullRequestGithub: githubStatus(),
-        shipDefault: "pr",
-      }),
-    );
-    const localMergePreferredActions = buildGitActions(
-      createInput({
-        hasRemote: true,
-        isOnBaseBranch: false,
-        aheadCount: 2,
-        hasPullRequest: true,
-        pullRequestUrl: "https://example.com/pr/456",
-        pullRequestState: "open",
-        pullRequestMergeable: "MERGEABLE",
-        pullRequestGithub: githubStatus(),
-        shipDefault: "merge",
+        pullRequestGithub: githubStatus({ mergeStateStatus: "CLEAN" }),
       }),
     );
 
-    expect(prPreferredActions.primary).toMatchObject({
+    expect(actions.primary).toMatchObject({
       id: "merge-pr-squash",
       label: "Squash and merge",
     });
-    expect(localMergePreferredActions.primary).toMatchObject({
+  });
+
+  it("promotes local merge over update-from-base", () => {
+    const actions = buildGitActions(
+      createInput({
+        hasRemote: true,
+        isOnBaseBranch: false,
+        aheadCount: 2,
+        behindBaseCount: 3,
+      }),
+    );
+
+    expect(actions.primary).toMatchObject({
       id: "merge-branch",
       label: "Merge locally",
     });
-    expect(
-      localMergePreferredActions.secondary.some((action) => action.id === "merge-pr-squash"),
-    ).toBe(true);
+  });
+
+  it("promotes ready PR merge over local merge", () => {
+    const actions = buildGitActions(
+      createInput({
+        hasRemote: true,
+        isOnBaseBranch: false,
+        aheadCount: 2,
+        hasPullRequest: true,
+        pullRequestUrl: "https://example.com/pr/456",
+        pullRequestState: "open",
+        pullRequestMergeable: "MERGEABLE",
+        pullRequestGithub: githubStatus(),
+      }),
+    );
+
+    expect(actions.primary).toMatchObject({
+      id: "merge-pr-squash",
+      label: "Squash and merge",
+    });
+    expect(actions.secondary.some((action) => action.id === "merge-branch")).toBe(true);
   });
 
   it("keeps the merge-pr actions in the feature branch menu", () => {
@@ -648,7 +665,7 @@ describe("git-actions-policy", () => {
       }),
     );
 
-    expect(actions.primary).toMatchObject({ id: "pr", label: "View PR" });
+    expect(actions.primary).toMatchObject({ id: "merge-branch", label: "Merge locally" });
     expect(actions.secondary.some((action) => action.id.startsWith("enable-pr-auto-merge"))).toBe(
       false,
     );
@@ -675,6 +692,7 @@ describe("git-actions-policy", () => {
       }),
     );
 
+    expect(actions.primary).toMatchObject({ id: "pr", label: "View PR" });
     expect(actions.secondary).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
@@ -748,7 +766,7 @@ describe("git-actions-policy", () => {
       }),
     );
 
-    expect(actions.primary).toMatchObject({ id: "pr", label: "View PR" });
+    expect(actions.primary).toMatchObject({ id: "merge-branch", label: "Merge locally" });
     expect(
       actions.secondary.some((action) =>
         ["merge-pr-squash", "merge-pr-merge", "merge-pr-rebase"].includes(action.id),

packages/app/src/git/policy.ts

@@ -336,22 +336,22 @@ function getPrimaryActionId(input: BuildGitActionsInput): GitActionId | null {
   if (canPush(input)) {
     return "push";
   }
-  if (!input.isOnBaseBranch && canMergeFromBase(input)) {
-    return "merge-from-base";
-  }
-  if (canMergePr(input) && input.shipDefault === "pr") {
+  if (canMergePr(input)) {
     return getDefaultDirectPullRequestMergeActionId(input);
   }
-  if (canEnablePrAutoMerge(input) && input.shipDefault === "pr") {
+  if (canEnablePrAutoMerge(input)) {
     return getDefaultEnablePullRequestAutoMergeActionId(input);
   }
-  if (!input.isOnBaseBranch && input.aheadCount > 0 && input.shipDefault === "merge") {
-    return "merge-branch";
-  }
-  if (input.githubFeaturesEnabled && input.hasPullRequest && input.pullRequestUrl) {
+  if (hasEnabledPrAutoMerge(input)) {
     return "pr";
   }
   if (!input.isOnBaseBranch && input.aheadCount > 0) {
+    return "merge-branch";
+  }
+  if (!input.isOnBaseBranch && canMergeFromBase(input)) {
+    return "merge-from-base";
+  }
+  if (input.githubFeaturesEnabled && input.hasPullRequest && input.pullRequestUrl) {
     return "pr";
   }
   return null;
@@ -557,6 +557,16 @@ function canEnablePrAutoMerge(input: BuildGitActionsInput): boolean {
   );
 }
 
+function hasEnabledPrAutoMerge(input: BuildGitActionsInput): boolean {
+  return (
+    input.githubFeaturesEnabled &&
+    input.hasPullRequest &&
+    input.pullRequestUrl !== null &&
+    hasPullRequestGithubFacts(input.pullRequestGithub) &&
+    input.pullRequestGithub.autoMergeRequest !== null
+  );
+}
+
 function getPullUnavailableMessage(input: BuildGitActionsInput): string | undefined {
   if (!input.hasRemote) {
     return "Pull isn't available here because this branch is not connected to a remote yet";

packages/app/src/hooks/sidebar-status-view-model.test.ts

@@ -0,0 +1,213 @@
+import { describe, expect, it } from "vitest";
+import type { SidebarWorkspaceEntry } from "./sidebar-workspaces-view-model";
+import {
+  buildStatusGroups,
+  buildStatusShortcutIndex,
+  STATUS_BUCKET_LABELS,
+  STATUS_BUCKET_ORDER,
+  type StatusGroup,
+} from "./sidebar-status-view-model";
+
+function ws(
+  input: Partial<SidebarWorkspaceEntry> & { workspaceKey: string },
+): SidebarWorkspaceEntry {
+  return {
+    serverId: input.serverId ?? "srv",
+    workspaceId: input.workspaceId ?? input.workspaceKey.split(":")[1] ?? "ws",
+    projectKey: input.projectKey ?? "proj",
+    projectRootPath: input.projectRootPath,
+    workspaceDirectory: input.workspaceDirectory,
+    projectKind: input.projectKind ?? "git",
+    workspaceKind: input.workspaceKind ?? "worktree",
+    name: input.name ?? "main",
+    statusBucket: input.statusBucket ?? "done",
+    statusEnteredAt: input.statusEnteredAt ?? null,
+    archivingAt: null,
+    diffStat: null,
+    prHint: null,
+    archiveHasUncommittedChanges: null,
+    archiveUnpushedCommitCount: null,
+    scripts: [],
+    hasRunningScripts: false,
+    workspaceKey: input.workspaceKey,
+  };
+}
+
+function d(iso: string): Date {
+  return new Date(iso);
+}
+
+const emptyProjectNames = new Map<string, string>();
+
+describe("buildStatusGroups", () => {
+  it("groups workspaces by status bucket in fixed order", () => {
+    const workspaces = [
+      ws({ workspaceKey: "srv:done-ws", statusBucket: "done", name: "done-ws" }),
+      ws({
+        workspaceKey: "srv:needs-input-ws",
+        statusBucket: "needs_input",
+        name: "needs-input-ws",
+      }),
+      ws({ workspaceKey: "srv:running-ws", statusBucket: "running", name: "running-ws" }),
+    ];
+
+    const groups = buildStatusGroups(workspaces, emptyProjectNames);
+
+    expect(groups.map((g) => g.bucket)).toEqual(["needs_input", "running", "done"]);
+    expect(groups[0]?.label).toBe("Needs input");
+    expect(groups[1]?.label).toBe("Working");
+    expect(groups[2]?.label).toBe("Done");
+  });
+
+  it("omits empty buckets", () => {
+    const workspaces = [
+      ws({ workspaceKey: "srv:a", statusBucket: "done" }),
+      ws({ workspaceKey: "srv:b", statusBucket: "running" }),
+    ];
+
+    const groups = buildStatusGroups(workspaces, emptyProjectNames);
+
+    expect(groups.map((g) => g.bucket)).toEqual(["running", "done"]);
+  });
+
+  it("sorts by statusEnteredAt desc within a bucket", () => {
+    const workspaces = [
+      ws({
+        workspaceKey: "srv:old",
+        statusBucket: "done",
+        statusEnteredAt: d("2026-01-01T00:00:00Z"),
+      }),
+      ws({
+        workspaceKey: "srv:new",
+        statusBucket: "done",
+        statusEnteredAt: d("2026-06-01T00:00:00Z"),
+      }),
+      ws({
+        workspaceKey: "srv:mid",
+        statusBucket: "done",
+        statusEnteredAt: d("2026-03-01T00:00:00Z"),
+      }),
+    ];
+
+    const groups = buildStatusGroups(workspaces, emptyProjectNames);
+
+    expect(groups[0]?.rows.map((r) => r.workspaceKey)).toEqual(["srv:new", "srv:mid", "srv:old"]);
+  });
+
+  it("sorts null timestamps last within a bucket", () => {
+    const workspaces = [
+      ws({ workspaceKey: "srv:null-a", statusBucket: "done", statusEnteredAt: null }),
+      ws({
+        workspaceKey: "srv:ts",
+        statusBucket: "done",
+        statusEnteredAt: d("2026-01-01T00:00:00Z"),
+      }),
+      ws({ workspaceKey: "srv:null-b", statusBucket: "done", statusEnteredAt: null }),
+    ];
+
+    const groups = buildStatusGroups(workspaces, emptyProjectNames);
+
+    expect(groups[0]?.rows.map((r) => r.workspaceKey)).toEqual([
+      "srv:ts",
+      "srv:null-a",
+      "srv:null-b",
+    ]);
+  });
+
+  it("tie-breaks by project name, then workspace name, then workspaceKey", () => {
+    const projectNames = new Map<string, string>([
+      ["proj-b", "Beta"],
+      ["proj-a", "Alpha"],
+    ]);
+
+    const workspaces = [
+      ws({ workspaceKey: "srv:1", statusBucket: "done", projectKey: "proj-b", name: "zebra" }),
+      ws({ workspaceKey: "srv:2", statusBucket: "done", projectKey: "proj-a", name: "alpha" }),
+      ws({ workspaceKey: "srv:3", statusBucket: "done", projectKey: "proj-a", name: "alpha" }),
+    ];
+
+    const groups = buildStatusGroups(workspaces, projectNames);
+
+    expect(groups[0]?.rows.map((r) => r.workspaceKey)).toEqual(["srv:2", "srv:3", "srv:1"]);
+  });
+
+  it("returns empty array for no workspaces", () => {
+    const groups = buildStatusGroups([], emptyProjectNames);
+    expect(groups).toEqual([]);
+  });
+
+  it("uses hydrated workspace entries with real status, not structural placeholders", () => {
+    const workspaces = [
+      ws({
+        workspaceKey: "srv:ni",
+        statusBucket: "needs_input",
+        statusEnteredAt: d("2026-01-01T00:00:00Z"),
+      }),
+      ws({
+        workspaceKey: "srv:fail",
+        statusBucket: "failed",
+        statusEnteredAt: d("2026-01-01T00:00:00Z"),
+      }),
+      ws({
+        workspaceKey: "srv:att",
+        statusBucket: "attention",
+        statusEnteredAt: d("2026-01-01T00:00:00Z"),
+      }),
+      ws({
+        workspaceKey: "srv:run",
+        statusBucket: "running",
+        statusEnteredAt: d("2026-01-01T00:00:00Z"),
+      }),
+      ws({ workspaceKey: "srv:dn", statusBucket: "done", statusEnteredAt: null }),
+    ];
+
+    const groups = buildStatusGroups(workspaces, emptyProjectNames);
+
+    expect(groups.map((g) => g.bucket)).toEqual(STATUS_BUCKET_ORDER);
+    expect(groups.map((g) => g.label)).toEqual(
+      STATUS_BUCKET_ORDER.map((b) => STATUS_BUCKET_LABELS[b]),
+    );
+    // Each group has exactly one row with the matching bucket
+    for (const group of groups) {
+      expect(group.rows).toHaveLength(1);
+      expect(group.rows[0]?.statusBucket).toBe(group.bucket);
+    }
+  });
+});
+
+describe("buildStatusShortcutIndex", () => {
+  it("assigns sequential numbers in status visual order", () => {
+    const groups: StatusGroup[] = [
+      { bucket: "needs_input", label: "Needs input", rows: [ws({ workspaceKey: "srv:ni" })] },
+      {
+        bucket: "running",
+        label: "Working",
+        rows: [ws({ workspaceKey: "srv:run" }), ws({ workspaceKey: "srv:run2" })],
+      },
+      { bucket: "done", label: "Done", rows: [ws({ workspaceKey: "srv:dn" })] },
+    ];
+
+    const index = buildStatusShortcutIndex(groups);
+
+    expect(index.get("srv:ni")).toBe(1);
+    expect(index.get("srv:run")).toBe(2);
+    expect(index.get("srv:run2")).toBe(3);
+    expect(index.get("srv:dn")).toBe(4);
+  });
+
+  it("stops at 9 shortcuts", () => {
+    const rows = Array.from({ length: 12 }, (_, i) => ws({ workspaceKey: `srv:ws${i}` }));
+    const groups: StatusGroup[] = [{ bucket: "done", label: "Done", rows }];
+
+    const index = buildStatusShortcutIndex(groups);
+
+    expect(index.size).toBe(9);
+    expect(index.has("srv:ws8")).toBe(true);
+    expect(index.has("srv:ws9")).toBe(false);
+  });
+
+  it("returns empty map for empty groups", () => {
+    const index = buildStatusShortcutIndex([]);
+    expect(index.size).toBe(0);
+  });
+});

packages/app/src/hooks/sidebar-status-view-model.ts

@@ -0,0 +1,94 @@
+import type { SidebarWorkspaceEntry } from "@/hooks/sidebar-workspaces-view-model";
+
+export type StatusBucket = SidebarWorkspaceEntry["statusBucket"];
+
+export const STATUS_BUCKET_ORDER: readonly StatusBucket[] = [
+  "needs_input",
+  "failed",
+  "attention",
+  "running",
+  "done",
+] as const;
+
+export const STATUS_BUCKET_LABELS: Record<StatusBucket, string> = {
+  needs_input: "Needs input",
+  failed: "Failed",
+  attention: "Ready to review",
+  running: "Working",
+  done: "Done",
+};
+
+export interface StatusGroup {
+  bucket: StatusBucket;
+  label: string;
+  rows: SidebarWorkspaceEntry[];
+}
+
+export function buildStatusGroups(
+  workspaces: SidebarWorkspaceEntry[],
+  projectNamesByKey: Map<string, string>,
+): StatusGroup[] {
+  const bucketRows = new Map<StatusBucket, SidebarWorkspaceEntry[]>();
+
+  for (const ws of workspaces) {
+    const bucket: StatusBucket = ws.statusBucket;
+    let rows = bucketRows.get(bucket);
+    if (!rows) {
+      rows = [];
+      bucketRows.set(bucket, rows);
+    }
+    rows.push(ws);
+  }
+
+  const groups: StatusGroup[] = [];
+
+  for (const bucket of STATUS_BUCKET_ORDER) {
+    const rows = bucketRows.get(bucket);
+    if (!rows || rows.length === 0) continue;
+
+    rows.sort((a, b) => compareStatusRows(a, b, projectNamesByKey));
+    groups.push({ bucket, label: STATUS_BUCKET_LABELS[bucket], rows });
+  }
+
+  return groups;
+}
+
+function compareStatusRows(
+  a: SidebarWorkspaceEntry,
+  b: SidebarWorkspaceEntry,
+  projectNamesByKey: Map<string, string>,
+): number {
+  const aTime = a.statusEnteredAt?.getTime() ?? null;
+  const bTime = b.statusEnteredAt?.getTime() ?? null;
+
+  if (aTime !== null && bTime !== null) {
+    if (aTime !== bTime) return bTime - aTime;
+  } else if (aTime !== null) {
+    return -1;
+  } else if (bTime !== null) {
+    return 1;
+  }
+
+  const aProject = projectNamesByKey.get(a.projectKey) ?? "";
+  const bProject = projectNamesByKey.get(b.projectKey) ?? "";
+  const projectCmp = aProject.localeCompare(bProject);
+  if (projectCmp !== 0) return projectCmp;
+
+  const nameCmp = a.name.localeCompare(b.name);
+  if (nameCmp !== 0) return nameCmp;
+
+  return a.workspaceKey.localeCompare(b.workspaceKey);
+}
+
+export function buildStatusShortcutIndex(groups: StatusGroup[]): Map<string, number> {
+  const index = new Map<string, number>();
+  let shortcutNumber = 1;
+  for (const group of groups) {
+    for (const row of group.rows) {
+      if (shortcutNumber > 9) return index;
+      index.set(row.workspaceKey, shortcutNumber);
+      shortcutNumber += 1;
+    }
+  }
+  return index;
+}

packages/app/src/hooks/sidebar-workspaces-view-model.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import type { WorkspaceStructureProject } from "@/stores/session-store-hooks";
+import type { WorkspaceStructureProject } from "@/projects/workspace-structure";
 import {
   appendMissingOrderKeys,
   applyStoredOrdering,

packages/app/src/hooks/sidebar-workspaces-view-model.ts

@@ -1,6 +1,10 @@
 import type { PrHint } from "@/git/use-pr-status-query";
+import {
+  canCreateWorktreeForProjectKind,
+  type HostProjectListItem,
+} from "@/projects/host-project-model";
 import type { WorkspaceDescriptor } from "@/stores/session-store";
-import type { WorkspaceStructureProject } from "@/stores/session-store-hooks";
+import type { WorkspaceStructureProject } from "@/projects/workspace-structure";
 
 const EMPTY_PROJECTS: SidebarProjectEntry[] = [];
 
@@ -17,6 +21,7 @@ export interface SidebarWorkspaceEntry {
   workspaceKind: WorkspaceDescriptor["workspaceKind"];
   name: string;
   statusBucket: SidebarStateBucket;
+  statusEnteredAt: Date | null;
   archivingAt: string | null;
   diffStat: { additions: number; deletions: number } | null;
   prHint: PrHint | null;
@@ -31,12 +36,13 @@ export interface SidebarProjectEntry {
   projectName: string;
   projectKind: WorkspaceDescriptor["projectKind"];
   iconWorkingDir: string;
+  canCreateWorktree: boolean;
   workspaces: SidebarWorkspaceEntry[];
 }
 
 function createStructuralWorkspaceEntry(input: {
   serverId: string;
-  project: WorkspaceStructureProject;
+  project: HostProjectListItem;
   workspaceId: string;
 }): SidebarWorkspaceEntry {
   return {
@@ -50,6 +56,7 @@ function createStructuralWorkspaceEntry(input: {
     workspaceKind: "checkout",
     name: input.workspaceId,
     statusBucket: "done",
+    statusEnteredAt: null,
     archivingAt: null,
     diffStat: null,
     prHint: null,
@@ -63,6 +70,22 @@ function createStructuralWorkspaceEntry(input: {
 export function buildSidebarProjectsFromStructure(input: {
   serverId: string;
   projects: WorkspaceStructureProject[];
+}): SidebarProjectEntry[] {
+  return buildSidebarProjectsFromHostProjects({
+    projects: input.projects.map((project) => ({
+      serverId: input.serverId,
+      projectKey: project.projectKey,
+      projectName: project.projectName,
+      projectKind: project.projectKind,
+      iconWorkingDir: project.iconWorkingDir,
+      workspaceKeys: project.workspaceKeys,
+      canCreateWorktree: canCreateWorktreeForProjectKind(project.projectKind),
+    })),
+  });
+}
+
+export function buildSidebarProjectsFromHostProjects(input: {
+  projects: readonly HostProjectListItem[];
 }): SidebarProjectEntry[] {
   if (input.projects.length === 0) {
     return EMPTY_PROJECTS;
@@ -73,9 +96,10 @@ export function buildSidebarProjectsFromStructure(input: {
     projectName: project.projectName,
     projectKind: project.projectKind,
     iconWorkingDir: project.iconWorkingDir,
+    canCreateWorktree: project.canCreateWorktree,
     workspaces: project.workspaceKeys.map((workspaceId) =>
       createStructuralWorkspaceEntry({
-        serverId: input.serverId,
+        serverId: project.serverId,
         project,
         workspaceId,
       }),

packages/app/src/hooks/use-agent-screen-state-machine.test.ts

@@ -420,7 +420,7 @@ describe("deriveAgentScreenViewState", () => {
     expect(transitions.join(" -> ")).not.toContain("loading -> idle");
   });
 
-  it("keeps optimistic running status while authoritative agent is initializing", () => {
+  it("uses authoritative initializing status instead of optimistic running status", () => {
     const memory = createBaseMemory();
     const input: AgentScreenMachineInput = {
       ...createBaseInput(),
@@ -431,8 +431,8 @@ describe("deriveAgentScreenViewState", () => {
     const result = deriveAgentScreenViewState({ input, memory });
     const ready = expectReadyState(result.state);
 
-    expect(ready.source).toBe("optimistic");
-    expect(ready.agent.status).toBe("running");
+    expect(ready.source).toBe("authoritative");
+    expect(ready.agent.status).toBe("initializing");
   });
 
   it("hands off to authoritative once agent reaches running", () => {

packages/app/src/hooks/use-agent-screen-state-machine.ts

@@ -100,8 +100,7 @@ function updateInitialSyncFailureMemory(args: {
 
 function shouldUseOptimisticCreateFlowAgent(input: AgentScreenMachineInput): boolean {
   return (
-    input.continuity.kind === "optimistic-create" &&
-    (!input.agent || input.agent.status === "initializing" || input.agent.status === "idle")
+    input.continuity.kind === "optimistic-create" && (!input.agent || input.agent.status === "idle")
   );
 }
 

packages/app/src/hooks/use-clear-workspace-attention.ts

@@ -0,0 +1,37 @@
+import { useCallback, useMemo } from "react";
+import { getHostRuntimeStore } from "@/runtime/host-runtime";
+import { useSessionStore } from "@/stores/session-store";
+
+export interface ClearWorkspaceAttentionController {
+  hasClearableAttention: boolean;
+  clearAttention: () => Promise<void>;
+}
+
+export function useClearWorkspaceAttention({
+  serverId,
+  workspaceId,
+}: {
+  serverId: string;
+  workspaceId: string;
+}): ClearWorkspaceAttentionController {
+  const hasClearableAttention = useSessionStore((state) => {
+    const workspace = state.sessions[serverId]?.workspaces.get(workspaceId);
+    return workspace?.status === "attention" || workspace?.status === "failed";
+  });
+
+  const clearAttention = useCallback(async () => {
+    if (!hasClearableAttention) {
+      return;
+    }
+    const client = getHostRuntimeStore().getClient(serverId);
+    if (!client) {
+      throw new Error("Host is not connected");
+    }
+    await client.clearWorkspaceAttention(workspaceId);
+  }, [hasClearableAttention, serverId, workspaceId]);
+
+  return useMemo(
+    () => ({ hasClearableAttention, clearAttention }),
+    [clearAttention, hasClearableAttention],
+  );
+}

packages/app/src/hooks/use-container-width.test.ts

@@ -53,4 +53,28 @@ describe("useContainerWidthBelow", () => {
     expect(result.current.isBelow).toBe(false);
     expect(renderCount).toBe(2);
   });
+
+  it("ignores zero-width measurements from hidden mounted content", () => {
+    let renderCount = 0;
+    const { result } = renderHook(() => {
+      renderCount += 1;
+      return useContainerWidthBelow(700, { initialIsBelow: false });
+    });
+
+    expect(result.current.isBelow).toBe(false);
+
+    act(() => {
+      result.current.onLayout(layoutEvent(0));
+    });
+
+    expect(result.current.isBelow).toBe(false);
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      result.current.onLayout(layoutEvent(650));
+    });
+
+    expect(result.current.isBelow).toBe(true);
+    expect(renderCount).toBe(2);
+  });
 });

packages/app/src/hooks/use-container-width.ts

@@ -31,7 +31,11 @@ export function useContainerWidthBelow(
   return {
     onLayout: useCallback(
       (e: LayoutChangeEvent) => {
-        const nextIsBelow = e.nativeEvent.layout.width < threshold;
+        const width = e.nativeEvent.layout.width;
+        if (width <= 0) {
+          return;
+        }
+        const nextIsBelow = width < threshold;
         setIsBelow((currentIsBelow) =>
           currentIsBelow === nextIsBelow ? currentIsBelow : nextIsBelow,
         );

packages/app/src/hooks/use-explorer-open-gesture.ts

@@ -2,7 +2,11 @@ import { useCallback, useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import { Extrapolation, interpolate, runOnJS, useSharedValue } from "react-native-reanimated";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
+import {
+  MOBILE_VISUAL_PANEL_AGENT,
+  MOBILE_VISUAL_PANEL_FILE_EXPLORER,
+  useSidebarAnimation,
+} from "@/contexts/sidebar-animation-context";
 import { isWeb } from "@/constants/platform";
 
 interface UseExplorerOpenGestureParams {
@@ -23,14 +27,19 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
     gestureAnimatingRef,
     openGestureRef,
   } = useExplorerSidebarAnimation();
-  const { openGestureRef: leftOpenGestureRef } = useSidebarAnimation();
+  const {
+    mobileVisualPanel,
+    gestureAnimatingRef: mobilePanelGestureAnimatingRef,
+    openGestureRef: leftOpenGestureRef,
+  } = useSidebarAnimation();
   const touchStartX = useSharedValue(0);
   const touchStartY = useSharedValue(0);
 
   const handleGestureOpen = useCallback(() => {
     gestureAnimatingRef.current = true;
+    mobilePanelGestureAnimatingRef.current = true;
     onOpen();
-  }, [onOpen, gestureAnimatingRef]);
+  }, [onOpen, gestureAnimatingRef, mobilePanelGestureAnimatingRef]);
 
   return useMemo(
     () =>
@@ -59,6 +68,11 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
           const absDeltaX = Math.abs(deltaX);
           const absDeltaY = Math.abs(deltaY);
 
+          if (mobileVisualPanel.value !== MOBILE_VISUAL_PANEL_AGENT) {
+            stateManager.fail();
+            return;
+          }
+
           // Browser back-swipe owns most of the viewport; keep this gesture on the right edge.
           if (isWeb && touchStartX.value < windowWidth - MOBILE_WEB_EDGE_SWIPE_WIDTH) {
             stateManager.fail();
@@ -103,9 +117,11 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
           const shouldOpenByVelocity = event.velocityX < -500;
           const shouldOpen = shouldOpenByPosition || shouldOpenByVelocity;
           if (shouldOpen) {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_FILE_EXPLORER;
             animateToOpen();
             runOnJS(handleGestureOpen)();
           } else {
+            mobileVisualPanel.value = MOBILE_VISUAL_PANEL_AGENT;
             animateToClose();
           }
         })
@@ -117,6 +133,7 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
       windowWidth,
       translateX,
       backdropOpacity,
+      mobileVisualPanel,
       animateToOpen,
       animateToClose,
       isGesturing,

packages/app/src/hooks/use-keyboard-shortcuts.ts

@@ -24,6 +24,7 @@ import { getDesktopHost, isElectronRuntime } from "@/desktop/host";
 import { isImeComposingKeyboardEvent } from "@/utils/keyboard-ime";
 import { useActiveServerId } from "@/hooks/use-active-server-id";
 import {
+  type ActiveWorkspaceSelection,
   navigateToLastWorkspace,
   useActiveWorkspaceSelection,
 } from "@/stores/navigation-active-workspace-store";
@@ -56,6 +57,13 @@ export function useKeyboardShortcuts({
   const activeServerId = useActiveServerId();
   const openProjectPickerAction = useOpenProjectPicker(activeServerId);
   const activeWorkspaceSelection = useActiveWorkspaceSelection();
+  const keyboardWorkspaceSelectionRef = useRef<ActiveWorkspaceSelection | null>(null);
+
+  useEffect(() => {
+    if (activeWorkspaceSelection) {
+      keyboardWorkspaceSelectionRef.current = activeWorkspaceSelection;
+    }
+  }, [activeWorkspaceSelection]);
 
   useEffect(() => {
     if (!enabled) return;
@@ -95,6 +103,10 @@ export function useKeyboardShortcuts({
         case "dispatch":
           return keyboardActionDispatcher.dispatch(action.action);
         case "navigate-workspace":
+          keyboardWorkspaceSelectionRef.current = {
+            serverId: action.serverId,
+            workspaceId: action.workspaceId,
+          };
           navigateToWorkspace(action.serverId, action.workspaceId, { currentPathname: pathname });
           return true;
         case "navigate-last-workspace":
@@ -197,7 +209,8 @@ export function useKeyboardShortcuts({
           pathname,
           isMobile,
           sidebarShortcutTargets: store.sidebarShortcutWorkspaceTargets,
-          navigationActiveWorkspace: activeWorkspaceSelection,
+          navigationActiveWorkspace:
+            keyboardWorkspaceSelectionRef.current ?? activeWorkspaceSelection,
           commandCenterOpen: store.commandCenterOpen,
           shortcutsDialogOpen: store.shortcutsDialogOpen,
         },

packages/app/src/hooks/use-open-project.test.ts

@@ -17,6 +17,7 @@ function buildWorkspacePayload() {
     name: "project",
     archivingAt: null,
     status: "done" as const,
+    statusEnteredAt: null,
     activityAt: null,
     diffStat: null,
     scripts: [],

packages/app/src/hooks/use-preferred-editor.test.ts

@@ -20,6 +20,12 @@ describe("resolvePreferredEditorId", () => {
     );
   });
 
+  it("keeps custom script target ids as plain strings", () => {
+    expect(resolvePreferredEditorId(["script:open-in-nvim", "cursor"], "script:open-in-nvim")).toBe(
+      "script:open-in-nvim",
+    );
+  });
+
   it("returns null when no editors are available", () => {
     expect(resolvePreferredEditorId([], "cursor")).toBeNull();
   });

packages/app/src/hooks/use-preferred-editor.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { EditorTargetIdSchema, type EditorTargetId } from "@getpaseo/protocol/messages";
+import type { EditorTargetId } from "@/workspace/editor-targets";
 
 const PREFERRED_EDITOR_STORAGE_KEY = "@paseo:preferred-editor";
 const PREFERRED_EDITOR_QUERY_KEY = ["preferred-editor"];
@@ -11,8 +11,7 @@ async function loadPreferredEditor(): Promise<EditorTargetId | null> {
   if (!stored) {
     return null;
   }
-  const parsed = EditorTargetIdSchema.safeParse(stored);
-  return parsed.success ? parsed.data : null;
+  return stored.trim() || null;
 }
 
 export function resolvePreferredEditorId(

packages/app/src/hooks/use-projects.test.ts

@@ -6,7 +6,7 @@ import {
   type ProjectsHostInput,
   type ProjectsRuntime,
   type ProjectsRuntimeSnapshot,
-} from "./use-projects";
+} from "@/projects/aggregated-projects";
 
 type FetchWorkspaces = DaemonClient["fetchWorkspaces"];
 type FetchWorkspacesResult = Awaited<ReturnType<FetchWorkspaces>>;
@@ -84,6 +84,7 @@ function workspace(input: {
     name: input.id,
     archivingAt: null,
     status: "done",
+    statusEnteredAt: null,
     activityAt: null,
     diffStat: null,
     scripts: [],

packages/app/src/hooks/use-projects.ts

@@ -1,18 +1,21 @@
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
-import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
-import { normalizeWorkspaceDescriptor, type WorkspaceDescriptor } from "@/stores/session-store";
-import { buildProjects, type ProjectHost, type ProjectSummary } from "@/utils/projects";
+import type { ProjectSummary } from "@/utils/projects";
+import {
+  fetchAggregatedProjects,
+  type ProjectHostError,
+  type ProjectsHostInput,
+} from "@/projects/aggregated-projects";
+
+export type {
+  ProjectHostError,
+  ProjectsHostInput,
+  ProjectsRuntime,
+} from "@/projects/aggregated-projects";
 
 export const projectsQueryKey = ["projects"] as const;
 
-export interface ProjectHostError {
-  serverId: string;
-  serverName: string;
-  message: string;
-}
-
 export interface UseProjectsResult {
   projects: ProjectSummary[];
   hostErrors: ProjectHostError[];
@@ -21,116 +24,6 @@ export interface UseProjectsResult {
   refetch: () => void;
 }
 
-export interface ProjectsRuntimeSnapshot {
-  connectionStatus: string;
-}
-
-export interface ProjectsRuntime {
-  getClient(serverId: string): Pick<DaemonClient, "fetchWorkspaces"> | null;
-  getSnapshot(serverId: string): ProjectsRuntimeSnapshot | null | undefined;
-}
-
-export interface ProjectsHostInput {
-  serverId: string;
-  serverName: string;
-}
-
-export interface FetchAggregatedProjectsInput {
-  hosts: ProjectsHostInput[];
-  runtime: ProjectsRuntime;
-}
-
-export interface FetchAggregatedProjectsResult {
-  projects: ProjectSummary[];
-  hostErrors: ProjectHostError[];
-}
-
-interface HostWorkspacesResult {
-  host: ProjectHost;
-  error: ProjectHostError | null;
-}
-
-function toErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}
-
-async function fetchAllWorkspaceDescriptors(
-  client: Pick<DaemonClient, "fetchWorkspaces">,
-): Promise<WorkspaceDescriptor[]> {
-  const entries: WorkspaceDescriptor[] = [];
-  let cursor: string | null = null;
-
-  while (true) {
-    const payload = await client.fetchWorkspaces({
-      sort: [{ key: "name", direction: "asc" }],
-      page: cursor ? { limit: 200, cursor } : { limit: 200 },
-    });
-    entries.push(...payload.entries.map((entry) => normalizeWorkspaceDescriptor(entry)));
-    if (!payload.pageInfo.hasMore || !payload.pageInfo.nextCursor) {
-      break;
-    }
-    cursor = payload.pageInfo.nextCursor;
-  }
-
-  return entries;
-}
-
-export async function fetchAggregatedProjects(
-  input: FetchAggregatedProjectsInput,
-): Promise<FetchAggregatedProjectsResult> {
-  const results = await Promise.all(
-    input.hosts.map(async (host): Promise<HostWorkspacesResult> => {
-      const snapshot = input.runtime.getSnapshot(host.serverId);
-      const isOnline = snapshot?.connectionStatus === "online";
-      const client = input.runtime.getClient(host.serverId);
-
-      if (!client || !isOnline) {
-        return {
-          host: {
-            serverId: host.serverId,
-            serverName: host.serverName,
-            isOnline,
-            workspaces: [],
-          },
-          error: null,
-        };
-      }
-
-      try {
-        return {
-          host: {
-            serverId: host.serverId,
-            serverName: host.serverName,
-            isOnline,
-            workspaces: await fetchAllWorkspaceDescriptors(client),
-          },
-          error: null,
-        };
-      } catch (error) {
-        return {
-          host: {
-            serverId: host.serverId,
-            serverName: host.serverName,
-            isOnline,
-            workspaces: [],
-          },
-          error: {
-            serverId: host.serverId,
-            serverName: host.serverName,
-            message: toErrorMessage(error),
-          },
-        };
-      }
-    }),
-  );
-
-  const hostErrors = results.flatMap((result) => (result.error ? [result.error] : []));
-  return {
-    ...buildProjects({ hosts: results.map((result) => result.host) }),
-    hostErrors,
-  };
-}
-
 export function useProjects(): UseProjectsResult {
   const hosts = useHosts();
   const runtime = getHostRuntimeStore();

packages/app/src/hooks/use-sidebar-workspaces-list.ts

@@ -1,17 +1,17 @@
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
-import type { WorkspaceDescriptorPayload } from "@getpaseo/protocol/messages";
-import {
-  normalizeWorkspaceDescriptor,
-  useSessionStore,
-  type WorkspaceDescriptor,
-} from "@/stores/session-store";
+import { useCreateFlowStore, type PendingCreateAttempt } from "@/stores/create-flow-store";
+import { useSessionStore, type Agent, type WorkspaceDescriptor } from "@/stores/session-store";
+import { useWorkspaceFields } from "@/stores/session-store-hooks";
+import { deriveSidebarStateBucket } from "@/utils/sidebar-agent-state";
+import { normalizeWorkspacePath } from "@/utils/workspace-identity";
 import { selectPrHintFromStatus } from "@/git/use-pr-status-query";
-import { useWorkspaceStructure } from "@/stores/session-store-hooks";
+import { useHostProjects } from "@/projects/host-projects";
+import { fetchAllWorkspaceDescriptors } from "@/projects/workspace-fetching";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
 import { shouldSuppressWorkspaceForLocalArchive } from "@/contexts/session-workspace-upserts";
 import {
-  buildSidebarProjectsFromStructure,
+  buildSidebarProjectsFromHostProjects,
   computeSidebarOrderUpdates,
   deriveSidebarLoadingState,
   type SidebarProjectEntry,
@@ -21,6 +21,7 @@ import {
 export {
   appendMissingOrderKeys,
   applyStoredOrdering,
+  buildSidebarProjectsFromHostProjects,
   buildSidebarProjectsFromStructure,
   computeSidebarOrderUpdates,
   deriveSidebarLoadingState,
@@ -34,7 +35,10 @@ export {
 export function createSidebarWorkspaceEntry(input: {
   serverId: string;
   workspace: WorkspaceDescriptor;
+  pendingCreateAttempts?: Record<string, PendingCreateAttempt>;
+  agents?: Map<string, Agent>;
 }): SidebarWorkspaceEntry {
+  const effectiveStatus = deriveEffectiveWorkspaceStatus(input);
   return {
     workspaceKey: `${input.serverId}:${input.workspace.id}`,
     serverId: input.serverId,
@@ -45,7 +49,8 @@ export function createSidebarWorkspaceEntry(input: {
     projectKind: input.workspace.projectKind,
     workspaceKind: input.workspace.workspaceKind,
     name: input.workspace.name,
-    statusBucket: input.workspace.status,
+    statusBucket: effectiveStatus.status,
+    statusEnteredAt: effectiveStatus.enteredAt,
     archivingAt: input.workspace.archivingAt,
     diffStat: input.workspace.diffStat,
     prHint: selectPrHintFromStatus(input.workspace.githubRuntime?.pullRequest),
@@ -56,6 +61,110 @@ export function createSidebarWorkspaceEntry(input: {
   };
 }
 
+interface EffectiveWorkspaceStatus {
+  status: WorkspaceDescriptor["status"];
+  enteredAt: Date | null;
+}
+
+interface WorkspaceAgentActivity extends EffectiveWorkspaceStatus {}
+
+function deriveEffectiveWorkspaceStatus(input: {
+  serverId: string;
+  workspace: WorkspaceDescriptor;
+  pendingCreateAttempts?: Record<string, PendingCreateAttempt>;
+  agents?: Map<string, Agent>;
+}): EffectiveWorkspaceStatus {
+  if (input.workspace.status !== "done") {
+    return { status: input.workspace.status, enteredAt: input.workspace.statusEnteredAt };
+  }
+
+  const pendingStartedAt = getPendingInitialAgentCreateStartedAt({
+    serverId: input.serverId,
+    workspaceId: input.workspace.id,
+    pendingCreateAttempts: input.pendingCreateAttempts,
+  });
+  if (pendingStartedAt) {
+    return { status: "running", enteredAt: pendingStartedAt };
+  }
+
+  const rootAgentActivity = getRootAgentWorkspaceActivity({
+    workspace: input.workspace,
+    agents: input.agents,
+  });
+  if (rootAgentActivity && rootAgentActivity.status !== "done") {
+    return rootAgentActivity;
+  }
+
+  return { status: input.workspace.status, enteredAt: input.workspace.statusEnteredAt };
+}
+
+function getPendingInitialAgentCreateStartedAt(input: {
+  serverId: string;
+  workspaceId: string;
+  pendingCreateAttempts: Record<string, PendingCreateAttempt> | undefined;
+}): Date | null {
+  let latestStartedAt: Date | null = null;
+  for (const pending of Object.values(input.pendingCreateAttempts ?? {})) {
+    if (pending.serverId !== input.serverId) continue;
+    if (pending.workspaceId !== input.workspaceId) continue;
+    if (pending.lifecycle === "abandoned") continue;
+    const startedAt = new Date(pending.timestamp);
+    if (!latestStartedAt || startedAt > latestStartedAt) {
+      latestStartedAt = startedAt;
+    }
+  }
+  return latestStartedAt;
+}
+
+function getRootAgentWorkspaceActivity(input: {
+  workspace: WorkspaceDescriptor;
+  agents: Map<string, Agent> | undefined;
+}): WorkspaceAgentActivity | null {
+  const workspaceDirectory = normalizeWorkspacePath(input.workspace.workspaceDirectory);
+  if (!workspaceDirectory) {
+    return null;
+  }
+
+  let latest: WorkspaceAgentActivity | null = null;
+  for (const agent of input.agents?.values() ?? []) {
+    if (agent.archivedAt || agent.parentAgentId) continue;
+    if (normalizeWorkspacePath(agent.cwd) !== workspaceDirectory) continue;
+    const status = deriveSidebarStateBucket({
+      status: agent.status,
+      pendingPermissionCount: agent.pendingPermissions.length,
+      requiresAttention: agent.requiresAttention,
+      attentionReason: agent.attentionReason,
+    });
+    const enteredAt = agent.attentionTimestamp ?? agent.updatedAt;
+    if (!latest || enteredAt > (latest.enteredAt ?? new Date(0))) {
+      latest = { status, enteredAt };
+    }
+  }
+  return latest;
+}
+
+export function useSidebarWorkspaceEntry(
+  serverId: string | null,
+  workspaceId: string | null,
+): SidebarWorkspaceEntry | null {
+  const pendingCreateAttempts = useCreateFlowStore((state) => state.pendingByDraftId);
+  const agents = useSessionStore((state) =>
+    serverId ? state.sessions[serverId]?.agents : undefined,
+  );
+  const projectWorkspaceEntry = useCallback(
+    (workspace: WorkspaceDescriptor): SidebarWorkspaceEntry =>
+      createSidebarWorkspaceEntry({
+        serverId: serverId ?? "",
+        workspace,
+        pendingCreateAttempts,
+        agents,
+      }),
+    [agents, pendingCreateAttempts, serverId],
+  );
+
+  return useWorkspaceFields(serverId, workspaceId, projectWorkspaceEntry);
+}
+
 const EMPTY_ORDER: string[] = [];
 const EMPTY_PROJECTS: SidebarProjectEntry[] = [];
 
@@ -67,10 +176,6 @@ export interface SidebarWorkspacesListResult {
   refreshAll: () => void;
 }
 
-function toWorkspaceDescriptor(payload: WorkspaceDescriptorPayload): WorkspaceDescriptor {
-  return normalizeWorkspaceDescriptor(payload);
-}
-
 export function useSidebarWorkspacesList(options?: {
   serverId?: string | null;
   enabled?: boolean;
@@ -88,7 +193,7 @@ export function useSidebarWorkspacesList(options?: {
   const hasHydratedWorkspaces = useSessionStore((state) =>
     isActive && serverId ? (state.sessions[serverId]?.hasHydratedWorkspaces ?? false) : false,
   );
-  const workspaceStructure = useWorkspaceStructure(isActive ? serverId : null);
+  const hostProjects = useHostProjects(isActive ? serverId : null);
 
   const connectionStatus = useSyncExternalStore(
     (onStoreChange) =>
@@ -110,14 +215,13 @@ export function useSidebarWorkspacesList(options?: {
   );
 
   const projects = useMemo(() => {
-    if (!serverId || workspaceStructure.projects.length === 0) {
+    if (!serverId || hostProjects.length === 0) {
       return EMPTY_PROJECTS;
     }
-    return buildSidebarProjectsFromStructure({
-      serverId,
-      projects: workspaceStructure.projects,
+    return buildSidebarProjectsFromHostProjects({
+      projects: hostProjects,
     });
-  }, [serverId, workspaceStructure]);
+  }, [hostProjects, serverId]);
 
   useEffect(() => {
     if (!serverId) {
@@ -155,24 +259,16 @@ export function useSidebarWorkspacesList(options?: {
     }
     void (async () => {
       const next = new Map<string, WorkspaceDescriptor>();
-      let cursor: string | null = null;
       try {
-        while (true) {
-          const payload = await client.fetchWorkspaces({
-            sort: [{ key: "activity_at", direction: "desc" }],
-            page: cursor ? { limit: 200, cursor } : { limit: 200 },
-          });
-          for (const entry of payload.entries) {
-            const workspace = toWorkspaceDescriptor(entry);
-            if (shouldSuppressWorkspaceForLocalArchive({ serverId, workspace })) {
-              continue;
-            }
-            next.set(workspace.id, workspace);
+        const workspaces = await fetchAllWorkspaceDescriptors({
+          client,
+          sort: [{ key: "activity_at", direction: "desc" }],
+        });
+        for (const workspace of workspaces) {
+          if (shouldSuppressWorkspaceForLocalArchive({ serverId, workspace })) {
+            continue;
           }
-          if (!payload.pageInfo.hasMore || !payload.pageInfo.nextCursor) {
-            break;
-          }
-          cursor = payload.pageInfo.nextCursor;
+          next.set(workspace.id, workspace);
         }
         const store = useSessionStore.getState();
         store.setWorkspaces(serverId, next);
@@ -180,7 +276,6 @@ export function useSidebarWorkspacesList(options?: {
       } catch (error) {
         console.error("[WorkspaceFetch][sidebar-refresh] failed", {
           serverId,
-          cursor,
           error,
         });
         // ignore explicit refresh failures; hook keeps existing data

packages/app/src/hooks/use-status-mode-workspaces.ts

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { useCreateFlowStore } from "@/stores/create-flow-store";
+import { useSessionStore } from "@/stores/session-store";
+import {
+  createSidebarWorkspaceEntry,
+  type SidebarProjectEntry,
+  type SidebarWorkspaceEntry,
+} from "./use-sidebar-workspaces-list";
+
+const EMPTY_WORKSPACES: SidebarWorkspaceEntry[] = [];
+
+export function useStatusModeWorkspaceEntries(input: {
+  serverId: string | null;
+  projects: SidebarProjectEntry[];
+}): SidebarWorkspaceEntry[] {
+  const workspaces = useSessionStore((state) =>
+    input.serverId ? state.sessions[input.serverId]?.workspaces : undefined,
+  );
+  const agents = useSessionStore((state) =>
+    input.serverId ? state.sessions[input.serverId]?.agents : undefined,
+  );
+  const pendingCreateAttempts = useCreateFlowStore((state) => state.pendingByDraftId);
+
+  return useMemo(() => {
+    if (!input.serverId || input.projects.length === 0 || !workspaces) {
+      return EMPTY_WORKSPACES;
+    }
+
+    const entries: SidebarWorkspaceEntry[] = [];
+    for (const placedWorkspace of input.projects.flatMap((project) => project.workspaces)) {
+      const workspace = workspaces.get(placedWorkspace.workspaceId);
+      entries.push(
+        workspace
+          ? createSidebarWorkspaceEntry({
+              serverId: input.serverId,
+              workspace,
+              pendingCreateAttempts,
+              agents,
+            })
+          : placedWorkspace,
+      );
+    }
+    return entries;
+  }, [agents, input.projects, input.serverId, pendingCreateAttempts, workspaces]);
+}
+
+export function useProjectNamesMap(serverId: string | null): Map<string, string> {
+  const workspaces = useSessionStore((state) =>
+    serverId ? state.sessions[serverId]?.workspaces : undefined,
+  );
+
+  return useMemo(() => {
+    const map = new Map<string, string>();
+    if (!serverId || !workspaces) return map;
+    for (const workspace of workspaces.values()) {
+      const key = workspace.project?.projectKey ?? workspace.projectId;
+      if (!map.has(key)) {
+        map.set(key, workspace.projectCustomName ?? workspace.projectDisplayName);
+      }
+    }
+    return map;
+  }, [serverId, workspaces]);
+}

packages/app/src/keyboard/keyboard-shortcuts.test.ts

@@ -329,6 +329,8 @@ describe("keyboard-shortcuts", () => {
       context: { isMac: true, isDesktop: false },
       action: "workspace.navigate.relative",
       payload: { delta: -1 },
+      preventDefault: true,
+      stopPropagation: true,
     },
     {
       name: "matches Alt+] to next workspace on macOS web when Option substitutes event.key",
@@ -336,6 +338,8 @@ describe("keyboard-shortcuts", () => {
       context: { isMac: true, isDesktop: false },
       action: "workspace.navigate.relative",
       payload: { delta: 1 },
+      preventDefault: true,
+      stopPropagation: true,
     },
     {
       name: "matches Alt+Shift+W to close current tab on macOS web when Option substitutes event.key",

packages/app/src/keyboard/route-shortcut.test.ts

@@ -134,6 +134,13 @@ describe("routeKeyboardShortcut — workspace.navigate.index", () => {
 });
 
 describe("routeKeyboardShortcut — workspace.navigate.relative", () => {
+  const STATUS_VISUAL_TARGETS = [
+    { serverId: "srv", workspaceId: "needs-input" },
+    { serverId: "srv", workspaceId: "running-new" },
+    { serverId: "srv", workspaceId: "running-old" },
+    { serverId: "srv", workspaceId: "done" },
+  ] as const;
+
   it("uses the retained navigation workspace selection over a stale pathname", () => {
     expect(
       routeKeyboardShortcut(
@@ -150,6 +157,57 @@ describe("routeKeyboardShortcut — workspace.navigate.relative", () => {
     });
   });
 
+  it("moves from status row 2 to row 3 using status visual target order", () => {
+    expect(
+      routeKeyboardShortcut(
+        { action: "workspace.navigate.relative", payload: { delta: 1 } },
+        makeCtx({
+          pathname: "/h/srv/workspace/ui-expose-archive-worktrees-on-merge",
+          sidebarShortcutTargets: STATUS_VISUAL_TARGETS,
+          navigationActiveWorkspace: { serverId: "srv", workspaceId: "running-new" },
+        }),
+      ),
+    ).toEqual<ShortcutAction>({
+      kind: "navigate-workspace",
+      serverId: "srv",
+      workspaceId: "running-old",
+    });
+  });
+
+  it("moves backward from status row 2 to row 1 using status visual target order", () => {
+    expect(
+      routeKeyboardShortcut(
+        { action: "workspace.navigate.relative", payload: { delta: -1 } },
+        makeCtx({
+          pathname: "/h/srv/workspace/ui-expose-archive-worktrees-on-merge",
+          sidebarShortcutTargets: STATUS_VISUAL_TARGETS,
+          navigationActiveWorkspace: { serverId: "srv", workspaceId: "running-new" },
+        }),
+      ),
+    ).toEqual<ShortcutAction>({
+      kind: "navigate-workspace",
+      serverId: "srv",
+      workspaceId: "needs-input",
+    });
+  });
+
+  it("moves backward from status row 3 to row 2 using status visual target order", () => {
+    expect(
+      routeKeyboardShortcut(
+        { action: "workspace.navigate.relative", payload: { delta: -1 } },
+        makeCtx({
+          pathname: "/h/srv/workspace/running-old",
+          sidebarShortcutTargets: STATUS_VISUAL_TARGETS,
+          navigationActiveWorkspace: { serverId: "srv", workspaceId: "running-old" },
+        }),
+      ),
+    ).toEqual<ShortcutAction>({
+      kind: "navigate-workspace",
+      serverId: "srv",
+      workspaceId: "running-new",
+    });
+  });
+
   it("falls back to the pathname workspace when no retained selection exists", () => {
     expect(
       routeKeyboardShortcut(

packages/app/src/projects/aggregated-projects.ts

@@ -0,0 +1,103 @@
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import type { WorkspaceDescriptor } from "@/stores/session-store";
+import { fetchAllWorkspaceDescriptors } from "@/projects/workspace-fetching";
+import { buildProjects, type ProjectHost, type ProjectSummary } from "@/utils/projects";
+
+export interface ProjectHostError {
+  serverId: string;
+  serverName: string;
+  message: string;
+}
+
+export interface ProjectsRuntimeSnapshot {
+  connectionStatus: string;
+}
+
+export interface ProjectsRuntime {
+  getClient(serverId: string): Pick<DaemonClient, "fetchWorkspaces"> | null;
+  getSnapshot(serverId: string): ProjectsRuntimeSnapshot | null | undefined;
+}
+
+export interface ProjectsHostInput {
+  serverId: string;
+  serverName: string;
+}
+
+export interface FetchAggregatedProjectsInput {
+  hosts: ProjectsHostInput[];
+  runtime: ProjectsRuntime;
+}
+
+export interface FetchAggregatedProjectsResult {
+  projects: ProjectSummary[];
+  hostErrors: ProjectHostError[];
+}
+
+interface HostWorkspacesResult {
+  host: ProjectHost;
+  error: ProjectHostError | null;
+}
+
+function toErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+export async function fetchAggregatedProjects(
+  input: FetchAggregatedProjectsInput,
+): Promise<FetchAggregatedProjectsResult> {
+  const results = await Promise.all(
+    input.hosts.map(async (host): Promise<HostWorkspacesResult> => {
+      const snapshot = input.runtime.getSnapshot(host.serverId);
+      const isOnline = snapshot?.connectionStatus === "online";
+      const client = input.runtime.getClient(host.serverId);
+
+      if (!client || !isOnline) {
+        return {
+          host: {
+            serverId: host.serverId,
+            serverName: host.serverName,
+            isOnline,
+            workspaces: [],
+          },
+          error: null,
+        };
+      }
+
+      try {
+        const workspaces: WorkspaceDescriptor[] = await fetchAllWorkspaceDescriptors({
+          client,
+          sort: [{ key: "name", direction: "asc" }],
+        });
+        return {
+          host: {
+            serverId: host.serverId,
+            serverName: host.serverName,
+            isOnline,
+            workspaces,
+          },
+          error: null,
+        };
+      } catch (error) {
+        return {
+          host: {
+            serverId: host.serverId,
+            serverName: host.serverName,
+            isOnline,
+            workspaces: [],
+          },
+          error: {
+            serverId: host.serverId,
+            serverName: host.serverName,
+            message: toErrorMessage(error),
+          },
+        };
+      }
+    }),
+  );
+
+  const hostErrors = results.flatMap((result) => (result.error ? [result.error] : []));
+  return {
+    ...buildProjects({ hosts: results.map((result) => result.host) }),
+    hostErrors,
+  };
+}

packages/app/src/projects/host-project-model.ts

@@ -0,0 +1,117 @@
+import type { WorkspaceDescriptor } from "@/stores/session-store";
+import type { WorkspaceStructureProject } from "@/projects/workspace-structure";
+
+export interface HostProjectListItem {
+  serverId: string;
+  projectKey: string;
+  projectName: string;
+  projectKind: WorkspaceDescriptor["projectKind"];
+  iconWorkingDir: string;
+  workspaceKeys: string[];
+  canCreateWorktree: boolean;
+}
+
+export interface HostProjectRouteContext {
+  serverId: string;
+  projectId?: string;
+  displayName?: string;
+  sourceDirectory?: string;
+}
+
+function trimOptional(value: string | undefined): string | undefined {
+  const trimmed = value?.trim() ?? "";
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+export function canCreateWorktreeForProjectKind(
+  projectKind: WorkspaceDescriptor["projectKind"],
+): boolean {
+  return projectKind === "git";
+}
+
+export function buildHostProjectList(input: {
+  serverId: string;
+  projects: readonly WorkspaceStructureProject[];
+}): HostProjectListItem[] {
+  return input.projects.map((project) => ({
+    serverId: input.serverId,
+    projectKey: project.projectKey,
+    projectName: project.projectName,
+    projectKind: project.projectKind,
+    iconWorkingDir: project.iconWorkingDir,
+    workspaceKeys: project.workspaceKeys,
+    canCreateWorktree: canCreateWorktreeForProjectKind(project.projectKind),
+  }));
+}
+
+export function hostProjectFromRoute(route: HostProjectRouteContext): HostProjectListItem | null {
+  const projectKey = trimOptional(route.projectId);
+  const iconWorkingDir = trimOptional(route.sourceDirectory);
+  if (!projectKey || !iconWorkingDir) {
+    return null;
+  }
+  return {
+    serverId: route.serverId,
+    projectKey,
+    projectName: trimOptional(route.displayName) ?? projectKey,
+    projectKind: "git",
+    iconWorkingDir,
+    workspaceKeys: [],
+    canCreateWorktree: true,
+  };
+}
+
+export function hostProjectFromWorkspace(input: {
+  serverId: string;
+  workspace: WorkspaceDescriptor | null;
+}): HostProjectListItem | null {
+  if (!input.workspace) {
+    return null;
+  }
+  const projectKey = input.workspace.projectId.trim();
+  const iconWorkingDir = input.workspace.projectRootPath.trim();
+  if (!projectKey || !iconWorkingDir) {
+    return null;
+  }
+  return {
+    serverId: input.serverId,
+    projectKey,
+    projectName: input.workspace.projectDisplayName || projectKey,
+    projectKind: input.workspace.projectKind,
+    iconWorkingDir,
+    workspaceKeys: [input.workspace.id],
+    canCreateWorktree: canCreateWorktreeForProjectKind(input.workspace.projectKind),
+  };
+}
+
+export function resolveInitialWorktreeProject(input: {
+  routeProject: HostProjectListItem | null;
+  lastActiveProject: HostProjectListItem | null;
+  projects: readonly HostProjectListItem[];
+}): HostProjectListItem | null {
+  if (input.routeProject?.canCreateWorktree) {
+    return input.routeProject;
+  }
+  if (input.lastActiveProject?.canCreateWorktree) {
+    return input.lastActiveProject;
+  }
+  return input.projects.find((project) => project.canCreateWorktree) ?? null;
+}
+
+export function resolveSelectedHostProject(input: {
+  selectedProjectKey: string | null;
+  projects: readonly HostProjectListItem[];
+  routeProject: HostProjectListItem | null;
+  lastActiveProject: HostProjectListItem | null;
+}): HostProjectListItem | null {
+  const selectedProjectKey = input.selectedProjectKey?.trim() ?? "";
+  if (!selectedProjectKey) {
+    return null;
+  }
+
+  return (
+    input.projects.find((project) => project.projectKey === selectedProjectKey) ??
+    (input.routeProject?.projectKey === selectedProjectKey ? input.routeProject : null) ??
+    (input.lastActiveProject?.projectKey === selectedProjectKey ? input.lastActiveProject : null)
+  );
+}

packages/app/src/projects/host-projects.test.ts

@@ -0,0 +1,205 @@
+import { describe, expect, it } from "vitest";
+import type { WorkspaceDescriptor } from "@/stores/session-store";
+import type { WorkspaceStructureProject } from "@/projects/workspace-structure";
+import {
+  buildHostProjectList,
+  canCreateWorktreeForProjectKind,
+  hostProjectFromRoute,
+  hostProjectFromWorkspace,
+  resolveInitialWorktreeProject,
+  resolveSelectedHostProject,
+  type HostProjectListItem,
+} from "./host-project-model";
+
+function structureProject(input: Partial<WorkspaceStructureProject>): WorkspaceStructureProject {
+  return {
+    projectKey: input.projectKey ?? "project-a",
+    projectName: input.projectName ?? "Project A",
+    projectKind: input.projectKind ?? "git",
+    iconWorkingDir: input.iconWorkingDir ?? "/repo/a",
+    workspaceKeys: input.workspaceKeys ?? ["workspace-a"],
+  };
+}
+
+function hostProject(input: Partial<HostProjectListItem>): HostProjectListItem {
+  return {
+    serverId: input.serverId ?? "host-a",
+    projectKey: input.projectKey ?? "project-a",
+    projectName: input.projectName ?? "Project A",
+    projectKind: input.projectKind ?? "git",
+    iconWorkingDir: input.iconWorkingDir ?? "/repo/a",
+    workspaceKeys: input.workspaceKeys ?? ["workspace-a"],
+    canCreateWorktree: input.canCreateWorktree ?? true,
+  };
+}
+
+function workspace(input: Partial<WorkspaceDescriptor>): WorkspaceDescriptor {
+  return {
+    id: input.id ?? "workspace-a",
+    projectId: input.projectId ?? "project-a",
+    projectDisplayName: input.projectDisplayName ?? "Project A",
+    projectRootPath: input.projectRootPath ?? "/repo/a",
+    workspaceDirectory: input.workspaceDirectory ?? "/repo/a",
+    projectKind: input.projectKind ?? "git",
+    workspaceKind: input.workspaceKind ?? "local_checkout",
+    name: input.name ?? "main",
+    status: input.status ?? "done",
+    statusEnteredAt: input.statusEnteredAt ?? null,
+    archivingAt: input.archivingAt ?? null,
+    diffStat: input.diffStat ?? null,
+    scripts: input.scripts ?? [],
+  };
+}
+
+const routeProject = hostProject({
+  projectKey: "route-project",
+  projectName: "Route Project",
+  iconWorkingDir: "/repo/route",
+});
+const lastActiveProject = hostProject({
+  projectKey: "last-project",
+  projectName: "Last Project",
+  iconWorkingDir: "/repo/last",
+});
+const firstProject = hostProject({
+  projectKey: "first-project",
+  projectName: "First Project",
+  iconWorkingDir: "/repo/first",
+});
+
+describe("host project list", () => {
+  it("preserves workspace-structure order and project metadata", () => {
+    expect(
+      buildHostProjectList({
+        serverId: "host-a",
+        projects: [
+          structureProject({
+            projectKey: "project-b",
+            projectName: "Project B",
+            projectKind: "directory",
+            iconWorkingDir: "/repo/b",
+            workspaceKeys: ["workspace-b"],
+          }),
+          structureProject({
+            projectKey: "project-a",
+            projectName: "Project A",
+            projectKind: "git",
+            iconWorkingDir: "/repo/a",
+            workspaceKeys: ["workspace-a"],
+          }),
+        ],
+      }),
+    ).toEqual([
+      {
+        serverId: "host-a",
+        projectKey: "project-b",
+        projectName: "Project B",
+        projectKind: "directory",
+        iconWorkingDir: "/repo/b",
+        workspaceKeys: ["workspace-b"],
+        canCreateWorktree: false,
+      },
+      {
+        serverId: "host-a",
+        projectKey: "project-a",
+        projectName: "Project A",
+        projectKind: "git",
+        iconWorkingDir: "/repo/a",
+        workspaceKeys: ["workspace-a"],
+        canCreateWorktree: true,
+      },
+    ]);
+  });
+
+  it("keeps worktree capability separate from project listability", () => {
+    expect(canCreateWorktreeForProjectKind("git")).toBe(true);
+    expect(canCreateWorktreeForProjectKind("directory")).toBe(false);
+  });
+
+  it("uses route project before last active project when it can create worktrees", () => {
+    expect(
+      resolveInitialWorktreeProject({
+        routeProject,
+        lastActiveProject,
+        projects: [firstProject],
+      }),
+    ).toEqual(routeProject);
+  });
+
+  it("skips non-worktree route and last-active projects", () => {
+    expect(
+      resolveInitialWorktreeProject({
+        routeProject: { ...routeProject, projectKind: "directory", canCreateWorktree: false },
+        lastActiveProject: {
+          ...lastActiveProject,
+          projectKind: "directory",
+          canCreateWorktree: false,
+        },
+        projects: [
+          { ...firstProject, projectKind: "directory", canCreateWorktree: false },
+          hostProject({ projectKey: "git-project", projectName: "Git Project" }),
+        ],
+      }),
+    ).toMatchObject({ projectKey: "git-project" });
+  });
+
+  it("leaves the project empty when no worktree-capable project is available", () => {
+    expect(
+      resolveInitialWorktreeProject({
+        routeProject: null,
+        lastActiveProject: null,
+        projects: [{ ...firstProject, projectKind: "directory", canCreateWorktree: false }],
+      }),
+    ).toBeNull();
+  });
+
+  it("keeps a selected route project available before project hydration", () => {
+    expect(
+      resolveSelectedHostProject({
+        selectedProjectKey: routeProject.projectKey,
+        projects: [],
+        routeProject,
+        lastActiveProject: null,
+      }),
+    ).toEqual(routeProject);
+  });
+
+  it("converts route project only when it has a key and source directory", () => {
+    expect(
+      hostProjectFromRoute({
+        serverId: "host-a",
+        projectId: "project-a",
+        displayName: "Project A",
+        sourceDirectory: "/repo/a",
+      }),
+    ).toEqual({
+      serverId: "host-a",
+      projectKey: "project-a",
+      projectName: "Project A",
+      projectKind: "git",
+      iconWorkingDir: "/repo/a",
+      workspaceKeys: [],
+      canCreateWorktree: true,
+    });
+    expect(hostProjectFromRoute({ serverId: "host-a", projectId: "project-a" })).toBeNull();
+  });
+
+  it("converts last active workspaces with matching worktree capability", () => {
+    expect(hostProjectFromWorkspace({ serverId: "host-a", workspace: workspace({}) })).toEqual({
+      serverId: "host-a",
+      projectKey: "project-a",
+      projectName: "Project A",
+      projectKind: "git",
+      iconWorkingDir: "/repo/a",
+      workspaceKeys: ["workspace-a"],
+      canCreateWorktree: true,
+    });
+
+    expect(
+      hostProjectFromWorkspace({
+        serverId: "host-a",
+        workspace: workspace({ projectKind: "directory" }),
+      }),
+    ).toMatchObject({ projectKind: "directory", canCreateWorktree: false });
+  });
+});

packages/app/src/projects/host-projects.ts

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { useWorkspaceStructure } from "@/stores/session-store-hooks";
+import { buildHostProjectList, type HostProjectListItem } from "@/projects/host-project-model";
+
+export {
+  buildHostProjectList,
+  canCreateWorktreeForProjectKind,
+  hostProjectFromRoute,
+  hostProjectFromWorkspace,
+  resolveInitialWorktreeProject,
+  resolveSelectedHostProject,
+  type HostProjectListItem,
+  type HostProjectRouteContext,
+} from "@/projects/host-project-model";
+
+export function useHostProjects(serverId: string | null): HostProjectListItem[] {
+  const workspaceStructure = useWorkspaceStructure(serverId);
+  return useMemo(() => {
+    if (!serverId || workspaceStructure.projects.length === 0) {
+      return [];
+    }
+    return buildHostProjectList({ serverId, projects: workspaceStructure.projects });
+  }, [serverId, workspaceStructure.projects]);
+}

packages/app/src/projects/project-icons.ts

@@ -0,0 +1,97 @@
+import { useMemo, useRef } from "react";
+import { useQueries } from "@tanstack/react-query";
+import { getHostRuntimeStore, isHostRuntimeConnected } from "@/runtime/host-runtime";
+import { projectIconQueryKey, projectIconToDataUri } from "@/hooks/use-project-icon-query";
+
+export interface ProjectIconRequestTarget {
+  serverId?: string | null;
+  projectKey: string;
+  iconWorkingDir: string;
+}
+
+function useStableProjectIconData(
+  data: (string | null)[],
+  signature: string,
+): readonly (string | null)[] {
+  const stableRef = useRef<{ signature: string; data: (string | null)[] } | null>(null);
+  if (stableRef.current?.signature !== signature) {
+    stableRef.current = { signature, data };
+  }
+  return stableRef.current.data;
+}
+
+export function useProjectIconDataByProjectKey(input: {
+  serverId: string | null;
+  projects: readonly ProjectIconRequestTarget[];
+}): Map<string, string | null> {
+  const projectIconRequests = useMemo(() => {
+    const unique = new Map<string, { serverId: string; cwd: string }>();
+    for (const project of input.projects) {
+      const serverId = project.serverId || input.serverId;
+      if (!serverId) {
+        continue;
+      }
+      const cwd = project.iconWorkingDir.trim();
+      if (!cwd) {
+        continue;
+      }
+      unique.set(`${serverId}:${cwd}`, { serverId, cwd });
+    }
+    return Array.from(unique.values());
+  }, [input.projects, input.serverId]);
+
+  const projectIconQueries = useQueries({
+    queries: projectIconRequests.map((request) => ({
+      queryKey: projectIconQueryKey(request.serverId, request.cwd),
+      queryFn: async () => {
+        const client = getHostRuntimeStore().getClient(request.serverId);
+        if (!client) {
+          return null;
+        }
+        const result = await client.requestProjectIcon(request.cwd);
+        return result.icon;
+      },
+      select: projectIconToDataUri,
+      enabled: Boolean(
+        getHostRuntimeStore().getClient(request.serverId) &&
+        isHostRuntimeConnected(getHostRuntimeStore().getSnapshot(request.serverId)) &&
+        request.cwd,
+      ),
+      staleTime: Infinity,
+      gcTime: 1000 * 60 * 60,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    })),
+  });
+
+  const projectIconSignature = projectIconQueries.map((query) => query.data ?? "").join("\u0000");
+  const projectIconData = useStableProjectIconData(
+    projectIconQueries.map((query) => query.data ?? null),
+    projectIconSignature,
+  );
+
+  return useMemo(() => {
+    const iconByServerAndCwd = new Map<string, string | null>();
+    for (let index = 0; index < projectIconRequests.length; index += 1) {
+      const request = projectIconRequests[index];
+      if (!request) {
+        continue;
+      }
+      iconByServerAndCwd.set(`${request.serverId}:${request.cwd}`, projectIconData[index] ?? null);
+    }
+
+    const byProject = new Map<string, string | null>();
+    for (const project of input.projects) {
+      const serverId = project.serverId || input.serverId;
+      const cwd = project.iconWorkingDir.trim();
+      if (!cwd || !serverId) {
+        byProject.set(project.projectKey, null);
+        continue;
+      }
+      byProject.set(project.projectKey, iconByServerAndCwd.get(`${serverId}:${cwd}`) ?? null);
+    }
+
+    return byProject;
+  }, [input.projects, input.serverId, projectIconData, projectIconRequests]);
+}

packages/app/src/projects/workspace-fetching.ts

@@ -0,0 +1,29 @@
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import { normalizeWorkspaceDescriptor, type WorkspaceDescriptor } from "@/stores/session-store";
+
+export type FetchWorkspacesClient = Pick<DaemonClient, "fetchWorkspaces">;
+export type FetchWorkspacesSort = NonNullable<
+  Parameters<DaemonClient["fetchWorkspaces"]>[0]
+>["sort"];
+
+export async function fetchAllWorkspaceDescriptors(input: {
+  client: FetchWorkspacesClient;
+  sort: FetchWorkspacesSort;
+}): Promise<WorkspaceDescriptor[]> {
+  const entries: WorkspaceDescriptor[] = [];
+  let cursor: string | null = null;
+
+  while (true) {
+    const payload = await input.client.fetchWorkspaces({
+      sort: input.sort,
+      page: cursor ? { limit: 200, cursor } : { limit: 200 },
+    });
+    entries.push(...payload.entries.map((entry) => normalizeWorkspaceDescriptor(entry)));
+    if (!payload.pageInfo.hasMore || !payload.pageInfo.nextCursor) {
+      break;
+    }
+    cursor = payload.pageInfo.nextCursor;
+  }
+
+  return entries;
+}

packages/app/src/projects/workspace-structure.ts

@@ -0,0 +1,96 @@
+import type { WorkspaceDescriptor } from "@/stores/session-store";
+import { projectDisplayNameFromProjectId } from "@/utils/project-display-name";
+
+export interface WorkspaceStructureProject {
+  projectKey: string;
+  projectName: string;
+  projectKind: WorkspaceDescriptor["projectKind"];
+  iconWorkingDir: string;
+  workspaceKeys: string[];
+}
+
+export interface WorkspaceStructure {
+  projects: WorkspaceStructureProject[];
+}
+
+const EMPTY_WORKSPACE_STRUCTURE: WorkspaceStructure = { projects: [] };
+
+function compareWorkspaceStructureItems(
+  left: { workspaceId: string; workspaceName: string },
+  right: { workspaceId: string; workspaceName: string },
+): number {
+  const nameDelta = left.workspaceName.localeCompare(right.workspaceName, undefined, {
+    numeric: true,
+    sensitivity: "base",
+  });
+  if (nameDelta !== 0) {
+    return nameDelta;
+  }
+
+  return left.workspaceId.localeCompare(right.workspaceId, undefined, {
+    sensitivity: "base",
+  });
+}
+
+function compareWorkspaceStructureProjects(
+  left: WorkspaceStructureProject,
+  right: WorkspaceStructureProject,
+): number {
+  return left.projectName.localeCompare(right.projectName, undefined, {
+    numeric: true,
+    sensitivity: "base",
+  });
+}
+
+export function buildWorkspaceStructureProjects(input: {
+  serverId: string;
+  workspaces: Iterable<WorkspaceDescriptor>;
+}): WorkspaceStructureProject[] {
+  const workspaceList = Array.from(input.workspaces);
+  if (workspaceList.length === 0) {
+    return EMPTY_WORKSPACE_STRUCTURE.projects;
+  }
+
+  const byProject = new Map<
+    string,
+    WorkspaceStructureProject & {
+      workspaces: Array<{ workspaceId: string; workspaceName: string; workspaceKey: string }>;
+    }
+  >();
+
+  for (const workspace of workspaceList) {
+    const project =
+      byProject.get(workspace.projectId) ??
+      ({
+        projectKey: workspace.projectId,
+        projectName:
+          workspace.projectDisplayName || projectDisplayNameFromProjectId(workspace.projectId),
+        projectKind: workspace.projectKind,
+        iconWorkingDir: workspace.projectRootPath,
+        workspaceKeys: [],
+        workspaces: [],
+      } satisfies WorkspaceStructureProject & {
+        workspaces: Array<{ workspaceId: string; workspaceName: string; workspaceKey: string }>;
+      });
+
+    project.workspaces.push({
+      workspaceId: workspace.id,
+      workspaceName: workspace.name,
+      workspaceKey: `${input.serverId}:${workspace.id}`,
+    });
+    byProject.set(workspace.projectId, project);
+  }
+
+  const projects = Array.from(byProject.values()).map(
+    ({ workspaces: projectWorkspaces, ...project }) => {
+      const sortedWorkspaces = [...projectWorkspaces].sort(compareWorkspaceStructureItems);
+
+      return Object.assign({}, project, {
+        workspaceKeys: sortedWorkspaces.map((workspace) => workspace.workspaceId),
+      });
+    },
+  );
+
+  projects.sort(compareWorkspaceStructureProjects);
+  return projects;
+}

packages/app/src/review/surface.tsx

@@ -11,11 +11,12 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { Button } from "@/components/ui/button";
 import { Shortcut } from "@/components/ui/shortcut";
 import { isWeb } from "@/constants/platform";
 import { inlineUnistylesStyle } from "@/styles/unistyles-inline-style";
+import type { Theme } from "@/styles/theme";
 import type { ShortcutKey } from "@/utils/format-shortcut";
 import { useWorkspaceFocusRestoration } from "@/workspace/focus";
 import { useReviewDraftComments, useReviewDraftStore, type ReviewDraftComment } from "./store";
@@ -77,6 +78,14 @@ const INLINE_REVIEW_GAP = 6;
 export const SMALL_ACTION_HIT_SLOP = 8;
 const REVIEW_CANCEL_SHORTCUT_KEYS: ShortcutKey[] = ["Esc"];
 const REVIEW_SAVE_SHORTCUT_KEYS: ShortcutKey[] = ["mod", "Enter"];
+const foregroundMutedIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const destructiveIconColorMapping = (theme: Theme) => ({ color: theme.colors.destructive });
+const accentForegroundIconColorMapping = (theme: Theme) => ({
+  color: theme.colors.accentForeground,
+});
+const ThemedPencil = withUnistyles(Pencil);
+const ThemedPlus = withUnistyles(Plus);
+const ThemedTrash2 = withUnistyles(Trash2);
 
 export interface InlineReviewEditorState {
   target: ReviewableDiffTarget;
@@ -274,6 +283,7 @@ export function InlineReviewGutterCell({
   isLineHovered = false,
   onStartComment,
   style,
+  actionTestID,
 }: {
   children: ReactNode;
   reviewTarget: ReviewableDiffTarget | null | undefined;
@@ -282,8 +292,8 @@ export function InlineReviewGutterCell({
   isLineHovered?: boolean;
   onStartComment: (target: ReviewableDiffTarget) => void;
   style?: StyleProp<ViewStyle>;
+  actionTestID?: string;
 }) {
-  const { theme } = useUnistyles();
   const canComment = Boolean(reviewTarget);
   const hasComments = comments.length > 0;
   const [isGutterHovered, setIsGutterHovered] = useState(false);
@@ -345,8 +355,8 @@ export function InlineReviewGutterCell({
         <View style={labelStyle}>
           {children}
           {showAction ? (
-            <View style={styles.gutterActionIcon}>
-              <Plus size={16} strokeWidth={2.4} color={theme.colors.accentForeground} />
+            <View style={styles.gutterActionIcon} testID={actionTestID}>
+              <ThemedPlus size={16} strokeWidth={2.4} uniProps={accentForegroundIconColorMapping} />
             </View>
           ) : null}
         </View>
@@ -429,8 +439,6 @@ function CommentRow({
   onEditComment: (target: ReviewableDiffTarget, comment: ReviewDraftComment) => void;
   onDeleteComment: (id: string) => void;
 }) {
-  const { theme } = useUnistyles();
-
   const handleEdit = useCallback(
     () => onEditComment(reviewTarget, comment),
     [onEditComment, reviewTarget, comment],
@@ -455,7 +463,7 @@ function CommentRow({
           onPress={handleEdit}
           style={iconButtonStyle}
         >
-          <Pencil size={14} color={theme.colors.foregroundMuted} />
+          <ThemedPencil size={14} uniProps={foregroundMutedIconColorMapping} />
         </Pressable>
         <Pressable
           accessibilityRole="button"
@@ -465,7 +473,7 @@ function CommentRow({
           onPress={handleDelete}
           style={iconButtonDestructiveStyle}
         >
-          <Trash2 size={14} color={theme.colors.destructive} />
+          <ThemedTrash2 size={14} uniProps={destructiveIconColorMapping} />
         </Pressable>
       </View>
     </View>
@@ -499,7 +507,6 @@ export function InlineReviewEditor({
   onSave: (body: string) => void;
   testID?: string;
 }) {
-  const { theme } = useUnistyles();
   const inputRef = useRef<TextInput | null>(null);
   const focus = useWorkspaceFocusRestoration();
   const canShowKeyboardHints = useCanShowReviewKeyboardHints();
@@ -577,7 +584,7 @@ export function InlineReviewEditor({
         accessibilityLabel="Review comment"
         testID={testID ? `${testID}-input` : undefined}
         placeholder="Leave a comment"
-        placeholderTextColor={theme.colors.foregroundMuted}
+        placeholderTextColor={styles.placeholderColor.color}
         multiline
         value={body}
         onChangeText={setBody}
@@ -617,16 +624,16 @@ export function InlineReviewEditor({
 const styles = StyleSheet.create((theme) => ({
   gutterInner: {
     minHeight: theme.lineHeight.diff,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
     overflow: "visible",
   },
   gutterLabel: {
     width: "100%",
     minWidth: 0,
     height: theme.lineHeight.diff,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
     position: "relative",
     overflow: "visible",
   },
@@ -646,6 +653,9 @@ const styles = StyleSheet.create((theme) => ({
     zIndex: 10,
     elevation: 10,
   },
+  placeholderColor: {
+    color: theme.colors.foregroundMuted,
+  },
   threadContainer: {
     flex: 1,
     minWidth: 0,