chore(release): cut 0.1.52

Add diffAddition/diffDeletion semantic tokens with separate light
(muted green-700/red-700) and dark (bright green-400/red-500) sets,
spread into themes so individual variants can override. Update all
diff stat consumers to use the new tokens.

Soften tooltip border to match dropdown menu styling (thinner border,
accent color, medium shadow).

.github/workflows/ci.yml

@@ -0,0 +1,171 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Check formatting
+        run: npx biome format .
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
+      - name: Build relay dependency
+        run: npm run build --workspace=@getpaseo/relay
+
+      - name: Typecheck all packages
+        run: npm run typecheck
+
+  server-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Fetch origin/main (worktree tests)
+        run: git fetch --no-tags origin main:refs/remotes/origin/main
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
+      - name: Build relay dependency
+        run: npm run build --workspace=@getpaseo/relay
+
+      - name: Run server tests
+        run: npm run test --workspace=@getpaseo/server
+        env:
+          CLAUDE_CODE_OAUTH_TOKEN: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+
+  app-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run app unit tests
+        run: npm run test --workspace=@getpaseo/app
+
+  playwright:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
+      - name: Build relay dependency
+        run: npm run build --workspace=@getpaseo/relay
+
+      - name: Run Playwright E2E tests
+        run: npm run test:e2e --workspace=@getpaseo/app
+        env:
+          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+
+      - name: Upload test artifacts
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-results
+          path: |
+            packages/app/test-results/
+            packages/app/playwright-report/
+          retention-days: 7
+
+  relay-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build relay
+        run: npm run build --workspace=@getpaseo/relay
+
+      - name: Run relay tests
+        run: npm run test --workspace=@getpaseo/relay
+
+  cli-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
+      - name: Run CLI tests
+        run: npm run test --workspace=@getpaseo/cli
+        env:
+          PASEO_LOCAL_SPEECH_AUTO_DOWNLOAD: '0'
+          PASEO_DICTATION_ENABLED: '0'
+          PASEO_VOICE_MODE_ENABLED: '0'

.github/workflows/desktop-release.yml

@@ -35,8 +35,43 @@ env:
   DESKTOP_PACKAGE_PATH: 'packages/desktop'
 
 jobs:
+  create-release:
+    if: ${{ (github.event_name == 'push' && !startsWith(github.ref_name, 'desktop-macos-v') && !startsWith(github.ref_name, 'desktop-linux-v') && !startsWith(github.ref_name, 'desktop-windows-v')) || (github.event_name == 'workflow_dispatch' && github.event.inputs.platform == 'all') }}
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: scripts
+          ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
+
+      - name: Resolve release metadata
+        shell: bash
+        run: node scripts/emit-release-env.mjs --source-tag "$SOURCE_TAG" >> "$GITHUB_ENV"
+
+      - name: Create GitHub release
+        if: env.IS_SMOKE_TAG != 'true'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          if gh release view "$RELEASE_TAG" --repo "${{ github.repository }}" > /dev/null 2>&1; then
+            echo "Release $RELEASE_TAG already exists, skipping creation"
+          else
+            prerelease_flag=""
+            if [[ "$IS_PRERELEASE" == "true" ]]; then
+              prerelease_flag="--prerelease"
+            fi
+            gh release create "$RELEASE_TAG" \
+              --repo "${{ github.repository }}" \
+              --title "Paseo $RELEASE_TAG" \
+              --generate-notes \
+              $prerelease_flag
+          fi
+
   publish-macos:
-    if: ${{ (github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'macos')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-macos-v'))) }}
+    needs: [create-release]
+    if: ${{ always() && (needs.create-release.result == 'success' || needs.create-release.result == 'skipped') && ((github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'macos')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-macos-v')))) }}
     strategy:
       fail-fast: false
       matrix:
@@ -219,7 +254,8 @@ jobs:
         run: gh release upload "$RELEASE_TAG" latest-mac.yml --clobber --repo "${{ github.repository }}"
 
   publish-linux:
-    if: ${{ (github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'linux')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-linux-v'))) }}
+    needs: [create-release]
+    if: ${{ always() && (needs.create-release.result == 'success' || needs.create-release.result == 'skipped') && ((github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'linux')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-linux-v')))) }}
     permissions:
       contents: write
       packages: read
@@ -285,7 +321,8 @@ jobs:
           npm run build --workspace="$DESKTOP_WORKSPACE" -- --publish "$publish_mode" --linux --x64 "${publish_args[@]}"
 
   publish-windows:
-    if: ${{ (github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'windows')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-windows-v'))) }}
+    needs: [create-release]
+    if: ${{ always() && (needs.create-release.result == 'success' || needs.create-release.result == 'skipped') && ((github.event_name == 'workflow_dispatch' && (github.event.inputs.platform == 'all' || github.event.inputs.platform == 'windows')) || (github.event_name == 'push' && (startsWith(github.ref_name, 'v') || startsWith(github.ref_name, 'desktop-v') || startsWith(github.ref_name, 'desktop-windows-v')))) }}
     permissions:
       contents: write
       packages: read

CHANGELOG.md

@@ -1,12 +1,71 @@
 # Changelog
 
+## 0.1.52 - 2026-04-10
+
+### Added
+- Theme selector — choose from six themes including Midnight, Claude, and Ghostty dark variants.
+- Branch switching — switch git branches directly from the workspace header, with automatic stash and restore for uncommitted changes.
+- Auto-download updates — desktop updates download silently in the background so they're ready to install when you are.
+
+### Fixed
+- Layout now responds correctly when resizing the window or rotating a tablet — previously the app could get stuck in mobile layout on a large screen.
+- Terminal no longer causes massive memory spikes from snapshot thrashing during heavy output.
+- Typing in the terminal works reliably — special keys, Ctrl combos, and paste are handled natively by the terminal emulator.
+- Initializing agents no longer show a loading spinner as if they're running.
+- Reconnecting to a running agent now works even when session persistence is unavailable.
+- Error screens on desktop are now scrollable.
+- Model list refreshes in the background when you open the model selector.
+- Draft agent feature preferences (like thinking mode) are remembered across sessions.
+
+## 0.1.51 - 2026-04-09
+
+### Added
+- Image attachments for OpenCode — attach screenshots and images to OpenCode agent prompts.
+- WebStorm — added to the "Open in editor" list alongside Cursor, VS Code, and Zed.
+- Send behavior setting — choose whether pressing Enter while an agent is running interrupts immediately or queues your message.
+
+### Fixed
+- Model selector no longer crashes on iPad.
+- Pairing now uses the correct hostname, fixing connection failures on some network setups.
+- OpenCode agents show the correct terminal state and refresh models reliably.
+- Follow-up messages to agents that just finished a turn now work correctly.
+- Commands now load properly for Pi agents.
+- Internal debug output no longer appears in Claude agent timelines.
+- QR scan screen cleaned up with simpler visuals.
+
+## 0.1.50 - 2026-04-07
+
+### Added
+- Context window meter — see how much of the context window your agent has used, with color thresholds at 70% and 90%. Works with Claude Code, Codex, and OpenCode.
+- Open in editor — jump from any workspace straight into Cursor, VS Code, Zed, or your file manager. Paseo remembers your choice.
+- Side-by-side diffs — toggle between unified and split-column diff views, with a whitespace visibility option.
+- Spoken messages — when using voice mode, agent speech now appears as regular messages in the conversation instead of raw tool output.
+- Plan actions — plan cards now show the actions your agent supports (e.g. "Implement", "Deny") instead of generic accept/reject buttons.
+- Background git fetch — ahead/behind counts in the Changes pane stay up to date automatically.
+
+### Improved
+- Workspaces load instantly on connect instead of waiting for a full sync.
+- File explorer and diff pane remember which folders are expanded when you switch tabs.
+- Closing a workspace tab is now instant.
+- Settings shows a Refresh button for providers and displays error details inline.
+- Reload agent moved away from the close button to prevent accidental taps.
+
+### Fixed
+- Voice mode no longer drifts into false speech detection during long sessions.
+- Garbled overlapping text on plan cards.
+- Changes pane could show stale diffs when working with git worktrees.
+- Restarting an agent quickly could crash the session.
+- Copilot no longer pauses for permission prompts in autopilot mode.
+- Connection and pairing dialogs now display correctly on tablets.
+- Orchestration errors from agents are now surfaced instead of silently lost.
+- Diff stats no longer reset to zero when reconnecting.
+
 ## 0.1.49 - 2026-04-07
 
 ### Fixed
-- Provider/model selector hydration on app connect — session state now seeds daemon feature flags immediately, so provider snapshots and model lists load reliably on first open instead of waiting for a later status refresh.
-- Running agent model picker now stays scoped to the agent's current provider instead of exposing all providers from the shared snapshot cache.
-- Provider snapshot warm-up now happens at the session layer instead of per workspace screen, so model data is prefetched consistently across entry points.
-- Removed the remaining legacy provider/model fetch fallbacks in the app so draft and running-agent flows both use the same real-time provider snapshot path.
+- Models and providers now load reliably on first connect instead of requiring a manual refresh.
+- Model picker only shows models from the agent's own provider, not every provider on the server.
+- Model lists stay consistent regardless of which screen you open first.
 
 ## 0.1.48 - 2026-04-05
 

CLAUDE.md

@@ -45,7 +45,7 @@ See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requir
 - **NEVER assume a timeout means the service needs restarting** — timeouts can be transient.
 - **NEVER add auth checks to tests** — agent providers handle their own auth.
 - **Always run typecheck after every change.**
-- **NEVER make breaking changes to WebSocket or message schemas.** The mobile app in the App Store always lags behind the daemon, and daemons in the wild lag behind new app releases. Both directions must work. Every schema change MUST be backward-compatible:
+- **NEVER make breaking changes to WebSocket or message schemas.** The primary compatibility path is old mobile app clients talking to newly updated daemons. Users update desktop and daemon first, then keep running the old app for a while. Every schema change MUST be backward-compatible for old clients against new daemons:
   - New fields: always `.optional()` with a sensible default or `.transform()` fallback.
   - Never change a field from optional to required.
   - Never remove a field — deprecate it (keep accepting it, stop sending it).

CONTRIBUTING.md

@@ -0,0 +1,168 @@
+# Contributing to Paseo
+
+Thanks for taking the time to contribute.
+
+## How this project works
+
+Paseo is a BDFL project. Product direction, scope, and what ships are the maintainer's call.
+
+This means:
+
+- PRs submitted without prior discussion will likely be rejected, heavily modified, or scoped down.
+- The maintainer may rewrite, split, cherry-pick from, or close any PR at their discretion.
+- There is no obligation to merge a PR as-submitted, regardless of code quality.
+
+This is not meant to discourage contributions. It is meant to set clear expectations so nobody wastes their time.
+
+## How to contribute
+
+1. **Open an issue first.** Describe the problem or improvement. Get a thumbs up before writing code.
+2. **Keep it small.** One bug, one flow, one focused change.
+3. **Open a PR** once there is alignment on scope.
+
+If you want to propose a direction change, start a conversation.
+
+## Before you start
+
+Please read these first:
+
+- [README.md](README.md)
+- [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md)
+- [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md)
+- [docs/CODING_STANDARDS.md](docs/CODING_STANDARDS.md)
+- [docs/TESTING.md](docs/TESTING.md)
+- [CLAUDE.md](CLAUDE.md)
+
+## What is most helpful
+
+The most useful contributions right now are:
+
+- bug fixes
+- windows and linux specific fixes
+- regression fixes
+- doc improvements
+- packaging / platform fixes
+- focused UX improvements that fit the existing product direction
+- tests that lock down important behavior
+
+## Scope expectations
+
+Please keep PRs narrow.
+
+Good:
+
+- fix one bug
+- improve one flow
+- add one focused panel or command
+- tighten one piece of UI
+
+Bad:
+
+- combine multiple product ideas in one PR
+- bundle unrelated refactors with a feature
+- sneak in roadmap decisions
+
+If a contribution contains multiple ideas, split it up.
+
+## Product fit matters
+
+Paseo is an opinionated product.
+
+When reviewing contributions, the bar is not just:
+
+- is this useful?
+- is this well implemented?
+
+It is also:
+
+- does this fit Paseo?
+- does this add product surface that will be hard to maintain?
+- does the value justify the maintenance surface it adds?
+- does this solve a common need or over-serve an edge case?
+- does this preserve the product's current direction?
+
+## Development setup
+
+### Prerequisites
+
+- Node.js matching `.tool-versions`
+- npm workspaces
+
+### Start local development
+
+```bash
+# runs both daemon and expo app
+npm run dev
+```
+
+Useful commands:
+
+```bash
+npm run dev:server
+npm run dev:app
+npm run dev:desktop
+npm run dev:website
+npm run cli -- ls -a -g
+```
+
+Read [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for build-sync gotchas, local state, ports, and daemon details.
+
+## Multi-platform testing
+
+Paseo ships to mobile (iOS/Android), web, and desktop (Electron). Every UI change must be tested on mobile and web at minimum, and desktop if relevant. Things that look fine on one surface regularly break on another.
+
+Common checks:
+
+```bash
+npm run typecheck
+npm run test --workspaces --if-present
+```
+
+Important rules:
+
+- always run `npm run typecheck` after changes
+- tests should be deterministic
+- prefer real dependencies over mocks when possible
+- do not make breaking WebSocket / protocol changes
+- app and daemon versions in the wild lag each other, so compatibility matters
+
+If you touch protocol or shared client/server behavior, read the compatibility notes in [CLAUDE.md](CLAUDE.md).
+
+## Coding standards
+
+Paseo has explicit standards. Follow them.
+
+The full guide lives in [docs/CODING_STANDARDS.md](docs/CODING_STANDARDS.md).
+
+## PR checklist
+
+Before opening a PR, make sure:
+
+- there was prior discussion and alignment on scope (issue or conversation)
+- the change is focused, one idea per PR
+- the PR description explains what changed and why
+- **UI changes include screenshots or videos** for every affected platform (mobile, web, desktop)
+- UI changes have been tested on mobile and web at minimum
+- typecheck passes
+- tests pass, or you clearly explain what could not be run
+- relevant docs were updated if needed
+
+## Communication
+
+If you are unsure whether something fits, ask first.
+
+That is especially true for:
+
+- new core UX
+- naming / terminology changes
+- new extension points
+- new orchestration models
+- anything that would be hard to remove later
+
+Early alignment saves everyone time.
+
+## Forks are fine
+
+If you want to explore a different product direction, a fork is completely fine.
+
+Paseo is open source on purpose. Not every idea needs to land in the main repo to be valuable.

docs/DATA_MODEL.md

@@ -0,0 +1,428 @@
+# Data Model
+
+Paseo uses **file-based JSON persistence** instead of a traditional database. All data is validated at runtime with Zod schemas and written atomically (write to temp file, then rename). There are no migrations — schemas use optional fields with defaults for forward compatibility.
+
+All server-side stores live under `$PASEO_HOME` (defaults to `~/.paseo`).
+
+---
+
+## Directory layout
+
+```
+$PASEO_HOME/
+├── config.json                          # Daemon configuration
+├── agents/
+│   └── {project-dir}/
+│       └── {agentId}.json               # One file per agent
+├── schedules/
+│   └── {scheduleId}.json                # One file per schedule
+├── chat/
+│   └── rooms.json                       # All rooms + messages
+├── loops/
+│   └── loops.json                       # All loop records
+├── projects/
+│   ├── projects.json                    # Project registry
+│   └── workspaces.json                  # Workspace registry
+└── push-tokens.json                     # Expo push notification tokens
+```
+
+---
+
+## 1. Agent Record
+
+**Path:** `$PASEO_HOME/agents/{project-dir}/{agentId}.json`
+
+Each agent is stored as a separate JSON file, grouped by project directory.
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | UUID, primary key |
+| `provider` | `string` | Agent provider (`"claude"`, `"codex"`, `"opencode"`, etc.) |
+| `cwd` | `string` | Working directory the agent operates in |
+| `createdAt` | `string` (ISO 8601) | Creation timestamp |
+| `updatedAt` | `string` (ISO 8601) | Last update timestamp |
+| `lastActivityAt` | `string?` (ISO 8601) | Last activity timestamp |
+| `lastUserMessageAt` | `string?` (ISO 8601) | Last user message timestamp |
+| `title` | `string?` | User-visible title |
+| `labels` | `Record<string, string>` | Key-value labels (default `{}`) |
+| `lastStatus` | `AgentStatus` | One of: `"initializing"`, `"idle"`, `"running"`, `"error"`, `"closed"` |
+| `lastModeId` | `string?` | Last active mode ID |
+| `config` | `SerializableConfig?` | Agent session configuration (see below) |
+| `runtimeInfo` | `RuntimeInfo?` | Live runtime state (see below) |
+| `features` | `AgentFeature[]?` | Provider-reported features (toggles/selects) |
+| `persistence` | `PersistenceHandle?` | Handle for resuming sessions |
+| `requiresAttention` | `boolean?` | Whether the agent needs user attention |
+| `attentionReason` | `"finished" \| "error" \| "permission"?` | Why attention is needed |
+| `attentionTimestamp` | `string?` (ISO 8601) | When attention was flagged |
+| `internal` | `boolean?` | Whether this is a system-internal agent (loop workers, etc.) |
+| `archivedAt` | `string?` (ISO 8601) | Soft-delete timestamp |
+
+### Nested: SerializableConfig
+
+| Field | Type | Description |
+|---|---|---|
+| `title` | `string?` | Configured title |
+| `modeId` | `string?` | Configured mode |
+| `model` | `string?` | Configured model |
+| `thinkingOptionId` | `string?` | Thinking/reasoning level |
+| `featureValues` | `Record<string, unknown>?` | Feature preference overrides |
+| `extra` | `Record<string, any>?` | Provider-specific config |
+| `systemPrompt` | `string?` | Custom system prompt |
+| `mcpServers` | `Record<string, any>?` | MCP server configurations |
+
+### Nested: RuntimeInfo
+
+| Field | Type | Description |
+|---|---|---|
+| `provider` | `string` | Active provider |
+| `sessionId` | `string?` | Active session ID |
+| `model` | `string?` | Active model |
+| `thinkingOptionId` | `string?` | Active thinking option |
+| `modeId` | `string?` | Active mode |
+| `extra` | `Record<string, unknown>?` | Provider-specific runtime data |
+
+### Nested: PersistenceHandle
+
+| Field | Type | Description |
+|---|---|---|
+| `provider` | `string` | Provider that owns the session |
+| `sessionId` | `string` | Session ID for resumption |
+| `nativeHandle` | `any?` | Provider-specific handle (Codex thread ID, Claude resume token, etc.) |
+| `metadata` | `Record<string, any>?` | Extra metadata |
+
+### Nested: AgentFeature (discriminated union on `type`)
+
+**Toggle:**
+
+| Field | Type |
+|---|---|
+| `type` | `"toggle"` |
+| `id` | `string` |
+| `label` | `string` |
+| `description` | `string?` |
+| `tooltip` | `string?` |
+| `icon` | `string?` |
+| `value` | `boolean` |
+
+**Select:**
+
+| Field | Type |
+|---|---|
+| `type` | `"select"` |
+| `id` | `string` |
+| `label` | `string` |
+| `description` | `string?` |
+| `tooltip` | `string?` |
+| `icon` | `string?` |
+| `value` | `string?` |
+| `options` | `AgentSelectOption[]` |
+
+---
+
+## 2. Daemon Configuration
+
+**Path:** `$PASEO_HOME/config.json`
+
+Single file, validated with `PersistedConfigSchema`.
+
+```
+{
+  version: 1,
+  daemon: {
+    listen: "127.0.0.1:6767",
+    allowedHosts: true | string[],
+    mcp: { enabled: boolean },
+    cors: { allowedOrigins: string[] },
+    relay: { enabled: boolean, endpoint: string, publicEndpoint: string }
+  },
+  app: {
+    baseUrl: string
+  },
+  providers: {
+    openai: { apiKey: string },
+    local: { modelsDir: string }
+  },
+  agents: {
+    providers: {
+      [provider: string]: {
+        command: { mode: "default" } | { mode: "append", args: string[] } | { mode: "replace", argv: string[] },
+        env: Record<string, string>
+      }
+    }
+  },
+  features: {
+    dictation: { enabled, stt: { provider, model, confidenceThreshold } },
+    voiceMode: { enabled, llm, stt, turnDetection, tts: { provider, model, voice, speakerId, speed } }
+  },
+  log: {
+    level, format,
+    console: { level, format },
+    file: { level, path, rotate: { maxSize, maxFiles } }
+  }
+}
+```
+
+All fields are optional with sensible defaults.
+
+---
+
+## 3. Schedule
+
+**Path:** `$PASEO_HOME/schedules/{id}.json`
+
+One file per schedule. ID is 8 hex characters.
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | 8-char hex ID |
+| `name` | `string?` | Human-readable name |
+| `prompt` | `string` | The prompt to send |
+| `cadence` | `ScheduleCadence` | Timing (see below) |
+| `target` | `ScheduleTarget` | What to run (see below) |
+| `status` | `"active" \| "paused" \| "completed"` | Current state |
+| `createdAt` | `string` (ISO 8601) | |
+| `updatedAt` | `string` (ISO 8601) | |
+| `nextRunAt` | `string?` (ISO 8601) | Next scheduled execution |
+| `lastRunAt` | `string?` (ISO 8601) | Last execution time |
+| `pausedAt` | `string?` (ISO 8601) | When paused |
+| `expiresAt` | `string?` (ISO 8601) | Auto-expire time |
+| `maxRuns` | `number?` | Max executions before completing |
+| `runs` | `ScheduleRun[]` | Execution history |
+
+### Nested: ScheduleCadence (discriminated union on `type`)
+
+- `{ type: "every", everyMs: number }` — interval in milliseconds
+- `{ type: "cron", expression: string }` — cron expression
+
+### Nested: ScheduleTarget (discriminated union on `type`)
+
+- `{ type: "agent", agentId: string }` — send to existing agent
+- `{ type: "new-agent", config: { provider, cwd, modeId?, model?, thinkingOptionId?, title?, approvalPolicy?, sandboxMode?, networkAccess?, webSearch?, extra?, systemPrompt?, mcpServers? } }` — create a new agent
+
+### Nested: ScheduleRun
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | Run ID |
+| `scheduledFor` | `string` (ISO 8601) | Intended execution time |
+| `startedAt` | `string` (ISO 8601) | |
+| `endedAt` | `string?` (ISO 8601) | |
+| `status` | `"running" \| "succeeded" \| "failed"` | |
+| `agentId` | `string?` (UUID) | Agent used for this run |
+| `output` | `string?` | Agent output text |
+| `error` | `string?` | Error message if failed |
+
+---
+
+## 4. Chat
+
+**Path:** `$PASEO_HOME/chat/rooms.json`
+
+Single file containing all rooms and messages.
+
+```json
+{
+  "rooms": [ ... ],
+  "messages": [ ... ]
+}
+```
+
+### ChatRoom
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` (UUID) | |
+| `name` | `string` | Unique room name (case-insensitive) |
+| `purpose` | `string?` | Room description |
+| `createdAt` | `string` (ISO 8601) | |
+| `updatedAt` | `string` (ISO 8601) | Updated on each new message |
+
+### ChatMessage
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` (UUID) | |
+| `roomId` | `string` | FK to ChatRoom.id |
+| `authorAgentId` | `string` | Agent ID of the author |
+| `body` | `string` | Message text (supports `@mentions`) |
+| `replyToMessageId` | `string?` | FK to another ChatMessage.id |
+| `mentionAgentIds` | `string[]` | Extracted `@mention` agent IDs |
+| `createdAt` | `string` (ISO 8601) | |
+
+---
+
+## 5. Loop
+
+**Path:** `$PASEO_HOME/loops/loops.json`
+
+Single file containing an array of all loop records.
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | 8-char UUID prefix |
+| `name` | `string?` | Human-readable name |
+| `prompt` | `string` | Worker prompt |
+| `cwd` | `string` | Working directory |
+| `provider` | `string` | Default provider |
+| `model` | `string?` | Default model |
+| `workerProvider` | `string?` | Override provider for workers |
+| `workerModel` | `string?` | Override model for workers |
+| `verifierProvider` | `string?` | Override provider for verifiers |
+| `verifierModel` | `string?` | Override model for verifiers |
+| `verifyPrompt` | `string?` | LLM verification prompt |
+| `verifyChecks` | `string[]` | Shell commands to run as checks |
+| `archive` | `boolean` | Whether to archive worker agents after use |
+| `sleepMs` | `number` | Delay between iterations (ms) |
+| `maxIterations` | `number?` | Cap on iterations |
+| `maxTimeMs` | `number?` | Total time budget (ms) |
+| `status` | `"running" \| "succeeded" \| "failed" \| "stopped"` | |
+| `createdAt` | `string` (ISO 8601) | |
+| `updatedAt` | `string` (ISO 8601) | |
+| `startedAt` | `string` (ISO 8601) | |
+| `completedAt` | `string?` (ISO 8601) | |
+| `stopRequestedAt` | `string?` (ISO 8601) | |
+| `iterations` | `LoopIteration[]` | |
+| `logs` | `LoopLogEntry[]` | |
+| `nextLogSeq` | `number` | Monotonic log sequence counter |
+| `activeIteration` | `number?` | Currently executing iteration index |
+| `activeWorkerAgentId` | `string?` | Currently running worker agent |
+| `activeVerifierAgentId` | `string?` | Currently running verifier agent |
+
+### Nested: LoopIteration
+
+| Field | Type | Description |
+|---|---|---|
+| `index` | `number` | 1-based iteration index |
+| `workerAgentId` | `string?` | Agent ID of the worker |
+| `workerStartedAt` | `string` (ISO 8601) | |
+| `workerCompletedAt` | `string?` (ISO 8601) | |
+| `verifierAgentId` | `string?` | Agent ID of the verifier |
+| `status` | `"running" \| "succeeded" \| "failed" \| "stopped"` | |
+| `workerOutcome` | `"completed" \| "failed" \| "canceled"?` | |
+| `failureReason` | `string?` | |
+| `verifyChecks` | `LoopVerifyCheckResult[]` | Shell check results |
+| `verifyPrompt` | `LoopVerifyPromptResult?` | LLM verification result |
+
+### Nested: LoopLogEntry
+
+| Field | Type |
+|---|---|
+| `seq` | `number` (monotonic) |
+| `timestamp` | `string` (ISO 8601) |
+| `iteration` | `number?` |
+| `source` | `"loop" \| "worker" \| "verifier" \| "verify-check"` |
+| `level` | `"info" \| "error"` |
+| `text` | `string` |
+
+### Nested: LoopVerifyCheckResult
+
+| Field | Type |
+|---|---|
+| `command` | `string` |
+| `exitCode` | `number` |
+| `passed` | `boolean` |
+| `stdout` | `string` |
+| `stderr` | `string` |
+| `startedAt` | `string` (ISO 8601) |
+| `completedAt` | `string` (ISO 8601) |
+
+### Nested: LoopVerifyPromptResult
+
+| Field | Type |
+|---|---|
+| `passed` | `boolean` |
+| `reason` | `string` |
+| `verifierAgentId` | `string?` |
+| `startedAt` | `string` (ISO 8601) |
+| `completedAt` | `string` (ISO 8601) |
+
+---
+
+## 6. Project Registry
+
+**Path:** `$PASEO_HOME/projects/projects.json`
+
+Array of project records.
+
+| Field | Type | Description |
+|---|---|---|
+| `projectId` | `string` | Primary key |
+| `rootPath` | `string` | Filesystem root of the project |
+| `kind` | `"git" \| "non_git"` | |
+| `displayName` | `string` | |
+| `createdAt` | `string` (ISO 8601) | |
+| `updatedAt` | `string` (ISO 8601) | |
+| `archivedAt` | `string?` (ISO 8601) | Soft-delete timestamp |
+
+---
+
+## 7. Workspace Registry
+
+**Path:** `$PASEO_HOME/projects/workspaces.json`
+
+Array of workspace records. A workspace is a specific working directory within a project.
+
+| Field | Type | Description |
+|---|---|---|
+| `workspaceId` | `string` | Primary key |
+| `projectId` | `string` | FK to Project.projectId |
+| `cwd` | `string` | Filesystem path |
+| `kind` | `"local_checkout" \| "worktree" \| "directory"` | |
+| `displayName` | `string` | |
+| `createdAt` | `string` (ISO 8601) | |
+| `updatedAt` | `string` (ISO 8601) | |
+| `archivedAt` | `string?` (ISO 8601) | Soft-delete timestamp |
+
+---
+
+## 8. Push Token Store
+
+**Path:** `$PASEO_HOME/push-tokens.json`
+
+```json
+{
+  "tokens": ["ExponentPushToken[...]", ...]
+}
+```
+
+Simple set of Expo push notification tokens. No schema validation — just an array of strings.
+
+---
+
+## Client-side stores (App)
+
+These live in React Native `AsyncStorage` or browser `IndexedDB`, not on the daemon filesystem.
+
+### Draft Store
+
+**AsyncStorage key:** `paseo-drafts` (version 2)
+
+```typescript
+{
+  drafts: Record<draftKey, {
+    input: { text: string, images: AttachmentMetadata[] },
+    lifecycle: "active" | "abandoned" | "sent",
+    updatedAt: number,     // epoch ms
+    version: number        // optimistic concurrency
+  }>,
+  createModalDraft: DraftRecord | null
+}
+```
+
+### Attachment Store (Web)
+
+**IndexedDB database:** `paseo-attachment-bytes`, object store: `attachments`
+
+Stores binary attachment blobs keyed by attachment ID.
+
+### AttachmentMetadata
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | Unique attachment ID |
+| `mimeType` | `string` | MIME type |
+| `storageType` | `string` | Storage backend identifier |
+| `storageKey` | `string` | Key within the storage backend |
+| `createdAt` | `number` | Epoch ms |
+| `fileName` | `string?` | Original filename |
+| `byteSize` | `number?` | Size in bytes |

docs/RELEASE.md

@@ -11,6 +11,12 @@ There are two supported ways to ship from `main`:
 
 ## Standard release (patch)
 
+Before running any stable patch release command:
+
+- Make sure the intended release commit is already committed to `main` and the working tree is clean.
+- Make sure local `npm run typecheck` passes on that commit.
+- Do not use `npm run release:patch` as a substitute for checking whether the current commit is actually ready.
+
 ```bash
 npm run release:patch
 ```
@@ -24,6 +30,7 @@ Use the direct stable path when the current `main` changes are ready to become t
 ## Manual step-by-step
 
 ```bash
+npm run typecheck            # Verify the exact commit you intend to release
 npm run release:check        # Typecheck, build, dry-run pack
 npm run version:all:patch    # Bump version, create commit + tag
 npm run release:publish      # Publish to npm
@@ -122,6 +129,16 @@ No prefix (`v`), no extra text. The parser matches the first `## X.Y.Z` line to
 - **Only Claude should write changelog entries.**
 - If you are Codex and a stable release needs a changelog entry, launch a Claude agent with Paseo to draft it, then review and commit the result.
 
+## Changelog voice
+
+The changelog is shown on the Paseo homepage. Write it for **end users**, not developers.
+
+- **Frame everything from the user's perspective.** Describe what changed in the app, not what changed in the code. Users care that "workspaces load instantly" — not that a component no longer remounts.
+- **Never mention component names, internal modules, or implementation details.** No `WorkingIndicator`, no `accumulatedUsage`, no `reconcileAndEmitWorkspaceUpdates`.
+- **Collapse internal iterations.** If a feature was added and then fixed within the same release, just list the feature as working. Users never saw the broken version.
+- **Only list changes relative to the previous stable release.** The diff is `v(previous)..HEAD`. If something was introduced and fixed between those two tags, it never shipped — don't mention the fix.
+- **Cut low-signal entries.** "Toolbar buttons have consistent sizing" is too granular. Combine small polish items or drop them.
+
 ## Pre-release sanity check
 
 Before cutting any release (RC or stable), run a Codex review of the diff as a last line of defence against shipping bugs.
@@ -131,7 +148,7 @@ Load the `paseo` skill and launch a **Codex 5.4** agent with a prompt like:
 > Review the diff between the latest release tag and HEAD. Focus on:
 >
 > 1. **Breaking changes** — especially in the WebSocket protocol, agent lifecycle, and any server↔client contract.
-> 2. **Backward compatibility** — mobile apps lag behind desktop/daemon updates by days. Users will update desktop and daemon immediately but keep running the old app. Flag anything that requires both sides to update in lockstep.
+> 2. **Backward compatibility** — the important direction is old app clients talking to newly updated daemons. Users update desktop and daemon first, then keep running the old app for a while. Flag anything that breaks old clients against new daemons or requires both sides to update in lockstep.
 > 3. **Regressions** — anything that looks like it could break existing functionality.
 >
 > Diff: `git diff <latest-release-tag>..HEAD`
@@ -150,6 +167,8 @@ In other words, RCs are checkpoints along the way; the changelog only records th
 ## Completion checklist
 
 - [ ] Run the pre-release sanity check (see above) and address any findings
+- [ ] Ensure the intended release commit is already committed and the git worktree is clean before running any `release:*` patch/promote command
+- [ ] Ensure local `npm run typecheck` passes on that exact commit before running any `release:*` patch/promote command
 - [ ] Update `CHANGELOG.md` with user-facing release notes (features, fixes — not refactors)
 - [ ] Verify the changelog heading follows strict `## X.Y.Z - YYYY-MM-DD` format
 - [ ] `npm run release:patch` or `npm run release:promote` completes successfully

docs/plan-approval-normalization.md

@@ -0,0 +1,68 @@
+# Plan Approval Normalization
+
+## Goal
+
+Normalize plan approval across providers so the UI renders one consistent plan approval card and action row, while each provider keeps its own execution quirks behind the session permission interface.
+
+## Compatibility Constraints
+
+- Older clients must remain compatible with newer daemons.
+- All new wire fields must be optional.
+- Existing plan permissions without action metadata must still render and work.
+- Existing question permissions must keep their current behavior.
+
+## Design
+
+### Shared abstraction
+
+Add optional permission action definitions to the shared permission request/response types.
+
+- Permission requests may include `actions`.
+- Permission responses may include `selectedActionId`.
+- `kind: "plan"` remains the normalized concept for plan approval.
+- The UI renders actions from the permission request instead of hardcoding provider-specific buttons.
+
+### Claude
+
+Keep Claude's plan permission flow, but enrich it with explicit action definitions.
+
+- Always expose `Reject`.
+- Always expose `Implement`.
+- If the agent entered plan mode from a more permissive mode like `bypassPermissions`, also expose `Implement with <previous mode>`.
+- Resolve the selected action entirely inside `respondToPermission()`.
+
+### Codex
+
+Synthesize a normalized `kind: "plan"` permission after a Codex plan-mode turn completes with a plan result.
+
+- Emit a plan permission with `Reject` and `Implement` actions.
+- On `Implement`, disable `plan_mode`, disable `fast_mode`, and automatically start a follow-up implementation turn.
+- On `Reject`, resolve without starting a follow-up turn.
+- Keep the implementation prompt and state transitions inside the Codex provider.
+
+### Manager and state sync
+
+After permission resolution, refresh provider-derived state so the UI sees internal mode/feature changes without knowing provider quirks.
+
+- Refresh current mode
+- Refresh pending permissions
+- Refresh runtime info
+- Refresh features
+- Persist refreshed state
+
+### UI
+
+Render plan permissions through the existing plan card, but generate buttons from normalized permission actions.
+
+- If `actions` are absent, fall back to legacy buttons.
+- Plan cards should use `Implement` as the default primary label.
+- Do not add provider-specific rendering branches.
+
+## Verification
+
+1. Shared schema/type tests for optional `actions` and `selectedActionId`
+2. App tests for generic plan-action rendering
+3. Claude tests for third action when resuming from a more permissive mode
+4. Codex tests for synthetic plan approval and automatic implementation follow-up
+5. Manager tests for post-permission state refresh
+6. `npm run typecheck`

nix/package.nix

@@ -42,7 +42,7 @@ buildNpmPackage rec {
 
   # To update: run `nix build` with lib.fakeHash, copy the `got:` hash.
   # CI auto-updates this when package-lock.json changes (see .github/workflows/).
-  npmDepsHash = "sha256-epuepM6DMEpOfzvPiS6K/qKJqGM89FqdsKHovWi2LS8=";
+  npmDepsHash = "sha256-gyCcVTlgLk8+G/OtwZT/GomN2lYe7uEcDoLp1ZQoc5M=";
 
   # Prevent onnxruntime-node's install script from running during automatic
   # npm rebuild (it tries to download from api.nuget.org, which fails in the sandbox).

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "paseo",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -34906,16 +34906,16 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@expo/vector-icons": "^15.0.2",
         "@floating-ui/react-native": "^0.10.7",
-        "@getpaseo/expo-two-way-audio": "0.1.49",
-        "@getpaseo/highlight": "0.1.49",
-        "@getpaseo/server": "0.1.49",
+        "@getpaseo/expo-two-way-audio": "0.1.52",
+        "@getpaseo/highlight": "0.1.52",
+        "@getpaseo/server": "0.1.52",
         "@gorhom/bottom-sheet": "^5.2.6",
         "@gorhom/portal": "^1.0.14",
         "@react-native-async-storage/async-storage": "2.2.0",
@@ -35032,11 +35032,11 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/relay": "0.1.49",
-        "@getpaseo/server": "0.1.49",
+        "@getpaseo/relay": "0.1.52",
+        "@getpaseo/server": "0.1.52",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -35077,11 +35077,11 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@getpaseo/cli": "0.1.49",
-        "@getpaseo/server": "0.1.49",
+        "@getpaseo/cli": "0.1.52",
+        "@getpaseo/server": "0.1.52",
         "electron-log": "^5.4.3",
         "electron-updater": "^6.6.2",
         "ws": "^8.14.2"
@@ -35115,7 +35115,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "license": "MIT",
       "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -35316,7 +35316,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "dependencies": {
         "@lezer/common": "^1.5.0",
         "@lezer/cpp": "^1.1.5",
@@ -35342,7 +35342,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -35358,14 +35358,14 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.17.1",
         "@ai-sdk/openai": "2.0.52",
         "@anthropic-ai/claude-agent-sdk": "^0.2.11",
         "@deepgram/sdk": "^3.4.0",
-        "@getpaseo/highlight": "0.1.49",
-        "@getpaseo/relay": "0.1.49",
+        "@getpaseo/highlight": "0.1.52",
+        "@getpaseo/relay": "0.1.52",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.2.6",
@@ -35764,7 +35764,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.1.49",
+      "version": "0.1.52",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.20.3",
         "@cloudflare/workers-types": "^4.20260114.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "private": true,
   "workspaces": [
     "packages/expo-two-way-audio",

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.49",
+  "version": "0.1.52",
   "private": true,
   "scripts": {
     "start": "expo start",
@@ -31,9 +31,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@expo/vector-icons": "^15.0.2",
     "@floating-ui/react-native": "^0.10.7",
-    "@getpaseo/expo-two-way-audio": "0.1.49",
-    "@getpaseo/highlight": "0.1.49",
-    "@getpaseo/server": "0.1.49",
+    "@getpaseo/expo-two-way-audio": "0.1.52",
+    "@getpaseo/highlight": "0.1.52",
+    "@getpaseo/server": "0.1.52",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.2.0",

packages/app/src/app/_layout.tsx

@@ -14,6 +14,7 @@ import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { PortalProvider } from "@gorhom/portal";
 import { VoiceProvider } from "@/contexts/voice-context";
 import { useAppSettings } from "@/hooks/use-settings";
+import { THEME_TO_UNISTYLES } from "@/styles/theme";
 import { useFaviconStatus } from "@/hooks/use-favicon-status";
 import { View, Text } from "react-native";
 import { UnistylesRuntime, useUnistyles } from "react-native-unistyles";
@@ -57,7 +58,7 @@ import {
   HorizontalScrollProvider,
   useHorizontalScrollOptional,
 } from "@/contexts/horizontal-scroll-context";
-import { getIsElectronRuntime, isCompactFormFactor } from "@/constants/layout";
+import { getIsElectronRuntime, useIsCompactFormFactor } from "@/constants/layout";
 import { CommandCenter } from "@/components/command-center";
 import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
@@ -369,10 +370,41 @@ function AppContainer({
   const toggleBothSidebars = usePanelStore((state) => state.toggleBothSidebars);
   const toggleFocusMode = usePanelStore((state) => state.toggleFocusMode);
   const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
+  const agentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
+  const sidebarWidth = usePanelStore((state) => state.sidebarWidth);
 
-  const isCompactLayout = isCompactFormFactor();
+  const isCompactLayout = useIsCompactFormFactor();
   const chromeEnabled = chromeEnabledOverride ?? daemons.length > 0;
 
+  useEffect(() => {
+    const bp = UnistylesRuntime.breakpoint;
+    const screenW = UnistylesRuntime.screen.width;
+    const screenH = UnistylesRuntime.screen.height;
+    const isElectron = getIsElectronRuntime();
+    const windowW = Platform.OS === "web" ? window.innerWidth : undefined;
+    const windowH = Platform.OS === "web" ? window.innerHeight : undefined;
+    const dpr = Platform.OS === "web" ? window.devicePixelRatio : undefined;
+    const ua = Platform.OS === "web" ? navigator.userAgent : undefined;
+
+    console.log(
+      "[layout-debug]",
+      JSON.stringify({
+        breakpoint: bp,
+        isCompactLayout,
+        isElectron,
+        chromeEnabled,
+        isFocusModeEnabled,
+        agentListOpen,
+        sidebarWidth,
+        sidebarRenderedInRow: !isCompactLayout && chromeEnabled && !isFocusModeEnabled,
+        unistylesScreen: { w: screenW, h: screenH },
+        window: { w: windowW, h: windowH },
+        devicePixelRatio: dpr,
+        userAgent: ua,
+      }),
+    );
+  }, [isCompactLayout, chromeEnabled, isFocusModeEnabled, agentListOpen, sidebarWidth]);
+
   useKeyboardShortcuts({
     enabled: chromeEnabled,
     isMobile: isCompactLayout,
@@ -530,7 +562,7 @@ function ProvidersWrapper({ children }: { children: ReactNode }) {
       UnistylesRuntime.setAdaptiveThemes(true);
     } else {
       UnistylesRuntime.setAdaptiveThemes(false);
-      UnistylesRuntime.setTheme(settings.theme);
+      UnistylesRuntime.setTheme(THEME_TO_UNISTYLES[settings.theme]);
     }
   }, [settingsLoading, settings.theme]);
 
@@ -574,7 +606,7 @@ function OfferLinkListener({
           if (cancelled) return;
           const serverId = (profile as any)?.serverId;
           if (typeof serverId !== "string" || !serverId) return;
-          router.replace(buildHostRootRoute(serverId) as any);
+          router.replace(buildHostRootRoute(serverId));
         })
         .catch((error) => {
           if (cancelled) return;
@@ -692,7 +724,7 @@ function AppWithSidebar({ children }: { children: ReactNode }) {
     if (hosts.some((host) => host.serverId === activeServerId)) {
       return;
     }
-    router.replace(mapPathnameToServer(pathname, hosts[0]!.serverId) as any);
+    router.replace(mapPathnameToServer(pathname, hosts[0]!.serverId));
   }, [activeServerId, hosts, pathname, router]);
 
   // Parse selectedAgentKey directly from pathname

packages/app/src/app/h/[serverId]/agent/[agentId].tsx

@@ -58,7 +58,7 @@ export default function HostAgentReadyRoute() {
     }
     if (!client || !isConnected) {
       redirectedRef.current = true;
-      router.replace(buildHostRootRoute(serverId) as any);
+      router.replace(buildHostRootRoute(serverId));
     }
   }, [agentCwd, agentId, client, isConnected, router, serverId]);
 
@@ -89,14 +89,14 @@ export default function HostAgentReadyRoute() {
           );
           return;
         }
-        router.replace(buildHostRootRoute(serverId) as any);
+        router.replace(buildHostRootRoute(serverId));
       })
       .catch(() => {
         if (cancelled || redirectedRef.current) {
           return;
         }
         redirectedRef.current = true;
-        router.replace(buildHostRootRoute(serverId) as any);
+        router.replace(buildHostRootRoute(serverId));
       });
 
     return () => {

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

@@ -68,11 +68,11 @@ export default function HostIndexRoute() {
 
       const primaryWorkspace = visibleWorkspaces[0];
       if (primaryWorkspace?.id?.trim()) {
-        router.replace(buildHostWorkspaceRoute(serverId, primaryWorkspace.id.trim()) as any);
+        router.replace(buildHostWorkspaceRoute(serverId, primaryWorkspace.id.trim()));
         return;
       }
 
-      router.replace(buildHostOpenProjectRoute(serverId) as any);
+      router.replace(buildHostOpenProjectRoute(serverId));
     }, HOST_ROOT_REDIRECT_DELAY_MS);
 
     return () => clearTimeout(timer);

packages/app/src/app/index.tsx

@@ -58,7 +58,7 @@ export default function Index() {
     const targetRoute = anyOnlineServerId
       ? buildHostRootRoute(anyOnlineServerId)
       : WELCOME_ROUTE;
-    router.replace(targetRoute as any);
+    router.replace(targetRoute);
   }, [anyOnlineServerId, pathname, router, storeReady]);
 
   return <StartupSplashScreen bootstrapState={bootstrapState} />;

packages/app/src/app/pair-scan.tsx

@@ -6,8 +6,6 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { CameraView, useCameraPermissions } from "expo-camera";
 import type { BarcodeScanningResult } from "expo-camera";
 import { useHosts, useHostMutations } from "@/runtime/host-runtime";
-import { useSessionStore } from "@/stores/session-store";
-import { NameHostModal } from "@/components/name-host-modal";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
 import { connectToDaemon } from "@/utils/test-daemon-connection";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
@@ -61,7 +59,7 @@ const styles = StyleSheet.create((theme) => ({
     position: "absolute",
     width: 36,
     height: 36,
-    borderColor: theme.colors.palette.blue[400],
+    borderColor: theme.colors.accent,
   },
   cornerTL: {
     left: 0,
@@ -148,33 +146,16 @@ export default function PairScanScreen() {
   const sourceServerId = typeof params.sourceServerId === "string" ? params.sourceServerId : null;
   const targetServerId = typeof params.targetServerId === "string" ? params.targetServerId : null;
   const daemons = useHosts();
-  const { upsertConnectionFromOfferUrl: upsertDaemonFromOfferUrl, renameHost } = useHostMutations();
+  const { upsertConnectionFromOfferUrl: upsertDaemonFromOfferUrl } = useHostMutations();
 
   const [permission, requestPermission] = useCameraPermissions();
   const [isPairing, setIsPairing] = useState(false);
   const lastScannedRef = useRef<string | null>(null);
-  const [pendingNameHost, setPendingNameHost] = useState<{
-    serverId: string;
-    hostname: string | null;
-  } | null>(null);
-  const pendingNameHostname = useSessionStore(
-    useCallback(
-      (state) => {
-        if (!pendingNameHost) return null;
-        return (
-          state.sessions[pendingNameHost.serverId]?.serverInfo?.hostname ??
-          pendingNameHost.hostname ??
-          null
-        );
-      },
-      [pendingNameHost],
-    ),
-  );
 
   const returnToSource = useCallback(
     (serverId: string) => {
       if (source === "onboarding") {
-        router.replace(buildHostRootRoute(serverId) as any);
+        router.replace(buildHostRootRoute(serverId));
         return;
       }
       if (source === "editHost" && targetServerId) {
@@ -190,7 +171,7 @@ export default function PairScanScreen() {
         router.back();
       } catch {
         const settingsServerId = sourceServerId ?? serverId;
-        router.replace(buildHostSettingsRoute(settingsServerId) as any);
+        router.replace(buildHostSettingsRoute(settingsServerId));
       }
     },
     [router, source, sourceServerId, targetServerId],
@@ -209,7 +190,7 @@ export default function PairScanScreen() {
       router.back();
     } catch {
       if (sourceServerId) {
-        router.replace(buildHostSettingsRoute(sourceServerId) as any);
+        router.replace(buildHostSettingsRoute(sourceServerId));
         return;
       }
       router.replace("/" as any);
@@ -224,7 +205,6 @@ export default function PairScanScreen() {
 
   const handleScan = useCallback(
     async (result: BarcodeScanningResult) => {
-      if (pendingNameHost) return;
       if (isPairing) return;
       const offerUrl = extractOfferUrlFromScan(result);
       if (!offerUrl) return;
@@ -248,7 +228,7 @@ export default function PairScanScreen() {
           return;
         }
 
-        const { client } = await connectToDaemon(
+        const { client, hostname } = await connectToDaemon(
           {
             id: "probe",
             type: "relay",
@@ -259,13 +239,7 @@ export default function PairScanScreen() {
         );
         await client.close().catch(() => undefined);
 
-        const isNewHost = !daemons.some((daemon) => daemon.serverId === offer.serverId);
-        const profile = await upsertDaemonFromOfferUrl(offerUrl);
-
-        if (isNewHost) {
-          setPendingNameHost({ serverId: profile.serverId, hostname: null });
-          return;
-        }
+        const profile = await upsertDaemonFromOfferUrl(offerUrl, hostname ?? undefined);
 
         returnToSource(profile.serverId);
       } catch (error) {
@@ -276,7 +250,7 @@ export default function PairScanScreen() {
         setIsPairing(false);
       }
     },
-    [daemons, isPairing, pendingNameHost, returnToSource, targetServerId, upsertDaemonFromOfferUrl],
+    [daemons, isPairing, returnToSource, targetServerId, upsertDaemonFromOfferUrl],
   );
 
   if (Platform.OS === "web") {
@@ -307,25 +281,6 @@ export default function PairScanScreen() {
 
   return (
     <View style={styles.container}>
-      {pendingNameHost ? (
-        <NameHostModal
-          visible
-          serverId={pendingNameHost.serverId}
-          hostname={pendingNameHostname}
-          onSkip={() => {
-            const serverId = pendingNameHost.serverId;
-            setPendingNameHost(null);
-            returnToSource(serverId);
-          }}
-          onSave={(label) => {
-            const serverId = pendingNameHost.serverId;
-            void renameHost(serverId, label).finally(() => {
-              setPendingNameHost(null);
-              returnToSource(serverId);
-            });
-          }}
-        />
-      ) : null}
       <View style={[styles.header, { paddingTop: insets.top + theme.spacing[2] }]}>
         <Text style={styles.headerTitle}>Scan QR</Text>
         <Pressable onPress={closeToSource}>
@@ -359,7 +314,6 @@ export default function PairScanScreen() {
                 <View style={[styles.corner, styles.cornerBL]} />
                 <View style={[styles.corner, styles.cornerBR]} />
               </View>
-              <Text style={styles.helperText}>Point your camera at the pairing QR code.</Text>
               {isPairing ? (
                 <Text style={[styles.helperText, { color: theme.colors.foreground }]}>
                   Pairing…

packages/app/src/app/settings.tsx

@@ -16,7 +16,7 @@ export default function LegacySettingsRoute() {
     if (!targetServerId) {
       return;
     }
-    router.replace(buildHostSettingsRoute(targetServerId) as any);
+    router.replace(buildHostSettingsRoute(targetServerId));
   }, [router, targetServerId]);
 
   if (!targetServerId) {

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

@@ -3,7 +3,8 @@ import type { ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { Modal, Platform, Pressable, ScrollView, Text, TextInput, View } from "react-native";
 import type { TextInputProps } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { getOverlayRoot, OVERLAY_Z } from "../lib/overlay-root";
 import {
   BottomSheetModal,
@@ -28,6 +29,8 @@ const styles = StyleSheet.create((theme) => ({
     width: "100%",
     maxWidth: 520,
     maxHeight: "85%",
+    flexShrink: 1,
+    minHeight: 0,
     backgroundColor: theme.colors.surface1,
     borderRadius: theme.borderRadius.xl,
     borderWidth: 1,
@@ -54,11 +57,13 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface2,
   },
   desktopScroll: {
-    flex: 1,
+    flexShrink: 1,
+    minHeight: 0,
   },
   desktopContent: {
     padding: theme.spacing[6],
     gap: theme.spacing[4],
+    flexGrow: 1,
   },
   bottomSheetHandle: {
     backgroundColor: theme.colors.surface2,
@@ -115,7 +120,7 @@ export function AdaptiveModalSheet({
   testID,
 }: AdaptiveModalSheetProps) {
   const { theme } = useUnistyles();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const sheetRef = useRef<BottomSheetModal>(null);
   const dismissingForVisibilityRef = useRef(false);
   const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);
@@ -235,7 +240,7 @@ export function AdaptiveModalSheet({
  */
 export const AdaptiveTextInput = forwardRef<TextInput, TextInputProps>(
   function AdaptiveTextInput(props, ref) {
-    const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+    const isMobile = useIsCompactFormFactor();
 
     if (isMobile) {
       return <BottomSheetTextInput ref={ref as any} {...props} />;

packages/app/src/components/add-host-modal.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { Alert, Text, TextInput, View } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { Link2 } from "lucide-react-native";
 import type { HostProfile } from "@/types/host-connection";
 import { useHosts, useHostMutations } from "@/runtime/host-runtime";
@@ -151,7 +152,7 @@ export function AddHostModal({
   const { theme } = useUnistyles();
   const daemons = useHosts();
   const { upsertDirectConnection } = useHostMutations();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
 
   const hostInputRef = useRef<TextInput>(null);
 
@@ -218,6 +219,7 @@ export function AddHostModal({
       const profile = await upsertDirectConnection({
         serverId,
         endpoint,
+        label: hostname ?? undefined,
       });
 
       onSaved?.({ profile, serverId, hostname, isNewHost });

packages/app/src/components/agent-input-area.tsx

@@ -1,6 +1,7 @@
 import { View, Pressable, Text, ActivityIndicator, Platform } from "react-native";
 import { useState, useEffect, useRef, useCallback } from "react";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { useShallow } from "zustand/shallow";
 import { ArrowUp, Square, Pencil, AudioLines } from "lucide-react-native";
 import Animated from "react-native-reanimated";
@@ -12,6 +13,7 @@ import {
   DraftAgentStatusBar,
   type DraftAgentStatusBarProps,
 } from "./agent-status-bar";
+import { ContextWindowMeter } from "./context-window-meter";
 import { useImageAttachmentPicker } from "@/hooks/use-image-attachment-picker";
 import { useSessionStore } from "@/stores/session-store";
 import {
@@ -47,6 +49,7 @@ import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import type { KeyboardActionDefinition } from "@/keyboard/keyboard-action-dispatcher";
 import { submitAgentInput } from "@/components/agent-input-submit";
+import { useAppSettings } from "@/hooks/use-settings";
 
 type QueuedMessage = {
   id: string;
@@ -130,11 +133,15 @@ export function AgentInputArea({
       agentDirectoryStatus === "revalidating" ||
       agentDirectoryStatus === "error_after_ready");
 
+  const { settings: appSettings } = useAppSettings();
+
   const agentState = useSessionStore(
     useShallow((state) => {
       const agent = state.sessions[serverId]?.agents?.get(agentId) ?? null;
       return {
         status: agent?.status ?? null,
+        contextWindowMaxTokens: agent?.lastUsage?.contextWindowMaxTokens ?? null,
+        contextWindowUsedTokens: agent?.lastUsage?.contextWindowUsedTokens ?? null,
       };
     }),
   );
@@ -148,10 +155,8 @@ export function AgentInputArea({
   const setAgentStreamTail = useSessionStore((state) => state.setAgentStreamTail);
   const setAgentStreamHead = useSessionStore((state) => state.setAgentStreamHead);
 
-  const isDesktopWebBreakpoint =
-    Platform.OS === "web" &&
-    UnistylesRuntime.breakpoint !== "xs" &&
-    UnistylesRuntime.breakpoint !== "sm";
+  const isMobile = useIsCompactFormFactor();
+  const isDesktopWebBreakpoint = Platform.OS === "web" && !isMobile;
   const messagePlaceholder = isDesktopWebBreakpoint
     ? DESKTOP_MESSAGE_PLACEHOLDER
     : MOBILE_MESSAGE_PLACEHOLDER;
@@ -636,6 +641,25 @@ export function AgentInputArea({
     </View>
   );
 
+  const hasContextWindowMeter =
+    typeof agentState.contextWindowMaxTokens === "number" &&
+    typeof agentState.contextWindowUsedTokens === "number";
+  const contextWindowMaxTokens = hasContextWindowMeter ? agentState.contextWindowMaxTokens : null;
+  const contextWindowUsedTokens = hasContextWindowMeter
+    ? agentState.contextWindowUsedTokens
+    : null;
+
+  const beforeVoiceContent = (
+    <View style={styles.contextWindowMeterSlot}>
+      {contextWindowMaxTokens !== null && contextWindowUsedTokens !== null ? (
+        <ContextWindowMeter
+          maxTokens={contextWindowMaxTokens}
+          usedTokens={contextWindowUsedTokens}
+        />
+      ) : null}
+    </View>
+  );
+
   const leftContent =
     resolveStatusControlMode(statusControls) === "draft" && statusControls ? (
       <DraftAgentStatusBar {...statusControls} />
@@ -715,10 +739,12 @@ export function AgentInputArea({
               disabled={isSubmitLoading}
               isInputActive={isInputActive}
               leftContent={leftContent}
+              beforeVoiceContent={beforeVoiceContent}
               rightContent={rightContent}
               voiceServerId={serverId}
               voiceAgentId={agentId}
               isAgentRunning={isAgentRunning}
+              defaultSendBehavior={appSettings.sendBehavior}
               onQueue={handleQueue}
               onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
               onKeyPress={handleCommandKeyPress}
@@ -790,6 +816,12 @@ const styles = StyleSheet.create(((theme: Theme) => ({
     alignItems: "center",
     gap: theme.spacing[2],
   },
+  contextWindowMeterSlot: {
+    width: 28,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   realtimeVoiceButton: {
     width: 28,
     height: 28,

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

@@ -10,7 +10,8 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useCallback, useMemo, useState, type ReactElement } from "react";
 import { router } from "expo-router";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { formatTimeAgo } from "@/utils/time";
 import { shortenPath } from "@/utils/shorten-path";
 import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
@@ -214,7 +215,7 @@ export function AgentList({
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
 
   const actionClient = useSessionStore((state) =>
     actionAgent?.serverId ? (state.sessions[actionAgent.serverId]?.client ?? null) : null,
@@ -240,7 +241,7 @@ export function AgentList({
         target: { kind: "agent", agentId },
         pin: Boolean(agent.archivedAt),
       });
-      router.navigate(route as any);
+      router.navigate(route);
     },
     [isActionSheetVisible, onAgentSelect],
   );

packages/app/src/components/agent-status-bar.tsx

@@ -88,6 +88,7 @@ type ControlledAgentStatusBarProps = {
   features?: AgentFeature[];
   onSetFeature?: (featureId: string, value: unknown) => void;
   onDropdownClose?: () => void;
+  onModelSelectorOpen?: () => void;
 };
 
 export interface DraftAgentStatusBarProps {
@@ -110,6 +111,7 @@ export interface DraftAgentStatusBarProps {
   features?: AgentFeature[];
   onSetFeature?: (featureId: string, value: unknown) => void;
   onDropdownClose?: () => void;
+  onModelSelectorOpen?: () => void;
   disabled?: boolean;
 }
 
@@ -217,6 +219,7 @@ function ControlledStatusBar({
   features,
   onSetFeature,
   onDropdownClose,
+  onModelSelectorOpen,
 }: ControlledAgentStatusBarProps) {
   const { theme } = useUnistyles();
   const isWeb = Platform.OS === "web";
@@ -411,6 +414,7 @@ function ControlledStatusBar({
                     onToggleFavorite={onToggleFavoriteModel}
                     isLoading={isModelLoading}
                     disabled={modelDisabled}
+                    onOpen={onModelSelectorOpen}
                     onClose={onDropdownClose}
                   />
                 </View>
@@ -662,6 +666,7 @@ function ControlledStatusBar({
                   onToggleFavorite={onToggleFavoriteModel}
                   isLoading={isModelLoading}
                   disabled={modelDisabled}
+                  onOpen={onModelSelectorOpen}
                   onClose={onDropdownClose}
                   renderTrigger={({ selectedModelLabel }) => (
                     <View
@@ -859,6 +864,7 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
             model: currentAgent.model,
             features: currentAgent.features,
             thinkingOptionId: currentAgent.thinkingOptionId,
+            lastUsage: currentAgent.lastUsage,
           }
         : null;
     }),
@@ -874,6 +880,7 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
     entries: snapshotEntries,
     isLoading: snapshotIsLoading,
     isFetching: snapshotIsFetching,
+    invalidate: invalidateSnapshot,
   } = useProvidersSnapshot(serverId);
 
   const snapshotModels = useMemo(() => {
@@ -961,13 +968,14 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
           return;
         }
         void updatePreferences(
-          mergeProviderPreferences({
-            preferences,
-            provider: agent.provider,
-            updates: {
-              model: modelId,
-            },
-          }),
+          (current) =>
+            mergeProviderPreferences({
+              preferences: current,
+              provider: agent.provider,
+              updates: {
+                model: modelId,
+              },
+            }),
         ).catch((error) => {
           console.warn("[AgentStatusBar] persist model preference failed", error);
         });
@@ -977,7 +985,7 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
       }}
       favoriteKeys={favoriteKeys}
       onToggleFavoriteModel={(provider, modelId) => {
-        void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
+        void updatePreferences((current) => toggleFavoriteModel({ preferences: current, provider, modelId })).catch((error) => {
           console.warn("[AgentStatusBar] toggle favorite model failed", error);
         });
       }}
@@ -990,16 +998,17 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
         const activeModelId = modelSelection.activeModelId;
         if (activeModelId) {
           void updatePreferences(
-            mergeProviderPreferences({
-              preferences,
-              provider: agent.provider,
-              updates: {
-                model: activeModelId,
-                thinkingByModel: {
-                  [activeModelId]: thinkingOptionId,
+            (current) =>
+              mergeProviderPreferences({
+                preferences: current,
+                provider: agent.provider,
+                updates: {
+                  model: activeModelId,
+                  thinkingByModel: {
+                    [activeModelId]: thinkingOptionId,
+                  },
                 },
-              },
-            }),
+              }),
           ).catch((error) => {
             console.warn("[AgentStatusBar] persist thinking preference failed", error);
           });
@@ -1013,11 +1022,26 @@ export function AgentStatusBar({ agentId, serverId, onDropdownClose }: AgentStat
         if (!client) {
           return;
         }
+        void updatePreferences(
+          (current) =>
+            mergeProviderPreferences({
+              preferences: current,
+              provider: agent.provider,
+              updates: {
+                featureValues: {
+                  [featureId]: value,
+                },
+              },
+            }),
+        ).catch((error) => {
+          console.warn("[AgentStatusBar] persist feature preference failed", error);
+        });
         void client.setAgentFeature(agentId, featureId, value).catch((error) => {
           console.warn("[AgentStatusBar] setAgentFeature failed", error);
         });
       }}
       isModelLoading={snapshotIsLoading || snapshotIsFetching}
+      onModelSelectorOpen={invalidateSnapshot}
       onDropdownClose={onDropdownClose}
       disabled={!client}
     />
@@ -1044,6 +1068,7 @@ export function DraftAgentStatusBar({
   features,
   onSetFeature,
   onDropdownClose,
+  onModelSelectorOpen,
   disabled = false,
 }: DraftAgentStatusBarProps) {
   const isWeb = Platform.OS === "web";
@@ -1082,12 +1107,13 @@ export function DraftAgentStatusBar({
           onSelect={onSelectProviderAndModel}
           favoriteKeys={favoriteKeys}
           onToggleFavorite={(provider, modelId) => {
-            void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
+            void updatePreferences((current) => toggleFavoriteModel({ preferences: current, provider, modelId })).catch((error) => {
               console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
             });
           }}
           isLoading={isAllModelsLoading}
           disabled={disabled}
+          onOpen={onModelSelectorOpen}
           onClose={onDropdownClose}
         />
         <ControlledStatusBar
@@ -1128,7 +1154,7 @@ export function DraftAgentStatusBar({
         isModelLoading={isAllModelsLoading}
         favoriteKeys={favoriteKeys}
         onToggleFavoriteModel={(provider, modelId) => {
-          void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
+          void updatePreferences((current) => toggleFavoriteModel({ preferences: current, provider, modelId })).catch((error) => {
             console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
           });
         }}
@@ -1137,6 +1163,7 @@ export function DraftAgentStatusBar({
         onSelectThinkingOption={onSelectThinkingOption}
         features={features}
         onSetFeature={onSetFeature}
+        onModelSelectorOpen={onModelSelectorOpen}
         disabled={disabled}
       />
     </>

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

@@ -9,7 +9,8 @@ import {
   useState,
 } from "react";
 import { View, Text, Pressable, Platform, ActivityIndicator } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import Animated, {
@@ -26,6 +27,7 @@ import { Check, ChevronDown, X } from "lucide-react-native";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   AssistantMessage,
+  SpeakMessage,
   UserMessage,
   ActivityLog,
   ToolCall,
@@ -38,7 +40,10 @@ import {
 import { PlanCard } from "./plan-card";
 import type { StreamItem } from "@/types/stream";
 import type { PendingPermission } from "@/types/shared";
-import type { AgentPermissionResponse } from "@server/server/agent/agent-sdk-types";
+import type {
+  AgentPermissionAction,
+  AgentPermissionResponse,
+} from "@server/server/agent/agent-sdk-types";
 import type { AgentScreenAgent } from "@/hooks/use-agent-screen-state-machine";
 import { useSessionStore } from "@/stores/session-store";
 import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
@@ -105,7 +110,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     const viewportRef = useRef<StreamViewportHandle | null>(null);
     const { theme } = useUnistyles();
     const router = useRouter();
-    const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+    const isMobile = useIsCompactFormFactor();
     const streamRenderStrategy = useMemo(
       () =>
         resolveStreamRenderStrategy({
@@ -178,7 +183,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             workspaceId,
             target: { kind: "file", path: normalized.file },
           });
-          router.navigate(route as any);
+          router.navigate(route);
           return;
         }
 
@@ -356,6 +361,21 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
 
             if (payload.source === "agent") {
               const data = payload.data;
+
+              if (
+                data.name === "speak" &&
+                data.detail.type === "unknown" &&
+                typeof data.detail.input === "string" &&
+                data.detail.input.trim()
+              ) {
+                return (
+                  <SpeakMessage
+                    message={data.detail.input}
+                    timestamp={item.timestamp.getTime()}
+                  />
+                );
+              }
+
               return (
                 <ToolCall
                   toolName={data.name}
@@ -688,12 +708,35 @@ function PermissionRequestCard({
   client: DaemonClient | null;
 }) {
   const { theme } = useUnistyles();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
 
   const { request } = permission;
   const isPlanRequest = request.kind === "plan";
   const title = isPlanRequest ? "Plan" : (request.title ?? request.name ?? "Permission Required");
   const description = request.description ?? "";
+  const resolvedActions = useMemo((): AgentPermissionAction[] => {
+    if (request.kind === "question") {
+      return [];
+    }
+    if (Array.isArray(request.actions) && request.actions.length > 0) {
+      return request.actions;
+    }
+    return [
+      {
+        id: "reject",
+        label: "Deny",
+        behavior: "deny",
+        variant: "danger",
+        intent: "dismiss",
+      },
+      {
+        id: "accept",
+        label: isPlanRequest ? "Implement" : "Accept",
+        behavior: "allow",
+        variant: "primary",
+      },
+    ];
+  }, [isPlanRequest, request]);
 
   const planMarkdown = useMemo(() => {
     if (!request) {
@@ -734,11 +777,11 @@ function PermissionRequestCard({
     isPending: isResponding,
   } = permissionMutation;
 
-  const [respondingAction, setRespondingAction] = useState<"accept" | "deny" | null>(null);
+  const [respondingActionId, setRespondingActionId] = useState<string | null>(null);
 
   useEffect(() => {
     resetPermissionMutation();
-    setRespondingAction(null);
+    setRespondingActionId(null);
   }, [permission.request.id, resetPermissionMutation]);
   const handleResponse = useCallback(
     (response: AgentPermissionResponse) => {
@@ -752,6 +795,24 @@ function PermissionRequestCard({
     },
     [permission.agentId, permission.request.id, respondToPermission],
   );
+  const handleActionPress = useCallback(
+    (action: AgentPermissionAction) => {
+      setRespondingActionId(action.id);
+      if (action.behavior === "allow") {
+        handleResponse({
+          behavior: "allow",
+          selectedActionId: action.id,
+        });
+        return;
+      }
+      handleResponse({
+        behavior: "deny",
+        selectedActionId: action.id,
+        message: "Denied by user",
+      });
+    },
+    [handleResponse],
+  );
 
   if (request.kind === "question") {
     return (
@@ -778,64 +839,48 @@ function PermissionRequestCard({
           !isMobile && permissionStyles.optionsContainerDesktop,
         ]}
       >
-        <Pressable
-          testID="permission-request-deny"
-          style={({ pressed, hovered = false }) => [
-            permissionStyles.optionButton,
-            {
-              backgroundColor: hovered ? theme.colors.surface2 : theme.colors.surface1,
-              borderColor: theme.colors.borderAccent,
-            },
-            pressed ? permissionStyles.optionButtonPressed : null,
-          ]}
-          onPress={() => {
-            setRespondingAction("deny");
-            handleResponse({
-              behavior: "deny",
-              message: "Denied by user",
-            });
-          }}
-          disabled={isResponding}
-        >
-          {respondingAction === "deny" ? (
-            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
-          ) : (
-            <View style={permissionStyles.optionContent}>
-              <X size={14} color={theme.colors.foregroundMuted} />
-              <Text style={[permissionStyles.optionText, { color: theme.colors.foregroundMuted }]}>
-                Deny
-              </Text>
-            </View>
-          )}
-        </Pressable>
+        {resolvedActions.map((action) => {
+          const isDanger = action.variant === "danger" || action.behavior === "deny";
+          const isPrimary = action.variant === "primary";
+          const isRespondingAction = respondingActionId === action.id;
+          const textColor = isPrimary ? theme.colors.foreground : theme.colors.foregroundMuted;
+          const iconColor = textColor;
+          const Icon = action.behavior === "allow" ? Check : X;
+          const testID =
+            action.behavior === "deny"
+              ? "permission-request-deny"
+              : action.id === "accept" || action.id === "implement"
+                ? "permission-request-accept"
+                : `permission-request-action-${action.id}`;
 
-        <Pressable
-          testID="permission-request-accept"
-          style={({ pressed, hovered = false }) => [
-            permissionStyles.optionButton,
-            {
-              backgroundColor: hovered ? theme.colors.surface2 : theme.colors.surface1,
-              borderColor: theme.colors.borderAccent,
-            },
-            pressed ? permissionStyles.optionButtonPressed : null,
-          ]}
-          onPress={() => {
-            setRespondingAction("accept");
-            handleResponse({ behavior: "allow" });
-          }}
-          disabled={isResponding}
-        >
-          {respondingAction === "accept" ? (
-            <ActivityIndicator size="small" color={theme.colors.foreground} />
-          ) : (
-            <View style={permissionStyles.optionContent}>
-              <Check size={14} color={theme.colors.foreground} />
-              <Text style={[permissionStyles.optionText, { color: theme.colors.foreground }]}>
-                Accept
-              </Text>
-            </View>
-          )}
-        </Pressable>
+          return (
+            <Pressable
+              key={action.id}
+              testID={testID}
+              style={({ pressed, hovered = false }) => [
+                permissionStyles.optionButton,
+                {
+                  backgroundColor: hovered ? theme.colors.surface2 : theme.colors.surface1,
+                  borderColor: isDanger ? theme.colors.borderAccent : theme.colors.borderAccent,
+                },
+                pressed ? permissionStyles.optionButtonPressed : null,
+              ]}
+              onPress={() => handleActionPress(action)}
+              disabled={isResponding}
+            >
+              {isRespondingAction ? (
+                <ActivityIndicator size="small" color={textColor} />
+              ) : (
+                <View style={permissionStyles.optionContent}>
+                  <Icon size={14} color={iconColor} />
+                  <Text style={[permissionStyles.optionText, { color: textColor }]}>
+                    {action.label}
+                  </Text>
+                </View>
+              )}
+            </Pressable>
+          );
+        })}
       </View>
     </>
   );

packages/app/src/components/branch-switcher.tsx

@@ -0,0 +1,125 @@
+import { useRef } from "react";
+import { Pressable, Text, View } from "react-native";
+import { ChevronDown, GitBranch } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
+
+interface BranchSwitcherProps {
+  currentBranchName: string | null;
+  title: string;
+  branchOptions: ComboboxOption[];
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onBranchSelect: (branchId: string) => void;
+}
+
+export function BranchSwitcher({
+  currentBranchName,
+  title,
+  branchOptions,
+  isOpen,
+  onOpenChange,
+  onBranchSelect,
+}: BranchSwitcherProps) {
+  const { theme } = useUnistyles();
+  const anchorRef = useRef<View>(null);
+
+  if (!currentBranchName) {
+    return (
+      <Text
+        testID="workspace-header-title"
+        style={styles.headerTitle}
+        numberOfLines={1}
+      >
+        {title}
+      </Text>
+    );
+  }
+
+  return (
+    <View ref={anchorRef} collapsable={false}>
+      <Pressable
+        testID="workspace-header-branch-switcher"
+        onPress={() => onOpenChange(true)}
+        style={({ hovered, pressed }) => [
+          styles.branchSwitcherTrigger,
+          (hovered || pressed) && styles.branchSwitcherTriggerHovered,
+        ]}
+        accessibilityRole="button"
+        accessibilityLabel={`Current branch: ${currentBranchName}. Press to switch branch.`}
+      >
+        <GitBranch
+          size={14}
+          color={theme.colors.foregroundMuted}
+        />
+        <Text
+          testID="workspace-header-title"
+          style={styles.headerTitle}
+          numberOfLines={1}
+        >
+          {title}
+        </Text>
+        <ChevronDown
+          size={12}
+          color={theme.colors.foregroundMuted}
+        />
+      </Pressable>
+      <Combobox
+        options={branchOptions}
+        value={currentBranchName}
+        onSelect={onBranchSelect}
+        searchable
+        placeholder="Switch branch..."
+        searchPlaceholder="Filter branches..."
+        emptyText="No branches found."
+        title="Switch branch"
+        open={isOpen}
+        onOpenChange={onOpenChange}
+        anchorRef={anchorRef}
+        desktopPlacement="bottom-start"
+        desktopPreventInitialFlash
+        desktopMinWidth={280}
+        renderOption={({ option, selected, active, onPress }) => (
+          <ComboboxItem
+            key={option.id}
+            label={option.label}
+            selected={selected}
+            active={active}
+            onPress={onPress}
+            leadingSlot={
+              <GitBranch
+                size={14}
+                color={theme.colors.foregroundMuted}
+              />
+            }
+          />
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  headerTitle: {
+    fontSize: theme.fontSize.base,
+    fontWeight: {
+      xs: "400",
+      md: "300",
+    },
+    color: theme.colors.foreground,
+    flexShrink: 1,
+  },
+  branchSwitcherTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  branchSwitcherTriggerHovered: {
+    backgroundColor: theme.colors.surface1,
+  },
+}));

packages/app/src/components/combined-model-selector.tsx

@@ -10,6 +10,7 @@ import {
 } from "react-native";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import {
   ArrowLeft,
   ChevronDown,
@@ -58,6 +59,7 @@ interface CombinedModelSelectorProps {
     disabled: boolean;
     isOpen: boolean;
   }) => React.ReactNode;
+  onOpen?: () => void;
   onClose?: () => void;
   disabled?: boolean;
 }
@@ -348,7 +350,8 @@ function ProviderSearchInput({
 }) {
   const { theme } = useUnistyles();
   const inputRef = useRef<TextInput>(null);
-  const InputComponent = Platform.OS === "web" ? TextInput : BottomSheetTextInput;
+  const isMobile = useIsCompactFormFactor();
+  const InputComponent = isMobile ? BottomSheetTextInput : TextInput;
 
   useEffect(() => {
     if (autoFocus && Platform.OS === "web" && inputRef.current) {
@@ -515,6 +518,7 @@ export function CombinedModelSelector({
   favoriteKeys = new Set<string>(),
   onToggleFavorite,
   renderTrigger,
+  onOpen,
   onClose,
   disabled = false,
 }: CombinedModelSelectorProps) {
@@ -539,12 +543,14 @@ export function CombinedModelSelector({
     (open: boolean) => {
       setIsOpen(open);
       setView(singleProviderView ?? { kind: "all" });
-      if (!open) {
+      if (open) {
+        onOpen?.();
+      } else {
         setSearchQuery("");
         onClose?.();
       }
     },
-    [onClose, singleProviderView],
+    [onOpen, onClose, singleProviderView],
   );
 
   const handleSelect = useCallback(

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

@@ -0,0 +1,153 @@
+import { Pressable, Text, View } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+type ContextWindowMeterProps = {
+  maxTokens: number;
+  usedTokens: number;
+};
+
+const SVG_SIZE = 20;
+const CENTER = SVG_SIZE / 2;
+const RADIUS = 7;
+const STROKE_WIDTH = 2.25;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+function isValidMaxTokens(value: number): boolean {
+  return Number.isFinite(value) && value > 0;
+}
+
+function isValidUsedTokens(value: number): boolean {
+  return Number.isFinite(value) && value >= 0;
+}
+
+function getUsagePercentage(maxTokens: number, usedTokens: number): number | null {
+  if (!isValidMaxTokens(maxTokens) || !isValidUsedTokens(usedTokens)) {
+    return null;
+  }
+  return (usedTokens / maxTokens) * 100;
+}
+
+function clampPercentage(value: number): number {
+  return Math.max(0, Math.min(100, value));
+}
+
+function formatTokenCount(value: number): string {
+  if (value >= 1_000_000) {
+    return `${Math.round(value / 1_000_000)}m`;
+  }
+  if (value >= 1_000) {
+    return `${Math.round(value / 1_000)}k`;
+  }
+  return Math.round(value).toString();
+}
+
+function getMeterColors(
+  percentage: number,
+  theme: ReturnType<typeof useUnistyles>["theme"],
+): { progress: string; track: string } {
+  const track = theme.colors.surface3;
+  if (percentage > 90) {
+    return { progress: theme.colors.destructive, track };
+  }
+  if (percentage >= 70) {
+    return { progress: theme.colors.palette.amber[500], track };
+  }
+  return { progress: theme.colors.foregroundMuted, track };
+}
+
+export function ContextWindowMeter({ maxTokens, usedTokens }: ContextWindowMeterProps) {
+  const { theme } = useUnistyles();
+  const percentage = getUsagePercentage(maxTokens, usedTokens);
+
+  if (percentage === null) {
+    return null;
+  }
+
+  const clampedPercentage = clampPercentage(percentage);
+  const roundedPercentage = Math.round(percentage);
+  const dashOffset = CIRCUMFERENCE - (clampedPercentage / 100) * CIRCUMFERENCE;
+  const colors = getMeterColors(clampedPercentage, theme);
+
+  return (
+    <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile>
+      <TooltipTrigger asChild triggerRefProp="ref">
+        <Pressable
+          style={styles.container}
+          accessibilityRole="image"
+          accessibilityLabel={`Context window ${roundedPercentage}% used`}
+        >
+          <Svg
+            width={SVG_SIZE}
+            height={SVG_SIZE}
+            viewBox={`0 0 ${SVG_SIZE} ${SVG_SIZE}`}
+            style={styles.svg}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            <Circle
+              cx={CENTER}
+              cy={CENTER}
+              r={RADIUS}
+              fill="none"
+              stroke={colors.track}
+              strokeWidth={STROKE_WIDTH}
+            />
+            <Circle
+              cx={CENTER}
+              cy={CENTER}
+              r={RADIUS}
+              fill="none"
+              stroke={colors.progress}
+              strokeWidth={STROKE_WIDTH}
+              strokeLinecap="round"
+              strokeDasharray={CIRCUMFERENCE}
+              strokeDashoffset={dashOffset}
+            />
+          </Svg>
+        </Pressable>
+      </TooltipTrigger>
+      <TooltipContent side="top" align="center" offset={8}>
+        <View style={styles.tooltipContent}>
+          <Text style={styles.tooltipTitle}>Context window</Text>
+          <Text style={styles.tooltipText}>{`${roundedPercentage}% used`}</Text>
+          <Text
+            style={styles.tooltipDetail}
+          >{`${formatTokenCount(usedTokens)} / ${formatTokenCount(maxTokens)} tokens`}</Text>
+        </View>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  svg: {
+    transform: [{ rotate: "-90deg" }],
+  },
+  tooltipContent: {
+    gap: theme.spacing[1],
+  },
+  tooltipTitle: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.semibold,
+  },
+  tooltipText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.fontSize.sm * 1.4,
+  },
+  tooltipDetail: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    lineHeight: theme.fontSize.xs * 1.4,
+  },
+}));

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

@@ -20,7 +20,7 @@ import {
   type ExplorerTab,
 } from "@/stores/panel-store";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
-import { HEADER_INNER_HEIGHT, isCompactFormFactor } from "@/constants/layout";
+import { HEADER_INNER_HEIGHT, useIsCompactFormFactor } from "@/constants/layout";
 import { GitDiffPane } from "./git-diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
@@ -48,7 +48,7 @@ export function ExplorerSidebar({
   const { theme } = useUnistyles();
   const isScreenFocused = useIsFocused();
   const insets = useSafeAreaInsets();
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const closeToAgent = usePanelStore((state) => state.closeToAgent);
@@ -472,7 +472,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.md,
   },
   tabActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   tabText: {
     fontSize: theme.fontSize.sm,

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   ActivityIndicator,
@@ -10,7 +10,8 @@ import {
   Platform,
 } from "react-native";
 import { Gesture } from "react-native-gesture-handler";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import Animated, {
   cancelAnimation,
   Easing,
@@ -89,7 +90,7 @@ export function FileExplorerPane({
   onOpenFile,
 }: FileExplorerPaneProps) {
   const { theme } = useUnistyles();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
 
   const daemons = useHosts();
@@ -118,7 +119,6 @@ export function FileExplorerPane({
   );
 
   const {
-    workspaceStateKey: actionsWorkspaceStateKey,
     requestDirectoryListing,
     requestFileDownloadToken,
     selectExplorerEntry,
@@ -129,6 +129,16 @@ export function FileExplorerPane({
   });
   const sortOption = usePanelStore((state) => state.explorerSortOption);
   const setSortOption = usePanelStore((state) => state.setExplorerSortOption);
+  const expandedPathsArray = usePanelStore((state) =>
+    workspaceStateKey ? state.expandedPathsByWorkspace[workspaceStateKey] : undefined,
+  );
+  const setExpandedPathsForWorkspace = usePanelStore(
+    (state) => state.setExpandedPathsForWorkspace,
+  );
+  const expandedPaths = useMemo(
+    () => new Set(expandedPathsArray && expandedPathsArray.length > 0 ? expandedPathsArray : ["."]),
+    [expandedPathsArray],
+  );
 
   const directories = explorerState?.directories ?? new Map();
   const pendingRequest = explorerState?.pendingRequest ?? null;
@@ -144,7 +154,6 @@ export function FileExplorerPane({
     [isExplorerLoading, pendingRequest?.mode, pendingRequest?.path],
   );
 
-  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(["."]));
   const treeListRef = useRef<FlatList<TreeRow>>(null);
   const scrollbar = useWebScrollViewScrollbar(treeListRef, {
     enabled: showDesktopWebScrollbar,
@@ -154,8 +163,7 @@ export function FileExplorerPane({
 
   useEffect(() => {
     hasInitializedRef.current = false;
-    setExpandedPaths(new Set(["."]));
-  }, [actionsWorkspaceStateKey]);
+  }, [workspaceStateKey]);
 
   useEffect(() => {
     if (!hasWorkspaceScope) {
@@ -169,23 +177,35 @@ export function FileExplorerPane({
       recordHistory: false,
       setCurrentPath: false,
     });
-  }, [hasWorkspaceScope, requestDirectoryListing]);
+    const persistedPaths = usePanelStore.getState().expandedPathsByWorkspace[workspaceStateKey ?? ""];
+    if (persistedPaths) {
+      for (const path of persistedPaths) {
+        if (path !== ".") {
+          void requestDirectoryListing(path, {
+            recordHistory: false,
+            setCurrentPath: false,
+          });
+        }
+      }
+    }
+  }, [hasWorkspaceScope, requestDirectoryListing, workspaceStateKey]);
 
   // Expand ancestor directories when a file is selected (e.g., from an inline path click)
   useEffect(() => {
-    if (!selectedEntryPath || !hasWorkspaceScope) {
+    if (!selectedEntryPath || !workspaceStateKey) {
       return;
     }
     const parentDir = getParentDirectory(selectedEntryPath);
     const ancestors = getAncestorDirectories(parentDir);
-
-    setExpandedPaths((prev) => {
-      const next = new Set(prev);
-      ancestors.forEach((path) => next.add(path));
-      return next;
-    });
-
-    ancestors.forEach((path) => {
+    const newPaths = ancestors.filter((path) => !expandedPaths.has(path));
+    if (newPaths.length === 0) {
+      return;
+    }
+    setExpandedPathsForWorkspace(
+      workspaceStateKey,
+      [...Array.from(expandedPaths), ...newPaths],
+    );
+    newPaths.forEach((path) => {
       if (!directories.has(path)) {
         void requestDirectoryListing(path, {
           recordHistory: false,
@@ -193,34 +213,46 @@ export function FileExplorerPane({
         });
       }
     });
-  }, [directories, hasWorkspaceScope, requestDirectoryListing, selectedEntryPath]);
+  }, [
+    directories,
+    workspaceStateKey,
+    expandedPaths,
+    requestDirectoryListing,
+    selectedEntryPath,
+    setExpandedPathsForWorkspace,
+  ]);
 
   const handleToggleDirectory = useCallback(
     (entry: ExplorerEntry) => {
-      if (!hasWorkspaceScope) {
+      if (!workspaceStateKey) {
         return;
       }
-
       const isExpanded = expandedPaths.has(entry.path);
-      const nextExpanded = !isExpanded;
-      setExpandedPaths((prev) => {
-        const next = new Set(prev);
-        if (isExpanded) {
-          next.delete(entry.path);
-        } else {
-          next.add(entry.path);
+      if (isExpanded) {
+        setExpandedPathsForWorkspace(
+          workspaceStateKey,
+          Array.from(expandedPaths).filter((path) => path !== entry.path),
+        );
+      } else {
+        setExpandedPathsForWorkspace(
+          workspaceStateKey,
+          [...Array.from(expandedPaths), entry.path],
+        );
+        if (!directories.has(entry.path)) {
+          void requestDirectoryListing(entry.path, {
+            recordHistory: false,
+            setCurrentPath: false,
+          });
         }
-        return next;
-      });
-
-      if (nextExpanded && !directories.has(entry.path)) {
-        void requestDirectoryListing(entry.path, {
-          recordHistory: false,
-          setCurrentPath: false,
-        });
       }
     },
-    [directories, expandedPaths, hasWorkspaceScope, requestDirectoryListing],
+    [
+      workspaceStateKey,
+      expandedPaths,
+      directories,
+      requestDirectoryListing,
+      setExpandedPathsForWorkspace,
+    ],
   );
 
   const handleOpenFile = useCallback(
@@ -817,7 +849,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.md,
   },
   entryRowActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   indentGuide: {
     position: "absolute",

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

@@ -8,7 +8,8 @@ import {
   View,
   Platform,
 } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { Fonts } from "@/constants/theme";
 import { useSessionStore, type ExplorerFile } from "@/stores/session-store";
 import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
@@ -241,7 +242,7 @@ export function FilePane({
   workspaceRoot: string;
   filePath: string;
 }) {
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const showDesktopWebScrollbar = Platform.OS === "web" && !isMobile;
 
   const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);

packages/app/src/components/headers/menu-header.tsx

@@ -5,7 +5,7 @@ import { PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
 import { HeaderToggleButton } from "./header-toggle-button";
 import { usePanelStore } from "@/stores/panel-store";
-import { isCompactFormFactor } from "@/constants/layout";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 
 interface MenuHeaderProps {
@@ -44,7 +44,7 @@ export function SidebarMenuToggle({
   nativeID = "menu-button",
 }: SidebarMenuToggleProps = {}) {
   const { theme } = useUnistyles();
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const toggleAgentList = usePanelStore((state) => state.toggleAgentList);

packages/app/src/components/headers/screen-header.tsx

@@ -6,7 +6,7 @@ import {
   HEADER_INNER_HEIGHT,
   HEADER_INNER_HEIGHT_MOBILE,
   HEADER_TOP_PADDING_MOBILE,
-  isCompactFormFactor,
+  useIsCompactFormFactor,
 } from "@/constants/layout";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
@@ -26,7 +26,7 @@ interface ScreenHeaderProps {
 export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }: ScreenHeaderProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const padding = useWindowControlsPadding("header");
   // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets
   const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;

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

@@ -0,0 +1,49 @@
+import { SquareTerminal } from "lucide-react-native";
+import { Image, type ImageSourcePropType } from "react-native";
+import {
+  isKnownEditorTargetId,
+  type EditorTargetId,
+  type KnownEditorTargetId,
+} from "@server/shared/messages";
+
+interface EditorAppIconProps {
+  editorId: EditorTargetId;
+  size?: number;
+  color?: string;
+}
+
+/* eslint-disable @typescript-eslint/no-require-imports */
+const EDITOR_APP_IMAGES: Record<KnownEditorTargetId, 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"),
+  zed: require("../../../assets/images/editor-apps/zed.png"),
+  finder: require("../../../assets/images/editor-apps/finder.png"),
+  explorer: require("../../../assets/images/editor-apps/file-explorer.png"),
+  "file-manager": require("../../../assets/images/editor-apps/file-explorer.png"),
+};
+/* eslint-enable @typescript-eslint/no-require-imports */
+
+export function hasBundledEditorAppIcon(
+  editorId: EditorTargetId,
+): editorId is KnownEditorTargetId {
+  return isKnownEditorTargetId(editorId);
+}
+
+export function EditorAppIcon({
+  editorId,
+  size = 16,
+  color,
+}: EditorAppIconProps) {
+  if (!hasBundledEditorAppIcon(editorId)) {
+    return <SquareTerminal size={size} color={color} />;
+  }
+
+  return (
+    <Image
+      source={EDITOR_APP_IMAGES[editorId]}
+      style={{ width: size, height: size }}
+      resizeMode="contain"
+    />
+  );
+}

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

@@ -50,7 +50,7 @@ import { formatConnectionStatus } from "@/utils/daemons";
 import {
   HEADER_INNER_HEIGHT,
   HEADER_INNER_HEIGHT_MOBILE,
-  isCompactFormFactor,
+  useIsCompactFormFactor,
 } from "@/constants/layout";
 import {
   buildHostSessionsRoute,
@@ -118,7 +118,7 @@ export const LeftSidebar = memo(function LeftSidebar({
 
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
-  const isCompactLayout = isCompactFormFactor();
+  const isCompactLayout = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
   const closeToAgent = usePanelStore((state) => state.closeToAgent);
@@ -229,21 +229,21 @@ export const LeftSidebar = memo(function LeftSidebar({
       return;
     }
     closeToAgent();
-    router.push(buildHostSettingsRoute(activeServerId) as any);
+    router.push(buildHostSettingsRoute(activeServerId));
   }, [activeServerId, closeToAgent]);
 
   const handleSettingsDesktop = useCallback(() => {
     if (!activeServerId) {
       return;
     }
-    router.push(buildHostSettingsRoute(activeServerId) as any);
+    router.push(buildHostSettingsRoute(activeServerId));
   }, [activeServerId]);
 
   const handleViewMoreNavigate = useCallback(() => {
     if (!activeServerId) {
       return;
     }
-    router.push(buildHostSessionsRoute(activeServerId) as any);
+    router.push(buildHostSessionsRoute(activeServerId));
   }, [activeServerId]);
 
   const handleHostSelect = useCallback(
@@ -253,7 +253,7 @@ export const LeftSidebar = memo(function LeftSidebar({
       }
       const nextPath = mapPathnameToServer(pathname, nextServerId);
       setIsHostPickerOpen(false);
-      router.push(nextPath as any);
+      router.push(nextPath);
     },
     [pathname],
   );
@@ -885,10 +885,10 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
   },
   newAgentButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   newAgentButtonActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   hostTrigger: {
     flexDirection: "row",
@@ -901,7 +901,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.lg,
   },
   hostTriggerHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   hostStatusDot: {
     width: 8,

packages/app/src/components/message-input.tsx

@@ -79,12 +79,17 @@ export interface MessageInputProps {
   isInputActive?: boolean;
   /** Content to render on the left side of the button row (e.g., AgentStatusBar) */
   leftContent?: React.ReactNode;
+  /** Content to render on the right side before the voice button (e.g., context window meter) */
+  beforeVoiceContent?: React.ReactNode;
   /** Content to render on the right side after voice button (e.g., realtime button, cancel button) */
   rightContent?: React.ReactNode;
   voiceServerId?: string;
   voiceAgentId?: string;
   /** When true and there's sendable content, calls onQueue instead of onSubmit */
   isAgentRunning?: boolean;
+  /** Controls what the default send action (Enter, send button, dictation) does
+   *  when the agent is running. "interrupt" sends immediately, "queue" queues. */
+  defaultSendBehavior?: "interrupt" | "queue";
   /** Callback for queue button when agent is running */
   onQueue?: (payload: MessagePayload) => void;
   /** Optional handler used when submit button is in loading state. */
@@ -201,10 +206,12 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     disabled = false,
     isInputActive = true,
     leftContent,
+    beforeVoiceContent,
     rightContent,
     voiceServerId,
     voiceAgentId,
     isAgentRunning = false,
+    defaultSendBehavior = "interrupt",
     onQueue,
     onSubmitLoadingPress,
     onKeyPress: onKeyPressCallback,
@@ -349,11 +356,17 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
 
       if (shouldAutoSend) {
         const imageAttachments = images.length > 0 ? images : undefined;
-        onSubmit({
-          text: nextValue,
-          images: imageAttachments,
-          forceSend: isAgentRunning || undefined,
-        });
+        // Respect send behavior setting: when "queue", dictation queues too.
+        if (defaultSendBehavior === "queue" && isAgentRunning && onQueue) {
+          onQueue({ text: nextValue, images: imageAttachments });
+          onChangeText("");
+        } else {
+          onSubmit({
+            text: nextValue,
+            images: imageAttachments,
+            forceSend: isAgentRunning || undefined,
+          });
+        }
       } else {
         onChangeText(nextValue);
       }
@@ -364,7 +377,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
         });
       }
     },
-    [onChangeText, onSubmit, images, isAgentRunning],
+    [onChangeText, onSubmit, onQueue, images, isAgentRunning, defaultSendBehavior],
   );
 
   const handleDictationError = useCallback(
@@ -575,6 +588,26 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     onHeightChange?.(MIN_INPUT_HEIGHT);
   }, [value, images, onQueue, onChangeText, onHeightChange]);
 
+  // Default send action: respects the sendBehavior setting.
+  // When "interrupt" (default), primary action sends immediately (interrupts).
+  // When "queue", primary action queues when agent is running.
+  const handleDefaultSendAction = useCallback(() => {
+    if (defaultSendBehavior === "queue" && isAgentRunning && onQueue) {
+      handleQueueMessage();
+    } else {
+      handleSendMessage();
+    }
+  }, [defaultSendBehavior, isAgentRunning, onQueue, handleQueueMessage, handleSendMessage]);
+
+  // Alternate send action: always the opposite of the default.
+  const handleAlternateSendAction = useCallback(() => {
+    if (defaultSendBehavior === "queue") {
+      handleSendMessage(); // interrupt
+    } else if (onQueue) {
+      handleQueueMessage(); // queue
+    }
+  }, [defaultSendBehavior, handleSendMessage, handleQueueMessage, onQueue]);
+
   // Web input height measurement
   function isTextAreaLike(v: unknown): v is TextAreaHandle {
     return typeof v === "object" && v !== null && "scrollHeight" in v;
@@ -869,18 +902,18 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     // Shift+Enter: add newline (default behavior, don't intercept)
     if (shiftKey) return;
 
-    // Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux): queue when agent is running
+    // Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux): alternate action
     if ((metaKey || ctrlKey) && isAgentRunning && onQueue) {
       if (isSubmitDisabled || isSubmitLoading || disabled) return;
       event.preventDefault();
-      handleQueueMessage();
+      handleAlternateSendAction();
       return;
     }
 
-    // Enter: send (interrupts agent if running)
+    // Enter: default send action (interrupt or queue, based on setting)
     if (isSubmitDisabled || isSubmitLoading || disabled) return;
     event.preventDefault();
-    handleSendMessage();
+    handleDefaultSendAction();
   }
 
   const hasImages = images.length > 0;
@@ -889,11 +922,14 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
   const canPressLoadingButton = isSubmitLoading && typeof onSubmitLoadingPress === "function";
   const isSendButtonDisabled =
     disabled || (!canPressLoadingButton && (isSubmitDisabled || isSubmitLoading));
+  const defaultActionQueues = defaultSendBehavior === "queue" && isAgentRunning;
   const submitAccessibilityLabel = canPressLoadingButton
     ? "Interrupt agent"
-    : isAgentRunning
-      ? "Send and interrupt"
-      : "Send message";
+    : defaultActionQueues
+      ? "Queue message"
+      : isAgentRunning
+        ? "Send and interrupt"
+        : "Send message";
 
   const handleInputChange = useCallback(
     (nextValue: string) => {
@@ -1015,6 +1051,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
 
           {/* Right: voice button, contextual button (realtime/send/cancel) */}
           <View style={styles.rightButtonGroup}>
+            {beforeVoiceContent}
             <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
               <TooltipTrigger
                 onPress={handleVoicePress}
@@ -1067,10 +1104,10 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
               </TooltipContent>
             </Tooltip>
             {rightContent}
-            {hasSendableContent && isAgentRunning && onQueue && (
+            {hasSendableContent && isAgentRunning && onQueue && !defaultActionQueues && (
               <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
                 <TooltipTrigger
-                  onPress={handleQueueMessage}
+                  onPress={handleAlternateSendAction}
                   disabled={!isConnected || disabled}
                   accessibilityLabel="Queue message"
                   accessibilityRole="button"
@@ -1095,7 +1132,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
             {shouldShowSendButton && (
               <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
                 <TooltipTrigger
-                  onPress={canPressLoadingButton ? onSubmitLoadingPress : handleSendMessage}
+                  onPress={canPressLoadingButton ? onSubmitLoadingPress : handleDefaultSendAction}
                   disabled={isSendButtonDisabled}
                   accessibilityLabel={submitAccessibilityLabel}
                   accessibilityRole="button"
@@ -1109,7 +1146,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                 </TooltipTrigger>
                 <TooltipContent side="top" align="center" offset={8}>
                   <View style={styles.tooltipRow}>
-                    <Text style={styles.tooltipText}>Send</Text>
+                    <Text style={styles.tooltipText}>{defaultActionQueues ? "Queue" : "Send"}</Text>
                     {sendKeys ? <Shortcut chord={sendKeys} style={styles.tooltipShortcut} /> : null}
                   </View>
                 </TooltipContent>

packages/app/src/components/message.tsx

@@ -39,8 +39,10 @@ import {
   Copy,
   TriangleAlertIcon,
   Scissors,
+  MicVocal,
 } from "lucide-react-native";
-import { StyleSheet, useUnistyles, UnistylesRuntime } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import Animated, {
   Easing,
   cancelAnimation,
@@ -913,6 +915,65 @@ export const AssistantMessage = memo(function AssistantMessage({
   );
 });
 
+interface SpeakMessageProps {
+  message: string;
+  timestamp: number;
+  disableOuterSpacing?: boolean;
+}
+
+const speakMessageStylesheet = StyleSheet.create((theme) => ({
+  container: {
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: theme.spacing[3],
+  },
+  containerSpacing: {
+    marginBottom: theme.spacing[4],
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    marginBottom: theme.spacing[2],
+  },
+  headerLabel: {
+    fontFamily: Fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    color: theme.colors.foregroundMuted,
+  },
+  text: {
+    fontFamily: Fonts.sans,
+    fontSize: theme.fontSize.base,
+    lineHeight: 22,
+    color: theme.colors.foreground,
+  },
+}));
+
+export const SpeakMessage = memo(function SpeakMessage({
+  message,
+  timestamp,
+  disableOuterSpacing,
+}: SpeakMessageProps) {
+  const { theme } = useUnistyles();
+  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
+
+  return (
+    <View
+      testID="speak-message"
+      style={[
+        speakMessageStylesheet.container,
+        !resolvedDisableOuterSpacing && speakMessageStylesheet.containerSpacing,
+      ]}
+    >
+      <View style={speakMessageStylesheet.header}>
+        <MicVocal size={14} color={theme.colors.foregroundMuted} />
+        <Text style={speakMessageStylesheet.headerLabel}>Spoke</Text>
+      </View>
+      <Text style={speakMessageStylesheet.text}>{message}</Text>
+    </View>
+  );
+});
+
 interface ActivityLogProps {
   type: "system" | "info" | "success" | "error" | "artifact";
   message: string;
@@ -1762,7 +1823,7 @@ export const ToolCall = memo(function ToolCall({
   const [isExpanded, setIsExpanded] = useState(false);
 
   // Check if we're on mobile (use bottom sheet) or desktop (inline expand)
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
 
   const effectiveDetail = useMemo<ToolCallDetail | undefined>(() => {
     if (detail) {

packages/app/src/components/name-host-modal.tsx

@@ -1,117 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Text, View } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { AdaptiveModalSheet, AdaptiveTextInput } from "./adaptive-modal-sheet";
-import { Button } from "@/components/ui/button";
-
-const styles = StyleSheet.create((theme) => ({
-  helper: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-  },
-  field: {
-    marginTop: theme.spacing[3],
-    gap: theme.spacing[2],
-  },
-  label: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.medium,
-  },
-  input: {
-    backgroundColor: theme.colors.surface2,
-    borderRadius: theme.borderRadius.lg,
-    paddingHorizontal: theme.spacing[4],
-    paddingVertical: theme.spacing[3],
-    color: theme.colors.foreground,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-  },
-  actions: {
-    flexDirection: "row",
-    gap: theme.spacing[3],
-    marginTop: theme.spacing[4],
-  },
-}));
-
-export interface NameHostModalProps {
-  visible: boolean;
-  serverId: string;
-  hostname: string | null;
-  onSkip: () => void;
-  onSave: (label: string) => void;
-}
-
-export function NameHostModal({ visible, serverId, hostname, onSkip, onSave }: NameHostModalProps) {
-  const { theme } = useUnistyles();
-
-  const [label, setLabel] = useState("");
-  const hasEditedRef = useRef(false);
-
-  const suggested = (hostname?.trim() || serverId).trim();
-
-  useEffect(() => {
-    if (!visible) return;
-    setLabel(suggested);
-    hasEditedRef.current = false;
-  }, [suggested, visible]);
-
-  useEffect(() => {
-    if (!visible) return;
-    if (hasEditedRef.current) return;
-    if (!hostname) return;
-    const trimmed = label.trim();
-    if (trimmed.length === 0 || trimmed === serverId) {
-      setLabel(hostname.trim());
-    }
-  }, [hostname, label, serverId, visible]);
-
-  const handleChange = useCallback((value: string) => {
-    hasEditedRef.current = true;
-    setLabel(value);
-  }, []);
-
-  const handleSave = useCallback(() => {
-    const trimmed = label.trim();
-    if (!trimmed) {
-      onSkip();
-      return;
-    }
-    onSave(trimmed);
-  }, [label, onSave, onSkip]);
-
-  return (
-    <AdaptiveModalSheet
-      title="Name this host"
-      visible={visible}
-      onClose={onSkip}
-      testID="name-host-modal"
-    >
-      <Text style={styles.helper}>Optional. You can rename this later in Settings.</Text>
-
-      <View style={styles.field}>
-        <Text style={styles.label}>Label</Text>
-        <AdaptiveTextInput
-          value={label}
-          onChangeText={handleChange}
-          placeholder={suggested}
-          placeholderTextColor={theme.colors.foregroundMuted}
-          style={styles.input}
-          autoCapitalize="none"
-          autoCorrect={false}
-          returnKeyType="done"
-          onSubmitEditing={handleSave}
-        />
-      </View>
-
-      <View style={styles.actions}>
-        <Button style={{ flex: 1 }} variant="secondary" onPress={onSkip} testID="name-host-skip">
-          Skip
-        </Button>
-        <Button style={{ flex: 1 }} variant="default" onPress={handleSave} testID="name-host-save">
-          Save
-        </Button>
-      </View>
-    </AdaptiveModalSheet>
-  );
-}

packages/app/src/components/pair-link-modal.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { Alert, Text, View } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { Link } from "lucide-react-native";
 import type { HostProfile } from "@/types/host-connection";
 import { useHosts, useHostMutations } from "@/runtime/host-runtime";
@@ -66,7 +67,7 @@ export function PairLinkModal({
   const { theme } = useUnistyles();
   const daemons = useHosts();
   const { upsertConnectionFromOfferUrl: upsertDaemonFromOfferUrl } = useHostMutations();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
 
   const [offerUrl, setOfferUrl] = useState("");
   const [isSaving, setIsSaving] = useState(false);
@@ -146,7 +147,7 @@ export function PairLinkModal({
       await client.close().catch(() => undefined);
 
       const isNewHost = !daemons.some((daemon) => daemon.serverId === parsedOffer.serverId);
-      const profile = await upsertDaemonFromOfferUrl(raw);
+      const profile = await upsertDaemonFromOfferUrl(raw, hostname ?? undefined);
       onSaved?.({ profile, serverId: parsedOffer.serverId, hostname, isNewHost });
       handleClose();
     } catch (error) {

packages/app/src/components/plan-card.tsx

@@ -78,9 +78,17 @@ function createPlanMarkdownRules() {
       const contentStyle = isOrdered ? styles.ordered_list_content : styles.bullet_list_content;
 
       return (
-        <View key={node.key} style={[styles.list_item, { flexShrink: 0 }]}>
+        <View key={node.key} style={styles.list_item}>
           <Text style={iconStyle}>{marker}</Text>
-          <Text style={[contentStyle, { flex: 1, flexShrink: 1, minWidth: 0 }]}>{children}</Text>
+          <View style={[contentStyle, { flex: 1, flexShrink: 1, minWidth: 0 }]}>{children}</View>
+        </View>
+      );
+    },
+    paragraph: (node: any, children: ReactNode[], parent: any, styles: any) => {
+      const isLastChild = parent[0]?.children?.at(-1)?.key === node.key;
+      return (
+        <View key={node.key} style={[styles.paragraph, isLastChild && { marginBottom: 0 }]}>
+          {children}
         </View>
       );
     },

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

@@ -1,6 +1,7 @@
 import { useState, useCallback } from "react";
 import { View, Text, TextInput, Pressable, ActivityIndicator, Platform } from "react-native";
-import { StyleSheet, useUnistyles, UnistylesRuntime } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { Check, CircleHelp, X } from "lucide-react-native";
 import type { PendingPermission } from "@/types/shared";
 import type { AgentPermissionResponse } from "@server/server/agent/agent-sdk-types";
@@ -63,7 +64,7 @@ const IS_WEB = Platform.OS === "web";
 
 export function QuestionFormCard({ permission, onRespond, isResponding }: QuestionFormCardProps) {
   const { theme } = useUnistyles();
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const questions = parseQuestions(permission.request.input);
 
   const [selections, setSelections] = useState<Record<number, Set<number>>>({});

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

@@ -44,7 +44,7 @@ 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 { getIsElectronRuntime, isCompactFormFactor } from "@/constants/layout";
+import { getIsElectronRuntime, useIsCompactFormFactor } from "@/constants/layout";
 import { projectIconQueryKey } from "@/hooks/use-project-icon-query";
 import { parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
@@ -713,7 +713,7 @@ function ProjectHeaderRow({
 }: ProjectHeaderRowProps) {
   const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
-  const isMobileBreakpoint = isCompactFormFactor();
+  const isMobileBreakpoint = useIsCompactFormFactor();
   const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
   const toast = useToast();
 
@@ -1113,7 +1113,7 @@ function WorkspaceRowWithMenu({
         serverId: workspace.serverId,
         archivedWorkspaceId: workspace.workspaceId,
         workspaces: sessionWorkspaces.values(),
-      }) as any,
+      }),
     );
   }, [activeWorkspaceSelection, sessionWorkspaces, workspace.serverId, workspace.workspaceId]);
 
@@ -1606,7 +1606,7 @@ export function SidebarWorkspaceList({
   listFooterComponent,
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const isNative = Platform.OS !== "web";
   const pathname = usePathname();
   const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
@@ -1980,7 +1980,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   projectRowHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectRowPressed: {
     backgroundColor: theme.colors.surface2,
@@ -2050,7 +2050,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   projectActionButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectActionButtonText: {
     color: theme.colors.foregroundMuted,
@@ -2065,7 +2065,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   projectIconActionButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectIconActionButtonHidden: {
     opacity: 0,
@@ -2143,7 +2143,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   workspaceRowHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   workspaceRowPressed: {
     backgroundColor: theme.colors.surface2,
@@ -2157,7 +2157,7 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.md,
   },
   sidebarRowSelected: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   workspaceRowContainer: {
     position: "relative",
@@ -2241,12 +2241,12 @@ const styles = StyleSheet.create((theme) => ({
   diffStatAdditions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   diffStatDeletions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   kebabButton: {
     padding: 2,

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

@@ -313,7 +313,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
       keyExtractor={(item) => item.id}
       testID="agent-chat-scroll"
       nativeID="agent-chat-scroll-native-virtualized"
-      ListHeaderComponent={liveHeaderContent ? () => liveHeaderContent : undefined}
+      ListHeaderComponent={liveHeaderContent ?? undefined}
       contentContainerStyle={baseListContentContainerStyle}
       style={listStyle}
       onLayout={handleListLayout}

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

@@ -21,7 +21,7 @@ import {
 import { usePanelStore } from "@/stores/panel-store";
 import { toXtermTheme } from "@/utils/to-xterm-theme";
 import TerminalEmulator, { type TerminalEmulatorHandle } from "./terminal-emulator";
-import { isCompactFormFactor } from "@/constants/layout";
+import { useIsCompactFormFactor } from "@/constants/layout";
 
 interface TerminalPaneProps {
   serverId: string;
@@ -92,7 +92,7 @@ export function TerminalPane({
   const isAppVisible = useAppVisible();
   const { theme } = useUnistyles();
   const xtermTheme = useMemo(() => toXtermTheme(theme.colors.terminal), [theme.colors.terminal]);
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const openAgentList = usePanelStore((state) => state.openAgentList);
   const openFileExplorer = usePanelStore((state) => state.openFileExplorer);

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

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } fro
 import { createPortal } from "react-dom";
 import { Animated, Easing, Platform, Text, ToastAndroid, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { AlertTriangle, CheckCircle2 } from "lucide-react-native";
 import { getOverlayRoot, OVERLAY_Z } from "@/lib/overlay-root";
 import {
@@ -108,6 +109,7 @@ export function ToastViewport({
 }) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
+  const isMobile = useIsCompactFormFactor();
   const opacity = useRef(new Animated.Value(0)).current;
   const translateY = useRef(new Animated.Value(-8)).current;
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -181,7 +183,6 @@ export function ToastViewport({
     return null;
   }
 
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const headerHeight = isMobile ? HEADER_INNER_HEIGHT_MOBILE : HEADER_INNER_HEIGHT;
   const headerTopPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;
   const topOffset =

packages/app/src/components/ui/combobox-options.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import {
   buildVisibleComboboxOptions,
+  filterAndRankComboboxOptions,
   getComboboxFallbackIndex,
   orderVisibleComboboxOptions,
 } from "./combobox-options";
@@ -47,6 +48,48 @@ describe("buildVisibleComboboxOptions", () => {
   });
 });
 
+describe("filterAndRankComboboxOptions", () => {
+  const options = [
+    { id: "feat/login", label: "feat/login" },
+    { id: "main", label: "main" },
+    { id: "feat/main-nav", label: "feat/main-nav" },
+    { id: "fix/logout", label: "fix/logout", description: "fixes main logout bug" },
+  ];
+
+  it("returns all options when search is empty", () => {
+    expect(filterAndRankComboboxOptions(options, "")).toEqual(options);
+  });
+
+  it("filters by label substring", () => {
+    const result = filterAndRankComboboxOptions(options, "login");
+    expect(result.map((o) => o.id)).toEqual(["feat/login"]);
+  });
+
+  it("filters by id substring", () => {
+    const result = filterAndRankComboboxOptions(options, "fix/");
+    expect(result.map((o) => o.id)).toEqual(["fix/logout"]);
+  });
+
+  it("filters by description substring", () => {
+    const result = filterAndRankComboboxOptions(options, "logout bug");
+    expect(result.map((o) => o.id)).toEqual(["fix/logout"]);
+  });
+
+  it("ranks prefix matches above substring matches", () => {
+    const result = filterAndRankComboboxOptions(options, "main");
+    expect(result.map((o) => o.id)).toEqual(["main", "feat/main-nav", "fix/logout"]);
+  });
+
+  it("is case-insensitive", () => {
+    const items = [{ id: "Alpha", label: "Alpha" }];
+    expect(filterAndRankComboboxOptions(items, "alpha")).toHaveLength(1);
+  });
+
+  it("returns empty when nothing matches", () => {
+    expect(filterAndRankComboboxOptions(options, "zzz")).toEqual([]);
+  });
+});
+
 describe("combobox above-search ordering", () => {
   const visible = [
     { id: "/tmp/new-project", label: "/tmp/new-project", kind: "directory" as const },

packages/app/src/components/ui/combobox-options.ts

@@ -35,18 +35,33 @@ export function shouldShowCustomComboboxOption(input: {
   );
 }
 
+export function filterAndRankComboboxOptions(
+  options: ComboboxOptionModel[],
+  search: string,
+): ComboboxOptionModel[] {
+  if (!search) return options;
+  return options
+    .filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(search) ||
+        opt.id.toLowerCase().includes(search) ||
+        opt.description?.toLowerCase().includes(search),
+    )
+    .sort((a, b) => {
+      const aPrefix =
+        a.label.toLowerCase().startsWith(search) || a.id.toLowerCase().startsWith(search);
+      const bPrefix =
+        b.label.toLowerCase().startsWith(search) || b.id.toLowerCase().startsWith(search);
+      if (aPrefix !== bPrefix) return aPrefix ? -1 : 1;
+      return 0;
+    });
+}
+
 export function buildVisibleComboboxOptions(
   input: BuildVisibleComboboxOptionsInput,
 ): ComboboxOptionModel[] {
   const normalizedSearch = input.searchable ? input.searchQuery.trim().toLowerCase() : "";
-  const filteredOptions = normalizedSearch
-    ? input.options.filter(
-        (opt) =>
-          opt.label.toLowerCase().includes(normalizedSearch) ||
-          opt.id.toLowerCase().includes(normalizedSearch) ||
-          opt.description?.toLowerCase().includes(normalizedSearch),
-      )
-    : input.options;
+  const filteredOptions = filterAndRankComboboxOptions(input.options, normalizedSearch);
 
   const sanitizedSearchValue = input.searchQuery.trim();
   const showCustomOption = shouldShowCustomComboboxOption({

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

@@ -11,7 +11,8 @@ import {
   StatusBar,
   useWindowDimensions,
 } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import {
   BottomSheetModal,
   BottomSheetScrollView,
@@ -261,7 +262,7 @@ export function Combobox({
   anchorRef,
   children,
 }: ComboboxProps): ReactElement {
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const effectiveOptionsPosition = isMobile ? "below-search" : optionsPosition;
   const isDesktopAboveSearch =
     !isMobile && Platform.OS === "web" && effectiveOptionsPosition === "above-search";
@@ -659,13 +660,7 @@ export function Combobox({
     </>
   );
 
-  const defaultContent = (
-    <>
-      {effectiveOptionsPosition === "above-search" ? optionsList : null}
-      {searchable ? searchInput : null}
-      {effectiveOptionsPosition === "below-search" ? optionsList : null}
-    </>
-  );
+  const defaultContent = optionsList;
 
   const content = children ?? defaultContent;
 
@@ -690,6 +685,7 @@ export function Combobox({
           <Text style={styles.comboboxTitle}>{title}</Text>
         </View>
         {stickyHeader}
+        {!children && searchable ? searchInput : null}
         <BottomSheetScrollView
           contentContainerStyle={styles.comboboxScrollContent}
           keyboardShouldPersistTaps="handled"
@@ -745,6 +741,7 @@ export function Combobox({
             </>
           ) : (
             <>
+              {searchable ? searchInput : null}
               {effectiveOptionsPosition === "above-search" ? (
                 <ScrollView
                   ref={desktopOptionsScrollRef}
@@ -759,9 +756,7 @@ export function Combobox({
                 >
                   {optionsList}
                 </ScrollView>
-              ) : null}
-              {searchable ? searchInput : null}
-              {effectiveOptionsPosition === "below-search" ? (
+              ) : (
                 <ScrollView
                   contentContainerStyle={styles.desktopScrollContent}
                   keyboardShouldPersistTaps="handled"
@@ -770,7 +765,7 @@ export function Combobox({
                 >
                   {optionsList}
                 </ScrollView>
-              ) : null}
+              )}
             </>
           )}
         </Animated.View>
@@ -783,15 +778,12 @@ const styles = StyleSheet.create((theme) => ({
   searchInputContainer: {
     flexDirection: "row",
     alignItems: "center",
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface1,
-    borderRadius: theme.borderRadius.lg,
     paddingHorizontal: theme.spacing[3],
-    marginHorizontal: theme.spacing[2],
-    marginBottom: theme.spacing[2],
-    marginTop: theme.spacing[1],
     gap: theme.spacing[2],
+    backgroundColor: theme.colors.surface1,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
   },
   searchInput: {
     flex: 1,

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

@@ -27,7 +27,8 @@ import {
   type ViewStyle,
 } from "react-native";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { Check, CheckCircle } from "lucide-react-native";
 import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -347,7 +348,7 @@ export function ContextMenuContent({
   testID?: string;
 }>): ReactElement | null {
   const context = useContextMenuContext("ContextMenuContent");
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const useMobileSheet = isMobile && mobileMode === "sheet";
   const { open, setOpen, triggerRef, anchorRect } = context;
   const bottomSheetRef = useRef<BottomSheetModal>(null);

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

@@ -44,6 +44,7 @@ type TooltipContextValue = {
   setOpen: (open: boolean) => void;
   triggerRef: React.RefObject<View | null>;
   enabled: boolean;
+  openOnPress: boolean;
   delayDuration: number;
 };
 
@@ -107,6 +108,18 @@ function measureElement(element: View): Promise<Rect> {
   });
 }
 
+function isMobileTooltipEnvironment(): boolean {
+  if (Platform.OS !== "web") {
+    return true;
+  }
+
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+
+  return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent ?? "");
+}
+
 function computePosition({
   triggerRect,
   contentSize,
@@ -214,12 +227,8 @@ export function Tooltip({
     onOpenChange,
   });
 
-  const isWeb = Platform.OS === "web";
-  const isMobileWeb =
-    isWeb &&
-    typeof navigator !== "undefined" &&
-    /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent ?? "");
-  const enabled = isWeb ? (isMobileWeb ? enabledOnMobile : enabledOnDesktop) : enabledOnMobile;
+  const isMobile = isMobileTooltipEnvironment();
+  const enabled = isMobile ? enabledOnMobile : enabledOnDesktop;
 
   const value = useMemo<TooltipContextValue>(
     () => ({
@@ -227,9 +236,10 @@ export function Tooltip({
       setOpen: setIsOpen,
       triggerRef,
       enabled,
+      openOnPress: isMobile,
       delayDuration,
     }),
-    [isOpen, setIsOpen, enabled, delayDuration],
+    [isOpen, setIsOpen, enabled, isMobile, delayDuration],
   );
 
   return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;
@@ -323,9 +333,17 @@ export function TooltipTrigger({
   const handlePress = useCallback(
     (e: any) => {
       onPress?.(e);
+      if (!ctx.enabled || disabled) {
+        return;
+      }
+      if (ctx.openOnPress) {
+        clearOpenTimer();
+        ctx.setOpen(true);
+        return;
+      }
       close();
     },
-    [close, onPress],
+    [clearOpenTimer, close, ctx, disabled, onPress],
   );
 
   const triggerProps = {
@@ -492,7 +510,7 @@ export function TooltipContent({
       statusBarTranslucent={Platform.OS === "android"}
       onRequestClose={() => ctx.setOpen(false)}
     >
-      <View pointerEvents="box-none" style={styles.overlay}>
+      <Pressable style={styles.overlay} onPress={() => ctx.setOpen(false)}>
         <Animated.View
           pointerEvents="none"
           entering={FadeIn.duration(80)}
@@ -513,7 +531,7 @@ export function TooltipContent({
         >
           {children}
         </Animated.View>
-      </View>
+      </Pressable>
     </Modal>
   );
 }
@@ -533,9 +551,9 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[2],
     borderRadius: theme.borderRadius.xl,
     backgroundColor: theme.colors.popover,
-    borderWidth: theme.borderWidth[2],
-    borderColor: theme.colors.border,
-    ...theme.shadow.sm,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    ...theme.shadow.md,
     zIndex: 1000,
   },
 }));

packages/app/src/components/welcome-screen.tsx

@@ -8,14 +8,11 @@ import type { HostProfile } from "@/types/host-connection";
 import {
   getHostRuntimeStore,
   isHostRuntimeConnected,
-  useHostMutations,
   useHostRuntimeSnapshot,
   useHosts,
 } from "@/runtime/host-runtime";
-import { useSessionStore } from "@/stores/session-store";
 import { AddHostModal } from "./add-host-modal";
 import { PairLinkModal } from "./pair-link-modal";
-import { NameHostModal } from "./name-host-modal";
 import { resolveAppVersion } from "@/utils/app-version";
 import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates";
 import { buildHostRootRoute } from "@/utils/host-routes";
@@ -237,45 +234,23 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const router = useRouter();
-  const { renameHost } = useHostMutations();
   const appVersion = resolveAppVersion();
   const appVersionText = formatVersionWithPrefix(appVersion);
   const [isDirectOpen, setIsDirectOpen] = useState(false);
   const [isPasteLinkOpen, setIsPasteLinkOpen] = useState(false);
-  const [pendingNameHost, setPendingNameHost] = useState<{
-    serverId: string;
-    hostname: string | null;
-  } | null>(null);
-  const [pendingRedirectServerId, setPendingRedirectServerId] = useState<string | null>(null);
   const hosts = useHosts();
   const anyOnlineServerId = useAnyHostOnline(hosts.map((h) => h.serverId));
-  const pendingNameHostname = useSessionStore(
-    useCallback(
-      (state) => {
-        if (!pendingNameHost) return null;
-        return (
-          state.sessions[pendingNameHost.serverId]?.serverInfo?.hostname ??
-          pendingNameHost.hostname ??
-          null
-        );
-      },
-      [pendingNameHost],
-    ),
-  );
 
   useEffect(() => {
     if (!anyOnlineServerId) {
       return;
     }
-    if (pendingNameHost) {
-      return;
-    }
-    router.replace(buildHostRootRoute(anyOnlineServerId) as any);
-  }, [anyOnlineServerId, pendingNameHost, router]);
+    router.replace(buildHostRootRoute(anyOnlineServerId));
+  }, [anyOnlineServerId, router]);
 
   const finishOnboarding = useCallback(
     (serverId: string) => {
-      router.replace(buildHostRootRoute(serverId) as any);
+      router.replace(buildHostRootRoute(serverId));
     },
     [router],
   );
@@ -396,13 +371,8 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
       <AddHostModal
         visible={isDirectOpen}
         onClose={() => setIsDirectOpen(false)}
-        onSaved={({ profile, serverId, hostname, isNewHost }) => {
+        onSaved={({ profile, serverId }) => {
           onHostAdded?.(profile);
-          setPendingRedirectServerId(serverId);
-          if (isNewHost) {
-            setPendingNameHost({ serverId, hostname });
-            return;
-          }
           finishOnboarding(serverId);
         }}
       />
@@ -410,38 +380,11 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
       <PairLinkModal
         visible={isPasteLinkOpen}
         onClose={() => setIsPasteLinkOpen(false)}
-        onSaved={({ profile, serverId, hostname, isNewHost }) => {
+        onSaved={({ profile, serverId }) => {
           onHostAdded?.(profile);
-          setPendingRedirectServerId(serverId);
-          if (isNewHost) {
-            setPendingNameHost({ serverId, hostname });
-            return;
-          }
           finishOnboarding(serverId);
         }}
       />
-
-      {pendingNameHost && pendingRedirectServerId ? (
-        <NameHostModal
-          visible
-          serverId={pendingNameHost.serverId}
-          hostname={pendingNameHostname}
-          onSkip={() => {
-            const serverId = pendingRedirectServerId;
-            setPendingNameHost(null);
-            setPendingRedirectServerId(null);
-            finishOnboarding(serverId);
-          }}
-          onSave={(label) => {
-            const serverId = pendingRedirectServerId;
-            void renameHost(pendingNameHost.serverId, label).finally(() => {
-              setPendingNameHost(null);
-              setPendingRedirectServerId(null);
-              finishOnboarding(serverId);
-            });
-          }}
-        />
-      ) : null}
     </ScrollView>
   );
 }

packages/app/src/constants/layout.ts

@@ -1,5 +1,5 @@
 import { Platform } from "react-native";
-import { UnistylesRuntime } from "react-native-unistyles";
+import { useUnistyles } from "react-native-unistyles";
 import { isElectronRuntime, isElectronRuntimeMac } from "@/desktop/host";
 
 export const FOOTER_HEIGHT = 75;
@@ -62,16 +62,13 @@ export function getIsElectronRuntime(): boolean {
   return result;
 }
 
-export function isCompactFormFactor(): boolean {
-  return UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-}
-
-export function isDesktopFormFactor(): boolean {
-  return !isCompactFormFactor();
-}
-
-export function isTouchDesktopFormFactor(): boolean {
-  return Platform.OS !== "web" && isDesktopFormFactor();
+/**
+ * Reactive hook — re-renders the component when the breakpoint changes.
+ * Always use this instead of reading UnistylesRuntime.breakpoint directly.
+ */
+export function useIsCompactFormFactor(): boolean {
+  const { rt } = useUnistyles();
+  return rt.breakpoint === "xs" || rt.breakpoint === "sm";
 }
 
 // SplitContainer relies on dnd-kit and DOM-backed accessibility helpers.

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

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useRef, type ReactNode } from "re
 import { useWindowDimensions } from "react-native";
 import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
 import { type GestureType } from "react-native-gesture-handler";
-import { isCompactFormFactor } from "@/constants/layout";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   getRightSidebarAnimationTargets,
@@ -29,7 +29,7 @@ const ExplorerSidebarAnimationContext = createContext<ExplorerSidebarAnimationCo
 
 export function ExplorerSidebarAnimationProvider({ children }: { children: ReactNode }) {
   const { width: windowWidth } = useWindowDimensions();
-  const isCompactLayout = isCompactFormFactor();
+  const isCompactLayout = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
 

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

@@ -33,6 +33,7 @@ import {
   type Agent,
   type SessionState,
   type WorkspaceDescriptor,
+  mergeWorkspaceSnapshotWithExisting,
   normalizeWorkspaceDescriptor,
 } from "@/stores/session-store";
 import { useDraftStore } from "@/stores/draft-store";
@@ -68,6 +69,22 @@ export type {
 const HISTORY_STALE_AFTER_MS = 60_000;
 const AUTHORITATIVE_REVALIDATION_DEBOUNCE_MS = 300;
 
+function hasAgentUsageChanged(
+  incomingUsage: Agent["lastUsage"] | undefined,
+  currentUsage: Agent["lastUsage"] | undefined,
+): boolean {
+  const keys: Array<keyof NonNullable<Agent["lastUsage"]>> = [
+    "inputTokens",
+    "outputTokens",
+    "cachedInputTokens",
+    "totalCostUsd",
+    "contextWindowMaxTokens",
+    "contextWindowUsedTokens",
+  ];
+
+  return keys.some((key) => incomingUsage?.[key] !== currentUsage?.[key]);
+}
+
 type AudioOutputPayload = Extract<SessionOutboundMessage, { type: "audio_output" }>["payload"];
 
 interface BufferedAudioChunk {
@@ -310,6 +327,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
       }
 
       const workspaces = new Map<string, WorkspaceDescriptor>();
+      const existingWorkspaces = useSessionStore.getState().sessions[serverId]?.workspaces;
       let cursor: string | null = null;
       let includeSubscribe = options?.subscribe ?? false;
 
@@ -325,7 +343,13 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
 
         for (const entry of payload.entries) {
           const workspace = normalizeWorkspaceDescriptor(entry);
-          workspaces.set(workspace.id, workspace);
+          workspaces.set(
+            workspace.id,
+            mergeWorkspaceSnapshotWithExisting({
+              incoming: workspace,
+              existing: existingWorkspaces?.get(workspace.id),
+            }),
+          );
         }
 
         if (!payload.pageInfo.hasMore || !payload.pageInfo.nextCursor) {
@@ -350,6 +374,15 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
       setAgents(serverId, (prev) => {
         const current = prev.get(agent.id);
         if (current && agent.updatedAt.getTime() < current.updatedAt.getTime()) {
+          const hasUsageUpdate = hasAgentUsageChanged(agent.lastUsage, current.lastUsage);
+          if (hasUsageUpdate) {
+            const next = new Map(prev);
+            next.set(agent.id, {
+              ...current,
+              lastUsage: agent.lastUsage,
+            });
+            return next;
+          }
           return prev;
         }
         const next = new Map(prev);

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

@@ -10,7 +10,7 @@ import {
 import { useWindowDimensions } from "react-native";
 import { useSharedValue, withTiming, Easing, type SharedValue } from "react-native-reanimated";
 import { type GestureType } from "react-native-gesture-handler";
-import { isCompactFormFactor } from "@/constants/layout";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   getLeftSidebarAnimationTargets,
@@ -36,7 +36,7 @@ const SidebarAnimationContext = createContext<SidebarAnimationContextValue | nul
 
 export function SidebarAnimationProvider({ children }: { children: ReactNode }) {
   const { width: windowWidth } = useWindowDimensions();
-  const isCompactLayout = isCompactFormFactor();
+  const isCompactLayout = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
 

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

@@ -1,8 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
-import { ActivityIndicator, Alert, Image, Text, View } from "react-native";
+import { useCallback, useState } from "react";
+import { ActivityIndicator, Alert, Text, View } from "react-native";
 import * as Clipboard from "expo-clipboard";
-import * as QRCode from "qrcode";
-import { useFocusEffect } from "@react-navigation/native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { settingsStyles } from "@/styles/settings";
 import {
@@ -12,7 +10,6 @@ import {
   RotateCw,
   Copy,
   FileText,
-  Smartphone,
   Activity,
 } from "lucide-react-native";
 import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
@@ -23,17 +20,12 @@ import { openExternalUrl } from "@/utils/open-external-url";
 import { isVersionMismatch } from "@/desktop/updates/desktop-updates";
 import {
   getCliDaemonStatus,
-  getDesktopDaemonLogs,
-  getDesktopDaemonPairing,
-  getDesktopDaemonStatus,
   restartDesktopDaemon,
   shouldUseDesktopDaemon,
   startDesktopDaemon,
   stopDesktopDaemon,
-  type DesktopDaemonLogs,
-  type DesktopDaemonStatus,
-  type DesktopPairingOffer,
 } from "@/desktop/daemon/desktop-daemon";
+import { useDaemonStatus } from "@/desktop/hooks/use-daemon-status";
 
 export interface LocalDaemonSectionProps {
   appVersion: string | null;
@@ -44,48 +36,18 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
   const { theme } = useUnistyles();
   const showSection = shouldUseDesktopDaemon();
   const { settings, updateSettings } = useAppSettings();
-  const [daemonStatus, setDaemonStatus] = useState<DesktopDaemonStatus | null>(null);
-  const [daemonVersion, setDaemonVersion] = useState<string | null>(null);
-  const [statusError, setStatusError] = useState<string | null>(null);
+  const { data, isLoading, error: statusError, setStatus, refetch } = useDaemonStatus();
   const [isRestartingDaemon, setIsRestartingDaemon] = useState(false);
   const [isUpdatingDaemonManagement, setIsUpdatingDaemonManagement] = useState(false);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
-  const [daemonLogs, setDaemonLogs] = useState<DesktopDaemonLogs | null>(null);
   const [isLogsModalOpen, setIsLogsModalOpen] = useState(false);
-  const [isPairingModalOpen, setIsPairingModalOpen] = useState(false);
-  const [isLoadingPairing, setIsLoadingPairing] = useState(false);
-  const [pairingOffer, setPairingOffer] = useState<DesktopPairingOffer | null>(null);
-  const [pairingStatusMessage, setPairingStatusMessage] = useState<string | null>(null);
   const [cliStatusOutput, setCliStatusOutput] = useState<string | null>(null);
   const [isCliStatusModalOpen, setIsCliStatusModalOpen] = useState(false);
   const [isLoadingCliStatus, setIsLoadingCliStatus] = useState(false);
 
-  const loadDaemonData = useCallback(() => {
-    if (!showSection) {
-      return Promise.resolve();
-    }
-    return Promise.all([getDesktopDaemonStatus(), getDesktopDaemonLogs()])
-      .then(([status, logs]) => {
-        setDaemonStatus(status);
-        setDaemonLogs(logs);
-        setDaemonVersion(status.version);
-        setStatusError(null);
-      })
-      .catch((error) => {
-        const message = error instanceof Error ? error.message : String(error);
-        setStatusError(message);
-      });
-  }, [showSection]);
-
-  useFocusEffect(
-    useCallback(() => {
-      if (!showSection) {
-        return undefined;
-      }
-      void loadDaemonData();
-      return undefined;
-    }, [loadDaemonData, showSection]),
-  );
+  const daemonStatus = data?.status ?? null;
+  const daemonLogs = data?.logs ?? null;
+  const daemonVersion = daemonStatus?.version ?? null;
 
   const daemonVersionMismatch = isVersionMismatch(appVersion, daemonVersion);
   const daemonStatusStateText =
@@ -124,12 +86,12 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
           daemonStatus?.status === "running" ? restartDesktopDaemon : startDesktopDaemon;
 
         void action()
-          .then((status) => {
-            setDaemonStatus(status);
+          .then((newStatus) => {
+            setStatus(newStatus);
             setStatusMessage(
               daemonStatus?.status === "running" ? "Daemon restarted." : "Daemon started.",
             );
-            return loadDaemonData();
+            refetch();
           })
           .catch((error) => {
             console.error("[Settings] Failed to change desktop daemon state", error);
@@ -144,7 +106,7 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
         console.error("[Settings] Failed to open desktop daemon action confirmation", error);
         Alert.alert("Error", "Unable to open the daemon confirmation dialog.");
       });
-  }, [daemonActionLabel, daemonStatus?.status, isRestartingDaemon, loadDaemonData, showSection]);
+  }, [daemonActionLabel, daemonStatus?.status, isRestartingDaemon, refetch, setStatus, showSection]);
 
   const handleToggleDaemonManagement = useCallback(() => {
     if (isUpdatingDaemonManagement) {
@@ -190,9 +152,14 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
             : Promise.resolve(daemonStatus ?? null);
 
         void stopPromise
-          .then(() => updateSettings({ manageBuiltInDaemon: false }))
-          .then(() => loadDaemonData())
+          .then((newStatus) => {
+            if (newStatus) {
+              setStatus(newStatus);
+            }
+            return updateSettings({ manageBuiltInDaemon: false });
+          })
           .then(() => {
+            refetch();
             setStatusMessage("Built-in daemon paused and stopped.");
           })
           .catch((error) => {
@@ -210,7 +177,8 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
   }, [
     daemonStatus,
     isUpdatingDaemonManagement,
-    loadDaemonData,
+    refetch,
+    setStatus,
     settings.manageBuiltInDaemon,
     updateSettings,
   ]);
@@ -238,46 +206,6 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
     setIsLogsModalOpen(true);
   }, [daemonLogs]);
 
-  const handleOpenPairingModal = useCallback(() => {
-    if (isLoadingPairing) {
-      return;
-    }
-
-    setIsPairingModalOpen(true);
-    setIsLoadingPairing(true);
-    setPairingStatusMessage(null);
-
-    void getDesktopDaemonPairing()
-      .then((pairing) => {
-        setPairingOffer(pairing);
-        if (!pairing.relayEnabled || !pairing.url) {
-          setPairingStatusMessage("Relay pairing is not available.");
-        }
-      })
-      .catch((error) => {
-        const message = error instanceof Error ? error.message : String(error);
-        setPairingOffer(null);
-        setPairingStatusMessage(`Unable to load pairing offer: ${message}`);
-      })
-      .finally(() => {
-        setIsLoadingPairing(false);
-      });
-  }, [isLoadingPairing]);
-
-  const handleCopyPairingLink = useCallback(() => {
-    if (!pairingOffer?.url) {
-      return;
-    }
-    void Clipboard.setStringAsync(pairingOffer.url)
-      .then(() => {
-        Alert.alert("Copied", "Pairing link copied.");
-      })
-      .catch((error) => {
-        console.error("[Settings] Failed to copy pairing link", error);
-        Alert.alert("Error", "Unable to copy pairing link.");
-      });
-  }, [pairingOffer?.url]);
-
   const handleOpenCliStatus = useCallback(async () => {
     setIsLoadingCliStatus(true);
     try {
@@ -325,154 +253,138 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
           Advanced settings
         </Button>
       </View>
-      <View style={settingsStyles.card}>
-        <View style={settingsStyles.row}>
-          <View style={settingsStyles.rowContent}>
-            <Text style={settingsStyles.rowTitle}>Status</Text>
-            <Text style={settingsStyles.rowHint}>Only the built-in desktop daemon is shown here.</Text>
-          </View>
-          <View style={styles.statusValueGroup}>
-            <Text style={styles.valueText}>{daemonStatusStateText}</Text>
-            <Text style={styles.valueSubtext}>{daemonStatusDetailText}</Text>
-          </View>
+      {isLoading ? (
+        <View style={[settingsStyles.card, styles.loadingCard]}>
+          <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
         </View>
-        {showLifecycleControls ? (
-          <>
+      ) : (
+        <>
+          <View style={settingsStyles.card}>
+            <View style={settingsStyles.row}>
+              <View style={settingsStyles.rowContent}>
+                <Text style={settingsStyles.rowTitle}>Status</Text>
+                <Text style={settingsStyles.rowHint}>
+                  Only the built-in desktop daemon is shown here.
+                </Text>
+              </View>
+              <View style={styles.statusValueGroup}>
+                <Text style={styles.valueText}>{daemonStatusStateText}</Text>
+                <Text style={styles.valueSubtext}>{daemonStatusDetailText}</Text>
+              </View>
+            </View>
+            {showLifecycleControls ? (
+              <>
+                <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
+                  <View style={settingsStyles.rowContent}>
+                    <Text style={settingsStyles.rowTitle}>Daemon management</Text>
+                    <Text style={settingsStyles.rowHint}>
+                      {isDaemonManagementPaused
+                        ? "Paused. The built-in daemon stays stopped until you start it again."
+                        : "Enabled. Paseo can manage the built-in daemon from the desktop app."}
+                    </Text>
+                  </View>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    leftIcon={
+                      isDaemonManagementPaused ? (
+                        <Play size={theme.iconSize.sm} color={theme.colors.foreground} />
+                      ) : (
+                        <Pause size={theme.iconSize.sm} color={theme.colors.foreground} />
+                      )
+                    }
+                    onPress={handleToggleDaemonManagement}
+                    disabled={isUpdatingDaemonManagement}
+                  >
+                    {isUpdatingDaemonManagement
+                      ? isDaemonManagementPaused
+                        ? "Resuming..."
+                        : "Pausing..."
+                      : isDaemonManagementPaused
+                        ? "Resume"
+                        : "Pause"}
+                  </Button>
+                </View>
+                <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
+                  <View style={settingsStyles.rowContent}>
+                    <Text style={settingsStyles.rowTitle}>{daemonActionLabel}</Text>
+                    <Text style={settingsStyles.rowHint}>{daemonActionMessage}</Text>
+                    {statusMessage ? <Text style={styles.statusText}>{statusMessage}</Text> : null}
+                  </View>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                    onPress={handleUpdateLocalDaemon}
+                    disabled={isRestartingDaemon}
+                  >
+                    {isRestartingDaemon
+                      ? daemonStatus?.status === "running"
+                        ? "Restarting..."
+                        : "Starting..."
+                      : daemonActionLabel}
+                  </Button>
+                </View>
+              </>
+            ) : null}
             <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
               <View style={settingsStyles.rowContent}>
-                <Text style={settingsStyles.rowTitle}>Daemon management</Text>
+                <Text style={settingsStyles.rowTitle}>Log file</Text>
                 <Text style={settingsStyles.rowHint}>
-                  {isDaemonManagementPaused
-                    ? "Paused. The built-in daemon stays stopped until you start it again."
-                    : "Enabled. Paseo can manage the built-in daemon from the desktop app."}
+                  {daemonLogs?.logPath ?? "Log path unavailable."}
+                </Text>
+              </View>
+              <View style={styles.actionGroup}>
+                {daemonLogs?.logPath ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    leftIcon={<Copy size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                    onPress={handleCopyLogPath}
+                  >
+                    Copy path
+                  </Button>
+                ) : null}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  leftIcon={<FileText size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                  onPress={handleOpenLogs}
+                  disabled={!daemonLogs}
+                >
+                  Open logs
+                </Button>
+              </View>
+            </View>
+            <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
+              <View style={settingsStyles.rowContent}>
+                <Text style={settingsStyles.rowTitle}>Full status</Text>
+                <Text style={settingsStyles.rowHint}>
+                  Runs `paseo daemon status` and shows the output.
                 </Text>
               </View>
               <Button
                 variant="outline"
                 size="sm"
-                leftIcon={
-                  isDaemonManagementPaused ? (
-                    <Play size={theme.iconSize.sm} color={theme.colors.foreground} />
-                  ) : (
-                    <Pause size={theme.iconSize.sm} color={theme.colors.foreground} />
-                  )
-                }
-                onPress={handleToggleDaemonManagement}
-                disabled={isUpdatingDaemonManagement}
+                leftIcon={<Activity size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                onPress={() => void handleOpenCliStatus()}
+                disabled={isLoadingCliStatus}
               >
-                {isUpdatingDaemonManagement
-                  ? isDaemonManagementPaused
-                    ? "Resuming..."
-                    : "Pausing..."
-                  : isDaemonManagementPaused
-                    ? "Resume"
-                    : "Pause"}
+                {isLoadingCliStatus ? "Loading..." : "View status"}
               </Button>
             </View>
-            <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
-              <View style={settingsStyles.rowContent}>
-                <Text style={settingsStyles.rowTitle}>{daemonActionLabel}</Text>
-                <Text style={settingsStyles.rowHint}>{daemonActionMessage}</Text>
-                {statusMessage ? <Text style={styles.statusText}>{statusMessage}</Text> : null}
-              </View>
-              <Button
-                variant="outline"
-                size="sm"
-                leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
-                onPress={handleUpdateLocalDaemon}
-                disabled={isRestartingDaemon}
-              >
-                {isRestartingDaemon
-                  ? daemonStatus?.status === "running"
-                    ? "Restarting..."
-                    : "Starting..."
-                  : daemonActionLabel}
-              </Button>
+          </View>
+
+          {daemonVersionMismatch ? (
+            <View style={styles.warningCard}>
+              <Text style={styles.warningText}>
+                App and daemon versions don't match. Update both to the same version for the best
+                experience.
+              </Text>
             </View>
-          </>
-        ) : null}
-        <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
-          <View style={settingsStyles.rowContent}>
-            <Text style={settingsStyles.rowTitle}>Log file</Text>
-            <Text style={settingsStyles.rowHint}>{daemonLogs?.logPath ?? "Log path unavailable."}</Text>
-          </View>
-          <View style={styles.actionGroup}>
-            {daemonLogs?.logPath ? (
-              <Button
-                variant="outline"
-                size="sm"
-                leftIcon={<Copy size={theme.iconSize.sm} color={theme.colors.foreground} />}
-                onPress={handleCopyLogPath}
-              >
-                Copy path
-              </Button>
-            ) : null}
-            <Button
-              variant="outline"
-              size="sm"
-              leftIcon={<FileText size={theme.iconSize.sm} color={theme.colors.foreground} />}
-              onPress={handleOpenLogs}
-              disabled={!daemonLogs}
-            >
-              Open logs
-            </Button>
-          </View>
-        </View>
-        <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
-          <View style={settingsStyles.rowContent}>
-            <Text style={settingsStyles.rowTitle}>Pair device</Text>
-            <Text style={settingsStyles.rowHint}>Connect your phone to this computer.</Text>
-          </View>
-          <Button
-            variant="outline"
-            size="sm"
-            leftIcon={<Smartphone size={theme.iconSize.sm} color={theme.colors.foreground} />}
-            onPress={handleOpenPairingModal}
-          >
-            Pair device
-          </Button>
-        </View>
-        <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
-          <View style={settingsStyles.rowContent}>
-            <Text style={settingsStyles.rowTitle}>Full status</Text>
-            <Text style={settingsStyles.rowHint}>
-              Runs `paseo daemon status` and shows the output.
-            </Text>
-          </View>
-          <Button
-            variant="outline"
-            size="sm"
-            leftIcon={<Activity size={theme.iconSize.sm} color={theme.colors.foreground} />}
-            onPress={() => void handleOpenCliStatus()}
-            disabled={isLoadingCliStatus}
-          >
-            {isLoadingCliStatus ? "Loading..." : "View status"}
-          </Button>
-        </View>
-      </View>
-
-      {daemonVersionMismatch ? (
-        <View style={styles.warningCard}>
-          <Text style={styles.warningText}>
-            App and daemon versions don't match. Update both to the same version for the best
-            experience.
-          </Text>
-        </View>
-      ) : null}
-
-      <AdaptiveModalSheet
-        visible={isPairingModalOpen}
-        onClose={() => setIsPairingModalOpen(false)}
-        title="Pair device"
-        testID="managed-daemon-pairing-dialog"
-      >
-        <PairingOfferDialogContent
-          isLoading={isLoadingPairing}
-          pairingOffer={pairingOffer}
-          statusMessage={pairingStatusMessage}
-          onCopyLink={handleCopyPairingLink}
-        />
-      </AdaptiveModalSheet>
+          ) : null}
+        </>
+      )}
 
       <AdaptiveModalSheet
         visible={isLogsModalOpen}
@@ -516,107 +428,6 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
 
 const ADVANCED_DAEMON_SETTINGS_URL = "https://paseo.sh/docs/configuration";
 
-function PairingOfferDialogContent(input: {
-  isLoading: boolean;
-  pairingOffer: DesktopPairingOffer | null;
-  statusMessage: string | null;
-  onCopyLink: () => void;
-}) {
-  const { isLoading, pairingOffer, statusMessage, onCopyLink } = input;
-  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
-  const [qrError, setQrError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    if (!pairingOffer?.url) {
-      setQrDataUrl(null);
-      setQrError(null);
-      return () => {
-        cancelled = true;
-      };
-    }
-
-    setQrError(null);
-    setQrDataUrl(null);
-
-    void QRCode.toDataURL(pairingOffer.url, {
-      errorCorrectionLevel: "M",
-      margin: 1,
-      width: 480,
-    })
-      .then((dataUrl) => {
-        if (cancelled) {
-          return;
-        }
-        setQrDataUrl(dataUrl);
-      })
-      .catch((error) => {
-        if (cancelled) {
-          return;
-        }
-        setQrError(error instanceof Error ? error.message : String(error));
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [pairingOffer?.url]);
-
-  if (isLoading) {
-    return (
-      <View style={styles.pairingState}>
-        <ActivityIndicator size="small" />
-        <Text style={settingsStyles.rowHint}>Loading pairing offer…</Text>
-      </View>
-    );
-  }
-
-  if (statusMessage) {
-    return (
-      <View style={styles.modalBody}>
-        <Text style={settingsStyles.rowHint}>{statusMessage}</Text>
-      </View>
-    );
-  }
-
-  if (!pairingOffer?.url) {
-    return (
-      <View style={styles.modalBody}>
-        <Text style={settingsStyles.rowHint}>Pairing offer unavailable.</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.modalBody}>
-      <Text style={settingsStyles.rowHint}>
-        Scan this QR code in Paseo, or copy the pairing link below.
-      </Text>
-      <View style={styles.qrCard}>
-        {qrDataUrl ? (
-          <Image source={{ uri: qrDataUrl }} style={styles.qrImage} resizeMode="contain" />
-        ) : qrError ? (
-          <Text style={settingsStyles.rowHint}>QR unavailable: {qrError}</Text>
-        ) : (
-          <ActivityIndicator size="small" />
-        )}
-      </View>
-      <View style={styles.linkSection}>
-        <Text style={styles.linkLabel}>Pairing link</Text>
-        <Text style={styles.linkText} selectable>
-          {pairingOffer.url}
-        </Text>
-      </View>
-      <View style={styles.modalActions}>
-        <Button variant="outline" size="sm" onPress={onCopyLink}>
-          Copy link
-        </Button>
-      </View>
-    </View>
-  );
-}
-
 const styles = StyleSheet.create((theme) => ({
   actionGroup: {
     flexDirection: "row",
@@ -624,6 +435,11 @@ const styles = StyleSheet.create((theme) => ({
     flexWrap: "wrap",
     justifyContent: "flex-end",
   },
+  loadingCard: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[6],
+  },
   statusValueGroup: {
     alignItems: "flex-end",
     gap: 2,
@@ -659,40 +475,6 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[3],
     paddingBottom: theme.spacing[2],
   },
-  pairingState: {
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.spacing[3],
-    paddingVertical: theme.spacing[6],
-  },
-  qrCard: {
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    aspectRatio: 1,
-    alignSelf: "stretch",
-    padding: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface0,
-  },
-  qrImage: {
-    width: "100%",
-    height: "100%",
-  },
-  linkSection: {
-    gap: theme.spacing[2],
-  },
-  linkLabel: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.sm,
-  },
-  linkText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    lineHeight: 18,
-  },
   logOutput: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,

packages/app/src/desktop/components/pair-device-section.tsx

@@ -0,0 +1,187 @@
+import { useCallback } from "react";
+import { ActivityIndicator, Image, Text, TextInput, View } from "react-native";
+import * as Clipboard from "expo-clipboard";
+import * as QRCode from "qrcode";
+import { useQuery } from "@tanstack/react-query";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { RotateCw, Copy, Check } from "lucide-react-native";
+import { settingsStyles } from "@/styles/settings";
+import { Button } from "@/components/ui/button";
+import { getDesktopDaemonPairing, shouldUseDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
+import { useState } from "react";
+
+export function PairDeviceSection() {
+  const { theme } = useUnistyles();
+  const showSection = shouldUseDesktopDaemon();
+  const [copied, setCopied] = useState(false);
+
+  const pairingQuery = useQuery({
+    queryKey: ["desktop-daemon-pairing"],
+    queryFn: getDesktopDaemonPairing,
+    enabled: showSection,
+    staleTime: 5 * 60 * 1000,
+    retry: 1,
+  });
+
+  const qrQuery = useQuery({
+    queryKey: ["desktop-daemon-pairing-qr", pairingQuery.data?.url],
+    queryFn: () =>
+      QRCode.toDataURL(pairingQuery.data!.url!, {
+        errorCorrectionLevel: "M",
+        margin: 1,
+        width: 480,
+      }),
+    enabled: !!pairingQuery.data?.url,
+    staleTime: Infinity,
+  });
+
+  const handleCopyLink = useCallback(async () => {
+    if (!pairingQuery.data?.url) return;
+    await Clipboard.setStringAsync(pairingQuery.data.url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [pairingQuery.data?.url]);
+
+  if (!showSection) return null;
+
+  return (
+    <View style={settingsStyles.section}>
+      <Text style={settingsStyles.sectionTitle}>Pair device</Text>
+      <View style={settingsStyles.card}>
+        {pairingQuery.isPending ? (
+          <View style={styles.centered}>
+            <ActivityIndicator size="small" />
+            <Text style={styles.hint}>Loading pairing offer…</Text>
+          </View>
+        ) : pairingQuery.isError ? (
+          <View style={styles.centered}>
+            <Text style={styles.hint}>
+              {pairingQuery.error instanceof Error
+                ? pairingQuery.error.message
+                : "Failed to load pairing offer."}
+            </Text>
+            <Button
+              variant="outline"
+              size="sm"
+              leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
+              onPress={() => void pairingQuery.refetch()}
+            >
+              Retry
+            </Button>
+          </View>
+        ) : !pairingQuery.data?.url ? (
+          <View style={styles.centered}>
+            <Text style={styles.hint}>
+              {pairingQuery.data?.relayEnabled === false
+                ? "Relay is not enabled. Enable relay to pair a device."
+                : "Pairing offer unavailable."}
+            </Text>
+            <Button
+              variant="outline"
+              size="sm"
+              leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
+              onPress={() => void pairingQuery.refetch()}
+            >
+              Retry
+            </Button>
+          </View>
+        ) : (
+          <View style={styles.content}>
+            <Text style={styles.hint}>
+              Scan this QR code with Paseo on your phone, or copy the link below.
+            </Text>
+            <View style={styles.qrContainer}>
+              {qrQuery.data ? (
+                <Image source={{ uri: qrQuery.data }} style={styles.qrImage} resizeMode="contain" />
+              ) : qrQuery.isError ? (
+                <Text style={styles.hint}>QR code unavailable.</Text>
+              ) : (
+                <ActivityIndicator size="small" />
+              )}
+            </View>
+            <View style={styles.linkRow}>
+              <View style={styles.inputWrapper}>
+                <TextInput
+                  style={styles.linkInput}
+                  value={pairingQuery.data.url}
+                  readOnly
+                  selectTextOnFocus
+                  selectionColor={theme.colors.accent}
+                />
+              </View>
+              <Button
+                variant="outline"
+                size="sm"
+                leftIcon={
+                  copied ? (
+                    <Check size={theme.iconSize.sm} color={theme.colors.accent} />
+                  ) : (
+                    <Copy size={theme.iconSize.sm} color={theme.colors.foreground} />
+                  )
+                }
+                onPress={() => void handleCopyLink()}
+              >
+                {copied ? "Copied" : "Copy"}
+              </Button>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  centered: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[3],
+    paddingVertical: theme.spacing[6],
+    paddingHorizontal: theme.spacing[4],
+  },
+  content: {
+    gap: theme.spacing[3],
+    padding: theme.spacing[4],
+  },
+  hint: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    textAlign: "center",
+  },
+  qrContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center",
+    width: 320,
+    height: 320,
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface0,
+    padding: theme.spacing[2],
+  },
+  qrImage: {
+    width: "100%",
+    height: "100%",
+  },
+  linkRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  inputWrapper: {
+    flex: 1,
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface0,
+    overflow: "hidden",
+  },
+  linkInput: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    outlineStyle: "none",
+  } as any,
+}));

packages/app/src/desktop/hooks/use-daemon-status.ts

@@ -0,0 +1,53 @@
+import { useCallback } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getDesktopDaemonLogs,
+  getDesktopDaemonStatus,
+  shouldUseDesktopDaemon,
+  type DesktopDaemonLogs,
+  type DesktopDaemonStatus,
+} from "@/desktop/daemon/desktop-daemon";
+
+const DAEMON_STATUS_QUERY_KEY = ["desktopDaemonStatus"] as const;
+
+interface DaemonStatusData {
+  status: DesktopDaemonStatus;
+  logs: DesktopDaemonLogs;
+}
+
+export function useDaemonStatus() {
+  const queryClient = useQueryClient();
+  const enabled = shouldUseDesktopDaemon();
+
+  const query = useQuery<DaemonStatusData>({
+    queryKey: DAEMON_STATUS_QUERY_KEY,
+    enabled,
+    staleTime: 30_000,
+    refetchOnMount: "always",
+    queryFn: async () => {
+      const [status, logs] = await Promise.all([getDesktopDaemonStatus(), getDesktopDaemonLogs()]);
+      return { status, logs };
+    },
+  });
+
+  const setStatus = useCallback(
+    (status: DesktopDaemonStatus) => {
+      queryClient.setQueryData<DaemonStatusData>(DAEMON_STATUS_QUERY_KEY, (prev) =>
+        prev ? { ...prev, status } : undefined,
+      );
+    },
+    [queryClient],
+  );
+
+  const refetch = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: DAEMON_STATUS_QUERY_KEY });
+  }, [queryClient]);
+
+  return {
+    data: query.data ?? null,
+    isLoading: query.isLoading,
+    error: query.error instanceof Error ? query.error.message : null,
+    setStatus,
+    refetch,
+  };
+}

packages/app/src/desktop/updates/desktop-updates.ts

@@ -4,6 +4,7 @@ import { invokeDesktopCommand } from "@/desktop/electron/invoke";
 
 export interface DesktopAppUpdateCheckResult {
   hasUpdate: boolean;
+  readyToInstall: boolean;
   currentVersion: string | null;
   latestVersion: string | null;
   body: string | null;
@@ -76,6 +77,7 @@ export async function checkDesktopAppUpdate(): Promise<DesktopAppUpdateCheckResu
 
   return {
     hasUpdate: result.hasUpdate === true,
+    readyToInstall: result.readyToInstall === true,
     currentVersion: toStringOrNull(result.currentVersion),
     latestVersion: toStringOrNull(result.latestVersion),
     body: toStringOrNull(result.body),

packages/app/src/desktop/updates/update-banner.tsx

@@ -55,7 +55,7 @@ export function UpdateBanner() {
 
   function getSubtitle(): string {
     if (isInstalled) return "Restart to use the new version.";
-    if (isInstalling) return "Downloading and installing...";
+    if (isInstalling) return "Installing and restarting...";
     if (isError) return errorMessage ?? "Something went wrong.";
     return `${availableUpdate?.latestVersion ? `v${availableUpdate.latestVersion.replace(/^v/i, "")} is ready` : "A new version is ready"} to install.`;
   }

packages/app/src/desktop/updates/use-desktop-app-updater.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   checkDesktopAppUpdate,
   formatVersionWithPrefix,
@@ -11,12 +11,15 @@ import {
 export type DesktopAppUpdateStatus =
   | "idle"
   | "checking"
+  | "pending"
   | "up-to-date"
   | "available"
   | "installing"
   | "installed"
   | "error";
 
+const PENDING_RECHECK_MS = 10_000;
+
 export interface UseDesktopAppUpdaterReturn {
   isDesktopApp: boolean;
   status: DesktopAppUpdateStatus;
@@ -56,11 +59,15 @@ function formatStatusText(input: {
     return "App is up to date.";
   }
 
+  if (status === "pending") {
+    return "We'll let you know when the update is ready.";
+  }
+
   if (status === "available") {
     if (availableUpdate?.latestVersion) {
-      return `Update available: ${formatVersionWithPrefix(availableUpdate.latestVersion)}`;
+      return `Update ready: ${formatVersionWithPrefix(availableUpdate.latestVersion)}`;
     }
-    return "An app update is available.";
+    return "An app update is ready to install.";
   }
 
   if (status === "installed") {
@@ -106,9 +113,12 @@ export function useDesktopAppUpdater(): UseDesktopAppUpdaterReturn {
         setInstallMessage(null);
         setLastCheckedAt(Date.now());
 
-        if (result.hasUpdate) {
+        if (result.readyToInstall) {
           setAvailableUpdate(result);
           setStatus("available");
+        } else if (result.hasUpdate) {
+          setAvailableUpdate(null);
+          setStatus("pending");
         } else {
           setAvailableUpdate(null);
           setStatus("up-to-date");
@@ -133,6 +143,20 @@ export function useDesktopAppUpdater(): UseDesktopAppUpdaterReturn {
     [isDesktopApp],
   );
 
+  useEffect(() => {
+    if (!isDesktopApp || status !== "pending") {
+      return undefined;
+    }
+
+    const intervalId = setInterval(() => {
+      void checkForUpdates({ silent: true });
+    }, PENDING_RECHECK_MS);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [checkForUpdates, isDesktopApp, status]);
+
   const installUpdate = useCallback(async () => {
     if (!isDesktopApp) {
       return null;

packages/app/src/hooks/feature-preferences.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { resolveFeatureValues } from "./feature-preferences";
+
+describe("feature-preferences", () => {
+  const features = [
+    {
+      type: "toggle" as const,
+      id: "fast_mode",
+      label: "Fast",
+      value: false,
+    },
+    {
+      type: "toggle" as const,
+      id: "plan_mode",
+      label: "Plan",
+      value: false,
+    },
+  ];
+
+  it("restores persisted values for available features", () => {
+    expect(
+      resolveFeatureValues({
+        features,
+        persistedFeatureValues: {
+          fast_mode: true,
+          unknown_feature: true,
+        },
+        localFeatureValues: {},
+      }),
+    ).toEqual({
+      fast_mode: true,
+    });
+  });
+
+  it("prefers local values over persisted values", () => {
+    expect(
+      resolveFeatureValues({
+        features,
+        persistedFeatureValues: {
+          fast_mode: true,
+          plan_mode: false,
+        },
+        localFeatureValues: {
+          fast_mode: false,
+        },
+      }),
+    ).toEqual({
+      fast_mode: false,
+      plan_mode: false,
+    });
+  });
+});

packages/app/src/hooks/feature-preferences.ts

@@ -0,0 +1,60 @@
+import type { AgentFeature } from "@server/server/agent/agent-sdk-types";
+
+export function pruneFeatureValues(
+  featureValues: Record<string, unknown>,
+  features: AgentFeature[],
+): Record<string, unknown> {
+  const allowedFeatureIds = new Set(features.map((feature) => feature.id));
+  let changed = false;
+  const next: Record<string, unknown> = {};
+
+  for (const [featureId, value] of Object.entries(featureValues)) {
+    if (!allowedFeatureIds.has(featureId)) {
+      changed = true;
+      continue;
+    }
+    next[featureId] = value;
+  }
+
+  return changed ? next : featureValues;
+}
+
+export function applyFeatureValues(
+  features: AgentFeature[],
+  featureValues: Record<string, unknown>,
+): AgentFeature[] {
+  if (Object.keys(featureValues).length === 0) {
+    return features;
+  }
+
+  return features.map((feature) => {
+    if (!Object.prototype.hasOwnProperty.call(featureValues, feature.id)) {
+      return feature;
+    }
+
+    return {
+      ...feature,
+      value: featureValues[feature.id],
+    } as AgentFeature;
+  });
+}
+
+export function resolveFeatureValues(args: {
+  features: AgentFeature[];
+  persistedFeatureValues: Record<string, unknown>;
+  localFeatureValues: Record<string, unknown>;
+}): Record<string, unknown> {
+  const next: Record<string, unknown> = {};
+
+  for (const feature of args.features) {
+    if (Object.prototype.hasOwnProperty.call(args.localFeatureValues, feature.id)) {
+      next[feature.id] = args.localFeatureValues[feature.id];
+      continue;
+    }
+    if (Object.prototype.hasOwnProperty.call(args.persistedFeatureValues, feature.id)) {
+      next[feature.id] = args.persistedFeatureValues[feature.id];
+    }
+  }
+
+  return next;
+}

packages/app/src/hooks/use-agent-form-state.ts

@@ -93,6 +93,7 @@ type UseAgentFormStateResult = {
   isModelLoading: boolean;
   modelError: string | null;
   refreshProviderModels: () => void;
+  invalidateProviderModels: () => void;
   setProviderAndModelFromUser: (provider: AgentProvider, modelId: string) => void;
   workingDirIsEmpty: boolean;
   persistFormPreferences: () => Promise<void>;
@@ -375,6 +376,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
     isFetching: snapshotIsFetching,
     error: snapshotError,
     refresh: refreshSnapshot,
+    invalidate: invalidateSnapshot,
   } = useProvidersSnapshot(formState.serverId);
 
   const allProviderEntries = useMemo(() => snapshotEntries ?? [], [snapshotEntries]);
@@ -648,33 +650,36 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
     refreshSnapshot();
   }, [refreshSnapshot]);
 
+  const invalidateProviderModels = useCallback(() => {
+    invalidateSnapshot();
+  }, [invalidateSnapshot]);
+
   const persistFormPreferences = useCallback(async () => {
     const resolvedModel = resolveEffectiveModel(availableModels, formState.model);
     const modelId = resolvedModel?.id ?? formState.model;
-    const nextPreferences = mergeProviderPreferences({
-      preferences: preferences ?? {},
-      provider: formState.provider,
-      updates: {
-        model: modelId || undefined,
-        mode: formState.modeId || undefined,
-        ...(modelId && formState.thinkingOptionId
-          ? {
-              thinkingByModel: {
-                [modelId]: formState.thinkingOptionId,
-              },
-            }
-          : {}),
-      } satisfies Partial<ProviderPreferences>,
-    });
-
-    await updatePreferences(nextPreferences);
+    await updatePreferences((current) =>
+      mergeProviderPreferences({
+        preferences: current,
+        provider: formState.provider,
+        updates: {
+          model: modelId || undefined,
+          mode: formState.modeId || undefined,
+          ...(modelId && formState.thinkingOptionId
+            ? {
+                thinkingByModel: {
+                  [modelId]: formState.thinkingOptionId,
+                },
+              }
+            : {}),
+        } satisfies Partial<ProviderPreferences>,
+      }),
+    );
   }, [
     availableModels,
     formState.model,
     formState.modeId,
     formState.provider,
     formState.thinkingOptionId,
-    preferences?.providerPreferences,
     updatePreferences,
   ]);
 
@@ -715,6 +720,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
       isModelLoading,
       modelError,
       refreshProviderModels,
+      invalidateProviderModels,
       setProviderAndModelFromUser,
       workingDirIsEmpty,
       persistFormPreferences,
@@ -746,6 +752,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
       isModelLoading,
       modelError,
       refreshProviderModels,
+      invalidateProviderModels,
       setProviderAndModelFromUser,
       workingDirIsEmpty,
       persistFormPreferences,

packages/app/src/hooks/use-branch-switcher.ts

@@ -0,0 +1,164 @@
+import { useState, useCallback, useMemo } from "react";
+import { useQuery, type QueryClient } from "@tanstack/react-query";
+import type { DaemonClient } from "@server/client/daemon-client";
+import type { ComboboxOption } from "@/components/ui/combobox";
+import type { ToastApi } from "@/components/toast-host";
+import { checkoutStatusQueryKey } from "@/hooks/use-checkout-status-query";
+import { confirmDialog } from "@/utils/confirm-dialog";
+
+interface UseBranchSwitcherInput {
+  client: DaemonClient | null;
+  normalizedServerId: string;
+  normalizedWorkspaceId: string;
+  currentBranchName: string | null;
+  isGitCheckout: boolean;
+  isConnected: boolean;
+  toast: ToastApi;
+  queryClient: QueryClient;
+}
+
+interface UseBranchSwitcherResult {
+  branchOptions: ComboboxOption[];
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  handleBranchSelect: (branchId: string) => void;
+  invalidateStashAndCheckout: () => Promise<void>;
+}
+
+export function useBranchSwitcher({
+  client,
+  normalizedServerId,
+  normalizedWorkspaceId,
+  currentBranchName,
+  isGitCheckout,
+  isConnected,
+  toast,
+  queryClient,
+}: UseBranchSwitcherInput): UseBranchSwitcherResult {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const branchSuggestionsQuery = useQuery({
+    queryKey: ["branchSuggestions", normalizedServerId, normalizedWorkspaceId],
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Daemon client unavailable");
+      }
+      const payload = await client.getBranchSuggestions({
+        cwd: normalizedWorkspaceId,
+        limit: 200,
+      });
+      if (payload.error) {
+        throw new Error(payload.error);
+      }
+      return payload.branches ?? [];
+    },
+    enabled: isOpen && isGitCheckout && Boolean(client) && isConnected,
+    retry: false,
+    staleTime: 15_000,
+  });
+
+  const branchOptions = useMemo<ComboboxOption[]>(() => {
+    const branches = branchSuggestionsQuery.data ?? [];
+    return branches.map((name) => ({ id: name, label: name }));
+  }, [branchSuggestionsQuery.data]);
+
+  const stashListQueryKey = useMemo(
+    () => ["stashList", normalizedServerId, normalizedWorkspaceId] as const,
+    [normalizedServerId, normalizedWorkspaceId],
+  );
+
+  const invalidateStashAndCheckout = useCallback(async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: stashListQueryKey }),
+      queryClient.invalidateQueries({
+        queryKey: checkoutStatusQueryKey(normalizedServerId, normalizedWorkspaceId),
+      }),
+    ]);
+  }, [queryClient, stashListQueryKey, normalizedServerId, normalizedWorkspaceId]);
+
+  const stashAndSwitch = useCallback(
+    async (branchId: string) => {
+      if (!client) return;
+      const shouldStash = await confirmDialog({
+        title: "Uncommitted changes",
+        message:
+          "You have uncommitted changes. Stash them before switching branches?",
+        confirmLabel: "Stash & Switch",
+        cancelLabel: "Cancel",
+      });
+      if (!shouldStash) return;
+
+      try {
+        const stashPayload = await client.stashSave(normalizedWorkspaceId, {
+          branch: currentBranchName ?? undefined,
+        });
+        if (stashPayload.error) {
+          toast.error(stashPayload.error.message);
+          return;
+        }
+        await invalidateStashAndCheckout();
+        const switchPayload = await client.checkoutSwitchBranch(normalizedWorkspaceId, branchId);
+        if (switchPayload.error) {
+          toast.error(switchPayload.error.message);
+          return;
+        }
+        await invalidateStashAndCheckout();
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : "Failed to stash changes");
+      }
+    },
+    [client, currentBranchName, invalidateStashAndCheckout, normalizedWorkspaceId, toast],
+  );
+
+  const handleBranchSelect = useCallback(
+    (branchId: string) => {
+      if (branchId === currentBranchName) return;
+
+      void (async () => {
+        if (!client) return;
+        try {
+          const payload = await client.checkoutSwitchBranch(normalizedWorkspaceId, branchId);
+          if (payload.error) {
+            // If the error is about uncommitted changes, offer the stash dialog
+            if (payload.error.message.toLowerCase().includes("uncommitted")) {
+              await stashAndSwitch(branchId);
+              return;
+            }
+            toast.error(payload.error.message);
+            return;
+          }
+          // Success — refresh and check for stashes on the target branch
+          await invalidateStashAndCheckout();
+          try {
+            const stashPayload = await client.stashList(normalizedWorkspaceId, { paseoOnly: true });
+            const targetStash = stashPayload.entries.find((e) => e.branch === branchId);
+            if (targetStash) {
+              const shouldRestore = await confirmDialog({
+                title: "Restore stashed changes?",
+                message: "This branch has stashed changes from a previous session. Would you like to restore them?",
+                confirmLabel: "Restore",
+                cancelLabel: "Later",
+              });
+              if (shouldRestore) {
+                const popPayload = await client.stashPop(normalizedWorkspaceId, targetStash.index);
+                if (popPayload.error) {
+                  toast.error(popPayload.error.message);
+                } else {
+                  toast.show("Stashed changes restored");
+                }
+                await invalidateStashAndCheckout();
+              }
+            }
+          } catch {
+            // Non-critical — user can still restore on next branch switch
+          }
+        } catch (err) {
+          toast.error(err instanceof Error ? err.message : "Failed to switch branch");
+        }
+      })();
+    },
+    [client, currentBranchName, invalidateStashAndCheckout, normalizedWorkspaceId, stashAndSwitch, toast],
+  );
+
+  return { branchOptions, isOpen, setIsOpen, handleBranchSelect, invalidateStashAndCheckout };
+}

packages/app/src/hooks/use-changes-preferences.test.ts

@@ -0,0 +1,74 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const asyncStorageMock = vi.hoisted(() => ({
+  getItem: vi.fn<(_: string) => Promise<string | null>>(),
+  setItem: vi.fn<(_: string, __: string) => Promise<void>>(),
+}));
+
+vi.mock("@react-native-async-storage/async-storage", () => ({
+  default: asyncStorageMock,
+}));
+
+describe("use-changes-preferences", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    asyncStorageMock.getItem.mockReset();
+    asyncStorageMock.setItem.mockReset();
+  });
+
+  it("defaults to unified layout with visible whitespace", async () => {
+    asyncStorageMock.getItem.mockResolvedValue(null);
+    asyncStorageMock.setItem.mockResolvedValue();
+
+    const mod = await import("./use-changes-preferences");
+    const result = await mod.loadChangesPreferencesFromStorage();
+
+    expect(result).toEqual(mod.DEFAULT_CHANGES_PREFERENCES);
+    expect(asyncStorageMock.setItem).toHaveBeenCalledWith(
+      "@paseo:changes-preferences",
+      JSON.stringify(mod.DEFAULT_CHANGES_PREFERENCES),
+    );
+  });
+
+  it("migrates the legacy wrap-lines toggle into the new preferences object", async () => {
+    asyncStorageMock.getItem.mockImplementation(async (key: string) => {
+      if (key === "diff-wrap-lines") {
+        return "true";
+      }
+      return null;
+    });
+    asyncStorageMock.setItem.mockResolvedValue();
+
+    const mod = await import("./use-changes-preferences");
+    const result = await mod.loadChangesPreferencesFromStorage();
+
+    expect(result).toEqual({
+      layout: "unified",
+      wrapLines: true,
+      hideWhitespace: false,
+    });
+  });
+
+  it("loads persisted layout and whitespace preferences", async () => {
+    asyncStorageMock.getItem.mockImplementation(async (key: string) => {
+      if (key === "@paseo:changes-preferences") {
+        return JSON.stringify({
+          layout: "split",
+          hideWhitespace: true,
+          wrapLines: false,
+        });
+      }
+      return null;
+    });
+
+    const mod = await import("./use-changes-preferences");
+    const result = await mod.loadChangesPreferencesFromStorage();
+
+    expect(result).toEqual({
+      layout: "split",
+      hideWhitespace: true,
+      wrapLines: false,
+    });
+    expect(asyncStorageMock.setItem).not.toHaveBeenCalled();
+  });
+});

packages/app/src/hooks/use-changes-preferences.ts

@@ -0,0 +1,89 @@
+import { useCallback } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { z } from "zod";
+
+const CHANGES_PREFERENCES_STORAGE_KEY = "@paseo:changes-preferences";
+const LEGACY_WRAP_LINES_STORAGE_KEY = "diff-wrap-lines";
+const CHANGES_PREFERENCES_QUERY_KEY = ["changes-preferences"];
+
+const changesPreferencesSchema = z.object({
+  layout: z.enum(["unified", "split"]).optional(),
+  wrapLines: z.boolean().optional(),
+  hideWhitespace: z.boolean().optional(),
+});
+
+export interface ChangesPreferences {
+  layout: "unified" | "split";
+  wrapLines: boolean;
+  hideWhitespace: boolean;
+}
+
+export const DEFAULT_CHANGES_PREFERENCES: ChangesPreferences = {
+  layout: "unified",
+  wrapLines: false,
+  hideWhitespace: false,
+};
+
+async function loadLegacyWrapLinesPreference(): Promise<boolean | null> {
+  const legacyValue = await AsyncStorage.getItem(LEGACY_WRAP_LINES_STORAGE_KEY);
+  if (legacyValue === "true") {
+    return true;
+  }
+  if (legacyValue === "false") {
+    return false;
+  }
+  return null;
+}
+
+export async function loadChangesPreferencesFromStorage(): Promise<ChangesPreferences> {
+  const stored = await AsyncStorage.getItem(CHANGES_PREFERENCES_STORAGE_KEY);
+  if (stored) {
+    const parsed = changesPreferencesSchema.safeParse(JSON.parse(stored));
+    if (parsed.success) {
+      return { ...DEFAULT_CHANGES_PREFERENCES, ...parsed.data };
+    }
+  }
+
+  const legacyWrapLines = await loadLegacyWrapLinesPreference();
+  const next = {
+    ...DEFAULT_CHANGES_PREFERENCES,
+    ...(legacyWrapLines !== null ? { wrapLines: legacyWrapLines } : {}),
+  } satisfies ChangesPreferences;
+  await AsyncStorage.setItem(CHANGES_PREFERENCES_STORAGE_KEY, JSON.stringify(next));
+  return next;
+}
+
+export interface UseChangesPreferencesReturn {
+  preferences: ChangesPreferences;
+  isLoading: boolean;
+  updatePreferences: (updates: Partial<ChangesPreferences>) => Promise<void>;
+}
+
+export function useChangesPreferences(): UseChangesPreferencesReturn {
+  const queryClient = useQueryClient();
+  const { data, isPending } = useQuery({
+    queryKey: CHANGES_PREFERENCES_QUERY_KEY,
+    queryFn: loadChangesPreferencesFromStorage,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  const updatePreferences = useCallback(
+    async (updates: Partial<ChangesPreferences>) => {
+      const prev =
+        queryClient.getQueryData<ChangesPreferences>(CHANGES_PREFERENCES_QUERY_KEY) ??
+        DEFAULT_CHANGES_PREFERENCES;
+      const next = { ...prev, ...updates };
+      queryClient.setQueryData<ChangesPreferences>(CHANGES_PREFERENCES_QUERY_KEY, next);
+      await AsyncStorage.setItem(CHANGES_PREFERENCES_STORAGE_KEY, JSON.stringify(next));
+    },
+    [queryClient],
+  );
+
+  return {
+    preferences: data ?? DEFAULT_CHANGES_PREFERENCES,
+    isLoading: isPending,
+    updatePreferences,
+  };
+}

packages/app/src/hooks/use-checkout-diff-query.ts

@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useId, useMemo } from "react";
-import { UnistylesRuntime } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { usePanelStore } from "@/stores/panel-store";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import type { SubscribeCheckoutDiffResponse } from "@server/shared/messages";
@@ -13,8 +13,9 @@ function checkoutDiffQueryKey(
   cwd: string,
   mode: "uncommitted" | "base",
   baseRef?: string,
+  ignoreWhitespace?: boolean,
 ) {
-  return ["checkoutDiff", serverId, cwd, mode, baseRef ?? ""] as const;
+  return ["checkoutDiff", serverId, cwd, mode, baseRef ?? "", ignoreWhitespace === true] as const;
 }
 
 interface UseCheckoutDiffQueryOptions {
@@ -22,6 +23,7 @@ interface UseCheckoutDiffQueryOptions {
   cwd: string;
   mode: "uncommitted" | "base";
   baseRef?: string;
+  ignoreWhitespace?: boolean;
   enabled?: boolean;
 }
 
@@ -35,12 +37,16 @@ export type HighlightToken = NonNullable<DiffLine["tokens"]>[number];
 function normalizeCheckoutDiffCompare(compare: {
   mode: "uncommitted" | "base";
   baseRef?: string;
-}): { mode: "uncommitted" | "base"; baseRef?: string } {
+  ignoreWhitespace?: boolean;
+}): { mode: "uncommitted" | "base"; baseRef?: string; ignoreWhitespace?: boolean } {
+  const ignoreWhitespace = compare.ignoreWhitespace === true;
   if (compare.mode === "uncommitted") {
-    return { mode: "uncommitted" };
+    return { mode: "uncommitted", ignoreWhitespace };
   }
   const trimmedBaseRef = compare.baseRef?.trim();
-  return trimmedBaseRef ? { mode: "base", baseRef: trimmedBaseRef } : { mode: "base" };
+  return trimmedBaseRef
+    ? { mode: "base", baseRef: trimmedBaseRef, ignoreWhitespace }
+    : { mode: "base", ignoreWhitespace };
 }
 
 export function useCheckoutDiffQuery({
@@ -48,26 +54,28 @@ export function useCheckoutDiffQuery({
   cwd,
   mode,
   baseRef,
+  ignoreWhitespace,
   enabled = true,
 }: UseCheckoutDiffQueryOptions) {
   const queryClient = useQueryClient();
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const explorerTab = usePanelStore((state) => state.explorerTab);
   const isOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
   const hookInstanceId = useId();
   const normalizedCompare = useMemo(
-    () => normalizeCheckoutDiffCompare({ mode, baseRef }),
-    [mode, baseRef],
+    () => normalizeCheckoutDiffCompare({ mode, baseRef, ignoreWhitespace }),
+    [mode, baseRef, ignoreWhitespace],
   );
   const compareMode = normalizedCompare.mode;
   const compareBaseRef = normalizedCompare.baseRef;
+  const compareIgnoreWhitespace = normalizedCompare.ignoreWhitespace;
   const queryKey = useMemo(
-    () => checkoutDiffQueryKey(serverId, cwd, mode, baseRef),
-    [serverId, cwd, mode, baseRef],
+    () => checkoutDiffQueryKey(serverId, cwd, mode, baseRef, compareIgnoreWhitespace),
+    [serverId, cwd, mode, baseRef, compareIgnoreWhitespace],
   );
 
   const query = useQuery({
@@ -79,6 +87,7 @@ export function useCheckoutDiffQuery({
       const payload = await client.getCheckoutDiff(cwd, {
         mode: compareMode,
         baseRef: compareBaseRef,
+        ignoreWhitespace: compareIgnoreWhitespace,
       });
       return {
         ...payload,
@@ -104,6 +113,7 @@ export function useCheckoutDiffQuery({
       cwd,
       compareMode,
       compareBaseRef ?? "",
+      compareIgnoreWhitespace ? "ignore-ws" : "keep-ws",
     ].join(":");
     let cancelled = false;
 
@@ -145,6 +155,7 @@ export function useCheckoutDiffQuery({
         {
           mode: compareMode,
           baseRef: compareBaseRef,
+          ignoreWhitespace: compareIgnoreWhitespace,
         },
         { subscriptionId },
       )
@@ -191,6 +202,7 @@ export function useCheckoutDiffQuery({
     serverId,
     compareMode,
     compareBaseRef,
+    compareIgnoreWhitespace,
     queryKey,
     queryClient,
   ]);

packages/app/src/hooks/use-checkout-status-query.ts

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef } from "react";
-import { UnistylesRuntime } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { usePanelStore } from "@/stores/panel-store";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import type { CheckoutStatusResponse } from "@server/shared/messages";
@@ -32,7 +32,7 @@ function fetchCheckoutStatus(
 export function useCheckoutStatusQuery({ serverId, cwd }: UseCheckoutStatusQueryOptions) {
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
-  const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const explorerTab = usePanelStore((state) => state.explorerTab);

packages/app/src/hooks/use-command-center.ts

@@ -165,7 +165,7 @@ export function useCommandCenter() {
 
   const settingsRoute = useMemo<Href>(() => {
     const serverIdFromPath = activeServerId;
-    return serverIdFromPath ? (buildHostSettingsRoute(serverIdFromPath) as Href) : "/";
+    return serverIdFromPath ? buildHostSettingsRoute(serverIdFromPath) : "/";
   }, [activeServerId]);
 
   const actionItems = useMemo(() => {
@@ -220,7 +220,7 @@ export function useCommandCenter() {
         workspaceId: agent.cwd,
         target: { kind: "agent", agentId: agent.id },
       });
-      router.navigate(route as any);
+      router.navigate(route);
     },
     [setOpen],
   );

packages/app/src/hooks/use-draft-agent-features.ts

@@ -1,50 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import type {
-  AgentFeature,
   AgentProvider,
   AgentSessionConfig,
 } from "@server/server/agent/agent-sdk-types";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
-
-function pruneFeatureValues(
-  featureValues: Record<string, unknown>,
-  features: AgentFeature[],
-): Record<string, unknown> {
-  const allowedFeatureIds = new Set(features.map((feature) => feature.id));
-  let changed = false;
-  const next: Record<string, unknown> = {};
-
-  for (const [featureId, value] of Object.entries(featureValues)) {
-    if (!allowedFeatureIds.has(featureId)) {
-      changed = true;
-      continue;
-    }
-    next[featureId] = value;
-  }
-
-  return changed ? next : featureValues;
-}
-
-function applyFeatureValues(
-  features: AgentFeature[],
-  featureValues: Record<string, unknown>,
-): AgentFeature[] {
-  if (Object.keys(featureValues).length === 0) {
-    return features;
-  }
-
-  return features.map((feature) => {
-    if (!Object.prototype.hasOwnProperty.call(featureValues, feature.id)) {
-      return feature;
-    }
-
-    return {
-      ...feature,
-      value: featureValues[feature.id],
-    } as AgentFeature;
-  });
-}
+import { mergeProviderPreferences, useFormPreferences } from "./use-form-preferences";
+import {
+  applyFeatureValues,
+  pruneFeatureValues,
+  resolveFeatureValues,
+} from "./feature-preferences";
 
 type DraftFeatureConfig = Pick<
   AgentSessionConfig,
@@ -60,10 +26,15 @@ export function useDraftAgentFeatures(input: {
   thinkingOptionId: string | null | undefined;
 }) {
   const { serverId, provider, cwd, modeId, modelId, thinkingOptionId } = input;
-  const [featureValues, setFeatureValues] = useState<Record<string, unknown>>({});
+  const [localFeatureValues, setLocalFeatureValues] = useState<Record<string, unknown>>({});
   const client = useHostRuntimeClient(serverId ?? "");
   const isConnected = useHostRuntimeIsConnected(serverId ?? "");
+  const { preferences, updatePreferences } = useFormPreferences();
   const normalizedCwd = cwd?.trim() || "";
+  const persistedFeatureValues = useMemo(
+    () => preferences.providerPreferences?.[provider]?.featureValues ?? {},
+    [preferences.providerPreferences, provider],
+  );
 
   const draftConfig = useMemo<DraftFeatureConfig | null>(() => {
     if (!normalizedCwd) {
@@ -102,28 +73,56 @@ export function useDraftAgentFeatures(input: {
       return payload.features ?? [];
     },
   });
+  const availableFeatures = featuresQuery.data ?? [];
+  const featureValues = useMemo(
+    () =>
+      resolveFeatureValues({
+        features: availableFeatures,
+        persistedFeatureValues,
+        localFeatureValues,
+      }),
+    [availableFeatures, localFeatureValues, persistedFeatureValues],
+  );
 
   const features = useMemo(() => {
-    return applyFeatureValues(featuresQuery.data ?? [], featureValues);
-  }, [featureValues, featuresQuery.data]);
+    return applyFeatureValues(availableFeatures, featureValues);
+  }, [availableFeatures, featureValues]);
 
   useEffect(() => {
-    const next = pruneFeatureValues(featureValues, features);
-    if (next !== featureValues) {
-      setFeatureValues(next);
+    setLocalFeatureValues({});
+  }, [provider]);
+
+  useEffect(() => {
+    const next = pruneFeatureValues(localFeatureValues, availableFeatures);
+    if (next !== localFeatureValues) {
+      setLocalFeatureValues(next);
     }
-  }, [featureValues, features]);
+  }, [availableFeatures, localFeatureValues]);
 
   const effectiveFeatureValues = Object.keys(featureValues).length > 0 ? featureValues : undefined;
   const setFeatureValue = useCallback((featureId: string, value: unknown) => {
-    setFeatureValues((current) => {
+    setLocalFeatureValues((current) => {
       if (Object.is(current[featureId], value)) {
         return current;
       }
 
       return { ...current, [featureId]: value };
     });
-  }, []);
+    void updatePreferences(
+      (current) =>
+        mergeProviderPreferences({
+          preferences: current,
+          provider,
+          updates: {
+            featureValues: {
+              [featureId]: value,
+            },
+          },
+        }),
+    ).catch((error) => {
+      console.warn("[useDraftAgentFeatures] persist feature preference failed", error);
+    });
+  }, [provider, updatePreferences]);
 
   return {
     features,

packages/app/src/hooks/use-form-preferences.test.ts

@@ -59,6 +59,41 @@ describe("mergeProviderPreferences", () => {
       },
     });
   });
+
+  it("merges feature values without dropping existing entries", () => {
+    expect(
+      mergeProviderPreferences({
+        preferences: {
+          provider: "codex",
+          providerPreferences: {
+            codex: {
+              model: "gpt-5.4",
+              featureValues: {
+                fast_mode: true,
+              },
+            },
+          },
+        },
+        provider: "codex",
+        updates: {
+          featureValues: {
+            plan_mode: true,
+          },
+        },
+      }),
+    ).toEqual({
+      provider: "codex",
+      providerPreferences: {
+        codex: {
+          model: "gpt-5.4",
+          featureValues: {
+            fast_mode: true,
+            plan_mode: true,
+          },
+        },
+      },
+    });
+  });
 });
 
 describe("favorite model preferences", () => {

packages/app/src/hooks/use-form-preferences.ts

@@ -25,6 +25,7 @@ const providerPreferencesSchema = z.object({
   model: z.string().optional(),
   mode: z.string().optional(),
   thinkingByModel: z.record(z.string()).optional(),
+  featureValues: z.record(z.unknown()).optional(),
 });
 
 const formPreferencesSchema = z.object({
@@ -53,7 +54,9 @@ async function loadFormPreferences(): Promise<FormPreferences> {
 export interface UseFormPreferencesReturn {
   preferences: FormPreferences;
   isLoading: boolean;
-  updatePreferences: (updates: Partial<FormPreferences>) => Promise<void>;
+  updatePreferences: (
+    updates: Partial<FormPreferences> | ((current: FormPreferences) => FormPreferences),
+  ) => Promise<void>;
 }
 
 export function mergeProviderPreferences(args: {
@@ -71,6 +74,13 @@ export function mergeProviderPreferences(args: {
           ...existing.thinkingByModel,
           ...updates.thinkingByModel,
         };
+  const nextFeatureValues =
+    updates.featureValues === undefined
+      ? existing.featureValues
+      : {
+          ...existing.featureValues,
+          ...updates.featureValues,
+        };
 
   return {
     ...preferences,
@@ -81,6 +91,7 @@ export function mergeProviderPreferences(args: {
         ...existing,
         ...updates,
         ...(nextThinkingByModel ? { thinkingByModel: nextThinkingByModel } : {}),
+        ...(nextFeatureValues ? { featureValues: nextFeatureValues } : {}),
       },
     },
   };
@@ -133,11 +144,12 @@ export function useFormPreferences(): UseFormPreferencesReturn {
   const preferences = data ?? DEFAULT_FORM_PREFERENCES;
 
   const updatePreferences = useCallback(
-    async (updates: Partial<FormPreferences>) => {
+    async (updates: Partial<FormPreferences> | ((current: FormPreferences) => FormPreferences)) => {
       const prev =
         queryClient.getQueryData<FormPreferences>(FORM_PREFERENCES_QUERY_KEY) ??
         DEFAULT_FORM_PREFERENCES;
-      const next = { ...prev, ...updates };
+      const next =
+        typeof updates === "function" ? updates(prev) : { ...prev, ...updates };
       queryClient.setQueryData<FormPreferences>(FORM_PREFERENCES_QUERY_KEY, next);
       await AsyncStorage.setItem(FORM_PREFERENCES_STORAGE_KEY, JSON.stringify(next));
     },

packages/app/src/hooks/use-git-actions.ts

@@ -190,7 +190,7 @@ export function useGitActions({ serverId, cwd, icons }: UseGitActionsInput): Use
     const targetWorkingDir = resolveNewAgentWorkingDir(cwd, status ?? null);
     void runArchiveWorktree({ serverId, cwd, worktreePath })
       .then(() => {
-        router.replace(buildNewAgentRoute(serverId, targetWorkingDir) as any);
+        router.replace(buildNewAgentRoute(serverId, targetWorkingDir));
       })
       .catch((err) => {
         const message = err instanceof Error ? err.message : "Failed to archive worktree";

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

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { resolvePreferredEditorId } from "./use-preferred-editor";
+
+describe("resolvePreferredEditorId", () => {
+  it("keeps the stored editor when it is still available", () => {
+    expect(resolvePreferredEditorId(["cursor", "vscode"], "vscode")).toBe("vscode");
+  });
+
+  it("falls back to the first available editor when the stored one is missing", () => {
+    expect(resolvePreferredEditorId(["zed", "finder"], "cursor")).toBe("zed");
+  });
+
+  it("falls back when a platform-specific file manager target is unavailable", () => {
+    expect(resolvePreferredEditorId(["explorer", "vscode"], "finder")).toBe("explorer");
+  });
+
+  it("keeps unknown editor ids when they are still available", () => {
+    expect(resolvePreferredEditorId(["unknown-editor", "cursor"], "unknown-editor")).toBe(
+      "unknown-editor",
+    );
+  });
+
+  it("returns null when no editors are available", () => {
+    expect(resolvePreferredEditorId([], "cursor")).toBeNull();
+  });
+});

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

@@ -0,0 +1,57 @@
+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 "@server/shared/messages";
+
+const PREFERRED_EDITOR_STORAGE_KEY = "@paseo:preferred-editor";
+const PREFERRED_EDITOR_QUERY_KEY = ["preferred-editor"];
+
+async function loadPreferredEditor(): Promise<EditorTargetId | null> {
+  const stored = await AsyncStorage.getItem(PREFERRED_EDITOR_STORAGE_KEY);
+  if (!stored) {
+    return null;
+  }
+  const parsed = EditorTargetIdSchema.safeParse(stored);
+  return parsed.success ? parsed.data : null;
+}
+
+export function resolvePreferredEditorId(
+  availableEditorIds: readonly EditorTargetId[],
+  storedEditorId: EditorTargetId | null | undefined,
+): EditorTargetId | null {
+  if (
+    storedEditorId &&
+    availableEditorIds.some((availableEditorId) => availableEditorId === storedEditorId)
+  ) {
+    return storedEditorId;
+  }
+  return availableEditorIds[0] ?? null;
+}
+
+export function usePreferredEditor() {
+  const queryClient = useQueryClient();
+  const { data, isPending } = useQuery({
+    queryKey: PREFERRED_EDITOR_QUERY_KEY,
+    queryFn: loadPreferredEditor,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  const updatePreferredEditor = useCallback(
+    async (editorId: EditorTargetId | null) => {
+      queryClient.setQueryData(PREFERRED_EDITOR_QUERY_KEY, editorId);
+      if (editorId) {
+        await AsyncStorage.setItem(PREFERRED_EDITOR_STORAGE_KEY, editorId);
+        return;
+      }
+      await AsyncStorage.removeItem(PREFERRED_EDITOR_STORAGE_KEY);
+    },
+    [queryClient],
+  );
+
+  return {
+    preferredEditorId: data ?? null,
+    isLoading: isPending,
+    updatePreferredEditor,
+  };
+}

packages/app/src/hooks/use-providers-snapshot.ts

@@ -17,6 +17,7 @@ interface UseProvidersSnapshotResult {
   error: string | null;
   supportsSnapshot: boolean;
   refresh: () => void;
+  invalidate: () => void;
 }
 
 export function useProvidersSnapshot(serverId: string | null): UseProvidersSnapshotResult {
@@ -66,6 +67,10 @@ export function useProvidersSnapshot(serverId: string | null): UseProvidersSnaps
     void client.refreshProvidersSnapshot();
   }, [client]);
 
+  const invalidate = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey });
+  }, [queryClient, queryKey]);
+
   return {
     entries: snapshotQuery.data?.entries ?? undefined,
     isLoading: snapshotQuery.isLoading,
@@ -73,6 +78,7 @@ export function useProvidersSnapshot(serverId: string | null): UseProvidersSnaps
     error: snapshotQuery.error instanceof Error ? snapshotQuery.error.message : null,
     supportsSnapshot,
     refresh,
+    invalidate,
   };
 }
 

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

@@ -6,14 +6,22 @@ export const APP_SETTINGS_KEY = "@paseo:app-settings";
 const LEGACY_SETTINGS_KEY = "@paseo:settings";
 const APP_SETTINGS_QUERY_KEY = ["app-settings"];
 
+import { THEME_TO_UNISTYLES, type ThemeName } from "@/styles/theme";
+
+export type SendBehavior = "interrupt" | "queue";
+
+const VALID_THEMES = new Set<string>([...Object.keys(THEME_TO_UNISTYLES), "auto"]);
+
 export interface AppSettings {
-  theme: "dark" | "light" | "auto";
+  theme: ThemeName | "auto";
   manageBuiltInDaemon: boolean;
+  sendBehavior: SendBehavior;
 }
 
 export const DEFAULT_APP_SETTINGS: AppSettings = {
   theme: "auto",
   manageBuiltInDaemon: true,
+  sendBehavior: "interrupt",
 };
 
 export interface UseAppSettingsReturn {
@@ -74,6 +82,9 @@ export async function loadSettingsFromStorage(): Promise<AppSettings> {
     const stored = await AsyncStorage.getItem(APP_SETTINGS_KEY);
     if (stored) {
       const parsed = JSON.parse(stored) as Partial<AppSettings>;
+      if (parsed.theme && !VALID_THEMES.has(parsed.theme)) {
+        parsed.theme = DEFAULT_APP_SETTINGS.theme;
+      }
       return { ...DEFAULT_APP_SETTINGS, ...parsed };
     }
 

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

@@ -1,5 +1,9 @@
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
-import { normalizeWorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
+import {
+  mergeWorkspaceSnapshotWithExisting,
+  normalizeWorkspaceDescriptor,
+  useSessionStore,
+} from "@/stores/session-store";
 import { getHostRuntimeStore } from "@/runtime/host-runtime";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
 import type { WorkspaceDescriptor } from "@/stores/session-store";
@@ -356,6 +360,7 @@ export function useSidebarWorkspacesList(options?: {
     }
     void (async () => {
       const next = new Map<string, WorkspaceDescriptor>();
+      const existingWorkspaces = useSessionStore.getState().sessions[serverId]?.workspaces;
       let cursor: string | null = null;
       try {
         while (true) {
@@ -365,7 +370,13 @@ export function useSidebarWorkspacesList(options?: {
           });
           for (const entry of payload.entries) {
             const workspace = toWorkspaceDescriptor(entry);
-            next.set(workspace.id, workspace);
+            next.set(
+              workspace.id,
+              mergeWorkspaceSnapshotWithExisting({
+                incoming: workspace,
+                existing: existingWorkspaces?.get(workspace.id),
+              }),
+            );
           }
           if (!payload.pageInfo.hasMore || !payload.pageInfo.nextCursor) {
             break;

packages/app/src/hooks/use-workspace-navigation.ts

@@ -11,7 +11,7 @@ import { buildHostWorkspaceRoute } from "@/utils/host-routes";
  */
 export function navigateToWorkspace(serverId: string, workspaceId: string) {
   const href = buildHostWorkspaceRoute(serverId, workspaceId);
-  router.navigate(href as any);
+  router.navigate(href);
 }
 
 export function useWorkspaceNavigation() {

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

@@ -5,6 +5,7 @@ import type {
   FetchAgentsEntry,
   FetchAgentsOptions,
 } from "@server/client/daemon-client";
+import type { ConnectionOffer } from "@server/shared/connection-offer";
 import type { HostConnection, HostProfile } from "@/types/host-connection";
 import { useSessionStore, type Agent } from "@/stores/session-store";
 import {
@@ -189,6 +190,17 @@ function makeHost(input?: Partial<HostProfile>): HostProfile {
   };
 }
 
+function makeOffer(input?: Partial<ConnectionOffer>): ConnectionOffer {
+  return {
+    v: 2,
+    serverId: input?.serverId ?? "srv_offer",
+    daemonPublicKeyB64: input?.daemonPublicKeyB64 ?? "pk_test_offer",
+    relay: {
+      endpoint: input?.relay?.endpoint ?? "relay.paseo.sh:443",
+    },
+  };
+}
+
 function makeDeps(
   latencyByConnectionId: Record<string, number | Error>,
   createdClients: FakeDaemonClient[],
@@ -1295,4 +1307,53 @@ describe("HostRuntimeStore", () => {
 
     store.syncHosts([]);
   });
+
+  it("uses the advertised hostname when adding a relay host from a pairing offer", async () => {
+    const store = new HostRuntimeStore({
+      deps: {
+        createClient: () => new FakeDaemonClient() as unknown as DaemonClient,
+        connectToDaemon: async ({ host }) => ({
+          client: makeConnectedProbeClient(5) as unknown as DaemonClient,
+          serverId: host.serverId,
+          hostname: host.label ?? null,
+        }),
+        getClientId: async () => "cid_test_runtime",
+      },
+    });
+
+    await store.upsertConnectionFromOffer(makeOffer(), "mbp");
+
+    const pairedHost = store.getHosts().find((host) => host.serverId === "srv_offer");
+    expect(pairedHost?.label).toBe("mbp");
+
+    store.syncHosts([]);
+  });
+
+  it("keeps a custom host label when re-pairing with an advertised hostname", async () => {
+    const store = new HostRuntimeStore({
+      deps: {
+        createClient: () => new FakeDaemonClient() as unknown as DaemonClient,
+        connectToDaemon: async ({ host }) => ({
+          client: makeConnectedProbeClient(5) as unknown as DaemonClient,
+          serverId: host.serverId,
+          hostname: host.label ?? null,
+        }),
+        getClientId: async () => "cid_test_runtime",
+      },
+    });
+
+    await store.upsertRelayConnection({
+      serverId: "srv_offer",
+      relayEndpoint: "relay.paseo.sh:443",
+      daemonPublicKeyB64: "pk_test_offer",
+      label: "Custom name",
+    });
+
+    await store.upsertConnectionFromOffer(makeOffer(), "mbp");
+
+    const pairedHost = store.getHosts().find((host) => host.serverId === "srv_offer");
+    expect(pairedHost?.label).toBe("Custom name");
+
+    store.syncHosts([]);
+  });
 });

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

@@ -1287,15 +1287,22 @@ export class HostRuntimeStore {
     });
   }
 
-  async upsertConnectionFromOffer(offer: ConnectionOffer): Promise<HostProfile> {
+  async upsertConnectionFromOffer(
+    offer: ConnectionOffer,
+    label?: string,
+  ): Promise<HostProfile> {
     return this.upsertRelayConnection({
       serverId: offer.serverId,
       relayEndpoint: offer.relay.endpoint,
       daemonPublicKeyB64: offer.daemonPublicKeyB64,
+      label,
     });
   }
 
-  async upsertConnectionFromOfferUrl(offerUrlOrFragment: string): Promise<HostProfile> {
+  async upsertConnectionFromOfferUrl(
+    offerUrlOrFragment: string,
+    label?: string,
+  ): Promise<HostProfile> {
     const marker = "#offer=";
     const idx = offerUrlOrFragment.indexOf(marker);
     if (idx === -1) {
@@ -1307,7 +1314,7 @@ export class HostRuntimeStore {
     }
     const payload = decodeOfferFragmentPayload(encoded);
     const offer = ConnectionOfferSchema.parse(payload);
-    return this.upsertConnectionFromOffer(offer);
+    return this.upsertConnectionFromOffer(offer, label);
   }
 
   async addConnectionFromListenAndWaitForOnline(input: {
@@ -1956,8 +1963,11 @@ export interface HostMutations {
     daemonPublicKeyB64: string;
     label?: string;
   }) => Promise<HostProfile>;
-  upsertConnectionFromOffer: (offer: ConnectionOffer) => Promise<HostProfile>;
-  upsertConnectionFromOfferUrl: (offerUrlOrFragment: string) => Promise<HostProfile>;
+  upsertConnectionFromOffer: (offer: ConnectionOffer, label?: string) => Promise<HostProfile>;
+  upsertConnectionFromOfferUrl: (
+    offerUrlOrFragment: string,
+    label?: string,
+  ) => Promise<HostProfile>;
   renameHost: (serverId: string, label: string) => Promise<void>;
   removeHost: (serverId: string) => Promise<void>;
   removeConnection: (serverId: string, connectionId: string) => Promise<void>;
@@ -1969,8 +1979,8 @@ export function useHostMutations(): HostMutations {
     () => ({
       upsertDirectConnection: (input) => store.upsertDirectConnection(input),
       upsertRelayConnection: (input) => store.upsertRelayConnection(input),
-      upsertConnectionFromOffer: (offer) => store.upsertConnectionFromOffer(offer),
-      upsertConnectionFromOfferUrl: (url) => store.upsertConnectionFromOfferUrl(url),
+      upsertConnectionFromOffer: (offer, label) => store.upsertConnectionFromOffer(offer, label),
+      upsertConnectionFromOfferUrl: (url, label) => store.upsertConnectionFromOfferUrl(url, label),
       renameHost: (serverId, label) => store.renameHost(serverId, label),
       removeHost: (serverId) => store.removeHost(serverId),
       removeConnection: (serverId, connectionId) => store.removeConnection(serverId, connectionId),

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -40,7 +40,7 @@ import {
 } from "@/runtime/host-runtime";
 import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
 import { usePanelStore, type ExplorerCheckoutContext } from "@/stores/panel-store";
-import { MAX_CONTENT_WIDTH, isCompactFormFactor } from "@/constants/layout";
+import { MAX_CONTENT_WIDTH, useIsCompactFormFactor } from "@/constants/layout";
 import { WelcomeScreen } from "@/components/welcome-screen";
 import type { Agent } from "@/contexts/session-context";
 import { encodeImages } from "@/utils/encode-images";
@@ -226,6 +226,7 @@ function DraftAgentScreenContent({
     isModelLoading,
     modelError,
     refreshProviderModels,
+    invalidateProviderModels,
     setProviderAndModelFromUser,
     persistFormPreferences,
   } = useAgentFormState({
@@ -235,7 +236,7 @@ function DraftAgentScreenContent({
     isCreateFlow: true,
     onlineServerIds,
   });
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
@@ -1268,6 +1269,7 @@ function DraftAgentScreenContent({
                 onSelectThinkingOption: setThinkingOptionFromUser,
                 features: draftFeatures,
                 onSetFeature: setDraftFeatureValue,
+                onModelSelectorOpen: invalidateProviderModels,
                 disabled: isSubmitting,
               }}
             />

packages/app/src/screens/open-project-screen.tsx

@@ -8,7 +8,7 @@ import { MenuHeader } from "@/components/headers/menu-header";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { usePanelStore } from "@/stores/panel-store";
 import { useSessionStore } from "@/stores/session-store";
-import { isCompactFormFactor, HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE, HEADER_TOP_PADDING_MOBILE } from "@/constants/layout";
+import { useIsCompactFormFactor, HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE, HEADER_TOP_PADDING_MOBILE } from "@/constants/layout";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
@@ -17,7 +17,7 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
   const hasHydrated = useSessionStore((s) => s.sessions[serverId]?.hasHydratedWorkspaces ?? false);
   const hasProjects = useSessionStore((s) => (s.sessions[serverId]?.workspaces?.size ?? 0) > 0);
 
-  const isCompactLayout = isCompactFormFactor();
+  const isCompactLayout = useIsCompactFormFactor();
 
   useEffect(() => {
     if (!isCompactLayout) {

packages/app/src/screens/sessions-screen.tsx

@@ -54,7 +54,7 @@ function SessionsScreenContent({ serverId }: { serverId: string }) {
           <Button
             variant="ghost"
             leftIcon={ChevronLeft}
-            onPress={() => router.navigate(buildHostOpenProjectRoute(serverId) as any)}
+            onPress={() => router.navigate(buildHostOpenProjectRoute(serverId))}
           >
             Back
           </Button>

packages/app/src/screens/settings-screen.tsx

@@ -10,20 +10,22 @@ import {
   Sun,
   Moon,
   Monitor,
+  ChevronDown,
   Globe,
   Settings,
   RotateCw,
   Trash2,
   Server,
-  Palette,
   Keyboard,
   Stethoscope,
   Info,
   Shield,
   Puzzle,
   Blocks,
+  Smartphone,
 } from "lucide-react-native";
-import { useAppSettings, type AppSettings } from "@/hooks/use-settings";
+import { useAppSettings, type AppSettings, type SendBehavior } from "@/hooks/use-settings";
+import { THEME_SWATCHES, type ThemeName } from "@/styles/theme";
 import type { HostProfile, HostConnection } from "@/types/host-connection";
 import { useHosts, useHostMutations } from "@/runtime/host-runtime";
 import { formatConnectionStatus, getConnectionStatusTone } from "@/utils/daemons";
@@ -41,19 +43,20 @@ import { AddHostMethodModal } from "@/components/add-host-method-modal";
 import { AddHostModal } from "@/components/add-host-modal";
 import { PairLinkModal } from "@/components/pair-link-modal";
 import { KeyboardShortcutsSection } from "@/screens/settings/keyboard-shortcuts-section";
-import { NameHostModal } from "@/components/name-host-modal";
 import { Button } from "@/components/ui/button";
 import { SegmentedControl } from "@/components/ui/segmented-control";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { AdaptiveModalSheet, AdaptiveTextInput } from "@/components/adaptive-modal-sheet";
 import { DesktopPermissionsSection } from "@/desktop/components/desktop-permissions-section";
 import { IntegrationsSection } from "@/desktop/components/integrations-section";
 import { LocalDaemonSection } from "@/desktop/components/desktop-updates-section";
+import { PairDeviceSection } from "@/desktop/components/pair-device-section";
 import { isElectronRuntime } from "@/desktop/host";
 import { useDesktopAppUpdater } from "@/desktop/updates/use-desktop-app-updater";
 import { formatVersionWithPrefix } from "@/desktop/updates/desktop-updates";
@@ -62,12 +65,12 @@ import { settingsStyles } from "@/styles/settings";
 import { THINKING_TONE_NATIVE_PCM_BASE64 } from "@/utils/thinking-tone.native-pcm";
 import { useVoiceAudioEngineOptional } from "@/contexts/voice-context";
 import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
-import { isCompactFormFactor } from "@/constants/layout";
+import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { AGENT_PROVIDER_DEFINITIONS } from "@server/server/agent/provider-manifest";
 import { getProviderIcon } from "@/components/provider-icons";
 import { ProviderDiagnosticSheet } from "@/components/provider-diagnostic-sheet";
 import { StatusBadge } from "@/components/ui/status-badge";
-import type { ProviderSnapshotEntry } from "@server/server/agent/agent-sdk-types";
 
 // ---------------------------------------------------------------------------
 // Section definitions
@@ -75,14 +78,15 @@ import type { ProviderSnapshotEntry } from "@server/server/agent/agent-sdk-types
 
 type SettingsSectionId =
   | "hosts"
-  | "appearance"
+  | "general"
   | "shortcuts"
   | "integrations"
   | "providers"
   | "diagnostics"
   | "about"
   | "permissions"
-  | "daemon";
+  | "daemon"
+  | "pair-device";
 
 interface SettingsSectionDef {
   id: SettingsSectionId;
@@ -93,20 +97,21 @@ interface SettingsSectionDef {
 function getSettingsSections(context: { isDesktopApp: boolean }): SettingsSectionDef[] {
   const sections: SettingsSectionDef[] = [
     { id: "hosts", label: "Hosts", icon: Server },
-    { id: "appearance", label: "Appearance", icon: Palette },
-    { id: "shortcuts", label: "Shortcuts", icon: Keyboard },
+    { id: "general", label: "General", icon: Settings },
     { id: "permissions", label: "Permissions", icon: Shield },
   ];
 
   if (context.isDesktopApp) {
     sections.push(
+      { id: "shortcuts", label: "Shortcuts", icon: Keyboard },
       { id: "integrations", label: "Integrations", icon: Puzzle },
+      { id: "pair-device", label: "Pair device", icon: Smartphone },
       { id: "daemon", label: "Daemon", icon: Settings },
+      { id: "providers", label: "Providers", icon: Blocks },
     );
   }
 
   sections.push(
-    { id: "providers", label: "Providers", icon: Blocks },
     { id: "diagnostics", label: "Diagnostics", icon: Stethoscope },
     { id: "about", label: "About", icon: Info },
   );
@@ -200,10 +205,6 @@ interface HostsSectionProps {
   goBackToAddConnectionMethods: () => void;
   setIsDirectHostVisible: (visible: boolean) => void;
   setIsPasteLinkVisible: (visible: boolean) => void;
-  pendingNameHost: { serverId: string; hostname: string | null } | null;
-  setPendingNameHost: (host: { serverId: string; hostname: string | null } | null) => void;
-  pendingNameHostname: string | null;
-  renameHost: (serverId: string, label: string) => Promise<void>;
   pendingRemoveHost: HostProfile | null;
   setPendingRemoveHost: (host: HostProfile | null) => void;
   isRemovingHost: boolean;
@@ -286,38 +287,14 @@ function HostsSection(props: HostsSectionProps) {
         visible={props.isDirectHostVisible}
         onClose={props.closeAddConnectionFlow}
         onCancel={props.goBackToAddConnectionMethods}
-        onSaved={({ serverId, hostname, isNewHost }) => {
-          if (isNewHost) {
-            props.setPendingNameHost({ serverId, hostname });
-          }
-        }}
       />
 
       <PairLinkModal
         visible={props.isPasteLinkVisible}
         onClose={props.closeAddConnectionFlow}
         onCancel={props.goBackToAddConnectionMethods}
-        onSaved={({ serverId, hostname, isNewHost }) => {
-          if (isNewHost) {
-            props.setPendingNameHost({ serverId, hostname });
-          }
-        }}
       />
 
-      {props.pendingNameHost ? (
-        <NameHostModal
-          visible
-          serverId={props.pendingNameHost.serverId}
-          hostname={props.pendingNameHostname}
-          onSkip={() => props.setPendingNameHost(null)}
-          onSave={(label) => {
-            void props.renameHost(props.pendingNameHost!.serverId, label).finally(() => {
-              props.setPendingNameHost(null);
-            });
-          }}
-        />
-      ) : null}
-
       {props.pendingRemoveHost ? (
         <AdaptiveModalSheet
           title="Remove host"
@@ -382,41 +359,119 @@ function HostsSection(props: HostsSectionProps) {
   );
 }
 
-interface AppearanceSectionProps {
+interface GeneralSectionProps {
   settings: AppSettings;
   handleThemeChange: (theme: AppSettings["theme"]) => void;
+  handleSendBehaviorChange: (behavior: SendBehavior) => void;
 }
 
-function AppearanceSection({ settings, handleThemeChange }: AppearanceSectionProps) {
+function ThemeIcon({ theme, size, color }: { theme: AppSettings["theme"]; size: number; color: string }) {
+  switch (theme) {
+    case "light":
+      return <Sun size={size} color={color} />;
+    case "dark":
+      return <Moon size={size} color={color} />;
+    case "auto":
+      return <Monitor size={size} color={color} />;
+    default:
+      return <ThemeSwatch color={THEME_SWATCHES[theme]} size={size} />;
+  }
+}
+
+function ThemeSwatch({ color, size }: { color: string; size: number }) {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: color,
+        borderWidth: 1,
+        borderColor: "rgba(255,255,255,0.15)",
+      }}
+    />
+  );
+}
+
+const THEME_LABELS: Record<AppSettings["theme"], string> = {
+  light: "Light",
+  dark: "Dark",
+  zinc: "Zinc",
+  midnight: "Midnight",
+  claude: "Claude",
+  ghostty: "Ghostty",
+  auto: "System",
+};
+
+function GeneralSection({
+  settings,
+  handleThemeChange,
+  handleSendBehaviorChange,
+}: GeneralSectionProps) {
+  const { theme } = useUnistyles();
+  const iconSize = theme.iconSize.md;
+  const iconColor = theme.colors.foregroundMuted;
+
   return (
     <View style={settingsStyles.section}>
-      <Text style={settingsStyles.sectionTitle}>Appearance</Text>
+      <Text style={settingsStyles.sectionTitle}>General</Text>
       <View style={[settingsStyles.card, styles.audioCard]}>
         <View style={styles.audioRow}>
           <View style={styles.audioRowContent}>
             <Text style={styles.audioRowTitle}>Theme</Text>
           </View>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              style={({ pressed }) => [
+                styles.themeTrigger,
+                pressed && { opacity: 0.85 },
+              ]}
+            >
+              <ThemeIcon theme={settings.theme} size={iconSize} color={iconColor} />
+              <Text style={styles.themeTriggerText}>
+                {THEME_LABELS[settings.theme]}
+              </Text>
+              <ChevronDown size={theme.iconSize.sm} color={iconColor} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="bottom" align="end" width={200}>
+              {(["light", "dark", "auto"] as const).map((t) => (
+                <DropdownMenuItem
+                  key={t}
+                  selected={settings.theme === t}
+                  onSelect={() => handleThemeChange(t)}
+                  leading={<ThemeIcon theme={t} size={iconSize} color={iconColor} />}
+                >
+                  {THEME_LABELS[t]}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              {(["zinc", "midnight", "claude", "ghostty"] as const).map((t) => (
+                <DropdownMenuItem
+                  key={t}
+                  selected={settings.theme === t}
+                  onSelect={() => handleThemeChange(t)}
+                  leading={<ThemeIcon theme={t} size={iconSize} color={iconColor} />}
+                >
+                  {THEME_LABELS[t]}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </View>
+        <View style={styles.audioRow}>
+          <View style={styles.audioRowContent}>
+            <Text style={styles.audioRowTitle}>Default send</Text>
+            <Text style={styles.audioRowSubtitle}>
+              What happens when you press Enter while the agent is running
+            </Text>
+          </View>
           <SegmentedControl
             size="sm"
-            hideLabels={Platform.OS !== "web"}
-            value={settings.theme}
-            onValueChange={handleThemeChange}
+            value={settings.sendBehavior}
+            onValueChange={handleSendBehaviorChange}
             options={[
-              {
-                value: "light",
-                label: "Light",
-                icon: ({ color, size }) => <Sun size={size} color={color} />,
-              },
-              {
-                value: "dark",
-                label: "Dark",
-                icon: ({ color, size }) => <Moon size={size} color={color} />,
-              },
-              {
-                value: "auto",
-                label: "System",
-                icon: ({ color, size }) => <Monitor size={size} color={color} />,
-              },
+              { value: "interrupt", label: "Interrupt" },
+              { value: "queue", label: "Queue" },
             ]}
           />
         </View>
@@ -432,63 +487,70 @@ interface ProvidersSectionProps {
 
 function ProvidersSection({ routeServerId }: ProvidersSectionProps) {
   const { theme } = useUnistyles();
-  const client = useHostRuntimeClient(routeServerId);
   const isConnected = useHostRuntimeIsConnected(routeServerId);
-  const [entries, setEntries] = useState<ProviderSnapshotEntry[]>([]);
-  const [loading, setLoading] = useState(false);
+  const { entries, isLoading, isFetching, refresh } = useProvidersSnapshot(routeServerId);
   const [diagnosticProvider, setDiagnosticProvider] = useState<string | null>(null);
 
-  useEffect(() => {
-    if (!client || !isConnected) {
-      setEntries([]);
-      return;
-    }
-
-    let cancelled = false;
-    setLoading(true);
-    client
-      .getProvidersSnapshot()
-      .then((result) => {
-        if (!cancelled) setEntries(result.entries);
-      })
-      .catch(() => {
-        if (!cancelled) setEntries([]);
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [client, isConnected]);
-
   const hasServer = routeServerId.length > 0;
 
   return (
     <>
       <View style={settingsStyles.section}>
-        <Text style={settingsStyles.sectionTitle}>Providers</Text>
+        <View style={settingsStyles.sectionHeader}>
+          <Text style={settingsStyles.sectionHeaderTitle}>Providers</Text>
+          {hasServer && isConnected ? (
+            <Pressable
+              onPress={refresh}
+              disabled={isFetching}
+              style={[
+                settingsStyles.sectionHeaderLink,
+                isFetching ? { opacity: 0.5 } : null,
+              ]}
+            >
+              <Text
+                style={{
+                  color: theme.colors.primary,
+                  fontSize: theme.fontSize.xs,
+                }}
+              >
+                Refresh
+              </Text>
+            </Pressable>
+          ) : null}
+        </View>
         {!hasServer || !isConnected ? (
           <View style={[settingsStyles.card, styles.emptyCard]}>
             <Text style={styles.emptyText}>Connect to a host to see providers</Text>
           </View>
-        ) : loading ? (
+        ) : isLoading ? (
           <View style={[settingsStyles.card, styles.emptyCard]}>
             <Text style={styles.emptyText}>Loading...</Text>
           </View>
         ) : (
           <View style={[settingsStyles.card, styles.audioCard]}>
             {AGENT_PROVIDER_DEFINITIONS.map((def) => {
-              const entry = entries.find((e) => e.provider === def.id);
+              const entry = entries?.find((e) => e.provider === def.id);
               const status = entry?.status ?? "unavailable";
               const ProviderIcon = getProviderIcon(def.id);
+              const providerError =
+                status === "error" && typeof entry?.error === "string" && entry.error.trim().length > 0
+                  ? entry.error.trim()
+                  : null;
 
               return (
                 <View key={def.id} style={styles.audioRow}>
-                  <View style={[styles.audioRowContent, { flexDirection: "row", alignItems: "center", gap: theme.spacing[2] }]}>
-                    <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foreground} />
-                    <Text style={styles.audioRowTitle}>{def.label}</Text>
+                  <View style={styles.audioRowContent}>
+                    <View
+                      style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing[2] }}
+                    >
+                      <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foreground} />
+                      <Text style={styles.audioRowTitle}>{def.label}</Text>
+                    </View>
+                    {providerError ? (
+                      <Text style={styles.aboutErrorText} numberOfLines={3}>
+                        {providerError}
+                      </Text>
+                    ) : null}
                   </View>
                   <View style={styles.providerActions}>
                     <StatusBadge
@@ -603,7 +665,7 @@ function AboutSection({ appVersionText, isDesktopApp }: AboutSectionProps) {
 interface SettingsSectionContentProps {
   sectionId: SettingsSectionId;
   hostsProps: HostsSectionProps;
-  appearanceProps: AppearanceSectionProps;
+  generalProps: GeneralSectionProps;
   providersProps: ProvidersSectionProps;
   diagnosticsProps: DiagnosticsSectionProps;
   aboutProps: AboutSectionProps;
@@ -615,7 +677,7 @@ interface SettingsSectionContentProps {
 function SettingsSectionContent({
   sectionId,
   hostsProps,
-  appearanceProps,
+  generalProps,
   providersProps,
   diagnosticsProps,
   aboutProps,
@@ -626,8 +688,8 @@ function SettingsSectionContent({
   switch (sectionId) {
     case "hosts":
       return <HostsSection {...hostsProps} />;
-    case "appearance":
-      return <AppearanceSection {...appearanceProps} />;
+    case "general":
+      return <GeneralSection {...generalProps} />;
     case "shortcuts":
       return <KeyboardShortcutsSection />;
     case "providers":
@@ -640,6 +702,8 @@ function SettingsSectionContent({
       return isDesktopApp ? <IntegrationsSection /> : null;
     case "permissions":
       return isDesktopApp ? <DesktopPermissionsSection /> : null;
+    case "pair-device":
+      return isDesktopApp ? <PairDeviceSection /> : null;
     case "daemon":
       return isDesktopApp ? (
         <LocalDaemonSection appVersion={appVersion} showLifecycleControls={isLocalDaemon} />
@@ -802,7 +866,7 @@ function DesktopAppUpdateRow() {
         <Text style={styles.aboutHintText}>{statusText}</Text>
         {availableUpdate?.latestVersion ? (
           <Text style={styles.aboutHintText}>
-            New version available: {formatVersionWithPrefix(availableUpdate.latestVersion)}
+            Ready to install: {formatVersionWithPrefix(availableUpdate.latestVersion)}
           </Text>
         ) : null}
         {errorMessage ? <Text style={styles.aboutErrorText}>{errorMessage}</Text> : null}
@@ -850,10 +914,6 @@ export default function SettingsScreen() {
   const [isAddHostMethodVisible, setIsAddHostMethodVisible] = useState(false);
   const [isDirectHostVisible, setIsDirectHostVisible] = useState(false);
   const [isPasteLinkVisible, setIsPasteLinkVisible] = useState(false);
-  const [pendingNameHost, setPendingNameHost] = useState<{
-    serverId: string;
-    hostname: string | null;
-  } | null>(null);
   const [pendingRemoveHost, setPendingRemoveHost] = useState<HostProfile | null>(null);
   const [isRemovingHost, setIsRemovingHost] = useState(false);
   const [editingDaemon, setEditingDaemon] = useState<HostProfile | null>(null);
@@ -871,19 +931,6 @@ export default function SettingsScreen() {
   const editingDaemonLive = editingServerId
     ? (daemons.find((daemon) => daemon.serverId === editingServerId) ?? null)
     : null;
-  const pendingNameHostname = useSessionStore(
-    useCallback(
-      (state) => {
-        if (!pendingNameHost) return null;
-        return (
-          state.sessions[pendingNameHost.serverId]?.serverInfo?.hostname ??
-          pendingNameHost.hostname ??
-          null
-        );
-      },
-      [pendingNameHost],
-    ),
-  );
 
   useEffect(() => {
     return () => {
@@ -990,6 +1037,13 @@ export default function SettingsScreen() {
     [updateSettings],
   );
 
+  const handleSendBehaviorChange = useCallback(
+    (behavior: SendBehavior) => {
+      void updateSettings({ sendBehavior: behavior });
+    },
+    [updateSettings],
+  );
+
   const handlePlaybackTest = useCallback(async () => {
     if (!voiceAudioEngine || isPlaybackTestRunning) {
       return;
@@ -1019,7 +1073,7 @@ export default function SettingsScreen() {
     }
   }, [isPlaybackTestRunning, voiceAudioEngine]);
 
-  const isCompactLayout = isCompactFormFactor();
+  const isCompactLayout = useIsCompactFormFactor();
   const sections = getSettingsSections({ isDesktopApp });
 
   const hostsProps: HostsSectionProps = {
@@ -1036,10 +1090,6 @@ export default function SettingsScreen() {
     goBackToAddConnectionMethods,
     setIsDirectHostVisible,
     setIsPasteLinkVisible,
-    pendingNameHost,
-    setPendingNameHost,
-    pendingNameHostname,
-    renameHost,
     pendingRemoveHost,
     setPendingRemoveHost,
     isRemovingHost,
@@ -1056,9 +1106,10 @@ export default function SettingsScreen() {
     isMountedRef,
   };
 
-  const appearanceProps: AppearanceSectionProps = {
+  const generalProps: GeneralSectionProps = {
     settings,
     handleThemeChange,
+    handleSendBehaviorChange,
   };
 
   const diagnosticsProps: DiagnosticsSectionProps = {
@@ -1079,7 +1130,7 @@ export default function SettingsScreen() {
 
   const sectionContentProps: Omit<SettingsSectionContentProps, "sectionId"> = {
     hostsProps,
-    appearanceProps,
+    generalProps,
     providersProps,
     diagnosticsProps,
     aboutProps,
@@ -1814,6 +1865,20 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.medium,
   },
+  themeTrigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    paddingVertical: theme.spacing[1],
+    paddingHorizontal: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+  },
+  themeTriggerText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+  },
   disabled: {
     opacity: theme.opacity[50],
   },
@@ -1888,6 +1953,11 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     fontSize: theme.fontSize.base,
   },
+  audioRowSubtitle: {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.fontSize.sm,
+    marginTop: theme.spacing[1],
+  },
   providerActions: {
     flexDirection: "row",
     alignItems: "center",

packages/app/src/screens/startup-splash-screen.tsx

@@ -38,6 +38,28 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "flex-start",
     paddingTop: theme.spacing[16],
   },
+  errorScreen: {
+    position: "relative",
+    flex: 1,
+    backgroundColor: theme.colors.surface0,
+  },
+  errorScrollView: {
+    flex: 1,
+    ...(Platform.OS === "web"
+      ? {
+          overflowX: "auto",
+          overflowY: "auto",
+        }
+      : null),
+  },
+  errorScrollContent: {
+    flexGrow: 1,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    paddingHorizontal: theme.spacing[8],
+    paddingVertical: theme.spacing[8],
+    paddingTop: theme.spacing[16],
+  },
   centeredContent: {
     alignItems: "center",
     justifyContent: "center",
@@ -255,67 +277,73 @@ export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps
   }
 
   return (
-    <View style={[styles.container, styles.containerError]}>
+    <View style={styles.errorScreen}>
       <TitlebarDragRegion />
-      <View style={styles.errorContent}>
-        <View style={styles.errorHeader}>
-          <PaseoLogo size={64} />
-          <Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
+      <ScrollView
+        style={styles.errorScrollView}
+        contentContainerStyle={styles.errorScrollContent}
+        showsVerticalScrollIndicator
+      >
+        <View style={styles.errorContent}>
+          <View style={styles.errorHeader}>
+            <PaseoLogo size={64} />
+            <Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
+          </View>
+
+          <Text style={styles.errorDescription}>
+            The local server failed to start. If this keeps happening, please report the issue on GitHub and include the logs below.
+          </Text>
+
+          <Text style={styles.errorMessage}>
+            {bootstrapState.error}
+          </Text>
+
+          {daemonLogs?.logPath ? <Text style={styles.logsMeta}>{daemonLogs.logPath}</Text> : null}
+
+          <View style={styles.logsContainer}>
+            <ScrollView
+              style={styles.logsScroll}
+              contentContainerStyle={styles.logsContent}
+              showsVerticalScrollIndicator
+            >
+              <Text selectable style={styles.logsText}>
+                {logsText}
+              </Text>
+            </ScrollView>
+          </View>
+
+          <View style={styles.actionRow}>
+            <Button
+              variant="secondary"
+              leftIcon={<Copy size={16} color={theme.colors.foreground} />}
+              onPress={handleCopyLogs}
+            >
+              Copy logs
+            </Button>
+            <Button
+              variant="outline"
+              leftIcon={<TriangleAlert size={16} color={theme.colors.foreground} />}
+              onPress={() => void openExternalUrl(GITHUB_ISSUE_URL)}
+            >
+              Open GitHub issue
+            </Button>
+            <Button
+              variant="outline"
+              leftIcon={<BookOpen size={16} color={theme.colors.foreground} />}
+              onPress={() => void openExternalUrl(DOCS_URL)}
+            >
+              Docs
+            </Button>
+            <Button
+              variant="default"
+              leftIcon={<RotateCw size={16} color={theme.colors.palette.white} />}
+              onPress={bootstrapState.retry}
+            >
+              Retry
+            </Button>
+          </View>
         </View>
-
-        <Text style={styles.errorDescription}>
-          The local server failed to start. If this keeps happening, please report the issue on GitHub and include the logs below.
-        </Text>
-
-        <Text style={styles.errorMessage}>
-          {bootstrapState.error}
-        </Text>
-
-        {daemonLogs?.logPath ? <Text style={styles.logsMeta}>{daemonLogs.logPath}</Text> : null}
-
-        <View style={styles.logsContainer}>
-          <ScrollView
-            style={styles.logsScroll}
-            contentContainerStyle={styles.logsContent}
-            showsVerticalScrollIndicator
-          >
-            <Text selectable style={styles.logsText}>
-              {logsText}
-            </Text>
-          </ScrollView>
-        </View>
-
-        <View style={styles.actionRow}>
-          <Button
-            variant="secondary"
-            leftIcon={<Copy size={16} color={theme.colors.foreground} />}
-            onPress={handleCopyLogs}
-          >
-            Copy logs
-          </Button>
-          <Button
-            variant="outline"
-            leftIcon={<TriangleAlert size={16} color={theme.colors.foreground} />}
-            onPress={() => void openExternalUrl(GITHUB_ISSUE_URL)}
-          >
-            Open GitHub issue
-          </Button>
-          <Button
-            variant="outline"
-            leftIcon={<BookOpen size={16} color={theme.colors.foreground} />}
-            onPress={() => void openExternalUrl(DOCS_URL)}
-          >
-            Docs
-          </Button>
-          <Button
-            variant="default"
-            leftIcon={<RotateCw size={16} color={theme.colors.palette.white} />}
-            onPress={bootstrapState.retry}
-          >
-            Retry
-          </Button>
-        </View>
-      </View>
+      </ScrollView>
     </View>
   );
 }

packages/app/src/screens/workspace/workspace-bulk-close.test.ts

@@ -73,7 +73,7 @@ describe("workspace bulk close helpers", () => {
     );
   });
 
-  it("uses one mixed closeItems RPC for agent and terminal tabs, then applies local cleanup", async () => {
+  it("closes all tabs immediately and fires one mixed closeItems RPC in the background", async () => {
     const groups = classifyBulkClosableTabs([
       makeAgentTab("a1"),
       makeTerminalTab("t1"),
@@ -91,7 +91,7 @@ describe("workspace bulk close helpers", () => {
       requestId: "req-1",
     }));
 
-    const result = await closeBulkWorkspaceTabs({
+    await closeBulkWorkspaceTabs({
       groups,
       client: { closeItems },
       closeTab: async (tabId, action) => {
@@ -109,23 +109,21 @@ describe("workspace bulk close helpers", () => {
       agentIds: ["a1"],
       terminalIds: ["t1", "t2"],
     });
-    expect(result).toEqual({
-      agents: [{ agentId: "a1", archivedAt: "2026-04-01T04:00:00.000Z" }],
-      terminals: [
-        { terminalId: "t1", success: true },
-        { terminalId: "t2", success: false },
-      ],
-      requestId: "req-1",
-    });
-    expect(closedTabIds).toEqual(["agent_a1", "terminal_t1", "file_/repo/README.md"]);
+    expect(closedTabIds).toEqual([
+      "agent_a1",
+      "terminal_t1",
+      "terminal_t2",
+      "file_/repo/README.md",
+    ]);
     expect(cleanupCalls).toEqual([
       { tabId: "agent_a1", target: { kind: "agent", agentId: "a1" } },
       { tabId: "terminal_t1", target: { kind: "terminal", terminalId: "t1" } },
+      { tabId: "terminal_t2", target: { kind: "terminal", terminalId: "t2" } },
       { tabId: "file_/repo/README.md" },
     ]);
   });
 
-  it("still closes passive tabs when the mixed closeItems RPC fails", async () => {
+  it("still closes all tabs when the mixed closeItems RPC fails", async () => {
     const groups = classifyBulkClosableTabs([
       makeAgentTab("a1"),
       makeTerminalTab("t1"),
@@ -135,7 +133,7 @@ describe("workspace bulk close helpers", () => {
     const cleanupCalls: Array<{ tabId: string; target?: WorkspaceTabDescriptor["target"] }> = [];
     const warn = vi.fn();
 
-    const result = await closeBulkWorkspaceTabs({
+    await closeBulkWorkspaceTabs({
       groups,
       client: {
         closeItems: async () => {
@@ -153,9 +151,14 @@ describe("workspace bulk close helpers", () => {
       logLabel: "others",
     });
 
+    await Promise.resolve();
+
     expect(warn).toHaveBeenCalledTimes(1);
-    expect(result).toBeNull();
-    expect(closedTabIds).toEqual(["file_/repo/README.md"]);
-    expect(cleanupCalls).toEqual([{ tabId: "file_/repo/README.md" }]);
+    expect(closedTabIds).toEqual(["agent_a1", "terminal_t1", "file_/repo/README.md"]);
+    expect(cleanupCalls).toEqual([
+      { tabId: "agent_a1", target: { kind: "agent", agentId: "a1" } },
+      { tabId: "terminal_t1", target: { kind: "terminal", terminalId: "t1" } },
+      { tabId: "file_/repo/README.md" },
+    ]);
   });
 });

packages/app/src/screens/workspace/workspace-bulk-close.ts

@@ -7,8 +7,6 @@ export type BulkClosableTabGroups = {
   otherTabs: Array<{ tabId: string }>;
 };
 
-type CloseItemsPayload = Awaited<ReturnType<DaemonClient["closeItems"]>>;
-
 interface CloseWorkspaceTabWithCleanupInput {
   tabId: string;
   target?: WorkspaceTabDescriptor["target"];
@@ -68,47 +66,27 @@ export function buildBulkCloseConfirmationMessage(input: BulkClosableTabGroups):
   return `This will archive ${agentTabs.length} agent(s).`;
 }
 
-function toSuccessfulAgentIds(payload: CloseItemsPayload | null): Set<string> {
-  return new Set(payload?.agents.map((agent) => agent.agentId) ?? []);
-}
-
-function toSuccessfulTerminalIds(payload: CloseItemsPayload | null): Set<string> {
-  return new Set(
-    payload?.terminals.filter((terminal) => terminal.success).map((terminal) => terminal.terminalId) ??
-      [],
-  );
-}
-
-export async function closeBulkWorkspaceTabs(
-  input: CloseBulkWorkspaceTabsInput,
-): Promise<CloseItemsPayload | null> {
+export async function closeBulkWorkspaceTabs(input: CloseBulkWorkspaceTabsInput): Promise<void> {
   const { client, groups, closeTab, closeWorkspaceTabWithCleanup, logLabel, warn } = input;
   const hasDestructiveTabs = groups.agentTabs.length > 0 || groups.terminalTabs.length > 0;
-  let payload: CloseItemsPayload | null = null;
 
   if (hasDestructiveTabs && client) {
-    try {
-      payload = await client.closeItems({
+    void client
+      .closeItems({
         agentIds: groups.agentTabs.map((tab) => tab.agentId),
         terminalIds: groups.terminalTabs.map((tab) => tab.terminalId),
+      })
+      .catch((error) => {
+        warn?.(`[WorkspaceScreen] Failed to bulk close tabs ${logLabel}`, { error });
       });
-    } catch (error) {
-      warn?.(`[WorkspaceScreen] Failed to bulk close tabs ${logLabel}`, { error });
-    }
   } else if (hasDestructiveTabs) {
     warn?.(`[WorkspaceScreen] Failed to bulk close tabs ${logLabel}`, {
       error: new Error("Daemon client not available"),
     });
   }
 
-  const successfulAgentIds = toSuccessfulAgentIds(payload);
-  const successfulTerminalIds = toSuccessfulTerminalIds(payload);
-
   for (const { tabId, agentId } of groups.agentTabs) {
-    if (!successfulAgentIds.has(agentId)) {
-      continue;
-    }
-    await closeTab(tabId, async () => {
+    void closeTab(tabId, async () => {
       closeWorkspaceTabWithCleanup({
         tabId,
         target: { kind: "agent", agentId },
@@ -117,10 +95,7 @@ export async function closeBulkWorkspaceTabs(
   }
 
   for (const { tabId, terminalId } of groups.terminalTabs) {
-    if (!successfulTerminalIds.has(terminalId)) {
-      continue;
-    }
-    await closeTab(tabId, async () => {
+    void closeTab(tabId, async () => {
       closeWorkspaceTabWithCleanup({
         tabId,
         target: { kind: "terminal", terminalId },
@@ -129,10 +104,8 @@ export async function closeBulkWorkspaceTabs(
   }
 
   for (const { tabId } of groups.otherTabs) {
-    await closeTab(tabId, async () => {
+    void closeTab(tabId, async () => {
       closeWorkspaceTabWithCleanup({ tabId });
     });
   }
-
-  return payload;
 }

packages/app/src/screens/workspace/workspace-draft-agent-tab.tsx

@@ -80,6 +80,7 @@ export function WorkspaceDraftAgentTab({
     availableThinkingOptions,
     isModelLoading,
     setProviderAndModelFromUser,
+    invalidateProviderModels,
     persistFormPreferences,
   } = useAgentFormState({
     initialServerId: serverId,
@@ -373,6 +374,7 @@ export function WorkspaceDraftAgentTab({
               features: draftFeatures,
               onSetFeature: handleSetFeatureWithFocus,
               onDropdownClose: () => focusInputRef.current?.(),
+              onModelSelectorOpen: invalidateProviderModels,
               disabled: isSubmitting,
             }}
           />

packages/app/src/screens/workspace/workspace-open-in-editor-button.tsx

@@ -0,0 +1,246 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { ActivityIndicator, Platform, Pressable, Text, View } from "react-native";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Check, ChevronDown } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type {
+  EditorTargetDescriptorPayload,
+  EditorTargetId,
+} from "@server/shared/messages";
+import { EditorAppIcon } from "@/components/icons/editor-app-icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/contexts/toast-context";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import {
+  resolvePreferredEditorId,
+  usePreferredEditor,
+} from "@/hooks/use-preferred-editor";
+import { isAbsolutePath } from "@/utils/path";
+
+interface WorkspaceOpenInEditorButtonProps {
+  serverId: string;
+  cwd: string;
+}
+
+export function WorkspaceOpenInEditorButton({
+  serverId,
+  cwd,
+}: WorkspaceOpenInEditorButtonProps) {
+  const { theme } = useUnistyles();
+  const toast = useToast();
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const { preferredEditorId, updatePreferredEditor } = usePreferredEditor();
+
+  const shouldLoadEditors =
+    Platform.OS === "web" &&
+    Boolean(client && isConnected) &&
+    cwd.trim().length > 0 &&
+    isAbsolutePath(cwd);
+
+  const availableEditorsQuery = useQuery<EditorTargetDescriptorPayload[]>({
+    queryKey: ["available-editors", serverId],
+    enabled: shouldLoadEditors,
+    staleTime: 60_000,
+    retry: false,
+    queryFn: async () => {
+      if (!client) {
+        return [];
+      }
+      try {
+        const payload = await client.listAvailableEditors();
+        return payload.error ? [] : payload.editors;
+      } catch {
+        return [];
+      }
+    },
+  });
+
+  const availableEditors = availableEditorsQuery.data ?? [];
+  const availableEditorIds = useMemo(
+    () => availableEditors.map((editor: EditorTargetDescriptorPayload) => editor.id),
+    [availableEditors],
+  );
+  const effectivePreferredEditorId = useMemo(
+    () => resolvePreferredEditorId(availableEditorIds, preferredEditorId),
+    [availableEditorIds, preferredEditorId],
+  );
+  const primaryOption =
+    availableEditors.find(
+      (editor: EditorTargetDescriptorPayload) => editor.id === effectivePreferredEditorId,
+    ) ?? null;
+
+  useEffect(() => {
+    if (!effectivePreferredEditorId || effectivePreferredEditorId === preferredEditorId) {
+      return;
+    }
+    void updatePreferredEditor(effectivePreferredEditorId).catch(() => undefined);
+  }, [effectivePreferredEditorId, preferredEditorId, updatePreferredEditor]);
+
+  const openMutation = useMutation({
+    mutationFn: async (editorId: EditorTargetId) => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+      const payload = await client.openInEditor(cwd, editorId);
+      if (payload.error) {
+        throw new Error(payload.error);
+      }
+      return editorId;
+    },
+    onError: (error: unknown) => {
+      toast.error(error instanceof Error ? error.message : "Failed to open in editor");
+    },
+  });
+
+  const handleOpenEditor = useCallback(
+    (editorId: EditorTargetId) => {
+      void updatePreferredEditor(editorId).catch(() => undefined);
+      openMutation.mutate(editorId);
+    },
+    [openMutation, updatePreferredEditor],
+  );
+
+  if (!shouldLoadEditors || !primaryOption || availableEditors.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.splitButton}>
+        <Pressable
+          testID="workspace-open-in-editor-primary"
+          style={({ hovered, pressed }) => [
+            styles.splitButtonPrimary,
+            (hovered || pressed) && styles.splitButtonPrimaryHovered,
+            openMutation.isPending && styles.splitButtonPrimaryDisabled,
+          ]}
+          onPress={() => handleOpenEditor(primaryOption.id)}
+          disabled={openMutation.isPending}
+          accessibilityRole="button"
+          accessibilityLabel={`Open workspace in ${primaryOption.label}`}
+        >
+          {openMutation.isPending ? (
+            <ActivityIndicator
+              size="small"
+              color={theme.colors.foreground}
+              style={styles.splitButtonSpinnerOnly}
+            />
+          ) : (
+            <View style={styles.splitButtonContent}>
+              <EditorAppIcon
+                editorId={primaryOption.id}
+                size={16}
+                color={theme.colors.foregroundMuted}
+              />
+              <Text style={styles.splitButtonText}>Open</Text>
+            </View>
+          )}
+        </Pressable>
+        {availableEditors.length > 1 ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              testID="workspace-open-in-editor-caret"
+              style={({ hovered, pressed, open }) => [
+                styles.splitButtonCaret,
+                (hovered || pressed || open) && styles.splitButtonCaretHovered,
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel="Choose editor"
+            >
+              <ChevronDown size={16} color={theme.colors.foregroundMuted} />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              minWidth={148}
+              maxWidth={176}
+              testID="workspace-open-in-editor-menu"
+            >
+              {availableEditors.map((editor: EditorTargetDescriptorPayload) => (
+                <DropdownMenuItem
+                  key={editor.id}
+                  testID={`workspace-open-in-editor-item-${editor.id}`}
+                  leading={
+                    <EditorAppIcon
+                      editorId={editor.id}
+                      size={16}
+                      color={theme.colors.foregroundMuted}
+                    />
+                  }
+                  trailing={
+                    editor.id === effectivePreferredEditorId
+                      ? <Check size={16} color={theme.colors.foregroundMuted} />
+                      : undefined
+                  }
+                  onSelect={() => handleOpenEditor(editor.id)}
+                >
+                  {editor.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+    flexShrink: 0,
+  },
+  splitButton: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    borderRadius: theme.borderRadius.md,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    overflow: "hidden",
+  },
+  splitButtonPrimary: {
+    paddingLeft: theme.spacing[3],
+    paddingRight: 10,
+    paddingVertical: theme.spacing[1],
+    justifyContent: "center",
+    position: "relative",
+  },
+  splitButtonPrimaryHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  splitButtonPrimaryDisabled: {
+    opacity: 0.6,
+  },
+  splitButtonText: {
+    fontSize: theme.fontSize.sm,
+    lineHeight: theme.fontSize.sm * 1.5,
+    color: theme.colors.foreground,
+    fontWeight: theme.fontWeight.normal,
+  },
+  splitButtonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[2],
+  },
+  splitButtonSpinnerOnly: {
+    transform: [{ scale: 0.8 }],
+  },
+  splitButtonCaret: {
+    width: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    borderLeftWidth: theme.borderWidth[1],
+    borderLeftColor: theme.colors.borderAccent,
+  },
+  splitButtonCaretHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+}));

packages/app/src/screens/workspace/workspace-screen.tsx

@@ -34,6 +34,7 @@ import invariant from "tiny-invariant";
 import { SidebarMenuToggle } from "@/components/headers/menu-header";
 import { HeaderToggleButton } from "@/components/headers/header-toggle-button";
 import { ScreenHeader } from "@/components/headers/screen-header";
+import { BranchSwitcher } from "@/components/branch-switcher";
 import { Combobox, type ComboboxOption } from "@/components/ui/combobox";
 import { Shortcut } from "@/components/ui/shortcut";
 import {
@@ -48,6 +49,7 @@ import { ExplorerSidebar } from "@/components/explorer-sidebar";
 import { SplitContainer } from "@/components/split-container";
 import { SourceControlPanelIcon } from "@/components/icons/source-control-panel-icon";
 import { WorkspaceGitActions } from "@/screens/workspace/workspace-git-actions";
+import { WorkspaceOpenInEditorButton } from "@/screens/workspace/workspace-open-in-editor-button";
 import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
 import { useToast } from "@/contexts/toast-context";
 import { useExplorerOpenGesture } from "@/hooks/use-explorer-open-gesture";
@@ -78,7 +80,8 @@ import {
 import type { ListTerminalsResponse } from "@server/shared/messages";
 import { upsertTerminalListEntry } from "@/utils/terminal-list";
 import { confirmDialog } from "@/utils/confirm-dialog";
-import { applyArchivedAgentCloseResults, useArchiveAgent } from "@/hooks/use-archive-agent";
+import { useArchiveAgent } from "@/hooks/use-archive-agent";
+import { useBranchSwitcher } from "@/hooks/use-branch-switcher";
 import { useStableEvent } from "@/hooks/use-stable-event";
 import { buildProviderCommand } from "@/utils/provider-command-templates";
 import { generateDraftId } from "@/stores/draft-keys";
@@ -115,7 +118,7 @@ import {
   closeBulkWorkspaceTabs,
 } from "@/screens/workspace/workspace-bulk-close";
 import { findAdjacentPane } from "@/utils/split-navigation";
-import { isCompactFormFactor, supportsDesktopPaneSplits } from "@/constants/layout";
+import { useIsCompactFormFactor, supportsDesktopPaneSplits } from "@/constants/layout";
 
 const TERMINALS_QUERY_STALE_TIME = 5_000;
 const NEW_TAB_AGENT_OPTION_ID = "__new_tab_agent__";
@@ -590,7 +593,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   const insets = useSafeAreaInsets();
   const mainBackgroundColor = theme.colors.surfaceWorkspace;
   const toast = useToast();
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
 
   const normalizedServerId = trimNonEmpty(decodeSegment(serverId)) ?? "";
@@ -758,6 +761,24 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     checkoutQuery.data?.isGit && checkoutQuery.data.currentBranch !== "HEAD"
       ? trimNonEmpty(checkoutQuery.data.currentBranch)
       : null;
+
+  const {
+    branchOptions,
+    isOpen: isBranchSwitcherOpen,
+    setIsOpen: setIsBranchSwitcherOpen,
+    handleBranchSelect,
+    invalidateStashAndCheckout,
+  } = useBranchSwitcher({
+    client,
+    normalizedServerId,
+    normalizedWorkspaceId,
+    currentBranchName,
+    isGitCheckout,
+    isConnected,
+    toast,
+    queryClient,
+  });
+
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
   const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
@@ -1213,10 +1234,6 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           return;
         }
 
-        await killTerminalAsync(terminalId);
-        setHoveredTabKey((current) => (current === tabId ? null : current));
-        setHoveredCloseTabKey((current) => (current === tabId ? null : current));
-
         queryClient.setQueryData<ListTerminalsPayload>(terminalsQueryKey, (current) => {
           if (!current) {
             return current;
@@ -1226,13 +1243,18 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
             terminals: current.terminals.filter((terminal) => terminal.id !== terminalId),
           };
         });
-
+        setHoveredTabKey((current) => (current === tabId ? null : current));
+        setHoveredCloseTabKey((current) => (current === tabId ? null : current));
         if (persistenceKey) {
           closeWorkspaceTabWithCleanup({
             tabId,
             target: { kind: "terminal", terminalId },
           });
         }
+
+        void killTerminalAsync(terminalId).catch(() => {
+          void queryClient.invalidateQueries({ queryKey: terminalsQueryKey });
+        });
       });
     },
     [
@@ -1253,18 +1275,22 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           return;
         }
 
-        const confirmed = await confirmDialog({
-          title: "Archive agent?",
-          message: "This closes the tab and archives the agent.",
-          confirmLabel: "Archive",
-          cancelLabel: "Cancel",
-          destructive: true,
-        });
-        if (!confirmed) {
-          return;
+        const agent =
+          useSessionStore.getState().sessions[normalizedServerId]?.agents?.get(agentId) ?? null;
+
+        if (agent?.status !== "idle") {
+          const confirmed = await confirmDialog({
+            title: "Archive agent?",
+            message: "This closes the tab and archives the agent.",
+            confirmLabel: "Archive",
+            cancelLabel: "Cancel",
+            destructive: true,
+          });
+          if (!confirmed) {
+            return;
+          }
         }
 
-        await archiveAgent({ serverId: normalizedServerId, agentId });
         setHoveredTabKey((current) => (current === tabId ? null : current));
         setHoveredCloseTabKey((current) => (current === tabId ? null : current));
         if (persistenceKey) {
@@ -1273,6 +1299,8 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
             target: { kind: "agent", agentId },
           });
         }
+
+        void archiveAgent({ serverId: normalizedServerId, agentId });
       });
     },
     [archiveAgent, closeTab, closeWorkspaceTabWithCleanup, normalizedServerId, persistenceKey],
@@ -1417,7 +1445,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
         return;
       }
 
-      const closeItemsPayload = await closeBulkWorkspaceTabs({
+      await closeBulkWorkspaceTabs({
         client,
         groups,
         closeTab,
@@ -1433,31 +1461,6 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
         },
       });
 
-      if (closeItemsPayload) {
-        for (const terminal of closeItemsPayload.terminals) {
-          if (!terminal.success) {
-            continue;
-          }
-          queryClient.setQueryData<ListTerminalsPayload>(terminalsQueryKey, (current) => {
-            if (!current) {
-              return current;
-            }
-            return {
-              ...current,
-              terminals: current.terminals.filter((entry) => entry.id !== terminal.terminalId),
-            };
-          });
-        }
-
-        if (normalizedServerId) {
-          applyArchivedAgentCloseResults({
-            queryClient,
-            serverId: normalizedServerId,
-            results: closeItemsPayload.agents,
-          });
-        }
-      }
-
       const closedKeys = new Set(tabsToClose.map((tab) => tab.key));
       setHoveredTabKey((current) => (current && closedKeys.has(current) ? null : current));
       setHoveredCloseTabKey((current) => (current && closedKeys.has(current) ? null : current));
@@ -1466,10 +1469,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       client,
       closeTab,
       closeWorkspaceTabWithCleanup,
-      normalizedServerId,
       persistenceKey,
-      queryClient,
-      terminalsQueryKey,
     ],
   );
 
@@ -1968,13 +1968,14 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                     </>
                   ) : (
                     <>
-                      <Text
-                        testID="workspace-header-title"
-                        style={styles.headerTitle}
-                        numberOfLines={1}
-                      >
-                        {workspaceHeader.title}
-                      </Text>
+                      <BranchSwitcher
+                        currentBranchName={currentBranchName}
+                        title={workspaceHeader.title}
+                        branchOptions={branchOptions}
+                        isOpen={isBranchSwitcherOpen}
+                        onOpenChange={setIsBranchSwitcherOpen}
+                        onBranchSelect={handleBranchSelect}
+                      />
                       <Text
                         testID="workspace-header-subtitle"
                         style={styles.headerProjectTitle}
@@ -2045,6 +2046,12 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
             }
             right={
               <View style={styles.headerRight}>
+                {!isMobile ? (
+                  <WorkspaceOpenInEditorButton
+                    serverId={normalizedServerId}
+                    cwd={normalizedWorkspaceId}
+                  />
+                ) : null}
                 {!isMobile && isGitCheckout ? (
                   <>
                     <WorkspaceGitActions
@@ -2364,12 +2371,12 @@ const styles = StyleSheet.create((theme) => ({
   diffStatAdditions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   diffStatDeletions: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   newTabActions: {
     flexDirection: "row",

packages/app/src/screens/workspace/workspace-tab-menu.test.ts

@@ -39,10 +39,10 @@ describe("buildWorkspaceTabMenuEntries", () => {
     expect(entries.filter((entry) => entry.kind === "item").map((entry) => entry.label)).toEqual([
       "Copy resume command",
       "Copy agent id",
-      "Reload agent",
       "Close to the left",
       "Close to the right",
       "Close other tabs",
+      "Reload agent",
       "Close",
     ]);
   });
@@ -66,10 +66,10 @@ describe("buildWorkspaceTabMenuEntries", () => {
     expect(entries.filter((entry) => entry.kind === "item").map((entry) => entry.label)).toEqual([
       "Copy resume command",
       "Copy agent id",
-      "Reload agent",
       "Close tabs above",
       "Close tabs below",
       "Close other tabs",
+      "Reload agent",
       "Close",
     ]);
   });

packages/app/src/screens/workspace/workspace-tab-menu.ts

@@ -135,17 +135,6 @@ export function buildWorkspaceTabMenuEntries(
         void onCopyAgentId(agentId);
       },
     });
-    entries.push({
-      kind: "item",
-      key: "reload-agent",
-      label: "Reload agent",
-      icon: "rotate-cw",
-      tooltip: "Reload agent to update skills, MCPs or login status.",
-      testID: `${menuTestIDBase}-reload-agent`,
-      onSelect: () => {
-        void onReloadAgent(agentId);
-      },
-    });
     entries.push({
       kind: "separator",
       key: "copy-separator",
@@ -185,6 +174,20 @@ export function buildWorkspaceTabMenuEntries(
       void onCloseOtherTabs(tab.tabId);
     },
   });
+  if (tab.target.kind === "agent") {
+    const { agentId } = tab.target;
+    entries.push({
+      kind: "item",
+      key: "reload-agent",
+      label: "Reload agent",
+      icon: "rotate-cw",
+      tooltip: "Reload agent to update skills, MCPs or login status.",
+      testID: `${menuTestIDBase}-reload-agent`,
+      onSelect: () => {
+        void onReloadAgent(agentId);
+      },
+    });
+  }
   entries.push({
     kind: "item",
     key: "close",