chore(release): cut 0.1.54

xterm.js sends plain \r for Enter regardless of modifiers. Intercept
modified Enter in the custom key handler so it routes through CSI u
encoding (Kitty keyboard protocol), which Claude Code uses for
Shift+Enter newlines.

.github/workflows/ci.yml

@@ -0,0 +1,184 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+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: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
+      - 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: Build server dependency
+        run: npm run build --workspace=@getpaseo/server
+
+      - name: Install agent CLIs for provider tests
+        run: npm install -g @openai/codex@0.105.0 opencode-ai
+
+      - 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: Install agent CLIs for provider tests
+        run: npm install -g @openai/codex@0.105.0 opencode-ai
+
+      - 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,5 +1,175 @@
 # Changelog
 
+## 0.1.54 - 2026-04-12
+
+### Added
+- Inline image previews in agent messages — screenshots and images generated by agents render directly in the conversation instead of showing as raw markdown links.
+
+### Improved
+- Paseo tools are no longer injected into agents by default — opt in from Settings when you need agent-to-agent orchestration.
+- Agent provider and mode are now resolved server-side, so CLI commands like `paseo run` use consistent defaults without client-side lookups.
+
+### Fixed
+- Shift+Enter now correctly inserts a newline in agent terminal input instead of submitting.
+- Windows: MCP configuration is no longer mangled when spawning Claude agents.
+- Branch ahead/behind count no longer errors for branches with no remote tracking branch.
+
+## 0.1.53 - 2026-04-12
+
+### Added
+- Agents get Paseo tools automatically — every new agent gets access to terminals, schedules, worktrees, and other agents through MCP. Toggle it off in Settings under "Inject Paseo tools".
+- Git pull — pull remote changes directly from the workspace header. Promoted to the primary action when your branch is behind origin.
+- Child agent notifications — parent agents are automatically notified when a child agent finishes, errors, or needs permission approval.
+- Agent reload — `paseo agent reload` restarts an agent's underlying process from the CLI.
+- Middle-click to close tabs on desktop.
+- Keyboard shortcut to cycle themes.
+
+### Improved
+- Unavailable git actions now explain why in a toast instead of being silently greyed out.
+- Streaming markdown on mobile renders significantly faster.
+- Sidebar, branch switcher, and agent panel no longer re-render unnecessarily — noticeable on large workspaces.
+- Paseo tool calls in agent timelines show the Paseo logo and human-readable names.
+- Relay and pairing URLs are stripped from daemon logs.
+
+### Fixed
+- Closed agent tabs no longer reappear after reconnecting.
+- Desktop notification badge counts match across all workspaces.
+- Host switcher status syncs correctly when switching between hosts.
+
+## 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
+- 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
+
+### Added
+- Provider diagnostics — tap a provider in Settings to see binary path, version, model count, and status at a glance. Helps troubleshoot why an agent type isn't available.
+- Provider snapshot system — daemon now pushes real-time provider availability and model lists to the app, replacing the old poll-based approach. Models and modes update live as providers come online or go offline.
+- Codex question handling — Codex agents can now ask the user questions mid-session (e.g. "which file?") and receive answers inline, matching the Claude Code question flow.
+- Reload tab action — right-click a workspace tab to reload its agent list without restarting the app.
+
+### Improved
+- Model selector redesigned — grouped by provider with status badges, search, and better touch targets on mobile.
+- Enter key now submits question card answers and confirms dictation, matching the expected keyboard flow.
+- Removed noisy agent lifecycle toasts that fired on every state change.
+
+### Fixed
+- Desktop app now resolves the user's full login shell environment at startup, fixing tools like `codex`, `node`, `bun`, and `direnv` not being found when Paseo is launched from Finder or Dock. Terminals spawned by Paseo now inherit the same PATH and environment variables as a normal terminal session. Approach adapted from VS Code's battle-tested shell environment resolution.
+- Input field on running agent screens now correctly receives keyboard focus.
+- Mobile model selector alignment and sizing.
+
+## 0.1.47 - 2026-04-05
+
+### Fixed
+- Voice TTS in Electron — sherpa now requests copied buffers and the voice MCP bridge sets `ELECTRON_RUN_AS_NODE`, preventing "external buffers not allowed" crashes.
+- QR pairing in desktop — CLI JSON output parsing now tolerates Node deprecation warnings in stdout.
+- STT segment race condition — segment ID and audio buffer are snapshotted before the async transcription call, so rapid commits no longer interleave.
+- Per-host "Add connection" button removed — it blocked multi-host setups by scoping new connections to a single server.
+
+## 0.1.46 - 2026-04-04
+
+### Fixed
+- Voice activation in packaged builds — Silero VAD model is now copied out of the Electron asar archive so native code can read it.
+- App version sent in probe client hello so the daemon's version gate no longer hides Pi/Copilot from reconnected sessions.
+- `worktreeRoot` schema made backward-compatible for old clients and daemons that don't send the field.
+- Punycode deprecation warning (DEP0040) suppressed in CLI and desktop daemon entrypoints.
+
+## 0.1.45 - 2026-04-04
+
+### Added
+- Pi (pi.dev) agent provider — connect Pi as a new ACP-based agent type with thinking levels and tool call support.
+- Copilot agent provider re-enabled after ACP compatibility fixes.
+- `paseo .` and `paseo <path>` open the desktop app with the given project, similar to `code .`.
+- Provider-declared features system — providers can expose dynamic toggles and selects that the app renders automatically. First consumer: Codex fast mode.
+- Codex plan mode — start agents in plan-only mode with a dedicated plan card UI for reviewing proposed changes before execution.
+- OpenCode custom agents and slash commands — user-defined agents from opencode.json now appear in the mode picker, and slash commands accept optional arguments.
+- Desktop Integrations settings — install the Paseo CLI and orchestration skills directly from the app without touching the terminal.
+- Daemon status dialog in desktop settings for quick health checks.
+- Auto-restart daemon on version mismatch — the desktop app detects when the running daemon is outdated and restarts it automatically.
+- Setup hint and paseo.sh link on the mobile welcome screen so new App Store users know what to do next.
+
+### Improved
+- Desktop startup is faster — existing daemon connections are raced against bootstrap so the app is usable sooner.
+- Settings sections reordered for better grouping (integrations and daemon together).
+- Sidebar projects and workspaces now persist across sessions, with a context menu to remove projects.
+
+### Fixed
+- Sidebar crash when switching iOS theme (Unistyles/Reanimated interaction).
+- Silero VAD crash caused by external buffer mode in CircularBuffer.
+- Bulk close now correctly archives stored agents instead of leaving orphans.
+- Pinned archived agents are no longer pruned when closing tabs.
+- OpenCode event stream starvation during slash command execution.
+- Duplicate workspaces when multiple git worktrees share the same root.
+- `gh` executable resolution for desktop users whose login shell sets a different PATH.
+- Agent creation timeout increased to 60s to handle slow first-launch scenarios.
+- Forward-compatible provider handling so older app clients don't break on new provider types.
+- Input event listener race condition in the web scrollbar hook.
+- Open-project screen content now vertically centered.
+- Website download page fetches the release version at runtime with asset validation, fixing stale links.
+
 ## 0.1.44 - 2026-04-03
 
 ### Fixed

CI_STATUS.md

@@ -0,0 +1,19 @@
+# CI Test Status
+
+Tracking progress toward all-green CI.
+
+## CI Jobs
+
+| Job | Status | Notes |
+|-----|--------|-------|
+| format | unknown | `npx biome format .` |
+| typecheck | unknown | `npm run typecheck` |
+| server-tests | unknown | unit + integration (vitest) |
+| app-tests | unknown | unit tests (vitest) |
+| playwright | unknown | E2E tests (playwright) |
+| relay-tests | unknown | unit tests (vitest) |
+| cli-tests | unknown | local tests |
+
+## Log
+
+- 2026-04-10: Branch created, automated agents begin iterating

CLAUDE.md

@@ -35,6 +35,8 @@ npm run dev                          # Start daemon + Expo in Tmux
 npm run cli -- ls -a -g              # List all agents
 npm run cli -- daemon status         # Check daemon status
 npm run typecheck                    # Always run after changes
+npm run format                       # Auto-format with Biome
+npm run format:check                 # Check formatting without writing
 ```
 
 See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requirements, and debugging.
@@ -45,6 +47,13 @@ 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.**
+- **Run `npm run format` before committing.** This repo uses Biome for formatting. Do not manually fix formatting — let the formatter handle it.
+- **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).
+  - Never narrow a field's type (e.g. `string` → `enum`, `nullable` → non-null).
+  - Test with: "does a 6-month-old client still parse this?" and "does a 6-month-old daemon still send something this client accepts?"
 
 ## Debugging
 

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.

README.md

@@ -4,6 +4,21 @@
 
 <h1 align="center">Paseo</h1>
 
+<p align="center">
+  <a href="https://github.com/getpaseo/paseo/stargazers">
+    <img src="https://img.shields.io/github/stars/getpaseo/paseo?style=flat&logo=github" alt="GitHub stars">
+  </a>
+  <a href="https://github.com/getpaseo/paseo/releases">
+    <img src="https://img.shields.io/github/v/release/getpaseo/paseo?style=flat&logo=github" alt="GitHub release">
+  </a>
+  <a href="https://x.com/moboudra">
+    <img src="https://img.shields.io/badge/%40moboudra-555?logo=x" alt="X">
+  </a>
+  <a href="https://discord.gg/jz8T2uahpH">
+    <img src="https://img.shields.io/badge/Discord-555?logo=discord" alt="Discord">
+  </a>
+</p>
+
 <p align="center">One interface for all your Claude Code, Codex and OpenCode agents.</p>
 
 <p align="center">

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/MOBILE_TESTING.md

@@ -0,0 +1,206 @@
+# Mobile Testing
+
+## Maestro
+
+Maestro flows live in `packages/app/maestro/`. Reusable sub-flows live in `packages/app/maestro/flows/`.
+
+Run a flow:
+
+```bash
+maestro test packages/app/maestro/my-flow.yaml
+```
+
+### Screenshots
+
+`takeScreenshot` writes to the **current working directory** — there's no way to configure the output path in the YAML. To keep screenshots out of the checkout, `cd` into a temp directory and use an absolute path for the flow:
+
+```bash
+FLOW="$(pwd)/packages/app/maestro/my-flow.yaml"
+mkdir -p /tmp/maestro-out
+cd /tmp/maestro-out && maestro test "$FLOW"
+```
+
+`packages/app/maestro/.gitignore` excludes `*.png` as a safety net.
+
+### Element targeting
+
+Use `testID` or `nativeID` on components, then target with `id:` in flows. Prefer this over text matching — text breaks on copy changes.
+
+```tsx
+// Component
+<Pressable testID="sidebar-sessions" onPress={onPress}>
+```
+
+```yaml
+# Flow
+- tapOn:
+    id: "sidebar-sessions"
+- assertVisible:
+    id: "sidebar-sessions"
+```
+
+### Conditional steps
+
+Use `runFlow:when:visible` for steps that should only execute when a specific element is on screen:
+
+```yaml
+- runFlow:
+    when:
+      visible:
+        id: "sidebar-sessions"
+    commands:
+      - swipe:
+          direction: LEFT
+          duration: 300
+```
+
+This is how `flows/dev-client.yaml` handles Expo dev client screens that only appear in dev builds.
+
+### Don't use launchApp against a running dev app
+
+`launchApp` kills and restarts the app, disrupting Expo dev client state and host connections. For flows that test against an already-running dev app, **omit launchApp entirely** — just interact with whatever is on screen.
+
+Use `launchApp` only in flows that need a clean start (e.g., onboarding tests).
+
+### Swipe gestures
+
+Use `start`/`end` with percentage coordinates for precise control:
+
+```yaml
+# Edge swipe from left to open sidebar
+- swipe:
+    start: "5%,50%"
+    end: "80%,50%"
+    duration: 300
+```
+
+`direction: RIGHT` is simpler but less precise — use it for generic swipes, use coordinates when the start position matters (edge gestures, avoiding specific UI regions).
+
+### Assertions
+
+`assertVisible` checks **actual screen visibility**, not just view tree presence. An element that exists in the tree but is off-screen (e.g., `translateX: -400`) will correctly fail `assertVisible`. This makes it reliable for catching animation bugs where state says "open" but the view is visually hidden.
+
+For async elements, use `extendedWaitUntil`:
+
+```yaml
+- extendedWaitUntil:
+    visible: ".*Online.*"
+    timeout: 90000
+```
+
+### Dev client handling
+
+Two reusable flows handle Expo dev client screens after launch:
+
+- `flows/launch.yaml` — handles dev launcher, dismisses dev menu, asserts "Welcome to Paseo"
+- `flows/dev-client.yaml` — same but without asserting a particular app route
+
+## Self-verification loops
+
+Maestro can only interact with the app UI — it can't toggle iOS appearance, change locale, or simulate network conditions. For bugs that depend on system-level state, wrap Maestro in a bash script that handles the system changes between Maestro runs.
+
+This pattern also lets agents self-verify fixes without manual user testing.
+
+### Pattern
+
+1. Run baseline Maestro flow (confirm feature works)
+2. Make system-level change via `xcrun simctl` (toggle appearance, etc.)
+3. Re-run Maestro flow (confirm feature still works)
+4. Repeat N iterations to catch intermittent failures
+
+Scripts run `maestro test` from inside a temp directory so screenshots don't dirty the checkout.
+
+See `packages/app/maestro/test-sidebar-theme.sh` for the canonical example:
+
+```bash
+bash packages/app/maestro/test-sidebar-theme.sh 6 1
+# Args: iterations=6, wait_seconds=1 between toggle and test
+```
+
+Key elements of the script pattern:
+
+```bash
+set -euo pipefail
+ITERATIONS="${1:-3}"
+
+for i in $(seq 1 "$ITERATIONS"); do
+  # Toggle system state
+  xcrun simctl ui booted appearance light
+
+  # Wait for change to propagate
+  sleep 1
+
+  # Run Maestro flow and capture result
+  if maestro test "$FLOW" 2>&1 | tee "$ITER_DIR/test.log"; then
+    echo "PASS"
+  else
+    echo "FAIL"
+    xcrun simctl io booted screenshot "$ITER_DIR/failure-state.png"
+  fi
+done
+```
+
+## Unistyles + Reanimated
+
+### The crash
+
+Applying Unistyles theme-reactive styles (`StyleSheet.create((theme) => ...)`) directly to `Animated.View` causes **"Unable to find node on an unmounted component"** on theme change.
+
+Unistyles wraps styled components in `<UnistylesComponent>` and patches native view properties via C++. Reanimated also manages the same native node for animated transforms. When the theme changes, both systems try to update the node simultaneously and the view crashes.
+
+### The fix
+
+Use plain React Native `StyleSheet.create` for static positioning on `Animated.View`. Pass theme-dependent values as inline styles from `useUnistyles()`:
+
+```tsx
+// BAD: Unistyles dynamic style on Animated.View
+const styles = StyleSheet.create((theme) => ({
+  sidebar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    backgroundColor: theme.colors.surfaceSidebar, // theme-reactive
+    overflow: "hidden",
+  },
+}));
+
+<Animated.View style={[styles.sidebar, animatedStyle]} />
+```
+
+```tsx
+// GOOD: static stylesheet + inline theme values
+import { StyleSheet as RNStyleSheet } from "react-native";
+
+const staticStyles = RNStyleSheet.create({
+  sidebar: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    overflow: "hidden",
+  },
+});
+
+const { theme } = useUnistyles();
+
+<Animated.View
+  style={[staticStyles.sidebar, animatedStyle, { backgroundColor: theme.colors.surfaceSidebar }]}
+/>
+```
+
+Regular `View` components can safely use Unistyles dynamic styles — the conflict is specific to `Animated.View`.
+
+## iOS Simulator
+
+```bash
+# Screenshot
+xcrun simctl io booted screenshot /tmp/screenshot.png
+
+# Dark/light mode
+xcrun simctl ui booted appearance          # check current
+xcrun simctl ui booted appearance dark     # set dark
+xcrun simctl ui booted appearance light    # set light
+```
+
+Expo dev server logs are in the tmux pane running `npm run dev`. Daemon logs are at `$PASEO_HOME/daemon.log` (see [DEVELOPMENT.md](DEVELOPMENT.md)).

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,8 +129,46 @@ 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.
+
+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** — 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`
+
+The agent's job is a deep sanity check, not a full code review. If it flags anything, investigate before proceeding.
+
+## Changelog scope
+
+The changelog always covers **stable-to-HEAD**:
+
+- **RC release**: the diff and release notes cover `latest stable tag → HEAD`. RC release notes are auto-generated and not added to `CHANGELOG.md`.
+- **Stable release**: the diff and changelog entry cover `latest stable tag → HEAD`. Any intermediate RCs are skipped — the changelog captures the full delta from the previous stable release, not just what changed since the last RC.
+
+In other words, RCs are checkpoints along the way; the changelog only records the final jump from one stable version to the next.
+
 ## 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-v8ArSIil8F9dalo+Z+IKcYvGVVgDlLMsSJemI7HT14Q=";
+  npmDepsHash = "sha256-H+hYTcnYBby1aL7kaxA9Y8fX/aW4iAPc5zeMDV8RCGk=";
 
   # 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.44",
+  "version": "0.1.54",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -15932,18 +15932,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/default-shell": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/default-shell/-/default-shell-2.2.0.tgz",
-      "integrity": "sha512-sPpMZcVhRQ0nEMDtuMJ+RtCxt7iHPAMBU+I4tAlo5dU1sjRpNax0crj6nR3qKpvVnckaQ9U38enXcwW9nZJeCw==",
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -18545,35 +18533,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/execa/node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "license": "ISC"
-    },
     "node_modules/expect": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
@@ -21859,18 +21818,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -22582,15 +22529,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
     "node_modules/humanize-ms": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
@@ -23319,6 +23257,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -26558,6 +26497,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -27464,18 +27404,6 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -27701,6 +27629,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mimic-fn": "^2.1.0"
@@ -28264,6 +28193,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pi-acp": {
+      "version": "0.0.24",
+      "resolved": "https://registry.npmjs.org/pi-acp/-/pi-acp-0.0.24.tgz",
+      "integrity": "sha512-iFoQLH9nd3e2fpvemFV/0SUPeT9ecGHyhBiAe1JW7kHBWfmBQREeRn7O+hQyWA7heMVv+C9CObk4HDLVRy7JaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@agentclientprotocol/sdk": "^0.12.0",
+        "zod": "^3.25.0"
+      },
+      "bin": {
+        "pi-acp": "dist/index.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/pi-acp/node_modules/@agentclientprotocol/sdk": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@agentclientprotocol/sdk/-/sdk-0.12.0.tgz",
+      "integrity": "sha512-V8uH/KK1t7utqyJmTA7y7DzKu6+jKFIXM+ZVouz8E55j8Ej2RV42rEvPKn3/PpBJlliI5crcGk1qQhZ7VwaepA==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
+    "node_modules/pi-acp/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -31090,50 +31053,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shell-env": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/shell-env/-/shell-env-4.0.3.tgz",
-      "integrity": "sha512-Ioe5h+hCDZ7pKL5+JGzbtPvZ5ESMHePZ8nLxohlDL+twmlcmutttMhRkrQOed8DeLT8mkYBgbwZfohe8pqaA3g==",
-      "license": "MIT",
-      "dependencies": {
-        "default-shell": "^2.0.0",
-        "execa": "^5.1.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/shell-env/node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/shell-env/node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/shell-quote": {
       "version": "1.8.3",
       "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
@@ -32066,15 +31985,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/strip-indent": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.1.1.tgz",
@@ -34996,16 +34906,16 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "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.44",
-        "@getpaseo/highlight": "0.1.44",
-        "@getpaseo/server": "0.1.44",
+        "@getpaseo/expo-two-way-audio": "0.1.54",
+        "@getpaseo/highlight": "0.1.54",
+        "@getpaseo/server": "0.1.54",
         "@gorhom/bottom-sheet": "^5.2.6",
         "@gorhom/portal": "^1.0.14",
         "@react-native-async-storage/async-storage": "2.2.0",
@@ -35080,6 +34990,7 @@
       "devDependencies": {
         "@playwright/test": "^1.56.1",
         "@types/react": "~19.2.0",
+        "@types/ws": "^8.18.1",
         "eas-cli": "^16.24.1",
         "eslint": "^9.25.0",
         "eslint-config-expo": "~10.0.0",
@@ -35087,7 +34998,8 @@
         "playwright": "^1.56.1",
         "typescript": "~5.9.2",
         "vitest": "^3.2.4",
-        "wrangler": "^4.59.1"
+        "wrangler": "^4.59.1",
+        "ws": "^8.20.0"
       }
     },
     "packages/app/node_modules/expo-clipboard": {
@@ -35111,6 +35023,28 @@
         "react-native": "*"
       }
     },
+    "packages/app/node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "packages/app/node_modules/zod": {
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
@@ -35122,11 +35056,11 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/relay": "0.1.44",
-        "@getpaseo/server": "0.1.44",
+        "@getpaseo/relay": "0.1.54",
+        "@getpaseo/server": "0.1.54",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -35167,11 +35101,11 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@getpaseo/cli": "0.1.44",
-        "@getpaseo/server": "0.1.44",
+        "@getpaseo/cli": "0.1.54",
+        "@getpaseo/server": "0.1.54",
         "electron-log": "^5.4.3",
         "electron-updater": "^6.6.2",
         "ws": "^8.14.2"
@@ -35205,7 +35139,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "license": "MIT",
       "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -35406,7 +35340,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "dependencies": {
         "@lezer/common": "^1.5.0",
         "@lezer/cpp": "^1.1.5",
@@ -35432,7 +35366,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -35448,14 +35382,14 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "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.44",
-        "@getpaseo/relay": "0.1.44",
+        "@getpaseo/highlight": "0.1.54",
+        "@getpaseo/relay": "0.1.54",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.2.6",
@@ -35466,16 +35400,17 @@
         "dotenv": "^17.2.3",
         "express": "^4.18.2",
         "express-basic-auth": "^1.2.1",
+        "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.1.0",
         "mnemonic-id": "^3.2.7",
         "node-pty": "1.2.0-beta.11",
         "onnxruntime-node": "^1.23.0",
         "openai": "^4.20.0",
+        "pi-acp": "^0.0.24",
         "pino": "^10.2.0",
         "pino-pretty": "^13.1.3",
         "qrcode": "^1.5.4",
         "rotating-file-stream": "^3.2.9",
-        "shell-env": "^4.0.3",
         "sherpa-onnx": "1.12.28",
         "sherpa-onnx-node": "1.12.28",
         "strip-ansi": "^7.1.2",
@@ -35854,7 +35789,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.1.44",
+      "version": "0.1.54",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.20.3",
         "@cloudflare/workers-types": "^4.20260114.0",

package.json

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

packages/app/e2e/archive-tab.spec.ts

@@ -19,13 +19,15 @@ test.describe("Archive tab reconciliation", () => {
   let client: Awaited<ReturnType<typeof connectArchiveTabDaemonClient>>;
   let tempRepo: { path: string; cleanup: () => Promise<void> };
 
+  test.describe.configure({ timeout: 120_000 });
+
   test.beforeAll(async () => {
     tempRepo = await createTempGitRepo("archive-tab-");
     client = await connectArchiveTabDaemonClient();
   });
 
   test.afterAll(async () => {
-    await client?.close();
+    await client?.close().catch(() => undefined);
     await tempRepo?.cleanup();
   });
 

packages/app/e2e/helpers/agent-bottom-anchor.ts

@@ -2,6 +2,7 @@ import { expect, type Page } from "@playwright/test";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { randomUUID } from "node:crypto";
+import { createNodeWebSocketFactory, type NodeWebSocketFactory } from "./node-ws-factory";
 import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
 
 const NEAR_BOTTOM_THRESHOLD_PX = 72;
@@ -83,33 +84,36 @@ export function createReplyTurn(label: string): {
   };
 }
 
+type DaemonClientConfig = {
+  url: string;
+  clientId: string;
+  clientType: "cli";
+  webSocketFactory?: NodeWebSocketFactory;
+};
+
 async function loadDaemonClientConstructor(): Promise<
-  new (config: {
-    url: string;
-    clientId: string;
-    clientType: "cli";
-  }) => DaemonClientInstance
+  new (
+    config: DaemonClientConfig,
+  ) => DaemonClientInstance
 > {
-  const repoRoot = path.resolve(process.cwd(), "../..");
+  const repoRoot = path.resolve(__dirname, "../../../../");
   const moduleUrl = pathToFileURL(
     path.join(repoRoot, "packages/server/dist/server/server/exports.js"),
   ).href;
   const mod = (await import(moduleUrl)) as {
-    DaemonClient: new (config: {
-      url: string;
-      clientId: string;
-      clientType: "cli";
-    }) => DaemonClientInstance;
+    DaemonClient: new (config: DaemonClientConfig) => DaemonClientInstance;
   };
   return mod.DaemonClient;
 }
 
 export async function connectDaemonClient(): Promise<DaemonClientInstance> {
   const DaemonClient = await loadDaemonClientConstructor();
+  const webSocketFactory = createNodeWebSocketFactory();
   const client = new DaemonClient({
     url: getDaemonWsUrl(),
     clientId: `app-e2e-${randomUUID()}`,
     clientType: "cli",
+    webSocketFactory,
   });
   await client.connect();
   return client;
@@ -127,7 +131,7 @@ export async function seedBottomAnchorAgent(input: {
   const lineCount = Math.max(14, input.lineCount ?? 14);
   const created = await input.client.createAgent({
     provider: "codex",
-    model: "gpt-5.1-codex-mini",
+    model: "gpt-5.4-mini",
     thinkingOptionId: "low",
     modeId: "full-access",
     cwd: input.cwd,

packages/app/e2e/helpers/archive-tab.ts

@@ -3,8 +3,13 @@ import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { expect, type Page } from "@playwright/test";
 import { buildCreateAgentPreferences, buildSeededHost } from "./daemon-registry";
+import { createNodeWebSocketFactory, type NodeWebSocketFactory } from "./node-ws-factory";
 import { waitForWorkspaceTabsVisible } from "./workspace-tabs";
-import { buildHostAgentDetailRoute, buildHostSessionsRoute, buildHostWorkspaceRoute } from "@/utils/host-routes";
+import {
+  buildHostAgentDetailRoute,
+  buildHostSessionsRoute,
+  buildHostWorkspaceRoute,
+} from "@/utils/host-routes";
 
 export type ArchiveTabAgent = {
   id: string;
@@ -18,7 +23,7 @@ type ArchiveTabDaemonClient = {
   createAgent(options: {
     provider: string;
     model: string;
-    thinkingOptionId: string;
+    thinkingOptionId?: string;
     modeId: string;
     cwd: string;
     title: string;
@@ -63,33 +68,36 @@ function buildSeededStoragePayload() {
   };
 }
 
+type ArchiveTabDaemonClientConfig = {
+  url: string;
+  clientId: string;
+  clientType: "cli";
+  webSocketFactory?: NodeWebSocketFactory;
+};
+
 async function loadDaemonClientConstructor(): Promise<
-  new (config: {
-    url: string;
-    clientId: string;
-    clientType: "cli";
-  }) => ArchiveTabDaemonClient
+  new (
+    config: ArchiveTabDaemonClientConfig,
+  ) => ArchiveTabDaemonClient
 > {
-  const repoRoot = path.resolve(process.cwd(), "../..");
+  const repoRoot = path.resolve(__dirname, "../../../../");
   const moduleUrl = pathToFileURL(
     path.join(repoRoot, "packages/server/dist/server/server/exports.js"),
   ).href;
   const mod = (await import(moduleUrl)) as {
-    DaemonClient: new (config: {
-      url: string;
-      clientId: string;
-      clientType: "cli";
-    }) => ArchiveTabDaemonClient;
+    DaemonClient: new (config: ArchiveTabDaemonClientConfig) => ArchiveTabDaemonClient;
   };
   return mod.DaemonClient;
 }
 
 export async function connectArchiveTabDaemonClient(): Promise<ArchiveTabDaemonClient> {
   const DaemonClient = await loadDaemonClientConstructor();
+  const webSocketFactory = createNodeWebSocketFactory();
   const client = new DaemonClient({
     url: getDaemonWsUrl(),
     clientId: `app-e2e-archive-tab-${randomUUID()}`,
     clientType: "cli",
+    webSocketFactory,
   });
   await client.connect();
   return client;
@@ -100,17 +108,18 @@ export async function createIdleAgent(
   input: { cwd: string; title: string },
 ): Promise<ArchiveTabAgent> {
   const created = await client.createAgent({
-    provider: "codex",
-    model: "gpt-5.1-codex-mini",
-    thinkingOptionId: "low",
-    modeId: "full-access",
+    provider: "opencode",
+    model: "opencode/gpt-5-nano",
+    modeId: "default",
     cwd: input.cwd,
     title: input.title,
     initialPrompt: "Reply with exactly READY.",
   });
   const finished = await client.waitForFinish(created.id, 120_000);
   if (finished.status !== "idle") {
-    throw new Error(`Expected agent ${created.id} to become idle, got ${finished.status}.`);
+    throw new Error(
+      `Expected agent ${created.id} to become idle, got ${finished.status}. Error: ${JSON.stringify((finished as Record<string, unknown>).error ?? "unknown")}`,
+    );
   }
   return {
     id: created.id,

packages/app/e2e/helpers/daemon-registry.ts

@@ -2,7 +2,7 @@ export const TEST_HOST_LABEL = "localhost";
 
 export const TEST_PROVIDER_PREFERENCES = {
   claude: { model: "haiku" },
-  codex: { model: "gpt-5.1-codex-mini", thinkingOptionId: "low" },
+  codex: { model: "gpt-5.4-mini", thinkingOptionId: "low" },
 } as const;
 
 export function buildDirectTcpConnection(endpoint: string) {

packages/app/e2e/helpers/node-ws-factory.ts

@@ -0,0 +1,27 @@
+import WebSocket from "ws";
+
+type WebSocketLike = {
+  readyState: number;
+  send: (data: string | Uint8Array | ArrayBuffer) => void;
+  close: (code?: number, reason?: string) => void;
+  binaryType?: string;
+  on?: (event: string, listener: (...args: any[]) => void) => void;
+  off?: (event: string, listener: (...args: any[]) => void) => void;
+  removeListener?: (event: string, listener: (...args: any[]) => void) => void;
+  addEventListener?: (event: string, listener: (event: any) => void) => void;
+  removeEventListener?: (event: string, listener: (event: any) => void) => void;
+  onopen?: ((event: any) => void) | null;
+  onclose?: ((event: any) => void) | null;
+  onerror?: ((event: any) => void) | null;
+  onmessage?: ((event: any) => void) | null;
+};
+
+export type NodeWebSocketFactory = (
+  url: string,
+  options?: { headers?: Record<string, string> },
+) => WebSocketLike;
+
+export function createNodeWebSocketFactory(): NodeWebSocketFactory {
+  return (url: string, options?: { headers?: Record<string, string> }) =>
+    new WebSocket(url, { headers: options?.headers }) as unknown as WebSocketLike;
+}

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

@@ -2,6 +2,7 @@ import type { Page } from "@playwright/test";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { randomUUID } from "node:crypto";
+import { createNodeWebSocketFactory, type NodeWebSocketFactory } from "./node-ws-factory";
 import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
 
 export type TerminalPerfDaemonClient = {
@@ -43,29 +44,36 @@ function getServerId(): string {
   return serverId;
 }
 
+type TerminalPerfDaemonClientConfig = {
+  url: string;
+  clientId: string;
+  clientType: "cli";
+  webSocketFactory?: NodeWebSocketFactory;
+};
+
 async function loadDaemonClientConstructor(): Promise<
-  new (config: { url: string; clientId: string; clientType: "cli" }) => TerminalPerfDaemonClient
+  new (
+    config: TerminalPerfDaemonClientConfig,
+  ) => TerminalPerfDaemonClient
 > {
-  const repoRoot = path.resolve(process.cwd(), "../..");
+  const repoRoot = path.resolve(__dirname, "../../../../");
   const moduleUrl = pathToFileURL(
     path.join(repoRoot, "packages/server/dist/server/server/exports.js"),
   ).href;
   const mod = (await import(moduleUrl)) as {
-    DaemonClient: new (config: {
-      url: string;
-      clientId: string;
-      clientType: "cli";
-    }) => TerminalPerfDaemonClient;
+    DaemonClient: new (config: TerminalPerfDaemonClientConfig) => TerminalPerfDaemonClient;
   };
   return mod.DaemonClient;
 }
 
 export async function connectTerminalClient(): Promise<TerminalPerfDaemonClient> {
   const DaemonClient = await loadDaemonClientConstructor();
+  const webSocketFactory = createNodeWebSocketFactory();
   const client = new DaemonClient({
     url: getDaemonWsUrl(),
     clientId: `terminal-perf-${randomUUID()}`,
     clientType: "cli",
+    webSocketFactory,
   });
   await client.connect();
   return client;
@@ -77,6 +85,10 @@ export function buildTerminalWorkspaceUrl(cwd: string, terminalId: string): stri
   return `${route}?open=${encodeURIComponent(`terminal:${terminalId}`)}`;
 }
 
+function buildWorkspaceUrl(cwd: string): string {
+  return buildHostWorkspaceRoute(getServerId(), cwd);
+}
+
 export async function getTerminalBufferText(page: Page): Promise<string> {
   return page.evaluate(() => {
     const term = (window as any).__paseoTerminal;
@@ -118,33 +130,29 @@ export async function navigateToTerminal(
   // Boot the app at the workspace route directly.
   // The fixtures.ts beforeEach addInitScript seeds localStorage on every navigation,
   // so the daemon registry is already configured when the app starts.
-  const workspaceRoute = buildHostWorkspaceRoute(getServerId(), input.cwd);
+  const workspaceRoute = buildTerminalWorkspaceUrl(input.cwd, input.terminalId);
   await page.goto(workspaceRoute);
 
+  // The workspace layout consumes `?open=...`, returns null during the effect,
+  // then replaces the URL with the clean workspace route after preparing the tab.
+  const cleanWorkspaceRoute = buildWorkspaceUrl(input.cwd);
+  await page.waitForURL(
+    (url) => url.pathname === cleanWorkspaceRoute && !url.searchParams.has("open"),
+    { timeout: 15_000 },
+  );
+
   // Wait for daemon connection (sidebar shows host label)
-  await page.getByText("localhost", { exact: true }).first().waitFor({ state: "visible", timeout: 15_000 });
+  await page
+    .getByText("localhost", { exact: true })
+    .first()
+    .waitFor({ state: "visible", timeout: 15_000 });
+
+  // The open intent should have prepared and focused the exact pre-created terminal tab.
+  const terminalTab = page.locator(`[data-testid="workspace-tab-terminal_${input.terminalId}"]`);
+  await terminalTab.waitFor({ state: "visible", timeout: 15_000 });
+  await terminalTab.click();
 
-  // The workspace should now query listTerminals and discover our terminal.
-  // Click the terminal tab if it auto-appeared, or wait for it.
   const terminalSurface = page.locator('[data-testid="terminal-surface"]');
-  const surfaceVisible = await terminalSurface.isVisible().catch(() => false);
-
-  if (!surfaceVisible) {
-    // Terminal tab might not be focused — look for it in the tab row and click it
-    const terminalTab = page.locator(`[data-testid="workspace-tab-terminal:${input.terminalId}"]`);
-    const tabExists = await terminalTab.isVisible({ timeout: 5_000 }).catch(() => false);
-
-    if (tabExists) {
-      await terminalTab.click();
-    } else {
-      // Terminal tab not yet created — click "New terminal tab" to create one through the UI
-      const newTerminalBtn = page.getByRole("button", { name: "New terminal tab" });
-      await newTerminalBtn.waitFor({ state: "visible", timeout: 10_000 });
-      await newTerminalBtn.click();
-    }
-  }
-
-  // Wait for terminal surface to be visible
   await terminalSurface.waitFor({ state: "visible", timeout: 15_000 });
 
   // Wait for loading overlay to disappear (terminal attached)
@@ -155,6 +163,7 @@ export async function navigateToTerminal(
       // overlay may never appear if attachment is instant
     });
 
+  await terminalSurface.scrollIntoViewIfNeeded();
   await terminalSurface.click();
 }
 

packages/app/e2e/terminal-performance.spec.ts

@@ -54,7 +54,11 @@ test.describe("Terminal wire performance", () => {
 
       await terminal.pressSequentially(`seq 1 ${LINE_COUNT}; echo ${sentinel}\n`, { delay: 0 });
 
-      await waitForTerminalContent(page, (text) => text.includes(sentinel), THROUGHPUT_BUDGET_MS + 15_000);
+      await waitForTerminalContent(
+        page,
+        (text) => text.includes(sentinel),
+        THROUGHPUT_BUDGET_MS + 15_000,
+      );
 
       const elapsedMs = Date.now() - startMs;
 
@@ -81,9 +85,10 @@ test.describe("Terminal wire performance", () => {
         `[perf] Throughput: ${report.throughputMBps} MB/s — ${LINE_COUNT} lines in ${elapsedMs}ms`,
       );
 
-      expect(elapsedMs, `${LINE_COUNT} lines should render within ${THROUGHPUT_BUDGET_MS}ms`).toBeLessThan(
-        THROUGHPUT_BUDGET_MS,
-      );
+      expect(
+        elapsedMs,
+        `${LINE_COUNT} lines should render within ${THROUGHPUT_BUDGET_MS}ms`,
+      ).toBeLessThan(THROUGHPUT_BUDGET_MS);
     } finally {
       await client.killTerminal(terminalId).catch(() => {});
     }

packages/app/maestro/.gitignore

@@ -0,0 +1,2 @@
+# Maestro takeScreenshot artifacts
+*.png

packages/app/maestro/sidebar-theme-repro.yaml

@@ -0,0 +1,31 @@
+appId: sh.paseo
+---
+# Ensure sidebar is closed: if sidebar-sessions is visible, close it via swipe left
+- runFlow:
+    when:
+      visible:
+        id: "sidebar-sessions"
+    commands:
+      - swipe:
+          direction: LEFT
+          duration: 300
+
+# Small pause for close animation
+- takeScreenshot: 00-sidebar-closed
+
+# Open sidebar via swipe right gesture (the actual path that triggers the bug)
+- swipe:
+    start: "5%,50%"
+    end: "80%,50%"
+    duration: 300
+
+# Verify sidebar opened
+- assertVisible:
+    id: "sidebar-sessions"
+- takeScreenshot: 01-sidebar-opened
+
+# Close sidebar via swipe left
+- swipe:
+    direction: LEFT
+    duration: 300
+- takeScreenshot: 02-sidebar-closed-again

packages/app/maestro/test-sidebar-theme.sh

@@ -0,0 +1,62 @@
+#!/usr/bin/env bash
+# Verification loop for sidebar theme bug.
+#
+# Maestro can't toggle iOS appearance, so this script bridges the gap:
+# toggle appearance via xcrun simctl, then run Maestro to verify the sidebar
+# still works. Runs N iterations to catch intermittent failures.
+#
+# Usage:
+#   bash packages/app/maestro/test-sidebar-theme.sh [iterations] [wait_seconds]
+#   bash packages/app/maestro/test-sidebar-theme.sh 6 1
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "$0")/../../.." && pwd)"
+FLOW="$REPO_ROOT/packages/app/maestro/sidebar-theme-repro.yaml"
+OUT_DIR="/tmp/sidebar-theme-test-$(date +%s)"
+ITERATIONS="${1:-3}"
+WAIT_SECS="${2:-1}"
+mkdir -p "$OUT_DIR"
+
+echo "=== Sidebar Theme Bug Verification ==="
+echo "Output dir: $OUT_DIR"
+echo "Iterations: $ITERATIONS, wait after toggle: ${WAIT_SECS}s"
+
+FAILURES=0
+
+for i in $(seq 1 "$ITERATIONS"); do
+  echo ""
+  echo "========== Iteration $i / $ITERATIONS =========="
+
+  CURRENT=$(xcrun simctl ui booted appearance 2>&1 | tr -d '[:space:]')
+  echo "Current appearance: $CURRENT"
+
+  if [ "$CURRENT" = "dark" ]; then
+    xcrun simctl ui booted appearance light
+    echo "Switched to light mode"
+  else
+    xcrun simctl ui booted appearance dark
+    echo "Switched to dark mode"
+  fi
+
+  echo "Waiting ${WAIT_SECS}s..."
+  sleep "$WAIT_SECS"
+
+  ITER_DIR="$OUT_DIR/iter-$i"
+  mkdir -p "$ITER_DIR"
+
+  # Run maestro from the output dir so takeScreenshot artifacts land there
+  if (cd "$ITER_DIR" && maestro test "$FLOW") 2>&1 | tee "$ITER_DIR/test.log"; then
+    echo "  -> PASS (iteration $i)"
+  else
+    echo "  -> FAIL (iteration $i) — bug reproduced!"
+    FAILURES=$((FAILURES + 1))
+    xcrun simctl io booted screenshot "$ITER_DIR/failure-state.png" 2>/dev/null || true
+  fi
+done
+
+# Restore to dark mode
+xcrun simctl ui booted appearance dark
+
+echo ""
+echo "=== Summary: $FAILURES failures out of $ITERATIONS iterations ==="
+echo "Output: $OUT_DIR"

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.44",
+  "version": "0.1.54",
   "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.44",
-    "@getpaseo/highlight": "0.1.44",
-    "@getpaseo/server": "0.1.44",
+    "@getpaseo/expo-two-way-audio": "0.1.54",
+    "@getpaseo/highlight": "0.1.54",
+    "@getpaseo/server": "0.1.54",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.2.0",
@@ -108,6 +108,7 @@
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@types/react": "~19.2.0",
+    "@types/ws": "^8.18.1",
     "eas-cli": "^16.24.1",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~10.0.0",
@@ -115,6 +116,7 @@
     "playwright": "^1.56.1",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",
-    "wrangler": "^4.59.1"
+    "wrangler": "^4.59.1",
+    "ws": "^8.20.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, type ThemeName } from "@/styles/theme";
 import { useFaviconStatus } from "@/hooks/use-favicon-status";
 import { View, Text } from "react-native";
 import { UnistylesRuntime, useUnistyles } from "react-native-unistyles";
@@ -27,6 +28,7 @@ import {
 import { shouldUseDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
 import { loadSettingsFromStorage } from "@/hooks/use-settings";
 import { useColorScheme } from "@/hooks/use-color-scheme";
+import { useOpenProject } from "@/hooks/use-open-project";
 import { SessionProvider } from "@/contexts/session-context";
 import type { HostProfile } from "@/types/host-connection";
 import {
@@ -56,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";
@@ -67,6 +69,7 @@ import {
   type WebNotificationClickDetail,
   ensureOsNotificationPermission,
 } from "@/utils/os-notifications";
+import { listenToDesktopEvent } from "@/desktop/electron/events";
 import { getDesktopHost } from "@/desktop/host";
 import { updateDesktopWindowControls } from "@/desktop/electron/window";
 import { buildNotificationRoute } from "@/utils/notification-routing";
@@ -230,6 +233,7 @@ function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     let cancelled = false;
+    let cancelAnyOnline: (() => void) | null = null;
     const shouldManageDesktop = shouldUseDesktopDaemon();
     const store = getHostRuntimeStore();
 
@@ -240,28 +244,53 @@ function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
       if (isDesktopManaged) {
         setPhase("starting-daemon");
         setError(null);
-        const bootstrapResult = await store.bootstrapDesktop();
-        if (!bootstrapResult.ok) {
-          if (!cancelled) {
-            setPhase("error");
-            setError(bootstrapResult.error);
+
+        let raceSettled = false;
+
+        const anyOnline = store.waitForAnyConnectionOnline();
+        cancelAnyOnline = anyOnline.cancel;
+
+        const bootstrapPromise = (async (): Promise<
+          { type: "online" } | { type: "error"; error: string }
+        > => {
+          try {
+            const bootstrapResult = await store.bootstrapDesktop();
+            if (!bootstrapResult.ok) {
+              return { type: "error", error: bootstrapResult.error };
+            }
+            if (!cancelled && !raceSettled) {
+              setPhase("connecting");
+            }
+            await store.addConnectionFromListenAndWaitForOnline({
+              listenAddress: bootstrapResult.listenAddress,
+              serverId: bootstrapResult.serverId,
+              hostname: bootstrapResult.hostname,
+            });
+            return { type: "online" };
+          } catch (err) {
+            return {
+              type: "error",
+              error: err instanceof Error ? err.message : String(err),
+            };
           }
-          return;
-        }
+        })();
 
-        if (cancelled) {
-          return;
-        }
+        const result = await Promise.race([
+          anyOnline.promise.then((): { type: "online" } => ({ type: "online" })),
+          bootstrapPromise,
+        ]);
+
+        raceSettled = true;
+        anyOnline.cancel();
 
-        setPhase("connecting");
-        await store.addConnectionFromListenAndWaitForOnline({
-          listenAddress: bootstrapResult.listenAddress,
-          serverId: bootstrapResult.serverId,
-          hostname: bootstrapResult.hostname,
-        });
         if (!cancelled) {
-          setPhase("online");
-          setError(null);
+          if (result.type === "online") {
+            setPhase("online");
+            setError(null);
+          } else {
+            setPhase("error");
+            setError(result.error);
+          }
         }
       } else {
         void store.bootstrap({ manageBuiltInDaemon: settings.manageBuiltInDaemon });
@@ -288,6 +317,7 @@ function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
 
     return () => {
       cancelled = true;
+      cancelAnyOnline?.();
     };
   }, [retryToken]);
 
@@ -328,6 +358,8 @@ interface AppContainerProps {
   chromeEnabled?: boolean;
 }
 
+const THEME_CYCLE_ORDER: ThemeName[] = ["dark", "zinc", "midnight", "claude", "ghostty", "light"];
+
 function AppContainer({
   children,
   selectedAgentId,
@@ -335,15 +367,53 @@ function AppContainer({
 }: AppContainerProps) {
   const { theme } = useUnistyles();
   const daemons = useHosts();
+  const { settings, updateSettings } = useAppSettings();
   const toggleAgentList = usePanelStore((state) => state.toggleAgentList);
   const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
   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 cycleTheme = useCallback(() => {
+    const currentIndex = THEME_CYCLE_ORDER.indexOf(settings.theme as ThemeName);
+    const nextIndex = (currentIndex + 1) % THEME_CYCLE_ORDER.length;
+    void updateSettings({ theme: THEME_CYCLE_ORDER[nextIndex]! });
+  }, [settings.theme, updateSettings]);
+
+  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,
@@ -352,6 +422,7 @@ function AppContainer({
     toggleFileExplorer,
     toggleBothSidebars,
     toggleFocusMode,
+    cycleTheme,
   });
 
   const containerStyle = useMemo(
@@ -393,14 +464,28 @@ function MobileGestureWrapper({
   const mobileView = usePanelStore((state) => state.mobileView);
   const openAgentList = usePanelStore((state) => state.openAgentList);
   const horizontalScroll = useHorizontalScrollOptional();
-  const { translateX, backdropOpacity, windowWidth, animateToOpen, animateToClose, isGesturing } =
-    useSidebarAnimation();
+  const {
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    animateToOpen,
+    animateToClose,
+    isGesturing,
+    gestureAnimatingRef,
+    openGestureRef,
+  } = useSidebarAnimation();
   const touchStartX = useSharedValue(0);
   const openGestureEnabled = chromeEnabled && mobileView === "agent";
 
+  const handleGestureOpen = useCallback(() => {
+    gestureAnimatingRef.current = true;
+    openAgentList();
+  }, [openAgentList, gestureAnimatingRef]);
+
   const openGesture = useMemo(
     () =>
       Gesture.Pan()
+        .withRef(openGestureRef)
         .enabled(openGestureEnabled)
         .manualActivation(true)
         .failOffsetY([-10, 10])
@@ -443,7 +528,7 @@ function MobileGestureWrapper({
           const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
           if (shouldOpen) {
             animateToOpen();
-            runOnJS(openAgentList)();
+            runOnJS(handleGestureOpen)();
           } else {
             animateToClose();
           }
@@ -458,8 +543,9 @@ function MobileGestureWrapper({
       backdropOpacity,
       animateToOpen,
       animateToClose,
-      openAgentList,
+      handleGestureOpen,
       isGesturing,
+      openGestureRef,
       horizontalScroll?.isAnyScrolledRight,
       touchStartX,
     ],
@@ -486,7 +572,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]);
 
@@ -530,7 +616,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;
@@ -555,6 +641,84 @@ function OfferLinkListener({
   return null;
 }
 
+interface OpenProjectEventPayload {
+  path?: unknown;
+}
+
+function OpenProjectListener() {
+  const hosts = useHosts();
+  const serverId = hosts[0]?.serverId ?? null;
+  const client = useHostRuntimeClient(serverId ?? "");
+  const openProject = useOpenProject(serverId);
+  const pendingPathRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    let disposed = false;
+    let unlisten: (() => void) | null = null;
+    const maybeOpenProject = (inputPath: string) => {
+      const nextPath = inputPath.trim();
+      if (!nextPath) {
+        return;
+      }
+
+      pendingPathRef.current = nextPath;
+
+      if (!serverId || !client) {
+        return;
+      }
+
+      const pathToOpen = pendingPathRef.current;
+      pendingPathRef.current = null;
+      if (!pathToOpen) {
+        return;
+      }
+
+      void openProject(pathToOpen).catch(() => undefined);
+    };
+
+    // Pull any path that was passed on cold start (before the listener existed).
+    // Store in the ref even if this effect instance is disposed — the next
+    // effect run picks it up via maybeOpenProject(pendingPathRef.current).
+    void getDesktopHost()
+      ?.getPendingOpenProject?.()
+      ?.then((pending) => {
+        if (pending) {
+          pendingPathRef.current = pending;
+        }
+        if (!disposed && pending) {
+          maybeOpenProject(pending);
+        }
+      })
+      .catch(() => undefined);
+
+    // Listen for hot-start paths relayed via the second-instance event.
+    void listenToDesktopEvent<OpenProjectEventPayload>("open-project", (payload) => {
+      if (disposed) {
+        return;
+      }
+      const nextPath = typeof payload?.path === "string" ? payload.path.trim() : "";
+      maybeOpenProject(nextPath);
+    })
+      .then((dispose) => {
+        if (disposed) {
+          dispose();
+          return;
+        }
+        unlisten = dispose;
+      })
+      .catch(() => undefined);
+
+    maybeOpenProject(pendingPathRef.current ?? "");
+
+    return () => {
+      disposed = true;
+      unlisten?.();
+    };
+  }, [client, openProject, serverId]);
+
+  return null;
+}
+
 function AppWithSidebar({ children }: { children: ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -570,7 +734,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
@@ -621,17 +785,14 @@ function RootStack() {
       <Stack.Protected guard={storeReady}>
         <Stack.Screen name="welcome" />
         <Stack.Screen name="settings" />
-        <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
-        <Stack.Screen
-          name="h/[serverId]/agent/[agentId]"
-          options={{ gestureEnabled: false }}
-        />
-        <Stack.Screen name="h/[serverId]/index" />
-        <Stack.Screen name="h/[serverId]/sessions" />
-        <Stack.Screen name="h/[serverId]/open-project" />
-        <Stack.Screen name="h/[serverId]/settings" />
         <Stack.Screen name="pair-scan" />
       </Stack.Protected>
+      <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
+      <Stack.Screen name="h/[serverId]/agent/[agentId]" options={{ gestureEnabled: false }} />
+      <Stack.Screen name="h/[serverId]/index" />
+      <Stack.Screen name="h/[serverId]/sessions" />
+      <Stack.Screen name="h/[serverId]/open-project" />
+      <Stack.Screen name="h/[serverId]/settings" />
       <Stack.Screen name="index" />
     </Stack>
   );
@@ -674,6 +835,7 @@ export default function RootLayout() {
                     <SidebarAnimationProvider>
                       <HorizontalScrollProvider>
                         <ToastProvider>
+                          <OpenProjectListener />
                           <AppWithSidebar>
                             <RootStack />
                           </AppWithSidebar>

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

@@ -1,11 +1,20 @@
 import { useEffect, useRef } from "react";
 import { useLocalSearchParams, useRouter } from "expo-router";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import { useSessionStore } from "@/stores/session-store";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { buildHostRootRoute } from "@/utils/host-routes";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 
 export default function HostAgentReadyRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <HostAgentReadyRouteContent />
+    </HostRouteBootstrapBoundary>
+  );
+}
+
+function HostAgentReadyRouteContent() {
   const router = useRouter();
   const params = useLocalSearchParams<{
     serverId?: string;
@@ -58,7 +67,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 +98,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

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useLocalSearchParams, usePathname, useRouter } from "expo-router";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import { useSessionStore } from "@/stores/session-store";
 import { useFormPreferences } from "@/hooks/use-form-preferences";
 import {
@@ -12,6 +13,14 @@ import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 const HOST_ROOT_REDIRECT_DELAY_MS = 300;
 
 export default function HostIndexRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <HostIndexRouteContent />
+    </HostRouteBootstrapBoundary>
+  );
+}
+
+function HostIndexRouteContent() {
   const router = useRouter();
   const pathname = usePathname();
   const params = useLocalSearchParams<{ serverId?: string }>();
@@ -48,11 +57,6 @@ export default function HostIndexRoute() {
       );
 
       const visibleWorkspaces = sessionWorkspaces ? Array.from(sessionWorkspaces.values()) : [];
-      visibleWorkspaces.sort((left, right) => {
-        const leftTime = left.activityAt?.getTime() ?? Number.NEGATIVE_INFINITY;
-        const rightTime = right.activityAt?.getTime() ?? Number.NEGATIVE_INFINITY;
-        return rightTime - leftTime;
-      });
 
       const primaryAgent = visibleAgents[0];
       if (primaryAgent?.cwd?.trim()) {
@@ -68,11 +72,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/h/[serverId]/open-project.tsx

@@ -1,7 +1,16 @@
 import { useLocalSearchParams } from "expo-router";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import { OpenProjectScreen } from "@/screens/open-project-screen";
 
 export default function HostOpenProjectRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <HostOpenProjectRouteContent />
+    </HostRouteBootstrapBoundary>
+  );
+}
+
+function HostOpenProjectRouteContent() {
   const params = useLocalSearchParams<{ serverId?: string }>();
   const serverId = typeof params.serverId === "string" ? params.serverId : "";
 

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

@@ -1,7 +1,16 @@
 import { useLocalSearchParams } from "expo-router";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import { SessionsScreen } from "@/screens/sessions-screen";
 
 export default function HostAgentsRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <HostAgentsRouteContent />
+    </HostRouteBootstrapBoundary>
+  );
+}
+
+function HostAgentsRouteContent() {
   const params = useLocalSearchParams<{ serverId?: string }>();
   const serverId = typeof params.serverId === "string" ? params.serverId : "";
 

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

@@ -1,3 +1,10 @@
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import SettingsScreen from "@/screens/settings-screen";
 
-export default SettingsScreen;
+export default function HostSettingsRoute() {
+  return (
+    <HostRouteBootstrapBoundary>
+      <SettingsScreen />
+    </HostRouteBootstrapBoundary>
+  );
+}

packages/app/src/app/h/[serverId]/workspace/[workspaceId]/_layout.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useRef } from "react";
-import { useGlobalSearchParams, useLocalSearchParams, useRouter } from "expo-router";
+import { useEffect, useRef, useState } from "react";
+import { useGlobalSearchParams, useLocalSearchParams, useRootNavigationState } from "expo-router";
+import { Platform } from "react-native";
+import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
 import type { WorkspaceTabTarget } from "@/stores/workspace-tabs-store";
 import { WorkspaceScreen } from "@/screens/workspace/workspace-screen";
 import {
-  buildHostWorkspaceRoute,
   decodeWorkspaceIdFromPathSegment,
   parseWorkspaceOpenIntent,
   type WorkspaceOpenIntent,
@@ -35,8 +36,17 @@ function getOpenIntentTarget(openIntent: WorkspaceOpenIntent): WorkspaceTabTarge
 }
 
 export default function HostWorkspaceLayout() {
-  const router = useRouter();
+  return (
+    <HostRouteBootstrapBoundary>
+      <HostWorkspaceLayoutContent />
+    </HostRouteBootstrapBoundary>
+  );
+}
+
+function HostWorkspaceLayoutContent() {
+  const rootNavigationState = useRootNavigationState();
   const consumedIntentRef = useRef<string | null>(null);
+  const [intentConsumed, setIntentConsumed] = useState(false);
   const params = useLocalSearchParams<{
     serverId?: string | string[];
     workspaceId?: string | string[];
@@ -55,6 +65,9 @@ export default function HostWorkspaceLayout() {
     if (!openValue) {
       return;
     }
+    if (!rootNavigationState?.key) {
+      return;
+    }
 
     const consumptionKey = `${serverId}:${workspaceId}:${openValue}`;
     if (consumedIntentRef.current === consumptionKey) {
@@ -63,19 +76,30 @@ export default function HostWorkspaceLayout() {
     consumedIntentRef.current = consumptionKey;
 
     const openIntent = parseWorkspaceOpenIntent(openValue);
-    const route = openIntent
-      ? prepareWorkspaceTab({
-          serverId,
-          workspaceId,
-          target: getOpenIntentTarget(openIntent),
-          pin: openIntent.kind === "agent",
-        })
-      : buildHostWorkspaceRoute(serverId, workspaceId);
+    if (openIntent) {
+      prepareWorkspaceTab({
+        serverId,
+        workspaceId,
+        target: getOpenIntentTarget(openIntent),
+        pin: openIntent.kind === "agent",
+      });
+    }
 
-    router.replace(route as any);
-  }, [openValue, router, serverId, workspaceId]);
+    // Expo Router's replace ignores query-param-only changes (findDivergentState
+    // skips search params). Strip ?open from the browser URL directly so the
+    // address bar reflects the clean workspace route.
+    if (Platform.OS === "web" && typeof window !== "undefined") {
+      const url = new URL(window.location.href);
+      if (url.searchParams.has("open")) {
+        url.searchParams.delete("open");
+        window.history.replaceState(null, "", url.toString());
+      }
+    }
 
-  if (openValue) {
+    setIntentConsumed(true);
+  }, [openValue, rootNavigationState?.key, serverId, workspaceId]);
+
+  if (openValue && !intentConsumed) {
     return null;
   }
 

packages/app/src/app/index.tsx

@@ -1,15 +1,8 @@
 import { useEffect, useSyncExternalStore } from "react";
 import { usePathname, useRouter } from "expo-router";
 import { StartupSplashScreen } from "@/screens/startup-splash-screen";
-import {
-  useHostRuntimeBootstrapState,
-  useStoreReady,
-} from "@/app/_layout";
-import {
-  getHostRuntimeStore,
-  isHostRuntimeConnected,
-  useHosts,
-} from "@/runtime/host-runtime";
+import { useHostRuntimeBootstrapState, useStoreReady } from "@/app/_layout";
+import { getHostRuntimeStore, isHostRuntimeConnected, useHosts } from "@/runtime/host-runtime";
 import { buildHostRootRoute } from "@/utils/host-routes";
 
 const WELCOME_ROUTE = "/welcome";
@@ -55,10 +48,8 @@ export default function Index() {
       return;
     }
 
-    const targetRoute = anyOnlineServerId
-      ? buildHostRootRoute(anyOnlineServerId)
-      : WELCOME_ROUTE;
-    router.replace(targetRoute as any);
+    const targetRoute = anyOnlineServerId ? buildHostRootRoute(anyOnlineServerId) : WELCOME_ROUTE;
+    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-form/agent-form-dropdowns.tsx

@@ -773,7 +773,8 @@ export function ModelDropdown({
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<View>(null);
 
-  const selectedLabel = models.find((model) => model.id === selectedModel)?.label ?? selectedModel ?? "Select model";
+  const selectedLabel =
+    models.find((model) => model.id === selectedModel)?.label ?? selectedModel ?? "Select model";
   const placeholder = isLoading && models.length === 0 ? "Loading..." : "Select model";
   const helperText = error
     ? undefined

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;
@@ -74,6 +77,8 @@ interface AgentInputAreaProps {
   autoFocus?: boolean;
   /** Callback to expose the addImages function to parent components */
   onAddImages?: (addImages: (images: ImageAttachment[]) => void) => void;
+  /** Callback to expose a focus function to parent components (desktop only). */
+  onFocusInput?: (focus: () => void) => void;
   /** Optional draft context for listing commands before an agent exists. */
   commandDraftConfig?: DraftCommandConfig;
   /** Called when a message is about to be sent (any path: keyboard, dictation, queued). */
@@ -103,6 +108,7 @@ export function AgentInputArea({
   clearDraft,
   autoFocus = false,
   onAddImages,
+  onFocusInput,
   commandDraftConfig,
   onMessageSent,
   onComposerHeightChange,
@@ -127,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,
       };
     }),
   );
@@ -145,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;
@@ -208,6 +216,21 @@ export function AgentInputArea({
     onAddImages?.(addImages);
   }, [addImages, onAddImages]);
 
+  const focusInput = useCallback(() => {
+    if (Platform.OS !== "web") return;
+    focusWithRetries({
+      focus: () => messageInputRef.current?.focus(),
+      isFocused: () => {
+        const el = messageInputRef.current?.getNativeElement?.() ?? null;
+        return el != null && document.activeElement === el;
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    onFocusInput?.(focusInput);
+  }, [focusInput, onFocusInput]);
+
   const submitMessage = useCallback(
     async (text: string, images?: ImageAttachment[]) => {
       onMessageSent?.();
@@ -402,6 +425,10 @@ export function AgentInputArea({
       }
 
       switch (action.id) {
+        case "message-input.send":
+          return messageInputRef.current?.runKeyboardAction("send") ?? false;
+        case "message-input.dictation-confirm":
+          return messageInputRef.current?.runKeyboardAction("dictation-confirm") ?? false;
         case "message-input.focus":
           if (Platform.OS !== "web") {
             messageInputRef.current?.focus();
@@ -440,8 +467,10 @@ export function AgentInputArea({
     handlerId: keyboardHandlerIdRef.current,
     actions: [
       "message-input.focus",
+      "message-input.send",
       "message-input.dictation-toggle",
       "message-input.dictation-cancel",
+      "message-input.dictation-confirm",
       "message-input.voice-toggle",
       "message-input.voice-mute-toggle",
     ],
@@ -567,14 +596,14 @@ export function AgentInputArea({
           )}
         </TooltipTrigger>
         <TooltipContent side="top" align="center" offset={8}>
-            <View style={styles.tooltipRow}>
-              <Text style={styles.tooltipText}>Interrupt</Text>
-              {dictationCancelKeys ? (
-                <Shortcut chord={dictationCancelKeys} style={styles.tooltipShortcut} />
-              ) : null}
-            </View>
-          </TooltipContent>
-        </Tooltip>
+          <View style={styles.tooltipRow}>
+            <Text style={styles.tooltipText}>Interrupt</Text>
+            {dictationCancelKeys ? (
+              <Shortcut chord={dictationCancelKeys} style={styles.tooltipShortcut} />
+            ) : null}
+          </View>
+        </TooltipContent>
+      </Tooltip>
     ) : null;
 
   const rightContent = (
@@ -612,11 +641,28 @@ 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} />
     ) : (
-      <AgentStatusBar agentId={agentId} serverId={serverId} />
+      <AgentStatusBar agentId={agentId} serverId={serverId} onDropdownClose={focusInput} />
     );
 
   return (
@@ -691,10 +737,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}
@@ -766,6 +814,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.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
+  getFeatureHighlightColor,
+  getFeatureTooltip,
   getStatusSelectorHint,
   normalizeModelId,
   resolveAgentModelSelection,
@@ -13,6 +15,31 @@ describe("getStatusSelectorHint", () => {
   });
 });
 
+describe("feature metadata helpers", () => {
+  it("prefers explicit feature tooltip copy", () => {
+    expect(
+      getFeatureTooltip({
+        label: "Plan",
+        tooltip: "Toggle plan mode",
+      }),
+    ).toBe("Toggle plan mode");
+  });
+
+  it("falls back to the feature label when no tooltip is provided", () => {
+    expect(
+      getFeatureTooltip({
+        label: "Custom",
+      }),
+    ).toBe("Custom");
+  });
+
+  it("maps feature highlight colors by feature id", () => {
+    expect(getFeatureHighlightColor("fast_mode")).toBe("yellow");
+    expect(getFeatureHighlightColor("plan_mode")).toBe("blue");
+    expect(getFeatureHighlightColor("other")).toBe("default");
+  });
+});
+
 describe("normalizeModelId", () => {
   it("treats empty values as unset", () => {
     expect(normalizeModelId("")).toBeNull();

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

@@ -1,13 +1,22 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { View, Text, Platform, Pressable, Keyboard } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useShallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
-import { Brain, ChevronDown, ShieldAlert, ShieldCheck, ShieldOff } from "lucide-react-native";
+import {
+  Brain,
+  ChevronDown,
+  ListTodo,
+  Settings2,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldOff,
+  Zap,
+} from "lucide-react-native";
 import { getProviderIcon } from "@/components/provider-icons";
 import { CombinedModelSelector } from "@/components/combined-model-selector";
-import { useQuery } from "@tanstack/react-query";
 import { useSessionStore } from "@/stores/session-store";
+import { useProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import {
   buildFavoriteModelKey,
   mergeProviderPreferences,
@@ -24,6 +33,7 @@ import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/com
 import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type {
+  AgentFeature,
   AgentMode,
   AgentModelDefinition,
   AgentProvider,
@@ -36,17 +46,18 @@ import {
   type AgentModeIcon,
 } from "@server/server/agent/provider-manifest";
 import {
+  getFeatureHighlightColor,
+  getFeatureTooltip,
   getStatusSelectorHint,
   resolveAgentModelSelection,
 } from "@/components/agent-status-bar.utils";
-import { isProviderModelsQueryLoading } from "@/components/agent-status-bar.model-loading";
 
 type StatusOption = {
   id: string;
   label: string;
 };
 
-type StatusSelector = "provider" | "mode" | "model" | "thinking";
+type StatusSelector = "provider" | "mode" | "model" | "thinking" | `feature-${string}`;
 
 const PROVIDER_DEFINITION_MAP = new Map(
   AGENT_PROVIDER_DEFINITIONS.map((definition) => [definition.id, definition]),
@@ -63,6 +74,7 @@ type ControlledAgentStatusBarProps = {
   modelOptions?: StatusOption[];
   selectedModelId?: string;
   onSelectModel?: (modelId: string) => void;
+  onSelectProviderAndModel?: (provider: string, modelId: string) => void;
   thinkingOptions?: StatusOption[];
   selectedThinkingOptionId?: string;
   onSelectThinkingOption?: (thinkingOptionId: string) => void;
@@ -73,6 +85,10 @@ type ControlledAgentStatusBarProps = {
   canSelectModelProvider?: (providerId: string) => boolean;
   favoriteKeys?: Set<string>;
   onToggleFavoriteModel?: (provider: string, modelId: string) => void;
+  features?: AgentFeature[];
+  onSetFeature?: (featureId: string, value: unknown) => void;
+  onDropdownClose?: () => void;
+  onModelSelectorOpen?: () => void;
 };
 
 export interface DraftAgentStatusBarProps {
@@ -92,12 +108,17 @@ export interface DraftAgentStatusBarProps {
   thinkingOptions: NonNullable<AgentModelDefinition["thinkingOptions"]>;
   selectedThinkingOptionId: string;
   onSelectThinkingOption: (thinkingOptionId: string) => void;
+  features?: AgentFeature[];
+  onSetFeature?: (featureId: string, value: unknown) => void;
+  onDropdownClose?: () => void;
+  onModelSelectorOpen?: () => void;
   disabled?: boolean;
 }
 
 interface AgentStatusBarProps {
   agentId: string;
   serverId: string;
+  onDropdownClose?: () => void;
 }
 
 function findOptionLabel(
@@ -112,6 +133,38 @@ function findOptionLabel(
   return selected?.label ?? fallback;
 }
 
+const FEATURE_ICONS: Record<string, typeof Zap> = {
+  "list-todo": ListTodo,
+  zap: Zap,
+};
+
+function getFeatureIcon(icon?: string) {
+  return (icon && FEATURE_ICONS[icon]) || Settings2;
+}
+
+function getFeatureIconColor(
+  featureId: string,
+  enabled: boolean,
+  palette: {
+    blue: { 400: string };
+    yellow: { 400: string };
+  },
+  foregroundMuted: string,
+): string {
+  if (!enabled) {
+    return foregroundMuted;
+  }
+
+  switch (getFeatureHighlightColor(featureId)) {
+    case "blue":
+      return palette.blue[400];
+    case "yellow":
+      return palette.yellow[400];
+    default:
+      return foregroundMuted;
+  }
+}
+
 const MODE_ICONS = {
   ShieldCheck,
   ShieldAlert,
@@ -152,6 +205,7 @@ function ControlledStatusBar({
   modelOptions,
   selectedModelId,
   onSelectModel,
+  onSelectProviderAndModel,
   thinkingOptions,
   selectedThinkingOptionId,
   onSelectThinkingOption,
@@ -162,6 +216,10 @@ function ControlledStatusBar({
   canSelectModelProvider,
   favoriteKeys = new Set<string>(),
   onToggleFavoriteModel,
+  features,
+  onSetFeature,
+  onDropdownClose,
+  onModelSelectorOpen,
 }: ControlledAgentStatusBarProps) {
   const { theme } = useUnistyles();
   const isWeb = Platform.OS === "web";
@@ -203,13 +261,14 @@ function ControlledStatusBar({
     Boolean(providerOptions?.length) ||
     Boolean(modeOptions?.length) ||
     canSelectModel ||
-    Boolean(thinkingOptions?.length);
+    Boolean(thinkingOptions?.length) ||
+    Boolean(features?.length);
 
   if (!hasAnyControl) {
     return null;
   }
 
-  const modelDisabled = disabled || isModelLoading || !modelOptions || modelOptions.length === 0;
+  const modelDisabled = disabled;
 
   const SEARCH_THRESHOLD = 6;
 
@@ -241,7 +300,8 @@ function ControlledStatusBar({
     );
     return map;
   }, [modelOptions, provider]);
-  const effectiveProviderDefinitions = providerDefinitions ??
+  const effectiveProviderDefinitions =
+    providerDefinitions ??
     (PROVIDER_DEFINITION_MAP.has(provider) ? [PROVIDER_DEFINITION_MAP.get(provider)!] : []);
   const effectiveAllProviderModels = allProviderModels ?? fallbackAllProviderModels;
   const canSelectProviderInModelMenu = canSelectModelProvider ?? (() => true);
@@ -280,8 +340,11 @@ function ControlledStatusBar({
   const handleOpenChange = useCallback(
     (selector: StatusSelector) => (nextOpen: boolean) => {
       setOpenSelector(nextOpen ? selector : null);
+      if (!nextOpen) {
+        onDropdownClose?.();
+      }
     },
-    [],
+    [onDropdownClose],
   );
 
   const handleSelectorPress = useCallback(
@@ -352,6 +415,8 @@ function ControlledStatusBar({
                     onToggleFavorite={onToggleFavoriteModel}
                     isLoading={isModelLoading}
                     disabled={modelDisabled}
+                    onOpen={onModelSelectorOpen}
+                    onClose={onDropdownClose}
                   />
                 </View>
               </TooltipTrigger>
@@ -455,6 +520,105 @@ function ControlledStatusBar({
               />
             </>
           ) : null}
+
+          {features?.map((feature) => {
+            if (feature.type === "toggle") {
+              const FeatureIcon = getFeatureIcon(feature.icon);
+              return (
+                <Tooltip
+                  key={`feature-${feature.id}`}
+                  delayDuration={0}
+                  enabledOnDesktop
+                  enabledOnMobile={false}
+                >
+                  <TooltipTrigger asChild triggerRefProp="ref">
+                    <Pressable
+                      disabled={disabled}
+                      onPress={() => onSetFeature?.(feature.id, !feature.value)}
+                      style={({ pressed, hovered }) => [
+                        styles.modeIconBadge,
+                        hovered && styles.modeBadgeHovered,
+                        pressed && styles.modeBadgePressed,
+                        disabled && styles.disabledBadge,
+                      ]}
+                      accessibilityRole="button"
+                      accessibilityLabel={getFeatureTooltip(feature)}
+                      testID={`agent-feature-${feature.id}`}
+                    >
+                      <FeatureIcon
+                        size={theme.iconSize.md}
+                        color={getFeatureIconColor(
+                          feature.id,
+                          feature.value,
+                          theme.colors.palette,
+                          theme.colors.foregroundMuted,
+                        )}
+                      />
+                    </Pressable>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" align="center" offset={8}>
+                    <Text style={styles.tooltipText}>{getFeatureTooltip(feature)}</Text>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            }
+            if (feature.type === "select") {
+              const FeatureIcon = getFeatureIcon(feature.icon);
+              const selectedOption = feature.options.find((o) => o.id === feature.value);
+              return (
+                <DropdownMenu
+                  key={`feature-${feature.id}`}
+                  open={openSelector === `feature-${feature.id}`}
+                  onOpenChange={handleOpenChange(`feature-${feature.id}`)}
+                >
+                  <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+                    <TooltipTrigger asChild triggerRefProp="ref">
+                      <DropdownMenuTrigger
+                        disabled={disabled}
+                        style={({ pressed, hovered }) => [
+                          styles.modeBadge,
+                          hovered && styles.modeBadgeHovered,
+                          (pressed || openSelector === `feature-${feature.id}`) &&
+                            styles.modeBadgePressed,
+                          disabled && styles.disabledBadge,
+                        ]}
+                        accessibilityRole="button"
+                        accessibilityLabel={getFeatureTooltip(feature)}
+                        testID={`agent-feature-${feature.id}`}
+                      >
+                        <FeatureIcon
+                          size={theme.iconSize.md}
+                          color={theme.colors.foregroundMuted}
+                        />
+                        <Text style={styles.modeBadgeText}>
+                          {selectedOption?.label ?? feature.label}
+                        </Text>
+                        <ChevronDown
+                          size={theme.iconSize.sm}
+                          color={theme.colors.foregroundMuted}
+                        />
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" align="center" offset={8}>
+                      <Text style={styles.tooltipText}>{getFeatureTooltip(feature)}</Text>
+                    </TooltipContent>
+                  </Tooltip>
+                  <DropdownMenuContent side="top" align="start">
+                    {feature.options.map((option) => (
+                      <DropdownMenuItem
+                        key={option.id}
+                        selected={option.id === feature.value}
+                        onSelect={() => onSetFeature?.(feature.id, option.id)}
+                      >
+                        {option.label}
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              );
+            }
+            return null;
+          })}
         </>
       ) : (
         <>
@@ -490,24 +654,28 @@ function ControlledStatusBar({
                   selectedModel={selectedModelId ?? ""}
                   canSelectProvider={canSelectProviderInModelMenu}
                   onSelect={(selectedProviderId, modelId) => {
-                    if (selectedProviderId !== provider) {
-                      onSelectProvider?.(selectedProviderId);
+                    if (onSelectProviderAndModel) {
+                      onSelectProviderAndModel(selectedProviderId, modelId);
+                    } else {
+                      if (selectedProviderId !== provider) {
+                        onSelectProvider?.(selectedProviderId);
+                      }
+                      onSelectModel?.(modelId);
                     }
-                    onSelectModel?.(modelId);
                   }}
                   favoriteKeys={favoriteKeys}
                   onToggleFavorite={onToggleFavoriteModel}
                   isLoading={isModelLoading}
                   disabled={modelDisabled}
+                  onOpen={onModelSelectorOpen}
+                  onClose={onDropdownClose}
                   renderTrigger={({ selectedModelLabel }) => (
                     <View
-                      style={[
-                        styles.sheetSelect,
-                        modelDisabled && styles.disabledSheetSelect,
-                      ]}
+                      style={[styles.sheetSelect, modelDisabled && styles.disabledSheetSelect]}
                       pointerEvents="none"
                       testID="agent-preferences-model"
                     >
+                      <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                       <Text style={styles.sheetSelectText}>{selectedModelLabel}</Text>
                       <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                     </View>
@@ -533,6 +701,7 @@ function ControlledStatusBar({
                     accessibilityLabel="Select thinking option"
                     testID="agent-preferences-thinking"
                   >
+                    <Brain size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                     <Text style={styles.sheetSelectText}>{displayThinking}</Text>
                     <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
                   </DropdownMenuTrigger>
@@ -593,6 +762,83 @@ function ControlledStatusBar({
                 </DropdownMenu>
               </View>
             ) : null}
+
+            {features?.map((feature) => {
+              if (feature.type === "toggle") {
+                const FeatureIcon = getFeatureIcon(feature.icon);
+                return (
+                  <View key={`feature-${feature.id}`} style={styles.sheetSection}>
+                    <Pressable
+                      disabled={disabled}
+                      onPress={() => onSetFeature?.(feature.id, !feature.value)}
+                      style={({ pressed }) => [
+                        styles.sheetSelect,
+                        pressed && styles.sheetSelectPressed,
+                        disabled && styles.disabledSheetSelect,
+                      ]}
+                      accessibilityRole="button"
+                      accessibilityLabel={getFeatureTooltip(feature)}
+                      testID={`agent-feature-${feature.id}`}
+                    >
+                      <FeatureIcon
+                        size={theme.iconSize.md}
+                        color={getFeatureIconColor(
+                          feature.id,
+                          feature.value,
+                          theme.colors.palette,
+                          theme.colors.foregroundMuted,
+                        )}
+                      />
+                      <Text style={styles.sheetSelectText}>{feature.label}</Text>
+                      <Text style={styles.modeBadgeText}>{feature.value ? "On" : "Off"}</Text>
+                    </Pressable>
+                  </View>
+                );
+              }
+              if (feature.type === "select") {
+                const selectedOption = feature.options.find((o) => o.id === feature.value);
+                return (
+                  <View key={`feature-${feature.id}`} style={styles.sheetSection}>
+                    <DropdownMenu
+                      open={openSelector === `feature-${feature.id}`}
+                      onOpenChange={handleOpenChange(`feature-${feature.id}`)}
+                    >
+                      <DropdownMenuTrigger
+                        disabled={disabled}
+                        style={({ pressed }) => [
+                          styles.sheetSelect,
+                          pressed && styles.sheetSelectPressed,
+                          disabled && styles.disabledSheetSelect,
+                        ]}
+                        accessibilityRole="button"
+                        accessibilityLabel={getFeatureTooltip(feature)}
+                        testID={`agent-feature-${feature.id}`}
+                      >
+                        <Text style={styles.sheetSelectText}>
+                          {selectedOption?.label ?? feature.label}
+                        </Text>
+                        <ChevronDown
+                          size={theme.iconSize.md}
+                          color={theme.colors.foregroundMuted}
+                        />
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent side="top" align="start">
+                        {feature.options.map((option) => (
+                          <DropdownMenuItem
+                            key={option.id}
+                            selected={option.id === feature.value}
+                            onSelect={() => onSetFeature?.(feature.id, option.id)}
+                          >
+                            {option.label}
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </View>
+                );
+              }
+              return null;
+            })}
           </AdaptiveModalSheet>
         </>
       )}
@@ -602,7 +848,11 @@ function ControlledStatusBar({
 
 const EMPTY_MODES: AgentMode[] = [];
 
-export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
+export const AgentStatusBar = memo(function AgentStatusBar({
+  agentId,
+  serverId,
+  onDropdownClose,
+}: AgentStatusBarProps) {
   const { preferences, updatePreferences } = useFormPreferences();
   const agent = useSessionStore(
     useShallow((state) => {
@@ -614,7 +864,9 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
             currentModeId: currentAgent.currentModeId,
             runtimeModelId: currentAgent.runtimeInfo?.model ?? null,
             model: currentAgent.model,
+            features: currentAgent.features,
             thinkingOptionId: currentAgent.thinkingOptionId,
+            lastUsage: currentAgent.lastUsage,
           }
         : null;
     }),
@@ -626,52 +878,35 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
   );
   const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);
 
-  const modelsQuery = useQuery({
-    queryKey: ["providerModels", serverId, agent?.provider ?? "__missing_provider__"],
-    enabled: Boolean(client && agent?.provider),
-    staleTime: 5 * 60 * 1000,
-    queryFn: async () => {
-      if (!client || !agent) {
-        throw new Error("Daemon client unavailable");
-      }
-      const payload = await client.listProviderModels(agent.provider, { cwd: agent.cwd });
-      if (payload.error) {
-        throw new Error(payload.error);
-      }
-      return payload.models ?? [];
-    },
-  });
+  const {
+    entries: snapshotEntries,
+    isLoading: snapshotIsLoading,
+    isFetching: snapshotIsFetching,
+    invalidate: invalidateSnapshot,
+  } = useProvidersSnapshot(serverId);
+
+  const snapshotModels = useMemo(() => {
+    if (!snapshotEntries || !agent?.provider) {
+      return null;
+    }
+    const entry = snapshotEntries.find((e) => e.provider === agent.provider);
+    return entry?.models ?? null;
+  }, [snapshotEntries, agent?.provider]);
+
+  const models = snapshotModels;
 
   const agentProviderDefinitions = useMemo(() => {
     const definition = AGENT_PROVIDER_DEFINITIONS.find((d) => d.id === agent?.provider);
     return definition ? [definition] : [];
   }, [agent?.provider]);
 
-  const agentProviderModelQuery = useQuery({
-    queryKey: ["providerModels", serverId, agent?.provider, agent?.cwd ?? ""],
-    enabled: Boolean(client && agent?.cwd && agent?.provider),
-    staleTime: 5 * 60 * 1000,
-    queryFn: async () => {
-      if (!client || !agent) {
-        throw new Error("Daemon client unavailable");
-      }
-      const payload = await client.listProviderModels(agent.provider, { cwd: agent.cwd });
-      if (payload.error) {
-        throw new Error(payload.error);
-      }
-      return payload.models ?? [];
-    },
-  });
-
   const agentProviderModels = useMemo(() => {
     const map = new Map<string, AgentModelDefinition[]>();
-    if (agent?.provider && agentProviderModelQuery.data) {
-      map.set(agent.provider, agentProviderModelQuery.data);
+    if (agent?.provider && snapshotModels) {
+      map.set(agent.provider, snapshotModels);
     }
     return map;
-  }, [agent?.provider, agentProviderModelQuery.data]);
-
-  const models = modelsQuery.data ?? null;
+  }, [agent?.provider, snapshotModels]);
 
   const displayMode =
     availableModes.find((mode) => mode.id === agent?.currentModeId)?.label ||
@@ -696,7 +931,10 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
     return (models ?? []).map((model) => ({ id: model.id, label: model.label }));
   }, [models]);
   const favoriteKeys = useMemo(
-    () => new Set((preferences.favoriteModels ?? []).map((favorite) => buildFavoriteModelKey(favorite))),
+    () =>
+      new Set(
+        (preferences.favoriteModels ?? []).map((favorite) => buildFavoriteModelKey(favorite)),
+      ),
     [preferences.favoriteModels],
   );
 
@@ -715,7 +953,9 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
     <ControlledStatusBar
       provider={agent.provider}
       modeOptions={
-        modeOptions.length > 0 ? modeOptions : [{ id: agent.currentModeId ?? "", label: displayMode }]
+        modeOptions.length > 0
+          ? modeOptions
+          : [{ id: agent.currentModeId ?? "", label: displayMode }]
       }
       selectedModeId={agent.currentModeId ?? undefined}
       providerDefinitions={agentProviderDefinitions}
@@ -734,9 +974,9 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
         if (!client) {
           return;
         }
-        void updatePreferences(
+        void updatePreferences((current) =>
           mergeProviderPreferences({
-            preferences,
+            preferences: current,
             provider: agent.provider,
             updates: {
               model: modelId,
@@ -751,7 +991,9 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
       }}
       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);
         });
       }}
@@ -763,9 +1005,9 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
         }
         const activeModelId = modelSelection.activeModelId;
         if (activeModelId) {
-          void updatePreferences(
+          void updatePreferences((current) =>
             mergeProviderPreferences({
-              preferences,
+              preferences: current,
               provider: agent.provider,
               updates: {
                 model: activeModelId,
@@ -782,11 +1024,35 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
           console.warn("[AgentStatusBar] setAgentThinkingOption failed", error);
         });
       }}
-      isModelLoading={isProviderModelsQueryLoading(modelsQuery)}
+      features={agent.features}
+      onSetFeature={(featureId, value) => {
+        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}
     />
   );
-}
+});
 
 export function DraftAgentStatusBar({
   providerDefinitions,
@@ -805,6 +1071,10 @@ export function DraftAgentStatusBar({
   thinkingOptions,
   selectedThinkingOptionId,
   onSelectThinkingOption,
+  features,
+  onSetFeature,
+  onDropdownClose,
+  onModelSelectorOpen,
   disabled = false,
 }: DraftAgentStatusBarProps) {
   const isWeb = Platform.OS === "web";
@@ -824,7 +1094,10 @@ export function DraftAgentStatusBar({
     return thinkingOptions.map((option) => ({ id: option.id, label: option.label }));
   }, [thinkingOptions]);
   const favoriteKeys = useMemo(
-    () => new Set((preferences.favoriteModels ?? []).map((favorite) => buildFavoriteModelKey(favorite))),
+    () =>
+      new Set(
+        (preferences.favoriteModels ?? []).map((favorite) => buildFavoriteModelKey(favorite)),
+      ),
     [preferences.favoriteModels],
   );
 
@@ -843,12 +1116,16 @@ 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
           provider={selectedProvider}
@@ -858,6 +1135,9 @@ export function DraftAgentStatusBar({
           thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
           selectedThinkingOptionId={effectiveSelectedThinkingOption}
           onSelectThinkingOption={onSelectThinkingOption}
+          features={features}
+          onSetFeature={onSetFeature}
+          onDropdownClose={onDropdownClose}
           disabled={disabled}
         />
       </View>
@@ -870,28 +1150,36 @@ export function DraftAgentStatusBar({
   }));
 
   return (
-    <ControlledStatusBar
-      provider={selectedProvider}
-      providerDefinitions={providerDefinitions}
-      allProviderModels={allProviderModels}
-      modeOptions={mappedModeOptions}
-      selectedModeId={effectiveSelectedMode}
-      onSelectMode={onSelectMode}
-      modelOptions={modelOptions}
-      selectedModelId={selectedModel}
-      onSelectModel={(modelId) => onSelectModel(modelId)}
-      isModelLoading={isAllModelsLoading}
-      favoriteKeys={favoriteKeys}
-      onToggleFavoriteModel={(provider, modelId) => {
-        void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
-          console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
-        });
-      }}
-      thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
-      selectedThinkingOptionId={effectiveSelectedThinkingOption}
-      onSelectThinkingOption={onSelectThinkingOption}
-      disabled={disabled}
-    />
+    <>
+      <ControlledStatusBar
+        provider={selectedProvider}
+        providerDefinitions={providerDefinitions}
+        allProviderModels={allProviderModels}
+        modeOptions={mappedModeOptions}
+        selectedModeId={effectiveSelectedMode}
+        onSelectMode={onSelectMode}
+        modelOptions={modelOptions}
+        selectedModelId={selectedModel}
+        onSelectModel={(modelId) => onSelectModel(modelId)}
+        onSelectProviderAndModel={onSelectProviderAndModel}
+        isModelLoading={isAllModelsLoading}
+        favoriteKeys={favoriteKeys}
+        onToggleFavoriteModel={(provider, modelId) => {
+          void updatePreferences((current) =>
+            toggleFavoriteModel({ preferences: current, provider, modelId }),
+          ).catch((error) => {
+            console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
+          });
+        }}
+        thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
+        selectedThinkingOptionId={effectiveSelectedThinkingOption}
+        onSelectThinkingOption={onSelectThinkingOption}
+        features={features}
+        onSetFeature={onSetFeature}
+        onModelSelectorOpen={onModelSelectorOpen}
+        disabled={disabled}
+      />
+    </>
   );
 }
 

packages/app/src/components/agent-status-bar.utils.ts

@@ -1,6 +1,7 @@
-import type { AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
+import type { AgentFeature, AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
 
 export type ExplainedStatusSelector = "mode" | "model" | "thinking";
+export type FeatureHighlightColor = "blue" | "default" | "yellow";
 
 export function getStatusSelectorHint(selector: ExplainedStatusSelector): string {
   switch (selector) {
@@ -21,6 +22,21 @@ export function normalizeModelId(modelId: string | null | undefined): string | n
   return normalized;
 }
 
+export function getFeatureTooltip(feature: Pick<AgentFeature, "label" | "tooltip">): string {
+  return feature.tooltip ?? feature.label;
+}
+
+export function getFeatureHighlightColor(featureId: string): FeatureHighlightColor {
+  switch (featureId) {
+    case "fast_mode":
+      return "yellow";
+    case "plan_mode":
+      return "blue";
+    default:
+      return "default";
+  }
+}
+
 export function resolveAgentModelSelection(input: {
   models: AgentModelDefinition[] | null;
   runtimeModelId: string | null | undefined;
@@ -36,8 +52,7 @@ export function resolveAgentModelSelection(input: {
       : null;
   const preferredModelId =
     runtimeSelectedModel?.id ?? normalizedConfiguredModelId ?? normalizedRuntimeModelId;
-  const fallbackModel =
-    models?.find((model) => model.isDefault) ?? models?.[0] ?? null;
+  const fallbackModel = models?.find((model) => model.isDefault) ?? models?.[0] ?? null;
   const selectedModel =
     models && preferredModelId
       ? (models.find((model) => model.id === preferredModelId) ?? fallbackModel ?? null)

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

@@ -9,8 +9,8 @@ import {
   useState,
 } from "react";
 import { View, Text, Pressable, Platform, ActivityIndicator } from "react-native";
-import Markdown from "react-native-markdown-display";
-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, {
@@ -27,6 +27,7 @@ import { Check, ChevronDown, X } from "lucide-react-native";
 import { usePanelStore } from "@/stores/panel-store";
 import {
   AssistantMessage,
+  SpeakMessage,
   UserMessage,
   ActivityLog,
   ToolCall,
@@ -36,9 +37,13 @@ import {
   MessageOuterSpacingProvider,
   type InlinePathTarget,
 } from "./message";
+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";
@@ -59,9 +64,7 @@ import {
   type BottomAnchorLocalRequest,
   type BottomAnchorRouteRequest,
 } from "./use-bottom-anchor-controller";
-import { createMarkdownStyles } from "@/styles/markdown-styles";
 import { MAX_CONTENT_WIDTH } from "@/constants/layout";
-import { getMarkdownListMarker } from "@/utils/markdown-list";
 import { normalizeInlinePathTarget } from "@/utils/inline-path";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 import { useStableEvent } from "@/hooks/use-stable-event";
@@ -107,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({
@@ -180,7 +183,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             workspaceId,
             target: { kind: "file", path: normalized.file },
           });
-          router.navigate(route as any);
+          router.navigate(route);
           return;
         }
 
@@ -269,44 +272,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [looseGap, tightGap],
     );
 
-    // ---------------------------------------------------------------------------
-    // DEBUG: track when render callback deps change
-    // ---------------------------------------------------------------------------
-    const debugStreamPrevRef = useRef<Record<string, unknown>>({});
-    useEffect(() => {
-      const prev = debugStreamPrevRef.current;
-      const curr: Record<string, unknown> = {
-        // handleInlinePathPress deps (line 196-205)
-        "hip.agent.cwd": agent.cwd,
-        "hip.openFileExplorer": openFileExplorer,
-        "hip.requestDirectoryListing": requestDirectoryListing,
-        "hip.resolvedServerId": resolvedServerId,
-        "hip.router": router,
-        "hip.setExplorerTabForCheckout": setExplorerTabForCheckout,
-        "hip.onOpenWorkspaceFile": onOpenWorkspaceFile,
-        "hip.workspaceId": workspaceId,
-        // top-level deps
-        handleInlinePathPress,
-        "agent.status": agent.status,
-        streamRenderStrategy,
-        getGapBetween,
-        streamItems,
-        "streamItems.length": streamItems.length,
-        streamHead,
-        baseRenderModel,
-      };
-      const changed: string[] = [];
-      for (const key of Object.keys(curr)) {
-        if (!Object.is(prev[key], curr[key])) {
-          changed.push(key);
-        }
-      }
-      if (changed.length > 0 && Object.keys(prev).length > 0) {
-        console.log("[AgentStreamView] deps changed:", changed.join(", "));
-      }
-      debugStreamPrevRef.current = curr;
-    });
-
     const renderStreamItemContent = useCallback(
       (
         item: StreamItem,
@@ -366,9 +331,10 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
                 timestamp={item.timestamp.getTime()}
                 onInlinePathPress={handleInlinePathPress}
                 workspaceRoot={workspaceRoot}
+                serverId={serverId}
+                client={client}
               />
             );
-
           case "thought": {
             const nextItem = getStreamNeighborItem({
               strategy: streamRenderStrategy,
@@ -400,6 +366,18 @@ 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}
@@ -732,12 +710,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) {
@@ -755,90 +756,6 @@ function PermissionRequestCard({
     return undefined;
   }, [request]);
 
-  const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
-
-  const markdownRules = useMemo(() => {
-    return {
-      text: (
-        node: any,
-        _children: React.ReactNode[],
-        _parent: any,
-        styles: any,
-        inheritedStyles: any = {},
-      ) => (
-        <Text key={node.key} style={[inheritedStyles, styles.text]}>
-          {node.content}
-        </Text>
-      ),
-      textgroup: (
-        node: any,
-        children: React.ReactNode[],
-        _parent: any,
-        styles: any,
-        inheritedStyles: any = {},
-      ) => (
-        <Text key={node.key} style={[inheritedStyles, styles.textgroup]}>
-          {children}
-        </Text>
-      ),
-      code_block: (
-        node: any,
-        _children: React.ReactNode[],
-        _parent: any,
-        styles: any,
-        inheritedStyles: any = {},
-      ) => (
-        <Text key={node.key} style={[inheritedStyles, styles.code_block]}>
-          {node.content}
-        </Text>
-      ),
-      fence: (
-        node: any,
-        _children: React.ReactNode[],
-        _parent: any,
-        styles: any,
-        inheritedStyles: any = {},
-      ) => (
-        <Text key={node.key} style={[inheritedStyles, styles.fence]}>
-          {node.content}
-        </Text>
-      ),
-      code_inline: (
-        node: any,
-        _children: React.ReactNode[],
-        _parent: any,
-        styles: any,
-        inheritedStyles: any = {},
-      ) => (
-        <Text key={node.key} style={[inheritedStyles, styles.code_inline]}>
-          {node.content}
-        </Text>
-      ),
-      bullet_list: (node: any, children: React.ReactNode[], _parent: any, styles: any) => (
-        <View key={node.key} style={styles.bullet_list}>
-          {children}
-        </View>
-      ),
-      ordered_list: (node: any, children: React.ReactNode[], _parent: any, styles: any) => (
-        <View key={node.key} style={styles.ordered_list}>
-          {children}
-        </View>
-      ),
-      list_item: (node: any, children: React.ReactNode[], parent: any, styles: any) => {
-        const { isOrdered, marker } = getMarkdownListMarker(node, parent);
-        const iconStyle = isOrdered ? styles.ordered_list_icon : styles.bullet_list_icon;
-        const contentStyle = isOrdered ? styles.ordered_list_content : styles.bullet_list_content;
-
-        return (
-          <View key={node.key} style={[styles.list_item, { flexShrink: 0 }]}>
-            <Text style={iconStyle}>{marker}</Text>
-            <Text style={[contentStyle, { flex: 1, flexShrink: 1, minWidth: 0 }]}>{children}</Text>
-          </View>
-        );
-      },
-    };
-  }, []);
-
   const permissionMutation = useMutation({
     mutationFn: async (input: {
       agentId: string;
@@ -862,11 +779,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) => {
@@ -880,6 +797,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 (
@@ -891,6 +826,79 @@ function PermissionRequestCard({
     );
   }
 
+  const footer = (
+    <>
+      <Text
+        testID="permission-request-question"
+        style={[permissionStyles.question, { color: theme.colors.foregroundMuted }]}
+      >
+        How would you like to proceed?
+      </Text>
+
+      <View
+        style={[
+          permissionStyles.optionsContainer,
+          !isMobile && permissionStyles.optionsContainerDesktop,
+        ]}
+      >
+        {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}`;
+
+          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>
+    </>
+  );
+
+  if (isPlanRequest && planMarkdown) {
+    return (
+      <PlanCard
+        title={title}
+        description={description}
+        text={planMarkdown}
+        footer={footer}
+        disableOuterSpacing
+      />
+    );
+  }
+
   return (
     <View
       style={[
@@ -910,16 +918,7 @@ function PermissionRequestCard({
       ) : null}
 
       {planMarkdown ? (
-        <View style={permissionStyles.section}>
-          {!isPlanRequest ? (
-            <Text style={[permissionStyles.sectionTitle, { color: theme.colors.foregroundMuted }]}>
-              Proposed plan
-            </Text>
-          ) : null}
-          <Markdown style={markdownStyles} rules={markdownRules}>
-            {planMarkdown}
-          </Markdown>
-        </View>
+        <PlanCard title="Proposed plan" text={planMarkdown} disableOuterSpacing />
       ) : null}
 
       {!isPlanRequest ? (
@@ -935,78 +934,7 @@ function PermissionRequestCard({
         />
       ) : null}
 
-      <Text
-        testID="permission-request-question"
-        style={[permissionStyles.question, { color: theme.colors.foregroundMuted }]}
-      >
-        How would you like to proceed?
-      </Text>
-
-      <View
-        style={[
-          permissionStyles.optionsContainer,
-          !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>
-
-        <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>
-      </View>
+      {footer}
     </View>
   );
 }

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

@@ -1,5 +1,9 @@
 import { describe, expect, it } from "vitest";
 import type { StreamItem } from "@/types/stream";
+import {
+  clearAssistantImageMetadataCache,
+  setAssistantImageMetadata,
+} from "@/utils/assistant-image-metadata";
 import {
   DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS,
   DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD,
@@ -128,6 +132,25 @@ describe("estimateStreamItemHeight", () => {
 
     expect(estimateStreamItemHeight(item)).toBe(220);
   });
+
+  it("uses cached assistant image metadata when available", () => {
+    clearAssistantImageMetadataCache();
+    setAssistantImageMetadata(
+      {
+        source: "https://example.com/tall.png",
+      },
+      { width: 800, height: 1600 },
+    );
+
+    const item: StreamItem = {
+      kind: "assistant_message",
+      id: "a-image",
+      text: "Look at this\n\n![Screenshot](https://example.com/tall.png)",
+      timestamp: createTimestamp(2),
+    };
+
+    expect(estimateStreamItemHeight(item)).toBeGreaterThan(220);
+  });
 });
 
 describe("web virtualization test overrides", () => {

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

@@ -1,4 +1,5 @@
 import type { StreamItem } from "@/types/stream";
+import { estimateAssistantMessageHeightFromCache } from "@/utils/assistant-image-metadata";
 
 export const DEFAULT_WEB_PARTIAL_VIRTUALIZATION_THRESHOLD = 100;
 export const DEFAULT_WEB_MOUNTED_RECENT_STREAM_ITEMS = 50;
@@ -45,7 +46,7 @@ export function estimateStreamItemHeight(item: StreamItem): number {
     case "user_message":
       return item.images && item.images.length > 0 ? 220 : 96;
     case "assistant_message":
-      return 220;
+      return estimateAssistantMessageHeightFromCache(item.text) ?? 220;
     case "tool_call":
       return 136;
     case "thought":

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

@@ -0,0 +1,123 @@
+import { useRef } from "react";
+import { Pressable, Text, View } from "react-native";
+import { useQueryClient } from "@tanstack/react-query";
+import { ChevronDown, GitBranch } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { useToast } from "@/contexts/toast-context";
+import { useBranchSwitcher } from "@/hooks/use-branch-switcher";
+
+interface BranchSwitcherProps {
+  currentBranchName: string | null;
+  title: string;
+  serverId: string;
+  workspaceId: string;
+  isGitCheckout: boolean;
+}
+
+export function BranchSwitcher({
+  currentBranchName,
+  title,
+  serverId,
+  workspaceId,
+  isGitCheckout,
+}: BranchSwitcherProps) {
+  const { theme } = useUnistyles();
+  const anchorRef = useRef<View>(null);
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const toast = useToast();
+  const queryClient = useQueryClient();
+
+  const { branchOptions, isOpen, setIsOpen, handleBranchSelect } = useBranchSwitcher({
+    client,
+    normalizedServerId: serverId,
+    normalizedWorkspaceId: workspaceId,
+    currentBranchName,
+    isGitCheckout,
+    isConnected,
+    toast,
+    queryClient,
+  });
+
+  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={() => setIsOpen(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={handleBranchSelect}
+        searchable
+        placeholder="Switch branch..."
+        searchPlaceholder="Filter branches..."
+        emptyText="No branches found."
+        title="Switch branch"
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        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.test.ts

@@ -42,14 +42,25 @@ describe("combined model selector helpers", () => {
   ];
 
   it("keeps enough data to search by model and provider name", async () => {
-    const rows = buildModelRows(providerDefinitions, new Map([
-      ["claude", claudeModels],
-      ["codex", codexModels],
-    ]));
+    const rows = buildModelRows(
+      providerDefinitions,
+      new Map([
+        ["claude", claudeModels],
+        ["codex", codexModels],
+      ]),
+    );
 
     expect(rows).toEqual([
-      expect.objectContaining({ providerLabel: "Claude", modelLabel: "Sonnet 4.6", modelId: "sonnet-4.6" }),
-      expect.objectContaining({ providerLabel: "Codex", modelLabel: "GPT-5.4", modelId: "gpt-5.4" }),
+      expect.objectContaining({
+        providerLabel: "Claude",
+        modelLabel: "Sonnet 4.6",
+        modelId: "sonnet-4.6",
+      }),
+      expect.objectContaining({
+        providerLabel: "Codex",
+        modelLabel: "GPT-5.4",
+        modelId: "gpt-5.4",
+      }),
     ]);
 
     expect(matchesSearch(rows[0]!, "claude")).toBe(true);
@@ -58,6 +69,6 @@ describe("combined model selector helpers", () => {
 
   it("builds an explicit trigger label for the selected provider and model", () => {
     expect(resolveProviderLabel(providerDefinitions, "codex")).toBe("Codex");
-    expect(buildSelectedTriggerLabel("Codex", "GPT-5.4")).toBe("Codex: GPT-5.4");
+    expect(buildSelectedTriggerLabel("Codex", "GPT-5.4")).toBe("GPT-5.4");
   });
 });

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

@@ -2,23 +2,21 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   View,
   Text,
+  TextInput,
   Pressable,
   Platform,
   ActivityIndicator,
   type GestureResponderEvent,
 } from "react-native";
+import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import {
-  ArrowLeft,
-  ChevronDown,
-  ChevronRight,
-  Search,
-  Star,
-} from "lucide-react-native";
+import { useIsCompactFormFactor } from "@/constants/layout";
+import { ArrowLeft, ChevronDown, ChevronRight, Search, Star } from "lucide-react-native";
 import type { AgentModelDefinition, AgentProvider } from "@server/server/agent/agent-sdk-types";
 import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
-import { Combobox, ComboboxItem, SearchInput } from "@/components/ui/combobox";
-import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+const IS_WEB = Platform.OS === "web";
+
+import { Combobox, ComboboxItem } from "@/components/ui/combobox";
 import { getProviderIcon } from "@/components/provider-icons";
 import type { FavoriteModelRow } from "@/hooks/use-form-preferences";
 import {
@@ -29,7 +27,8 @@ import {
   type SelectorModelRow,
 } from "./combined-model-selector.utils";
 
-const INLINE_MODEL_THRESHOLD = Number.POSITIVE_INFINITY;
+// TODO: this should be configured per provider in the provider manifest
+const PROVIDERS_WITH_MODEL_DESCRIPTIONS = new Set(["opencode", "pi"]);
 
 type SelectorView =
   | { kind: "all" }
@@ -51,6 +50,8 @@ interface CombinedModelSelectorProps {
     disabled: boolean;
     isOpen: boolean;
   }) => React.ReactNode;
+  onOpen?: () => void;
+  onClose?: () => void;
   disabled?: boolean;
 }
 
@@ -67,7 +68,6 @@ interface SelectorContentProps {
   canSelectProvider: (provider: string) => boolean;
   onToggleFavorite?: (provider: string, modelId: string) => void;
   onDrillDown: (providerId: string, providerLabel: string) => void;
-  onBack?: () => void;
 }
 
 function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
@@ -99,10 +99,29 @@ function partitionRows(
   return { favoriteRows, regularRows };
 }
 
+function sortFavoritesFirst(
+  rows: SelectorModelRow[],
+  favoriteKeys: Set<string>,
+): SelectorModelRow[] {
+  const favorites: SelectorModelRow[] = [];
+  const rest: SelectorModelRow[] = [];
+  for (const row of rows) {
+    if (favoriteKeys.has(row.favoriteKey)) {
+      favorites.push(row);
+    } else {
+      rest.push(row);
+    }
+  }
+  return [...favorites, ...rest];
+}
+
 function groupRowsByProvider(
   rows: SelectorModelRow[],
 ): Array<{ providerId: string; providerLabel: string; rows: SelectorModelRow[] }> {
-  const grouped = new Map<string, { providerId: string; providerLabel: string; rows: SelectorModelRow[] }>();
+  const grouped = new Map<
+    string,
+    { providerId: string; providerLabel: string; rows: SelectorModelRow[] }
+  >();
 
   for (const row of rows) {
     const existing = grouped.get(row.provider);
@@ -126,6 +145,7 @@ function ModelRow({
   isSelected,
   isFavorite,
   disabled = false,
+  elevated = false,
   onPress,
   onToggleFavorite,
 }: {
@@ -133,12 +153,12 @@ function ModelRow({
   isSelected: boolean;
   isFavorite: boolean;
   disabled?: boolean;
+  elevated?: boolean;
   onPress: () => void;
   onToggleFavorite?: (provider: string, modelId: string) => void;
 }) {
   const { theme } = useUnistyles();
   const ProviderIcon = getProviderIcon(row.provider);
-  const isWeb = Platform.OS === "web";
 
   const handleToggleFavorite = useCallback(
     (event: GestureResponderEvent) => {
@@ -148,13 +168,17 @@ function ModelRow({
     [onToggleFavorite, row.modelId, row.provider],
   );
 
-  const item = (
+  const showDescription = row.description && PROVIDERS_WITH_MODEL_DESCRIPTIONS.has(row.provider);
+
+  return (
     <ComboboxItem
       label={row.modelLabel}
+      description={showDescription ? row.description : undefined}
       selected={isSelected}
       disabled={disabled}
+      elevated={elevated}
       onPress={onPress}
-      leadingSlot={<ProviderIcon size={14} color={theme.colors.foregroundMuted} />}
+      leadingSlot={<ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
       trailingSlot={
         onToggleFavorite && !disabled ? (
           <Pressable
@@ -187,21 +211,6 @@ function ModelRow({
       }
     />
   );
-
-  if (!isWeb || !row.description) {
-    return item;
-  }
-
-  return (
-    <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-      <TooltipTrigger asChild triggerRefProp="ref">
-        <View>{item}</View>
-      </TooltipTrigger>
-      <TooltipContent side="right" align="center" offset={4}>
-        <Text style={styles.tooltipText}>{row.description}</Text>
-      </TooltipContent>
-    </Tooltip>
-  );
 }
 
 function FavoritesSection({
@@ -228,7 +237,7 @@ function FavoritesSection({
   }
 
   return (
-    <View>
+    <View style={styles.favoritesContainer}>
       <View style={styles.sectionHeading}>
         <Text style={styles.sectionHeadingText}>Favorites</Text>
       </View>
@@ -239,11 +248,11 @@ function FavoritesSection({
           isSelected={row.provider === selectedProvider && row.modelId === selectedModel}
           isFavorite={favoriteKeys.has(row.favoriteKey)}
           disabled={!canSelectProvider(row.provider)}
+          elevated
           onPress={() => onSelect(row.provider, row.modelId)}
           onToggleFavorite={onToggleFavorite}
         />
       ))}
-      <View style={styles.separator} />
     </View>
   );
 }
@@ -258,6 +267,7 @@ function GroupedProviderRows({
   canSelectProvider,
   onToggleFavorite,
   onDrillDown,
+  viewKind,
 }: {
   providerDefinitions: AgentProviderDefinition[];
   groupedRows: Array<{ providerId: string; providerLabel: string; rows: SelectorModelRow[] }>;
@@ -268,27 +278,25 @@ function GroupedProviderRows({
   canSelectProvider: (provider: string) => boolean;
   onToggleFavorite?: (provider: string, modelId: string) => void;
   onDrillDown: (providerId: string, providerLabel: string) => void;
+  viewKind: SelectorView["kind"];
 }) {
   const { theme } = useUnistyles();
 
   return (
     <View>
       {groupedRows.map((group, index) => {
-        const providerDefinition = providerDefinitions.find((definition) => definition.id === group.providerId);
+        const providerDefinition = providerDefinitions.find(
+          (definition) => definition.id === group.providerId,
+        );
         const ProvIcon = getProviderIcon(group.providerId);
-        const isInline = group.rows.length <= INLINE_MODEL_THRESHOLD;
+        const isInline = viewKind === "provider";
 
         return (
           <View key={group.providerId}>
             {index > 0 ? <View style={styles.separator} /> : null}
             {isInline ? (
               <>
-                <View style={styles.sectionHeading}>
-                  <Text style={styles.sectionHeadingText}>
-                    {providerDefinition?.label ?? group.providerLabel}
-                  </Text>
-                </View>
-                {group.rows.map((row) => (
+                {sortFavoritesFirst(group.rows, favoriteKeys).map((row) => (
                   <ModelRow
                     key={row.favoriteKey}
                     row={row}
@@ -309,11 +317,13 @@ function GroupedProviderRows({
                   pressed && styles.drillDownRowPressed,
                 ]}
               >
-                <ProvIcon size={14} color={theme.colors.foregroundMuted} />
+                <ProvIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
                 <Text style={styles.drillDownText}>{group.providerLabel}</Text>
                 <View style={styles.drillDownTrailing}>
-                  <Text style={styles.drillDownCount}>{group.rows.length}</Text>
-                  <ChevronRight size={14} color={theme.colors.foregroundMuted} />
+                  <Text style={styles.drillDownCount}>
+                    {group.rows.length} {group.rows.length === 1 ? "model" : "models"}
+                  </Text>
+                  <ChevronRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
                 </View>
               </Pressable>
             )}
@@ -324,6 +334,47 @@ function GroupedProviderRows({
   );
 }
 
+function ProviderSearchInput({
+  value,
+  onChangeText,
+  autoFocus = false,
+}: {
+  value: string;
+  onChangeText: (text: string) => void;
+  autoFocus?: boolean;
+}) {
+  const { theme } = useUnistyles();
+  const inputRef = useRef<TextInput>(null);
+  const isMobile = useIsCompactFormFactor();
+  const InputComponent = isMobile ? BottomSheetTextInput : TextInput;
+
+  useEffect(() => {
+    if (autoFocus && Platform.OS === "web" && inputRef.current) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [autoFocus]);
+
+  return (
+    <View style={styles.providerSearchContainer}>
+      <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+      <InputComponent
+        ref={inputRef as any}
+        // @ts-expect-error - outlineStyle is web-only
+        style={[styles.providerSearchInput, Platform.OS === "web" && { outlineStyle: "none" }]}
+        placeholder="Search models..."
+        placeholderTextColor={theme.colors.foregroundMuted}
+        value={value}
+        onChangeText={onChangeText}
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+    </View>
+  );
+}
+
 function SelectorContent({
   view,
   providerDefinitions,
@@ -337,8 +388,8 @@ function SelectorContent({
   canSelectProvider,
   onToggleFavorite,
   onDrillDown,
-  onBack,
 }: SelectorContentProps) {
+  const { theme } = useUnistyles();
   const allRows = useMemo(
     () => buildModelRows(providerDefinitions, allProviderModels),
     [allProviderModels, providerDefinitions],
@@ -363,35 +414,41 @@ function SelectorContent({
     [favoriteKeys, visibleRows],
   );
 
-  const groupedRegularRows = useMemo(() => groupRowsByProvider(regularRows), [regularRows]);
+  // Group ALL visible rows by provider — favorites are a cross-cutting view,
+  // not a partition. A model being favorited doesn't remove it from its provider.
+  const allGroupedRows = useMemo(() => groupRowsByProvider(visibleRows), [visibleRows]);
+
+  // When searching at Level 1, filter grouped rows to only providers whose name or models match
+  const filteredGroupedRows = useMemo(() => {
+    if (view.kind === "provider" || !normalizedQuery) {
+      return allGroupedRows;
+    }
+    return allGroupedRows.filter(
+      (group) =>
+        group.providerLabel.toLowerCase().includes(normalizedQuery) || group.rows.length > 0,
+    );
+  }, [allGroupedRows, normalizedQuery, view.kind]);
+
+  const hasResults = favoriteRows.length > 0 || filteredGroupedRows.length > 0;
 
   return (
     <View>
-      {view.kind === "provider" ? (
-        <ProviderBackButton providerId={view.providerId} providerLabel={view.providerLabel} onBack={onBack} />
+      {view.kind === "all" ? (
+        <FavoritesSection
+          favoriteRows={favoriteRows}
+          selectedProvider={selectedProvider}
+          selectedModel={selectedModel}
+          favoriteKeys={favoriteKeys}
+          onSelect={onSelect}
+          canSelectProvider={canSelectProvider}
+          onToggleFavorite={onToggleFavorite}
+        />
       ) : null}
 
-      <SearchInput
-        placeholder={view.kind === "provider" ? "Search models..." : "Search models or providers..."}
-        value={searchQuery}
-        onChangeText={onSearchChange}
-        autoFocus={Platform.OS === "web"}
-      />
-
-      <FavoritesSection
-        favoriteRows={favoriteRows}
-        selectedProvider={selectedProvider}
-        selectedModel={selectedModel}
-        favoriteKeys={favoriteKeys}
-        onSelect={onSelect}
-        canSelectProvider={canSelectProvider}
-        onToggleFavorite={onToggleFavorite}
-      />
-
-      {groupedRegularRows.length > 0 ? (
+      {filteredGroupedRows.length > 0 ? (
         <GroupedProviderRows
           providerDefinitions={providerDefinitions}
-          groupedRows={groupedRegularRows}
+          groupedRows={filteredGroupedRows}
           selectedProvider={selectedProvider}
           selectedModel={selectedModel}
           favoriteKeys={favoriteKeys}
@@ -399,12 +456,13 @@ function SelectorContent({
           canSelectProvider={canSelectProvider}
           onToggleFavorite={onToggleFavorite}
           onDrillDown={onDrillDown}
+          viewKind={view.kind}
         />
       ) : null}
 
-      {favoriteRows.length === 0 && groupedRegularRows.length === 0 ? (
+      {!hasResults ? (
         <View style={styles.emptyState}>
-          <Search size={16} color="#777" />
+          <Search size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
           <Text style={styles.emptyStateText}>No models match your search</Text>
         </View>
       ) : null}
@@ -437,8 +495,8 @@ function ProviderBackButton({
         pressed && styles.backButtonPressed,
       ]}
     >
-      <ArrowLeft size={14} color={theme.colors.foregroundMuted} />
-      <ProviderIcon size={14} color={theme.colors.foregroundMuted} />
+      <ArrowLeft size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+      <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
       <Text style={styles.backButtonText}>{providerLabel}</Text>
     </Pressable>
   );
@@ -455,6 +513,8 @@ export function CombinedModelSelector({
   favoriteKeys = new Set<string>(),
   onToggleFavorite,
   renderTrigger,
+  onOpen,
+  onClose,
   disabled = false,
 }: CombinedModelSelectorProps) {
   const { theme } = useUnistyles();
@@ -465,25 +525,37 @@ export function CombinedModelSelector({
   const [view, setView] = useState<SelectorView>({ kind: "all" });
   const [searchQuery, setSearchQuery] = useState("");
 
+  // Single-provider mode: only one provider with models → skip Level 1 entirely
+  const singleProviderView = useMemo<SelectorView | null>(() => {
+    const providers = Array.from(allProviderModels.keys());
+    if (providers.length !== 1) return null;
+    const providerId = providers[0]!;
+    const label = resolveProviderLabel(providerDefinitions, providerId);
+    return { kind: "provider", providerId, providerLabel: label };
+  }, [allProviderModels, providerDefinitions]);
+
   const handleOpenChange = useCallback(
     (open: boolean) => {
       setIsOpen(open);
-      setView({ kind: "all" });
-      if (!open) {
+      setView(singleProviderView ?? { kind: "all" });
+      if (open) {
+        onOpen?.();
+      } else {
         setSearchQuery("");
+        onClose?.();
       }
     },
-    [],
+    [onOpen, onClose, singleProviderView],
   );
 
   const handleSelect = useCallback(
     (provider: string, modelId: string) => {
       onSelect(provider as AgentProvider, modelId);
       setIsOpen(false);
-      setView({ kind: "all" });
+      setView(singleProviderView ?? { kind: "all" });
       setSearchQuery("");
     },
-    [onSelect],
+    [onSelect, singleProviderView],
   );
 
   const ProviderIcon = getProviderIcon(selectedProvider);
@@ -501,6 +573,15 @@ export function CombinedModelSelector({
     return model?.label ?? resolveDefaultModelLabel(models);
   }, [allProviderModels, isLoading, selectedModel, selectedProvider]);
 
+  const desktopFixedHeight = useMemo(() => {
+    if (view.kind !== "provider") {
+      return undefined;
+    }
+    const models = allProviderModels.get(view.providerId);
+    const modelCount = models?.length ?? 0;
+    return Math.min(80 + modelCount * 40, 400);
+  }, [allProviderModels, view]);
+
   const triggerLabel = useMemo(() => {
     if (selectedModelLabel === "Loading..." || selectedModelLabel === "Select model") {
       return selectedModelLabel;
@@ -568,7 +649,30 @@ export function CombinedModelSelector({
         stackBehavior="push"
         anchorRef={anchorRef}
         desktopPlacement="top-start"
+        desktopMinWidth={360}
+        desktopFixedHeight={desktopFixedHeight}
         title="Select model"
+        stickyHeader={
+          view.kind === "provider" ? (
+            <View style={styles.level2Header}>
+              {!singleProviderView ? (
+                <ProviderBackButton
+                  providerId={view.providerId}
+                  providerLabel={view.providerLabel}
+                  onBack={() => {
+                    setView({ kind: "all" });
+                    setSearchQuery("");
+                  }}
+                />
+              ) : null}
+              <ProviderSearchInput
+                value={searchQuery}
+                onChangeText={setSearchQuery}
+                autoFocus={Platform.OS === "web"}
+              />
+            </View>
+          ) : undefined
+        }
       >
         {isContentReady ? (
           <SelectorContent
@@ -586,13 +690,6 @@ export function CombinedModelSelector({
             onDrillDown={(providerId, providerLabel) => {
               setView({ kind: "provider", providerId, providerLabel });
             }}
-            onBack={
-              view.kind === "provider"
-                ? () => {
-                    setView({ kind: "all" });
-                  }
-                : undefined
-            }
           />
         ) : (
           <View style={styles.sheetLoadingState}>
@@ -634,17 +731,23 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: 0,
     height: "auto",
   },
+  favoritesContainer: {
+    backgroundColor: theme.colors.surface1,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
   separator: {
     height: 1,
     backgroundColor: theme.colors.border,
-    marginVertical: theme.spacing[1],
   },
   sectionHeading: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.spacing[2],
     paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[1],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[1],
+    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
   },
   sectionHeadingText: {
     fontSize: theme.fontSize.xs,
@@ -658,6 +761,7 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[2],
     minHeight: 36,
+    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
   },
   drillDownRowHovered: {
     backgroundColor: theme.colors.surface1,
@@ -667,8 +771,8 @@ const styles = StyleSheet.create((theme) => ({
   },
   drillDownText: {
     flex: 1,
-    fontSize: theme.fontSize.xs,
-    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
   },
   drillDownTrailing: {
     flexDirection: "row",
@@ -679,6 +783,11 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
   },
+  level2Header: {
+    backgroundColor: theme.colors.surface1,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+  },
   backButton: {
     flexDirection: "row",
     alignItems: "center",
@@ -687,9 +796,10 @@ const styles = StyleSheet.create((theme) => ({
     paddingVertical: theme.spacing[2],
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,
+    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
   },
   backButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
   },
   backButtonPressed: {
     backgroundColor: theme.colors.surface2,
@@ -720,10 +830,6 @@ const styles = StyleSheet.create((theme) => ({
   favoriteButtonPressed: {
     backgroundColor: theme.colors.surface1,
   },
-  tooltipText: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.xs,
-  },
   sheetLoadingState: {
     minHeight: 160,
     justifyContent: "center",
@@ -734,4 +840,17 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
   },
+  providerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.spacing[3],
+    gap: theme.spacing[2],
+    ...(IS_WEB ? {} : { marginHorizontal: theme.spacing[1] }),
+  },
+  providerSearchInput: {
+    flex: 1,
+    paddingVertical: theme.spacing[3],
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+  },
 }));

packages/app/src/components/combined-model-selector.utils.ts

@@ -8,7 +8,9 @@ export function resolveProviderLabel(
   providerDefinitions: AgentProviderDefinition[],
   providerId: string,
 ): string {
-  return providerDefinitions.find((definition) => definition.id === providerId)?.label ?? providerId;
+  return (
+    providerDefinitions.find((definition) => definition.id === providerId)?.label ?? providerId
+  );
 }
 
 export function buildSelectedTriggerLabel(providerLabel: string, modelLabel: string): string {
@@ -19,7 +21,9 @@ export function buildModelRows(
   providerDefinitions: AgentProviderDefinition[],
   allProviderModels: Map<string, AgentModelDefinition[]>,
 ): SelectorModelRow[] {
-  const providerLabelMap = new Map(providerDefinitions.map((definition) => [definition.id, definition.label]));
+  const providerLabelMap = new Map(
+    providerDefinitions.map((definition) => [definition.id, definition.label]),
+  );
   const rows: SelectorModelRow[] = [];
 
   for (const definition of providerDefinitions) {

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

@@ -1,5 +1,12 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { View, Text, Pressable, Platform, useWindowDimensions } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  Platform,
+  useWindowDimensions,
+  StyleSheet as RNStyleSheet,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useIsFocused } from "@react-navigation/native";
 import Animated, { useAnimatedStyle, useSharedValue, runOnJS } from "react-native-reanimated";
@@ -13,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";
@@ -41,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);
@@ -81,6 +88,7 @@ export function ExplorerSidebar({
     animateToOpen,
     animateToClose,
     isGesturing,
+    gestureAnimatingRef,
     closeGestureRef,
   } = useExplorerSidebarAnimation();
 
@@ -101,6 +109,11 @@ export function ExplorerSidebar({
     [closeToAgent, desktopFileExplorerOpen, isOpen, mobileView],
   );
 
+  const handleCloseFromGesture = useCallback(() => {
+    gestureAnimatingRef.current = true;
+    closeToAgent();
+  }, [closeToAgent, gestureAnimatingRef]);
+
   const enableSidebarCloseGesture = isMobile && isOpen;
 
   const handleTabPress = useCallback(
@@ -175,7 +188,7 @@ export function ExplorerSidebar({
           });
           if (shouldClose) {
             animateToClose();
-            runOnJS(handleClose)("swipe-close-gesture");
+            runOnJS(handleCloseFromGesture)();
           } else {
             animateToOpen();
           }
@@ -190,7 +203,7 @@ export function ExplorerSidebar({
       backdropOpacity,
       animateToOpen,
       animateToClose,
-      handleClose,
+      handleCloseFromGesture,
       isGesturing,
       closeGestureRef,
       closeTouchStartX,
@@ -251,18 +264,17 @@ export function ExplorerSidebar({
     return (
       <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
         {/* Backdrop */}
-        <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
-          <Pressable
-            style={styles.backdropPressable}
-            onPress={() => handleClose("backdrop-press")}
-          />
-        </Animated.View>
+        <Animated.View style={[explorerStaticStyles.backdrop, backdropAnimatedStyle]} />
 
         <GestureDetector gesture={closeGesture} touchAction="pan-y">
           <Animated.View
             style={[
-              styles.mobileSidebar,
-              { width: windowWidth, paddingTop: insets.top },
+              explorerStaticStyles.mobileSidebar,
+              {
+                width: windowWidth,
+                paddingTop: insets.top,
+                backgroundColor: theme.colors.surfaceSidebar,
+              },
               sidebarAnimatedStyle,
               mobileKeyboardInsetStyle,
             ]}
@@ -291,25 +303,32 @@ export function ExplorerSidebar({
   }
 
   return (
-    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insets.top }]}>
-      {/* Resize handle - absolutely positioned over left border */}
-      <GestureDetector gesture={resizeGesture}>
-        <View
-          style={[styles.resizeHandle, Platform.OS === "web" && ({ cursor: "col-resize" } as any)]}
-        />
-      </GestureDetector>
+    <Animated.View
+      style={[explorerStaticStyles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insets.top }]}
+    >
+      <View style={[styles.desktopSidebarBorder, { flex: 1 }]}>
+        {/* Resize handle - absolutely positioned over left border */}
+        <GestureDetector gesture={resizeGesture}>
+          <View
+            style={[
+              styles.resizeHandle,
+              Platform.OS === "web" && ({ cursor: "col-resize" } as any),
+            ]}
+          />
+        </GestureDetector>
 
-      <SidebarContent
-        activeTab={explorerTab}
-        onTabPress={handleTabPress}
-        onClose={() => handleClose("desktop-close-button")}
-        serverId={serverId}
-        workspaceId={workspaceId}
-        workspaceRoot={workspaceRoot}
-        isGit={isGit}
-        isMobile={false}
-        onOpenFile={onOpenFile}
-      />
+        <SidebarContent
+          activeTab={explorerTab}
+          onTabPress={handleTabPress}
+          onClose={() => handleClose("desktop-close-button")}
+          serverId={serverId}
+          workspaceId={workspaceId}
+          workspaceRoot={workspaceRoot}
+          isGit={isGit}
+          isMobile={false}
+          onOpenFile={onOpenFile}
+        />
+      </View>
     </Animated.View>
   );
 }
@@ -400,24 +419,28 @@ function SidebarContent({
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+// Static styles for Animated.Views — must NOT use Unistyles dynamic theme to
+// avoid the "Unable to find node on an unmounted component" crash when Unistyles
+// tries to patch the native node that Reanimated also manages.
+const explorerStaticStyles = RNStyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...RNStyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
-  backdropPressable: {
-    flex: 1,
-  },
   mobileSidebar: {
-    position: "absolute",
+    position: "absolute" as const,
     top: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: theme.colors.surfaceSidebar,
-    overflow: "hidden",
+    overflow: "hidden" as const,
   },
   desktopSidebar: {
-    position: "relative",
+    position: "relative" as const,
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
+  desktopSidebarBorder: {
     borderLeftWidth: 1,
     borderLeftColor: theme.colors.border,
     backgroundColor: theme.colors.surfaceSidebar,
@@ -458,7 +481,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();
@@ -117,18 +118,22 @@ export function FileExplorerPane({
       : undefined,
   );
 
-  const {
-    workspaceStateKey: actionsWorkspaceStateKey,
-    requestDirectoryListing,
-    requestFileDownloadToken,
-    selectExplorerEntry,
-  } = useFileExplorerActions({
-    serverId,
-    workspaceId,
-    workspaceRoot: normalizedWorkspaceRoot,
-  });
+  const { requestDirectoryListing, requestFileDownloadToken, selectExplorerEntry } =
+    useFileExplorerActions({
+      serverId,
+      workspaceId,
+      workspaceRoot: normalizedWorkspaceRoot,
+    });
   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 +149,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 +158,7 @@ export function FileExplorerPane({
 
   useEffect(() => {
     hasInitializedRef.current = false;
-    setExpandedPaths(new Set(["."]));
-  }, [actionsWorkspaceStateKey]);
+  }, [workspaceStateKey]);
 
   useEffect(() => {
     if (!hasWorkspaceScope) {
@@ -169,23 +172,33 @@ 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 +206,43 @@ 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 +839,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/git-actions-policy.test.ts

@@ -15,6 +15,7 @@ function createInput(overrides: Partial<BuildGitActionsInput> = {}): BuildGitAct
     baseRefAvailable: true,
     baseRefLabel: "main",
     aheadCount: 0,
+    behindBaseCount: 0,
     aheadOfOrigin: 0,
     behindOfOrigin: 0,
     shouldPromoteArchive: false,
@@ -25,6 +26,11 @@ function createInput(overrides: Partial<BuildGitActionsInput> = {}): BuildGitAct
         status: "idle",
         handler: () => undefined,
       },
+      pull: {
+        disabled: false,
+        status: "idle",
+        handler: () => undefined,
+      },
       push: {
         disabled: false,
         status: "idle",
@@ -56,89 +62,102 @@ function createInput(overrides: Partial<BuildGitActionsInput> = {}): BuildGitAct
 }
 
 describe("git-actions-policy", () => {
-  it("keeps the secondary menu order stable while the primary action changes", () => {
-    const noPrActions = buildGitActions(createInput());
-    const withPrActions = buildGitActions(
-      createInput({
-        hasRemote: true,
-        hasPullRequest: true,
-        pullRequestUrl: "https://example.com/pr/123",
-        aheadCount: 3,
-        aheadOfOrigin: 2,
-        shipDefault: "pr",
-      }),
-    );
+  it("shows only remote sync actions on the base branch", () => {
+    const actions = buildGitActions(createInput({ hasRemote: true }));
 
-    expect(noPrActions.primary).toBeNull();
-    expect(withPrActions.primary?.id).toBe("push");
-    expect(noPrActions.secondary.map((action) => action.id)).toEqual([
-      "merge-branch",
-      "pr",
-      "merge-from-base",
-      "push",
-    ]);
-    expect(withPrActions.secondary.map((action) => action.id)).toEqual([
-      "merge-branch",
-      "pr",
-      "merge-from-base",
-      "push",
-    ]);
+    expect(actions.secondary.map((action) => action.id)).toEqual(["pull", "push"]);
   });
 
-  it("disables hidden-before actions with explanations instead", () => {
-    const actions = buildGitActions(createInput());
-    const actionById = new Map(actions.secondary.map((action) => [action.id, action]));
-
-    expect(actionById.get("push")).toMatchObject({
-      disabled: true,
-      description: "No remote configured",
-    });
-    expect(actionById.get("pr")).toMatchObject({
-      label: "Create PR",
-      disabled: true,
-      description: "Branch has no commits ahead of main",
-    });
-    expect(actionById.get("merge-branch")).toMatchObject({
-      disabled: true,
-      description: "No commits to merge into main",
-    });
-    expect(actionById.get("merge-from-base")).toMatchObject({
-      disabled: true,
-      description: "No remote configured",
-    });
-    expect(actionById.has("archive-worktree")).toBe(false);
-  });
-
-  it("keeps the current primary action visible in the menu", () => {
+  it("prioritizes pull when the branch is behind origin", () => {
     const actions = buildGitActions(
       createInput({
         hasRemote: true,
+        behindOfOrigin: 2,
+      }),
+    );
+
+    expect(actions.primary).toMatchObject({ id: "pull", label: "Pull" });
+  });
+
+  it("keeps push clickable with a clearer message when the branch diverged", () => {
+    const actions = buildGitActions(
+      createInput({
+        hasRemote: true,
+        aheadOfOrigin: 1,
+        behindOfOrigin: 1,
+      }),
+    );
+    const pushAction = actions.secondary.find((action) => action.id === "push");
+
+    expect(pushAction).toMatchObject({
+      disabled: false,
+      unavailableMessage:
+        "Push isn't available yet because there are newer changes to bring in first",
+    });
+  });
+
+  it("shows update-from-base only on feature branches that are behind the base branch", () => {
+    const actions = buildGitActions(
+      createInput({
+        hasRemote: true,
+        isOnBaseBranch: false,
+        behindBaseCount: 3,
+      }),
+    );
+    const updateAction = actions.secondary.find((action) => action.id === "merge-from-base");
+
+    expect(updateAction).toMatchObject({
+      label: "Update from main",
+      disabled: false,
+      unavailableMessage: undefined,
+    });
+  });
+
+  it("uses a clear sentence when pull is unavailable", () => {
+    const actions = buildGitActions(createInput({ hasRemote: true }));
+    const pullAction = actions.secondary.find((action) => action.id === "pull");
+
+    expect(pullAction).toMatchObject({
+      disabled: false,
+      unavailableMessage: "Pull isn't available because this branch is already up to date",
+    });
+  });
+
+  it("keeps update-from-base off the base branch entirely", () => {
+    const actions = buildGitActions(
+      createInput({
+        hasRemote: true,
+        behindOfOrigin: 2,
+      }),
+    );
+
+    expect(actions.secondary.some((action) => action.id === "merge-from-base")).toBe(false);
+  });
+
+  it("keeps feature branch actions available off the base branch", () => {
+    const actions = buildGitActions(
+      createInput({
+        hasRemote: true,
+        isOnBaseBranch: false,
+        aheadCount: 2,
+        behindBaseCount: 1,
         hasPullRequest: true,
         pullRequestUrl: "https://example.com/pr/456",
       }),
     );
 
-    expect(actions.primary?.id).toBe("pr");
+    expect(actions.secondary.map((action) => action.id)).toEqual([
+      "pull",
+      "push",
+      "merge-from-base",
+      "merge-branch",
+      "pr",
+    ]);
     expect(
       actions.secondary.some((action) => action.id === "pr" && action.label === "View PR"),
     ).toBe(true);
   });
 
-  it("disables sync on the base branch when already up to date", () => {
-    const actions = buildGitActions(
-      createInput({
-        hasRemote: true,
-      }),
-    );
-    const syncAction = actions.secondary.find((action) => action.id === "merge-from-base");
-
-    expect(syncAction).toMatchObject({
-      label: "Sync",
-      disabled: true,
-      description: "Already up to date",
-    });
-  });
-
   it("only shows archive worktree for paseo worktrees", () => {
     const hidden = buildGitActions(createInput());
     const shown = buildGitActions(createInput({ isPaseoOwnedWorktree: true }));

packages/app/src/components/git-actions-policy.ts

@@ -4,6 +4,7 @@ import type { ActionStatus } from "@/components/ui/dropdown-menu";
 
 export type GitActionId =
   | "commit"
+  | "pull"
   | "push"
   | "pr"
   | "merge-branch"
@@ -17,7 +18,7 @@ export interface GitAction {
   successLabel: string;
   disabled: boolean;
   status: ActionStatus;
-  description?: string;
+  unavailableMessage?: string;
   icon?: ReactElement;
   handler: () => void;
 }
@@ -47,6 +48,7 @@ export interface BuildGitActionsInput {
   baseRefAvailable: boolean;
   baseRefLabel: string;
   aheadCount: number;
+  behindBaseCount: number;
   aheadOfOrigin: number;
   behindOfOrigin: number;
   shouldPromoteArchive: boolean;
@@ -54,7 +56,8 @@ export interface BuildGitActionsInput {
   runtime: Record<GitActionId, GitActionRuntimeState>;
 }
 
-const SECONDARY_ACTION_IDS: GitActionId[] = ["merge-branch", "pr", "merge-from-base", "push"];
+const REMOTE_ACTION_IDS: GitActionId[] = ["pull", "push"];
+const FEATURE_ACTION_IDS: GitActionId[] = ["merge-from-base", "merge-branch", "pr"];
 
 export function buildGitActions(input: BuildGitActionsInput): GitActions {
   if (!input.isGit) {
@@ -74,14 +77,26 @@ export function buildGitActions(input: BuildGitActionsInput): GitActions {
     handler: input.runtime.commit.handler,
   });
 
+  allActions.set("pull", {
+    id: "pull",
+    label: "Pull",
+    pendingLabel: "Pulling...",
+    successLabel: "Pulled",
+    disabled: input.runtime.pull.disabled,
+    status: input.runtime.pull.status,
+    unavailableMessage: input.runtime.pull.disabled ? undefined : getPullUnavailableMessage(input),
+    icon: input.runtime.pull.icon,
+    handler: input.runtime.pull.handler,
+  });
+
   allActions.set("push", {
     id: "push",
     label: "Push",
     pendingLabel: "Pushing...",
     successLabel: "Pushed",
-    disabled: input.runtime.push.disabled || !input.hasRemote,
+    disabled: input.runtime.push.disabled,
     status: input.runtime.push.status,
-    description: input.hasRemote ? undefined : "No remote configured",
+    unavailableMessage: input.runtime.push.disabled ? undefined : getPushUnavailableMessage(input),
     icon: input.runtime.push.icon,
     handler: input.runtime.push.handler,
   });
@@ -93,25 +108,25 @@ export function buildGitActions(input: BuildGitActionsInput): GitActions {
     label: `Merge into ${input.baseRefLabel}`,
     pendingLabel: "Merging...",
     successLabel: "Merged",
-    disabled:
-      input.runtime["merge-branch"].disabled ||
-      !input.baseRefAvailable ||
-      input.hasUncommittedChanges ||
-      input.aheadCount === 0,
+    disabled: input.runtime["merge-branch"].disabled,
     status: input.runtime["merge-branch"].status,
-    description: getMergeBranchDescription(input),
+    unavailableMessage: input.runtime["merge-branch"].disabled
+      ? undefined
+      : getMergeBranchUnavailableMessage(input),
     icon: input.runtime["merge-branch"].icon,
     handler: input.runtime["merge-branch"].handler,
   });
 
   allActions.set("merge-from-base", {
     id: "merge-from-base",
-    label: input.isOnBaseBranch ? "Sync" : `Update from ${input.baseRefLabel}`,
+    label: `Update from ${input.baseRefLabel}`,
     pendingLabel: "Updating...",
     successLabel: "Updated",
-    disabled: input.runtime["merge-from-base"].disabled || !canMergeFromBase(input),
+    disabled: input.runtime["merge-from-base"].disabled,
     status: input.runtime["merge-from-base"].status,
-    description: getMergeFromBaseDescription(input),
+    unavailableMessage: input.runtime["merge-from-base"].disabled
+      ? undefined
+      : getMergeFromBaseUnavailableMessage(input),
     icon: input.runtime["merge-from-base"].icon,
     handler: input.runtime["merge-from-base"].handler,
   });
@@ -121,21 +136,32 @@ export function buildGitActions(input: BuildGitActionsInput): GitActions {
     label: "Archive worktree",
     pendingLabel: "Archiving...",
     successLabel: "Archived",
-    disabled: input.runtime["archive-worktree"].disabled || !input.isPaseoOwnedWorktree,
+    disabled: input.runtime["archive-worktree"].disabled,
     status: input.runtime["archive-worktree"].status,
-    description: input.isPaseoOwnedWorktree ? undefined : "Only available for Paseo worktrees",
+    unavailableMessage:
+      input.runtime["archive-worktree"].disabled || input.isPaseoOwnedWorktree
+        ? undefined
+        : "Archive isn't available here because this workspace was not created as a Paseo worktree",
     icon: input.runtime["archive-worktree"].icon,
     handler: input.runtime["archive-worktree"].handler,
   });
 
   const primaryActionId = getPrimaryActionId(input);
   const primary = primaryActionId ? (allActions.get(primaryActionId) ?? null) : null;
-  const secondary = SECONDARY_ACTION_IDS.map((id) => allActions.get(id)!);
+
+  const secondaryIds = [...REMOTE_ACTION_IDS];
+  if (!input.isOnBaseBranch) {
+    secondaryIds.push(...FEATURE_ACTION_IDS);
+  }
   if (input.isPaseoOwnedWorktree) {
-    secondary.push(allActions.get("archive-worktree")!);
+    secondaryIds.push("archive-worktree");
   }
 
-  return { primary, secondary, menu: [] };
+  return {
+    primary,
+    secondary: secondaryIds.map((id) => allActions.get(id)!),
+    menu: [],
+  };
 }
 
 function getPrimaryActionId(input: BuildGitActionsInput): GitActionId | null {
@@ -145,20 +171,19 @@ function getPrimaryActionId(input: BuildGitActionsInput): GitActionId | null {
   if (input.hasUncommittedChanges) {
     return "commit";
   }
-  if (input.aheadOfOrigin > 0 && input.hasRemote) {
+  if (canPull(input)) {
+    return "pull";
+  }
+  if (canPush(input)) {
     return "push";
   }
+  if (!input.isOnBaseBranch && canMergeFromBase(input)) {
+    return "merge-from-base";
+  }
   if (input.githubFeaturesEnabled && input.hasPullRequest && input.pullRequestUrl) {
     return "pr";
   }
-  if (
-    input.isOnBaseBranch &&
-    input.hasRemote &&
-    (input.aheadOfOrigin > 0 || input.behindOfOrigin > 0)
-  ) {
-    return "merge-from-base";
-  }
-  if (input.aheadCount > 0) {
+  if (!input.isOnBaseBranch && input.aheadCount > 0) {
     return input.shipDefault === "merge" ? "merge-branch" : "pr";
   }
   return null;
@@ -171,9 +196,12 @@ function buildPrAction(input: BuildGitActionsInput): GitAction {
       label: "View PR",
       pendingLabel: "View PR",
       successLabel: "View PR",
-      disabled: input.runtime.pr.disabled || !input.githubFeaturesEnabled,
+      disabled: input.runtime.pr.disabled,
       status: input.runtime.pr.status,
-      description: input.githubFeaturesEnabled ? undefined : "GitHub features unavailable",
+      unavailableMessage:
+        input.runtime.pr.disabled || input.githubFeaturesEnabled
+          ? undefined
+          : "View PR isn't available right now because GitHub isn't connected",
       icon: input.runtime.pr.icon,
       handler: input.runtime.pr.handler,
     };
@@ -184,65 +212,100 @@ function buildPrAction(input: BuildGitActionsInput): GitAction {
     label: "Create PR",
     pendingLabel: "Creating PR...",
     successLabel: "PR Created",
-    disabled: input.runtime.pr.disabled || !input.githubFeaturesEnabled || input.aheadCount === 0,
+    disabled: input.runtime.pr.disabled,
     status: input.runtime.pr.status,
-    description: getCreatePrDescription(input),
+    unavailableMessage: input.runtime.pr.disabled
+      ? undefined
+      : getCreatePrUnavailableMessage(input),
     icon: input.runtime.pr.icon,
     handler: input.runtime.pr.handler,
   };
 }
 
+function canPull(input: BuildGitActionsInput): boolean {
+  return input.hasRemote && !input.hasUncommittedChanges && input.behindOfOrigin > 0;
+}
+
+function canPush(input: BuildGitActionsInput): boolean {
+  return input.hasRemote && input.aheadOfOrigin > 0 && input.behindOfOrigin === 0;
+}
+
+function canMergeBranch(input: BuildGitActionsInput): boolean {
+  return (
+    !input.isOnBaseBranch &&
+    input.baseRefAvailable &&
+    !input.hasUncommittedChanges &&
+    input.aheadCount > 0
+  );
+}
+
 function canMergeFromBase(input: BuildGitActionsInput): boolean {
-  if (!input.baseRefAvailable || input.hasUncommittedChanges) {
-    return false;
-  }
-  if (!input.isOnBaseBranch) {
-    return true;
-  }
-  if (!input.hasRemote) {
-    return false;
-  }
-  return input.aheadOfOrigin > 0 || input.behindOfOrigin > 0;
+  return (
+    !input.isOnBaseBranch &&
+    input.baseRefAvailable &&
+    !input.hasUncommittedChanges &&
+    input.behindBaseCount > 0
+  );
 }
 
-function getCreatePrDescription(input: BuildGitActionsInput): string | undefined {
+function getPullUnavailableMessage(input: BuildGitActionsInput): string | undefined {
+  if (!input.hasRemote) {
+    return "Pull isn't available here because this branch is not connected to a remote yet";
+  }
+  if (input.hasUncommittedChanges) {
+    return "Pull isn't available while you have local changes so commit or stash them first";
+  }
+  if (input.behindOfOrigin === 0) {
+    return "Pull isn't available because this branch is already up to date";
+  }
+  return undefined;
+}
+
+function getPushUnavailableMessage(input: BuildGitActionsInput): string | undefined {
+  if (!input.hasRemote) {
+    return "Push isn't available here because this branch is not connected to a remote yet";
+  }
+  if (input.behindOfOrigin > 0) {
+    return "Push isn't available yet because there are newer changes to bring in first";
+  }
+  if (input.aheadOfOrigin === 0) {
+    return "Push isn't available because there is nothing new to send";
+  }
+  return undefined;
+}
+
+function getCreatePrUnavailableMessage(input: BuildGitActionsInput): string | undefined {
   if (!input.githubFeaturesEnabled) {
-    return "GitHub features unavailable";
+    return "Create PR isn't available right now because GitHub isn't connected";
   }
   if (input.aheadCount === 0) {
-    return `Branch has no commits ahead of ${input.baseRefLabel}`;
+    return "Create PR isn't available because this branch doesn't have any new commits yet";
   }
   return undefined;
 }
 
-function getMergeBranchDescription(input: BuildGitActionsInput): string | undefined {
+function getMergeBranchUnavailableMessage(input: BuildGitActionsInput): string | undefined {
   if (!input.baseRefAvailable) {
-    return "Base ref unavailable";
+    return "Merge isn't available because we couldn't determine the base branch";
   }
   if (input.hasUncommittedChanges) {
-    return "Requires clean working tree";
+    return "Merge isn't available while you have local changes so commit or stash them first";
   }
   if (input.aheadCount === 0) {
-    return `No commits to merge into ${input.baseRefLabel}`;
+    return "Merge isn't available because this branch doesn't have anything new to merge yet";
   }
   return undefined;
 }
 
-function getMergeFromBaseDescription(input: BuildGitActionsInput): string | undefined {
+function getMergeFromBaseUnavailableMessage(input: BuildGitActionsInput): string | undefined {
   if (!input.baseRefAvailable) {
-    return "Base ref unavailable";
+    return "Update isn't available because we couldn't determine the base branch";
   }
   if (input.hasUncommittedChanges) {
-    return "Requires clean working tree";
+    return "Update isn't available while you have local changes so commit or stash them first";
   }
-  if (!input.isOnBaseBranch) {
-    return undefined;
-  }
-  if (!input.hasRemote) {
-    return "No remote configured";
-  }
-  if (input.aheadOfOrigin === 0 && input.behindOfOrigin === 0) {
-    return "Already up to date";
+  if (input.behindBaseCount === 0) {
+    return `Update isn't available because this branch is already up to date with ${input.baseRefLabel}`;
   }
   return undefined;
 }

packages/app/src/components/git-actions-split-button.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { View, Text, ActivityIndicator, Pressable } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { ChevronDown, MoreVertical } from "lucide-react-native";
+import { ChevronDown, Info, MoreVertical } from "lucide-react-native";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Shortcut } from "@/components/ui/shortcut";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
+import { useToast } from "@/contexts/toast-context";
 import type { GitAction, GitActions } from "@/components/git-actions-policy";
 
 interface GitActionsSplitButtonProps {
@@ -19,6 +20,7 @@ interface GitActionsSplitButtonProps {
 
 export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps) {
   const { theme } = useUnistyles();
+  const toast = useToast();
   const archiveShortcutKeys = useShortcutKeys("archive-worktree");
 
   const getActionDisplayLabel = useCallback((action: GitAction): string => {
@@ -27,6 +29,20 @@ export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps
     return action.label;
   }, []);
 
+  const handleActionSelect = useCallback(
+    (action: GitAction) => {
+      if (action.unavailableMessage) {
+        toast.show(action.unavailableMessage, {
+          durationMs: 3200,
+          icon: <Info size={16} color={theme.colors.foreground} />,
+        });
+        return;
+      }
+      action.handler();
+    },
+    [theme.colors.foreground, toast],
+  );
+
   return (
     <View style={styles.row}>
       {gitActions.primary ? (
@@ -73,7 +89,8 @@ export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" testID="changes-primary-cta-menu">
                 {gitActions.secondary.map((action, index) => {
-                  const needsSeparator = action.id === "merge-from-base" || action.id === "push";
+                  const needsSeparator =
+                    action.id === "merge-from-base" || action.id === "archive-worktree";
                   return (
                     <View key={action.id}>
                       {needsSeparator && index > 0 ? <DropdownMenuSeparator /> : null}
@@ -81,11 +98,12 @@ export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps
                         testID={`changes-menu-${action.id}`}
                         leading={action.icon}
                         trailing={
-                          action.id === "archive-worktree" && archiveShortcutKeys
-                            ? <Shortcut chord={archiveShortcutKeys} />
-                            : undefined
+                          action.id === "archive-worktree" && archiveShortcutKeys ? (
+                            <Shortcut chord={archiveShortcutKeys} />
+                          ) : undefined
                         }
                         disabled={action.disabled}
+                        muted={Boolean(action.unavailableMessage)}
                         status={action.status}
                         pendingLabel={action.pendingLabel}
                         successLabel={action.successLabel}
@@ -94,8 +112,7 @@ export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps
                           action.id === "pr" &&
                           action.label === "View PR"
                         }
-                        description={action.description}
-                        onSelect={action.handler}
+                        onSelect={() => handleActionSelect(action)}
                       >
                         {action.label}
                       </DropdownMenuItem>
@@ -125,11 +142,12 @@ export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps
                 testID={`changes-menu-${action.id}`}
                 leading={action.icon}
                 disabled={action.disabled}
+                muted={Boolean(action.unavailableMessage)}
                 status={action.status}
                 pendingLabel={action.pendingLabel}
                 successLabel={action.successLabel}
                 closeOnSelect={false}
-                onSelect={action.handler}
+                onSelect={() => handleActionSelect(action)}
               >
                 {action.label}
               </DropdownMenuItem>

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";
@@ -23,10 +23,16 @@ interface ScreenHeaderProps {
  * Shared frame for the home/back headers so we only maintain padding, border,
  * and safe-area logic in one place.
  */
-export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }: 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/host-route-bootstrap-boundary.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { useHostRuntimeBootstrapState, useStoreReady } from "@/app/_layout";
+import { StartupSplashScreen } from "@/screens/startup-splash-screen";
+
+export function HostRouteBootstrapBoundary({ children }: { children: ReactNode }) {
+  const storeReady = useStoreReady();
+  const bootstrapState = useHostRuntimeBootstrapState();
+
+  if (!storeReady) {
+    return <StartupSplashScreen bootstrapState={bootstrapState} />;
+  }
+
+  return <>{children}</>;
+}

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

@@ -0,0 +1,43 @@
+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/icons/pi-icon.tsx

@@ -0,0 +1,19 @@
+import Svg, { Path } from "react-native-svg";
+
+interface PiIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function PiIcon({ size = 16, color = "currentColor" }: PiIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 800 800" fill={color}>
+      <Path
+        d="M165.29 165.29 H517.36 V400 H400 V517.36 H282.65 V634.72 H165.29 Z M282.65 282.65 V400 H400 V282.65 Z"
+        fill={color}
+        fillRule="evenodd"
+      />
+      <Path d="M517.36 400 H634.72 V634.72 H517.36 Z" fill={color} />
+    </Svg>
+  );
+}

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

@@ -5,12 +5,19 @@ import {
   useState,
   useEffect,
   useRef,
-  useSyncExternalStore,
   type Dispatch,
+  type ReactElement,
   type RefObject,
   type SetStateAction,
 } from "react";
-import { View, Pressable, Text, Platform, useWindowDimensions } from "react-native";
+import {
+  View,
+  Pressable,
+  Text,
+  Platform,
+  useWindowDimensions,
+  StyleSheet as RNStyleSheet,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Animated, {
   useAnimatedStyle,
@@ -37,13 +44,13 @@ import {
 import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
 import { useWindowControlsPadding } from "@/utils/desktop-window";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
-import { Combobox } from "@/components/ui/combobox";
-import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
+import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
+import { useHostRuntimeSnapshot, useHosts } from "@/runtime/host-runtime";
 import { formatConnectionStatus } from "@/utils/daemons";
 import {
   HEADER_INNER_HEIGHT,
   HEADER_INNER_HEIGHT_MOBILE,
-  isCompactFormFactor,
+  useIsCompactFormFactor,
 } from "@/constants/layout";
 import {
   buildHostSessionsRoute,
@@ -62,18 +69,12 @@ interface LeftSidebarProps {
   selectedAgentId?: string;
 }
 
-interface HostOption {
-  id: string;
-  label: string;
-  description: string;
-}
-
 interface SidebarSharedProps {
   theme: SidebarTheme;
   activeServerId: string | null;
   activeHostLabel: string;
   activeHostStatusColor: string;
-  hostOptions: HostOption[];
+  hostOptions: ComboboxOption[];
   hostTriggerRef: RefObject<View | null>;
   isHostPickerOpen: boolean;
   setIsHostPickerOpen: Dispatch<SetStateAction<boolean>>;
@@ -88,6 +89,12 @@ interface SidebarSharedProps {
   handleHostSelect: (nextServerId: string) => void;
   handleOpenProject: () => void;
   handleSettings: () => void;
+  renderHostOption: (input: {
+    option: ComboboxOption;
+    selected: boolean;
+    active: boolean;
+    onPress: () => void;
+  }) => ReactElement;
 }
 
 interface MobileSidebarProps extends SidebarSharedProps {
@@ -111,34 +118,12 @@ 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);
   const pathname = usePathname();
   const daemons = useHosts();
-  const runtime = getHostRuntimeStore();
-  const runtimeConnectionStatusSignature = useSyncExternalStore(
-    (onStoreChange) => runtime.subscribeAll(onStoreChange),
-    () =>
-      daemons
-        .map(
-          (daemon) =>
-            `${daemon.serverId}:${
-              runtime.getSnapshot(daemon.serverId)?.connectionStatus ?? "connecting"
-            }`,
-        )
-        .join("|"),
-    () =>
-      daemons
-        .map(
-          (daemon) =>
-            `${daemon.serverId}:${
-              runtime.getSnapshot(daemon.serverId)?.connectionStatus ?? "connecting"
-            }`,
-        )
-        .join("|"),
-  );
   const activeServerIdFromPath = useMemo(() => parseServerIdFromPathname(pathname), [pathname]);
   const activeDaemon = useMemo(() => {
     if (daemons.length === 0) {
@@ -158,8 +143,9 @@ export const LeftSidebar = memo(function LeftSidebar({
     const trimmed = activeDaemon.label?.trim();
     return trimmed && trimmed.length > 0 ? trimmed : activeDaemon.serverId;
   }, [activeDaemon]);
+  const activeHostSnapshot = useHostRuntimeSnapshot(activeServerId ?? "");
   const activeHostStatus = activeServerId
-    ? (runtime.getSnapshot(activeServerId)?.connectionStatus ?? "connecting")
+    ? (activeHostSnapshot?.connectionStatus ?? "connecting")
     : "idle";
   const activeHostStatusColor =
     activeHostStatus === "online"
@@ -172,11 +158,30 @@ export const LeftSidebar = memo(function LeftSidebar({
       daemons.map((daemon) => ({
         id: daemon.serverId,
         label: daemon.label?.trim() || daemon.serverId,
-        description: formatConnectionStatus(
-          runtime.getSnapshot(daemon.serverId)?.connectionStatus ?? "connecting",
-        ),
       })),
-    [daemons, runtime, runtimeConnectionStatusSignature],
+    [daemons],
+  );
+  const renderHostOption = useCallback(
+    ({
+      option,
+      selected,
+      active,
+      onPress,
+    }: {
+      option: ComboboxOption;
+      selected: boolean;
+      active: boolean;
+      onPress: () => void;
+    }) => (
+      <HostSwitchOption
+        serverId={option.id}
+        label={option.label}
+        selected={selected}
+        active={active}
+        onPress={onPress}
+      />
+    ),
+    [],
   );
   const hostTriggerRef = useRef<View | null>(null);
   const [isHostPickerOpen, setIsHostPickerOpen] = useState(false);
@@ -187,11 +192,8 @@ export const LeftSidebar = memo(function LeftSidebar({
     serverId: activeServerId,
     enabled: isOpen,
   });
-  const {
-    collapsedProjectKeys,
-    shortcutIndexByWorkspaceKey,
-    toggleProjectCollapsed,
-  } = useSidebarShortcutModel(projects);
+  const { collapsedProjectKeys, shortcutIndexByWorkspaceKey, toggleProjectCollapsed } =
+    useSidebarShortcutModel(projects);
 
   const [isManualRefresh, setIsManualRefresh] = useState(false);
 
@@ -222,21 +224,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(
@@ -246,7 +248,7 @@ export const LeftSidebar = memo(function LeftSidebar({
       }
       const nextPath = mapPathnameToServer(pathname, nextServerId);
       setIsHostPickerOpen(false);
-      router.push(nextPath as any);
+      router.push(nextPath);
     },
     [pathname],
   );
@@ -269,6 +271,7 @@ export const LeftSidebar = memo(function LeftSidebar({
     toggleProjectCollapsed,
     handleRefresh,
     handleHostSelect,
+    renderHostOption,
   };
 
   if (isCompactLayout) {
@@ -298,6 +301,33 @@ export const LeftSidebar = memo(function LeftSidebar({
   );
 });
 
+function HostSwitchOption({
+  serverId,
+  label,
+  selected,
+  active,
+  onPress,
+}: {
+  serverId: string;
+  label: string;
+  selected: boolean;
+  active: boolean;
+  onPress: () => void;
+}) {
+  const snapshot = useHostRuntimeSnapshot(serverId);
+  const connectionStatus = snapshot?.connectionStatus ?? "connecting";
+
+  return (
+    <ComboboxItem
+      label={label}
+      description={formatConnectionStatus(connectionStatus)}
+      selected={selected}
+      active={active}
+      onPress={onPress}
+    />
+  );
+}
+
 function SessionsButton({ onPress }: { onPress: () => void }) {
   const { theme } = useUnistyles();
   const pathname = usePathname();
@@ -354,6 +384,7 @@ function MobileSidebar({
   toggleProjectCollapsed,
   handleRefresh,
   handleHostSelect,
+  renderHostOption,
   handleOpenProject,
   handleSettings,
   insetsTop,
@@ -370,14 +401,16 @@ function MobileSidebar({
     animateToOpen,
     animateToClose,
     isGesturing,
+    gestureAnimatingRef,
     closeGestureRef,
   } = useSidebarAnimation();
   const closeTouchStartX = useSharedValue(0);
   const closeTouchStartY = useSharedValue(0);
 
-  const handleClose = useCallback(() => {
+  const handleCloseFromGesture = useCallback(() => {
+    gestureAnimatingRef.current = true;
     closeToAgent();
-  }, [closeToAgent]);
+  }, [closeToAgent, gestureAnimatingRef]);
 
   const handleViewMore = useCallback(() => {
     if (!activeServerId) {
@@ -452,7 +485,7 @@ function MobileSidebar({
           const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
           if (shouldClose) {
             animateToClose();
-            runOnJS(handleClose)();
+            runOnJS(handleCloseFromGesture)();
           } else {
             animateToOpen();
           }
@@ -471,7 +504,7 @@ function MobileSidebar({
       backdropOpacity,
       animateToClose,
       animateToOpen,
-      handleClose,
+      handleCloseFromGesture,
     ],
   );
 
@@ -498,13 +531,16 @@ function MobileSidebar({
 
   return (
     <View style={StyleSheet.absoluteFillObject} pointerEvents={overlayPointerEvents}>
-      <Animated.View style={[styles.backdrop, backdropAnimatedStyle]}>
-        <Pressable style={styles.backdropPressable} onPress={handleClose} />
-      </Animated.View>
+      <Animated.View style={[staticStyles.backdrop, backdropAnimatedStyle]} />
 
       <GestureDetector gesture={closeGesture} touchAction="pan-y">
         <Animated.View
-          style={[styles.mobileSidebar, mobileSidebarInsetStyle, sidebarAnimatedStyle]}
+          style={[
+            staticStyles.mobileSidebar,
+            mobileSidebarInsetStyle,
+            sidebarAnimatedStyle,
+            { backgroundColor: theme.colors.surfaceSidebar },
+          ]}
           pointerEvents="auto"
         >
           <View style={styles.sidebarContent} pointerEvents="auto">
@@ -521,12 +557,11 @@ function MobileSidebar({
                 serverId={activeServerId}
                 collapsedProjectKeys={collapsedProjectKeys}
                 onToggleProjectCollapsed={toggleProjectCollapsed}
-
                 shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
                 projects={projects}
                 isRefreshing={isManualRefresh && isRevalidating}
                 onRefresh={handleRefresh}
-                onWorkspacePress={closeToAgent}
+                onWorkspacePress={() => closeToAgent()}
                 onAddProject={handleOpenProject}
                 parentGestureRef={closeGestureRef}
               />
@@ -599,6 +634,7 @@ function MobileSidebar({
                 options={hostOptions}
                 value={activeServerId ?? ""}
                 onSelect={handleHostSelect}
+                renderOption={renderHostOption}
                 searchable={false}
                 title="Switch host"
                 searchPlaceholder="Search hosts..."
@@ -632,6 +668,7 @@ function DesktopSidebar({
   toggleProjectCollapsed,
   handleRefresh,
   handleHostSelect,
+  renderHostOption,
   handleOpenProject,
   handleSettings,
   insetsTop,
@@ -688,140 +725,152 @@ function DesktopSidebar({
   }
 
   return (
-    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
-      <View style={styles.sidebarDragArea}>
-        <TitlebarDragRegion />
-        {padding.top > 0 ? <View style={{ height: padding.top }} /> : null}
-        <View style={styles.sidebarHeader}>
-          <View style={styles.sidebarHeaderRow}>
-            <SessionsButton onPress={handleViewMore} />
+    <Animated.View
+      style={[staticStyles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}
+    >
+      <View style={[styles.desktopSidebarBorder, { flex: 1 }]}>
+        <View style={styles.sidebarDragArea}>
+          <TitlebarDragRegion />
+          {padding.top > 0 ? <View style={{ height: padding.top }} /> : null}
+          <View style={styles.sidebarHeader}>
+            <View style={styles.sidebarHeaderRow}>
+              <SessionsButton onPress={handleViewMore} />
+            </View>
           </View>
         </View>
-      </View>
 
-      {isInitialLoad ? (
-        <SidebarAgentListSkeleton />
-      ) : (
-        <SidebarWorkspaceList
-          serverId={activeServerId}
-          collapsedProjectKeys={collapsedProjectKeys}
-          onToggleProjectCollapsed={toggleProjectCollapsed}
-          shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
-          projects={projects}
-          isRefreshing={isManualRefresh && isRevalidating}
-          onRefresh={handleRefresh}
-          onAddProject={handleOpenProject}
-        />
-      )}
+        {isInitialLoad ? (
+          <SidebarAgentListSkeleton />
+        ) : (
+          <SidebarWorkspaceList
+            serverId={activeServerId}
+            collapsedProjectKeys={collapsedProjectKeys}
+            onToggleProjectCollapsed={toggleProjectCollapsed}
+            shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
+            projects={projects}
+            isRefreshing={isManualRefresh && isRevalidating}
+            onRefresh={handleRefresh}
+            onAddProject={handleOpenProject}
+          />
+        )}
 
-      <View style={styles.sidebarFooter}>
-        <View style={styles.footerHostSlot}>
-          <Pressable
-            ref={hostTriggerRef}
-            style={({ hovered = false }) => [
-              styles.hostTrigger,
-              hovered && styles.hostTriggerHovered,
+        <View style={styles.sidebarFooter}>
+          <View style={styles.footerHostSlot}>
+            <Pressable
+              ref={hostTriggerRef}
+              style={({ hovered = false }) => [
+                styles.hostTrigger,
+                hovered && styles.hostTriggerHovered,
+              ]}
+              onPress={() => setIsHostPickerOpen(true)}
+              disabled={hostOptions.length === 0}
+            >
+              <View style={hostStatusDotStyle} />
+              <Text style={styles.hostTriggerText} numberOfLines={1}>
+                {activeHostLabel}
+              </Text>
+            </Pressable>
+          </View>
+          <View style={styles.footerIconRow}>
+            <Tooltip delayDuration={300}>
+              <TooltipTrigger asChild>
+                <Pressable
+                  style={styles.footerIconButton}
+                  testID="sidebar-add-project"
+                  nativeID="sidebar-add-project"
+                  collapsable={false}
+                  accessible
+                  accessibilityLabel="Add project"
+                  accessibilityRole="button"
+                  onPress={handleOpenProject}
+                >
+                  {({ hovered }) => (
+                    <Plus
+                      size={theme.iconSize.md}
+                      color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                    />
+                  )}
+                </Pressable>
+              </TooltipTrigger>
+              <TooltipContent side="top" align="center" offset={8}>
+                <View style={styles.tooltipRow}>
+                  <Text style={styles.tooltipText}>Add project</Text>
+                  {newAgentKeys ? <Shortcut chord={newAgentKeys} /> : null}
+                </View>
+              </TooltipContent>
+            </Tooltip>
+            <Pressable
+              style={styles.footerIconButton}
+              testID="sidebar-settings"
+              nativeID="sidebar-settings"
+              collapsable={false}
+              accessible
+              accessibilityLabel="Settings"
+              accessibilityRole="button"
+              onPress={handleSettings}
+            >
+              {({ hovered }) => (
+                <Settings
+                  size={theme.iconSize.md}
+                  color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                />
+              )}
+            </Pressable>
+          </View>
+          <Combobox
+            options={hostOptions}
+            value={activeServerId ?? ""}
+            onSelect={handleHostSelect}
+            renderOption={renderHostOption}
+            searchable={false}
+            title="Switch host"
+            searchPlaceholder="Search hosts..."
+            open={isHostPickerOpen}
+            onOpenChange={setIsHostPickerOpen}
+            anchorRef={hostTriggerRef}
+          />
+        </View>
+
+        {/* Resize handle - absolutely positioned over right border */}
+        <GestureDetector gesture={resizeGesture}>
+          <View
+            style={[
+              styles.resizeHandle,
+              Platform.OS === "web" && ({ cursor: "col-resize" } as any),
             ]}
-            onPress={() => setIsHostPickerOpen(true)}
-            disabled={hostOptions.length === 0}
-          >
-            <View style={hostStatusDotStyle} />
-            <Text style={styles.hostTriggerText} numberOfLines={1}>
-              {activeHostLabel}
-            </Text>
-          </Pressable>
-        </View>
-        <View style={styles.footerIconRow}>
-          <Tooltip delayDuration={300}>
-            <TooltipTrigger asChild>
-              <Pressable
-                style={styles.footerIconButton}
-                testID="sidebar-add-project"
-                nativeID="sidebar-add-project"
-                collapsable={false}
-                accessible
-                accessibilityLabel="Add project"
-                accessibilityRole="button"
-                onPress={handleOpenProject}
-              >
-                {({ hovered }) => (
-                  <Plus
-                    size={theme.iconSize.md}
-                    color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
-                  />
-                )}
-              </Pressable>
-            </TooltipTrigger>
-            <TooltipContent side="top" align="center" offset={8}>
-              <View style={styles.tooltipRow}>
-                <Text style={styles.tooltipText}>Add project</Text>
-                {newAgentKeys ? <Shortcut chord={newAgentKeys} /> : null}
-              </View>
-            </TooltipContent>
-          </Tooltip>
-          <Pressable
-            style={styles.footerIconButton}
-            testID="sidebar-settings"
-            nativeID="sidebar-settings"
-            collapsable={false}
-            accessible
-            accessibilityLabel="Settings"
-            accessibilityRole="button"
-            onPress={handleSettings}
-          >
-            {({ hovered }) => (
-              <Settings
-                size={theme.iconSize.md}
-                color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
-              />
-            )}
-          </Pressable>
-        </View>
-        <Combobox
-          options={hostOptions}
-          value={activeServerId ?? ""}
-          onSelect={handleHostSelect}
-          searchable={false}
-          title="Switch host"
-          searchPlaceholder="Search hosts..."
-          open={isHostPickerOpen}
-          onOpenChange={setIsHostPickerOpen}
-          anchorRef={hostTriggerRef}
-        />
+          />
+        </GestureDetector>
       </View>
-
-      {/* Resize handle - absolutely positioned over right border */}
-      <GestureDetector gesture={resizeGesture}>
-        <View
-          style={[styles.resizeHandle, Platform.OS === "web" && ({ cursor: "col-resize" } as any)]}
-        />
-      </GestureDetector>
     </Animated.View>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
+// Static styles for Animated.Views — must NOT use Unistyles dynamic theme to
+// avoid the "Unable to find node on an unmounted component" crash when Unistyles
+// tries to patch the native node that Reanimated also manages.
+const staticStyles = RNStyleSheet.create({
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...RNStyleSheet.absoluteFillObject,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
-  backdropPressable: {
-    flex: 1,
-  },
   mobileSidebar: {
-    position: "absolute",
+    position: "absolute" as const,
     top: 0,
     left: 0,
     bottom: 0,
-    backgroundColor: theme.colors.surfaceSidebar,
-    overflow: "hidden",
+    overflow: "hidden" as const,
   },
+  desktopSidebar: {
+    position: "relative" as const,
+  },
+});
+
+const styles = StyleSheet.create((theme) => ({
   sidebarContent: {
     flex: 1,
     minHeight: 0,
   },
-  desktopSidebar: {
-    position: "relative",
+  desktopSidebarBorder: {
     borderRightWidth: 1,
     borderRightColor: theme.colors.border,
     backgroundColor: theme.colors.surfaceSidebar,
@@ -872,10 +921,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",
@@ -888,7 +937,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/material-file-icons.ts

@@ -1,128 +1,128 @@
 // Auto-generated from material-icon-theme. Do not edit manually.
 
 const SVG_ICONS: Record<string, string> = {
-  "_default": `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m8.668 6h3.6641l-3.6641-3.668v3.668m-4.668-4.668h5.332l4 4v8c0 0.73828-0.59375 1.3359-1.332 1.3359h-8c-0.73828 0-1.332-0.59766-1.332-1.3359v-10.664c0-0.74219 0.59375-1.3359 1.332-1.3359m3.332 1.3359h-3.332v10.664h8v-6h-4.668z" fill="#90a4ae" /></svg>`,
-  "astro": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7c4dff" d="M12.106 25.849c-1.262-1.156-1.63-3.586-1.105-5.346a5.18 5.18 0 0 0 3.484 1.66 9.68 9.68 0 0 0 5.882-.734c.215-.106.413-.247.648-.39a3.5 3.5 0 0 1 .16 1.555 4.26 4.26 0 0 1-1.798 3.021c-.404.3-.832.569-1.25.852a2.613 2.613 0 0 0-1.15 3.372l.048.161a3.4 3.4 0 0 1-1.5-1.285 3.6 3.6 0 0 1-.578-1.962 9 9 0 0 0-.05-1.037c-.114-.831-.504-1.204-1.238-1.225a1.45 1.45 0 0 0-1.507 1.18c-.012.056-.028.112-.046.178M4.901 20a17.75 17.75 0 0 1 7.4-2l2.913-8.38a.765.765 0 0 1 1.527 0L19.7 18a14.24 14.24 0 0 1 7.399 2S20.704 2.877 20.692 2.842C20.51 2.33 20.202 2 19.787 2h-7.619c-.415 0-.71.33-.904.842z"/></svg>`,
-  "c": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M19.563 22A5.57 5.57 0 0 1 14 16.437v-2.873A5.57 5.57 0 0 1 19.563 8H24V2h-4.437A11.563 11.563 0 0 0 8 13.563v2.873A11.564 11.564 0 0 0 19.563 28H24v-6Z"/></svg>`,
-  "clojure": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#64dd17" d="M123.456 129.975a507 507 0 0 0-3.54 7.846c-4.406 9.981-9.284 22.127-11.066 29.908-.64 2.77-1.037 6.205-1.03 10.013 0 1.506.081 3.09.21 4.702a58.1 58.1 0 0 0 19.98 3.559 58.2 58.2 0 0 0 18.29-2.98c-1.352-1.237-2.642-2.554-3.816-4.038-7.796-9.942-12.146-24.512-19.028-49.01m-28.784-49.39C79.782 91.08 70.039 108.387 70.002 128c.037 19.32 9.487 36.403 24.002 46.94 3.56-14.83 12.485-28.41 25.868-55.63a219 219 0 0 0-2.714-7.083c-3.708-9.3-9.059-20.102-13.834-24.993-2.435-2.555-5.389-4.763-8.652-6.648"/><path fill="#7cb342" d="M178.532 194.535c-7.683-.963-14.023-2.124-19.57-4.081a69.4 69.4 0 0 1-30.958 7.249c-38.491 0-69.693-31.198-69.698-69.7 0-20.891 9.203-39.62 23.764-52.392-3.895-.94-7.956-1.49-12.104-1.482-20.45.193-42.037 11.51-51.025 42.075-.84 4.45-.64 7.813-.64 11.8 0 60.591 49.12 109.715 109.705 109.715 37.104 0 69.882-18.437 89.732-46.633-10.736 2.675-21.06 3.955-29.902 3.982-3.314 0-6.425-.177-9.305-.53"/><path fill="#29b6f6" d="M157.922 173.271c.678.336 2.213.884 4.35 1.49 14.375-10.553 23.717-27.552 23.754-46.764h-.005c-.055-32.03-25.974-57.945-58.011-58.009a58.2 58.2 0 0 0-18.213 2.961c11.779 13.426 17.443 32.613 22.922 53.6l.01.025c.01.017 1.752 5.828 4.743 13.538 2.97 7.7 7.203 17.231 11.818 24.178 3.03 4.655 6.363 8 8.632 8.981"/><path fill="#1e88e5" d="M128.009 18.29c-36.746 0-69.25 18.089-89.16 45.826 10.361-6.49 20.941-8.83 30.174-8.747 12.753.037 22.779 3.991 27.589 6.696a51 51 0 0 1 3.345 2.131 69.4 69.4 0 0 1 28.049-5.894c38.496.004 69.703 31.202 69.709 69.698h-.006c0 19.409-7.938 36.957-20.736 49.594 3.142.352 6.492.571 9.912.554 12.15.006 25.284-2.675 35.13-10.956 6.42-5.408 11.798-13.327 14.78-25.199.584-4.586.92-9.247.92-13.991 0-60.588-49.116-109.715-109.705-109.715"/></svg>`,
-  "console": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ff7043" d="M2 2a1 1 0 0 0-1 1v10c0 .554.446 1 1 1h12c.554 0 1-.446 1-1V3a1 1 0 0 0-1-1zm0 3h12v8H2zm1 2 2 2-2 2 1 1 3-3-3-3zm5 3.5V12h5v-1.5z"/></svg>`,
-  "cpp": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M28 14v-4h-2v4h-6v-4h-2v4h-4v2h4v4h2v-4h6v4h2v-4h4v-2z"/><path fill="#0288d1" d="M13.563 22A5.57 5.57 0 0 1 8 16.437v-2.873A5.57 5.57 0 0 1 13.563 8H18V2h-4.437A11.563 11.563 0 0 0 2 13.563v2.873A11.564 11.564 0 0 0 13.563 28H18v-6Z"/></svg>`,
-  "csharp": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M30 14v-2h-2V8h-2v4h-2V8h-2v4h-2v2h2v2h-2v2h2v4h2v-4h2v4h2v-4h2v-2h-2v-2Zm-4 2h-2v-2h2Zm-12.437 6A5.57 5.57 0 0 1 8 16.437v-2.873A5.57 5.57 0 0 1 13.563 8H18V2h-4.437A11.563 11.563 0 0 0 2 13.563v2.873A11.564 11.564 0 0 0 13.563 28H18v-6Z"/></svg>`,
-  "css": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7e57c2" d="M20 18h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 20 22h2v2h2v-2c0-.388-.562-.851-1.254-1.034C20.356 20.34 20 18.84 20 18m-3.254 2.966C14.356 20.34 14 18.84 14 18h-2v-2h-2v8h2v-2h4v2h2v-2c0-.388-.562-.851-1.254-1.034"/><path fill="#7e57c2" d="M24 4H4v20a4 4 0 0 0 4 4h16.16A3.84 3.84 0 0 0 28 24.16V8a4 4 0 0 0-4-4m2 14h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 26 22v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z"/></svg>`,
-  "dart": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#4fc3f7" d="M16.83 2a1.3 1.3 0 0 0-.916.377l-.013.01L7.323 7.34l8.556 8.55v.005l10.283 10.277 1.96-3.529-7.068-16.96-3.299-3.297A1.3 1.3 0 0 0 16.828 2Z"/><path fill="#01579b" d="m7.343 7.32-4.955 8.565-.01.013a1.297 1.297 0 0 0 .004 1.835l.005.005 4.106 4.107 16.064 6.314 3.632-2.015-.098-.098-.025.002L15.995 15.97h-.012z"/><path fill="#01579b" d="m7.321 7.324 8.753 8.755h.013L26.16 26.156l3.835-.73L30 14.089l-4.049-3.965a6.5 6.5 0 0 0-3.618-1.612l.002-.043L7.323 7.325Z"/><path fill="#64b5f6" d="m7.332 7.335 8.758 8.75v.013l10.079 10.071L25.436 30H14.09l-3.967-4.048a6.5 6.5 0 0 1-1.611-3.618l-.045.004Z"/></svg>`,
-  "database": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffca28" d="M16 24c-5.525 0-10-.9-10-2v4c0 1.1 4.475 2 10 2s10-.9 10-2v-4c0 1.1-4.475 2-10 2m0-8c-5.525 0-10-.9-10-2v4c0 1.1 4.475 2 10 2s10-.9 10-2v-4c0 1.1-4.475 2-10 2m0-12C10.477 4 6 4.895 6 6v4c0 1.1 4.475 2 10 2s10-.9 10-2V6c0-1.105-4.477-2-10-2"/></svg>`,
-  "document": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/><path fill="#42a5f5" d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"/></svg>`,
-  "elixir": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9575cd" d="M12.173 22.681c-3.86 0-6.99-3.64-6.99-8.13 0-3.678 2.773-8.172 4.916-10.91 1.014-1.296 2.93-2.322 2.93-2.322s-.982 5.239 1.683 7.319c2.366 1.847 4.106 4.25 4.106 6.363 0 4.232-2.784 7.68-6.645 7.68"/></svg>`,
-  "erlang": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="#f44336" d="M5.207 4.33q-.072.075-.143.153Q1.5 8.476 1.5 15.33c0 4.418 1.155 7.862 3.459 10.34h19.415c2.553-1.152 4.127-3.43 4.127-3.43l-3.147-2.52L23.9 21.1c-.867.773-.845.931-2.315 1.78-1.495.674-3.04.966-4.634.966-2.515 0-4.423-.909-5.723-2.059-1.286-1.15-1.985-4.511-2.096-6.68l17.458.067-.183-1.472s-.847-7.129-2.541-9.372zm8.76.846c1.565 0 3.22.535 3.961 1.471.74.937.931 1.667.973 3.524H9.11c.112-1.955.436-2.81 1.373-3.698.936-.887 2.03-1.297 3.484-1.297"/></svg>`,
-  "go": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#00acc1" d="M2 12h4v2H2zm-2 4h6v2H0zm4 4h2v2H4zm16.954-5H14v3h3.239a4.42 4.42 0 0 1-3.531 2 2.65 2.65 0 0 1-2.053-.858 2.86 2.86 0 0 1-.628-2.28A4.515 4.515 0 0 1 15.292 13a2.73 2.73 0 0 1 1.749.584l2.962-1.185A5.6 5.6 0 0 0 15.292 10a7.526 7.526 0 0 0-7.243 6.5 5.614 5.614 0 0 0 5.659 6.5 7.526 7.526 0 0 0 7.243-6.5 6.4 6.4 0 0 0 .003-1.5"/><path fill="#00acc1" d="M26.292 10a7.526 7.526 0 0 0-7.243 6.5 5.614 5.614 0 0 0 5.659 6.5 7.526 7.526 0 0 0 7.243-6.5 5.614 5.614 0 0 0-5.659-6.5m2.681 6.137A4.515 4.515 0 0 1 24.708 20a2.65 2.65 0 0 1-2.053-.858 2.86 2.86 0 0 1-.628-2.28A4.515 4.515 0 0 1 26.292 13a2.65 2.65 0 0 1 2.053.858 2.86 2.86 0 0 1 .628 2.28Z"/></svg>`,
-  "gradle": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0097a7" d="M16 10v2h6c-2 0-3-2-6-2"/><path fill="#0097a7" d="M26 4h-2a4 4 0 0 0-4 4h4a1 1 0 0 1 2 0v4H16v-2h-5.317A2.683 2.683 0 0 0 8 12.683v2.634A2.683 2.683 0 0 0 10.683 18H16v2h-5.98A4.02 4.02 0 0 1 6 16v-2c-2 0-4 4-4 8 0 5 1 6 2 6h4v-4h4v4h4v-4h4v4h4v-6a2 2 0 0 0 2-2v-2a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4m-4 12h-2a2 2 0 0 1-2-2h6a2 2 0 0 1-2 2"/></svg>`,
-  "graphql": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ec407a" d="M6 20h20v2H6z"/><circle cx="7" cy="21" r="3" fill="#ec407a"/><circle cx="16" cy="27" r="3" fill="#ec407a"/><circle cx="25" cy="21" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 10h20v2H6z"/><circle cx="7" cy="11" r="3" fill="#ec407a"/><circle cx="16" cy="5" r="3" fill="#ec407a"/><circle cx="25" cy="11" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 12h2v10H6zm18-2h2v12h-2z"/><path fill="#ec407a" d="m5.014 19.41 11.674 6.866L15.674 28 4 21.134z"/><path fill="#ec407a" d="M26.688 21.724 15.014 28.59 14 26.866 25.674 20zM5.124 10.382l11.415-7.29 1.077 1.686L6.2 12.068z"/><path fill="#ec407a" d="m25.798 12.067-11.415-7.29 1.077-1.685 11.415 7.29zM6.2 19.932l11.416 7.29-1.077 1.686-11.415-7.29z"/><path fill="#ec407a" d="m26.875 21.619-11.415 7.29-1.077-1.687 11.415-7.289zM5.877 22.6 16.04 3.686l1.762.946L7.638 23.546z"/><path fill="#ec407a" d="M24.361 23.545 14.197 4.633l1.761-.947 10.165 18.913z"/></svg>`,
-  "groovy": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#26c6da" d="M19.322 2a6.5 6.5 0 0 1 4.352 1.419 4.55 4.55 0 0 1 1.685 3.662 5.82 5.82 0 0 1-1.886 4.275 6.04 6.04 0 0 1-4.34 1.846 4.15 4.15 0 0 1-2.385-.649 1.91 1.91 0 0 1-.936-1.603 1.6 1.6 0 0 1 .356-1.024 1.1 1.1 0 0 1 .861-.447q.469 0 .468.504a.79.79 0 0 0 .358.693 1.43 1.43 0 0 0 .826.245 3.1 3.1 0 0 0 2.39-1.573 5.66 5.66 0 0 0 1.154-3.39 2.64 2.64 0 0 0-.891-2.064 3.28 3.28 0 0 0-2.293-.812 6.18 6.18 0 0 0-4.086 1.736 12.9 12.9 0 0 0-3.215 4.557 13.4 13.4 0 0 0-1.233 5.36 5.86 5.86 0 0 0 1.091 3.723 3.53 3.53 0 0 0 2.905 1.372q3.058 0 5.848-4.002l2.935-.388q.546-.07.545.246a8 8 0 0 1-.423 1.24q-.421 1.097-1.152 3.668A12.7 12.7 0 0 0 26 17.72v1.66a14.2 14.2 0 0 1-4.055 2.57 10.38 10.38 0 0 1-2.764 5.931 6.7 6.7 0 0 1-4.806 2.11 3.3 3.3 0 0 1-2.012-.55 1.8 1.8 0 0 1-.718-1.514q0-2.685 5.634-5.212.532-1.766 1.152-3.507a8.6 8.6 0 0 1-2.853 2.323 7.4 7.4 0 0 1-3.48 1.01 5.46 5.46 0 0 1-4.366-2.093A8.1 8.1 0 0 1 6 15.122a11.6 11.6 0 0 1 1.966-6.426 14.7 14.7 0 0 1 5.162-4.862A12.44 12.44 0 0 1 19.322 2m-2.407 22.17q-4.055 1.875-4.054 3.695a.87.87 0 0 0 .999.97q1.964 0 3.055-4.665"/></svg>`,
-  "h": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M18.5 11a5.49 5.49 0 0 0-4.5 2.344V4H8v24h6V17a2 2 0 0 1 4 0v11h6V16.5a5.5 5.5 0 0 0-5.5-5.5"/></svg>`,
-  "haskell": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g stroke-width="2.422"><path fill="#ef5350" d="m23.928 240.5 59.94-89.852-59.94-89.855h44.955l59.94 89.855-59.94 89.852z"/><path fill="#ffa726" d="m83.869 240.5 59.94-89.852-59.94-89.855h44.955l119.88 179.71h-44.95l-37.46-56.156-37.468 56.156z"/><path fill="#ffee58" d="m228.72 188.08-19.98-29.953h69.93v29.956h-49.95zm-29.97-44.924-19.98-29.953h99.901v29.953z"/></g></svg>`,
-  "hcl": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#eceff1" d="M18 1.2V14h-4v-4l-4 2v16.37l4 2.43V18h4v4l4-2V3.63z"/><path fill="#eceff1" d="M14 1.2 2 8.49v15.02l4 2.43v-15.2l8-4.86zm12 4.86v15.2l-8 4.86v4.68l12-7.29V8.49z"/></svg>`,
-  "hpp": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M28 6V2h-2v4h-6V2h-2v4h-4v2h4v4h2V8h6v4h2V8h4V6zm-15.5 5A5.49 5.49 0 0 0 8 13.344V4H2v24h6V17a2 2 0 0 1 4 0v11h6V16.5a5.5 5.5 0 0 0-5.5-5.5"/></svg>`,
-  "html": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#e65100" d="m4 4 2 22 10 2 10-2 2-22Zm19.72 7H11.28l.29 3h11.86l-.802 9.335L15.99 25l-6.635-1.646L8.93 19h3.02l.19 2 3.86.77 3.84-.77.29-4H8.84L8 8h16Z"/></svg>`,
-  "image": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#26a69a" d="M8.5 6h4l-4-4zM3.875 1H9.5l4 4v8.6c0 .773-.616 1.4-1.375 1.4h-8.25c-.76 0-1.375-.627-1.375-1.4V2.4c0-.777.612-1.4 1.375-1.4M4 13.6h8V8l-2.625 2.8L8 9.4zm1.25-7.7c-.76 0-1.375.627-1.375 1.4s.616 1.4 1.375 1.4c.76 0 1.375-.627 1.375-1.4S6.009 5.9 5.25 5.9"/></svg>`,
-  "java": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f44336" d="M4 26h24v2H4zM28 4H7a1 1 0 0 0-1 1v13a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-4h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 8h-4V6h4Z"/></svg>`,
-  "javascript": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ffca28" d="M2 2v12h12V2zm6 6h1v4a1.003 1.003 0 0 1-1 1H7a1.003 1.003 0 0 1-1-1v-1h1v1h1zm3 0h2v1h-2v1h1a1.003 1.003 0 0 1 1 1v1a1.003 1.003 0 0 1-1 1h-2v-1h2v-1h-1a1.003 1.003 0 0 1-1-1V9a1.003 1.003 0 0 1 1-1"/></svg>`,
-  "json": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="#f9a825" d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"/></svg>`,
-  "kotlin": `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><linearGradient id="a" x1="1.725" x2="22.185" y1="22.67" y2="1.982" gradientTransform="translate(1.306 1.129)scale(.89324)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7c4dff"/><stop offset=".5" stop-color="#d500f9"/><stop offset="1" stop-color="#ef5350"/></linearGradient></defs><path fill="url(#a)" d="M2.975 2.976v18.048h18.05v-.03l-4.478-4.511-4.48-4.515 4.48-4.515 4.443-4.477z"/></svg>`,
-  "less": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0277bd" d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3z"/></svg>`,
-  "lock": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffd54f" d="M25 12h-3V8a6 6 0 0 0-12 0v4H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1M14 8a2 2 0 0 1 4 0v4h-4Zm2 17a4 4 0 1 1 4-4 4 4 0 0 1-4 4"/></svg>`,
-  "lua": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#42a5f5" d="M30 6a3.86 3.86 0 0 1-1.167 2.833 4.024 4.024 0 0 1-5.666 0A3.86 3.86 0 0 1 22 6a3.86 3.86 0 0 1 1.167-2.833 4.024 4.024 0 0 1 5.666 0A3.86 3.86 0 0 1 30 6m-9.208 5.208A10.6 10.6 0 0 0 13 8a10.6 10.6 0 0 0-7.792 3.208A10.6 10.6 0 0 0 2 19a10.6 10.6 0 0 0 3.208 7.792A10.6 10.6 0 0 0 13 30a10.6 10.6 0 0 0 7.792-3.208A10.6 10.6 0 0 0 24 19a10.6 10.6 0 0 0-3.208-7.792m-1.959 7.625a4.024 4.024 0 0 1-5.666 0 4.024 4.024 0 0 1 0-5.666 4.024 4.024 0 0 1 5.666 0 4.024 4.024 0 0 1 0 5.666"/></svg>`,
-  "markdown": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#42a5f5" d="m14 10-4 3.5L6 10H4v12h4v-6l2 2 2-2v6h4V10zm12 6v-6h-4v6h-4l6 8 6-8z"/></svg>`,
-  "nix": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g stroke-width=".395"><path fill="#1976d2" d="M133.347 451.499c0-.295-2.752-5.283-6.116-11.084s-6.116-10.776-6.116-11.055 9.514-16.889 21.143-36.912c11.629-20.022 21.323-36.798 21.542-37.279.346-.76-1.608-4.363-14.896-27.466-8.412-14.625-15.294-26.785-15.294-27.023 0-.5 24.46-43.501 25.206-44.31.414-.45.592-.384 1.078.395.32.513 16.876 29.256 36.791 63.87 62.62 108.85 74.852 130.01 75.41 130.46.3.242.544.554.544.694s-11.836.21-26.302.154c-23.023-.09-26.313-.175-26.393-.694-.11-.714-27.662-48.825-28.86-50.392-.746-.978-.906-1.035-1.426-.51-.688.696-28.954 49.323-29.49 50.733l-.364.96h-13.23c-10.895 0-13.228-.095-13.228-.538zm167.58-125.61c-.134-.216 1.189-2.863 2.939-5.882 6.924-11.944 84.29-145.75 96.49-166.88 7.143-12.371 13.143-22.465 13.334-22.433.362.062 25.86 43.105 25.86 43.655 0 .174-6.761 11.952-15.025 26.173-8.46 14.557-14.932 26.104-14.81 26.421.185.483 4.563.564 30.213.564h29.996l.957 1.48c.527.814 3.296 5.547 6.155 10.518s5.45 9.29 5.757 9.597c.705.705.703.724-.16 1.572-.396.388-3.36 5.323-6.588 10.965-3.228 5.643-6.056 10.387-6.285 10.543s-19.695.171-43.256.034l-42.84-.249-.803 1.15c-.442.632-7.505 12.736-15.696 26.897l-14.892 25.747h-15.486c-8.518 0-20.015.116-25.551.259-6.55.168-10.15.121-10.308-.135zm-133.75-157.86c-56.373-.055-102.5-.182-102.5-.282s5.617-10.132 12.481-22.294L89.64 123.34h30.332c27.113 0 30.332-.065 30.332-.611 0-.336-6.659-12.228-14.797-26.427s-14.797-25.917-14.797-26.04 2.682-4.853 5.96-10.51 6.003-10.578 6.056-10.934c.086-.586 1.375-.648 13.572-.648 7.412 0 13.463.143 13.446.317-.018.174.22.707.53 1.184.31.476 9.763 16.937 21.007 36.578 11.244 19.64 20.71 36.022 21.036 36.4.554.647 2.549.691 31.428.691h30.837l12.896 22.145c7.093 12.18 12.8 22.301 12.682 22.492-.117.19-4.776.303-10.352.249-5.575-.054-56.26-.143-112.63-.198z"/><path fill="#64b5f6" d="M23.046 238.939c-6.098 10.563-6.69 11.711-6.224 12.078.282.224 3.18 5.044 6.44 10.712s6.016 10.355 6.123 10.417c.106.061 13.585.153 29.95.204 16.367.052 29.994.23 30.285.399.473.273-1.08 3.094-14.637 26.574l-15.166 26.269 12.907 21.865c7.1 12.026 12.982 21.906 13.068 21.956s23.257-39.831 51.492-88.624c11.352-19.617 21.214-36.64 30.37-52.442 23.308-40.452 30.68-53.468 30.73-54.132-1.096-.11-6.141-.187-13.006-.216-3.945-.01-7.82-.02-12.75-.002l-25.341.092-15.42 26.706c-14.256 24.693-15.445 26.663-16.278 26.86l-.023.037c-.012.003-1.622-.001-1.826 0-4.29.062-20.453.063-40.226-.01-22.632-.082-41.615-.125-42.183-.096-.567.03-1.147-.03-1.29-.132-.141-.102-3.29 5.066-6.996 11.485zm205.16-190.3c-.123.149 5.62 10.392 12.761 22.763 12.2 21.131 89.393 155.03 96.276 167 1.503 2.613 2.92 4.803 3.443 5.348.9-1.249 3.532-5.63 7.954-13.219a1343 1343 0 0 1 10.05-17.76l6.606-11.443c.691-1.403.753-1.818.652-2.117-.161-.48-6.903-12.332-14.982-26.337-8.078-14.005-14.824-25.849-14.99-26.32a.73.73 0 0 1-.01-.366l-.426-.913 21.636-36.976c3.69-6.307 6.425-11.042 9.471-16.29 9.158-15.948 12.036-21.189 11.895-21.55-.126-.324-2.7-4.83-5.72-10.017-3.021-5.185-5.845-10.148-6.275-11.026-.483-.987-.734-1.364-1.1-1.456-.054.014-.083.018-.144.035-.42.112-5.455.195-11.19.185s-11.22.024-12.187.073l-1.76.089-14.998 25.978c-12.824 22.212-15.084 25.964-15.595 25.883-.024-.004-.15-.189-.235-.301-.109.066-.2.09-.271.05-.256-.148-7.144-11.902-15.306-26.119L279.4 48.817c-.116-.186-.444-.744-.458-.752-.476-.275-50.502.287-50.737.57zm-18.646 283.09c-.047.109-.026.262.043.48.328 1.05 25.338 43.735 25.772 43.985.206.119 14.178.239 31.05.266 26.65.044 30.749.152 31.234.832.307.43 9.987 17.214 21.513 37.296s21.152 36.627 21.394 36.767 5.926.243 12.633.23c6.705-.013 12.4.099 12.657.246.131.076.381-.141.851-.795l6.008-10.406c5.234-9.065 6.62-11.684 6.294-11.888-.575-.36-15.597-26.643-23.859-41.482-3.09-5.45-5.37-9.516-5.44-9.774-.196-.712-.066-.822 1.155-.98 1.956-.252 57.397-.057 58.071.205.237.092.79-.569 2.593-3.497 1.866-3.067 5.03-8.524 11.001-18.866 7.22-12.505 13.043-22.784 12.941-22.843s-.77-.051-1.489.016l-.046.001c-4.451.204-33.918.203-149.74.025-38.96-.06-69.786-.09-71.912-.072-1.12.01-2.095.076-2.66.172a.3.3 0 0 0-.062.083z"/></g></svg>`,
-  "ocaml": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.019 15.021.003-.008c-.005-.021-.006-.026-.003.008"/><path fill="#ff9800" d="M4.51 3.273a2.523 2.523 0 0 0-2.524 2.523V11.3c.361-.13.88-.898 1.043-1.085.285-.327.337-.743.478-1.006C3.83 8.612 3.886 8.2 4.62 8.2c.342 0 .478.08.71.39.16.216.438.615.568.882.15.307.396.724.503.808q.122.095.233.137c.119.044.218-.037.297-.1.102-.082.145-.247.24-.467.135-.317.283-.697.367-.83.146-.23.195-.501.352-.633.232-.195.535-.208.618-.225.466-.092.677.225.907.43.15.133.355.403.5.765.114.283.26.544.32.707.059.158.203.41.289.713.077.275.286.486.365.616 0 0 .121.34.858.65.16.067.482.176.674.246.32.116.63.101 1.025.054.281 0 .434-.408.562-.734.075-.193.148-.745.197-.902.048-.153-.064-.27.031-.405.112-.156.178-.164.242-.368.138-.436.936-.458 1.384-.458.374 0 .327.363.96.239.364-.072.714.046 1.1.149.324.086.63.184.812.398.119.139.412.834.113.863.029.035.05.099.104.134-.067.262-.357.075-.518.041-.217-.045-.37.007-.583.101-.363.162-.894.143-1.21.407-.27.223-.269.721-.394 1 0 0-.348.895-1.106 1.443-.194.14-.574.477-1.4.605a5.3 5.3 0 0 1-1.1.043c-.186-.009-.362-.018-.549-.02-.11-.002-.48-.013-.461.022l-.041.103.024.138c.015.083.019.149.022.225.006.157-.013.32-.005.478.017.328.138.627.154.958.017.368.199.758.375 1.059.067.114.169.128.213.269.052.161.003.333.028.505.1.668.292 1.366.592 1.97l.008.014c.371-.062.743-.196 1.226-.267.885-.132 2.115-.064 2.906-.138 2-.188 3.085.82 4.882.407V5.796a2.523 2.523 0 0 0-2.523-2.523zm-.907 11.144q-.022 0-.046.003c-.159.025-.313.08-.412.24-.08.13-.108.355-.164.505-.064.175-.176.338-.274.505-.18.305-.504.581-.644.879-.028.06-.053.13-.076.2v3.402c.163.028.333.062.524.113 1.407.375 1.75.407 3.13.25l.13-.018c.105-.22.187-.968.255-1.2.054-.178.127-.32.155-.5.026-.173-.003-.337-.017-.493-.04-.393.285-.533.44-.87.14-.304.22-.651.336-.963.11-.298.284-.721.579-.872-.036-.041-.617-.06-.772-.076a5 5 0 0 1-.5-.07c-.314-.064-.656-.126-.965-.2a10 10 0 0 1-.947-.328c-.298-.138-.503-.497-.732-.507m5.737.83c-.74.149-.97.876-1.32 1.451-.192.319-.396.59-.548.928-.14.312-.128.657-.368.924a2.55 2.55 0 0 0-.528.922c-.023.067-.088.776-.158.943l1.101-.078c1.026.07.73.464 2.332.378l2.529-.078a7 7 0 0 0-.228-.588c-.07-.147-.16-.434-.218-.56a3.5 3.5 0 0 0-.309-.526c-.184-.215-.227-.23-.28-.503-.095-.473-.344-1.33-.637-1.923-.151-.306-.403-.562-.634-.784-.2-.195-.655-.522-.734-.505z"/></svg>`,
-  "php": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#1e88e5" d="M12 18.08c-6.63 0-12-2.72-12-6.08s5.37-6.08 12-6.08S24 8.64 24 12s-5.37 6.08-12 6.08m-5.19-7.95c.54 0 .91.1 1.09.31.18.2.22.56.13 1.03-.1.53-.29.87-.58 1.09q-.42.33-1.29.33h-.87l.53-2.76zm-3.5 5.55h1.44l.34-1.75h1.23c.54 0 .98-.06 1.33-.17.35-.12.67-.31.96-.58.24-.22.43-.46.58-.73.15-.26.26-.56.31-.88.16-.78.05-1.39-.33-1.82-.39-.44-.99-.65-1.82-.65H4.59zm7.25-8.33-1.28 6.58h1.42l.74-3.77h1.14c.36 0 .6.06.71.18s.13.34.07.66l-.57 2.93h1.45l.59-3.07c.13-.62.03-1.07-.27-1.36-.3-.27-.85-.4-1.65-.4h-1.27L12 7.35zM18 10.13c.55 0 .91.1 1.09.31.18.2.22.56.13 1.03-.1.53-.29.87-.57 1.09-.29.22-.72.33-1.3.33h-.85l.5-2.76zm-3.5 5.55h1.44l.34-1.75h1.22c.55 0 1-.06 1.35-.17.35-.12.65-.31.95-.58.24-.22.44-.46.58-.73.15-.26.26-.56.32-.88.15-.78.04-1.39-.34-1.82-.36-.44-.99-.65-1.82-.65h-2.75z"/></svg>`,
-  "python": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0288d1" d="M9.86 2A2.86 2.86 0 0 0 7 4.86v1.68h4.29c.39 0 .71.57.71.96H4.86A2.86 2.86 0 0 0 2 10.36v3.781a2.86 2.86 0 0 0 2.86 2.86h1.18v-2.68a2.85 2.85 0 0 1 2.85-2.86h5.25c1.58 0 2.86-1.271 2.86-2.851V4.86A2.86 2.86 0 0 0 14.14 2zm-.72 1.61c.4 0 .72.12.72.71s-.32.891-.72.891c-.39 0-.71-.3-.71-.89s.32-.711.71-.711"/><path fill="#fdd835" d="M17.959 7v2.68a2.85 2.85 0 0 1-2.85 2.859H9.86A2.85 2.85 0 0 0 7 15.389v3.75a2.86 2.86 0 0 0 2.86 2.86h4.28A2.86 2.86 0 0 0 17 19.14v-1.68h-4.291c-.39 0-.709-.57-.709-.96h7.14A2.86 2.86 0 0 0 22 13.64V9.86A2.86 2.86 0 0 0 19.14 7zM8.32 11.513l-.004.004.038-.004zm6.54 7.276c.39 0 .71.3.71.89a.71.71 0 0 1-.71.71c-.4 0-.72-.12-.72-.71s.32-.89.72-.89"/></svg>`,
-  "r": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#1976d2" d="M11.956 4.05c-5.694 0-10.354 3.106-10.354 6.947 0 3.396 3.686 6.212 8.531 6.813v2.205h3.53V17.82c.88-.093 1.699-.259 2.475-.497l1.43 2.692h3.996l-2.402-4.048c1.936-1.263 3.147-3.034 3.147-4.97 0-3.841-4.659-6.947-10.354-6.947m1.584 2.712c4.349 0 7.558 1.45 7.558 4.753 0 1.77-.952 3.013-2.505 3.779a1 1 0 0 1-.228-.156c-.373-.165-.994-.352-.994-.352s3.085-.227 3.085-3.302-3.23-3.127-3.23-3.127h-7.092v7.413c-2.64-.766-4.462-2.392-4.462-4.255 0-2.63 3.52-4.753 7.868-4.753m.156 4.12h2.143s.983-.05.983.974c0 1.004-.983 1.004-.983 1.004h-2.143v-1.977m-.031 4.566h.952c.186 0 .28.052.445.207.135.103.28.3.404.476-.57.073-1.17.104-1.801.104z"/></svg>`,
-  "react": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#00bcd4" d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4-12-2.59-12-4 4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6 14-2.686 14-6-6.268-6-14-6"/><path fill="#00bcd4" d="M16 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2"/><path fill="#00bcd4" d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493 3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124-3.284-5.69-7.72-9.493-10.74-9.493Z"/><path fill="#00bcd4" d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"/></svg>`,
-  "react_ts": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4-12-2.59-12-4 4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6 14-2.686 14-6-6.268-6-14-6"/><path fill="#0288d1" d="M16 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2"/><path fill="#0288d1" d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493 3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124-3.284-5.69-7.72-9.493-10.74-9.493Z"/><path fill="#0288d1" d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"/></svg>`,
-  "ruby": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#f44336" d="M18.041 3.177c2.24.382 2.879 1.919 2.843 3.527V6.67l-1.013 13.266-13.132.897h.008c-1.093-.044-3.518-.151-3.634-3.545l1.217-2.222 2.462 5.74 2.097-6.77-.045.009.018-.018 6.85 2.186L13.945 9.3l6.53-.409-5.144-4.212 2.71-1.51v.009M3.113 17.252v.017zM6.916 6.874c2.63-2.622 6.033-4.168 7.34-2.844 1.297 1.306-.072 4.523-2.702 7.135-2.666 2.613-6.015 4.248-7.322 2.933-1.306-1.324.036-4.612 2.675-7.224z"/></svg>`,
-  "rust": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ff7043" d="m30 12-4-2V6h-4l-2-4-4 2-4-2-2 4H6v4l-4 2 2 4-2 4 4 2v4h4l2 4 4-2 4 2 2-4h4v-4l4-2-2-4ZM6 16a9.9 9.9 0 0 1 .842-4H10v8H6.842A9.9 9.9 0 0 1 6 16m10 10a9.98 9.98 0 0 1-7.978-4H16v-2h-2v-2h4c.819.819.297 2.308 1.179 3.37a1.89 1.89 0 0 0 1.46.63h3.34A9.98 9.98 0 0 1 16 26m-2-12v-2h4a1 1 0 0 1 0 2Zm11.158 6H24a2.006 2.006 0 0 1-2-2 2 2 0 0 0-2-2 3 3 0 0 0 3-3q0-.08-.004-.161A3.115 3.115 0 0 0 19.83 10H8.022a9.986 9.986 0 0 1 17.136 10"/></svg>`,
-  "sass": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ec407a" d="M27.837 5.673a4.33 4.33 0 0 0-2.293-2.701c-2.362-1.261-6.11-1.298-9.548-.092a26.3 26.3 0 0 0-8.76 4.966c-2.752 2.542-3.438 4.925-3.189 6.194.523 2.668 3.274 4.539 5.485 6.042.418.284.822.559 1.175.816-1.429.76-4.261 2.444-5.088 4.248a3.88 3.88 0 0 0-.118 3.332A2.37 2.37 0 0 0 6.869 29.8a5.6 5.6 0 0 0 1.49.2 6.35 6.35 0 0 0 5.19-2.856 6.74 6.74 0 0 0 .864-5.382 7.3 7.3 0 0 1 2.044-.03 3.92 3.92 0 0 1 2.816 1.311 1.82 1.82 0 0 1 .423 1.262 1.55 1.55 0 0 1-.772 1.05c-.234.14-.586.355-.504.803.036.194.198.633.894.512a2.93 2.93 0 0 0 2.145-2.651 4 4 0 0 0-1.197-2.904 5.94 5.94 0 0 0-4.396-1.626 10.6 10.6 0 0 0-2.672.304 20 20 0 0 0-2.203-1.846c-1.712-1.3-3.33-2.529-3.235-4.26.125-2.263 2.468-4.532 6.964-6.744 4.016-1.976 7.254-2.037 8.944-1.438a2 2 0 0 1 1.204.883 2.77 2.77 0 0 1-.36 2.47 9.71 9.71 0 0 1-7.425 4.304 3.86 3.86 0 0 1-3.238-.757c-.278-.302-.593-.645-1.074-.383q-.565.31-.225 1.189a3.9 3.9 0 0 0 2.407 1.92 11.7 11.7 0 0 0 7.128-.671c3.527-1.35 6.681-5.202 5.756-8.787M11.895 24.475a4 4 0 0 1-.192.468 4.5 4.5 0 0 1-.753 1.081 2.83 2.83 0 0 1-2.533 1.107c-.056-.032-.078-.146-.085-.193a3.28 3.28 0 0 1 1.076-2.284 11.3 11.3 0 0 1 2.644-1.933 3.85 3.85 0 0 1-.157 1.754"/></svg>`,
-  "scala": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f44336" d="m6.457 9.894 12.523 5.163-.456 1.211L6 11.105Zm7.02-3.091L26 11.966l-.457 1.21L13.02 8.015ZM6.465 18.885l12.524 5.163-.457 1.21L6.01 20.097Zm7.007-3.086 12.524 5.163-.456 1.21-12.524-5.162Z"/><path fill="#f44336" d="M6 24.07V30l19.997-3.106V20.96zM6 5.11v5.99l20-3.11V2zm0 9.96v5.03l20-3.11v-5.03z"/></svg>`,
-  "settings": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/><path fill="#42a5f5" d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.6.6 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1q.09.03.18.03c.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64zm-1.98-1.71c.04.31.05.52.05.73s-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"/></svg>`,
-  "svelte": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="#ff5722" d="M175.94 24.328c-13.037.252-26.009 3.872-37.471 11.174L79.912 72.818a67.13 67.13 0 0 0-30.355 44.906 70.8 70.8 0 0 0 6.959 45.445 67.2 67.2 0 0 0-10.035 25.102 71.54 71.54 0 0 0 12.236 54.156c23.351 33.41 69.468 43.311 102.81 22.07l58.559-37.158a67.36 67.36 0 0 0 30.355-44.906 70.77 70.77 0 0 0-6.982-45.422 67.65 67.65 0 0 0 10.059-25.102 71.63 71.63 0 0 0-12.236-54.156v-.18c-15.324-21.925-40.453-33.727-65.342-33.246zm5.137 28.68a46.5 46.5 0 0 1 36.09 19.969 42.98 42.98 0 0 1 7.365 32.557 45 45 0 0 1-1.393 5.455l-1.123 3.37-2.986-2.247a75.9 75.9 0 0 0-22.902-11.45l-2.244-.651.201-2.246a13.16 13.16 0 0 0-2.379-8.711 13.99 13.99 0 0 0-14.953-5.412 12.8 12.8 0 0 0-3.594 1.572l-58.578 37.25a12.24 12.24 0 0 0-5.502 8.15 13.1 13.1 0 0 0 2.246 9.834 14.03 14.03 0 0 0 14.93 5.569 13.5 13.5 0 0 0 3.594-1.573l22.453-14.234a41.8 41.8 0 0 1 11.898-5.232 46.48 46.48 0 0 1 49.914 18.502 43.02 43.02 0 0 1 7.363 32.557 40.42 40.42 0 0 1-18.254 27.078l-58.58 37.316a43 43 0 0 1-11.898 5.23A46.545 46.545 0 0 1 82.81 227.14a42.98 42.98 0 0 1-7.341-32.557 38 38 0 0 1 1.39-5.41l1.102-3.37 3.008 2.246a75.9 75.9 0 0 0 22.836 11.361l2.244.65-.201 2.247a13.25 13.25 0 0 0 2.447 8.644 14.03 14.03 0 0 0 15.043 5.569 13.1 13.1 0 0 0 3.592-1.573l58.467-37.316a12.17 12.17 0 0 0 5.502-8.173 12.96 12.96 0 0 0-2.246-9.811 14.03 14.03 0 0 0-15.043-5.568 12.8 12.8 0 0 0-3.592 1.57l-22.453 14.258a42.9 42.9 0 0 1-11.877 5.209 46.52 46.52 0 0 1-49.846-18.5 43.02 43.02 0 0 1-7.297-32.557A40.42 40.42 0 0 1 96.798 96.98l58.646-37.316a42.8 42.8 0 0 1 11.811-5.21 46.5 46.5 0 0 1 13.822-1.444z"/></svg>`,
-  "svg": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffb300" d="M29.168 14.03a2.7 2.7 0 0 0-1.968-.83 2.51 2.51 0 0 0-1.929.8h-4.443l3.078-3.078a2.835 2.835 0 0 0 2.857-2.842 2.6 2.6 0 0 0-.831-1.969 2.82 2.82 0 0 0-2.014-.788 2.67 2.67 0 0 0-1.968.788 2.36 2.36 0 0 0-.812 1.922L18 11.17V6.726a2.51 2.51 0 0 0 .8-1.929 2.7 2.7 0 0 0-.832-1.968 2.745 2.745 0 0 0-3.936 0 2.7 2.7 0 0 0-.832 1.968 2.51 2.51 0 0 0 .8 1.93v4.443l-3.138-3.138a2.36 2.36 0 0 0-.812-1.922 2.66 2.66 0 0 0-1.968-.788 2.83 2.83 0 0 0-2.014.788 2.6 2.6 0 0 0-.831 1.969 2.74 2.74 0 0 0 .831 2.013 2.8 2.8 0 0 0 2.026.829l3.078 3.078H6.729a2.51 2.51 0 0 0-1.929-.8 2.7 2.7 0 0 0-1.968.831 2.745 2.745 0 0 0 0 3.937 2.7 2.7 0 0 0 1.968.832 2.51 2.51 0 0 0 1.929-.8h4.443l-3.078 3.077a2.835 2.835 0 0 0-2.857 2.842 2.6 2.6 0 0 0 .831 1.969 2.82 2.82 0 0 0 2.014.788 2.67 2.67 0 0 0 1.968-.788 2.36 2.36 0 0 0 .812-1.922L14 20.827v4.444a2.51 2.51 0 0 0-.8 1.929 2.784 2.784 0 0 0 4.768 1.968A2.7 2.7 0 0 0 18.8 27.2a2.51 2.51 0 0 0-.8-1.929v-4.444l3.138 3.138a2.36 2.36 0 0 0 .812 1.922 2.66 2.66 0 0 0 1.968.788 2.83 2.83 0 0 0 2.014-.788 2.6 2.6 0 0 0 .831-1.969 2.74 2.74 0 0 0-.831-2.013 2.8 2.8 0 0 0-2.026-.829L20.828 18h4.443a2.51 2.51 0 0 0 1.93.8 2.784 2.784 0 0 0 1.967-4.769Z"/></svg>`,
-  "swift": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff6e40" d="M17.087 19.721c-2.36 1.36-5.59 1.5-8.86.1a13.8 13.8 0 0 1-6.23-5.32c.67.55 1.46 1 2.3 1.4 3.37 1.57 6.73 1.46 9.1 0-3.37-2.59-6.24-5.96-8.37-8.71-.45-.45-.78-1.01-1.12-1.51 8.28 6.05 7.92 7.59 2.41-1.01 4.89 4.94 9.43 7.74 9.43 7.74.16.09.25.16.36.22.1-.25.19-.51.26-.78.79-2.85-.11-6.12-2.08-8.81 4.55 2.75 7.25 7.91 6.12 12.24-.03.11-.06.22-.05.39 2.24 2.83 1.64 5.78 1.35 5.22-1.21-2.39-3.48-1.65-4.62-1.17"/></svg>`,
-  "terraform": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#5c6bc0" d="m2 10 8 4V6L2 2zm10 5 8 4v-8l-8-4zm0 11 8 4v-8l-8-4zm10-14v8l8-4V8z"/></svg>`,
-  "toml": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#cfd8dc" d="M4 6V4h8v2H9v7H7V6z"/><path fill="#ef5350" d="M4 1v1H2v12h2v1H1V1zm8 0v1h2v12h-2v1h3V1z"/></svg>`,
-  "typescript": `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><path fill="#0288d1" d="M2 2v12h12V2zm4 6h3v1H8v4H7V9H6zm5 0h2v1h-2v1h1a1.003 1.003 0 0 1 1 1v1a1.003 1.003 0 0 1-1 1h-2v-1h2v-1h-1a1.003 1.003 0 0 1-1-1V9a1.003 1.003 0 0 1 1-1"/></svg>`,
-  "vue": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#41b883" d="M1.791 3.851 12 21.471 22.209 3.936V3.85H18.24l-6.18 10.616L5.906 3.851z"/><path fill="#35495e" d="m5.907 3.851 6.152 10.617L18.24 3.851h-3.723L12.084 8.03 9.66 3.85z"/></svg>`,
-  "webassembly": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7c4dff" d="M22 18h4v4h-4z"/><path fill="#7c4dff" d="M20 2a4 4 0 0 1-8 0H2v28h28V2Zm-2 24h-2v2h-4v-2h-2v2H6v-2H4V16h2v10h4V16h2v10h4V16h2Zm10 2h-2v-4h-4v4h-2V18h2v-2h4v2h2Z"/></svg>`,
-  "xml": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#8bc34a" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m.12 13.5 3.74 3.74 1.42-1.41-2.33-2.33 2.33-2.33-1.42-1.41zm11.16 0-3.74-3.74-1.42 1.41 2.33 2.33-2.33 2.33 1.42 1.41z"/></svg>`,
-  "yaml": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5252" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2m12 16v-2H9v2zm-4-4v-2H6v2z"/></svg>`,
-  "zig": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f9a825" d="M2 8h6v4H2zm8 0h12v4H10zm0 12h12v4H10zm14 0h2v4h-2zM8 20l-3 4H2V12h4v8zm14-8h-6l-6 8h6z"/><path fill="#f9a825" d="M16 20h-6l-6 8m12-16h6l6-8m2 4v16h-4V12h-2l3-4z"/></svg>`,
+  _default: `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m8.668 6h3.6641l-3.6641-3.668v3.668m-4.668-4.668h5.332l4 4v8c0 0.73828-0.59375 1.3359-1.332 1.3359h-8c-0.73828 0-1.332-0.59766-1.332-1.3359v-10.664c0-0.74219 0.59375-1.3359 1.332-1.3359m3.332 1.3359h-3.332v10.664h8v-6h-4.668z" fill="#90a4ae" /></svg>`,
+  astro: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7c4dff" d="M12.106 25.849c-1.262-1.156-1.63-3.586-1.105-5.346a5.18 5.18 0 0 0 3.484 1.66 9.68 9.68 0 0 0 5.882-.734c.215-.106.413-.247.648-.39a3.5 3.5 0 0 1 .16 1.555 4.26 4.26 0 0 1-1.798 3.021c-.404.3-.832.569-1.25.852a2.613 2.613 0 0 0-1.15 3.372l.048.161a3.4 3.4 0 0 1-1.5-1.285 3.6 3.6 0 0 1-.578-1.962 9 9 0 0 0-.05-1.037c-.114-.831-.504-1.204-1.238-1.225a1.45 1.45 0 0 0-1.507 1.18c-.012.056-.028.112-.046.178M4.901 20a17.75 17.75 0 0 1 7.4-2l2.913-8.38a.765.765 0 0 1 1.527 0L19.7 18a14.24 14.24 0 0 1 7.399 2S20.704 2.877 20.692 2.842C20.51 2.33 20.202 2 19.787 2h-7.619c-.415 0-.71.33-.904.842z"/></svg>`,
+  c: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M19.563 22A5.57 5.57 0 0 1 14 16.437v-2.873A5.57 5.57 0 0 1 19.563 8H24V2h-4.437A11.563 11.563 0 0 0 8 13.563v2.873A11.564 11.564 0 0 0 19.563 28H24v-6Z"/></svg>`,
+  clojure: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#64dd17" d="M123.456 129.975a507 507 0 0 0-3.54 7.846c-4.406 9.981-9.284 22.127-11.066 29.908-.64 2.77-1.037 6.205-1.03 10.013 0 1.506.081 3.09.21 4.702a58.1 58.1 0 0 0 19.98 3.559 58.2 58.2 0 0 0 18.29-2.98c-1.352-1.237-2.642-2.554-3.816-4.038-7.796-9.942-12.146-24.512-19.028-49.01m-28.784-49.39C79.782 91.08 70.039 108.387 70.002 128c.037 19.32 9.487 36.403 24.002 46.94 3.56-14.83 12.485-28.41 25.868-55.63a219 219 0 0 0-2.714-7.083c-3.708-9.3-9.059-20.102-13.834-24.993-2.435-2.555-5.389-4.763-8.652-6.648"/><path fill="#7cb342" d="M178.532 194.535c-7.683-.963-14.023-2.124-19.57-4.081a69.4 69.4 0 0 1-30.958 7.249c-38.491 0-69.693-31.198-69.698-69.7 0-20.891 9.203-39.62 23.764-52.392-3.895-.94-7.956-1.49-12.104-1.482-20.45.193-42.037 11.51-51.025 42.075-.84 4.45-.64 7.813-.64 11.8 0 60.591 49.12 109.715 109.705 109.715 37.104 0 69.882-18.437 89.732-46.633-10.736 2.675-21.06 3.955-29.902 3.982-3.314 0-6.425-.177-9.305-.53"/><path fill="#29b6f6" d="M157.922 173.271c.678.336 2.213.884 4.35 1.49 14.375-10.553 23.717-27.552 23.754-46.764h-.005c-.055-32.03-25.974-57.945-58.011-58.009a58.2 58.2 0 0 0-18.213 2.961c11.779 13.426 17.443 32.613 22.922 53.6l.01.025c.01.017 1.752 5.828 4.743 13.538 2.97 7.7 7.203 17.231 11.818 24.178 3.03 4.655 6.363 8 8.632 8.981"/><path fill="#1e88e5" d="M128.009 18.29c-36.746 0-69.25 18.089-89.16 45.826 10.361-6.49 20.941-8.83 30.174-8.747 12.753.037 22.779 3.991 27.589 6.696a51 51 0 0 1 3.345 2.131 69.4 69.4 0 0 1 28.049-5.894c38.496.004 69.703 31.202 69.709 69.698h-.006c0 19.409-7.938 36.957-20.736 49.594 3.142.352 6.492.571 9.912.554 12.15.006 25.284-2.675 35.13-10.956 6.42-5.408 11.798-13.327 14.78-25.199.584-4.586.92-9.247.92-13.991 0-60.588-49.116-109.715-109.705-109.715"/></svg>`,
+  console: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ff7043" d="M2 2a1 1 0 0 0-1 1v10c0 .554.446 1 1 1h12c.554 0 1-.446 1-1V3a1 1 0 0 0-1-1zm0 3h12v8H2zm1 2 2 2-2 2 1 1 3-3-3-3zm5 3.5V12h5v-1.5z"/></svg>`,
+  cpp: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M28 14v-4h-2v4h-6v-4h-2v4h-4v2h4v4h2v-4h6v4h2v-4h4v-2z"/><path fill="#0288d1" d="M13.563 22A5.57 5.57 0 0 1 8 16.437v-2.873A5.57 5.57 0 0 1 13.563 8H18V2h-4.437A11.563 11.563 0 0 0 2 13.563v2.873A11.564 11.564 0 0 0 13.563 28H18v-6Z"/></svg>`,
+  csharp: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M30 14v-2h-2V8h-2v4h-2V8h-2v4h-2v2h2v2h-2v2h2v4h2v-4h2v4h2v-4h2v-2h-2v-2Zm-4 2h-2v-2h2Zm-12.437 6A5.57 5.57 0 0 1 8 16.437v-2.873A5.57 5.57 0 0 1 13.563 8H18V2h-4.437A11.563 11.563 0 0 0 2 13.563v2.873A11.564 11.564 0 0 0 13.563 28H18v-6Z"/></svg>`,
+  css: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7e57c2" d="M20 18h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 20 22h2v2h2v-2c0-.388-.562-.851-1.254-1.034C20.356 20.34 20 18.84 20 18m-3.254 2.966C14.356 20.34 14 18.84 14 18h-2v-2h-2v8h2v-2h4v2h2v-2c0-.388-.562-.851-1.254-1.034"/><path fill="#7e57c2" d="M24 4H4v20a4 4 0 0 0 4 4h16.16A3.84 3.84 0 0 0 28 24.16V8a4 4 0 0 0-4-4m2 14h-2v-2h-2v2c0 .193 0 .703 1.254 1.033A3.345 3.345 0 0 1 26 22v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2 2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 2 2 0 0 1 2-2h2a2 2 0 0 1 2 2Z"/></svg>`,
+  dart: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#4fc3f7" d="M16.83 2a1.3 1.3 0 0 0-.916.377l-.013.01L7.323 7.34l8.556 8.55v.005l10.283 10.277 1.96-3.529-7.068-16.96-3.299-3.297A1.3 1.3 0 0 0 16.828 2Z"/><path fill="#01579b" d="m7.343 7.32-4.955 8.565-.01.013a1.297 1.297 0 0 0 .004 1.835l.005.005 4.106 4.107 16.064 6.314 3.632-2.015-.098-.098-.025.002L15.995 15.97h-.012z"/><path fill="#01579b" d="m7.321 7.324 8.753 8.755h.013L26.16 26.156l3.835-.73L30 14.089l-4.049-3.965a6.5 6.5 0 0 0-3.618-1.612l.002-.043L7.323 7.325Z"/><path fill="#64b5f6" d="m7.332 7.335 8.758 8.75v.013l10.079 10.071L25.436 30H14.09l-3.967-4.048a6.5 6.5 0 0 1-1.611-3.618l-.045.004Z"/></svg>`,
+  database: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffca28" d="M16 24c-5.525 0-10-.9-10-2v4c0 1.1 4.475 2 10 2s10-.9 10-2v-4c0 1.1-4.475 2-10 2m0-8c-5.525 0-10-.9-10-2v4c0 1.1 4.475 2 10 2s10-.9 10-2v-4c0 1.1-4.475 2-10 2m0-12C10.477 4 6 4.895 6 6v4c0 1.1 4.475 2 10 2s10-.9 10-2V6c0-1.105-4.477-2-10-2"/></svg>`,
+  document: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/><path fill="#42a5f5" d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"/></svg>`,
+  elixir: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9575cd" d="M12.173 22.681c-3.86 0-6.99-3.64-6.99-8.13 0-3.678 2.773-8.172 4.916-10.91 1.014-1.296 2.93-2.322 2.93-2.322s-.982 5.239 1.683 7.319c2.366 1.847 4.106 4.25 4.106 6.363 0 4.232-2.784 7.68-6.645 7.68"/></svg>`,
+  erlang: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path fill="#f44336" d="M5.207 4.33q-.072.075-.143.153Q1.5 8.476 1.5 15.33c0 4.418 1.155 7.862 3.459 10.34h19.415c2.553-1.152 4.127-3.43 4.127-3.43l-3.147-2.52L23.9 21.1c-.867.773-.845.931-2.315 1.78-1.495.674-3.04.966-4.634.966-2.515 0-4.423-.909-5.723-2.059-1.286-1.15-1.985-4.511-2.096-6.68l17.458.067-.183-1.472s-.847-7.129-2.541-9.372zm8.76.846c1.565 0 3.22.535 3.961 1.471.74.937.931 1.667.973 3.524H9.11c.112-1.955.436-2.81 1.373-3.698.936-.887 2.03-1.297 3.484-1.297"/></svg>`,
+  go: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#00acc1" d="M2 12h4v2H2zm-2 4h6v2H0zm4 4h2v2H4zm16.954-5H14v3h3.239a4.42 4.42 0 0 1-3.531 2 2.65 2.65 0 0 1-2.053-.858 2.86 2.86 0 0 1-.628-2.28A4.515 4.515 0 0 1 15.292 13a2.73 2.73 0 0 1 1.749.584l2.962-1.185A5.6 5.6 0 0 0 15.292 10a7.526 7.526 0 0 0-7.243 6.5 5.614 5.614 0 0 0 5.659 6.5 7.526 7.526 0 0 0 7.243-6.5 6.4 6.4 0 0 0 .003-1.5"/><path fill="#00acc1" d="M26.292 10a7.526 7.526 0 0 0-7.243 6.5 5.614 5.614 0 0 0 5.659 6.5 7.526 7.526 0 0 0 7.243-6.5 5.614 5.614 0 0 0-5.659-6.5m2.681 6.137A4.515 4.515 0 0 1 24.708 20a2.65 2.65 0 0 1-2.053-.858 2.86 2.86 0 0 1-.628-2.28A4.515 4.515 0 0 1 26.292 13a2.65 2.65 0 0 1 2.053.858 2.86 2.86 0 0 1 .628 2.28Z"/></svg>`,
+  gradle: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0097a7" d="M16 10v2h6c-2 0-3-2-6-2"/><path fill="#0097a7" d="M26 4h-2a4 4 0 0 0-4 4h4a1 1 0 0 1 2 0v4H16v-2h-5.317A2.683 2.683 0 0 0 8 12.683v2.634A2.683 2.683 0 0 0 10.683 18H16v2h-5.98A4.02 4.02 0 0 1 6 16v-2c-2 0-4 4-4 8 0 5 1 6 2 6h4v-4h4v4h4v-4h4v4h4v-6a2 2 0 0 0 2-2v-2a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4m-4 12h-2a2 2 0 0 1-2-2h6a2 2 0 0 1-2 2"/></svg>`,
+  graphql: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ec407a" d="M6 20h20v2H6z"/><circle cx="7" cy="21" r="3" fill="#ec407a"/><circle cx="16" cy="27" r="3" fill="#ec407a"/><circle cx="25" cy="21" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 10h20v2H6z"/><circle cx="7" cy="11" r="3" fill="#ec407a"/><circle cx="16" cy="5" r="3" fill="#ec407a"/><circle cx="25" cy="11" r="3" fill="#ec407a"/><path fill="#ec407a" d="M6 12h2v10H6zm18-2h2v12h-2z"/><path fill="#ec407a" d="m5.014 19.41 11.674 6.866L15.674 28 4 21.134z"/><path fill="#ec407a" d="M26.688 21.724 15.014 28.59 14 26.866 25.674 20zM5.124 10.382l11.415-7.29 1.077 1.686L6.2 12.068z"/><path fill="#ec407a" d="m25.798 12.067-11.415-7.29 1.077-1.685 11.415 7.29zM6.2 19.932l11.416 7.29-1.077 1.686-11.415-7.29z"/><path fill="#ec407a" d="m26.875 21.619-11.415 7.29-1.077-1.687 11.415-7.289zM5.877 22.6 16.04 3.686l1.762.946L7.638 23.546z"/><path fill="#ec407a" d="M24.361 23.545 14.197 4.633l1.761-.947 10.165 18.913z"/></svg>`,
+  groovy: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#26c6da" d="M19.322 2a6.5 6.5 0 0 1 4.352 1.419 4.55 4.55 0 0 1 1.685 3.662 5.82 5.82 0 0 1-1.886 4.275 6.04 6.04 0 0 1-4.34 1.846 4.15 4.15 0 0 1-2.385-.649 1.91 1.91 0 0 1-.936-1.603 1.6 1.6 0 0 1 .356-1.024 1.1 1.1 0 0 1 .861-.447q.469 0 .468.504a.79.79 0 0 0 .358.693 1.43 1.43 0 0 0 .826.245 3.1 3.1 0 0 0 2.39-1.573 5.66 5.66 0 0 0 1.154-3.39 2.64 2.64 0 0 0-.891-2.064 3.28 3.28 0 0 0-2.293-.812 6.18 6.18 0 0 0-4.086 1.736 12.9 12.9 0 0 0-3.215 4.557 13.4 13.4 0 0 0-1.233 5.36 5.86 5.86 0 0 0 1.091 3.723 3.53 3.53 0 0 0 2.905 1.372q3.058 0 5.848-4.002l2.935-.388q.546-.07.545.246a8 8 0 0 1-.423 1.24q-.421 1.097-1.152 3.668A12.7 12.7 0 0 0 26 17.72v1.66a14.2 14.2 0 0 1-4.055 2.57 10.38 10.38 0 0 1-2.764 5.931 6.7 6.7 0 0 1-4.806 2.11 3.3 3.3 0 0 1-2.012-.55 1.8 1.8 0 0 1-.718-1.514q0-2.685 5.634-5.212.532-1.766 1.152-3.507a8.6 8.6 0 0 1-2.853 2.323 7.4 7.4 0 0 1-3.48 1.01 5.46 5.46 0 0 1-4.366-2.093A8.1 8.1 0 0 1 6 15.122a11.6 11.6 0 0 1 1.966-6.426 14.7 14.7 0 0 1 5.162-4.862A12.44 12.44 0 0 1 19.322 2m-2.407 22.17q-4.055 1.875-4.054 3.695a.87.87 0 0 0 .999.97q1.964 0 3.055-4.665"/></svg>`,
+  h: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M18.5 11a5.49 5.49 0 0 0-4.5 2.344V4H8v24h6V17a2 2 0 0 1 4 0v11h6V16.5a5.5 5.5 0 0 0-5.5-5.5"/></svg>`,
+  haskell: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g stroke-width="2.422"><path fill="#ef5350" d="m23.928 240.5 59.94-89.852-59.94-89.855h44.955l59.94 89.855-59.94 89.852z"/><path fill="#ffa726" d="m83.869 240.5 59.94-89.852-59.94-89.855h44.955l119.88 179.71h-44.95l-37.46-56.156-37.468 56.156z"/><path fill="#ffee58" d="m228.72 188.08-19.98-29.953h69.93v29.956h-49.95zm-29.97-44.924-19.98-29.953h99.901v29.953z"/></g></svg>`,
+  hcl: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#eceff1" d="M18 1.2V14h-4v-4l-4 2v16.37l4 2.43V18h4v4l4-2V3.63z"/><path fill="#eceff1" d="M14 1.2 2 8.49v15.02l4 2.43v-15.2l8-4.86zm12 4.86v15.2l-8 4.86v4.68l12-7.29V8.49z"/></svg>`,
+  hpp: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M28 6V2h-2v4h-6V2h-2v4h-4v2h4v4h2V8h6v4h2V8h4V6zm-15.5 5A5.49 5.49 0 0 0 8 13.344V4H2v24h6V17a2 2 0 0 1 4 0v11h6V16.5a5.5 5.5 0 0 0-5.5-5.5"/></svg>`,
+  html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#e65100" d="m4 4 2 22 10 2 10-2 2-22Zm19.72 7H11.28l.29 3h11.86l-.802 9.335L15.99 25l-6.635-1.646L8.93 19h3.02l.19 2 3.86.77 3.84-.77.29-4H8.84L8 8h16Z"/></svg>`,
+  image: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#26a69a" d="M8.5 6h4l-4-4zM3.875 1H9.5l4 4v8.6c0 .773-.616 1.4-1.375 1.4h-8.25c-.76 0-1.375-.627-1.375-1.4V2.4c0-.777.612-1.4 1.375-1.4M4 13.6h8V8l-2.625 2.8L8 9.4zm1.25-7.7c-.76 0-1.375.627-1.375 1.4s.616 1.4 1.375 1.4c.76 0 1.375-.627 1.375-1.4S6.009 5.9 5.25 5.9"/></svg>`,
+  java: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f44336" d="M4 26h24v2H4zM28 4H7a1 1 0 0 0-1 1v13a4 4 0 0 0 4 4h10a4 4 0 0 0 4-4v-4h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 8h-4V6h4Z"/></svg>`,
+  javascript: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#ffca28" d="M2 2v12h12V2zm6 6h1v4a1.003 1.003 0 0 1-1 1H7a1.003 1.003 0 0 1-1-1v-1h1v1h1zm3 0h2v1h-2v1h1a1.003 1.003 0 0 1 1 1v1a1.003 1.003 0 0 1-1 1h-2v-1h2v-1h-1a1.003 1.003 0 0 1-1-1V9a1.003 1.003 0 0 1 1-1"/></svg>`,
+  json: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="#f9a825" d="M560-160v-80h120q17 0 28.5-11.5T720-280v-80q0-38 22-69t58-44v-14q-36-13-58-44t-22-69v-80q0-17-11.5-28.5T680-720H560v-80h120q50 0 85 35t35 85v80q0 17 11.5 28.5T840-560h40v160h-40q-17 0-28.5 11.5T800-360v80q0 50-35 85t-85 35zm-280 0q-50 0-85-35t-35-85v-80q0-17-11.5-28.5T120-400H80v-160h40q17 0 28.5-11.5T160-600v-80q0-50 35-85t85-35h120v80H280q-17 0-28.5 11.5T240-680v80q0 38-22 69t-58 44v14q36 13 58 44t22 69v80q0 17 11.5 28.5T280-240h120v80z"/></svg>`,
+  kotlin: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><defs><linearGradient id="a" x1="1.725" x2="22.185" y1="22.67" y2="1.982" gradientTransform="translate(1.306 1.129)scale(.89324)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#7c4dff"/><stop offset=".5" stop-color="#d500f9"/><stop offset="1" stop-color="#ef5350"/></linearGradient></defs><path fill="url(#a)" d="M2.975 2.976v18.048h18.05v-.03l-4.478-4.511-4.48-4.515 4.48-4.515 4.443-4.477z"/></svg>`,
+  less: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0277bd" d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3z"/></svg>`,
+  lock: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffd54f" d="M25 12h-3V8a6 6 0 0 0-12 0v4H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V13a1 1 0 0 0-1-1M14 8a2 2 0 0 1 4 0v4h-4Zm2 17a4 4 0 1 1 4-4 4 4 0 0 1-4 4"/></svg>`,
+  lua: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#42a5f5" d="M30 6a3.86 3.86 0 0 1-1.167 2.833 4.024 4.024 0 0 1-5.666 0A3.86 3.86 0 0 1 22 6a3.86 3.86 0 0 1 1.167-2.833 4.024 4.024 0 0 1 5.666 0A3.86 3.86 0 0 1 30 6m-9.208 5.208A10.6 10.6 0 0 0 13 8a10.6 10.6 0 0 0-7.792 3.208A10.6 10.6 0 0 0 2 19a10.6 10.6 0 0 0 3.208 7.792A10.6 10.6 0 0 0 13 30a10.6 10.6 0 0 0 7.792-3.208A10.6 10.6 0 0 0 24 19a10.6 10.6 0 0 0-3.208-7.792m-1.959 7.625a4.024 4.024 0 0 1-5.666 0 4.024 4.024 0 0 1 0-5.666 4.024 4.024 0 0 1 5.666 0 4.024 4.024 0 0 1 0 5.666"/></svg>`,
+  markdown: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#42a5f5" d="m14 10-4 3.5L6 10H4v12h4v-6l2 2 2-2v6h4V10zm12 6v-6h-4v6h-4l6 8 6-8z"/></svg>`,
+  nix: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g stroke-width=".395"><path fill="#1976d2" d="M133.347 451.499c0-.295-2.752-5.283-6.116-11.084s-6.116-10.776-6.116-11.055 9.514-16.889 21.143-36.912c11.629-20.022 21.323-36.798 21.542-37.279.346-.76-1.608-4.363-14.896-27.466-8.412-14.625-15.294-26.785-15.294-27.023 0-.5 24.46-43.501 25.206-44.31.414-.45.592-.384 1.078.395.32.513 16.876 29.256 36.791 63.87 62.62 108.85 74.852 130.01 75.41 130.46.3.242.544.554.544.694s-11.836.21-26.302.154c-23.023-.09-26.313-.175-26.393-.694-.11-.714-27.662-48.825-28.86-50.392-.746-.978-.906-1.035-1.426-.51-.688.696-28.954 49.323-29.49 50.733l-.364.96h-13.23c-10.895 0-13.228-.095-13.228-.538zm167.58-125.61c-.134-.216 1.189-2.863 2.939-5.882 6.924-11.944 84.29-145.75 96.49-166.88 7.143-12.371 13.143-22.465 13.334-22.433.362.062 25.86 43.105 25.86 43.655 0 .174-6.761 11.952-15.025 26.173-8.46 14.557-14.932 26.104-14.81 26.421.185.483 4.563.564 30.213.564h29.996l.957 1.48c.527.814 3.296 5.547 6.155 10.518s5.45 9.29 5.757 9.597c.705.705.703.724-.16 1.572-.396.388-3.36 5.323-6.588 10.965-3.228 5.643-6.056 10.387-6.285 10.543s-19.695.171-43.256.034l-42.84-.249-.803 1.15c-.442.632-7.505 12.736-15.696 26.897l-14.892 25.747h-15.486c-8.518 0-20.015.116-25.551.259-6.55.168-10.15.121-10.308-.135zm-133.75-157.86c-56.373-.055-102.5-.182-102.5-.282s5.617-10.132 12.481-22.294L89.64 123.34h30.332c27.113 0 30.332-.065 30.332-.611 0-.336-6.659-12.228-14.797-26.427s-14.797-25.917-14.797-26.04 2.682-4.853 5.96-10.51 6.003-10.578 6.056-10.934c.086-.586 1.375-.648 13.572-.648 7.412 0 13.463.143 13.446.317-.018.174.22.707.53 1.184.31.476 9.763 16.937 21.007 36.578 11.244 19.64 20.71 36.022 21.036 36.4.554.647 2.549.691 31.428.691h30.837l12.896 22.145c7.093 12.18 12.8 22.301 12.682 22.492-.117.19-4.776.303-10.352.249-5.575-.054-56.26-.143-112.63-.198z"/><path fill="#64b5f6" d="M23.046 238.939c-6.098 10.563-6.69 11.711-6.224 12.078.282.224 3.18 5.044 6.44 10.712s6.016 10.355 6.123 10.417c.106.061 13.585.153 29.95.204 16.367.052 29.994.23 30.285.399.473.273-1.08 3.094-14.637 26.574l-15.166 26.269 12.907 21.865c7.1 12.026 12.982 21.906 13.068 21.956s23.257-39.831 51.492-88.624c11.352-19.617 21.214-36.64 30.37-52.442 23.308-40.452 30.68-53.468 30.73-54.132-1.096-.11-6.141-.187-13.006-.216-3.945-.01-7.82-.02-12.75-.002l-25.341.092-15.42 26.706c-14.256 24.693-15.445 26.663-16.278 26.86l-.023.037c-.012.003-1.622-.001-1.826 0-4.29.062-20.453.063-40.226-.01-22.632-.082-41.615-.125-42.183-.096-.567.03-1.147-.03-1.29-.132-.141-.102-3.29 5.066-6.996 11.485zm205.16-190.3c-.123.149 5.62 10.392 12.761 22.763 12.2 21.131 89.393 155.03 96.276 167 1.503 2.613 2.92 4.803 3.443 5.348.9-1.249 3.532-5.63 7.954-13.219a1343 1343 0 0 1 10.05-17.76l6.606-11.443c.691-1.403.753-1.818.652-2.117-.161-.48-6.903-12.332-14.982-26.337-8.078-14.005-14.824-25.849-14.99-26.32a.73.73 0 0 1-.01-.366l-.426-.913 21.636-36.976c3.69-6.307 6.425-11.042 9.471-16.29 9.158-15.948 12.036-21.189 11.895-21.55-.126-.324-2.7-4.83-5.72-10.017-3.021-5.185-5.845-10.148-6.275-11.026-.483-.987-.734-1.364-1.1-1.456-.054.014-.083.018-.144.035-.42.112-5.455.195-11.19.185s-11.22.024-12.187.073l-1.76.089-14.998 25.978c-12.824 22.212-15.084 25.964-15.595 25.883-.024-.004-.15-.189-.235-.301-.109.066-.2.09-.271.05-.256-.148-7.144-11.902-15.306-26.119L279.4 48.817c-.116-.186-.444-.744-.458-.752-.476-.275-50.502.287-50.737.57zm-18.646 283.09c-.047.109-.026.262.043.48.328 1.05 25.338 43.735 25.772 43.985.206.119 14.178.239 31.05.266 26.65.044 30.749.152 31.234.832.307.43 9.987 17.214 21.513 37.296s21.152 36.627 21.394 36.767 5.926.243 12.633.23c6.705-.013 12.4.099 12.657.246.131.076.381-.141.851-.795l6.008-10.406c5.234-9.065 6.62-11.684 6.294-11.888-.575-.36-15.597-26.643-23.859-41.482-3.09-5.45-5.37-9.516-5.44-9.774-.196-.712-.066-.822 1.155-.98 1.956-.252 57.397-.057 58.071.205.237.092.79-.569 2.593-3.497 1.866-3.067 5.03-8.524 11.001-18.866 7.22-12.505 13.043-22.784 12.941-22.843s-.77-.051-1.489.016l-.046.001c-4.451.204-33.918.203-149.74.025-38.96-.06-69.786-.09-71.912-.072-1.12.01-2.095.076-2.66.172a.3.3 0 0 0-.062.083z"/></g></svg>`,
+  ocaml: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.019 15.021.003-.008c-.005-.021-.006-.026-.003.008"/><path fill="#ff9800" d="M4.51 3.273a2.523 2.523 0 0 0-2.524 2.523V11.3c.361-.13.88-.898 1.043-1.085.285-.327.337-.743.478-1.006C3.83 8.612 3.886 8.2 4.62 8.2c.342 0 .478.08.71.39.16.216.438.615.568.882.15.307.396.724.503.808q.122.095.233.137c.119.044.218-.037.297-.1.102-.082.145-.247.24-.467.135-.317.283-.697.367-.83.146-.23.195-.501.352-.633.232-.195.535-.208.618-.225.466-.092.677.225.907.43.15.133.355.403.5.765.114.283.26.544.32.707.059.158.203.41.289.713.077.275.286.486.365.616 0 0 .121.34.858.65.16.067.482.176.674.246.32.116.63.101 1.025.054.281 0 .434-.408.562-.734.075-.193.148-.745.197-.902.048-.153-.064-.27.031-.405.112-.156.178-.164.242-.368.138-.436.936-.458 1.384-.458.374 0 .327.363.96.239.364-.072.714.046 1.1.149.324.086.63.184.812.398.119.139.412.834.113.863.029.035.05.099.104.134-.067.262-.357.075-.518.041-.217-.045-.37.007-.583.101-.363.162-.894.143-1.21.407-.27.223-.269.721-.394 1 0 0-.348.895-1.106 1.443-.194.14-.574.477-1.4.605a5.3 5.3 0 0 1-1.1.043c-.186-.009-.362-.018-.549-.02-.11-.002-.48-.013-.461.022l-.041.103.024.138c.015.083.019.149.022.225.006.157-.013.32-.005.478.017.328.138.627.154.958.017.368.199.758.375 1.059.067.114.169.128.213.269.052.161.003.333.028.505.1.668.292 1.366.592 1.97l.008.014c.371-.062.743-.196 1.226-.267.885-.132 2.115-.064 2.906-.138 2-.188 3.085.82 4.882.407V5.796a2.523 2.523 0 0 0-2.523-2.523zm-.907 11.144q-.022 0-.046.003c-.159.025-.313.08-.412.24-.08.13-.108.355-.164.505-.064.175-.176.338-.274.505-.18.305-.504.581-.644.879-.028.06-.053.13-.076.2v3.402c.163.028.333.062.524.113 1.407.375 1.75.407 3.13.25l.13-.018c.105-.22.187-.968.255-1.2.054-.178.127-.32.155-.5.026-.173-.003-.337-.017-.493-.04-.393.285-.533.44-.87.14-.304.22-.651.336-.963.11-.298.284-.721.579-.872-.036-.041-.617-.06-.772-.076a5 5 0 0 1-.5-.07c-.314-.064-.656-.126-.965-.2a10 10 0 0 1-.947-.328c-.298-.138-.503-.497-.732-.507m5.737.83c-.74.149-.97.876-1.32 1.451-.192.319-.396.59-.548.928-.14.312-.128.657-.368.924a2.55 2.55 0 0 0-.528.922c-.023.067-.088.776-.158.943l1.101-.078c1.026.07.73.464 2.332.378l2.529-.078a7 7 0 0 0-.228-.588c-.07-.147-.16-.434-.218-.56a3.5 3.5 0 0 0-.309-.526c-.184-.215-.227-.23-.28-.503-.095-.473-.344-1.33-.637-1.923-.151-.306-.403-.562-.634-.784-.2-.195-.655-.522-.734-.505z"/></svg>`,
+  php: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#1e88e5" d="M12 18.08c-6.63 0-12-2.72-12-6.08s5.37-6.08 12-6.08S24 8.64 24 12s-5.37 6.08-12 6.08m-5.19-7.95c.54 0 .91.1 1.09.31.18.2.22.56.13 1.03-.1.53-.29.87-.58 1.09q-.42.33-1.29.33h-.87l.53-2.76zm-3.5 5.55h1.44l.34-1.75h1.23c.54 0 .98-.06 1.33-.17.35-.12.67-.31.96-.58.24-.22.43-.46.58-.73.15-.26.26-.56.31-.88.16-.78.05-1.39-.33-1.82-.39-.44-.99-.65-1.82-.65H4.59zm7.25-8.33-1.28 6.58h1.42l.74-3.77h1.14c.36 0 .6.06.71.18s.13.34.07.66l-.57 2.93h1.45l.59-3.07c.13-.62.03-1.07-.27-1.36-.3-.27-.85-.4-1.65-.4h-1.27L12 7.35zM18 10.13c.55 0 .91.1 1.09.31.18.2.22.56.13 1.03-.1.53-.29.87-.57 1.09-.29.22-.72.33-1.3.33h-.85l.5-2.76zm-3.5 5.55h1.44l.34-1.75h1.22c.55 0 1-.06 1.35-.17.35-.12.65-.31.95-.58.24-.22.44-.46.58-.73.15-.26.26-.56.32-.88.15-.78.04-1.39-.34-1.82-.36-.44-.99-.65-1.82-.65h-2.75z"/></svg>`,
+  python: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#0288d1" d="M9.86 2A2.86 2.86 0 0 0 7 4.86v1.68h4.29c.39 0 .71.57.71.96H4.86A2.86 2.86 0 0 0 2 10.36v3.781a2.86 2.86 0 0 0 2.86 2.86h1.18v-2.68a2.85 2.85 0 0 1 2.85-2.86h5.25c1.58 0 2.86-1.271 2.86-2.851V4.86A2.86 2.86 0 0 0 14.14 2zm-.72 1.61c.4 0 .72.12.72.71s-.32.891-.72.891c-.39 0-.71-.3-.71-.89s.32-.711.71-.711"/><path fill="#fdd835" d="M17.959 7v2.68a2.85 2.85 0 0 1-2.85 2.859H9.86A2.85 2.85 0 0 0 7 15.389v3.75a2.86 2.86 0 0 0 2.86 2.86h4.28A2.86 2.86 0 0 0 17 19.14v-1.68h-4.291c-.39 0-.709-.57-.709-.96h7.14A2.86 2.86 0 0 0 22 13.64V9.86A2.86 2.86 0 0 0 19.14 7zM8.32 11.513l-.004.004.038-.004zm6.54 7.276c.39 0 .71.3.71.89a.71.71 0 0 1-.71.71c-.4 0-.72-.12-.72-.71s.32-.89.72-.89"/></svg>`,
+  r: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#1976d2" d="M11.956 4.05c-5.694 0-10.354 3.106-10.354 6.947 0 3.396 3.686 6.212 8.531 6.813v2.205h3.53V17.82c.88-.093 1.699-.259 2.475-.497l1.43 2.692h3.996l-2.402-4.048c1.936-1.263 3.147-3.034 3.147-4.97 0-3.841-4.659-6.947-10.354-6.947m1.584 2.712c4.349 0 7.558 1.45 7.558 4.753 0 1.77-.952 3.013-2.505 3.779a1 1 0 0 1-.228-.156c-.373-.165-.994-.352-.994-.352s3.085-.227 3.085-3.302-3.23-3.127-3.23-3.127h-7.092v7.413c-2.64-.766-4.462-2.392-4.462-4.255 0-2.63 3.52-4.753 7.868-4.753m.156 4.12h2.143s.983-.05.983.974c0 1.004-.983 1.004-.983 1.004h-2.143v-1.977m-.031 4.566h.952c.186 0 .28.052.445.207.135.103.28.3.404.476-.57.073-1.17.104-1.801.104z"/></svg>`,
+  react: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#00bcd4" d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4-12-2.59-12-4 4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6 14-2.686 14-6-6.268-6-14-6"/><path fill="#00bcd4" d="M16 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2"/><path fill="#00bcd4" d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493 3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124-3.284-5.69-7.72-9.493-10.74-9.493Z"/><path fill="#00bcd4" d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"/></svg>`,
+  react_ts: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#0288d1" d="M16 12c7.444 0 12 2.59 12 4s-4.556 4-12 4-12-2.59-12-4 4.556-4 12-4m0-2c-7.732 0-14 2.686-14 6s6.268 6 14 6 14-2.686 14-6-6.268-6-14-6"/><path fill="#0288d1" d="M16 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2"/><path fill="#0288d1" d="M10.458 5.507c2.017 0 5.937 3.177 9.006 8.493 3.722 6.447 3.757 11.687 2.536 12.392a.9.9 0 0 1-.457.1c-2.017 0-5.938-3.176-9.007-8.492C8.814 11.553 8.779 6.313 10 5.608a.9.9 0 0 1 .458-.1m-.001-2A2.87 2.87 0 0 0 9 3.875C6.13 5.532 6.938 12.304 10.804 19c3.284 5.69 7.72 9.493 10.74 9.493A2.87 2.87 0 0 0 23 28.124c2.87-1.656 2.062-8.428-1.804-15.124-3.284-5.69-7.72-9.493-10.74-9.493Z"/><path fill="#0288d1" d="M21.543 5.507a.9.9 0 0 1 .457.1c1.221.706 1.186 5.946-2.536 12.393-3.07 5.316-6.99 8.493-9.007 8.493a.9.9 0 0 1-.457-.1C8.779 25.686 8.814 20.446 12.536 14c3.07-5.316 6.99-8.493 9.007-8.493m0-2c-3.02 0-7.455 3.804-10.74 9.493C6.939 19.696 6.13 26.468 9 28.124a2.87 2.87 0 0 0 1.457.369c3.02 0 7.455-3.804 10.74-9.493C25.061 12.304 25.87 5.532 23 3.876a2.87 2.87 0 0 0-1.457-.369"/></svg>`,
+  ruby: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#f44336" d="M18.041 3.177c2.24.382 2.879 1.919 2.843 3.527V6.67l-1.013 13.266-13.132.897h.008c-1.093-.044-3.518-.151-3.634-3.545l1.217-2.222 2.462 5.74 2.097-6.77-.045.009.018-.018 6.85 2.186L13.945 9.3l6.53-.409-5.144-4.212 2.71-1.51v.009M3.113 17.252v.017zM6.916 6.874c2.63-2.622 6.033-4.168 7.34-2.844 1.297 1.306-.072 4.523-2.702 7.135-2.666 2.613-6.015 4.248-7.322 2.933-1.306-1.324.036-4.612 2.675-7.224z"/></svg>`,
+  rust: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ff7043" d="m30 12-4-2V6h-4l-2-4-4 2-4-2-2 4H6v4l-4 2 2 4-2 4 4 2v4h4l2 4 4-2 4 2 2-4h4v-4l4-2-2-4ZM6 16a9.9 9.9 0 0 1 .842-4H10v8H6.842A9.9 9.9 0 0 1 6 16m10 10a9.98 9.98 0 0 1-7.978-4H16v-2h-2v-2h4c.819.819.297 2.308 1.179 3.37a1.89 1.89 0 0 0 1.46.63h3.34A9.98 9.98 0 0 1 16 26m-2-12v-2h4a1 1 0 0 1 0 2Zm11.158 6H24a2.006 2.006 0 0 1-2-2 2 2 0 0 0-2-2 3 3 0 0 0 3-3q0-.08-.004-.161A3.115 3.115 0 0 0 19.83 10H8.022a9.986 9.986 0 0 1 17.136 10"/></svg>`,
+  sass: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ec407a" d="M27.837 5.673a4.33 4.33 0 0 0-2.293-2.701c-2.362-1.261-6.11-1.298-9.548-.092a26.3 26.3 0 0 0-8.76 4.966c-2.752 2.542-3.438 4.925-3.189 6.194.523 2.668 3.274 4.539 5.485 6.042.418.284.822.559 1.175.816-1.429.76-4.261 2.444-5.088 4.248a3.88 3.88 0 0 0-.118 3.332A2.37 2.37 0 0 0 6.869 29.8a5.6 5.6 0 0 0 1.49.2 6.35 6.35 0 0 0 5.19-2.856 6.74 6.74 0 0 0 .864-5.382 7.3 7.3 0 0 1 2.044-.03 3.92 3.92 0 0 1 2.816 1.311 1.82 1.82 0 0 1 .423 1.262 1.55 1.55 0 0 1-.772 1.05c-.234.14-.586.355-.504.803.036.194.198.633.894.512a2.93 2.93 0 0 0 2.145-2.651 4 4 0 0 0-1.197-2.904 5.94 5.94 0 0 0-4.396-1.626 10.6 10.6 0 0 0-2.672.304 20 20 0 0 0-2.203-1.846c-1.712-1.3-3.33-2.529-3.235-4.26.125-2.263 2.468-4.532 6.964-6.744 4.016-1.976 7.254-2.037 8.944-1.438a2 2 0 0 1 1.204.883 2.77 2.77 0 0 1-.36 2.47 9.71 9.71 0 0 1-7.425 4.304 3.86 3.86 0 0 1-3.238-.757c-.278-.302-.593-.645-1.074-.383q-.565.31-.225 1.189a3.9 3.9 0 0 0 2.407 1.92 11.7 11.7 0 0 0 7.128-.671c3.527-1.35 6.681-5.202 5.756-8.787M11.895 24.475a4 4 0 0 1-.192.468 4.5 4.5 0 0 1-.753 1.081 2.83 2.83 0 0 1-2.533 1.107c-.056-.032-.078-.146-.085-.193a3.28 3.28 0 0 1 1.076-2.284 11.3 11.3 0 0 1 2.644-1.933 3.85 3.85 0 0 1-.157 1.754"/></svg>`,
+  scala: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f44336" d="m6.457 9.894 12.523 5.163-.456 1.211L6 11.105Zm7.02-3.091L26 11.966l-.457 1.21L13.02 8.015ZM6.465 18.885l12.524 5.163-.457 1.21L6.01 20.097Zm7.007-3.086 12.524 5.163-.456 1.21-12.524-5.162Z"/><path fill="#f44336" d="M6 24.07V30l19.997-3.106V20.96zM6 5.11v5.99l20-3.11V2zm0 9.96v5.03l20-3.11v-5.03z"/></svg>`,
+  settings: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/><path fill="#42a5f5" d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.6.6 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1q.09.03.18.03c.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64zm-1.98-1.71c.04.31.05.52.05.73s-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2"/></svg>`,
+  svelte: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path fill="#ff5722" d="M175.94 24.328c-13.037.252-26.009 3.872-37.471 11.174L79.912 72.818a67.13 67.13 0 0 0-30.355 44.906 70.8 70.8 0 0 0 6.959 45.445 67.2 67.2 0 0 0-10.035 25.102 71.54 71.54 0 0 0 12.236 54.156c23.351 33.41 69.468 43.311 102.81 22.07l58.559-37.158a67.36 67.36 0 0 0 30.355-44.906 70.77 70.77 0 0 0-6.982-45.422 67.65 67.65 0 0 0 10.059-25.102 71.63 71.63 0 0 0-12.236-54.156v-.18c-15.324-21.925-40.453-33.727-65.342-33.246zm5.137 28.68a46.5 46.5 0 0 1 36.09 19.969 42.98 42.98 0 0 1 7.365 32.557 45 45 0 0 1-1.393 5.455l-1.123 3.37-2.986-2.247a75.9 75.9 0 0 0-22.902-11.45l-2.244-.651.201-2.246a13.16 13.16 0 0 0-2.379-8.711 13.99 13.99 0 0 0-14.953-5.412 12.8 12.8 0 0 0-3.594 1.572l-58.578 37.25a12.24 12.24 0 0 0-5.502 8.15 13.1 13.1 0 0 0 2.246 9.834 14.03 14.03 0 0 0 14.93 5.569 13.5 13.5 0 0 0 3.594-1.573l22.453-14.234a41.8 41.8 0 0 1 11.898-5.232 46.48 46.48 0 0 1 49.914 18.502 43.02 43.02 0 0 1 7.363 32.557 40.42 40.42 0 0 1-18.254 27.078l-58.58 37.316a43 43 0 0 1-11.898 5.23A46.545 46.545 0 0 1 82.81 227.14a42.98 42.98 0 0 1-7.341-32.557 38 38 0 0 1 1.39-5.41l1.102-3.37 3.008 2.246a75.9 75.9 0 0 0 22.836 11.361l2.244.65-.201 2.247a13.25 13.25 0 0 0 2.447 8.644 14.03 14.03 0 0 0 15.043 5.569 13.1 13.1 0 0 0 3.592-1.573l58.467-37.316a12.17 12.17 0 0 0 5.502-8.173 12.96 12.96 0 0 0-2.246-9.811 14.03 14.03 0 0 0-15.043-5.568 12.8 12.8 0 0 0-3.592 1.57l-22.453 14.258a42.9 42.9 0 0 1-11.877 5.209 46.52 46.52 0 0 1-49.846-18.5 43.02 43.02 0 0 1-7.297-32.557A40.42 40.42 0 0 1 96.798 96.98l58.646-37.316a42.8 42.8 0 0 1 11.811-5.21 46.5 46.5 0 0 1 13.822-1.444z"/></svg>`,
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffb300" d="M29.168 14.03a2.7 2.7 0 0 0-1.968-.83 2.51 2.51 0 0 0-1.929.8h-4.443l3.078-3.078a2.835 2.835 0 0 0 2.857-2.842 2.6 2.6 0 0 0-.831-1.969 2.82 2.82 0 0 0-2.014-.788 2.67 2.67 0 0 0-1.968.788 2.36 2.36 0 0 0-.812 1.922L18 11.17V6.726a2.51 2.51 0 0 0 .8-1.929 2.7 2.7 0 0 0-.832-1.968 2.745 2.745 0 0 0-3.936 0 2.7 2.7 0 0 0-.832 1.968 2.51 2.51 0 0 0 .8 1.93v4.443l-3.138-3.138a2.36 2.36 0 0 0-.812-1.922 2.66 2.66 0 0 0-1.968-.788 2.83 2.83 0 0 0-2.014.788 2.6 2.6 0 0 0-.831 1.969 2.74 2.74 0 0 0 .831 2.013 2.8 2.8 0 0 0 2.026.829l3.078 3.078H6.729a2.51 2.51 0 0 0-1.929-.8 2.7 2.7 0 0 0-1.968.831 2.745 2.745 0 0 0 0 3.937 2.7 2.7 0 0 0 1.968.832 2.51 2.51 0 0 0 1.929-.8h4.443l-3.078 3.077a2.835 2.835 0 0 0-2.857 2.842 2.6 2.6 0 0 0 .831 1.969 2.82 2.82 0 0 0 2.014.788 2.67 2.67 0 0 0 1.968-.788 2.36 2.36 0 0 0 .812-1.922L14 20.827v4.444a2.51 2.51 0 0 0-.8 1.929 2.784 2.784 0 0 0 4.768 1.968A2.7 2.7 0 0 0 18.8 27.2a2.51 2.51 0 0 0-.8-1.929v-4.444l3.138 3.138a2.36 2.36 0 0 0 .812 1.922 2.66 2.66 0 0 0 1.968.788 2.83 2.83 0 0 0 2.014-.788 2.6 2.6 0 0 0 .831-1.969 2.74 2.74 0 0 0-.831-2.013 2.8 2.8 0 0 0-2.026-.829L20.828 18h4.443a2.51 2.51 0 0 0 1.93.8 2.784 2.784 0 0 0 1.967-4.769Z"/></svg>`,
+  swift: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff6e40" d="M17.087 19.721c-2.36 1.36-5.59 1.5-8.86.1a13.8 13.8 0 0 1-6.23-5.32c.67.55 1.46 1 2.3 1.4 3.37 1.57 6.73 1.46 9.1 0-3.37-2.59-6.24-5.96-8.37-8.71-.45-.45-.78-1.01-1.12-1.51 8.28 6.05 7.92 7.59 2.41-1.01 4.89 4.94 9.43 7.74 9.43 7.74.16.09.25.16.36.22.1-.25.19-.51.26-.78.79-2.85-.11-6.12-2.08-8.81 4.55 2.75 7.25 7.91 6.12 12.24-.03.11-.06.22-.05.39 2.24 2.83 1.64 5.78 1.35 5.22-1.21-2.39-3.48-1.65-4.62-1.17"/></svg>`,
+  terraform: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#5c6bc0" d="m2 10 8 4V6L2 2zm10 5 8 4v-8l-8-4zm0 11 8 4v-8l-8-4zm10-14v8l8-4V8z"/></svg>`,
+  toml: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#cfd8dc" d="M4 6V4h8v2H9v7H7V6z"/><path fill="#ef5350" d="M4 1v1H2v12h2v1H1V1zm8 0v1h2v12h-2v1h3V1z"/></svg>`,
+  typescript: `<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><path fill="#0288d1" d="M2 2v12h12V2zm4 6h3v1H8v4H7V9H6zm5 0h2v1h-2v1h1a1.003 1.003 0 0 1 1 1v1a1.003 1.003 0 0 1-1 1h-2v-1h2v-1h-1a1.003 1.003 0 0 1-1-1V9a1.003 1.003 0 0 1 1-1"/></svg>`,
+  vue: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#41b883" d="M1.791 3.851 12 21.471 22.209 3.936V3.85H18.24l-6.18 10.616L5.906 3.851z"/><path fill="#35495e" d="m5.907 3.851 6.152 10.617L18.24 3.851h-3.723L12.084 8.03 9.66 3.85z"/></svg>`,
+  webassembly: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#7c4dff" d="M22 18h4v4h-4z"/><path fill="#7c4dff" d="M20 2a4 4 0 0 1-8 0H2v28h28V2Zm-2 24h-2v2h-4v-2h-2v2H6v-2H4V16h2v10h4V16h2v10h4V16h2Zm10 2h-2v-4h-4v4h-2V18h2v-2h4v2h2Z"/></svg>`,
+  xml: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#8bc34a" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4c0-1.11.89-2 2-2m.12 13.5 3.74 3.74 1.42-1.41-2.33-2.33 2.33-2.33-1.42-1.41zm11.16 0-3.74-3.74-1.42 1.41 2.33 2.33-2.33 2.33 1.42 1.41z"/></svg>`,
+  yaml: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5252" d="M13 9h5.5L13 3.5zM6 2h8l6 6v12c0 1.1-.9 2-2 2H6c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2m12 16v-2H9v2zm-4-4v-2H6v2z"/></svg>`,
+  zig: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#f9a825" d="M2 8h6v4H2zm8 0h12v4H10zm0 12h12v4H10zm14 0h2v4h-2zM8 20l-3 4H2V12h4v8zm14-8h-6l-6 8h6z"/><path fill="#f9a825" d="M16 20h-6l-6 8m12-16h6l6-8m2 4v16h-4V12h-2l3-4z"/></svg>`,
 };
 
 const EXTENSION_TO_ICON: Record<string, string> = {
-  "astro": "astro",
-  "bash": "console",
-  "c": "c",
-  "cfg": "settings",
-  "clj": "clojure",
-  "conf": "settings",
-  "cpp": "cpp",
-  "cs": "csharp",
-  "css": "css",
-  "dart": "dart",
-  "erl": "erlang",
-  "ex": "elixir",
-  "exs": "elixir",
-  "gif": "image",
-  "go": "go",
-  "gql": "graphql",
-  "gradle": "gradle",
-  "graphql": "graphql",
-  "groovy": "groovy",
-  "h": "h",
-  "hcl": "hcl",
-  "hpp": "hpp",
-  "hs": "haskell",
-  "html": "html",
-  "ico": "image",
-  "ini": "settings",
-  "java": "java",
-  "jpeg": "image",
-  "jpg": "image",
-  "js": "javascript",
-  "json": "json",
-  "jsx": "react",
-  "kt": "kotlin",
-  "less": "less",
-  "lock": "lock",
-  "lua": "lua",
-  "markdown": "markdown",
-  "md": "markdown",
-  "ml": "ocaml",
-  "nix": "nix",
-  "php": "php",
-  "png": "image",
-  "py": "python",
-  "r": "r",
-  "rb": "ruby",
-  "rs": "rust",
-  "scala": "scala",
-  "scss": "sass",
-  "sh": "console",
-  "sql": "database",
-  "svelte": "svelte",
-  "svg": "svg",
-  "swift": "swift",
-  "tf": "terraform",
-  "toml": "toml",
-  "ts": "typescript",
-  "tsx": "react_ts",
-  "txt": "document",
-  "vue": "vue",
-  "wasm": "webassembly",
-  "webp": "image",
-  "xml": "xml",
-  "yaml": "yaml",
-  "yml": "yaml",
-  "zig": "zig",
+  astro: "astro",
+  bash: "console",
+  c: "c",
+  cfg: "settings",
+  clj: "clojure",
+  conf: "settings",
+  cpp: "cpp",
+  cs: "csharp",
+  css: "css",
+  dart: "dart",
+  erl: "erlang",
+  ex: "elixir",
+  exs: "elixir",
+  gif: "image",
+  go: "go",
+  gql: "graphql",
+  gradle: "gradle",
+  graphql: "graphql",
+  groovy: "groovy",
+  h: "h",
+  hcl: "hcl",
+  hpp: "hpp",
+  hs: "haskell",
+  html: "html",
+  ico: "image",
+  ini: "settings",
+  java: "java",
+  jpeg: "image",
+  jpg: "image",
+  js: "javascript",
+  json: "json",
+  jsx: "react",
+  kt: "kotlin",
+  less: "less",
+  lock: "lock",
+  lua: "lua",
+  markdown: "markdown",
+  md: "markdown",
+  ml: "ocaml",
+  nix: "nix",
+  php: "php",
+  png: "image",
+  py: "python",
+  r: "r",
+  rb: "ruby",
+  rs: "rust",
+  scala: "scala",
+  scss: "sass",
+  sh: "console",
+  sql: "database",
+  svelte: "svelte",
+  svg: "svg",
+  swift: "swift",
+  tf: "terraform",
+  toml: "toml",
+  ts: "typescript",
+  tsx: "react_ts",
+  txt: "document",
+  vue: "vue",
+  wasm: "webassembly",
+  webp: "image",
+  xml: "xml",
+  yaml: "yaml",
+  yml: "yaml",
+  zig: "zig",
 };
 
 export function getFileIconSvg(fileName: string): string {

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. */
@@ -100,7 +105,7 @@ export interface MessageInputProps {
 export interface MessageInputRef {
   focus: () => void;
   blur: () => void;
-  runKeyboardAction: (action: MessageInputKeyboardActionKind) => void;
+  runKeyboardAction: (action: MessageInputKeyboardActionKind) => boolean;
   /**
    * Web-only: return the underlying DOM element for focus assertions/retries.
    * May return null if not mounted or on native.
@@ -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,
@@ -242,26 +249,35 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     runKeyboardAction: (action) => {
       if (action === "focus") {
         textInputRef.current?.focus();
-        return;
+        return true;
+      }
+
+      if (action === "send" || action === "dictation-confirm") {
+        if (isDictatingRef.current) {
+          sendAfterTranscriptRef.current = true;
+          confirmDictation();
+          return true;
+        }
+        return false;
       }
 
       if (action === "voice-toggle") {
         handleToggleRealtimeVoiceShortcut();
-        return;
+        return true;
       }
 
       if (action === "voice-mute-toggle") {
         if (isRealtimeVoiceForCurrentAgent) {
           voice?.toggleMute();
         }
-        return;
+        return true;
       }
 
       if (action === "dictation-cancel") {
         if (isDictatingRef.current) {
           cancelDictation();
         }
-        return;
+        return true;
       }
 
       if (action === "dictation-toggle") {
@@ -271,7 +287,10 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
         } else {
           void startDictationIfAvailable();
         }
+        return true;
       }
+
+      return false;
     },
     getNativeElement: () => {
       if (!IS_WEB) return null;
@@ -337,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);
       }
@@ -352,7 +377,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
         });
       }
     },
-    [onChangeText, onSubmit, images, isAgentRunning],
+    [onChangeText, onSubmit, onQueue, images, isAgentRunning, defaultSendBehavior],
   );
 
   const handleDictationError = useCallback(
@@ -563,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;
@@ -857,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;
@@ -877,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) => {
@@ -1003,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}
@@ -1055,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"
@@ -1083,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"
@@ -1097,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

@@ -9,6 +9,7 @@ import {
   ViewStyle,
   Platform,
 } from "react-native";
+import * as React from "react";
 import {
   useState,
   useEffect,
@@ -23,7 +24,8 @@ import {
   cloneElement,
 } from "react";
 import type { ReactNode, ComponentType } from "react";
-import Markdown, { MarkdownIt } from "react-native-markdown-display";
+import Markdown, { MarkdownIt, type RenderRules } from "react-native-markdown-display";
+import { useQuery } from "@tanstack/react-query";
 import MaskedView from "@react-native-masked-view/masked-view";
 import {
   Circle,
@@ -39,8 +41,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,
@@ -70,10 +74,18 @@ import {
 import { getMarkdownListMarker } from "@/utils/markdown-list";
 import { openExternalUrl } from "@/utils/open-external-url";
 import { markScrollInvestigationEvent } from "@/utils/scroll-jank-investigation";
+import { splitMarkdownBlocks } from "@/utils/split-markdown-blocks";
+import {
+  getAssistantImageMetadata,
+  setAssistantImageMetadata,
+} from "@/utils/assistant-image-metadata";
+import { resolveAssistantImageSource } from "@/utils/assistant-image-source";
 export type { InlinePathTarget } from "@/utils/inline-path";
+import { PlanCard } from "./plan-card";
 import { useToolCallSheet } from "./tool-call-sheet";
 import { ToolCallDetailsContent } from "./tool-call-details";
 import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
+import type { DaemonClient } from "@server/client/daemon-client";
 
 interface UserMessageProps {
   message: string;
@@ -396,6 +408,8 @@ interface AssistantMessageProps {
   timestamp: number;
   onInlinePathPress?: (target: InlinePathTarget) => void;
   workspaceRoot?: string;
+  serverId?: string;
+  client?: DaemonClient | null;
   disableOuterSpacing?: boolean;
 }
 
@@ -422,8 +436,215 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
     fontSize: 13,
     userSelect: Platform.OS === "web" ? "text" : "auto",
   },
+  imageFrame: {
+    width: "100%",
+    minHeight: 160,
+    marginHorizontal: -theme.spacing[1],
+  },
+  imageSurface: {
+    width: "100%",
+    overflow: "hidden",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  imageState: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[6],
+    gap: theme.spacing[2],
+  },
+  imageErrorText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    textAlign: "center",
+  },
 }));
 
+const ASSISTANT_IMAGE_MIN_HEIGHT = 160;
+
+const AssistantMarkdownResolvedImage = memo(function AssistantMarkdownResolvedImage({
+  uri,
+  alt,
+  containerStyle,
+  source,
+  workspaceRoot,
+  serverId,
+}: {
+  uri: string;
+  alt?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+  source: string;
+  workspaceRoot?: string;
+  serverId?: string;
+}) {
+  const cachedMetadata = useMemo(
+    () => getAssistantImageMetadata({ source, workspaceRoot, serverId }),
+    [serverId, source, workspaceRoot],
+  );
+  const [aspectRatio, setAspectRatio] = useState<number | null>(
+    cachedMetadata?.aspectRatio ?? null,
+  );
+
+  useEffect(() => {
+    if (cachedMetadata) {
+      setAspectRatio(cachedMetadata.aspectRatio);
+      return;
+    }
+
+    setAspectRatio(null);
+    let cancelled = false;
+
+    Image.getSize(
+      uri,
+      (width, height) => {
+        if (cancelled) {
+          return;
+        }
+        if (width > 0 && height > 0) {
+          const metadata = setAssistantImageMetadata(
+            { source, workspaceRoot, serverId },
+            { width, height },
+          );
+          setAspectRatio(metadata?.aspectRatio ?? width / height);
+        }
+      },
+      () => {
+        if (cancelled) {
+          return;
+        }
+        setAspectRatio(null);
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cachedMetadata, serverId, source, uri, workspaceRoot]);
+
+  const surfaceStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      assistantMessageStylesheet.imageSurface,
+      aspectRatio ? { aspectRatio } : { minHeight: ASSISTANT_IMAGE_MIN_HEIGHT },
+    ],
+    [aspectRatio],
+  );
+
+  return (
+    <View style={[assistantMessageStylesheet.imageFrame, containerStyle]}>
+      <View style={surfaceStyle}>
+        <Image
+          source={{ uri }}
+          style={assistantMessageStylesheet.image}
+          resizeMode="contain"
+          accessibilityLabel={alt}
+        />
+      </View>
+    </View>
+  );
+});
+
+function AssistantMarkdownImage({
+  source,
+  alt,
+  hasLeadingContent,
+  client,
+  workspaceRoot,
+  serverId,
+}: {
+  source: string;
+  alt?: string;
+  hasLeadingContent: boolean;
+  client?: DaemonClient | null;
+  workspaceRoot?: string;
+  serverId?: string;
+}) {
+  const { theme } = useUnistyles();
+  const resolution = useMemo(
+    () => resolveAssistantImageSource({ source, workspaceRoot }),
+    [source, workspaceRoot],
+  );
+  const containerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => ({
+      marginTop: hasLeadingContent ? theme.spacing[4] : 0,
+      marginBottom: 0,
+    }),
+    [hasLeadingContent, theme],
+  );
+
+  const query = useQuery({
+    queryKey: [
+      "assistantMarkdownImage",
+      serverId ?? "unknown-server",
+      resolution?.kind === "file_rpc" ? resolution.cwd : null,
+      resolution?.kind === "file_rpc" ? resolution.path : null,
+    ],
+    enabled: Boolean(client && resolution?.kind === "file_rpc"),
+    staleTime: 30_000,
+    queryFn: async () => {
+      if (!client || !resolution || resolution.kind !== "file_rpc") {
+        return null;
+      }
+
+      const payload = await client.exploreFileSystem(resolution.cwd, resolution.path, "file");
+      if (payload.error) {
+        throw new Error(payload.error);
+      }
+      if (!payload.file || payload.file.kind !== "image" || !payload.file.content) {
+        throw new Error("Image preview unavailable.");
+      }
+
+      return `data:${payload.file.mimeType ?? "image/png"};base64,${payload.file.content}`;
+    },
+  });
+
+  const directUri = resolution?.kind === "direct" ? resolution.uri : null;
+  const resolvedUri = directUri ?? query.data ?? null;
+
+  if (resolvedUri) {
+    return (
+      <AssistantMarkdownResolvedImage
+        uri={resolvedUri}
+        alt={alt}
+        containerStyle={containerStyle}
+        source={source}
+        workspaceRoot={workspaceRoot}
+        serverId={serverId}
+      />
+    );
+  }
+
+  if (query.isLoading) {
+    return (
+      <View
+        style={[
+          assistantMessageStylesheet.imageFrame,
+          containerStyle,
+          assistantMessageStylesheet.imageState,
+        ]}
+      >
+        <ActivityIndicator size="small" />
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[
+        assistantMessageStylesheet.imageFrame,
+        containerStyle,
+        assistantMessageStylesheet.imageState,
+      ]}
+    >
+      <Text style={assistantMessageStylesheet.imageErrorText}>
+        {query.error instanceof Error ? query.error.message : "Unable to load image preview."}
+      </Text>
+    </View>
+  );
+}
+
 function MarkdownLink({
   href,
   style,
@@ -709,20 +930,37 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
   },
 }));
 
+interface MemoizedMarkdownBlockProps {
+  text: string;
+  styles: ReturnType<typeof createMarkdownStyles>;
+  rules: RenderRules;
+  parser: MarkdownIt;
+  onLinkPress: (url: string) => boolean;
+}
+
+const MemoizedMarkdownBlock = React.memo(function MemoizedMarkdownBlock({
+  text,
+  styles,
+  rules,
+  parser,
+  onLinkPress,
+}: MemoizedMarkdownBlockProps) {
+  return (
+    <Markdown style={styles} rules={rules} markdownit={parser} onLinkPress={onLinkPress}>
+      {text}
+    </Markdown>
+  );
+});
+
 export const AssistantMessage = memo(function AssistantMessage({
   message,
   timestamp,
   onInlinePathPress,
   workspaceRoot,
+  serverId,
+  client,
   disableOuterSpacing,
 }: AssistantMessageProps) {
-  // DEBUG: log when AssistantMessage actually renders (inside memo boundary)
-  console.log("[AssistantMessage] render", {
-    messageLength: message?.length,
-    timestamp,
-    hasOnInlinePathPress: !!onInlinePathPress,
-  });
-
   const { theme, rt } = useUnistyles();
   const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
 
@@ -757,7 +995,7 @@ export const AssistantMessage = memo(function AssistantMessage({
     [onInlinePathPress, workspaceRoot],
   );
 
-  const markdownRules = useMemo(() => {
+  const markdownRules = useMemo<RenderRules>(() => {
     return {
       text: (
         node: any,
@@ -872,14 +1110,11 @@ export const AssistantMessage = memo(function AssistantMessage({
           </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>
-        );
-      },
+      paragraph: (node: any, children: ReactNode[], _parent: any, styles: any) => (
+        <View key={node.key} style={[styles.paragraph, { marginBottom: 0 }]}>
+          {children}
+        </View>
+      ),
       link: (node: any, children: ReactNode[], _parent: any, styles: any) => (
         <MarkdownLink
           key={node.key}
@@ -896,8 +1131,32 @@ export const AssistantMessage = memo(function AssistantMessage({
           )}
         </MarkdownLink>
       ),
+      image: (node: any, _children: ReactNode[], parent: any, styles: any) => {
+        const paragraphNode = Array.isArray(parent)
+          ? parent.find((ancestor: any) => ancestor?.type === "paragraph")
+          : null;
+        const paragraphChildren = Array.isArray(paragraphNode?.children)
+          ? paragraphNode.children
+          : [];
+        const imageIndex = paragraphChildren.findIndex((child: any) => child?.key === node.key);
+        const hasLeadingContent = imageIndex > 0;
+
+        return (
+          <AssistantMarkdownImage
+            key={node.key}
+            source={String(node.attributes?.src ?? "")}
+            alt={typeof node.attributes?.alt === "string" ? node.attributes.alt : undefined}
+            hasLeadingContent={hasLeadingContent}
+            client={client}
+            workspaceRoot={workspaceRoot}
+            serverId={serverId}
+          />
+        );
+      },
     };
-  }, [handleLinkPress, markdownParser, onInlinePathPress]);
+  }, [client, handleLinkPress, markdownParser, onInlinePathPress, serverId, workspaceRoot]);
+
+  const blocks = useMemo(() => splitMarkdownBlocks(message), [message]);
 
   return (
     <View
@@ -907,14 +1166,79 @@ export const AssistantMessage = memo(function AssistantMessage({
         !resolvedDisableOuterSpacing && assistantMessageStylesheet.containerSpacing,
       ]}
     >
-      <Markdown
-        style={markdownStyles}
-        rules={markdownRules}
-        markdownit={markdownParser}
-        onLinkPress={handleLinkPress}
-      >
-        {message}
-      </Markdown>
+      {blocks.map((block, index) => (
+        <View
+          key={index}
+          style={index < blocks.length - 1 ? { marginBottom: theme.spacing[3] } : undefined}
+        >
+          <MemoizedMarkdownBlock
+            text={block}
+            styles={markdownStyles}
+            rules={markdownRules}
+            parser={markdownParser}
+            onLinkPress={handleLinkPress}
+          />
+        </View>
+      ))}
+    </View>
+  );
+});
+
+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>
   );
 });
@@ -1764,14 +2088,11 @@ export const ToolCall = memo(function ToolCall({
   onInlineDetailsHoverChange,
   onInlineDetailsExpandedChange,
 }: ToolCallProps) {
-  // DEBUG: log when ToolCall actually renders (inside memo boundary)
-  console.log("[ToolCall] render", { toolName, status });
-
   const { openToolCall } = useToolCallSheet();
   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) {
@@ -1884,6 +2205,16 @@ export const ToolCall = memo(function ToolCall({
     );
   }, [isMobile, effectiveDetail, errorText, isLoadingDetails]);
 
+  if (effectiveDetail?.type === "plan") {
+    return (
+      <PlanCard
+        title="Plan"
+        text={effectiveDetail.text}
+        disableOuterSpacing={disableOuterSpacing}
+      />
+    );
+  }
+
   return (
     <ExpandableBadge
       testID="tool-call-badge"

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

@@ -0,0 +1,162 @@
+import type { ReactNode } from "react";
+import { Text, View } from "react-native";
+import Markdown from "react-native-markdown-display";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { createMarkdownStyles } from "@/styles/markdown-styles";
+import { getMarkdownListMarker } from "@/utils/markdown-list";
+
+function createPlanMarkdownRules() {
+  return {
+    text: (
+      node: any,
+      _children: ReactNode[],
+      _parent: any,
+      styles: any,
+      inheritedStyles: any = {},
+    ) => (
+      <Text key={node.key} style={[inheritedStyles, styles.text]}>
+        {node.content}
+      </Text>
+    ),
+    textgroup: (
+      node: any,
+      children: ReactNode[],
+      _parent: any,
+      styles: any,
+      inheritedStyles: any = {},
+    ) => (
+      <Text key={node.key} style={[inheritedStyles, styles.textgroup]}>
+        {children}
+      </Text>
+    ),
+    code_block: (
+      node: any,
+      _children: ReactNode[],
+      _parent: any,
+      styles: any,
+      inheritedStyles: any = {},
+    ) => (
+      <Text key={node.key} style={[inheritedStyles, styles.code_block]}>
+        {node.content}
+      </Text>
+    ),
+    fence: (
+      node: any,
+      _children: ReactNode[],
+      _parent: any,
+      styles: any,
+      inheritedStyles: any = {},
+    ) => (
+      <Text key={node.key} style={[inheritedStyles, styles.fence]}>
+        {node.content}
+      </Text>
+    ),
+    code_inline: (
+      node: any,
+      _children: ReactNode[],
+      _parent: any,
+      styles: any,
+      inheritedStyles: any = {},
+    ) => (
+      <Text key={node.key} style={[inheritedStyles, styles.code_inline]}>
+        {node.content}
+      </Text>
+    ),
+    bullet_list: (node: any, children: ReactNode[], _parent: any, styles: any) => (
+      <View key={node.key} style={styles.bullet_list}>
+        {children}
+      </View>
+    ),
+    ordered_list: (node: any, children: ReactNode[], _parent: any, styles: any) => (
+      <View key={node.key} style={styles.ordered_list}>
+        {children}
+      </View>
+    ),
+    list_item: (node: any, children: ReactNode[], parent: any, styles: any) => {
+      const { isOrdered, marker } = getMarkdownListMarker(node, parent);
+      const iconStyle = isOrdered ? styles.ordered_list_icon : styles.bullet_list_icon;
+      const contentStyle = isOrdered ? styles.ordered_list_content : styles.bullet_list_content;
+
+      return (
+        <View key={node.key} style={styles.list_item}>
+          <Text style={iconStyle}>{marker}</Text>
+          <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>
+      );
+    },
+  };
+}
+
+export function PlanCard({
+  title = "Plan",
+  description,
+  text,
+  footer,
+  disableOuterSpacing = false,
+}: {
+  title?: string;
+  description?: string;
+  text: string;
+  footer?: ReactNode;
+  disableOuterSpacing?: boolean;
+}) {
+  const { theme } = useUnistyles();
+  const markdownStyles = createMarkdownStyles(theme);
+  const markdownRules = createPlanMarkdownRules();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        disableOuterSpacing && styles.containerCompact,
+        {
+          backgroundColor: theme.colors.surface1,
+          borderColor: theme.colors.border,
+        },
+      ]}
+    >
+      <Text style={[styles.title, { color: theme.colors.foreground }]}>{title}</Text>
+      {description ? (
+        <Text style={[styles.description, { color: theme.colors.foregroundMuted }]}>
+          {description}
+        </Text>
+      ) : null}
+      <Markdown style={markdownStyles} rules={markdownRules}>
+        {text}
+      </Markdown>
+      {footer ? <View style={styles.footer}>{footer}</View> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    marginVertical: theme.spacing[3],
+    padding: theme.spacing[3],
+    borderRadius: theme.spacing[2],
+    borderWidth: 1,
+    gap: theme.spacing[2],
+  },
+  containerCompact: {
+    marginVertical: 0,
+  },
+  title: {
+    fontSize: theme.fontSize.base,
+    lineHeight: 22,
+  },
+  description: {
+    fontSize: theme.fontSize.sm,
+    lineHeight: 20,
+  },
+  footer: {
+    gap: theme.spacing[2],
+  },
+}));

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

@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useState } from "react";
+import { View, Text, ActivityIndicator, ScrollView } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
+import { useHostRuntimeClient } from "@/runtime/host-runtime";
+import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
+import { AGENT_PROVIDER_DEFINITIONS } from "@server/server/agent/provider-manifest";
+
+interface ProviderDiagnosticSheetProps {
+  provider: string;
+  visible: boolean;
+  onClose: () => void;
+  serverId: string;
+}
+
+export function ProviderDiagnosticSheet({
+  provider,
+  visible,
+  onClose,
+  serverId,
+}: ProviderDiagnosticSheetProps) {
+  const { theme } = useUnistyles();
+  const client = useHostRuntimeClient(serverId);
+  const [diagnostic, setDiagnostic] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const providerLabel =
+    AGENT_PROVIDER_DEFINITIONS.find((d) => d.id === provider)?.label ?? provider;
+
+  const fetchDiagnostic = useCallback(async () => {
+    if (!client || !provider) return;
+
+    setLoading(true);
+    setDiagnostic(null);
+
+    try {
+      const result = await client.getProviderDiagnostic(provider as AgentProvider);
+      setDiagnostic(result.diagnostic);
+    } catch (err) {
+      setDiagnostic(err instanceof Error ? err.message : "Failed to fetch diagnostic");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, provider]);
+
+  useEffect(() => {
+    if (visible) {
+      fetchDiagnostic();
+    } else {
+      setDiagnostic(null);
+    }
+  }, [visible, fetchDiagnostic]);
+
+  return (
+    <AdaptiveModalSheet
+      title={providerLabel}
+      visible={visible}
+      onClose={onClose}
+      snapPoints={["50%", "85%"]}
+    >
+      {loading ? (
+        <View style={sheetStyles.loadingContainer}>
+          <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+          <Text style={sheetStyles.loadingText}>Fetching diagnostic…</Text>
+        </View>
+      ) : diagnostic ? (
+        <ScrollView
+          horizontal
+          style={sheetStyles.scrollContainer}
+          contentContainerStyle={sheetStyles.scrollContent}
+        >
+          <Text style={sheetStyles.diagnosticText} selectable>
+            {diagnostic}
+          </Text>
+        </ScrollView>
+      ) : null}
+    </AdaptiveModalSheet>
+  );
+}
+
+const sheetStyles = StyleSheet.create((theme) => ({
+  loadingContainer: {
+    paddingVertical: theme.spacing[6],
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  loadingText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: theme.spacing[4],
+  },
+  diagnosticText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+    fontFamily: "monospace",
+    lineHeight: theme.fontSize.sm * 1.6,
+  },
+}));

packages/app/src/components/provider-icons.ts

@@ -3,13 +3,14 @@ import { ClaudeIcon } from "@/components/icons/claude-icon";
 import { CodexIcon } from "@/components/icons/codex-icon";
 import { CopilotIcon } from "@/components/icons/copilot-icon";
 import { OpenCodeIcon } from "@/components/icons/opencode-icon";
+import { PiIcon } from "@/components/icons/pi-icon";
 
 const PROVIDER_ICONS: Record<string, typeof Bot> = {
   claude: ClaudeIcon as unknown as typeof Bot,
-  "claude-acp": ClaudeIcon as unknown as typeof Bot,
   codex: CodexIcon as unknown as typeof Bot,
   copilot: CopilotIcon as unknown as typeof Bot,
   opencode: OpenCodeIcon as unknown as typeof Bot,
+  pi: PiIcon as unknown as typeof Bot,
 };
 
 export function getProviderIcon(provider: string): typeof Bot {

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>>>({});
@@ -119,6 +120,7 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
   });
 
   function handleSubmit() {
+    if (!allAnswered || isResponding) return;
     setRespondingAction("submit");
     const answers: Record<string, string> = {};
     for (let i = 0; i < questions!.length; i++) {
@@ -228,7 +230,9 @@ export function QuestionFormCard({ permission, onRespond, isResponding }: Questi
               placeholderTextColor={theme.colors.foregroundMuted}
               value={otherText}
               onChangeText={(text) => setOtherText(qIndex, text)}
+              onSubmitEditing={handleSubmit}
               editable={!isResponding}
+              blurOnSubmit={false}
             />
           </View>
         );

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

@@ -38,12 +38,13 @@ import {
   Monitor,
   MoreVertical,
   Plus,
+  Trash2,
 } from "lucide-react-native";
 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 { useIsCompactFormFactor } from "@/constants/layout";
 import { projectIconQueryKey } from "@/hooks/use-project-icon-query";
 import { parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
@@ -52,14 +53,8 @@ import {
   type SidebarWorkspaceEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
-import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-  useContextMenu,
-} from "@/components/ui/context-menu";
+import { useShowShortcutBadges } from "@/hooks/use-show-shortcut-badges";
+import { ContextMenuTrigger, useContextMenu } from "@/components/ui/context-menu";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -105,11 +100,19 @@ const DEFAULT_STATUS_DOT_SIZE = 7;
 const EMPHASIZED_STATUS_DOT_SIZE = 9;
 const DEFAULT_STATUS_DOT_OFFSET = 0;
 const EMPHASIZED_STATUS_DOT_OFFSET = -1;
-const GITHUB_PR_STATE_LABELS: Record<PrHint["state"], string> = {
-  open: "Open",
-  merged: "Merged",
-  closed: "Closed",
-};
+function getWorkspacePrIconColor(
+  theme: ReturnType<typeof useUnistyles>["theme"],
+  state: PrHint["state"],
+) {
+  switch (state) {
+    case "merged":
+      return theme.colors.palette.purple[500];
+    case "open":
+      return theme.colors.palette.green[500];
+    case "closed":
+      return theme.colors.palette.red[500];
+  }
+}
 
 interface SidebarWorkspaceListProps {
   projects: SidebarProjectEntry[];
@@ -145,6 +148,8 @@ interface ProjectHeaderRowProps {
   isDragging: boolean;
   isArchiving?: boolean;
   menuController: ReturnType<typeof useContextMenu> | null;
+  onRemoveProject?: () => void;
+  removeProjectStatus?: "idle" | "pending";
   dragHandleProps?: DraggableListDragHandleProps;
 }
 
@@ -172,7 +177,8 @@ interface WorkspaceRowInnerProps {
 function WorkspacePrBadge({ hint }: { hint: PrHint }) {
   const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
-  const activeColor = isHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
+  const textColor = isHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
+  const iconColor = getWorkspacePrIconColor(theme, hint.state);
 
   const handlePressIn = useCallback((event: GestureResponderEvent) => {
     event.stopPropagation();
@@ -195,22 +201,13 @@ function WorkspacePrBadge({ hint }: { hint: PrHint }) {
       onPress={handlePress}
       onPointerEnter={() => setIsHovered(true)}
       onPointerLeave={() => setIsHovered(false)}
-      style={({ pressed }) => [
-        styles.workspacePrBadge,
-        pressed && styles.workspacePrBadgePressed,
-      ]}
+      style={({ pressed }) => [styles.workspacePrBadge, pressed && styles.workspacePrBadgePressed]}
     >
-      <GitPullRequest size={12} color={activeColor} />
-      <Text
-        style={[
-          styles.workspacePrBadgeText,
-          { color: activeColor },
-        ]}
-        numberOfLines={1}
-      >
-        #{hint.number} · {GITHUB_PR_STATE_LABELS[hint.state]}
+      <GitPullRequest size={12} color={iconColor} />
+      <Text style={[styles.workspacePrBadgeText, { color: textColor }]} numberOfLines={1}>
+        #{hint.number}
       </Text>
-      {isHovered && <ExternalLink size={10} color={activeColor} />}
+      {isHovered && <ExternalLink size={10} color={textColor} />}
     </Pressable>
   );
 }
@@ -252,11 +249,7 @@ function WorkspaceStatusIndicator({
   }
 
   const KindIcon =
-    workspaceKind === "local_checkout"
-      ? Monitor
-      : workspaceKind === "worktree"
-        ? FolderGit2
-        : null;
+    workspaceKind === "local_checkout" ? Monitor : workspaceKind === "worktree" ? FolderGit2 : null;
   if (!KindIcon) return null;
 
   const dotColor = getStatusDotColor({ theme, bucket, showDoneAsInactive: false });
@@ -704,10 +697,13 @@ function ProjectHeaderRow({
   isDragging,
   isArchiving = false,
   menuController,
+  onRemoveProject,
+  removeProjectStatus = "idle",
   dragHandleProps,
 }: ProjectHeaderRowProps) {
+  const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
-  const isMobileBreakpoint = isCompactFormFactor();
+  const isMobileBreakpoint = useIsCompactFormFactor();
   const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
   const toast = useToast();
 
@@ -792,16 +788,55 @@ function ProjectHeaderRow({
           </Text>
         </View>
       </View>
-      {canCreateWorktree ? (
-        <NewWorktreeButton
-          displayName={displayName}
-          onPress={() => createWorktreeMutation.mutate()}
-          visible={isHovered || isMobileBreakpoint}
-          loading={createWorktreeMutation.isPending}
-          showShortcutHint={isProjectActive}
-          testID={`sidebar-project-new-worktree-${project.projectKey}`}
-        />
-      ) : null}
+      <View style={styles.projectTrailingActions}>
+        {canCreateWorktree ? (
+          <NewWorktreeButton
+            displayName={displayName}
+            onPress={() => createWorktreeMutation.mutate()}
+            visible={isHovered || isMobileBreakpoint}
+            loading={createWorktreeMutation.isPending}
+            showShortcutHint={isProjectActive}
+            testID={`sidebar-project-new-worktree-${project.projectKey}`}
+          />
+        ) : null}
+        {onRemoveProject ? (
+          <View
+            style={!(isHovered || isMobileBreakpoint) && styles.projectKebabButtonHidden}
+            pointerEvents={isHovered || isMobileBreakpoint ? "auto" : "none"}
+          >
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                hitSlop={8}
+                style={({ hovered = false }) => [
+                  styles.projectKebabButton,
+                  hovered && styles.projectKebabButtonHovered,
+                ]}
+                accessibilityRole="button"
+                accessibilityLabel="Project actions"
+                testID={`sidebar-project-kebab-${project.projectKey}`}
+              >
+                {({ hovered }) => (
+                  <MoreVertical
+                    size={14}
+                    color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                  />
+                )}
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" width={220}>
+                <DropdownMenuItem
+                  testID={`sidebar-project-menu-remove-${project.projectKey}`}
+                  leading={<Trash2 size={14} color={theme.colors.foregroundMuted} />}
+                  status={removeProjectStatus}
+                  pendingLabel="Removing..."
+                  onSelect={onRemoveProject}
+                >
+                  Remove project
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </View>
+        ) : null}
+      </View>
       {showShortcutBadge && shortcutNumber !== null ? (
         <View style={styles.shortcutBadge}>
           <Text style={styles.shortcutBadgeText}>{shortcutNumber}</Text>
@@ -1068,7 +1103,7 @@ function WorkspaceRowWithMenu({
         serverId: workspace.serverId,
         archivedWorkspaceId: workspace.workspaceId,
         workspaces: sessionWorkspaces.values(),
-      }) as any,
+      }),
     );
   }, [activeWorkspaceSelection, sessionWorkspaces, workspace.serverId, workspace.workspaceId]);
 
@@ -1209,160 +1244,6 @@ function WorkspaceRowWithMenu({
   );
 }
 
-function NonGitProjectRowWithMenuContent({
-  project,
-  displayName,
-  iconDataUri,
-  workspace,
-  selected,
-  onPress,
-  shortcutNumber,
-  showShortcutBadge,
-  drag,
-  isDragging,
-  dragHandleProps,
-}: {
-  project: SidebarProjectEntry;
-  displayName: string;
-  iconDataUri: string | null;
-  workspace: SidebarWorkspaceEntry;
-  selected: boolean;
-  onPress: () => void;
-  shortcutNumber: number | null;
-  showShortcutBadge: boolean;
-  drag: () => void;
-  isDragging: boolean;
-  dragHandleProps?: DraggableListDragHandleProps;
-}) {
-  const toast = useToast();
-  const contextMenu = useContextMenu();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
-  const sessionWorkspaces = useSessionStore(
-    (state) => state.sessions[workspace.serverId]?.workspaces ?? EMPTY_WORKSPACES,
-  );
-  const [isArchivingWorkspace, setIsArchivingWorkspace] = useState(false);
-  const redirectAfterArchive = useCallback(() => {
-    if (
-      activeWorkspaceSelection?.serverId !== workspace.serverId ||
-      activeWorkspaceSelection.workspaceId !== workspace.workspaceId
-    ) {
-      return;
-    }
-
-    router.replace(
-      buildWorkspaceArchiveRedirectRoute({
-        serverId: workspace.serverId,
-        archivedWorkspaceId: workspace.workspaceId,
-        workspaces: sessionWorkspaces.values(),
-      }) as any,
-    );
-  }, [activeWorkspaceSelection, sessionWorkspaces, workspace.serverId, workspace.workspaceId]);
-
-  const handleArchiveWorkspace = useCallback(() => {
-    if (isArchivingWorkspace) {
-      return;
-    }
-
-    void (async () => {
-      const confirmed = await confirmDialog({
-        title: "Hide workspace?",
-        message: `Hide "${workspace.name}" from the sidebar?\n\nFiles on disk will not be changed.`,
-        confirmLabel: "Hide",
-        cancelLabel: "Cancel",
-        destructive: true,
-      });
-      if (!confirmed) {
-        return;
-      }
-
-      const client = getHostRuntimeStore().getClient(workspace.serverId);
-      if (!client) {
-        toast.error("Host is not connected");
-        return;
-      }
-
-      setIsArchivingWorkspace(true);
-      try {
-        const payload = await client.archiveWorkspace(workspace.workspaceId);
-        if (payload.error) {
-          throw new Error(payload.error);
-        }
-        redirectAfterArchive();
-      } catch (error) {
-        toast.error(error instanceof Error ? error.message : "Failed to hide workspace");
-      } finally {
-        setIsArchivingWorkspace(false);
-      }
-    })();
-  }, [
-    isArchivingWorkspace,
-    redirectAfterArchive,
-    toast,
-    workspace.name,
-    workspace.serverId,
-    workspace.workspaceId,
-  ]);
-
-  return (
-    <>
-      <ProjectHeaderRow
-        project={project}
-        displayName={displayName}
-        iconDataUri={iconDataUri}
-        workspace={workspace}
-        selected={selected}
-        chevron={null}
-        onPress={onPress}
-        serverId={null}
-        canCreateWorktree={false}
-        shortcutNumber={shortcutNumber}
-        showShortcutBadge={showShortcutBadge}
-        drag={drag}
-        isDragging={isDragging}
-        isArchiving={isArchivingWorkspace}
-        menuController={contextMenu}
-        dragHandleProps={dragHandleProps}
-      />
-      <ContextMenuContent
-        align="start"
-        width={220}
-        mobileMode="sheet"
-        testID={`sidebar-workspace-context-${workspace.workspaceKey}`}
-      >
-        <ContextMenuItem
-          testID={`sidebar-workspace-context-${workspace.workspaceKey}-archive`}
-          status={isArchivingWorkspace ? "pending" : "idle"}
-          pendingLabel="Hiding..."
-          destructive
-          onSelect={handleArchiveWorkspace}
-        >
-          Hide from sidebar
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </>
-  );
-}
-
-function NonGitProjectRowWithMenu(props: {
-  project: SidebarProjectEntry;
-  displayName: string;
-  iconDataUri: string | null;
-  workspace: SidebarWorkspaceEntry;
-  selected: boolean;
-  onPress: () => void;
-  shortcutNumber: number | null;
-  showShortcutBadge: boolean;
-  drag: () => void;
-  isDragging: boolean;
-  dragHandleProps?: DraggableListDragHandleProps;
-}) {
-  return (
-    <ContextMenu>
-      <NonGitProjectRowWithMenuContent {...props} />
-    </ContextMenu>
-  );
-}
-
 function FlattenedProjectRow({
   project,
   displayName,
@@ -1378,6 +1259,8 @@ function FlattenedProjectRow({
   isDragging,
   dragHandleProps,
   isProjectActive = false,
+  onRemoveProject,
+  removeProjectStatus,
 }: {
   project: SidebarProjectEntry;
   displayName: string;
@@ -1393,25 +1276,9 @@ function FlattenedProjectRow({
   isDragging: boolean;
   dragHandleProps?: DraggableListDragHandleProps;
   isProjectActive?: boolean;
+  onRemoveProject?: () => void;
+  removeProjectStatus?: "idle" | "pending";
 }) {
-  if (project.projectKind === "non_git") {
-    return (
-      <NonGitProjectRowWithMenu
-        project={project}
-        displayName={displayName}
-        iconDataUri={iconDataUri}
-        workspace={rowModel.workspace}
-        selected={rowModel.selected}
-        onPress={onPress}
-        shortcutNumber={shortcutNumber}
-        showShortcutBadge={showShortcutBadge}
-        drag={drag}
-        isDragging={isDragging}
-        dragHandleProps={dragHandleProps}
-      />
-    );
-  }
-
   return (
     <ProjectHeaderRow
       project={project}
@@ -1431,6 +1298,8 @@ function FlattenedProjectRow({
       drag={drag}
       isDragging={isDragging}
       menuController={null}
+      onRemoveProject={onRemoveProject}
+      removeProjectStatus={removeProjectStatus}
       dragHandleProps={dragHandleProps}
     />
   );
@@ -1601,6 +1470,48 @@ function ProjectBlock({
     [onWorkspaceReorder, project.projectKey],
   );
 
+  const toast = useToast();
+  const [isRemovingProject, setIsRemovingProject] = useState(false);
+
+  const handleRemoveProject = useCallback(() => {
+    if (isRemovingProject || !serverId) {
+      return;
+    }
+
+    void (async () => {
+      const confirmed = await confirmDialog({
+        title: "Remove project?",
+        message: `Remove "${displayName}" from the sidebar?\n\nFiles on disk will not be changed.`,
+        confirmLabel: "Remove",
+        cancelLabel: "Cancel",
+        destructive: true,
+      });
+      if (!confirmed) {
+        return;
+      }
+
+      const client = getHostRuntimeStore().getClient(serverId);
+      if (!client) {
+        toast.error("Host is not connected");
+        return;
+      }
+
+      setIsRemovingProject(true);
+      try {
+        for (const ws of project.workspaces) {
+          const payload = await client.archiveWorkspace(ws.workspaceId);
+          if (payload.error) {
+            throw new Error(payload.error);
+          }
+        }
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "Failed to remove project");
+      } finally {
+        setIsRemovingProject(false);
+      }
+    })();
+  }, [isRemovingProject, serverId, displayName, toast, project.workspaces]);
+
   return (
     <View style={styles.projectBlock}>
       {rowModel.kind === "workspace_link" ? (
@@ -1625,6 +1536,8 @@ function ProjectBlock({
           isDragging={isDragging}
           dragHandleProps={dragHandleProps}
           isProjectActive={isProjectActive}
+          onRemoveProject={handleRemoveProject}
+          removeProjectStatus={isRemovingProject ? "pending" : "idle"}
         />
       ) : (
         <>
@@ -1643,7 +1556,10 @@ function ProjectBlock({
             onWorktreeCreated={onWorktreeCreated}
             drag={drag}
             isDragging={isDragging}
+            isArchiving={isRemovingProject}
             menuController={null}
+            onRemoveProject={handleRemoveProject}
+            removeProjectStatus={isRemovingProject ? "pending" : "idle"}
             dragHandleProps={dragHandleProps}
           />
 
@@ -1680,7 +1596,7 @@ export function SidebarWorkspaceList({
   listFooterComponent,
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
-  const isMobile = isCompactFormFactor();
+  const isMobile = useIsCompactFormFactor();
   const isNative = Platform.OS !== "web";
   const pathname = usePathname();
   const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
@@ -1688,10 +1604,7 @@ export function SidebarWorkspaceList({
   const creatingWorkspaceTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
     new Map(),
   );
-  const isDesktopApp = getIsElectronRuntime();
-  const altDown = useKeyboardShortcutsStore((state) => state.altDown);
-  const cmdOrCtrlDown = useKeyboardShortcutsStore((state) => state.cmdOrCtrlDown);
-  const showShortcutBadges = altDown || (isDesktopApp && cmdOrCtrlDown);
+  const showShortcutBadges = useShowShortcutBadges();
 
   const getProjectOrder = useSidebarOrderStore((state) => state.getProjectOrder);
   const setProjectOrder = useSidebarOrderStore((state) => state.setProjectOrder);
@@ -1872,34 +1785,31 @@ export function SidebarWorkspaceList({
     [getWorkspaceOrder, serverId, setWorkspaceOrder],
   );
 
-  const handleWorktreeCreated = useCallback(
-    (workspaceId: string) => {
-      setCreatingWorkspaceIds((current) => {
-        const next = new Set(current);
-        next.add(workspaceId);
-        return next;
-      });
-      const existingTimeout = creatingWorkspaceTimeoutsRef.current.get(workspaceId);
-      if (existingTimeout) {
-        clearTimeout(existingTimeout);
-      }
-      creatingWorkspaceTimeoutsRef.current.set(
-        workspaceId,
-        setTimeout(() => {
-          creatingWorkspaceTimeoutsRef.current.delete(workspaceId);
-          setCreatingWorkspaceIds((current) => {
-            if (!current.has(workspaceId)) {
-              return current;
-            }
-            const next = new Set(current);
-            next.delete(workspaceId);
-            return next;
-          });
-        }, 3000),
-      );
-    },
-    [],
-  );
+  const handleWorktreeCreated = useCallback((workspaceId: string) => {
+    setCreatingWorkspaceIds((current) => {
+      const next = new Set(current);
+      next.add(workspaceId);
+      return next;
+    });
+    const existingTimeout = creatingWorkspaceTimeoutsRef.current.get(workspaceId);
+    if (existingTimeout) {
+      clearTimeout(existingTimeout);
+    }
+    creatingWorkspaceTimeoutsRef.current.set(
+      workspaceId,
+      setTimeout(() => {
+        creatingWorkspaceTimeoutsRef.current.delete(workspaceId);
+        setCreatingWorkspaceIds((current) => {
+          if (!current.has(workspaceId)) {
+            return current;
+          }
+          const next = new Set(current);
+          next.delete(workspaceId);
+          return next;
+        });
+      }, 3000),
+    );
+  }, []);
 
   const renderProject = useCallback(
     ({ item, drag, isActive, dragHandleProps }: DraggableRenderItemInfo<SidebarProjectEntry>) => {
@@ -1949,12 +1859,7 @@ export function SidebarWorkspaceList({
         <View style={styles.emptyContainer}>
           <Text style={styles.emptyTitle}>No projects yet</Text>
           <Text style={styles.emptyText}>Add a project to get started</Text>
-          <Button
-            variant="ghost"
-            size="sm"
-            leftIcon={Plus}
-            onPress={onAddProject}
-          >
+          <Button variant="ghost" size="sm" leftIcon={Plus} onPress={onAddProject}>
             Add project
           </Button>
         </View>
@@ -2054,7 +1959,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   projectRowHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectRowPressed: {
     backgroundColor: theme.colors.surface2,
@@ -2124,7 +2029,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   projectActionButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectActionButtonText: {
     color: theme.colors.foregroundMuted,
@@ -2139,11 +2044,31 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   projectIconActionButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectIconActionButtonHidden: {
     opacity: 0,
   },
+  projectTrailingActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    flexShrink: 0,
+  },
+  projectKebabButton: {
+    width: 24,
+    height: 24,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  projectKebabButtonHidden: {
+    opacity: 0,
+  },
+  projectKebabButtonHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
   projectTrailingControlSlot: {
     width: 24,
     height: 24,
@@ -2197,7 +2122,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   workspaceRowHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   workspaceRowPressed: {
     backgroundColor: theme.colors.surface2,
@@ -2211,7 +2136,7 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.md,
   },
   sidebarRowSelected: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   workspaceRowContainer: {
     position: "relative",
@@ -2295,12 +2220,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/split-container.tsx

@@ -84,6 +84,7 @@ interface SplitContainerProps {
   onCloseTab: (tabId: string) => Promise<void> | void;
   onCopyResumeCommand: (agentId: string) => Promise<void> | void;
   onCopyAgentId: (agentId: string) => Promise<void> | void;
+  onReloadAgent: (agentId: string) => Promise<void> | void;
   onCloseTabsToLeft: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
   onCloseTabsToRight: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
   onCloseOtherTabs: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
@@ -176,19 +177,6 @@ const MountedTabSlot = memo(function MountedTabSlot({
   paneId,
   buildPaneContentModel,
 }: MountedTabSlotProps) {
-  useEffect(() => {
-    if (tabDescriptor.target.kind !== "terminal") {
-      return;
-    }
-    console.log("[terminal-tab-slot]", {
-      paneId,
-      tabId: tabDescriptor.tabId,
-      terminalId: tabDescriptor.target.terminalId,
-      isVisible,
-      isPaneFocused,
-    });
-  }, [isPaneFocused, isVisible, paneId, tabDescriptor]);
-
   const content = useMemo(
     () =>
       buildPaneContentModel({
@@ -265,6 +253,7 @@ export function SplitContainer({
   onCloseTab,
   onCopyResumeCommand,
   onCopyAgentId,
+  onReloadAgent,
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
@@ -534,6 +523,7 @@ export function SplitContainer({
         onCloseTab={onCloseTab}
         onCopyResumeCommand={onCopyResumeCommand}
         onCopyAgentId={onCopyAgentId}
+        onReloadAgent={onReloadAgent}
         onCloseTabsToLeft={onCloseTabsToLeft}
         onCloseTabsToRight={onCloseTabsToRight}
         onCloseOtherTabs={onCloseOtherTabs}
@@ -656,6 +646,7 @@ function SplitNodeView({
   onCloseTab,
   onCopyResumeCommand,
   onCopyAgentId,
+  onReloadAgent,
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
@@ -691,6 +682,7 @@ function SplitNodeView({
         onCloseTab={onCloseTab}
         onCopyResumeCommand={onCopyResumeCommand}
         onCopyAgentId={onCopyAgentId}
+        onReloadAgent={onReloadAgent}
         onCloseTabsToLeft={onCloseTabsToLeft}
         onCloseTabsToRight={onCloseTabsToRight}
         onCloseOtherTabs={onCloseOtherTabs}
@@ -741,6 +733,7 @@ function SplitNodeView({
               onCloseTab={onCloseTab}
               onCopyResumeCommand={onCopyResumeCommand}
               onCopyAgentId={onCopyAgentId}
+              onReloadAgent={onReloadAgent}
               onCloseTabsToLeft={onCloseTabsToLeft}
               onCloseTabsToRight={onCloseTabsToRight}
               onCloseOtherTabs={onCloseOtherTabs}
@@ -790,6 +783,7 @@ function SplitPaneView({
   onCloseTab,
   onCopyResumeCommand,
   onCopyAgentId,
+  onReloadAgent,
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
@@ -882,12 +876,7 @@ function SplitPaneView({
 
   return (
     <View ref={paneRef} collapsable={false} style={styles.pane}>
-      <View
-        style={[
-          styles.paneTabs,
-          { paddingLeft: padding.left, paddingRight: padding.right },
-        ]}
-      >
+      <View style={[styles.paneTabs, { paddingLeft: padding.left, paddingRight: padding.right }]}>
         <TitlebarDragRegion />
         <WorkspaceDesktopTabsRow
           paneId={pane.id}
@@ -901,6 +890,7 @@ function SplitPaneView({
           onCloseTab={onCloseTab}
           onCopyResumeCommand={onCopyResumeCommand}
           onCopyAgentId={onCopyAgentId}
+          onReloadAgent={onReloadAgent}
           onCloseTabsToLeft={(tabId) => onCloseTabsToLeft(tabId, paneTabs)}
           onCloseTabsToRight={(tabId) => onCloseTabsToRight(tabId, paneTabs)}
           onCloseOtherTabs={(tabId) => onCloseOtherTabs(tabId, paneTabs)}
@@ -924,27 +914,25 @@ function SplitPaneView({
       </View>
 
       <View style={styles.paneContent}>
-        {mountedPaneTabIds.length > 0 ? (
-          mountedPaneTabIds.map((tabId) => {
-            const tabDescriptor = tabDescriptorMap.get(tabId);
-            if (!tabDescriptor) {
-              return null;
-            }
+        {mountedPaneTabIds.length > 0
+          ? mountedPaneTabIds.map((tabId) => {
+              const tabDescriptor = tabDescriptorMap.get(tabId);
+              if (!tabDescriptor) {
+                return null;
+              }
 
-            return (
-              <MountedTabSlot
-                key={tabId}
-                tabDescriptor={tabDescriptor}
-                isVisible={tabId === activeTabDescriptor?.tabId}
-                isPaneFocused={isFocused && tabId === activeTabDescriptor?.tabId}
-                paneId={pane.id}
-                buildPaneContentModel={buildPaneContentModel}
-              />
-            );
-          })
-        ) : (
-          (renderPaneEmptyState?.() ?? null)
-        )}
+              return (
+                <MountedTabSlot
+                  key={tabId}
+                  tabDescriptor={tabDescriptor}
+                  isVisible={tabId === activeTabDescriptor?.tabId}
+                  isPaneFocused={isFocused && tabId === activeTabDescriptor?.tabId}
+                  paneId={pane.id}
+                  buildPaneContentModel={buildPaneContentModel}
+                />
+              );
+            })
+          : (renderPaneEmptyState?.() ?? null)}
         <SplitDropZone paneId={pane.id} active={showDropZones} preview={dropPreview} />
       </View>
     </View>

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;
@@ -82,17 +82,12 @@ function terminalScopeKey(input: { serverId: string; cwd: string }): string {
   return `${input.serverId}:${input.cwd}`;
 }
 
-export function TerminalPane({
-  serverId,
-  cwd,
-  terminalId,
-  isPaneFocused,
-}: TerminalPaneProps) {
+export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: TerminalPaneProps) {
   const isScreenFocused = useIsFocused();
   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);
@@ -108,7 +103,10 @@ export function TerminalPane({
   const scopeKey = useMemo(() => terminalScopeKey({ serverId, cwd }), [serverId, cwd]);
   const lastReportedSizeRef = useRef<{ rows: number; cols: number } | null>(null);
   const streamControllerRef = useRef<TerminalStreamController | null>(null);
-  const workspaceTerminalSession = useMemo(() => getWorkspaceTerminalSession({ scopeKey }), [scopeKey]);
+  const workspaceTerminalSession = useMemo(
+    () => getWorkspaceTerminalSession({ scopeKey }),
+    [scopeKey],
+  );
   const [isAttaching, setIsAttaching] = useState(false);
   const [streamError, setStreamError] = useState<string | null>(null);
   const [modifiers, setModifiers] = useState<ModifierState>(EMPTY_MODIFIERS);
@@ -473,26 +471,32 @@ export function TerminalPane({
     ],
   );
 
-  const handleTerminalResize = useStableEvent(
-    (input: { rows: number; cols: number }) => {
-      const { rows, cols } = input;
-      if (!client || !terminalId || !isPaneFocused || !isScreenFocused || !isAppVisible || rows <= 0 || cols <= 0) {
-        return;
-      }
-      const normalizedRows = Math.floor(rows);
-      const normalizedCols = Math.floor(cols);
-      const previous = lastReportedSizeRef.current;
-      if (previous && previous.rows === normalizedRows && previous.cols === normalizedCols) {
-        return;
-      }
-      lastReportedSizeRef.current = { rows: normalizedRows, cols: normalizedCols };
-      client.sendTerminalInput(terminalId, {
-        type: "resize",
-        rows: normalizedRows,
-        cols: normalizedCols,
-      });
-    },
-  );
+  const handleTerminalResize = useStableEvent((input: { rows: number; cols: number }) => {
+    const { rows, cols } = input;
+    if (
+      !client ||
+      !terminalId ||
+      !isPaneFocused ||
+      !isScreenFocused ||
+      !isAppVisible ||
+      rows <= 0 ||
+      cols <= 0
+    ) {
+      return;
+    }
+    const normalizedRows = Math.floor(rows);
+    const normalizedCols = Math.floor(cols);
+    const previous = lastReportedSizeRef.current;
+    if (previous && previous.rows === normalizedRows && previous.cols === normalizedCols) {
+      return;
+    }
+    lastReportedSizeRef.current = { rows: normalizedRows, cols: normalizedCols };
+    client.sendTerminalInput(terminalId, {
+      type: "resize",
+      rows: normalizedRows,
+      cols: normalizedCols,
+    });
+  });
 
   const handleTerminalKey = useCallback(
     async (input: { key: string; ctrl: boolean; shift: boolean; alt: boolean; meta: boolean }) => {

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 {
@@ -46,6 +47,7 @@ export function useToastHost(): {
   toast: ToastState | null;
   dismiss: () => void;
 } {
+  const { theme } = useUnistyles();
   const [toast, setToast] = useState<ToastState | null>(null);
   const idRef = useRef(0);
 
@@ -83,11 +85,11 @@ export function useToastHost(): {
       copied: (label?: string) =>
         show(label ? `Copied ${label}` : "Copied", {
           variant: "success",
-          icon: <CheckCircle2 size={18} />,
+          icon: <CheckCircle2 size={18} color={theme.colors.foreground} />,
         }),
       error: (message: string) => show(message, { variant: "error", durationMs: 3200 }),
     }),
-    [show],
+    [show, theme.colors.foreground],
   );
 
   const dismiss = useCallback(() => {
@@ -108,9 +110,12 @@ 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);
+  const dismissDeadlineRef = useRef<number | null>(null);
+  const remainingDurationRef = useRef(0);
 
   const clearTimer = useCallback(() => {
     if (timeoutRef.current) {
@@ -141,9 +146,39 @@ export function ToastViewport({
     });
   }, [clearTimer, onDismiss, opacity, translateY]);
 
+  const scheduleDismiss = useCallback(
+    (durationMs: number) => {
+      clearTimer();
+      const nextDurationMs = Math.max(0, durationMs);
+      remainingDurationRef.current = nextDurationMs;
+      dismissDeadlineRef.current = Date.now() + nextDurationMs;
+      timeoutRef.current = setTimeout(() => {
+        animateOut();
+      }, nextDurationMs);
+    },
+    [animateOut, clearTimer],
+  );
+
+  const pauseDismiss = useCallback(() => {
+    if (dismissDeadlineRef.current !== null) {
+      remainingDurationRef.current = Math.max(0, dismissDeadlineRef.current - Date.now());
+    }
+    dismissDeadlineRef.current = null;
+    clearTimer();
+  }, [clearTimer]);
+
+  const resumeDismiss = useCallback(() => {
+    if (!toast) {
+      return;
+    }
+    scheduleDismiss(remainingDurationRef.current || toast.durationMs);
+  }, [scheduleDismiss, toast]);
+
   useEffect(() => {
     if (!toast) {
       clearTimer();
+      dismissDeadlineRef.current = null;
+      remainingDurationRef.current = 0;
       opacity.setValue(0);
       translateY.setValue(-8);
       return;
@@ -168,20 +203,18 @@ export function ToastViewport({
       }),
     ]).start();
 
-    timeoutRef.current = setTimeout(() => {
-      animateOut();
-    }, toast.durationMs);
+    remainingDurationRef.current = toast.durationMs;
+    scheduleDismiss(toast.durationMs);
 
     return () => {
       clearTimer();
     };
-  }, [animateOut, clearTimer, opacity, toast, translateY]);
+  }, [clearTimer, opacity, scheduleDismiss, toast, translateY]);
 
   if (!toast) {
     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 =
@@ -201,6 +234,8 @@ export function ToastViewport({
     <View style={styles.container} pointerEvents="box-none">
       <Animated.View
         testID={toast.testID ?? "app-toast"}
+        onPointerEnter={pauseDismiss}
+        onPointerLeave={resumeDismiss}
         style={[
           styles.toast,
           toast.variant === "success" ? styles.toastSuccess : null,
@@ -218,7 +253,6 @@ export function ToastViewport({
           <Text
             testID="app-toast-message"
             style={[styles.message, toast.variant === "error" ? styles.messageError : null]}
-            numberOfLines={2}
           >
             {toast.content}
           </Text>
@@ -254,7 +288,7 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     gap: theme.spacing[2],
     backgroundColor: theme.colors.surface0,
-    borderRadius: theme.borderRadius.full,
+    borderRadius: theme.borderRadius["2xl"],
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.border,
     paddingVertical: theme.spacing[2],

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

@@ -136,21 +136,32 @@ export function Button({
       return <View>{leftIcon}</View>;
     }
 
-    const color = variant === "default"
-      ? theme.colors.accentForeground
-      : variant === "ghost"
-        ? (isGhostHovered ? theme.colors.foreground : theme.colors.foregroundMuted)
-        : theme.colors.foreground;
+    const color =
+      variant === "default"
+        ? theme.colors.accentForeground
+        : variant === "ghost"
+          ? isGhostHovered
+            ? theme.colors.foreground
+            : theme.colors.foregroundMuted
+          : theme.colors.foreground;
     const iconSize = ICON_SIZE[size];
 
     // Render function
-    if (typeof leftIcon === "function" && !leftIcon.prototype?.isReactComponent && leftIcon.length > 0) {
+    if (
+      typeof leftIcon === "function" &&
+      !leftIcon.prototype?.isReactComponent &&
+      leftIcon.length > 0
+    ) {
       return <View>{(leftIcon as (color: string) => ReactElement)(color)}</View>;
     }
 
     // Component type
     const Icon = leftIcon as ComponentType<{ color: string; size: number }>;
-    return <View><Icon color={color} size={iconSize} /></View>;
+    return (
+      <View>
+        <Icon color={color} size={iconSize} />
+      </View>
+    );
   }
 
   return (

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,
@@ -73,6 +74,12 @@ export interface ComboboxProps {
    * for that combobox instance to avoid animation overriding hidden opacity.
    */
   desktopPreventInitialFlash?: boolean;
+  /** Minimum width for the desktop popover (overrides trigger-based width). */
+  desktopMinWidth?: number;
+  /** Fixed height for the desktop popover (overrides default 400px max). */
+  desktopFixedHeight?: number;
+  /** Content rendered above the scroll area on desktop (sticky header). */
+  stickyHeader?: ReactNode;
   anchorRef: React.RefObject<View | null>;
   children?: ReactNode;
 }
@@ -150,6 +157,8 @@ export interface ComboboxItemProps {
   selected?: boolean;
   active?: boolean;
   disabled?: boolean;
+  /** When true, bumps hover/pressed colors up one surface level (for items on elevated backgrounds). */
+  elevated?: boolean;
   onPress: () => void;
   testID?: string;
 }
@@ -163,6 +172,7 @@ export function ComboboxItem({
   selected,
   active,
   disabled,
+  elevated,
   onPress,
   testID,
 }: ComboboxItemProps): ReactElement {
@@ -187,19 +197,19 @@ export function ComboboxItem({
       onPress={onPress}
       style={({ pressed, hovered = false }) => [
         styles.comboboxItem,
-        hovered && styles.comboboxItemHovered,
-        pressed && styles.comboboxItemPressed,
+        hovered && (elevated ? styles.comboboxItemHoveredElevated : styles.comboboxItemHovered),
+        pressed && (elevated ? styles.comboboxItemPressedElevated : styles.comboboxItemPressed),
         active && styles.comboboxItemActive,
         disabled && styles.comboboxItemDisabled,
       ]}
     >
       {leadingContent}
-      <View style={styles.comboboxItemContent}>
+      <View style={[styles.comboboxItemContent, description && styles.comboboxItemContentInline]}>
         <Text numberOfLines={1} style={styles.comboboxItemLabel}>
           {label}
         </Text>
         {description ? (
-          <Text numberOfLines={2} style={styles.comboboxItemDescription}>
+          <Text numberOfLines={1} style={styles.comboboxItemDescription}>
             {description}
           </Text>
         ) : null}
@@ -246,10 +256,13 @@ export function Combobox({
   stackBehavior,
   desktopPlacement = "top-start",
   desktopPreventInitialFlash = true,
+  desktopMinWidth,
+  desktopFixedHeight,
+  stickyHeader,
   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";
@@ -390,12 +403,27 @@ export function Combobox({
     ((floatingTop ?? 0) !== 0 || floatingLeft !== 0 || referenceAtOrigin);
   const shouldHideDesktopContent = desktopPreventInitialFlash && !hasResolvedDesktopPosition;
   const shouldUseDesktopFade = !desktopPreventInitialFlash;
+  // For top-placed popups: once position resolves, use bottom-based CSS positioning
+  // so height changes grow upward naturally without floating-ui needing to reposition.
+  const useStableBottom =
+    !isDesktopAboveSearch &&
+    IS_WEB &&
+    !isMobile &&
+    hasResolvedDesktopPosition &&
+    desktopPlacement.startsWith("top") &&
+    referenceTop !== null;
+
   const desktopPositionStyle = isDesktopAboveSearch
     ? {
         left: floatingLeft ?? 0,
         bottom: desktopAboveSearchBottom ?? 0,
       }
-    : floatingStyles;
+    : useStableBottom
+      ? {
+          left: floatingLeft ?? 0,
+          bottom: Math.max(windowHeight - referenceTop!, collisionPadding),
+        }
+      : floatingStyles;
 
   useEffect(() => {
     if (!isMobile) return;
@@ -632,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;
 
@@ -662,6 +684,8 @@ export function Combobox({
         <View style={styles.bottomSheetHeader}>
           <Text style={styles.comboboxTitle}>{title}</Text>
         </View>
+        {stickyHeader}
+        {!children && searchable ? searchInput : null}
         <BottomSheetScrollView
           contentContainerStyle={styles.comboboxScrollContent}
           keyboardShouldPersistTaps="handled"
@@ -687,13 +711,16 @@ export function Combobox({
             styles.desktopContainer,
             {
               position: "absolute",
-              minWidth: referenceWidth ?? 200,
-              maxWidth: 400,
+              minWidth: desktopMinWidth ?? referenceWidth ?? 200,
+              maxWidth: Math.max(400, desktopMinWidth ?? 0),
             },
+            desktopFixedHeight != null
+              ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight }
+              : null,
             desktopPositionStyle,
             shouldHideDesktopContent ? { opacity: 0 } : null,
             typeof availableSize?.height === "number"
-              ? { maxHeight: Math.min(availableSize.height, 400) }
+              ? { maxHeight: Math.min(availableSize.height, desktopFixedHeight ?? 400) }
               : null,
           ]}
           ref={refs.setFloating}
@@ -701,16 +728,20 @@ export function Combobox({
           onLayout={() => update()}
         >
           {children ? (
-            <ScrollView
-              contentContainerStyle={styles.desktopScrollContent}
-              keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={false}
-              style={styles.desktopScroll}
-            >
-              {content}
-            </ScrollView>
+            <>
+              {stickyHeader}
+              <ScrollView
+                contentContainerStyle={styles.desktopChildrenScrollContent}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+                style={styles.desktopScroll}
+              >
+                {content}
+              </ScrollView>
+            </>
           ) : (
             <>
+              {searchable ? searchInput : null}
               {effectiveOptionsPosition === "above-search" ? (
                 <ScrollView
                   ref={desktopOptionsScrollRef}
@@ -725,9 +756,7 @@ export function Combobox({
                 >
                   {optionsList}
                 </ScrollView>
-              ) : null}
-              {searchable ? searchInput : null}
-              {effectiveOptionsPosition === "below-search" ? (
+              ) : (
                 <ScrollView
                   contentContainerStyle={styles.desktopScrollContent}
                   keyboardShouldPersistTaps="handled"
@@ -736,7 +765,7 @@ export function Combobox({
                 >
                   {optionsList}
                 </ScrollView>
-              ) : null}
+              )}
             </>
           )}
         </Animated.View>
@@ -749,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,
@@ -783,9 +809,15 @@ const styles = StyleSheet.create((theme) => ({
   comboboxItemHovered: {
     backgroundColor: theme.colors.surface1,
   },
+  comboboxItemHoveredElevated: {
+    backgroundColor: theme.colors.surface2,
+  },
   comboboxItemPressed: {
     backgroundColor: theme.colors.surface1,
   },
+  comboboxItemPressedElevated: {
+    backgroundColor: theme.colors.surface2,
+  },
   comboboxItemActive: {
     backgroundColor: theme.colors.surface1,
   },
@@ -807,6 +839,11 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     flexShrink: 1,
   },
+  comboboxItemContentInline: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: theme.spacing[2],
+  },
   comboboxItemLeadingSlot: {
     width: 16,
     alignItems: "center",
@@ -817,9 +854,9 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
   },
   comboboxItemDescription: {
-    marginTop: 2,
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
+    flexShrink: 1,
   },
   emptyText: {
     paddingHorizontal: theme.spacing[3],
@@ -876,6 +913,9 @@ const styles = StyleSheet.create((theme) => ({
   desktopScrollContent: {
     paddingVertical: theme.spacing[1],
   },
+  desktopChildrenScrollContent: {
+    // No padding — custom children (e.g. model selector) control their own spacing
+  },
   desktopScrollContentAboveSearch: {
     flexGrow: 1,
     justifyContent: "flex-end",

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

@@ -27,9 +27,11 @@ 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";
 
 // Keep parity with dropdown-menu action statuses.
 export type ActionStatus = "idle" | "pending" | "success";
@@ -346,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);
@@ -595,6 +597,7 @@ export function ContextMenuItem({
   successLabel,
   closeOnSelect = true,
   testID,
+  tooltip,
 }: PropsWithChildren<{
   description?: string;
   onSelect?: () => void;
@@ -612,6 +615,7 @@ export function ContextMenuItem({
   successLabel?: string;
   closeOnSelect?: boolean;
   testID?: string;
+  tooltip?: string;
 }>): ReactElement {
   const { theme } = useUnistyles();
   const { setOpen } = useContextMenuContext("ContextMenuItem");
@@ -642,7 +646,7 @@ export function ContextMenuItem({
       <Check size={16} color={theme.colors.foregroundMuted} />
     ) : null);
 
-  return (
+  const content = (
     <Pressable
       testID={testID}
       accessibilityRole="button"
@@ -704,6 +708,19 @@ export function ContextMenuItem({
       {trailingContent ? <View style={styles.trailingSlot}>{trailingContent}</View> : null}
     </Pressable>
   );
+
+  if (!tooltip) {
+    return content;
+  }
+
+  return (
+    <Tooltip delayDuration={250} enabledOnDesktop enabledOnMobile={false}>
+      <TooltipTrigger asChild>{content}</TooltipTrigger>
+      <TooltipContent side="right" align="center" offset={10}>
+        <Text style={styles.tooltipText}>{tooltip}</Text>
+      </TooltipContent>
+    </Tooltip>
+  );
 }
 
 const styles = StyleSheet.create((theme) => ({
@@ -762,6 +779,10 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
   },
+  tooltipText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+  },
   item: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -27,6 +27,7 @@ import {
 import Animated, { Keyframe, runOnJS } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Check, CheckCircle } from "lucide-react-native";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 // Action status for menu items with loading/success feedback
 export type ActionStatus = "idle" | "pending" | "success";
@@ -459,6 +460,7 @@ export function DropdownMenuItem({
   description,
   onSelect,
   disabled,
+  muted = false,
   destructive,
   selected,
   showSelectedCheck = false,
@@ -471,10 +473,12 @@ export function DropdownMenuItem({
   successLabel,
   closeOnSelect = true,
   testID,
+  tooltip,
 }: PropsWithChildren<{
   description?: string;
   onSelect?: () => void;
   disabled?: boolean;
+  muted?: boolean;
   destructive?: boolean;
   selected?: boolean;
   showSelectedCheck?: boolean;
@@ -491,6 +495,7 @@ export function DropdownMenuItem({
   successLabel?: string;
   closeOnSelect?: boolean;
   testID?: string;
+  tooltip?: string;
 }>): ReactElement {
   const { theme } = useUnistyles();
   const { setOpen } = useDropdownMenuContext("DropdownMenuItem");
@@ -524,7 +529,7 @@ export function DropdownMenuItem({
       <Check size={16} color={theme.colors.foregroundMuted} />
     ) : null);
 
-  return (
+  const content = (
     <Pressable
       testID={testID}
       accessibilityRole="button"
@@ -547,6 +552,7 @@ export function DropdownMenuItem({
           ? styles.itemSelectedInteractive
           : null,
         isDisabled ? styles.itemDisabled : null,
+        muted && !isDisabled ? styles.itemMuted : null,
         hovered && !pressed && !isDisabled ? styles.itemHovered : null,
         pressed && !isDisabled ? styles.itemPressed : null,
       ]}
@@ -565,6 +571,7 @@ export function DropdownMenuItem({
             destructive && !isSuccess ? styles.itemTextDestructive : null,
             isSuccess ? styles.itemTextSuccess : null,
             selected && selectedVariant === "accent" ? styles.itemTextSelectedAccent : null,
+            muted && !isDisabled ? styles.itemTextMuted : null,
           ]}
         >
           {label}
@@ -586,6 +593,19 @@ export function DropdownMenuItem({
       {trailingContent ? <View style={styles.trailingSlot}>{trailingContent}</View> : null}
     </Pressable>
   );
+
+  if (!tooltip) {
+    return content;
+  }
+
+  return (
+    <Tooltip delayDuration={250} enabledOnDesktop enabledOnMobile={false}>
+      <TooltipTrigger asChild>{content}</TooltipTrigger>
+      <TooltipContent side="right" align="center" offset={10}>
+        <Text style={styles.tooltipText}>{tooltip}</Text>
+      </TooltipContent>
+    </Tooltip>
+  );
 }
 
 const styles = StyleSheet.create((theme) => ({
@@ -630,6 +650,10 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     color: theme.colors.foregroundMuted,
   },
+  tooltipText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+  },
   item: {
     flexDirection: "row",
     alignItems: "center",
@@ -658,11 +682,17 @@ const styles = StyleSheet.create((theme) => ({
   itemDisabled: {
     opacity: 0.5,
   },
+  itemMuted: {
+    opacity: 0.72,
+  },
   itemText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foreground,
     fontWeight: theme.fontWeight.normal,
   },
+  itemTextMuted: {
+    color: theme.colors.foregroundMuted,
+  },
   itemTextDestructive: {
     color: theme.colors.destructive,
   },

packages/app/src/components/ui/status-badge.tsx

@@ -0,0 +1,65 @@
+import { View, Text } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+type StatusBadgeVariant = "success" | "error" | "muted";
+
+interface StatusBadgeProps {
+  label: string;
+  variant?: StatusBadgeVariant;
+}
+
+export function StatusBadge({ label, variant = "muted" }: StatusBadgeProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View
+      style={[
+        styles.pill,
+        variant === "success" && styles.pillSuccess,
+        variant === "error" && styles.pillError,
+      ]}
+    >
+      <Text
+        style={[
+          styles.pillText,
+          variant === "success" && styles.pillTextSuccess,
+          variant === "error" && styles.pillTextError,
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: theme.borderRadius.full,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surface3,
+    paddingHorizontal: theme.spacing[2],
+    paddingVertical: 3,
+  },
+  pillSuccess: {
+    backgroundColor: theme.colors.palette.green[900],
+    borderColor: theme.colors.palette.green[800],
+  },
+  pillError: {
+    backgroundColor: theme.colors.palette.red[900],
+    borderColor: theme.colors.palette.red[800],
+  },
+  pillText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.foregroundMuted,
+  },
+  pillTextSuccess: {
+    color: theme.colors.palette.green[400],
+  },
+  pillTextError: {
+    color: theme.colors.palette.red[500],
+  },
+}));

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/use-web-scrollbar.tsx

@@ -77,7 +77,6 @@ export function useWebElementScrollbar(
     }
 
     element.addEventListener("scroll", update, { passive: true });
-    element.addEventListener("input", update, { passive: true });
 
     const resizeObserver = new ResizeObserver(update);
     resizeObserver.observe(element);
@@ -90,7 +89,6 @@ export function useWebElementScrollbar(
 
     return () => {
       element.removeEventListener("scroll", update);
-      element.removeEventListener("input", update);
       resizeObserver.disconnect();
       element.removeAttribute("data-hide-scrollbar");
       (element.style as any).scrollbarWidth = "";
@@ -107,7 +105,9 @@ export function useWebElementScrollbar(
 
   if (!enabled) return null;
 
-  return <WebDesktopScrollbarOverlay enabled metrics={metrics} onScrollToOffset={onScrollToOffset} />;
+  return (
+    <WebDesktopScrollbarOverlay enabled metrics={metrics} onScrollToOffset={onScrollToOffset} />
+  );
 }
 
 // ── RN ScrollView / FlatList scrollbar ───────────────────────────────

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

@@ -2,24 +2,22 @@ import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { Pressable, Text, View, Platform, ScrollView } from "react-native";
 import { useRouter } from "expo-router";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { QrCode, Link2, ClipboardPaste } from "lucide-react-native";
+import { QrCode, Link2, ClipboardPaste, ExternalLink } from "lucide-react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 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";
 import { PaseoLogo } from "@/components/icons/paseo-logo";
+import { openExternalUrl } from "@/utils/open-external-url";
 
 type WelcomeAction = {
   key: "scan-qr" | "direct-connection" | "paste-pairing-link";
@@ -118,6 +116,25 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.destructive,
     fontSize: theme.fontSize.sm,
   },
+  setupHint: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+    textAlign: "center",
+    marginBottom: theme.spacing[6],
+    lineHeight: theme.fontSize.sm * 1.5,
+  },
+  setupLink: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    marginBottom: theme.spacing[6],
+  },
+  setupLinkText: {
+    color: theme.colors.accent,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+  },
   versionLabel: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
@@ -217,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],
   );
@@ -326,6 +321,18 @@ export function WelcomeScreen({ onHostAdded }: WelcomeScreenProps) {
           {showHostList ? "Connecting to your hosts…" : "Connect to your host to start"}
         </Text>
 
+        {!showHostList && Platform.OS !== "web" && (
+          <>
+            <Text style={styles.setupHint}>
+              You need the Paseo desktop app or server running on your computer first.
+            </Text>
+            <Pressable style={styles.setupLink} onPress={() => openExternalUrl("https://paseo.sh")}>
+              <Text style={styles.setupLinkText}>Get started at paseo.sh</Text>
+              <ExternalLink size={14} color={theme.colors.accent} />
+            </Pressable>
+          </>
+        )}
+
         <View style={styles.actions}>
           {actions.map((action) => {
             const Icon = action.icon;
@@ -361,13 +368,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);
         }}
       />
@@ -375,38 +377,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,
@@ -18,6 +18,8 @@ interface ExplorerSidebarAnimationContextValue {
   animateToOpen: () => void;
   animateToClose: () => void;
   isGesturing: SharedValue<boolean>;
+  gestureAnimatingRef: React.MutableRefObject<boolean>;
+  openGestureRef: React.MutableRefObject<GestureType | undefined>;
   closeGestureRef: React.MutableRefObject<GestureType | undefined>;
 }
 
@@ -27,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);
 
@@ -39,6 +41,8 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
   const translateX = useSharedValue(initialTargets.translateX);
   const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
+  const gestureAnimatingRef = useRef(false);
+  const openGestureRef = useRef<GestureType | undefined>(undefined);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
@@ -61,6 +65,11 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
       return;
     }
 
+    if (gestureAnimatingRef.current) {
+      gestureAnimatingRef.current = false;
+      return;
+    }
+
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
       return;
@@ -82,13 +91,7 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
 
     translateX.value = targets.translateX;
     backdropOpacity.value = targets.backdropOpacity;
-  }, [
-    isOpen,
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    isGesturing,
-  ]);
+  }, [isOpen, translateX, backdropOpacity, windowWidth, isGesturing]);
 
   const animateToOpen = () => {
     "worklet";
@@ -123,6 +126,8 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
         animateToOpen,
         animateToClose,
         isGesturing,
+        gestureAnimatingRef,
+        openGestureRef,
         closeGestureRef,
       }}
     >

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

@@ -5,6 +5,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useClientActivity } from "@/hooks/use-client-activity";
 import { usePushTokenRegistration } from "@/hooks/use-push-token-registration";
 import { clearArchiveAgentPending } from "@/hooks/use-archive-agent";
+import { prefetchProvidersSnapshot } from "@/hooks/use-providers-snapshot";
 import { generateMessageId, type StreamItem } from "@/types/stream";
 import {
   processTimelineResponse,
@@ -32,6 +33,7 @@ import {
   type Agent,
   type SessionState,
   type WorkspaceDescriptor,
+  mergeWorkspaceSnapshotWithExisting,
   normalizeWorkspaceDescriptor,
 } from "@/stores/session-store";
 import { useDraftStore } from "@/stores/draft-store";
@@ -67,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 {
@@ -309,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;
 
@@ -324,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) {
@@ -349,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);
@@ -603,6 +637,34 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     updateSessionClient(serverId, client);
   }, [serverId, client, updateSessionClient]);
 
+  useEffect(() => {
+    const serverInfo = client.getLastServerInfoMessage();
+    if (!serverInfo) {
+      return;
+    }
+
+    updateSessionServerInfo(serverId, {
+      serverId: serverInfo.serverId,
+      hostname: serverInfo.hostname,
+      version: serverInfo.version,
+      ...(serverInfo.capabilities ? { capabilities: serverInfo.capabilities } : {}),
+      ...(serverInfo.features ? { features: serverInfo.features } : {}),
+    });
+  }, [client, serverId, updateSessionServerInfo]);
+
+  useEffect(() => {
+    if (!isConnected) {
+      return;
+    }
+
+    const serverInfo = client.getLastServerInfoMessage();
+    if (!serverInfo?.features?.providersSnapshot) {
+      return;
+    }
+
+    prefetchProvidersSnapshot(serverId, client);
+  }, [client, isConnected, serverId]);
+
   useEffect(() => {
     if (!voiceRuntime) {
       return;
@@ -1105,6 +1167,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           hostname: serverInfo.hostname,
           version: serverInfo.version,
           ...(serverInfo.capabilities ? { capabilities: serverInfo.capabilities } : {}),
+          ...(serverInfo.features ? { features: serverInfo.features } : {}),
         });
         return;
       }

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,
@@ -27,6 +27,8 @@ interface SidebarAnimationContextValue {
   animateToOpen: () => void;
   animateToClose: () => void;
   isGesturing: SharedValue<boolean>;
+  gestureAnimatingRef: React.MutableRefObject<boolean>;
+  openGestureRef: React.MutableRefObject<GestureType | undefined>;
   closeGestureRef: React.MutableRefObject<GestureType | undefined>;
 }
 
@@ -34,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);
 
@@ -46,6 +48,8 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
   const translateX = useSharedValue(initialTargets.translateX);
   const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
+  const gestureAnimatingRef = useRef(false);
+  const openGestureRef = useRef<GestureType | undefined>(undefined);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
@@ -68,6 +72,14 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       return;
     }
 
+    // Gesture onEnd already started the animation on the UI thread — skip to avoid
+    // a second competing withTiming that can desync translateX and backdropOpacity
+    // after a provider remount (e.g. theme change).
+    if (gestureAnimatingRef.current) {
+      gestureAnimatingRef.current = false;
+      return;
+    }
+
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
       return;
@@ -123,6 +135,8 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToOpen,
       animateToClose,
       isGesturing,
+      gestureAnimatingRef,
+      openGestureRef,
       closeGestureRef,
     }),
     [
@@ -132,6 +146,8 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
       animateToOpen,
       animateToClose,
       isGesturing,
+      gestureAnimatingRef,
+      openGestureRef,
       closeGestureRef,
     ],
   );

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

@@ -1,40 +1,23 @@
-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 {
-  ArrowUpRight,
-  Play,
-  Pause,
-  RotateCw,
-  Terminal,
-  Copy,
-  FileText,
-  Smartphone,
-} from "lucide-react-native";
+import { ArrowUpRight, Play, Pause, RotateCw, Copy, FileText, Activity } from "lucide-react-native";
 import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
 import { Button } from "@/components/ui/button";
 import { useAppSettings } from "@/hooks/use-settings";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { openExternalUrl } from "@/utils/open-external-url";
-import { getLocalDaemonVersion, isVersionMismatch } from "@/desktop/updates/desktop-updates";
+import { isVersionMismatch } from "@/desktop/updates/desktop-updates";
 import {
-  getCliSymlinkInstructions,
-  getDesktopDaemonLogs,
-  getDesktopDaemonPairing,
-  getDesktopDaemonStatus,
+  getCliDaemonStatus,
   restartDesktopDaemon,
   shouldUseDesktopDaemon,
   startDesktopDaemon,
   stopDesktopDaemon,
-  type CliSymlinkInstructions,
-  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;
@@ -45,50 +28,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 [isLoadingCliSymlinkInstructions, setIsLoadingCliSymlinkInstructions] = useState(false);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
-  const [cliStatusMessage, setCliStatusMessage] = useState<string | null>(null);
-  const [daemonLogs, setDaemonLogs] = useState<DesktopDaemonLogs | null>(null);
   const [isLogsModalOpen, setIsLogsModalOpen] = useState(false);
-  const [isPairingModalOpen, setIsPairingModalOpen] = useState(false);
-  const [isCliSymlinkModalOpen, setIsCliSymlinkModalOpen] = useState(false);
-  const [isLoadingPairing, setIsLoadingPairing] = useState(false);
-  const [pairingOffer, setPairingOffer] = useState<DesktopPairingOffer | null>(null);
-  const [cliSymlinkInstructions, setCliSymlinkInstructions] =
-    useState<CliSymlinkInstructions | 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(), getLocalDaemonVersion()])
-      .then(([status, logs, version]) => {
-        setDaemonStatus(status);
-        setDaemonLogs(logs);
-        setDaemonVersion(version.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 =
@@ -127,12 +78,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);
@@ -147,7 +98,14 @@ 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) {
@@ -193,9 +151,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) => {
@@ -213,45 +176,12 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
   }, [
     daemonStatus,
     isUpdatingDaemonManagement,
-    loadDaemonData,
+    refetch,
+    setStatus,
     settings.manageBuiltInDaemon,
     updateSettings,
   ]);
 
-  const handleOpenCliSymlinkInstructions = useCallback(() => {
-    if (!showSection || isLoadingCliSymlinkInstructions) {
-      return;
-    }
-    setIsLoadingCliSymlinkInstructions(true);
-    setCliStatusMessage(null);
-    void getCliSymlinkInstructions()
-      .then((instructions) => {
-        setCliSymlinkInstructions(instructions);
-        setIsCliSymlinkModalOpen(true);
-      })
-      .catch((error) => {
-        const message = error instanceof Error ? error.message : String(error);
-        setCliStatusMessage(`Unable to load CLI symlink instructions: ${message}`);
-      })
-      .finally(() => {
-        setIsLoadingCliSymlinkInstructions(false);
-      });
-  }, [isLoadingCliSymlinkInstructions, showSection]);
-
-  const handleCopyCliSymlinkCommands = useCallback(() => {
-    if (!cliSymlinkInstructions?.commands) {
-      return;
-    }
-    void Clipboard.setStringAsync(cliSymlinkInstructions.commands)
-      .then(() => {
-        Alert.alert("Copied", "CLI symlink commands copied.");
-      })
-      .catch((error) => {
-        console.error("[Settings] Failed to copy CLI symlink commands", error);
-        Alert.alert("Error", "Unable to copy CLI symlink commands.");
-      });
-  }, [cliSymlinkInstructions?.commands]);
-
   const handleCopyLogPath = useCallback(() => {
     const logPath = daemonLogs?.logPath;
     if (!logPath) {
@@ -275,45 +205,32 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
     setIsLogsModalOpen(true);
   }, [daemonLogs]);
 
-  const handleOpenPairingModal = useCallback(() => {
-    if (isLoadingPairing) {
+  const handleOpenCliStatus = useCallback(async () => {
+    setIsLoadingCliStatus(true);
+    try {
+      setCliStatusOutput(await getCliDaemonStatus());
+      setIsCliStatusModalOpen(true);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setCliStatusOutput(`Failed to fetch daemon status: ${message}`);
+      setIsCliStatusModalOpen(true);
+    } finally {
+      setIsLoadingCliStatus(false);
+    }
+  }, []);
+
+  const handleCopyCliStatus = useCallback(() => {
+    if (!cliStatusOutput) {
       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)
+    void Clipboard.setStringAsync(cliStatusOutput)
       .then(() => {
-        Alert.alert("Copied", "Pairing link copied.");
+        Alert.alert("Copied", "Status copied to clipboard.");
       })
       .catch((error) => {
-        console.error("[Settings] Failed to copy pairing link", error);
-        Alert.alert("Error", "Unable to copy pairing link.");
+        console.error("[Settings] Failed to copy daemon status", error);
       });
-  }, [pairingOffer?.url]);
+  }, [cliStatusOutput]);
 
   if (!showSection) {
     return null;
@@ -321,194 +238,152 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
 
   return (
     <View style={settingsStyles.section}>
-      <View style={styles.sectionHeader}>
-        <Text style={settingsStyles.sectionTitle}>Built-in daemon</Text>
+      <View style={settingsStyles.sectionHeader}>
+        <Text style={settingsStyles.sectionHeaderTitle}>Built-in daemon</Text>
         <Button
           variant="ghost"
           size="sm"
           leftIcon={<ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
-          textStyle={styles.sectionLinkText}
-          style={styles.sectionLink}
+          textStyle={settingsStyles.sectionHeaderLinkText}
+          style={settingsStyles.sectionHeaderLink}
           onPress={() => void openExternalUrl(ADVANCED_DAEMON_SETTINGS_URL)}
           accessibilityLabel="Open advanced daemon settings"
         >
           Advanced settings
         </Button>
       </View>
-      <View style={settingsStyles.card}>
-        <View style={styles.row}>
-          <View style={styles.rowContent}>
-            <Text style={styles.rowTitle}>Status</Text>
-            <Text style={styles.hintText}>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={[styles.row, styles.rowBorder]}>
-              <View style={styles.rowContent}>
-                <Text style={styles.rowTitle}>Daemon management</Text>
-                <Text style={styles.hintText}>
-                  {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."}
+      ) : (
+        <>
+          <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}>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}>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={[styles.row, styles.rowBorder]}>
-              <View style={styles.rowContent}>
-                <Text style={styles.rowTitle}>{daemonActionLabel}</Text>
-                <Text style={styles.hintText}>{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={[styles.row, styles.rowBorder]}>
-          <View style={styles.rowContent}>
-            <Text style={styles.rowTitle}>Command line (CLI)</Text>
-            <Text style={styles.hintText}>Shows the command to add `paseo` to your terminal.</Text>
-            {cliStatusMessage ? <Text style={styles.statusText}>{cliStatusMessage}</Text> : null}
-          </View>
-          <Button
-            variant="outline"
-            size="sm"
-            leftIcon={<Terminal size={theme.iconSize.sm} color={theme.colors.foreground} />}
-            onPress={handleOpenCliSymlinkInstructions}
-            disabled={isLoadingCliSymlinkInstructions}
-          >
-            {isLoadingCliSymlinkInstructions ? "Loading..." : "Show instructions"}
-          </Button>
-        </View>
-        <View style={[styles.row, styles.rowBorder]}>
-          <View style={styles.rowContent}>
-            <Text style={styles.rowTitle}>Log file</Text>
-            <Text style={styles.hintText}>{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={[styles.row, styles.rowBorder]}>
-          <View style={styles.rowContent}>
-            <Text style={styles.rowTitle}>Pair device</Text>
-            <Text style={styles.hintText}>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>
-
-      {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={isCliSymlinkModalOpen}
-        onClose={() => setIsCliSymlinkModalOpen(false)}
-        title="Add paseo to your shell"
-        testID="managed-daemon-cli-symlink-dialog"
-      >
-        <View style={styles.modalBody}>
-          <Text style={styles.hintText}>
-            Paseo does not add the command for you. Run the command below in your terminal.
-          </Text>
-          {cliSymlinkInstructions?.detail ? (
-            <Text style={styles.hintText}>{cliSymlinkInstructions.detail}</Text>
           ) : null}
-          <Text style={styles.codeBlock} selectable>
-            {cliSymlinkInstructions?.commands ?? ""}
-          </Text>
-          <View style={styles.modalActions}>
-            <Button variant="outline" size="sm" onPress={() => setIsCliSymlinkModalOpen(false)}>
-              Close
-            </Button>
-            <Button size="sm" onPress={handleCopyCliSymlinkCommands}>
-              Copy commands
-            </Button>
-          </View>
-        </View>
-      </AdaptiveModalSheet>
-
-      <AdaptiveModalSheet
-        visible={isPairingModalOpen}
-        onClose={() => setIsPairingModalOpen(false)}
-        title="Pair device"
-        testID="managed-daemon-pairing-dialog"
-      >
-        <PairingOfferDialogContent
-          isLoading={isLoadingPairing}
-          pairingOffer={pairingOffer}
-          statusMessage={pairingStatusMessage}
-          onCopyLink={handleCopyPairingLink}
-        />
-      </AdaptiveModalSheet>
+        </>
+      )}
 
       <AdaptiveModalSheet
         visible={isLogsModalOpen}
@@ -518,165 +393,58 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
         snapPoints={["70%", "92%"]}
       >
         <View style={styles.modalBody}>
-          <Text style={styles.hintText}>{daemonLogs?.logPath ?? "Log path unavailable."}</Text>
+          <Text style={settingsStyles.rowHint}>
+            {daemonLogs?.logPath ?? "Log path unavailable."}
+          </Text>
           <Text style={styles.logOutput} selectable>
             {daemonLogs?.contents.length ? daemonLogs.contents : "(log file is empty)"}
           </Text>
         </View>
       </AdaptiveModalSheet>
+
+      <AdaptiveModalSheet
+        visible={isCliStatusModalOpen}
+        onClose={() => setIsCliStatusModalOpen(false)}
+        title="Daemon status"
+        testID="daemon-cli-status-dialog"
+        snapPoints={["60%", "85%"]}
+      >
+        <View style={styles.modalBody}>
+          <Text style={styles.logOutput} selectable>
+            {cliStatusOutput ?? ""}
+          </Text>
+          <View style={styles.modalActions}>
+            <Button variant="outline" size="sm" onPress={() => setIsCliStatusModalOpen(false)}>
+              Close
+            </Button>
+            <Button size="sm" onPress={handleCopyCliStatus}>
+              Copy
+            </Button>
+          </View>
+        </View>
+      </AdaptiveModalSheet>
     </View>
   );
 }
 
 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={styles.hintText}>Loading pairing offer…</Text>
-      </View>
-    );
-  }
-
-  if (statusMessage) {
-    return (
-      <View style={styles.modalBody}>
-        <Text style={styles.hintText}>{statusMessage}</Text>
-      </View>
-    );
-  }
-
-  if (!pairingOffer?.url) {
-    return (
-      <View style={styles.modalBody}>
-        <Text style={styles.hintText}>Pairing offer unavailable.</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.modalBody}>
-      <Text style={styles.hintText}>
-        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={styles.hintText}>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) => ({
-  sectionHeader: {
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginBottom: theme.spacing[3],
-    marginLeft: theme.spacing[1],
-  },
-  sectionLink: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: theme.spacing[1],
-  },
-  sectionLinkText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: theme.spacing[4],
-    paddingHorizontal: theme.spacing[4],
-  },
-  rowBorder: {
-    borderTopWidth: 1,
-    borderTopColor: theme.colors.border,
-  },
-  rowContent: {
-    flex: 1,
-    marginRight: theme.spacing[3],
-  },
   actionGroup: {
     flexDirection: "row",
     gap: theme.spacing[2],
     flexWrap: "wrap",
     justifyContent: "flex-end",
   },
+  loadingCard: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.spacing[6],
+  },
   statusValueGroup: {
     alignItems: "flex-end",
     gap: 2,
   },
-  rowTitle: {
-    color: theme.colors.foreground,
-    fontSize: theme.fontSize.base,
-  },
   valueText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.sm,
@@ -686,11 +454,6 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
   },
-  hintText: {
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.xs,
-    marginTop: 2,
-  },
   statusText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
@@ -713,40 +476,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/integrations-section.tsx

@@ -0,0 +1,193 @@
+import { useCallback, useState } from "react";
+import { Text, View } from "react-native";
+import { useFocusEffect } from "@react-navigation/native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { ArrowUpRight, Terminal, Blocks, Check } from "lucide-react-native";
+import { settingsStyles } from "@/styles/settings";
+import { Button } from "@/components/ui/button";
+import { openExternalUrl } from "@/utils/open-external-url";
+import {
+  shouldUseDesktopDaemon,
+  getCliInstallStatus,
+  installCli,
+  getSkillsInstallStatus,
+  installSkills,
+  type InstallStatus,
+} from "@/desktop/daemon/desktop-daemon";
+
+const CLI_DOCS_URL = "https://paseo.sh/docs/cli";
+const SKILLS_DOCS_URL = "https://paseo.sh/docs/skills";
+
+export function IntegrationsSection() {
+  const { theme } = useUnistyles();
+  const showSection = shouldUseDesktopDaemon();
+
+  const [cliStatus, setCliStatus] = useState<InstallStatus | null>(null);
+  const [skillsStatus, setSkillsStatus] = useState<InstallStatus | null>(null);
+  const [isInstallingCli, setIsInstallingCli] = useState(false);
+  const [isInstallingSkills, setIsInstallingSkills] = useState(false);
+
+  const loadStatus = useCallback(() => {
+    if (!showSection) return;
+    void getCliInstallStatus()
+      .then(setCliStatus)
+      .catch((error) => {
+        console.error("[Integrations] Failed to load CLI status", error);
+      });
+    void getSkillsInstallStatus()
+      .then(setSkillsStatus)
+      .catch((error) => {
+        console.error("[Integrations] Failed to load skills status", error);
+      });
+  }, [showSection]);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (!showSection) return undefined;
+      loadStatus();
+      return undefined;
+    }, [loadStatus, showSection]),
+  );
+
+  const handleInstallCli = useCallback(() => {
+    if (isInstallingCli) return;
+    setIsInstallingCli(true);
+    void installCli()
+      .then(setCliStatus)
+      .catch((error) => {
+        console.error("[Integrations] Failed to install CLI", error);
+      })
+      .finally(() => {
+        setIsInstallingCli(false);
+      });
+  }, [isInstallingCli]);
+
+  const handleInstallSkills = useCallback(() => {
+    if (isInstallingSkills) return;
+    setIsInstallingSkills(true);
+    void installSkills()
+      .then(setSkillsStatus)
+      .catch((error) => {
+        console.error("[Integrations] Failed to install skills", error);
+      })
+      .finally(() => {
+        setIsInstallingSkills(false);
+      });
+  }, [isInstallingSkills]);
+
+  if (!showSection) {
+    return null;
+  }
+
+  return (
+    <View style={settingsStyles.section}>
+      <View style={settingsStyles.sectionHeader}>
+        <Text style={settingsStyles.sectionHeaderTitle}>Integrations</Text>
+        <View style={styles.headerLinks}>
+          <Button
+            variant="ghost"
+            size="sm"
+            leftIcon={
+              <ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+            }
+            textStyle={settingsStyles.sectionHeaderLinkText}
+            style={settingsStyles.sectionHeaderLink}
+            onPress={() => void openExternalUrl(CLI_DOCS_URL)}
+            accessibilityLabel="Open CLI documentation"
+          >
+            CLI docs
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            leftIcon={
+              <ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+            }
+            textStyle={settingsStyles.sectionHeaderLinkText}
+            style={settingsStyles.sectionHeaderLink}
+            onPress={() => void openExternalUrl(SKILLS_DOCS_URL)}
+            accessibilityLabel="Open skills documentation"
+          >
+            Skills docs
+          </Button>
+        </View>
+      </View>
+      <View style={settingsStyles.card}>
+        <View style={settingsStyles.row}>
+          <View style={settingsStyles.rowContent}>
+            <View style={styles.rowTitleRow}>
+              <Terminal size={theme.iconSize.md} color={theme.colors.foreground} />
+              <Text style={settingsStyles.rowTitle}>Command line</Text>
+            </View>
+            <Text style={settingsStyles.rowHint}>
+              Control and script agents from your terminal.
+            </Text>
+          </View>
+          {cliStatus?.installed ? (
+            <View style={styles.installedLabel}>
+              <Check size={14} color={theme.colors.foregroundMuted} />
+              <Text style={styles.mutedText}>Installed</Text>
+            </View>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              onPress={handleInstallCli}
+              disabled={isInstallingCli}
+            >
+              {isInstallingCli ? "Installing..." : "Install"}
+            </Button>
+          )}
+        </View>
+        <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
+          <View style={settingsStyles.rowContent}>
+            <View style={styles.rowTitleRow}>
+              <Blocks size={theme.iconSize.md} color={theme.colors.foreground} />
+              <Text style={settingsStyles.rowTitle}>Orchestration skills</Text>
+            </View>
+            <Text style={settingsStyles.rowHint}>
+              Teach your agents to orchestrate through the CLI.
+            </Text>
+          </View>
+          {skillsStatus?.installed ? (
+            <View style={styles.installedLabel}>
+              <Check size={14} color={theme.colors.foregroundMuted} />
+              <Text style={styles.mutedText}>Installed</Text>
+            </View>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              onPress={handleInstallSkills}
+              disabled={isInstallingSkills}
+            >
+              {isInstallingSkills ? "Installing..." : "Install"}
+            </Button>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  headerLinks: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[0],
+  },
+  rowTitleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  installedLabel: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  mutedText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+}));