chore(release): cut 0.1.47

Same fix as the Silero VAD — sherpa-onnx returns Float32Arrays backed
by native memory which Node.js rejects as "External buffers are not
allowed". Copy into JS-managed memory before passing to audio pipeline.

.github/workflows/desktop-release.yml

@@ -130,6 +130,11 @@ jobs:
     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 tag
         shell: bash
         run: node scripts/emit-release-env.mjs --source-tag "$SOURCE_TAG" >> "$GITHUB_ENV"

CHANGELOG.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## 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
+- Desktop app now stops the daemon cleanly before auto-update restarts.
+- Disabled claude-acp and copilot providers from the agent registry.
+- Keyboard focus scope resolution now checks multiple candidates for broader compatibility.
+- OpenCode interrupt now reaches correct terminal state parity with tool-call flows.
+- Shell injection, symlink escape, and pairing endpoint security hardening.
+
+## 0.1.43 - 2026-04-02
+
+### Added
+- Copilot agent support via ACP base provider — connect GitHub Copilot as a new agent type.
+- Searchable model favorites — quickly find and pin preferred models.
+- Slash command support for OpenCode agents.
+
+### Improved
+- Refined model selector UX with better mobile sheet behavior.
+- Workspace status now uses amber alert styling for "needs input" state.
+- Themed scrollbar on message input for consistent styling.
+
+### Fixed
+- Ctrl+C/V copy and paste now works correctly in the terminal on Windows and Linux.
+- Shell arguments with spaces are now properly quoted on Windows.
+- Claude models with 1M context support are now correctly reported.
+
+## 0.1.42 - 2026-04-01
+
+### Fixed
+- Fixed Claude Code failing to launch on Windows when installed to a path with spaces (e.g. `C:\Program Files\...`).
+
 ## 0.1.41 - 2026-04-01
 
 ### Fixed

CLAUDE.md

@@ -45,6 +45,12 @@ See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requir
 - **NEVER assume a timeout means the service needs restarting** — timeouts can be transient.
 - **NEVER add auth checks to tests** — agent providers handle their own auth.
 - **Always run typecheck after every change.**
+- **NEVER make breaking changes to WebSocket or message schemas.** The mobile app in the App Store always lags behind the daemon, and daemons in the wild lag behind new app releases. Both directions must work. Every schema change MUST be backward-compatible:
+  - 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
 

SECURITY.md

@@ -22,7 +22,7 @@ The relay is designed to be untrusted. All traffic between your phone and daemon
 1. The daemon generates a persistent ECDH keypair and stores it locally
 2. When you scan the QR code or click the pairing link, your phone receives the daemon's public key
 3. Your phone sends a handshake message with its own public key. The daemon will not accept any commands until this handshake completes.
-4. Both sides perform an ECDH key exchange to derive a shared secret. All subsequent messages are encrypted with AES-256-GCM.
+4. Both sides perform an ECDH key exchange to derive a shared secret. All subsequent messages are encrypted with XSalsa20-Poly1305 (NaCl box).
 
 The relay sees only: IP addresses, timing, message sizes, and session IDs. It cannot read message contents, forge messages, or derive encryption keys from observing the handshake.
 
@@ -31,14 +31,26 @@ The relay sees only: IP addresses, timing, message sizes, and session IDs. It ca
 The daemon requires a valid cryptographic handshake before processing any commands. A compromised relay cannot:
 
 - **Send commands** — Without your phone's private key, it cannot complete the handshake
-- **Read your traffic** — All messages are encrypted with AES-256-GCM after the handshake
-- **Forge messages** — GCM provides authenticated encryption; tampered messages are rejected
-- **Replay old messages** — Each session derives fresh encryption keys
+- **Read your traffic** — All messages are encrypted with XSalsa20-Poly1305 (NaCl box) after the handshake
+- **Forge messages** — NaCl box provides authenticated encryption; tampered messages are rejected
+- **Replay old messages across sessions** — Each session derives fresh encryption keys, so ciphertext from one session cannot be replayed into another session. Within a live session, replay protection is not yet implemented; the protocol uses random nonces and does not track nonce reuse or message counters.
 
 ### Trust model
 
 The QR code or pairing link is the trust anchor. It contains the daemon's public key, which is required to establish the encrypted connection. Treat it like a password — don't share it publicly.
 
+## Local daemon trust boundary
+
+By default, the daemon binds to `127.0.0.1`. The local control plane is trusted by network reachability, not by an additional authentication token.
+
+Anything that can reach the daemon socket can control the daemon. This is the same security model Docker documents for its daemon: the security boundary is access to the socket or listening address.
+
+If you expose the daemon beyond loopback, such as by binding to `0.0.0.0`, forwarding it through a tunnel or reverse proxy, or publishing it from a Docker container, you are responsible for restricting and securing that access.
+
+For remote access, use the relay connection. It is the supported path for reaching the daemon off-machine, and it adds end-to-end encryption plus a pairing handshake before commands are accepted.
+
+Host header validation and CORS origin checks are defense-in-depth controls for localhost exposure. They help block DNS rebinding and browser-based attacks, but they do not replace network isolation.
+
 ## DNS rebinding protection
 
 CORS is not a complete security boundary. It controls which browser origins can make requests, but does not prevent a malicious website from resolving its domain to your local machine (DNS rebinding).

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

@@ -0,0 +1,359 @@
+# Adding a New Provider to Paseo
+
+This guide walks through adding a new agent provider end-to-end. There are two integration patterns, and this doc covers both.
+
+## Two Integration Patterns
+
+### ACP (Agent Client Protocol) -- recommended
+
+Extend `ACPAgentClient`. The base class handles process spawning, stdio transport, session lifecycle, streaming, permissions, and model discovery. You provide configuration (command, modes, capabilities) and optionally override `isAvailable()` for auth checks.
+
+Existing ACP providers: `claude-acp`, `copilot`.
+
+### Direct
+
+Implement the `AgentClient` and `AgentSession` interfaces yourself. This gives full control but requires you to handle process management, streaming, permissions, and session persistence from scratch.
+
+Existing direct providers: `claude`, `codex`, `opencode`.
+
+---
+
+## ACP Provider Checklist
+
+### 1. Create the provider class
+
+Create `packages/server/src/server/agent/providers/{name}-agent.ts`.
+
+Define capabilities, modes, and a thin subclass of `ACPAgentClient`:
+
+```ts
+import type { Logger } from "pino";
+import type { AgentCapabilityFlags, AgentMode } from "../agent-sdk-types.js";
+import type { ProviderRuntimeSettings } from "../provider-launch-config.js";
+import { ACPAgentClient } from "./acp-agent.js";
+
+const MY_PROVIDER_CAPABILITIES: AgentCapabilityFlags = {
+  supportsStreaming: true,
+  supportsSessionPersistence: true,
+  supportsDynamicModes: true,
+  supportsMcpServers: true,
+  supportsReasoningStream: true,
+  supportsToolInvocations: true,
+};
+
+const MY_PROVIDER_MODES: AgentMode[] = [
+  {
+    id: "default",
+    label: "Default",
+    description: "Standard agent mode",
+  },
+  // Add more modes as needed
+];
+
+type MyProviderClientOptions = {
+  logger: Logger;
+  runtimeSettings?: ProviderRuntimeSettings;
+};
+
+export class MyProviderACPAgentClient extends ACPAgentClient {
+  constructor(options: MyProviderClientOptions) {
+    super({
+      provider: "my-provider",        // Must match the ID used everywhere else
+      logger: options.logger,
+      runtimeSettings: options.runtimeSettings,
+      defaultCommand: ["my-agent-binary", "--acp"],  // CLI command to spawn
+      defaultModes: MY_PROVIDER_MODES,
+      capabilities: MY_PROVIDER_CAPABILITIES,
+    });
+  }
+
+  // Override isAvailable() if the provider needs specific auth/env vars
+  override async isAvailable(): Promise<boolean> {
+    if (!(await super.isAvailable())) {
+      return false;  // Binary not found
+    }
+    return Boolean(process.env["MY_PROVIDER_API_KEY"]);
+  }
+}
+```
+
+The `super.isAvailable()` call checks that the binary from `defaultCommand` is on `$PATH`. Override only to add credential checks on top.
+
+For reference, here is how Copilot does it -- no auth override needed because the CLI handles auth itself:
+
+```ts
+export class CopilotACPAgentClient extends ACPAgentClient {
+  constructor(options: CopilotACPAgentClientOptions) {
+    super({
+      provider: "copilot",
+      logger: options.logger,
+      runtimeSettings: options.runtimeSettings,
+      defaultCommand: ["copilot", "--acp"],
+      defaultModes: COPILOT_MODES,
+      capabilities: COPILOT_CAPABILITIES,
+    });
+  }
+
+  override async isAvailable(): Promise<boolean> {
+    return super.isAvailable();
+  }
+}
+```
+
+### 2. Add to the provider manifest
+
+In `packages/server/src/server/agent/provider-manifest.ts`, add mode definitions with UI metadata (icons, color tiers) and a provider definition entry.
+
+First, define the modes with visual metadata:
+
+```ts
+const MY_PROVIDER_MODES: AgentProviderModeDefinition[] = [
+  {
+    id: "default",
+    label: "Default",
+    description: "Standard agent mode",
+    icon: "ShieldCheck",
+    colorTier: "safe",
+  },
+  {
+    id: "autonomous",
+    label: "Autonomous",
+    description: "Runs without prompting",
+    icon: "ShieldOff",
+    colorTier: "dangerous",
+  },
+];
+```
+
+Available `colorTier` values: `"safe"`, `"moderate"`, `"dangerous"`, `"planning"`.
+Available `icon` values: `"ShieldCheck"`, `"ShieldAlert"`, `"ShieldOff"`.
+
+Then add to the `AGENT_PROVIDER_DEFINITIONS` array:
+
+```ts
+export const AGENT_PROVIDER_DEFINITIONS: AgentProviderDefinition[] = [
+  // ... existing providers ...
+  {
+    id: "my-provider",
+    label: "My Provider",
+    description: "Short description of the provider",
+    defaultModeId: "default",
+    modes: MY_PROVIDER_MODES,
+    // Optional: enable voice
+    voice: {
+      enabled: true,
+      defaultModeId: "default",
+      defaultModel: "some-model",
+    },
+  },
+];
+```
+
+### 3. Add the factory to the provider registry
+
+In `packages/server/src/server/agent/provider-registry.ts`, import your class and add a factory entry:
+
+```ts
+import { MyProviderACPAgentClient } from "./providers/my-provider-agent.js";
+
+const PROVIDER_CLIENT_FACTORIES: Record<string, ProviderClientFactory> = {
+  // ... existing factories ...
+  "my-provider": (logger, runtimeSettings) =>
+    new MyProviderACPAgentClient({
+      logger,
+      runtimeSettings: runtimeSettings?.["my-provider"],
+    }),
+};
+```
+
+### 4. Add a provider icon (app)
+
+Create `packages/app/src/components/icons/my-provider-icon.tsx` following the pattern from existing icons (e.g., `claude-icon.tsx`):
+
+```tsx
+import Svg, { Path } from "react-native-svg";
+
+interface MyProviderIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function MyProviderIcon({ size = 16, color = "currentColor" }: MyProviderIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path d="..." />
+    </Svg>
+  );
+}
+```
+
+Then register it in `packages/app/src/components/provider-icons.ts`:
+
+```ts
+import { MyProviderIcon } from "@/components/icons/my-provider-icon";
+
+const PROVIDER_ICONS: Record<string, typeof Bot> = {
+  claude: ClaudeIcon as unknown as typeof Bot,
+  codex: CodexIcon as unknown as typeof Bot,
+  "my-provider": MyProviderIcon as unknown as typeof Bot,
+};
+```
+
+If no icon is registered, the app falls back to a generic `Bot` icon from lucide.
+
+### 5. Add E2E test config
+
+In `packages/server/src/server/daemon-e2e/agent-configs.ts`, add your provider:
+
+```ts
+export const agentConfigs = {
+  // ... existing configs ...
+  "my-provider": {
+    provider: "my-provider",
+    model: "default-model-id",
+    modes: {
+      full: "autonomous",   // Mode with no permission prompts
+      ask: "default",       // Mode that requires permission approval
+    },
+  },
+} as const satisfies Record<string, AgentTestConfig>;
+```
+
+Add an availability check in `isProviderAvailable()`:
+
+```ts
+case "my-provider":
+  return (
+    isCommandAvailable("my-agent-binary") &&
+    Boolean(process.env.MY_PROVIDER_API_KEY)
+  );
+```
+
+Add to the `allProviders` array:
+
+```ts
+export const allProviders: AgentProvider[] = [
+  "claude",
+  "claude-acp",
+  "codex",
+  "copilot",
+  "opencode",
+  "my-provider",
+];
+```
+
+### 6. Run typecheck
+
+```bash
+npm run typecheck
+```
+
+This is required after every change per project rules.
+
+---
+
+## Direct Provider Checklist
+
+If your agent does not speak ACP, implement the interfaces from `agent-sdk-types.ts` directly.
+
+### Interfaces to implement
+
+**`AgentClient`** -- factory for sessions and model listing:
+
+```ts
+interface AgentClient {
+  readonly provider: AgentProvider;
+  readonly capabilities: AgentCapabilityFlags;
+  createSession(config: AgentSessionConfig, launchContext?: AgentLaunchContext): Promise<AgentSession>;
+  resumeSession(handle: AgentPersistenceHandle, overrides?: Partial<AgentSessionConfig>, launchContext?: AgentLaunchContext): Promise<AgentSession>;
+  listModels(options?: ListModelsOptions): Promise<AgentModelDefinition[]>;
+  isAvailable(): Promise<boolean>;
+  // Optional:
+  listPersistedAgents?(options?: ListPersistedAgentsOptions): Promise<PersistedAgentDescriptor[]>;
+}
+```
+
+**`AgentSession`** -- a running agent conversation:
+
+```ts
+interface AgentSession {
+  readonly provider: AgentProvider;
+  readonly id: string | null;
+  readonly capabilities: AgentCapabilityFlags;
+  run(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<AgentRunResult>;
+  startTurn(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<{ turnId: string }>;
+  subscribe(callback: (event: AgentStreamEvent) => void): () => void;
+  streamHistory(): AsyncGenerator<AgentStreamEvent>;
+  getRuntimeInfo(): Promise<AgentRuntimeInfo>;
+  getAvailableModes(): Promise<AgentMode[]>;
+  getCurrentMode(): Promise<string | null>;
+  setMode(modeId: string): Promise<void>;
+  getPendingPermissions(): AgentPermissionRequest[];
+  respondToPermission(requestId: string, response: AgentPermissionResponse): Promise<void>;
+  describePersistence(): AgentPersistenceHandle | null;
+  interrupt(): Promise<void>;
+  close(): Promise<void>;
+  // Optional:
+  listCommands?(): Promise<AgentSlashCommand[]>;
+  setModel?(modelId: string | null): Promise<void>;
+  setThinkingOption?(thinkingOptionId: string | null): Promise<void>;
+}
+```
+
+### Steps
+
+1. Create `packages/server/src/server/agent/providers/{name}-agent.ts` implementing both interfaces
+2. Add to the provider manifest (same as ACP step 2 above)
+3. Add factory to the registry (same as ACP step 3 above)
+4. Add icon (same as ACP step 4 above)
+5. Add E2E config (same as ACP step 5 above)
+6. Run typecheck
+
+---
+
+## Testing
+
+### Manual testing with the CLI
+
+Start the daemon if not already running, then:
+
+```bash
+# Launch an agent with your provider
+paseo run --provider my-provider
+
+# Launch with a specific model and mode
+paseo run --provider my-provider --model some-model --mode default
+
+# List running agents
+paseo ls -a -g
+
+# Check if the provider reports models
+paseo models --provider my-provider
+```
+
+### E2E test patterns
+
+The E2E configs in `agent-configs.ts` expose two helpers:
+
+- `getFullAccessConfig(provider)` -- returns config for a session with no permission prompts
+- `getAskModeConfig(provider)` -- returns config for a session that triggers permission requests
+
+Tests use `isProviderAvailable(provider)` to skip when the binary or credentials are missing, so CI will not fail for providers that are not installed.
+
+---
+
+## Gotchas
+
+**Mode IDs can be URIs.** ACP providers like Copilot use full URIs as mode IDs (e.g., `"https://agentclientprotocol.com/protocol/session-modes#agent"`). Never assume mode IDs are simple strings. The manifest `defaultModeId` must match exactly.
+
+**Models and modes are discovered dynamically.** ACP providers report available models and modes at runtime via the protocol. The static definitions in `provider-manifest.ts` are used for UI scaffolding (icons, color tiers) but the runtime values from the agent process are the source of truth.
+
+**`AgentProvider` is always `string`.** The type alias is `type AgentProvider = string`. Provider IDs are validated against the manifest at runtime, not at the type level.
+
+**Auth patterns vary.** Some providers need API keys in env vars (`ANTHROPIC_API_KEY`, `OPENAI_API_KEY`), some use OAuth tokens (`CLAUDE_CODE_OAUTH_TOKEN`), some use auth files (`~/.codex/auth.json`), and some handle auth entirely in their CLI binary (Copilot). Your `isAvailable()` method should check whatever is needed.
+
+**The manifest mode list and the agent class mode list are separate.** The manifest in `provider-manifest.ts` includes UI metadata (`icon`, `colorTier`). The agent class defines modes without UI metadata (just `id`, `label`, `description`). Keep them in sync.
+
+**`defaultCommand` is a tuple.** The first element is the binary name, the rest are default arguments. The base class uses this to find the executable and spawn the process.
+
+**Runtime settings can override the command.** Users can configure custom binary paths or environment variables per provider via `ProviderRuntimeSettings`. Your factory in the registry should pass `runtimeSettings?.["your-provider"]` through to the constructor.

docs/RELEASE.md

@@ -122,8 +122,34 @@ 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.
 
+## 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** — mobile apps lag behind desktop/daemon updates by days. Users will update desktop and daemon immediately but keep running the old app. Flag anything that requires both sides to update in lockstep.
+> 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
 - [ ] 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

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-WUTgYClIpHYsIrKjmlxvYxM6dS9jkYtAS0WLAH2nR/I=";
+  npmDepsHash = "sha256-8OTtv6FJq62fT5E6Ai4M/z21flDpIMtnpnkMGCHyJ9E=";
 
   # 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.41",
+  "version": "0.1.47",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "hasInstallScript": true,
       "license": "AGPL-3.0-or-later",
       "workspaces": [
@@ -48,6 +48,15 @@
         }
       }
     },
+    "node_modules/@agentclientprotocol/sdk": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@agentclientprotocol/sdk/-/sdk-0.17.1.tgz",
+      "integrity": "sha512-yjyIn8POL18IOXioLySYiL0G44kZ/IZctAls7vS3AC3X+qLhFXbWmzABSZehwRnWFShMXT+ODa/HJG1+mGXZ1A==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
     "node_modules/@ai-sdk/gateway": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.1.tgz",
@@ -3510,6 +3519,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
@@ -15425,6 +15441,24 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/cross-fetch": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.2.0.tgz",
@@ -28230,6 +28264,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",
@@ -34962,16 +35030,16 @@
     },
     "packages/app": {
       "name": "@getpaseo/app",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "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.41",
-        "@getpaseo/highlight": "0.1.41",
-        "@getpaseo/server": "0.1.41",
+        "@getpaseo/expo-two-way-audio": "0.1.47",
+        "@getpaseo/highlight": "0.1.47",
+        "@getpaseo/server": "0.1.47",
         "@gorhom/bottom-sheet": "^5.2.6",
         "@gorhom/portal": "^1.0.14",
         "@react-native-async-storage/async-storage": "2.2.0",
@@ -35088,11 +35156,11 @@
     },
     "packages/cli": {
       "name": "@getpaseo/cli",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/relay": "0.1.41",
-        "@getpaseo/server": "0.1.41",
+        "@getpaseo/relay": "0.1.47",
+        "@getpaseo/server": "0.1.47",
         "chalk": "^5.3.0",
         "commander": "^12.0.0",
         "mime-types": "^2.1.35",
@@ -35133,11 +35201,11 @@
     },
     "packages/desktop": {
       "name": "@getpaseo/desktop",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@getpaseo/cli": "0.1.41",
-        "@getpaseo/server": "0.1.41",
+        "@getpaseo/cli": "0.1.47",
+        "@getpaseo/server": "0.1.47",
         "electron-log": "^5.4.3",
         "electron-updater": "^6.6.2",
         "ws": "^8.14.2"
@@ -35171,7 +35239,7 @@
     },
     "packages/expo-two-way-audio": {
       "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "license": "MIT",
       "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -35372,7 +35440,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "dependencies": {
         "@lezer/common": "^1.5.0",
         "@lezer/cpp": "^1.1.5",
@@ -35398,7 +35466,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -35414,13 +35482,14 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "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.41",
-        "@getpaseo/relay": "0.1.41",
+        "@getpaseo/highlight": "0.1.47",
+        "@getpaseo/relay": "0.1.47",
         "@isaacs/ttlcache": "^2.1.4",
         "@modelcontextprotocol/sdk": "^1.20.1",
         "@opencode-ai/sdk": "1.2.6",
@@ -35436,6 +35505,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",
@@ -35458,6 +35528,7 @@
         "@types/uuid": "^9.0.7",
         "@types/ws": "^8.5.8",
         "@vitest/ui": "^3.2.4",
+        "cross-env": "^10.1.0",
         "playwright": "^1.56.1",
         "tsx": "^4.6.0",
         "typescript": "^5.2.2",
@@ -35818,7 +35889,7 @@
     },
     "packages/website": {
       "name": "@getpaseo/website",
-      "version": "0.1.41",
+      "version": "0.1.47",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.20.3",
         "@cloudflare/workers-types": "^4.20260114.0",

package.json

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

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.41",
+  "version": "0.1.47",
   "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.41",
-    "@getpaseo/highlight": "0.1.41",
-    "@getpaseo/server": "0.1.41",
+    "@getpaseo/expo-two-way-audio": "0.1.47",
+    "@getpaseo/highlight": "0.1.47",
+    "@getpaseo/server": "0.1.47",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.2.0",

packages/app/src/app/_layout.tsx

@@ -27,6 +27,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 {
@@ -67,6 +68,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 +232,7 @@ function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     let cancelled = false;
+    let cancelAnyOnline: (() => void) | null = null;
     const shouldManageDesktop = shouldUseDesktopDaemon();
     const store = getHostRuntimeStore();
 
@@ -240,28 +243,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 +316,7 @@ function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
 
     return () => {
       cancelled = true;
+      cancelAnyOnline?.();
     };
   }, [retryToken]);
 
@@ -393,14 +422,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 +486,7 @@ function MobileGestureWrapper({
           const shouldOpen = event.translationX > windowWidth / 3 || event.velocityX > 500;
           if (shouldOpen) {
             animateToOpen();
-            runOnJS(openAgentList)();
+            runOnJS(handleGestureOpen)();
           } else {
             animateToClose();
           }
@@ -458,8 +501,9 @@ function MobileGestureWrapper({
       backdropOpacity,
       animateToOpen,
       animateToClose,
-      openAgentList,
+      handleGestureOpen,
       isGesturing,
+      openGestureRef,
       horizontalScroll?.isAnyScrolledRight,
       touchStartX,
     ],
@@ -555,6 +599,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();
@@ -674,6 +796,7 @@ export default function RootLayout() {
                     <SidebarAnimationProvider>
                       <HorizontalScrollProvider>
                         <ToastProvider>
+                          <OpenProjectListener />
                           <AppWithSidebar>
                             <RootStack />
                           </AppWithSidebar>

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

@@ -3,12 +3,26 @@ 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 { mergeProviderPreferences, useFormPreferences } from "@/hooks/use-form-preferences";
+import {
+  buildFavoriteModelKey,
+  mergeProviderPreferences,
+  toggleFavoriteModel,
+  useFormPreferences,
+} from "@/hooks/use-form-preferences";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,17 +33,21 @@ 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,
 } from "@server/server/agent/agent-sdk-types";
 import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
 import {
+  AGENT_PROVIDER_DEFINITIONS,
   getModeVisuals,
   type AgentModeColorTier,
   type AgentModeIcon,
 } from "@server/server/agent/provider-manifest";
 import {
+  getFeatureHighlightColor,
+  getFeatureTooltip,
   getStatusSelectorHint,
   resolveAgentModelSelection,
 } from "@/components/agent-status-bar.utils";
@@ -40,7 +58,11 @@ type StatusOption = {
   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]),
+);
 
 type ControlledAgentStatusBarProps = {
   provider: string;
@@ -58,6 +80,13 @@ type ControlledAgentStatusBarProps = {
   onSelectThinkingOption?: (thinkingOptionId: string) => void;
   disabled?: boolean;
   isModelLoading?: boolean;
+  providerDefinitions?: AgentProviderDefinition[];
+  allProviderModels?: Map<string, AgentModelDefinition[]>;
+  canSelectModelProvider?: (providerId: string) => boolean;
+  favoriteKeys?: Set<string>;
+  onToggleFavoriteModel?: (provider: string, modelId: string) => void;
+  features?: AgentFeature[];
+  onSetFeature?: (featureId: string, value: unknown) => void;
 };
 
 export interface DraftAgentStatusBarProps {
@@ -77,6 +106,8 @@ export interface DraftAgentStatusBarProps {
   thinkingOptions: NonNullable<AgentModelDefinition["thinkingOptions"]>;
   selectedThinkingOptionId: string;
   onSelectThinkingOption: (thinkingOptionId: string) => void;
+  features?: AgentFeature[];
+  onSetFeature?: (featureId: string, value: unknown) => void;
   disabled?: boolean;
 }
 
@@ -97,6 +128,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,
@@ -142,6 +205,13 @@ function ControlledStatusBar({
   onSelectThinkingOption,
   disabled = false,
   isModelLoading = false,
+  providerDefinitions,
+  allProviderModels,
+  canSelectModelProvider,
+  favoriteKeys = new Set<string>(),
+  onToggleFavoriteModel,
+  features,
+  onSetFeature,
 }: ControlledAgentStatusBarProps) {
   const { theme } = useUnistyles();
   const isWeb = Platform.OS === "web";
@@ -183,7 +253,8 @@ function ControlledStatusBar({
     Boolean(providerOptions?.length) ||
     Boolean(modeOptions?.length) ||
     canSelectModel ||
-    Boolean(thinkingOptions?.length);
+    Boolean(thinkingOptions?.length) ||
+    Boolean(features?.length);
 
   if (!hasAnyControl) {
     return null;
@@ -205,6 +276,26 @@ function ControlledStatusBar({
     () => (modelOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
     [modelOptions],
   );
+  const fallbackAllProviderModels = useMemo(() => {
+    const map = new Map<string, AgentModelDefinition[]>();
+    if (!modelOptions || modelOptions.length === 0) {
+      return map;
+    }
+
+    map.set(
+      provider,
+      modelOptions.map((option) => ({
+        provider: provider as AgentProvider,
+        id: option.id,
+        label: option.label,
+      })),
+    );
+    return map;
+  }, [modelOptions, provider]);
+  const effectiveProviderDefinitions = providerDefinitions ??
+    (PROVIDER_DEFINITION_MAP.has(provider) ? [PROVIDER_DEFINITION_MAP.get(provider)!] : []);
+  const effectiveAllProviderModels = allProviderModels ?? fallbackAllProviderModels;
+  const canSelectProviderInModelMenu = canSelectModelProvider ?? (() => true);
   const comboboxThinkingOptions = useMemo<ComboboxOption[]>(
     () => (thinkingOptions ?? []).map((o) => ({ id: o.id, label: o.label })),
     [thinkingOptions],
@@ -289,49 +380,36 @@ function ControlledStatusBar({
           ) : null}
 
           {canSelectModel ? (
-            <>
-              <Tooltip
-                key={`model-${openSelector === "model" ? "open" : "closed"}`}
-                delayDuration={0}
-                enabledOnDesktop
-                enabledOnMobile={false}
-              >
-                <TooltipTrigger asChild triggerRefProp="ref">
-                  <Pressable
-                    ref={modelAnchorRef}
-                    collapsable={false}
+            <Tooltip
+              key={`model-${displayModel}`}
+              delayDuration={0}
+              enabledOnDesktop
+              enabledOnMobile={false}
+            >
+              <TooltipTrigger asChild triggerRefProp="ref">
+                <View>
+                  <CombinedModelSelector
+                    providerDefinitions={effectiveProviderDefinitions}
+                    allProviderModels={effectiveAllProviderModels}
+                    selectedProvider={provider}
+                    selectedModel={selectedModelId ?? ""}
+                    canSelectProvider={canSelectProviderInModelMenu}
+                    onSelect={(selectedProviderId, modelId) => {
+                      if (selectedProviderId === provider) {
+                        onSelectModel?.(modelId);
+                      }
+                    }}
+                    favoriteKeys={favoriteKeys}
+                    onToggleFavorite={onToggleFavoriteModel}
+                    isLoading={isModelLoading}
                     disabled={modelDisabled}
-                    onPress={() => handleSelectorPress("model")}
-                    style={({ pressed, hovered }) => [
-                      styles.modeBadge,
-                      hovered && styles.modeBadgeHovered,
-                      (pressed || openSelector === "model") && styles.modeBadgePressed,
-                      modelDisabled && styles.disabledBadge,
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityLabel="Select agent model"
-                    testID="agent-model-selector"
-                  >
-                    <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-                    <Text style={styles.modeBadgeText}>{displayModel}</Text>
-                    <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-                  </Pressable>
-                </TooltipTrigger>
-                <TooltipContent side="top" align="center" offset={8}>
-                  <Text style={styles.tooltipText}>{getStatusSelectorHint("model")}</Text>
-                </TooltipContent>
-              </Tooltip>
-              <Combobox
-                options={comboboxModelOptions}
-                value={selectedModelId ?? ""}
-                onSelect={(id) => onSelectModel?.(id)}
-                searchable={comboboxModelOptions.length > SEARCH_THRESHOLD}
-                open={openSelector === "model"}
-                onOpenChange={handleOpenChange("model")}
-                anchorRef={modelAnchorRef}
-                desktopPlacement="top-start"
-              />
-            </>
+                  />
+                </View>
+              </TooltipTrigger>
+              <TooltipContent side="top" align="center" offset={8}>
+                <Text style={styles.tooltipText}>{getStatusSelectorHint("model")}</Text>
+              </TooltipContent>
+            </Tooltip>
           ) : null}
 
           {thinkingOptions && thinkingOptions.length > 0 ? (
@@ -428,6 +506,107 @@ 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={(open) =>
+                    setOpenSelector(open ? `feature-${feature.id}` : null)
+                  }
+                >
+                  <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;
+          })}
         </>
       ) : (
         <>
@@ -454,73 +633,38 @@ function ControlledStatusBar({
             stackBehavior="replace"
             testID="agent-preferences-sheet"
           >
-            {providerOptions && providerOptions.length > 0 ? (
-              <View style={styles.sheetSection}>
-                <DropdownMenu
-                  open={openSelector === "provider"}
-                  onOpenChange={handleOpenChange("provider")}
-                >
-                  <DropdownMenuTrigger
-                    disabled={disabled || !canSelectProvider}
-                    style={({ pressed }) => [
-                      styles.sheetSelect,
-                      pressed && styles.sheetSelectPressed,
-                      (disabled || !canSelectProvider) && styles.disabledSheetSelect,
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityLabel="Select agent provider"
-                    testID="agent-preferences-provider"
-                  >
-                    <Text style={styles.sheetSelectText}>{displayProvider}</Text>
-                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent side="top" align="start">
-                    {providerOptions.map((provider) => (
-                      <DropdownMenuItem
-                        key={provider.id}
-                        selected={provider.id === selectedProviderId}
-                        onSelect={() => onSelectProvider?.(provider.id)}
-                      >
-                        {provider.label}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </View>
-            ) : null}
-
             {canSelectModel ? (
               <View style={styles.sheetSection}>
-                <DropdownMenu
-                  open={openSelector === "model"}
-                  onOpenChange={handleOpenChange("model")}
-                >
-                  <DropdownMenuTrigger
-                    disabled={modelDisabled}
-                    style={({ pressed }) => [
-                      styles.sheetSelect,
-                      pressed && styles.sheetSelectPressed,
-                      modelDisabled && styles.disabledSheetSelect,
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityLabel="Select agent model"
-                    testID="agent-preferences-model"
-                  >
-                    <Text style={styles.sheetSelectText}>{displayModel}</Text>
-                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent side="top" align="start">
-                    {(modelOptions ?? []).map((model) => (
-                      <DropdownMenuItem
-                        key={model.id}
-                        selected={model.id === selectedModelId}
-                        onSelect={() => onSelectModel?.(model.id)}
-                      >
-                        {model.label}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                <CombinedModelSelector
+                  providerDefinitions={effectiveProviderDefinitions}
+                  allProviderModels={effectiveAllProviderModels}
+                  selectedProvider={provider}
+                  selectedModel={selectedModelId ?? ""}
+                  canSelectProvider={canSelectProviderInModelMenu}
+                  onSelect={(selectedProviderId, modelId) => {
+                    if (selectedProviderId !== provider) {
+                      onSelectProvider?.(selectedProviderId);
+                    }
+                    onSelectModel?.(modelId);
+                  }}
+                  favoriteKeys={favoriteKeys}
+                  onToggleFavorite={onToggleFavoriteModel}
+                  isLoading={isModelLoading}
+                  disabled={modelDisabled}
+                  renderTrigger={({ selectedModelLabel }) => (
+                    <View
+                      style={[
+                        styles.sheetSelect,
+                        modelDisabled && styles.disabledSheetSelect,
+                      ]}
+                      pointerEvents="none"
+                      testID="agent-preferences-model"
+                    >
+                      <Text style={styles.sheetSelectText}>{selectedModelLabel}</Text>
+                      <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+                    </View>
+                  )}
+                />
               </View>
             ) : null}
 
@@ -601,6 +745,85 @@ 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={(open) =>
+                        setOpenSelector(open ? `feature-${feature.id}` : null)
+                      }
+                    >
+                      <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>
         </>
       )}
@@ -622,6 +845,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
             currentModeId: currentAgent.currentModeId,
             runtimeModelId: currentAgent.runtimeInfo?.model ?? null,
             model: currentAgent.model,
+            features: currentAgent.features,
             thinkingOptionId: currentAgent.thinkingOptionId,
           }
         : null;
@@ -650,6 +874,35 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
     },
   });
 
+  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);
+    }
+    return map;
+  }, [agent?.provider, agentProviderModelQuery.data]);
+
   const models = modelsQuery.data ?? null;
 
   const displayMode =
@@ -674,6 +927,10 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
   const modelOptions = useMemo<StatusOption[]>(() => {
     return (models ?? []).map((model) => ({ id: model.id, label: model.label }));
   }, [models]);
+  const favoriteKeys = useMemo(
+    () => new Set((preferences.favoriteModels ?? []).map((favorite) => buildFavoriteModelKey(favorite))),
+    [preferences.favoriteModels],
+  );
 
   const thinkingOptions = useMemo<StatusOption[]>(() => {
     return (modelSelection.thinkingOptions ?? []).map((option) => ({
@@ -693,6 +950,8 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
         modeOptions.length > 0 ? modeOptions : [{ id: agent.currentModeId ?? "", label: displayMode }]
       }
       selectedModeId={agent.currentModeId ?? undefined}
+      providerDefinitions={agentProviderDefinitions}
+      allProviderModels={agentProviderModels}
       onSelectMode={(modeId) => {
         if (!client) {
           return;
@@ -722,6 +981,12 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
           console.warn("[AgentStatusBar] setAgentModel failed", error);
         });
       }}
+      favoriteKeys={favoriteKeys}
+      onToggleFavoriteModel={(provider, modelId) => {
+        void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
+          console.warn("[AgentStatusBar] toggle favorite model failed", error);
+        });
+      }}
       thinkingOptions={thinkingOptions.length > 1 ? thinkingOptions : undefined}
       selectedThinkingOptionId={modelSelection.selectedThinkingId ?? undefined}
       onSelectThinkingOption={(thinkingOptionId) => {
@@ -749,6 +1014,15 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
           console.warn("[AgentStatusBar] setAgentThinkingOption failed", error);
         });
       }}
+      features={agent.features}
+      onSetFeature={(featureId, value) => {
+        if (!client) {
+          return;
+        }
+        void client.setAgentFeature(agentId, featureId, value).catch((error) => {
+          console.warn("[AgentStatusBar] setAgentFeature failed", error);
+        });
+      }}
       isModelLoading={isProviderModelsQueryLoading(modelsQuery)}
       disabled={!client}
     />
@@ -772,9 +1046,12 @@ export function DraftAgentStatusBar({
   thinkingOptions,
   selectedThinkingOptionId,
   onSelectThinkingOption,
+  features,
+  onSetFeature,
   disabled = false,
 }: DraftAgentStatusBarProps) {
   const isWeb = Platform.OS === "web";
+  const { preferences, updatePreferences } = useFormPreferences();
 
   const mappedModeOptions = useMemo<StatusOption[]>(() => {
     if (modeOptions.length === 0) {
@@ -789,6 +1066,10 @@ export function DraftAgentStatusBar({
   const mappedThinkingOptions = useMemo<StatusOption[]>(() => {
     return thinkingOptions.map((option) => ({ id: option.id, label: option.label }));
   }, [thinkingOptions]);
+  const favoriteKeys = useMemo(
+    () => new Set((preferences.favoriteModels ?? []).map((favorite) => buildFavoriteModelKey(favorite))),
+    [preferences.favoriteModels],
+  );
 
   const effectiveSelectedMode = selectedMode || mappedModeOptions[0]?.id || "";
   const effectiveSelectedThinkingOption =
@@ -803,6 +1084,12 @@ export function DraftAgentStatusBar({
           selectedProvider={selectedProvider}
           selectedModel={selectedModel}
           onSelect={onSelectProviderAndModel}
+          favoriteKeys={favoriteKeys}
+          onToggleFavorite={(provider, modelId) => {
+            void updatePreferences(toggleFavoriteModel({ preferences, provider, modelId })).catch((error) => {
+              console.warn("[DraftAgentStatusBar] toggle favorite model failed", error);
+            });
+          }}
           isLoading={isAllModelsLoading}
           disabled={disabled}
         />
@@ -814,38 +1101,42 @@ export function DraftAgentStatusBar({
           thinkingOptions={mappedThinkingOptions.length > 0 ? mappedThinkingOptions : undefined}
           selectedThinkingOptionId={effectiveSelectedThinkingOption}
           onSelectThinkingOption={onSelectThinkingOption}
+          features={features}
+          onSetFeature={onSetFeature}
           disabled={disabled}
         />
       </View>
     );
   }
 
-  const providerOptions = providerDefinitions.map((definition) => ({
-    id: definition.id,
-    label: definition.label,
+  const modelOptions: StatusOption[] = models.map((model) => ({
+    id: model.id,
+    label: model.label,
   }));
 
-  const modelOptions: StatusOption[] = [];
-  for (const model of models) {
-    modelOptions.push({ id: model.id, label: model.label });
-  }
-
   return (
     <ControlledStatusBar
       provider={selectedProvider}
-      providerOptions={providerOptions}
-      selectedProviderId={selectedProvider}
-      onSelectProvider={(providerId) => onSelectProvider(providerId as AgentProvider)}
+      providerDefinitions={providerDefinitions}
+      allProviderModels={allProviderModels}
       modeOptions={mappedModeOptions}
       selectedModeId={effectiveSelectedMode}
       onSelectMode={onSelectMode}
       modelOptions={modelOptions}
       selectedModelId={selectedModel}
-      onSelectModel={onSelectModel}
-      isModelLoading={isModelLoading}
+      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}
+      features={features}
+      onSetFeature={onSetFeature}
       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;

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

@@ -9,7 +9,6 @@ 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 { useMutation } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
@@ -36,6 +35,7 @@ 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";
@@ -59,9 +59,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";
@@ -252,10 +250,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
         if (item.kind === "user_message" && isToolSequenceItem(belowItem)) {
           return looseGap;
         }
-        if (
-          (item.kind === "user_message" || item.kind === "assistant_message") &&
-          isToolSequenceItem(belowItem)
-        ) {
+        if ((item.kind === "user_message" || item.kind === "assistant_message") && isToolSequenceItem(belowItem)) {
           return tightGap;
         }
         if (item.kind === "todo_list" && isToolSequenceItem(belowItem)) {
@@ -368,7 +363,6 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
                 workspaceRoot={workspaceRoot}
               />
             );
-
           case "thought": {
             const nextItem = getStreamNeighborItem({
               strategy: streamRenderStrategy,
@@ -755,90 +749,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;
@@ -891,50 +801,8 @@ function PermissionRequestCard({
     );
   }
 
-  return (
-    <View
-      style={[
-        permissionStyles.container,
-        {
-          backgroundColor: theme.colors.surface1,
-          borderColor: theme.colors.border,
-        },
-      ]}
-    >
-      <Text style={[permissionStyles.title, { color: theme.colors.foreground }]}>{title}</Text>
-
-      {description ? (
-        <Text style={[permissionStyles.description, { color: theme.colors.foregroundMuted }]}>
-          {description}
-        </Text>
-      ) : 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>
-      ) : null}
-
-      {!isPlanRequest ? (
-        <ToolCallDetailsContent
-          detail={
-            request.detail ?? {
-              type: "unknown",
-              input: request.input ?? null,
-              output: null,
-            }
-          }
-          maxHeight={200}
-        />
-      ) : null}
-
+  const footer = (
+    <>
       <Text
         testID="permission-request-question"
         style={[permissionStyles.question, { color: theme.colors.foregroundMuted }]}
@@ -1007,6 +875,55 @@ function PermissionRequestCard({
           )}
         </Pressable>
       </View>
+    </>
+  );
+
+  if (isPlanRequest && planMarkdown) {
+    return (
+      <PlanCard
+        title={title}
+        description={description}
+        text={planMarkdown}
+        footer={footer}
+        disableOuterSpacing
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[
+        permissionStyles.container,
+        {
+          backgroundColor: theme.colors.surface1,
+          borderColor: theme.colors.border,
+        },
+      ]}
+    >
+      <Text style={[permissionStyles.title, { color: theme.colors.foreground }]}>{title}</Text>
+
+      {description ? (
+        <Text style={[permissionStyles.description, { color: theme.colors.foregroundMuted }]}>
+          {description}
+        </Text>
+      ) : null}
+
+      {planMarkdown ? <PlanCard title="Proposed plan" text={planMarkdown} disableOuterSpacing /> : null}
+
+      {!isPlanRequest ? (
+        <ToolCallDetailsContent
+          detail={
+            request.detail ?? {
+              type: "unknown",
+              input: request.input ?? null,
+              output: null,
+            }
+          }
+          maxHeight={200}
+        />
+      ) : null}
+
+      {footer}
     </View>
   );
 }

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

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import type { AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
+import {
+  buildModelRows,
+  buildSelectedTriggerLabel,
+  matchesSearch,
+  resolveProviderLabel,
+} from "./combined-model-selector.utils";
+
+describe("combined model selector helpers", () => {
+  const providerDefinitions = [
+    {
+      id: "claude",
+      label: "Claude",
+      description: "Claude provider",
+      defaultModeId: "default",
+      modes: [],
+    },
+    {
+      id: "codex",
+      label: "Codex",
+      description: "Codex provider",
+      defaultModeId: "auto",
+      modes: [],
+    },
+  ];
+
+  const claudeModels: AgentModelDefinition[] = [
+    {
+      provider: "claude",
+      id: "sonnet-4.6",
+      label: "Sonnet 4.6",
+    },
+  ];
+
+  const codexModels: AgentModelDefinition[] = [
+    {
+      provider: "codex",
+      id: "gpt-5.4",
+      label: "GPT-5.4",
+    },
+  ];
+
+  it("keeps enough data to search by model and provider name", async () => {
+    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(matchesSearch(rows[0]!, "claude")).toBe(true);
+    expect(matchesSearch(rows[1]!, "gpt-5.4")).toBe(true);
+  });
+
+  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");
+  });
+});

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

@@ -1,22 +1,39 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { View, Text, Pressable, Platform } from "react-native";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  Platform,
+  ActivityIndicator,
+  type GestureResponderEvent,
+} from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
-import { ArrowLeft, Check, ChevronDown, ChevronRight } from "lucide-react-native";
+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";
 import { getProviderIcon } from "@/components/provider-icons";
+import type { FavoriteModelRow } from "@/hooks/use-form-preferences";
+import {
+  buildModelRows,
+  buildSelectedTriggerLabel,
+  matchesSearch,
+  resolveProviderLabel,
+  type SelectorModelRow,
+} from "./combined-model-selector.utils";
 
-const INLINE_MODEL_THRESHOLD = 8;
+const INLINE_MODEL_THRESHOLD = Number.POSITIVE_INFINITY;
 
-type DrillDownView = { provider: string };
-
-function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
-  if (!models || models.length === 0) {
-    return "Select model";
-  }
-  return (models.find((model) => model.isDefault) ?? models[0])?.label ?? "Select model";
-}
+type SelectorView =
+  | { kind: "all" }
+  | { kind: "provider"; providerId: string; providerLabel: string };
 
 interface CombinedModelSelectorProps {
   providerDefinitions: AgentProviderDefinition[];
@@ -25,9 +42,408 @@ interface CombinedModelSelectorProps {
   selectedModel: string;
   onSelect: (provider: AgentProvider, modelId: string) => void;
   isLoading: boolean;
+  canSelectProvider?: (provider: string) => boolean;
+  favoriteKeys?: Set<string>;
+  onToggleFavorite?: (provider: string, modelId: string) => void;
+  renderTrigger?: (input: {
+    selectedModelLabel: string;
+    onPress: () => void;
+    disabled: boolean;
+    isOpen: boolean;
+  }) => React.ReactNode;
   disabled?: boolean;
 }
 
+interface SelectorContentProps {
+  view: SelectorView;
+  providerDefinitions: AgentProviderDefinition[];
+  allProviderModels: Map<string, AgentModelDefinition[]>;
+  selectedProvider: string;
+  selectedModel: string;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  favoriteKeys: Set<string>;
+  onSelect: (provider: string, modelId: string) => void;
+  canSelectProvider: (provider: string) => boolean;
+  onToggleFavorite?: (provider: string, modelId: string) => void;
+  onDrillDown: (providerId: string, providerLabel: string) => void;
+  onBack?: () => void;
+}
+
+function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
+  if (!models || models.length === 0) {
+    return "Select model";
+  }
+  return (models.find((model) => model.isDefault) ?? models[0])?.label ?? "Select model";
+}
+
+function normalizeSearchQuery(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+function partitionRows(
+  rows: SelectorModelRow[],
+  favoriteKeys: Set<string>,
+): { favoriteRows: SelectorModelRow[]; regularRows: SelectorModelRow[] } {
+  const favoriteRows: SelectorModelRow[] = [];
+  const regularRows: SelectorModelRow[] = [];
+
+  for (const row of rows) {
+    if (favoriteKeys.has(row.favoriteKey)) {
+      favoriteRows.push(row);
+      continue;
+    }
+    regularRows.push(row);
+  }
+
+  return { favoriteRows, regularRows };
+}
+
+function groupRowsByProvider(
+  rows: SelectorModelRow[],
+): Array<{ 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);
+    if (existing) {
+      existing.rows.push(row);
+      continue;
+    }
+
+    grouped.set(row.provider, {
+      providerId: row.provider,
+      providerLabel: row.providerLabel,
+      rows: [row],
+    });
+  }
+
+  return Array.from(grouped.values());
+}
+
+function ModelRow({
+  row,
+  isSelected,
+  isFavorite,
+  disabled = false,
+  onPress,
+  onToggleFavorite,
+}: {
+  row: SelectorModelRow;
+  isSelected: boolean;
+  isFavorite: boolean;
+  disabled?: 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) => {
+      event.stopPropagation();
+      onToggleFavorite?.(row.provider, row.modelId);
+    },
+    [onToggleFavorite, row.modelId, row.provider],
+  );
+
+  const item = (
+    <ComboboxItem
+      label={row.modelLabel}
+      selected={isSelected}
+      disabled={disabled}
+      onPress={onPress}
+      leadingSlot={<ProviderIcon size={14} color={theme.colors.foregroundMuted} />}
+      trailingSlot={
+        onToggleFavorite && !disabled ? (
+          <Pressable
+            onPress={handleToggleFavorite}
+            hitSlop={8}
+            style={({ pressed, hovered }) => [
+              styles.favoriteButton,
+              hovered && styles.favoriteButtonHovered,
+              pressed && styles.favoriteButtonPressed,
+            ]}
+            accessibilityRole="button"
+            accessibilityLabel={isFavorite ? "Unfavorite model" : "Favorite model"}
+            testID={`favorite-model-${row.provider}-${row.modelId}`}
+          >
+            {({ hovered }) => (
+              <Star
+                size={16}
+                color={
+                  isFavorite
+                    ? theme.colors.palette.amber[500]
+                    : hovered
+                      ? theme.colors.foregroundMuted
+                      : theme.colors.border
+                }
+                fill={isFavorite ? theme.colors.palette.amber[500] : "transparent"}
+              />
+            )}
+          </Pressable>
+        ) : null
+      }
+    />
+  );
+
+  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({
+  favoriteRows,
+  selectedProvider,
+  selectedModel,
+  favoriteKeys,
+  onSelect,
+  canSelectProvider,
+  onToggleFavorite,
+}: {
+  favoriteRows: SelectorModelRow[];
+  selectedProvider: string;
+  selectedModel: string;
+  favoriteKeys: Set<string>;
+  onSelect: (provider: string, modelId: string) => void;
+  canSelectProvider: (provider: string) => boolean;
+  onToggleFavorite?: (provider: string, modelId: string) => void;
+}) {
+  const { theme } = useUnistyles();
+
+  if (favoriteRows.length === 0) {
+    return null;
+  }
+
+  return (
+    <View>
+      <View style={styles.sectionHeading}>
+        <Text style={styles.sectionHeadingText}>Favorites</Text>
+      </View>
+      {favoriteRows.map((row) => (
+        <ModelRow
+          key={row.favoriteKey}
+          row={row}
+          isSelected={row.provider === selectedProvider && row.modelId === selectedModel}
+          isFavorite={favoriteKeys.has(row.favoriteKey)}
+          disabled={!canSelectProvider(row.provider)}
+          onPress={() => onSelect(row.provider, row.modelId)}
+          onToggleFavorite={onToggleFavorite}
+        />
+      ))}
+      <View style={styles.separator} />
+    </View>
+  );
+}
+
+function GroupedProviderRows({
+  providerDefinitions,
+  groupedRows,
+  selectedProvider,
+  selectedModel,
+  favoriteKeys,
+  onSelect,
+  canSelectProvider,
+  onToggleFavorite,
+  onDrillDown,
+}: {
+  providerDefinitions: AgentProviderDefinition[];
+  groupedRows: Array<{ providerId: string; providerLabel: string; rows: SelectorModelRow[] }>;
+  selectedProvider: string;
+  selectedModel: string;
+  favoriteKeys: Set<string>;
+  onSelect: (provider: string, modelId: string) => void;
+  canSelectProvider: (provider: string) => boolean;
+  onToggleFavorite?: (provider: string, modelId: string) => void;
+  onDrillDown: (providerId: string, providerLabel: string) => void;
+}) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View>
+      {groupedRows.map((group, index) => {
+        const providerDefinition = providerDefinitions.find((definition) => definition.id === group.providerId);
+        const ProvIcon = getProviderIcon(group.providerId);
+        const isInline = group.rows.length <= INLINE_MODEL_THRESHOLD;
+
+        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) => (
+                  <ModelRow
+                    key={row.favoriteKey}
+                    row={row}
+                    isSelected={row.provider === selectedProvider && row.modelId === selectedModel}
+                    isFavorite={favoriteKeys.has(row.favoriteKey)}
+                    disabled={!canSelectProvider(row.provider)}
+                    onPress={() => onSelect(row.provider, row.modelId)}
+                    onToggleFavorite={onToggleFavorite}
+                  />
+                ))}
+              </>
+            ) : (
+              <Pressable
+                onPress={() => onDrillDown(group.providerId, group.providerLabel)}
+                style={({ pressed, hovered }) => [
+                  styles.drillDownRow,
+                  hovered && styles.drillDownRowHovered,
+                  pressed && styles.drillDownRowPressed,
+                ]}
+              >
+                <ProvIcon size={14} 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} />
+                </View>
+              </Pressable>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function SelectorContent({
+  view,
+  providerDefinitions,
+  allProviderModels,
+  selectedProvider,
+  selectedModel,
+  searchQuery,
+  onSearchChange,
+  favoriteKeys,
+  onSelect,
+  canSelectProvider,
+  onToggleFavorite,
+  onDrillDown,
+  onBack,
+}: SelectorContentProps) {
+  const allRows = useMemo(
+    () => buildModelRows(providerDefinitions, allProviderModels),
+    [allProviderModels, providerDefinitions],
+  );
+
+  const scopedRows = useMemo(() => {
+    if (view.kind === "provider") {
+      return allRows.filter((row) => row.provider === view.providerId);
+    }
+    return allRows;
+  }, [allRows, view]);
+
+  const normalizedQuery = useMemo(() => normalizeSearchQuery(searchQuery), [searchQuery]);
+
+  const visibleRows = useMemo(
+    () => scopedRows.filter((row) => matchesSearch(row, normalizedQuery)),
+    [normalizedQuery, scopedRows],
+  );
+
+  const { favoriteRows, regularRows } = useMemo(
+    () => partitionRows(visibleRows, favoriteKeys),
+    [favoriteKeys, visibleRows],
+  );
+
+  const groupedRegularRows = useMemo(() => groupRowsByProvider(regularRows), [regularRows]);
+
+  return (
+    <View>
+      {view.kind === "provider" ? (
+        <ProviderBackButton providerId={view.providerId} providerLabel={view.providerLabel} onBack={onBack} />
+      ) : 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 ? (
+        <GroupedProviderRows
+          providerDefinitions={providerDefinitions}
+          groupedRows={groupedRegularRows}
+          selectedProvider={selectedProvider}
+          selectedModel={selectedModel}
+          favoriteKeys={favoriteKeys}
+          onSelect={onSelect}
+          canSelectProvider={canSelectProvider}
+          onToggleFavorite={onToggleFavorite}
+          onDrillDown={onDrillDown}
+        />
+      ) : null}
+
+      {favoriteRows.length === 0 && groupedRegularRows.length === 0 ? (
+        <View style={styles.emptyState}>
+          <Search size={16} color="#777" />
+          <Text style={styles.emptyStateText}>No models match your search</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function ProviderBackButton({
+  providerId,
+  providerLabel,
+  onBack,
+}: {
+  providerId: string;
+  providerLabel: string;
+  onBack?: () => void;
+}) {
+  const { theme } = useUnistyles();
+  const ProviderIcon = getProviderIcon(providerId);
+
+  if (!onBack) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      onPress={onBack}
+      style={({ pressed, hovered }) => [
+        styles.backButton,
+        hovered && styles.backButtonHovered,
+        pressed && styles.backButtonPressed,
+      ]}
+    >
+      <ArrowLeft size={14} color={theme.colors.foregroundMuted} />
+      <ProviderIcon size={14} color={theme.colors.foregroundMuted} />
+      <Text style={styles.backButtonText}>{providerLabel}</Text>
+    </Pressable>
+  );
+}
+
 export function CombinedModelSelector({
   providerDefinitions,
   allProviderModels,
@@ -35,48 +451,80 @@ export function CombinedModelSelector({
   selectedModel,
   onSelect,
   isLoading,
+  canSelectProvider = () => true,
+  favoriteKeys = new Set<string>(),
+  onToggleFavorite,
+  renderTrigger,
   disabled = false,
 }: CombinedModelSelectorProps) {
   const { theme } = useUnistyles();
+  const isWeb = Platform.OS === "web";
   const anchorRef = useRef<View>(null);
   const [isOpen, setIsOpen] = useState(false);
-  const [view, setView] = useState<"groups" | DrillDownView>("groups");
+  const [isContentReady, setIsContentReady] = useState(isWeb);
+  const [view, setView] = useState<SelectorView>({ kind: "all" });
   const [searchQuery, setSearchQuery] = useState("");
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
       setIsOpen(open);
-      if (open) {
-        const models = allProviderModels.get(selectedProvider);
-        if (models && models.length > INLINE_MODEL_THRESHOLD) {
-          setView({ provider: selectedProvider });
-        }
-      } else {
-        setView("groups");
+      setView({ kind: "all" });
+      if (!open) {
         setSearchQuery("");
       }
     },
-    [allProviderModels, selectedProvider],
+    [],
   );
 
   const handleSelect = useCallback(
     (provider: string, modelId: string) => {
       onSelect(provider as AgentProvider, modelId);
       setIsOpen(false);
-      setView("groups");
+      setView({ kind: "all" });
       setSearchQuery("");
     },
     [onSelect],
   );
 
   const ProviderIcon = getProviderIcon(selectedProvider);
+  const selectedProviderLabel = useMemo(
+    () => resolveProviderLabel(providerDefinitions, selectedProvider),
+    [providerDefinitions, selectedProvider],
+  );
 
   const selectedModelLabel = useMemo(() => {
     const models = allProviderModels.get(selectedProvider);
-    if (!models) return isLoading ? "Loading..." : "Select model";
-    const model = models.find((m) => m.id === selectedModel);
+    if (!models) {
+      return isLoading ? "Loading..." : "Select model";
+    }
+    const model = models.find((entry) => entry.id === selectedModel);
     return model?.label ?? resolveDefaultModelLabel(models);
-  }, [allProviderModels, selectedProvider, selectedModel, isLoading]);
+  }, [allProviderModels, isLoading, selectedModel, selectedProvider]);
+
+  const triggerLabel = useMemo(() => {
+    if (selectedModelLabel === "Loading..." || selectedModelLabel === "Select model") {
+      return selectedModelLabel;
+    }
+
+    return buildSelectedTriggerLabel(selectedProviderLabel, selectedModelLabel);
+  }, [selectedModelLabel, selectedProviderLabel]);
+
+  useEffect(() => {
+    if (isWeb) {
+      return;
+    }
+
+    if (!isOpen) {
+      setIsContentReady(false);
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      setIsContentReady(true);
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen, isWeb]);
 
   return (
     <>
@@ -90,14 +538,26 @@ export function CombinedModelSelector({
           hovered && styles.triggerHovered,
           (pressed || isOpen) && styles.triggerPressed,
           disabled && styles.triggerDisabled,
+          renderTrigger ? styles.customTriggerWrapper : null,
         ]}
         accessibilityRole="button"
         accessibilityLabel={`Select model (${selectedModelLabel})`}
         testID="combined-model-selector"
       >
-        <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-        <Text style={styles.triggerText}>{selectedModelLabel}</Text>
-        <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+        {renderTrigger ? (
+          renderTrigger({
+            selectedModelLabel: triggerLabel,
+            onPress: () => handleOpenChange(!isOpen),
+            disabled,
+            isOpen,
+          })
+        ) : (
+          <>
+            <ProviderIcon size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+            <Text style={styles.triggerText}>{triggerLabel}</Text>
+            <ChevronDown size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+          </>
+        )}
       </Pressable>
       <Combobox
         options={[]}
@@ -105,184 +565,46 @@ export function CombinedModelSelector({
         onSelect={() => {}}
         open={isOpen}
         onOpenChange={handleOpenChange}
+        stackBehavior="push"
         anchorRef={anchorRef}
         desktopPlacement="top-start"
         title="Select model"
       >
-        {view === "groups" ? (
-          <GroupsView
+        {isContentReady ? (
+          <SelectorContent
+            view={view}
             providerDefinitions={providerDefinitions}
             allProviderModels={allProviderModels}
             selectedProvider={selectedProvider}
             selectedModel={selectedModel}
-            onSelect={handleSelect}
-            onDrillDown={(provider) => {
-              setView({ provider });
-              setSearchQuery("");
-            }}
-          />
-        ) : (
-          <DrillDownModelView
-            provider={view.provider}
-            providerDefinitions={providerDefinitions}
-            models={allProviderModels.get(view.provider) ?? []}
-            selectedProvider={selectedProvider}
-            selectedModel={selectedModel}
             searchQuery={searchQuery}
             onSearchChange={setSearchQuery}
+            favoriteKeys={favoriteKeys}
             onSelect={handleSelect}
-            onBack={() => {
-              setView("groups");
-              setSearchQuery("");
+            canSelectProvider={canSelectProvider}
+            onToggleFavorite={onToggleFavorite}
+            onDrillDown={(providerId, providerLabel) => {
+              setView({ kind: "provider", providerId, providerLabel });
             }}
+            onBack={
+              view.kind === "provider"
+                ? () => {
+                    setView({ kind: "all" });
+                  }
+                : undefined
+            }
           />
+        ) : (
+          <View style={styles.sheetLoadingState}>
+            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
+            <Text style={styles.sheetLoadingText}>Loading model selector…</Text>
+          </View>
         )}
       </Combobox>
     </>
   );
 }
 
-function GroupsView({
-  providerDefinitions,
-  allProviderModels,
-  selectedProvider,
-  selectedModel,
-  onSelect,
-  onDrillDown,
-}: {
-  providerDefinitions: AgentProviderDefinition[];
-  allProviderModels: Map<string, AgentModelDefinition[]>;
-  selectedProvider: string;
-  selectedModel: string;
-  onSelect: (provider: string, modelId: string) => void;
-  onDrillDown: (provider: string) => void;
-}) {
-  const { theme } = useUnistyles();
-
-  return (
-    <View>
-      {providerDefinitions.map((def, index) => {
-        const models = allProviderModels.get(def.id) ?? [];
-        const isInline = models.length <= INLINE_MODEL_THRESHOLD;
-        const ProvIcon = getProviderIcon(def.id);
-
-        return (
-          <View key={def.id}>
-            {index > 0 ? <View style={styles.separator} /> : null}
-
-            {isInline ? (
-              <>
-                <View style={styles.sectionHeading}>
-                  <ProvIcon size={14} color={theme.colors.foregroundMuted} />
-                  <Text style={styles.sectionHeadingText}>{def.label}</Text>
-                </View>
-                {models.map((model) => (
-                  <ComboboxItem
-                    key={model.id}
-                    label={model.label}
-                    selected={model.id === selectedModel && def.id === selectedProvider}
-                    onPress={() => onSelect(def.id, model.id)}
-                  />
-                ))}
-              </>
-            ) : (
-              <Pressable
-                onPress={() => onDrillDown(def.id)}
-                style={({ pressed, hovered }) => [
-                  styles.drillDownRow,
-                  hovered && styles.drillDownRowHovered,
-                  pressed && styles.drillDownRowPressed,
-                ]}
-              >
-                <ProvIcon size={14} color={theme.colors.foregroundMuted} />
-                <Text style={styles.drillDownText}>{def.label}</Text>
-                <View style={styles.drillDownTrailing}>
-                  <Text style={styles.drillDownCount}>{models.length}</Text>
-                  <ChevronRight size={14} color={theme.colors.foregroundMuted} />
-                </View>
-              </Pressable>
-            )}
-          </View>
-        );
-      })}
-    </View>
-  );
-}
-
-function DrillDownModelView({
-  provider,
-  providerDefinitions,
-  models,
-  selectedProvider,
-  selectedModel,
-  searchQuery,
-  onSearchChange,
-  onSelect,
-  onBack,
-}: {
-  provider: string;
-  providerDefinitions: AgentProviderDefinition[];
-  models: AgentModelDefinition[];
-  selectedProvider: string;
-  selectedModel: string;
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-  onSelect: (provider: string, modelId: string) => void;
-  onBack: () => void;
-}) {
-  const { theme } = useUnistyles();
-  const ProvIcon = getProviderIcon(provider);
-  const providerLabel = providerDefinitions.find((d) => d.id === provider)?.label ?? provider;
-
-  const filteredModels = useMemo(() => {
-    if (!searchQuery.trim()) return models;
-    const q = searchQuery.toLowerCase();
-    return models.filter(
-      (m) => m.label.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),
-    );
-  }, [models, searchQuery]);
-
-  return (
-    <View>
-      <Pressable
-        onPress={onBack}
-        style={({ pressed, hovered }) => [
-          styles.backButton,
-          hovered && styles.backButtonHovered,
-          pressed && styles.backButtonPressed,
-        ]}
-      >
-        <ArrowLeft size={14} color={theme.colors.foregroundMuted} />
-        <ProvIcon size={14} color={theme.colors.foregroundMuted} />
-        <Text style={styles.backButtonText}>{providerLabel}</Text>
-      </Pressable>
-
-      <SearchInput
-        placeholder="Search models..."
-        value={searchQuery}
-        onChangeText={onSearchChange}
-        autoFocus={Platform.OS === "web"}
-      />
-
-      {filteredModels.map((model) => (
-        <ComboboxItem
-          key={model.id}
-          label={model.label}
-          description={model.description}
-          selected={model.id === selectedModel && provider === selectedProvider}
-          onPress={() => onSelect(provider, model.id)}
-        />
-      ))}
-
-      {filteredModels.length === 0 ? (
-        <View style={styles.emptyState}>
-          <Text style={styles.emptyStateText}>No models match your search</Text>
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
 const styles = StyleSheet.create((theme) => ({
   trigger: {
     height: 28,
@@ -307,6 +629,11 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.sm,
     fontWeight: theme.fontWeight.normal,
   },
+  customTriggerWrapper: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    height: "auto",
+  },
   separator: {
     height: 1,
     backgroundColor: theme.colors.border,
@@ -374,9 +701,37 @@ const styles = StyleSheet.create((theme) => ({
   emptyState: {
     paddingVertical: theme.spacing[4],
     alignItems: "center",
+    gap: theme.spacing[2],
   },
   emptyStateText: {
     fontSize: theme.fontSize.sm,
     color: theme.colors.foregroundMuted,
   },
+  favoriteButton: {
+    width: 24,
+    height: 24,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  favoriteButtonHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  favoriteButtonPressed: {
+    backgroundColor: theme.colors.surface1,
+  },
+  tooltipText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.xs,
+  },
+  sheetLoadingState: {
+    minHeight: 160,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  sheetLoadingText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
 }));

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

@@ -0,0 +1,50 @@
+import type { AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
+import type { AgentProviderDefinition } from "@server/server/agent/provider-manifest";
+import { buildFavoriteModelKey, type FavoriteModelRow } from "@/hooks/use-form-preferences";
+
+export type SelectorModelRow = FavoriteModelRow;
+
+export function resolveProviderLabel(
+  providerDefinitions: AgentProviderDefinition[],
+  providerId: string,
+): string {
+  return providerDefinitions.find((definition) => definition.id === providerId)?.label ?? providerId;
+}
+
+export function buildSelectedTriggerLabel(providerLabel: string, modelLabel: string): string {
+  return modelLabel;
+}
+
+export function buildModelRows(
+  providerDefinitions: AgentProviderDefinition[],
+  allProviderModels: Map<string, AgentModelDefinition[]>,
+): SelectorModelRow[] {
+  const providerLabelMap = new Map(providerDefinitions.map((definition) => [definition.id, definition.label]));
+  const rows: SelectorModelRow[] = [];
+
+  for (const definition of providerDefinitions) {
+    const providerLabel = providerLabelMap.get(definition.id) ?? definition.label;
+    for (const model of allProviderModels.get(definition.id) ?? []) {
+      rows.push({
+        favoriteKey: buildFavoriteModelKey({ provider: definition.id, modelId: model.id }),
+        provider: definition.id,
+        providerLabel,
+        modelId: model.id,
+        modelLabel: model.label,
+        description: model.description,
+      });
+    }
+  }
+
+  return rows;
+}
+
+export function matchesSearch(row: SelectorModelRow, normalizedQuery: string): boolean {
+  if (!normalizedQuery) {
+    return true;
+  }
+
+  return [row.modelLabel, row.modelId, row.providerLabel].some((value) =>
+    value.toLowerCase().includes(normalizedQuery),
+  );
+}

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

@@ -20,7 +20,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { DraggableListProps, DraggableRenderItemInfo } from "./draggable-list.types";
-import { WebDesktopScrollbarOverlay, useWebDesktopScrollbarMetrics } from "./web-desktop-scrollbar";
+import { useWebScrollViewScrollbar } from "./use-web-scrollbar";
 
 export type { DraggableListProps, DraggableRenderItemInfo };
 
@@ -133,8 +133,11 @@ export function DraggableList<T>({
   const [activeId, setActiveId] = useState<string | null>(null);
   const [dragItems, setDragItems] = useState<T[] | null>(null);
   const items = dragItems ?? data;
+  const showCustomScrollbar = enableDesktopWebScrollbar && scrollEnabled;
   const scrollViewRef = useRef<ScrollView>(null);
-  const scrollbarMetrics = useWebDesktopScrollbarMetrics();
+  const scrollbar = useWebScrollViewScrollbar(scrollViewRef, {
+    enabled: showCustomScrollbar,
+  });
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -177,7 +180,6 @@ export function DraggableList<T>({
   );
 
   const ids = items.map((item, index) => keyExtractor(item, index));
-  const showCustomScrollbar = enableDesktopWebScrollbar && scrollEnabled;
   const wrapperStyle = [
     { position: "relative" as const },
     scrollEnabled ? { flex: 1, minHeight: 0 } : null,
@@ -193,12 +195,10 @@ export function DraggableList<T>({
           style={style}
           contentContainerStyle={contentContainerStyle}
           showsVerticalScrollIndicator={showCustomScrollbar ? false : showsVerticalScrollIndicator}
-          onLayout={showCustomScrollbar ? scrollbarMetrics.onLayout : undefined}
-          onContentSizeChange={
-            showCustomScrollbar ? scrollbarMetrics.onContentSizeChange : undefined
-          }
-          onScroll={showCustomScrollbar ? scrollbarMetrics.onScroll : undefined}
-          scrollEventThrottle={showCustomScrollbar ? 16 : undefined}
+          onLayout={scrollbar.onLayout}
+          onContentSizeChange={scrollbar.onContentSizeChange}
+          onScroll={scrollbar.onScroll}
+          scrollEventThrottle={16}
         >
           {ListHeaderComponent}
           {items.length === 0 && ListEmptyComponent}
@@ -259,13 +259,7 @@ export function DraggableList<T>({
           {ListFooterComponent}
         </>
       )}
-      <WebDesktopScrollbarOverlay
-        enabled={showCustomScrollbar}
-        metrics={scrollbarMetrics}
-        onScrollToOffset={(nextOffset) => {
-          scrollViewRef.current?.scrollTo({ y: nextOffset, animated: false });
-        }}
-      />
+      {scrollbar.overlay}
     </View>
   );
 }

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";
@@ -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,13 @@ 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 +299,27 @@ 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 +410,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,

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

@@ -4,9 +4,6 @@ import {
   ActivityIndicator,
   FlatList,
   ListRenderItemInfo,
-  type LayoutChangeEvent,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
   Pressable,
   Text,
   View,
@@ -53,10 +50,7 @@ import { buildWorkspaceExplorerStateKey } from "@/hooks/use-file-explorer-action
 import { usePanelStore, type SortOption } from "@/stores/panel-store";
 import { formatTimeAgo } from "@/utils/time";
 import { buildAbsoluteExplorerPath } from "@/utils/explorer-paths";
-import {
-  WebDesktopScrollbarOverlay,
-  useWebDesktopScrollbarMetrics,
-} from "@/components/web-desktop-scrollbar";
+import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
 
 const SORT_OPTIONS: { value: SortOption; label: string }[] = [
   { value: "name", label: "Name" },
@@ -152,7 +146,9 @@ export function FileExplorerPane({
 
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set(["."]));
   const treeListRef = useRef<FlatList<TreeRow>>(null);
-  const treeScrollbarMetrics = useWebDesktopScrollbarMetrics();
+  const scrollbar = useWebScrollViewScrollbar(treeListRef, {
+    enabled: showDesktopWebScrollbar,
+  });
 
   const hasInitializedRef = useRef(false);
 
@@ -502,24 +498,6 @@ export function FileExplorerPane({
     });
   }, [errorRecoveryPath, hasWorkspaceScope, requestDirectoryListing, selectExplorerEntry]);
 
-  const handleTreeListScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (showDesktopWebScrollbar) {
-        treeScrollbarMetrics.onScroll(event);
-      }
-    },
-    [showDesktopWebScrollbar, treeScrollbarMetrics],
-  );
-
-  const handleTreeListLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      if (showDesktopWebScrollbar) {
-        treeScrollbarMetrics.onLayout(event);
-      }
-    },
-    [showDesktopWebScrollbar, treeScrollbarMetrics],
-  );
-
   if (!hasWorkspaceScope) {
     return (
       <View style={styles.centerState}>
@@ -598,27 +576,16 @@ export function FileExplorerPane({
             keyExtractor={(row) => row.entry.path}
             testID="file-explorer-tree-scroll"
             contentContainerStyle={styles.entriesContent}
-            onLayout={showDesktopWebScrollbar ? handleTreeListLayout : undefined}
-            onScroll={showDesktopWebScrollbar ? handleTreeListScroll : undefined}
-            onContentSizeChange={
-              showDesktopWebScrollbar ? treeScrollbarMetrics.onContentSizeChange : undefined
-            }
-            scrollEventThrottle={showDesktopWebScrollbar ? 16 : undefined}
+            onLayout={scrollbar.onLayout}
+            onScroll={scrollbar.onScroll}
+            onContentSizeChange={scrollbar.onContentSizeChange}
+            scrollEventThrottle={16}
             showsVerticalScrollIndicator={!showDesktopWebScrollbar}
             initialNumToRender={24}
             maxToRenderPerBatch={40}
             windowSize={12}
           />
-          <WebDesktopScrollbarOverlay
-            enabled={showDesktopWebScrollbar}
-            metrics={treeScrollbarMetrics}
-            onScrollToOffset={(nextOffset) => {
-              treeListRef.current?.scrollToOffset({
-                offset: nextOffset,
-                animated: false,
-              });
-            }}
-          />
+          {scrollbar.overlay}
         </View>
       )}
     </View>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   ActivityIndicator,
@@ -7,17 +7,11 @@ import {
   Text,
   View,
   Platform,
-  type LayoutChangeEvent,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
 } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { Fonts } from "@/constants/theme";
 import { useSessionStore, type ExplorerFile } from "@/stores/session-store";
-import {
-  WebDesktopScrollbarOverlay,
-  useWebDesktopScrollbarMetrics,
-} from "@/components/web-desktop-scrollbar";
+import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
 import {
   highlightCode,
   darkHighlightColors,
@@ -123,9 +117,10 @@ function FilePreviewBody({
   const colorMap = isDark ? darkHighlightColors : lightHighlightColors;
   const baseColor = isDark ? "#c9d1d9" : "#24292f";
 
-  const enablePreviewDesktopScrollbar = showDesktopWebScrollbar;
   const previewScrollRef = useRef<RNScrollView>(null);
-  const previewScrollbarMetrics = useWebDesktopScrollbarMetrics();
+  const scrollbar = useWebScrollViewScrollbar(previewScrollRef, {
+    enabled: showDesktopWebScrollbar,
+  });
 
   const highlightedLines = useMemo(() => {
     if (!preview || preview.kind !== "text") {
@@ -140,24 +135,6 @@ function FilePreviewBody({
     return lineNumberGutterWidth(highlightedLines.length);
   }, [highlightedLines]);
 
-  const handlePreviewScroll = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (enablePreviewDesktopScrollbar) {
-        previewScrollbarMetrics.onScroll(event);
-      }
-    },
-    [enablePreviewDesktopScrollbar, previewScrollbarMetrics],
-  );
-
-  const handlePreviewLayout = useCallback(
-    (event: LayoutChangeEvent) => {
-      if (enablePreviewDesktopScrollbar) {
-        previewScrollbarMetrics.onLayout(event);
-      }
-    },
-    [enablePreviewDesktopScrollbar, previewScrollbarMetrics],
-  );
-
   if (isLoading && !preview) {
     return (
       <View style={styles.centerState}>
@@ -197,13 +174,11 @@ function FilePreviewBody({
         <RNScrollView
           ref={previewScrollRef}
           style={styles.previewContent}
-          onLayout={enablePreviewDesktopScrollbar ? handlePreviewLayout : undefined}
-          onScroll={enablePreviewDesktopScrollbar ? handlePreviewScroll : undefined}
-          onContentSizeChange={
-            enablePreviewDesktopScrollbar ? previewScrollbarMetrics.onContentSizeChange : undefined
-          }
-          scrollEventThrottle={enablePreviewDesktopScrollbar ? 16 : undefined}
-          showsVerticalScrollIndicator={!enablePreviewDesktopScrollbar}
+          onLayout={scrollbar.onLayout}
+          onScroll={scrollbar.onScroll}
+          onContentSizeChange={scrollbar.onContentSizeChange}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={!showDesktopWebScrollbar}
         >
           {isMobile ? (
             <View style={styles.previewCodeScrollContent}>{codeLines}</View>
@@ -218,13 +193,7 @@ function FilePreviewBody({
             </RNScrollView>
           )}
         </RNScrollView>
-        <WebDesktopScrollbarOverlay
-          enabled={enablePreviewDesktopScrollbar}
-          metrics={previewScrollbarMetrics}
-          onScrollToOffset={(nextOffset) => {
-            previewScrollRef.current?.scrollTo({ y: nextOffset, animated: false });
-          }}
-        />
+        {scrollbar.overlay}
       </View>
     );
   }
@@ -236,13 +205,11 @@ function FilePreviewBody({
           ref={previewScrollRef}
           style={styles.previewContent}
           contentContainerStyle={styles.previewImageScrollContent}
-          onLayout={enablePreviewDesktopScrollbar ? handlePreviewLayout : undefined}
-          onScroll={enablePreviewDesktopScrollbar ? handlePreviewScroll : undefined}
-          onContentSizeChange={
-            enablePreviewDesktopScrollbar ? previewScrollbarMetrics.onContentSizeChange : undefined
-          }
-          scrollEventThrottle={enablePreviewDesktopScrollbar ? 16 : undefined}
-          showsVerticalScrollIndicator={!enablePreviewDesktopScrollbar}
+          onLayout={scrollbar.onLayout}
+          onScroll={scrollbar.onScroll}
+          onContentSizeChange={scrollbar.onContentSizeChange}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={!showDesktopWebScrollbar}
         >
           <RNImage
             source={{
@@ -252,13 +219,7 @@ function FilePreviewBody({
             resizeMode="contain"
           />
         </RNScrollView>
-        <WebDesktopScrollbarOverlay
-          enabled={enablePreviewDesktopScrollbar}
-          metrics={previewScrollbarMetrics}
-          onScrollToOffset={(nextOffset) => {
-            previewScrollRef.current?.scrollTo({ y: nextOffset, animated: false });
-          }}
-        />
+        {scrollbar.overlay}
       </View>
     );
   }

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

@@ -62,10 +62,7 @@ import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip
 import { GitHubIcon } from "@/components/icons/github-icon";
 import { buildGitActions, type GitActions } from "@/components/git-actions-policy";
 import { lineNumberGutterWidth } from "@/components/code-insets";
-import {
-  WebDesktopScrollbarOverlay,
-  useWebDesktopScrollbarMetrics,
-} from "@/components/web-desktop-scrollbar";
+import { useWebScrollViewScrollbar } from "@/components/use-web-scrollbar";
 import { buildNewAgentRoute, resolveNewAgentWorkingDir } from "@/utils/new-agent-routing";
 import { openExternalUrl } from "@/utils/open-external-url";
 import { GitActionsSplitButton } from "@/components/git-actions-split-button";
@@ -429,7 +426,9 @@ export function GitDiffPane({ serverId, workspaceId, cwd, hideHeaderRow }: GitDi
   const [isManualRefresh, setIsManualRefresh] = useState(false);
   const [expandedByPath, setExpandedByPath] = useState<Record<string, boolean>>({});
   const diffListRef = useRef<FlatList<DiffFlatItem>>(null);
-  const diffScrollbarMetrics = useWebDesktopScrollbarMetrics();
+  const scrollbar = useWebScrollViewScrollbar(diffListRef, {
+    enabled: showDesktopWebScrollbar,
+  });
   const diffListScrollOffsetRef = useRef(0);
   const diffListViewportHeightRef = useRef(0);
   const headerHeightByPathRef = useRef<Record<string, number>>({});
@@ -515,11 +514,9 @@ export function GitDiffPane({ serverId, workspaceId, cwd, hideHeaderRow }: GitDi
   const handleDiffListScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       diffListScrollOffsetRef.current = event.nativeEvent.contentOffset.y;
-      if (showDesktopWebScrollbar) {
-        diffScrollbarMetrics.onScroll(event);
-      }
+      scrollbar.onScroll(event);
     },
-    [diffScrollbarMetrics, showDesktopWebScrollbar],
+    [scrollbar.onScroll],
   );
 
   const handleDiffListLayout = useCallback(
@@ -529,11 +526,9 @@ export function GitDiffPane({ serverId, workspaceId, cwd, hideHeaderRow }: GitDi
         return;
       }
       diffListViewportHeightRef.current = height;
-      if (showDesktopWebScrollbar) {
-        diffScrollbarMetrics.onLayout(event);
-      }
+      scrollbar.onLayout(event);
     },
-    [diffScrollbarMetrics, showDesktopWebScrollbar],
+    [scrollbar.onLayout],
   );
 
   const computeHeaderOffset = useCallback(
@@ -844,9 +839,7 @@ export function GitDiffPane({ serverId, workspaceId, cwd, hideHeaderRow }: GitDi
         testID="git-diff-scroll"
         onLayout={handleDiffListLayout}
         onScroll={handleDiffListScroll}
-        onContentSizeChange={
-          showDesktopWebScrollbar ? diffScrollbarMetrics.onContentSizeChange : undefined
-        }
+        onContentSizeChange={scrollbar.onContentSizeChange}
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={!showDesktopWebScrollbar}
         onRefresh={handleRefresh}
@@ -1085,16 +1078,7 @@ export function GitDiffPane({ serverId, workspaceId, cwd, hideHeaderRow }: GitDi
 
       <View style={styles.diffContainer}>
         {bodyContent}
-        <WebDesktopScrollbarOverlay
-          enabled={showDesktopWebScrollbar && hasChanges}
-          metrics={diffScrollbarMetrics}
-          onScrollToOffset={(nextOffset) => {
-            diffListRef.current?.scrollToOffset({
-              offset: nextOffset,
-              animated: false,
-            });
-          }}
-        />
+        {hasChanges ? scrollbar.overlay : null}
       </View>
     </View>
   );

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

@@ -0,0 +1,18 @@
+import Svg, { Path } from "react-native-svg";
+
+interface CopilotIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function CopilotIcon({ size = 16, color = "currentColor" }: CopilotIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 512 416" fill={color}>
+      <Path
+        d="M181.33 266.143c0-11.497 9.32-20.818 20.818-20.818 11.498 0 20.819 9.321 20.819 20.818v38.373c0 11.497-9.321 20.818-20.819 20.818-11.497 0-20.818-9.32-20.818-20.818v-38.373zM308.807 245.325c-11.477 0-20.798 9.321-20.798 20.818v38.373c0 11.497 9.32 20.818 20.798 20.818 11.497 0 20.818-9.32 20.818-20.818v-38.373c0-11.497-9.32-20.818-20.818-20.818z"
+        fillRule="nonzero"
+      />
+      <Path d="M512.002 246.393v57.384c-.02 7.411-3.696 14.638-9.67 19.011C431.767 374.444 344.695 416 256 416c-98.138 0-196.379-56.542-246.33-93.21-5.975-4.374-9.65-11.6-9.671-19.012v-57.384a35.347 35.347 0 016.857-20.922l15.583-21.085c8.336-11.312 20.757-14.31 33.98-14.31 4.988-56.953 16.794-97.604 45.024-127.354C155.194 5.77 226.56 0 256 0c29.441 0 100.807 5.77 154.557 62.722 28.19 29.75 40.036 70.401 45.025 127.354 13.263 0 25.602 2.936 33.958 14.31l15.583 21.127c4.476 6.077 6.878 13.345 6.878 20.88zm-97.666-26.075c-.677-13.058-11.292-18.19-22.338-21.824-11.64 7.309-25.848 10.183-39.46 10.183-14.454 0-41.432-3.47-63.872-25.869-5.667-5.625-9.527-14.454-12.155-24.247a212.902 212.902 0 00-20.469-1.088c-6.098 0-13.099.349-20.551 1.088-2.628 9.793-6.509 18.622-12.155 24.247-22.4 22.4-49.418 25.87-63.872 25.87-13.612 0-27.86-2.855-39.501-10.184-11.005 3.613-21.558 8.828-22.277 21.824-1.17 24.555-1.272 49.11-1.375 73.645-.041 12.318-.082 24.658-.288 36.976.062 7.166 4.374 13.818 10.882 16.774 52.97 24.124 103.045 36.278 149.137 36.278 46.01 0 96.085-12.154 149.014-36.278 6.508-2.956 10.84-9.608 10.881-16.774.637-36.832.124-73.809-1.642-110.62h.041zM107.521 168.97c8.643 8.623 24.966 14.392 42.56 14.392 13.448 0 39.03-2.874 60.156-24.329 9.28-8.951 15.05-31.35 14.413-54.079-.657-18.231-5.769-33.28-13.448-39.665-8.315-7.371-27.203-10.574-48.33-8.644-22.399 2.238-41.267 9.588-50.875 19.833-20.798 22.728-16.323 80.317-4.476 92.492zm130.556-56.008c.637 3.51.965 7.35 1.273 11.517 0 2.875 0 5.77-.308 8.952 6.406-.636 11.847-.636 16.959-.636s10.553 0 16.959.636c-.329-3.182-.329-6.077-.329-8.952.329-4.167.657-8.007 1.294-11.517-6.735-.637-12.812-.965-17.924-.965s-11.21.328-17.924.965zm49.275-8.008c-.637 22.728 5.133 45.128 14.413 54.08 21.105 21.454 46.708 24.328 60.155 24.328 17.596 0 33.918-5.769 42.561-14.392 11.847-12.175 16.322-69.764-4.476-92.492-9.608-10.245-28.476-17.595-50.875-19.833-21.127-1.93-40.015 1.273-48.33 8.644-7.679 6.385-12.791 21.434-13.448 39.665z" />
+    </Svg>
+  );
+}

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

@@ -0,0 +1,19 @@
+import Svg, { Path } from "react-native-svg";
+
+interface OpenCodeIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function OpenCodeIcon({ size = 16, color = "currentColor" }: OpenCodeIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="96 64 288 384" fill={color}>
+      <Path d="M320 224V352H192V224H320Z" opacity={0.4} />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z"
+      />
+    </Svg>
+  );
+}

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

@@ -10,7 +10,14 @@ import {
   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,
@@ -370,14 +377,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 +461,7 @@ function MobileSidebar({
           const shouldClose = event.translationX < -windowWidth / 3 || event.velocityX < -500;
           if (shouldClose) {
             animateToClose();
-            runOnJS(handleClose)();
+            runOnJS(handleCloseFromGesture)();
           } else {
             animateToOpen();
           }
@@ -471,7 +480,7 @@ function MobileSidebar({
       backdropOpacity,
       animateToClose,
       animateToOpen,
-      handleClose,
+      handleCloseFromGesture,
     ],
   );
 
@@ -498,13 +507,11 @@ 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">
@@ -526,7 +533,7 @@ function MobileSidebar({
                 projects={projects}
                 isRefreshing={isManualRefresh && isRevalidating}
                 onRefresh={handleRefresh}
-                onWorkspacePress={closeToAgent}
+                onWorkspacePress={() => closeToAgent()}
                 onAddProject={handleOpenProject}
                 parentGestureRef={closeGestureRef}
               />
@@ -688,7 +695,8 @@ function DesktopSidebar({
   }
 
   return (
-    <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle, { paddingTop: insetsTop }]}>
+    <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}
@@ -796,32 +804,37 @@ function DesktopSidebar({
           style={[styles.resizeHandle, Platform.OS === "web" && ({ cursor: "col-resize" } as any)]}
         />
       </GestureDetector>
+      </View>
     </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,

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

@@ -12,7 +12,15 @@ import {
   Platform,
   BackHandler,
 } from "react-native";
-import { useState, useRef, useCallback, useEffect, useImperativeHandle, forwardRef } from "react";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Mic, MicOff, ArrowUp, Paperclip, Plus, X, Square } from "lucide-react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from "react-native-reanimated";
@@ -33,6 +41,7 @@ import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-ur
 import { focusWithRetries } from "@/utils/web-focus";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
+import { useWebElementScrollbar } from "@/components/use-web-scrollbar";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import type { MessageInputKeyboardActionKind } from "@/keyboard/actions";
 import {
@@ -570,6 +579,18 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     return null;
   }, []);
 
+  const webTextareaRef = useRef<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    if (IS_WEB) {
+      webTextareaRef.current = getWebTextArea() as HTMLElement | null;
+    }
+  }, [getWebTextArea]);
+
+  const inputScrollbar = useWebElementScrollbar(webTextareaRef, {
+    enabled: IS_WEB && inputHeight >= MAX_INPUT_HEIGHT,
+  });
+
   const getWebElement = useCallback((target: "root" | "wrapper"): HTMLElement | null => {
     const ref = target === "root" ? rootRef.current : inputWrapperRef.current;
     if (!ref) return null;
@@ -911,42 +932,45 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
         )}
 
         {/* Text input */}
-        <TextInput
-          ref={textInputRef}
-          value={value}
-          onChangeText={handleInputChange}
-          placeholder={placeholder}
-          placeholderTextColor={theme.colors.surface4}
-          accessibilityLabel="Message agent..."
-          onFocus={() => {
-            isInputFocusedRef.current = true;
-            onFocusChange?.(true);
-          }}
-          onBlur={() => {
-            isInputFocusedRef.current = false;
-            onFocusChange?.(false);
-          }}
-          style={[
-            styles.textInput,
-            IS_WEB
-              ? {
-                  height: inputHeight,
-                  minHeight: MIN_INPUT_HEIGHT,
-                  maxHeight: MAX_INPUT_HEIGHT,
-                }
-              : {
-                  minHeight: MIN_INPUT_HEIGHT,
-                  maxHeight: MAX_INPUT_HEIGHT,
-                },
-          ]}
-          multiline
-          scrollEnabled={IS_WEB ? inputHeight >= MAX_INPUT_HEIGHT : true}
-          onContentSizeChange={handleContentSizeChange}
-          editable={!isDictating && !isRealtimeVoiceForCurrentAgent && !disabled}
-          onKeyPress={shouldHandleDesktopSubmit ? handleDesktopKeyPress : undefined}
-          onSelectionChange={handleSelectionChange}
-          autoFocus={IS_WEB && autoFocus}
-        />
+        <View style={styles.textInputScrollWrapper}>
+          <TextInput
+            ref={textInputRef}
+            value={value}
+            onChangeText={handleInputChange}
+            placeholder={placeholder}
+            placeholderTextColor={theme.colors.surface4}
+            accessibilityLabel="Message agent..."
+            onFocus={() => {
+              isInputFocusedRef.current = true;
+              onFocusChange?.(true);
+            }}
+            onBlur={() => {
+              isInputFocusedRef.current = false;
+              onFocusChange?.(false);
+            }}
+            style={[
+              styles.textInput,
+              IS_WEB
+                ? {
+                    height: inputHeight,
+                    minHeight: MIN_INPUT_HEIGHT,
+                    maxHeight: MAX_INPUT_HEIGHT,
+                  }
+                : {
+                    minHeight: MIN_INPUT_HEIGHT,
+                    maxHeight: MAX_INPUT_HEIGHT,
+                  },
+            ]}
+            multiline
+            scrollEnabled={IS_WEB ? inputHeight >= MAX_INPUT_HEIGHT : true}
+            onContentSizeChange={handleContentSizeChange}
+            editable={!isDictating && !isRealtimeVoiceForCurrentAgent && !disabled}
+            onKeyPress={shouldHandleDesktopSubmit ? handleDesktopKeyPress : undefined}
+            onSelectionChange={handleSelectionChange}
+            autoFocus={IS_WEB && autoFocus}
+          />
+          {inputScrollbar}
+        </View>
 
         {/* Button row */}
         <View style={styles.buttonRow}>
@@ -1187,6 +1211,9 @@ const styles = StyleSheet.create(((theme: any) => ({
   removeImageButtonVisible: {
     opacity: 1,
   },
+  textInputScrollWrapper: {
+    position: "relative",
+  },
   textInput: {
     width: "100%",
     color: theme.colors.foreground,

packages/app/src/components/message.tsx

@@ -71,6 +71,7 @@ import { getMarkdownListMarker } from "@/utils/markdown-list";
 import { openExternalUrl } from "@/utils/open-external-url";
 import { markScrollInvestigationEvent } from "@/utils/scroll-jank-investigation";
 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";
@@ -1884,6 +1885,12 @@ 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/plan-card.tsx

@@ -0,0 +1,154 @@
+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, { flexShrink: 0 }]}>
+          <Text style={iconStyle}>{marker}</Text>
+          <Text style={[contentStyle, { flex: 1, flexShrink: 1, minWidth: 0 }]}>{children}</Text>
+        </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-icons.ts

@@ -1,10 +1,16 @@
 import { Bot } from "lucide-react-native";
 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,
   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/sidebar-workspace-list.tsx

@@ -27,6 +27,7 @@ import { type GestureType } from "react-native-gesture-handler";
 import * as Clipboard from "expo-clipboard";
 import {
   Archive,
+  CircleAlert,
   ChevronDown,
   ChevronRight,
   Copy,
@@ -37,6 +38,7 @@ import {
   Monitor,
   MoreVertical,
   Plus,
+  Trash2,
 } from "lucide-react-native";
 import { NestableScrollContainer } from "react-native-draggable-flatlist";
 import { DraggableList, type DraggableRenderItemInfo } from "./draggable-list";
@@ -52,13 +54,7 @@ import {
 } 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 { ContextMenuTrigger, useContextMenu } from "@/components/ui/context-menu";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -73,7 +69,7 @@ import { decideLongPressMove } from "@/utils/sidebar-gesture-arbitration";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
 import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
-import { getStatusDotColor } from "@/utils/status-dot-color";
+import { getStatusDotColor, isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
@@ -100,11 +96,20 @@ const workspaceKeyExtractor = (workspace: SidebarWorkspaceEntry) => workspace.wo
 const projectKeyExtractor = (project: SidebarProjectEntry) => project.projectKey;
 const EMPTY_WORKSPACES = new Map();
 const WORKSPACE_STATUS_DOT_WIDTH = 14;
-const GITHUB_PR_STATE_LABELS: Record<PrHint["state"], string> = {
-  open: "Open",
-  merged: "Merged",
-  closed: "Closed",
-};
+const DEFAULT_STATUS_DOT_SIZE = 7;
+const EMPHASIZED_STATUS_DOT_SIZE = 9;
+const DEFAULT_STATUS_DOT_OFFSET = 0;
+const EMPHASIZED_STATUS_DOT_OFFSET = -1;
+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[];
@@ -140,6 +145,8 @@ interface ProjectHeaderRowProps {
   isDragging: boolean;
   isArchiving?: boolean;
   menuController: ReturnType<typeof useContextMenu> | null;
+  onRemoveProject?: () => void;
+  removeProjectStatus?: "idle" | "pending";
   dragHandleProps?: DraggableListDragHandleProps;
 }
 
@@ -167,7 +174,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,17 +203,17 @@ function WorkspacePrBadge({ hint }: { hint: PrHint }) {
         pressed && styles.workspacePrBadgePressed,
       ]}
     >
-      <GitPullRequest size={12} color={activeColor} />
+      <GitPullRequest size={12} color={iconColor} />
       <Text
         style={[
           styles.workspacePrBadgeText,
-          { color: activeColor },
+          { color: textColor },
         ]}
         numberOfLines={1}
       >
-        #{hint.number} · {GITHUB_PR_STATE_LABELS[hint.state]}
+        #{hint.number}
       </Text>
-      {isHovered && <ExternalLink size={10} color={activeColor} />}
+      {isHovered && <ExternalLink size={10} color={textColor} />}
     </Pressable>
   );
 }
@@ -238,6 +246,14 @@ function WorkspaceStatusIndicator({
     );
   }
 
+  if (bucket === "needs_input") {
+    return (
+      <View style={styles.workspaceStatusDot}>
+        <CircleAlert size={14} color={theme.colors.palette.amber[500]} />
+      </View>
+    );
+  }
+
   const KindIcon =
     workspaceKind === "local_checkout"
       ? Monitor
@@ -247,6 +263,13 @@ function WorkspaceStatusIndicator({
   if (!KindIcon) return null;
 
   const dotColor = getStatusDotColor({ theme, bucket, showDoneAsInactive: false });
+  const statusDotSize = isEmphasizedStatusDotBucket(bucket)
+    ? EMPHASIZED_STATUS_DOT_SIZE
+    : DEFAULT_STATUS_DOT_SIZE;
+  const statusDotOffset =
+    statusDotSize === EMPHASIZED_STATUS_DOT_SIZE
+      ? EMPHASIZED_STATUS_DOT_OFFSET
+      : DEFAULT_STATUS_DOT_OFFSET;
 
   return (
     <View style={styles.workspaceStatusDot}>
@@ -258,6 +281,10 @@ function WorkspaceStatusIndicator({
             {
               backgroundColor: dotColor,
               borderColor: theme.colors.surface0,
+              width: statusDotSize,
+              height: statusDotSize,
+              right: statusDotOffset,
+              bottom: statusDotOffset,
             },
           ]}
         />
@@ -327,11 +354,26 @@ function ProjectLeadingVisual({
     );
   }
 
+  if (activeWorkspace.statusBucket === "needs_input") {
+    return (
+      <View style={styles.projectLeadingVisualSlot}>
+        <CircleAlert size={14} color={theme.colors.palette.amber[500]} />
+      </View>
+    );
+  }
+
   const dotColor = getStatusDotColor({
     theme,
     bucket: activeWorkspace.statusBucket,
     showDoneAsInactive: false,
   });
+  const statusDotSize = isEmphasizedStatusDotBucket(activeWorkspace.statusBucket)
+    ? EMPHASIZED_STATUS_DOT_SIZE
+    : DEFAULT_STATUS_DOT_SIZE;
+  const statusDotOffset =
+    statusDotSize === EMPHASIZED_STATUS_DOT_SIZE
+      ? EMPHASIZED_STATUS_DOT_OFFSET
+      : DEFAULT_STATUS_DOT_OFFSET;
 
   return (
     <View style={styles.projectLeadingVisualSlot}>
@@ -343,6 +385,10 @@ function ProjectLeadingVisual({
             {
               backgroundColor: dotColor,
               borderColor: theme.colors.surface0,
+              width: statusDotSize,
+              height: statusDotSize,
+              right: statusDotOffset,
+              bottom: statusDotOffset,
             },
           ]}
         />
@@ -661,8 +707,11 @@ function ProjectHeaderRow({
   isDragging,
   isArchiving = false,
   menuController,
+  onRemoveProject,
+  removeProjectStatus = "idle",
   dragHandleProps,
 }: ProjectHeaderRowProps) {
+  const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
   const isMobileBreakpoint = isCompactFormFactor();
   const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
@@ -749,16 +798,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>
@@ -1166,160 +1254,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,
@@ -1335,6 +1269,8 @@ function FlattenedProjectRow({
   isDragging,
   dragHandleProps,
   isProjectActive = false,
+  onRemoveProject,
+  removeProjectStatus,
 }: {
   project: SidebarProjectEntry;
   displayName: string;
@@ -1350,25 +1286,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}
@@ -1388,6 +1308,8 @@ function FlattenedProjectRow({
       drag={drag}
       isDragging={isDragging}
       menuController={null}
+      onRemoveProject={onRemoveProject}
+      removeProjectStatus={removeProjectStatus}
       dragHandleProps={dragHandleProps}
     />
   );
@@ -1558,6 +1480,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" ? (
@@ -1582,6 +1546,8 @@ function ProjectBlock({
           isDragging={isDragging}
           dragHandleProps={dragHandleProps}
           isProjectActive={isProjectActive}
+          onRemoveProject={handleRemoveProject}
+          removeProjectStatus={isRemovingProject ? "pending" : "idle"}
         />
       ) : (
         <>
@@ -1600,7 +1566,10 @@ function ProjectBlock({
             onWorktreeCreated={onWorktreeCreated}
             drag={drag}
             isDragging={isDragging}
+            isArchiving={isRemovingProject}
             menuController={null}
+            onRemoveProject={handleRemoveProject}
+            removeProjectStatus={isRemovingProject ? "pending" : "idle"}
             dragHandleProps={dragHandleProps}
           />
 
@@ -2101,6 +2070,26 @@ const styles = StyleSheet.create((theme) => ({
   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,
@@ -2184,10 +2173,10 @@ const styles = StyleSheet.create((theme) => ({
   },
   statusDotOverlay: {
     position: "absolute",
-    right: 0,
-    bottom: 0,
-    width: 7,
-    height: 7,
+    right: DEFAULT_STATUS_DOT_OFFSET,
+    bottom: DEFAULT_STATUS_DOT_OFFSET,
+    width: DEFAULT_STATUS_DOT_SIZE,
+    height: DEFAULT_STATUS_DOT_SIZE,
     borderRadius: theme.borderRadius.full,
     borderWidth: 1,
   },

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

@@ -23,21 +23,7 @@ const WEB_BOTTOM_SETTLE_TIMEOUT_MS = 200;
 const USER_SCROLL_DELTA_EPSILON = 1;
 const AUTO_SCROLL_BOTTOM_THRESHOLD_PX = 64;
 const AUTO_SCROLL_RESUME_THRESHOLD_PX = 1;
-const WEB_STREAM_SCROLLBAR_STYLE_ID = "web-stream-viewport-scrollbar-style";
-const WEB_STREAM_SCROLLBAR_STYLE = `
-  #agent-chat-scroll-web-dom-scroll,
-  #agent-chat-scroll-web-dom-virtualized {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  #agent-chat-scroll-web-dom-scroll::-webkit-scrollbar,
-  #agent-chat-scroll-web-dom-virtualized::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-`;
+import { useWebElementScrollbar } from "./use-web-scrollbar";
 
 function logWebStickyBottom(_event: string, _details: Record<string, unknown>): void {
   // Intentionally disabled: this path is too noisy during voice debugging.
@@ -119,8 +105,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
     scrollEnabled,
     isMobileBreakpoint,
   } = props;
-  const { WebDesktopScrollbarOverlay, useWebDesktopScrollbarMetrics } =
-    require("./web-desktop-scrollbar") as typeof import("./web-desktop-scrollbar");
   const scrollContainerRef = useRef<HTMLElement | null>(null);
   const contentRef = useRef<HTMLElement | null>(null);
   const [followOutput, setFollowOutputr] = useState(true);
@@ -142,8 +126,11 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   const lastTouchClientYRef = useRef<number | null>(null);
   const pendingAutoScrollFrameRef = useRef<number | null>(null);
   const pendingAutoScrollTimeoutRef = useRef<number | null>(null);
-  const streamScrollbarMetrics = useWebDesktopScrollbarMetrics();
   const showDesktopWebScrollbar = !isMobileBreakpoint;
+  const scrollbarOverlay = useWebElementScrollbar(scrollContainerRef, {
+    enabled: showDesktopWebScrollbar,
+    contentRef,
+  });
   const shouldUseVirtualizer = segments.historyVirtualized.length > 0;
   const {
     renderHistoryVirtualizedRow,
@@ -271,33 +258,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
       onNearBottomChange(true);
       return;
     }
-    streamScrollbarMetrics.onContentSizeChange(
-      scrollContainer.clientWidth,
-      scrollContainer.scrollHeight,
-    );
-    streamScrollbarMetrics.onLayout({
-      nativeEvent: {
-        layout: {
-          width: scrollContainer.clientWidth,
-          height: scrollContainer.clientHeight,
-          x: 0,
-          y: 0,
-        },
-      },
-    } as never);
-    streamScrollbarMetrics.onScroll({
-      nativeEvent: {
-        contentOffset: { x: 0, y: scrollContainer.scrollTop },
-        contentSize: {
-          width: scrollContainer.clientWidth,
-          height: scrollContainer.scrollHeight,
-        },
-        layoutMeasurement: {
-          width: scrollContainer.clientWidth,
-          height: scrollContainer.clientHeight,
-        },
-      },
-    } as never);
     syncNearBottom(scrollContainer, onNearBottomChange);
     const currentMetrics = {
       scrollTop: scrollContainer.scrollTop,
@@ -323,7 +283,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
         ...currentMetrics,
       });
     }
-  }, [onNearBottomChange, props.agentId, streamScrollbarMetrics]);
+  }, [onNearBottomChange, props.agentId]);
 
   const handleDomScroll = useCallback(() => {
     const scrollContainer = scrollContainerRef.current;
@@ -711,7 +671,6 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
 
   return (
     <>
-      <style id={WEB_STREAM_SCROLLBAR_STYLE_ID}>{WEB_STREAM_SCROLLBAR_STYLE}</style>
       <div
         ref={(node) => {
           scrollContainerRef.current = node;
@@ -759,20 +718,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
           {shouldRenderEmpty ? listEmptyComponent : null}
         </div>
       </div>
-      <WebDesktopScrollbarOverlay
-        enabled={showDesktopWebScrollbar}
-        metrics={streamScrollbarMetrics}
-        inverted={false}
-        onScrollToOffset={(nextOffset) => {
-          const scrollContainer = scrollContainerRef.current;
-          if (!scrollContainer) {
-            return;
-          }
-          scrollContainer.scrollTo({ top: nextOffset, behavior: "auto" });
-          lastKnownScrollTopRef.current = scrollContainer.scrollTop;
-          updateScrollMetrics();
-        }}
-      />
+      {scrollbarOverlay}
     </>
   );
 }

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

@@ -65,6 +65,7 @@ export interface ComboboxProps {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
   enableDismissOnClose?: boolean;
+  stackBehavior?: "push" | "switch" | "replace";
   desktopPlacement?: "top-start" | "bottom-start";
   /**
    * Prevents an initial frame at 0,0 by hiding desktop content until floating
@@ -145,8 +146,10 @@ export interface ComboboxItemProps {
   description?: string;
   kind?: "directory" | "file";
   leadingSlot?: ReactNode;
+  trailingSlot?: ReactNode;
   selected?: boolean;
   active?: boolean;
+  disabled?: boolean;
   onPress: () => void;
   testID?: string;
 }
@@ -156,8 +159,10 @@ export function ComboboxItem({
   description,
   kind,
   leadingSlot,
+  trailingSlot,
   selected,
   active,
+  disabled,
   onPress,
   testID,
 }: ComboboxItemProps): ReactElement {
@@ -178,12 +183,14 @@ export function ComboboxItem({
   return (
     <Pressable
       testID={testID}
+      disabled={disabled}
       onPress={onPress}
       style={({ pressed, hovered = false }) => [
         styles.comboboxItem,
         hovered && styles.comboboxItemHovered,
         pressed && styles.comboboxItemPressed,
         active && styles.comboboxItemActive,
+        disabled && styles.comboboxItemDisabled,
       ]}
     >
       {leadingContent}
@@ -197,9 +204,12 @@ export function ComboboxItem({
           </Text>
         ) : null}
       </View>
-      {selected ? (
-        <View style={styles.comboboxItemTrailingSlot}>
-          <Check size={16} color={theme.colors.foregroundMuted} />
+      {selected || trailingSlot ? (
+        <View style={styles.comboboxItemTrailingContainer}>
+          <View style={styles.comboboxItemTrailingSlot}>
+            {selected ? <Check size={16} color={theme.colors.foregroundMuted} /> : null}
+          </View>
+          {trailingSlot}
         </View>
       ) : null}
     </Pressable>
@@ -233,6 +243,7 @@ export function Combobox({
   open,
   onOpenChange,
   enableDismissOnClose,
+  stackBehavior,
   desktopPlacement = "top-start",
   desktopPreventInitialFlash = true,
   anchorRef,
@@ -642,6 +653,7 @@ export function Combobox({
         backdropComponent={renderBackdrop}
         enablePanDownToClose
         enableDismissOnClose={enableDismissOnClose}
+        stackBehavior={stackBehavior}
         backgroundComponent={ComboboxSheetBackground}
         handleIndicatorStyle={styles.bottomSheetHandle}
         keyboardBehavior="extend"
@@ -777,10 +789,18 @@ const styles = StyleSheet.create((theme) => ({
   comboboxItemActive: {
     backgroundColor: theme.colors.surface1,
   },
+  comboboxItemDisabled: {
+    opacity: 0.55,
+  },
   comboboxItemTrailingSlot: {
     width: 16,
     alignItems: "center",
     justifyContent: "center",
+  },
+  comboboxItemTrailingContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
     marginLeft: "auto",
   },
   comboboxItemContent: {

packages/app/src/components/use-web-scrollbar.tsx

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useState, type ReactNode, type RefObject } from "react";
+import {
+  Platform,
+  type FlatList,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type ScrollView,
+} from "react-native";
+import {
+  WebDesktopScrollbarOverlay,
+  useWebDesktopScrollbarMetrics,
+  type ScrollbarMetrics,
+} from "./web-desktop-scrollbar";
+
+const METRICS_EPSILON = 0.5;
+const HIDE_SCROLLBAR_STYLE_ID = "paseo-hide-scrollbar";
+
+function ensureHideScrollbarStyle(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(HIDE_SCROLLBAR_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = HIDE_SCROLLBAR_STYLE_ID;
+  style.textContent =
+    "[data-hide-scrollbar]::-webkit-scrollbar { display: none; width: 0; height: 0; }";
+  document.head.appendChild(style);
+}
+
+function metricsChanged(a: ScrollbarMetrics, b: ScrollbarMetrics): boolean {
+  return (
+    Math.abs(a.offset - b.offset) > METRICS_EPSILON ||
+    Math.abs(a.viewportSize - b.viewportSize) > METRICS_EPSILON ||
+    Math.abs(a.contentSize - b.contentSize) > METRICS_EPSILON
+  );
+}
+
+// ── DOM element scrollbar ────────────────────────────────────────────
+// Fully automatic: listens to scroll/input/resize events on the element,
+// hides the native scrollbar, and returns a themed overlay or null.
+
+export function useWebElementScrollbar(
+  elementRef: RefObject<HTMLElement | null>,
+  options?: {
+    enabled?: boolean;
+    contentRef?: RefObject<HTMLElement | null>;
+  },
+): ReactNode {
+  const isWeb = Platform.OS === "web";
+  const enabled = (options?.enabled ?? true) && isWeb;
+  const contentRef = options?.contentRef;
+
+  const [metrics, setMetrics] = useState<ScrollbarMetrics>({
+    offset: 0,
+    viewportSize: 0,
+    contentSize: 0,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+    const element = elementRef.current;
+    if (!element) return;
+
+    element.setAttribute("data-hide-scrollbar", "");
+    (element.style as any).scrollbarWidth = "none";
+    (element.style as any).msOverflowStyle = "none";
+    ensureHideScrollbarStyle();
+
+    function update() {
+      const el = elementRef.current;
+      if (!el) return;
+      const next: ScrollbarMetrics = {
+        offset: el.scrollTop,
+        viewportSize: el.clientHeight,
+        contentSize: el.scrollHeight,
+      };
+      setMetrics((prev) => (metricsChanged(prev, next) ? next : prev));
+    }
+
+    element.addEventListener("scroll", update, { passive: true });
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    const contentElement = contentRef?.current;
+    if (contentElement) {
+      resizeObserver.observe(contentElement);
+    }
+
+    update();
+
+    return () => {
+      element.removeEventListener("scroll", update);
+      resizeObserver.disconnect();
+      element.removeAttribute("data-hide-scrollbar");
+      (element.style as any).scrollbarWidth = "";
+      (element.style as any).msOverflowStyle = "";
+    };
+  }, [contentRef, elementRef, enabled]);
+
+  const onScrollToOffset = useCallback(
+    (offset: number) => {
+      elementRef.current?.scrollTo({ top: offset, behavior: "auto" });
+    },
+    [elementRef],
+  );
+
+  if (!enabled) return null;
+
+  return <WebDesktopScrollbarOverlay enabled metrics={metrics} onScrollToOffset={onScrollToOffset} />;
+}
+
+// ── RN ScrollView / FlatList scrollbar ───────────────────────────────
+// Returns event handlers to wire onto your ScrollView/FlatList plus
+// a renderable overlay. The overlay is null when disabled.
+
+interface WebScrollViewScrollbar {
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onLayout: (event: LayoutChangeEvent) => void;
+  onContentSizeChange: (width: number, height: number) => void;
+  overlay: ReactNode;
+}
+
+export function useWebScrollViewScrollbar(
+  scrollableRef: RefObject<ScrollView | FlatList | null>,
+  options?: { enabled?: boolean },
+): WebScrollViewScrollbar {
+  const isWeb = Platform.OS === "web";
+  const enabled = (options?.enabled ?? true) && isWeb;
+  const metricsHook = useWebDesktopScrollbarMetrics();
+
+  const onScrollToOffset = useCallback(
+    (offset: number) => {
+      const scrollable = scrollableRef.current;
+      if (!scrollable) return;
+      if ("scrollToOffset" in scrollable) {
+        (scrollable as FlatList).scrollToOffset({ offset, animated: false });
+      } else {
+        (scrollable as ScrollView).scrollTo({ y: offset, animated: false });
+      }
+    },
+    [scrollableRef],
+  );
+
+  const overlay: ReactNode = enabled ? (
+    <WebDesktopScrollbarOverlay enabled metrics={metricsHook} onScrollToOffset={onScrollToOffset} />
+  ) : null;
+
+  return {
+    onScroll: metricsHook.onScroll,
+    onLayout: metricsHook.onLayout,
+    onContentSizeChange: metricsHook.onContentSizeChange,
+    overlay,
+  };
+}

packages/app/src/components/web-desktop-scrollbar.tsx

@@ -37,7 +37,7 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(max, Math.max(min, value));
 }
 
-type ScrollbarMetrics = {
+export type ScrollbarMetrics = {
   offset: number;
   viewportSize: number;
   contentSize: number;

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

@@ -2,7 +2,7 @@ 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 {
@@ -20,6 +20,7 @@ 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 +119,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,
@@ -326,6 +346,21 @@ 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;

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

@@ -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>;
 }
 
@@ -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;
@@ -123,6 +132,8 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
         animateToOpen,
         animateToClose,
         isGesturing,
+        gestureAnimatingRef,
+        openGestureRef,
         closeGestureRef,
       }}
     >

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

@@ -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>;
 }
 
@@ -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

@@ -10,19 +10,19 @@ import {
   Play,
   Pause,
   RotateCw,
-  Terminal,
   Copy,
   FileText,
   Smartphone,
+  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,
+  getCliDaemonStatus,
   getDesktopDaemonLogs,
   getDesktopDaemonPairing,
   getDesktopDaemonStatus,
@@ -30,7 +30,6 @@ import {
   shouldUseDesktopDaemon,
   startDesktopDaemon,
   stopDesktopDaemon,
-  type CliSymlinkInstructions,
   type DesktopDaemonLogs,
   type DesktopDaemonStatus,
   type DesktopPairingOffer,
@@ -50,28 +49,26 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
   const [statusError, setStatusError] = useState<string | null>(null);
   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]) => {
+    return Promise.all([getDesktopDaemonStatus(), getDesktopDaemonLogs()])
+      .then(([status, logs]) => {
         setDaemonStatus(status);
         setDaemonLogs(logs);
-        setDaemonVersion(version.version);
+        setDaemonVersion(status.version);
         setStatusError(null);
       })
       .catch((error) => {
@@ -218,40 +215,6 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
     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) {
@@ -315,20 +278,47 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
       });
   }, [pairingOffer?.url]);
 
+  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;
+    }
+    void Clipboard.setStringAsync(cliStatusOutput)
+      .then(() => {
+        Alert.alert("Copied", "Status copied to clipboard.");
+      })
+      .catch((error) => {
+        console.error("[Settings] Failed to copy daemon status", error);
+      });
+  }, [cliStatusOutput]);
+
   if (!showSection) {
     return null;
   }
 
   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"
         >
@@ -336,10 +326,10 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
         </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 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>
@@ -348,10 +338,10 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
         </View>
         {showLifecycleControls ? (
           <>
-            <View style={[styles.row, styles.rowBorder]}>
-              <View style={styles.rowContent}>
-                <Text style={styles.rowTitle}>Daemon management</Text>
-                <Text style={styles.hintText}>
+            <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."}
@@ -379,10 +369,10 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
                     : "Pause"}
               </Button>
             </View>
-            <View style={[styles.row, styles.rowBorder]}>
-              <View style={styles.rowContent}>
-                <Text style={styles.rowTitle}>{daemonActionLabel}</Text>
-                <Text style={styles.hintText}>{daemonActionMessage}</Text>
+            <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
@@ -401,26 +391,10 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
             </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 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 ? (
@@ -444,10 +418,10 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
             </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 style={[settingsStyles.row, settingsStyles.rowBorder]}>
+          <View style={settingsStyles.rowContent}>
+            <Text style={settingsStyles.rowTitle}>Pair device</Text>
+            <Text style={settingsStyles.rowHint}>Connect your phone to this computer.</Text>
           </View>
           <Button
             variant="outline"
@@ -458,6 +432,23 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
             Pair device
           </Button>
         </View>
+        <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
+          <View style={settingsStyles.rowContent}>
+            <Text style={settingsStyles.rowTitle}>Full status</Text>
+            <Text style={settingsStyles.rowHint}>
+              Runs `paseo daemon status` and shows the output.
+            </Text>
+          </View>
+          <Button
+            variant="outline"
+            size="sm"
+            leftIcon={<Activity size={theme.iconSize.sm} color={theme.colors.foreground} />}
+            onPress={() => void handleOpenCliStatus()}
+            disabled={isLoadingCliStatus}
+          >
+            {isLoadingCliStatus ? "Loading..." : "View status"}
+          </Button>
+        </View>
       </View>
 
       {daemonVersionMismatch ? (
@@ -469,33 +460,6 @@ export function LocalDaemonSection({ appVersion, showLifecycleControls }: LocalD
         </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)}
@@ -518,12 +482,34 @@ 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>
   );
 }
@@ -581,7 +567,7 @@ function PairingOfferDialogContent(input: {
     return (
       <View style={styles.pairingState}>
         <ActivityIndicator size="small" />
-        <Text style={styles.hintText}>Loading pairing offer…</Text>
+        <Text style={settingsStyles.rowHint}>Loading pairing offer…</Text>
       </View>
     );
   }
@@ -589,7 +575,7 @@ function PairingOfferDialogContent(input: {
   if (statusMessage) {
     return (
       <View style={styles.modalBody}>
-        <Text style={styles.hintText}>{statusMessage}</Text>
+        <Text style={settingsStyles.rowHint}>{statusMessage}</Text>
       </View>
     );
   }
@@ -597,21 +583,21 @@ function PairingOfferDialogContent(input: {
   if (!pairingOffer?.url) {
     return (
       <View style={styles.modalBody}>
-        <Text style={styles.hintText}>Pairing offer unavailable.</Text>
+        <Text style={settingsStyles.rowHint}>Pairing offer unavailable.</Text>
       </View>
     );
   }
 
   return (
     <View style={styles.modalBody}>
-      <Text style={styles.hintText}>
+      <Text style={settingsStyles.rowHint}>
         Scan this QR code in Paseo, or copy the pairing link below.
       </Text>
       <View style={styles.qrCard}>
         {qrDataUrl ? (
           <Image source={{ uri: qrDataUrl }} style={styles.qrImage} resizeMode="contain" />
         ) : qrError ? (
-          <Text style={styles.hintText}>QR unavailable: {qrError}</Text>
+          <Text style={settingsStyles.rowHint}>QR unavailable: {qrError}</Text>
         ) : (
           <ActivityIndicator size="small" />
         )}
@@ -632,37 +618,6 @@ function PairingOfferDialogContent(input: {
 }
 
 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],
@@ -673,10 +628,6 @@ const styles = StyleSheet.create((theme) => ({
     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 +637,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,

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

@@ -0,0 +1,189 @@
+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,
+  },
+}));

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

@@ -10,6 +10,8 @@ export type DesktopDaemonStatus = {
   hostname: string | null;
   pid: number | null;
   home: string;
+  version: string | null;
+  desktopManaged: boolean;
   error: string | null;
 };
 
@@ -24,12 +26,6 @@ export type DesktopPairingOffer = {
   qr: string | null;
 };
 
-export type CliSymlinkInstructions = {
-  title: string;
-  detail: string;
-  commands: string;
-};
-
 export type LocalTransportTarget = {
   transportType: "socket" | "pipe";
   transportPath: string;
@@ -86,6 +82,8 @@ function parseDesktopDaemonStatus(raw: unknown): DesktopDaemonStatus {
     hostname: toStringOrNull(raw.hostname),
     pid: toNumberOrNull(raw.pid),
     home: toStringOrNull(raw.home) ?? "",
+    version: toStringOrNull(raw.version),
+    desktopManaged: raw.desktopManaged === true,
     error: toStringOrNull(raw.error),
   };
 }
@@ -111,17 +109,6 @@ function parseDesktopPairingOffer(raw: unknown): DesktopPairingOffer {
   };
 }
 
-function parseCliSymlinkInstructionsInternal(raw: unknown): CliSymlinkInstructions | null {
-  if (!isRecord(raw)) {
-    return null;
-  }
-  return {
-    title: toStringOrNull(raw.title) ?? "",
-    detail: toStringOrNull(raw.detail) ?? "",
-    commands: toStringOrNull(raw.commands) ?? "",
-  };
-}
-
 export function shouldUseDesktopDaemon(): boolean {
   return isElectronRuntime();
 }
@@ -150,16 +137,12 @@ export async function getDesktopDaemonPairing(): Promise<DesktopPairingOffer> {
   return parseDesktopPairingOffer(await invokeDesktopCommand("desktop_daemon_pairing"));
 }
 
-export function parseCliSymlinkInstructions(raw: unknown): CliSymlinkInstructions {
-  const instructions = parseCliSymlinkInstructionsInternal(raw);
-  if (!instructions) {
-    throw new Error("Unexpected CLI symlink instructions response.");
+export async function getCliDaemonStatus(): Promise<string> {
+  const raw = await invokeDesktopCommand<unknown>("cli_daemon_status");
+  if (typeof raw !== "string") {
+    throw new Error("Unexpected CLI daemon status response.");
   }
-  return instructions;
-}
-
-export async function getCliSymlinkInstructions(): Promise<CliSymlinkInstructions> {
-  return parseCliSymlinkInstructions(await invokeDesktopCommand("cli_symlink_instructions"));
+  return raw;
 }
 
 export type LocalTransportEventUnlisten = () => void;
@@ -212,3 +195,34 @@ export async function sendLocalTransportMessage(input: {
 export async function closeLocalTransportSession(sessionId: string): Promise<void> {
   await invokeDesktopCommand("close_local_daemon_transport", { sessionId });
 }
+
+// ---------------------------------------------------------------------------
+// Integrations
+// ---------------------------------------------------------------------------
+
+export interface InstallStatus {
+  installed: boolean;
+}
+
+function parseInstallStatus(raw: unknown): InstallStatus {
+  if (!isRecord(raw)) {
+    throw new Error("Unexpected install status response.");
+  }
+  return { installed: raw.installed === true };
+}
+
+export async function getCliInstallStatus(): Promise<InstallStatus> {
+  return parseInstallStatus(await invokeDesktopCommand("get_cli_install_status"));
+}
+
+export async function installCli(): Promise<InstallStatus> {
+  return parseInstallStatus(await invokeDesktopCommand("install_cli"));
+}
+
+export async function getSkillsInstallStatus(): Promise<InstallStatus> {
+  return parseInstallStatus(await invokeDesktopCommand("get_skills_install_status"));
+}
+
+export async function installSkills(): Promise<InstallStatus> {
+  return parseInstallStatus(await invokeDesktopCommand("install_skills"));
+}

packages/app/src/desktop/host.ts

@@ -79,6 +79,7 @@ export interface DesktopInvokeBridge {
 export interface DesktopHostBridge {
   platform?: string;
   invoke?: DesktopInvokeBridge["invoke"];
+  getPendingOpenProject?: () => Promise<string | null>;
   events?: DesktopEventsBridge;
   window?: DesktopWindowModuleBridge;
   dialog?: DesktopDialogBridge;

packages/app/src/hooks/use-agent-autocomplete.ts

@@ -62,12 +62,14 @@ function normalizeDraftCommandConfig(
   const modeId = draftConfig.modeId?.trim() ?? "";
   const model = draftConfig.model?.trim() ?? "";
   const thinkingOptionId = draftConfig.thinkingOptionId?.trim() ?? "";
+  const featureValues = draftConfig.featureValues;
   return {
     provider: draftConfig.provider,
     cwd,
     ...(modeId ? { modeId } : {}),
     ...(model ? { model } : {}),
     ...(thinkingOptionId ? { thinkingOptionId } : {}),
+    ...(featureValues && Object.keys(featureValues).length > 0 ? { featureValues } : {}),
   };
 }
 

packages/app/src/hooks/use-agent-commands-query.ts

@@ -16,6 +16,7 @@ export interface DraftCommandConfig {
   modeId?: string;
   model?: string;
   thinkingOptionId?: string;
+  featureValues?: Record<string, unknown>;
 }
 
 function commandsQueryKey(serverId: string, agentId: string, draftConfig?: DraftCommandConfig) {
@@ -28,6 +29,7 @@ function commandsQueryKey(serverId: string, agentId: string, draftConfig?: Draft
     draftConfig?.modeId ?? null,
     draftConfig?.model ?? null,
     draftConfig?.thinkingOptionId ?? null,
+    draftConfig?.featureValues ?? null,
   ] as const;
 }
 

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

@@ -444,6 +444,31 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
 
   const availableModels = providerModelsQuery.data ?? null;
 
+  const providerModesQuery = useQuery({
+    queryKey: ["providerModes", formState.serverId, formState.provider, debouncedCwd],
+    enabled: Boolean(
+      isVisible &&
+        isTargetDaemonReady &&
+        formState.serverId &&
+        client &&
+        isConnected &&
+        providerDefinitionMap.has(formState.provider),
+    ),
+    staleTime: 5 * 60 * 1000,
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+      const payload = await client.listProviderModes(formState.provider, {
+        cwd: debouncedCwd,
+      });
+      if (payload.error) {
+        throw new Error(payload.error);
+      }
+      return payload.modes ?? [];
+    },
+  });
+
   const allProviderModelQueries = useQueries({
     queries: providerDefinitions.map((def) => ({
       queryKey: ["providerModels", formState.serverId, def.id],
@@ -722,7 +747,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
   ]);
 
   const agentDefinition = providerDefinitionMap.get(formState.provider);
-  const modeOptions = agentDefinition?.modes ?? [];
+  const modeOptions = providerModesQuery.data ?? agentDefinition?.modes ?? [];
   const effectiveModel = resolveEffectiveModel(availableModels, formState.model);
   const resolvedModelId = effectiveModel?.id ?? formState.model;
   const availableThinkingOptions = effectiveModel?.thinkingOptions ?? [];

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

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import type {
+  AgentFeature,
+  AgentProvider,
+  AgentSessionConfig,
+} from "@server/server/agent/agent-sdk-types";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+
+function pruneFeatureValues(
+  featureValues: Record<string, unknown>,
+  features: AgentFeature[],
+): Record<string, unknown> {
+  const allowedFeatureIds = new Set(features.map((feature) => feature.id));
+  let changed = false;
+  const next: Record<string, unknown> = {};
+
+  for (const [featureId, value] of Object.entries(featureValues)) {
+    if (!allowedFeatureIds.has(featureId)) {
+      changed = true;
+      continue;
+    }
+    next[featureId] = value;
+  }
+
+  return changed ? next : featureValues;
+}
+
+function applyFeatureValues(
+  features: AgentFeature[],
+  featureValues: Record<string, unknown>,
+): AgentFeature[] {
+  if (Object.keys(featureValues).length === 0) {
+    return features;
+  }
+
+  return features.map((feature) => {
+    if (!Object.prototype.hasOwnProperty.call(featureValues, feature.id)) {
+      return feature;
+    }
+
+    return {
+      ...feature,
+      value: featureValues[feature.id],
+    } as AgentFeature;
+  });
+}
+
+type DraftFeatureConfig = Pick<
+  AgentSessionConfig,
+  "provider" | "cwd" | "modeId" | "model" | "thinkingOptionId"
+>;
+
+export function useDraftAgentFeatures(input: {
+  serverId: string | null | undefined;
+  provider: AgentProvider;
+  cwd: string | null | undefined;
+  modeId: string | null | undefined;
+  modelId: string | null | undefined;
+  thinkingOptionId: string | null | undefined;
+}) {
+  const { serverId, provider, cwd, modeId, modelId, thinkingOptionId } = input;
+  const [featureValues, setFeatureValues] = useState<Record<string, unknown>>({});
+  const client = useHostRuntimeClient(serverId ?? "");
+  const isConnected = useHostRuntimeIsConnected(serverId ?? "");
+  const normalizedCwd = cwd?.trim() || "";
+
+  const draftConfig = useMemo<DraftFeatureConfig | null>(() => {
+    if (!normalizedCwd) {
+      return null;
+    }
+
+    return {
+      provider,
+      cwd: normalizedCwd,
+      ...(modeId ? { modeId } : {}),
+      ...(modelId ? { model: modelId } : {}),
+      ...(thinkingOptionId ? { thinkingOptionId } : {}),
+    };
+  }, [modeId, modelId, normalizedCwd, provider, thinkingOptionId]);
+
+  const featuresQuery = useQuery({
+    queryKey: [
+      "providerFeatures",
+      serverId ?? null,
+      provider,
+      normalizedCwd || null,
+      modeId ?? null,
+      modelId ?? null,
+      thinkingOptionId ?? null,
+    ],
+    enabled: Boolean(serverId && client && isConnected && draftConfig),
+    staleTime: 5 * 60 * 1000,
+    queryFn: async () => {
+      if (!client || !draftConfig) {
+        throw new Error("Host is not connected");
+      }
+      const payload = await client.listProviderFeatures(draftConfig);
+      if (payload.error) {
+        throw new Error(payload.error);
+      }
+      return payload.features ?? [];
+    },
+  });
+
+  const features = useMemo(() => {
+    return applyFeatureValues(featuresQuery.data ?? [], featureValues);
+  }, [featureValues, featuresQuery.data]);
+
+  useEffect(() => {
+    const next = pruneFeatureValues(featureValues, features);
+    if (next !== featureValues) {
+      setFeatureValues(next);
+    }
+  }, [featureValues, features]);
+
+  const effectiveFeatureValues = Object.keys(featureValues).length > 0 ? featureValues : undefined;
+  const setFeatureValue = useCallback((featureId: string, value: unknown) => {
+    setFeatureValues((current) => {
+      if (Object.is(current[featureId], value)) {
+        return current;
+      }
+
+      return { ...current, [featureId]: value };
+    });
+  }, []);
+
+  return {
+    features,
+    featureValues: effectiveFeatureValues,
+    isLoading: featuresQuery.isLoading,
+    setFeatureValue,
+  };
+}

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import { Extrapolation, interpolate, runOnJS, useSharedValue } from "react-native-reanimated";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
@@ -9,14 +9,28 @@ interface UseExplorerOpenGestureParams {
 }
 
 export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestureParams) {
-  const { translateX, backdropOpacity, windowWidth, animateToOpen, animateToClose, isGesturing } =
-    useExplorerSidebarAnimation();
+  const {
+    translateX,
+    backdropOpacity,
+    windowWidth,
+    animateToOpen,
+    animateToClose,
+    isGesturing,
+    gestureAnimatingRef,
+    openGestureRef,
+  } = useExplorerSidebarAnimation();
   const touchStartX = useSharedValue(0);
   const touchStartY = useSharedValue(0);
 
+  const handleGestureOpen = useCallback(() => {
+    gestureAnimatingRef.current = true;
+    onOpen();
+  }, [onOpen, gestureAnimatingRef]);
+
   return useMemo(
     () =>
       Gesture.Pan()
+        .withRef(openGestureRef)
         .enabled(enabled)
         .manualActivation(true)
         .onTouchesDown((event) => {
@@ -78,7 +92,7 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
           const shouldOpen = shouldOpenByPosition || shouldOpenByVelocity;
           if (shouldOpen) {
             animateToOpen();
-            runOnJS(onOpen)();
+            runOnJS(handleGestureOpen)();
           } else {
             animateToClose();
           }
@@ -94,7 +108,8 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
       animateToOpen,
       animateToClose,
       isGesturing,
-      onOpen,
+      openGestureRef,
+      handleGestureOpen,
       touchStartX,
       touchStartY,
     ],

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

@@ -1,6 +1,11 @@
 import { describe, expect, it } from "vitest";
 
-import { mergeProviderPreferences } from "./use-form-preferences";
+import {
+  buildFavoriteModelKey,
+  isFavoriteModel,
+  mergeProviderPreferences,
+  toggleFavoriteModel,
+} from "./use-form-preferences";
 
 describe("mergeProviderPreferences", () => {
   it("stores the selected model for a provider", () => {
@@ -55,3 +60,92 @@ describe("mergeProviderPreferences", () => {
     });
   });
 });
+
+describe("favorite model preferences", () => {
+  it("builds a stable favorite key from provider and model", () => {
+    expect(buildFavoriteModelKey({ provider: "claude", modelId: "sonnet-4.6" })).toBe(
+      "claude:sonnet-4.6",
+    );
+  });
+
+  it("adds a model to favorites without dropping other preferences", () => {
+    expect(
+      toggleFavoriteModel({
+        preferences: {
+          provider: "claude",
+          providerPreferences: {
+            claude: {
+              model: "claude-sonnet-4-6",
+            },
+          },
+        },
+        provider: "codex",
+        modelId: "gpt-5.4",
+      }),
+    ).toEqual({
+      provider: "claude",
+      providerPreferences: {
+        claude: {
+          model: "claude-sonnet-4-6",
+        },
+      },
+      favoriteModels: [
+        {
+          provider: "codex",
+          modelId: "gpt-5.4",
+        },
+      ],
+    });
+  });
+
+  it("removes a model from favorites when toggled again", () => {
+    expect(
+      toggleFavoriteModel({
+        preferences: {
+          favoriteModels: [
+            {
+              provider: "codex",
+              modelId: "gpt-5.4",
+            },
+          ],
+        },
+        provider: "codex",
+        modelId: "gpt-5.4",
+      }),
+    ).toEqual({
+      favoriteModels: [],
+    });
+  });
+
+  it("reports whether a model is favorited", () => {
+    expect(
+      isFavoriteModel({
+        preferences: {
+          favoriteModels: [
+            {
+              provider: "codex",
+              modelId: "gpt-5.4",
+            },
+          ],
+        },
+        provider: "codex",
+        modelId: "gpt-5.4",
+      }),
+    ).toBe(true);
+
+    expect(
+      isFavoriteModel({
+        preferences: {
+          favoriteModels: [
+            {
+              provider: "codex",
+              modelId: "gpt-5.4",
+            },
+          ],
+        },
+        provider: "claude",
+        modelId: "sonnet-4.6",
+      }),
+    ).toBe(false);
+  });
+});

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

@@ -7,6 +7,20 @@ import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
 const FORM_PREFERENCES_STORAGE_KEY = "@paseo:create-agent-preferences";
 const FORM_PREFERENCES_QUERY_KEY = ["form-preferences"];
 
+export interface FavoriteModelPreference {
+  provider: string;
+  modelId: string;
+}
+
+export interface FavoriteModelRow {
+  favoriteKey: string;
+  provider: string;
+  providerLabel: string;
+  modelId: string;
+  modelLabel: string;
+  description?: string;
+}
+
 const providerPreferencesSchema = z.object({
   model: z.string().optional(),
   mode: z.string().optional(),
@@ -16,6 +30,12 @@ const providerPreferencesSchema = z.object({
 const formPreferencesSchema = z.object({
   provider: z.string().optional(),
   providerPreferences: z.record(providerPreferencesSchema).optional(),
+  favoriteModels: z.array(
+    z.object({
+      provider: z.string(),
+      modelId: z.string(),
+    }),
+  ).optional(),
 });
 
 export type ProviderPreferences = z.infer<typeof providerPreferencesSchema>;
@@ -66,6 +86,41 @@ export function mergeProviderPreferences(args: {
   };
 }
 
+export function buildFavoriteModelKey(input: FavoriteModelPreference): string {
+  return `${input.provider}:${input.modelId}`;
+}
+
+export function isFavoriteModel(args: {
+  preferences: FormPreferences;
+  provider: string;
+  modelId: string;
+}): boolean {
+  const favoriteKey = buildFavoriteModelKey({ provider: args.provider, modelId: args.modelId });
+  return (args.preferences.favoriteModels ?? []).some(
+    (favorite) => buildFavoriteModelKey(favorite) === favoriteKey,
+  );
+}
+
+export function toggleFavoriteModel(args: {
+  preferences: FormPreferences;
+  provider: string;
+  modelId: string;
+}): FormPreferences {
+  const favorite = { provider: args.provider, modelId: args.modelId };
+  const favoriteKey = buildFavoriteModelKey(favorite);
+  const existingFavorites = args.preferences.favoriteModels ?? [];
+  const hasFavorite = existingFavorites.some(
+    (entry) => buildFavoriteModelKey(entry) === favoriteKey,
+  );
+
+  return {
+    ...args.preferences,
+    favoriteModels: hasFavorite
+      ? existingFavorites.filter((entry) => buildFavoriteModelKey(entry) !== favoriteKey)
+      : [...existingFavorites, favorite],
+  };
+}
+
 export function useFormPreferences(): UseFormPreferencesReturn {
   const queryClient = useQueryClient();
   const { data, isPending } = useQuery({

packages/app/src/keyboard/focus-scope.test.ts

@@ -0,0 +1,80 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { resolveKeyboardFocusScope } from "./focus-scope";
+
+class FakeNode {
+  parentElement: FakeElement | null = null;
+}
+
+class FakeElement extends FakeNode {
+  tagName: string;
+  isContentEditable = false;
+  private selectors: Set<string>;
+
+  constructor(input?: { tagName?: string; selectors?: string[]; isContentEditable?: boolean }) {
+    super();
+    this.tagName = (input?.tagName ?? "div").toUpperCase();
+    this.selectors = new Set(input?.selectors ?? []);
+    if (input?.isContentEditable) {
+      this.isContentEditable = true;
+    }
+  }
+
+  closest(selector: string): FakeElement | null {
+    if (this.selectors.has(selector)) {
+      return this;
+    }
+    return this.parentElement?.closest(selector) ?? null;
+  }
+}
+
+describe("resolveKeyboardFocusScope", () => {
+  const globalRef = globalThis as {
+    Element?: unknown;
+    Node?: unknown;
+    document?: { activeElement?: unknown };
+  };
+  const originalElement = globalRef.Element;
+  const originalNode = globalRef.Node;
+  const originalDocument = globalRef.document;
+
+  beforeEach(() => {
+    globalRef.Element = FakeElement;
+    globalRef.Node = FakeNode;
+    globalRef.document = { activeElement: null };
+  });
+
+  afterEach(() => {
+    globalRef.Element = originalElement;
+    globalRef.Node = originalNode;
+    globalRef.document = originalDocument;
+  });
+
+  it("resolves terminal scope from the direct keyboard event target", () => {
+    const target = new FakeElement({ selectors: [".xterm"] });
+    const scope = resolveKeyboardFocusScope({
+      target: target as unknown as EventTarget,
+      commandCenterOpen: false,
+    });
+    expect(scope).toBe("terminal");
+  });
+
+  it("falls back to activeElement when target is not an Element", () => {
+    const activeElement = new FakeElement({ selectors: [".xterm"] });
+    globalRef.document = { activeElement };
+    const scope = resolveKeyboardFocusScope({
+      target: null,
+      commandCenterOpen: false,
+    });
+    expect(scope).toBe("terminal");
+  });
+
+  it("detects editable scope from activeElement fallback", () => {
+    const activeElement = new FakeElement({ tagName: "input" });
+    globalRef.document = { activeElement };
+    const scope = resolveKeyboardFocusScope({
+      target: null,
+      commandCenterOpen: false,
+    });
+    expect(scope).toBe("editable");
+  });
+});

packages/app/src/keyboard/focus-scope.ts

@@ -1,37 +1,77 @@
 import type { KeyboardFocusScope } from "@/keyboard/actions";
 
+function isElement(value: unknown): value is Element {
+  return typeof Element !== "undefined" && value instanceof Element;
+}
+
+function getFocusCandidateElements(target: EventTarget | null): Element[] {
+  const candidates: Element[] = [];
+  const pushUnique = (element: Element | null) => {
+    if (!element || candidates.includes(element)) {
+      return;
+    }
+    candidates.push(element);
+  };
+
+  if (isElement(target)) {
+    pushUnique(target);
+  }
+
+  if (typeof Node !== "undefined" && target instanceof Node) {
+    pushUnique(isElement(target.parentElement) ? target.parentElement : null);
+  }
+
+  if (typeof document !== "undefined" && isElement(document.activeElement)) {
+    pushUnique(document.activeElement);
+  }
+
+  return candidates;
+}
+
 export function resolveKeyboardFocusScope(input: {
   target: EventTarget | null;
   commandCenterOpen: boolean;
 }): KeyboardFocusScope {
   const { target, commandCenterOpen } = input;
-  if (!(target instanceof Element)) {
+  const candidates = getFocusCandidateElements(target);
+  if (candidates.length === 0) {
     return commandCenterOpen ? "command-center" : "other";
   }
 
-  if (target.closest("[data-testid='terminal-surface']") || target.closest(".xterm")) {
+  if (
+    candidates.some((element) =>
+      Boolean(element.closest("[data-testid='terminal-surface']") || element.closest(".xterm")),
+    )
+  ) {
     return "terminal";
   }
 
   if (
     commandCenterOpen &&
-    (target.closest("[data-testid='command-center-panel']") ||
-      target.closest("[data-testid='command-center-input']"))
+    candidates.some((element) =>
+      Boolean(
+        element.closest("[data-testid='command-center-panel']") ||
+          element.closest("[data-testid='command-center-input']"),
+      ),
+    )
   ) {
     return "command-center";
   }
 
-  if (target.closest("[data-testid='message-input-root']")) {
+  if (candidates.some((element) => Boolean(element.closest("[data-testid='message-input-root']")))) {
     return "message-input";
   }
 
-  const editable = target as HTMLElement;
-  if (editable.isContentEditable) {
-    return commandCenterOpen ? "command-center" : "editable";
-  }
-
-  const tag = target.tagName.toLowerCase();
-  if (tag === "input" || tag === "textarea" || tag === "select") {
+  if (
+    candidates.some((element) => {
+      const editable = element as HTMLElement;
+      if (editable.isContentEditable) {
+        return true;
+      }
+      const tag = element.tagName.toLowerCase();
+      return tag === "input" || tag === "textarea" || tag === "select";
+    })
+  ) {
     return commandCenterOpen ? "command-center" : "editable";
   }
 

packages/app/src/panels/agent-panel.tsx

@@ -11,9 +11,8 @@ import { AgentInputArea } from "@/components/agent-input-area";
 import { ArchivedAgentCallout } from "@/components/archived-agent-callout";
 import { FileDropZone } from "@/components/file-drop-zone";
 import type { ImageAttachment } from "@/components/message-input";
+import { getProviderIcon } from "@/components/provider-icons";
 import { ToastViewport, useToastHost } from "@/components/toast-host";
-import { ClaudeIcon } from "@/components/icons/claude-icon";
-import { CodexIcon } from "@/components/icons/codex-icon";
 import { useAgentAttentionClear } from "@/hooks/use-agent-attention-clear";
 import { useAgentInitialization } from "@/hooks/use-agent-initialization";
 import {
@@ -51,16 +50,14 @@ import {
 } from "@/screens/agent/agent-ready-screen-bottom-anchor";
 
 function formatProviderLabel(provider: Agent["provider"]): string {
-  if (provider === "claude") {
-    return "Claude";
-  }
-  if (provider === "codex") {
-    return "Codex";
-  }
   if (!provider) {
     return "Agent";
   }
-  return provider.charAt(0).toUpperCase() + provider.slice(1);
+  return provider
+    .split(/[-_\s]+/)
+    .filter((part) => part.length > 0)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
 }
 
 function resolveWorkspaceAgentTabLabel(title: string | null | undefined): string | null {
@@ -96,7 +93,7 @@ function useAgentPanelDescriptor(
   );
   const provider = descriptorState.provider;
   const label = resolveWorkspaceAgentTabLabel(descriptorState.title);
-  const icon = provider === "claude" ? ClaudeIcon : provider === "codex" ? CodexIcon : Bot;
+  const icon = getProviderIcon(provider) ?? Bot;
 
   return {
     label: label ?? "",

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

@@ -157,6 +157,7 @@ function makeFetchAgentsEntry(input: {
         isGit: false,
         currentBranch: null,
         remoteUrl: null,
+        worktreeRoot: null,
         isPaseoOwnedWorktree: false,
         mainRepoRoot: null,
       },

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

@@ -14,6 +14,7 @@ import {
   type HostProfile,
 } from "@/types/host-connection";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
+import { resolveAppVersion } from "@/utils/app-version";
 import { ConnectionOfferSchema, type ConnectionOffer } from "@server/shared/connection-offer";
 import {
   shouldUseDesktopDaemon,
@@ -422,6 +423,7 @@ function createDefaultDeps(): HostRuntimeControllerDeps {
         suppressSendErrors: true,
         clientId,
         clientType: "mobile" as const,
+        appVersion: resolveAppVersion() ?? undefined,
         runtimeGeneration,
       };
       if (connection.type === "directSocket" || connection.type === "directPipe") {
@@ -1681,6 +1683,41 @@ export class HostRuntimeStore {
     };
   }
 
+  waitForAnyConnectionOnline(): { promise: Promise<void>; cancel: () => void } {
+    let unsubscribe: (() => void) | null = null;
+
+    const isAnyOnline = (): boolean => {
+      for (const host of this.hosts) {
+        const snapshot = this.getSnapshot(host.serverId);
+        if (snapshot?.connectionStatus === "online") return true;
+      }
+      return false;
+    };
+
+    const promise = new Promise<void>((resolve) => {
+      if (isAnyOnline()) {
+        resolve();
+        return;
+      }
+
+      unsubscribe = this.subscribeAll(() => {
+        if (isAnyOnline()) {
+          unsubscribe?.();
+          unsubscribe = null;
+          resolve();
+        }
+      });
+    });
+
+    return {
+      promise,
+      cancel: () => {
+        unsubscribe?.();
+        unsubscribe = null;
+      },
+    };
+  }
+
   ensureConnectedAll(): void {
     for (const controller of this.controllers.values()) {
       controller.ensureConnected();

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

@@ -56,6 +56,7 @@ import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
 import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
 import { useDraftAgentCreateFlow } from "@/hooks/use-draft-agent-create-flow";
+import { useDraftAgentFeatures } from "@/hooks/use-draft-agent-features";
 
 const EMPTY_PENDING_PERMISSIONS = new Map();
 const DRAFT_CAPABILITIES: AgentCapabilityFlags = {
@@ -757,6 +758,18 @@ function DraftAgentScreenContent({
       availableModels.find((model) => model.id === effectiveDraftModelId) ?? null;
     return selectedModelDefinition?.defaultThinkingOptionId ?? "";
   }, [availableModels, effectiveDraftModelId, selectedThinkingOptionId]);
+  const {
+    features: draftFeatures,
+    featureValues: draftFeatureValues,
+    setFeatureValue: setDraftFeatureValue,
+  } = useDraftAgentFeatures({
+    serverId: selectedServerId,
+    provider: selectedProvider,
+    cwd: workingDir,
+    modeId: selectedMode,
+    modelId: effectiveDraftModelId,
+    thinkingOptionId: effectiveDraftThinkingOptionId,
+  });
   const draftCommandConfig = useMemo<DraftCommandConfig | undefined>(() => {
     const cwd = (
       isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : workingDir
@@ -773,8 +786,10 @@ function DraftAgentScreenContent({
       ...(effectiveDraftThinkingOptionId
         ? { thinkingOptionId: effectiveDraftThinkingOptionId }
         : {}),
+      ...(draftFeatureValues ? { featureValues: draftFeatureValues } : {}),
     };
   }, [
+    draftFeatureValues,
     effectiveDraftModelId,
     effectiveDraftThinkingOptionId,
     isAttachWorktree,
@@ -878,6 +893,7 @@ function DraftAgentScreenContent({
         title: "New agent",
         cwd,
         model,
+        features: draftFeatures,
         thinkingOptionId,
         labels: {},
       };
@@ -896,6 +912,7 @@ function DraftAgentScreenContent({
         ...(effectiveDraftThinkingOptionId
           ? { thinkingOptionId: effectiveDraftThinkingOptionId }
           : {}),
+        ...(draftFeatureValues ? { featureValues: draftFeatureValues } : {}),
       };
 
       const effectiveBaseBranch = baseBranch.trim();
@@ -1248,6 +1265,8 @@ function DraftAgentScreenContent({
                 thinkingOptions: availableThinkingOptions,
                 selectedThinkingOptionId,
                 onSelectThinkingOption: setThinkingOptionFromUser,
+                features: draftFeatures,
+                onSetFeature: setDraftFeatureValue,
                 disabled: isSubmitting,
               }}
             />

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

@@ -8,7 +8,7 @@ import { MenuHeader } from "@/components/headers/menu-header";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { usePanelStore } from "@/stores/panel-store";
 import { useSessionStore } from "@/stores/session-store";
-import { isCompactFormFactor } from "@/constants/layout";
+import { isCompactFormFactor, HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE, HEADER_TOP_PADDING_MOBILE } from "@/constants/layout";
 import { TitlebarDragRegion } from "@/components/desktop/titlebar-drag-region";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
@@ -59,11 +59,15 @@ const styles = StyleSheet.create((theme) => ({
   },
   content: {
     position: "relative",
-    flexGrow: 1,
+    flex: 1,
     justifyContent: "center",
     alignItems: "center",
     gap: 0,
     padding: theme.spacing[6],
+    paddingBottom: {
+      xs: HEADER_INNER_HEIGHT_MOBILE + HEADER_TOP_PADDING_MOBILE + theme.spacing[6],
+      md: HEADER_INNER_HEIGHT + theme.spacing[6],
+    },
   },
   logo: {
     marginBottom: theme.spacing[8],

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

@@ -20,6 +20,7 @@ import {
   Stethoscope,
   Info,
   Shield,
+  Puzzle,
 } from "lucide-react-native";
 import { useAppSettings, type AppSettings } from "@/hooks/use-settings";
 import type { HostProfile, HostConnection } from "@/types/host-connection";
@@ -50,6 +51,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { AdaptiveModalSheet, AdaptiveTextInput } from "@/components/adaptive-modal-sheet";
 import { DesktopPermissionsSection } from "@/desktop/components/desktop-permissions-section";
+import { IntegrationsSection } from "@/desktop/components/integrations-section";
 import { LocalDaemonSection } from "@/desktop/components/desktop-updates-section";
 import { isElectronRuntime } from "@/desktop/host";
 import { useDesktopAppUpdater } from "@/desktop/updates/use-desktop-app-updater";
@@ -69,6 +71,7 @@ type SettingsSectionId =
   | "hosts"
   | "appearance"
   | "shortcuts"
+  | "integrations"
   | "diagnostics"
   | "about"
   | "permissions"
@@ -85,17 +88,21 @@ function getSettingsSections(context: { isDesktopApp: boolean }): SettingsSectio
     { id: "hosts", label: "Hosts", icon: Server },
     { id: "appearance", label: "Appearance", icon: Palette },
     { id: "shortcuts", label: "Shortcuts", icon: Keyboard },
-    { id: "diagnostics", label: "Diagnostics", icon: Stethoscope },
-    { id: "about", label: "About", icon: Info },
+    { id: "permissions", label: "Permissions", icon: Shield },
   ];
 
   if (context.isDesktopApp) {
     sections.push(
-      { id: "permissions", label: "Permissions", icon: Shield },
+      { id: "integrations", label: "Integrations", icon: Puzzle },
       { id: "daemon", label: "Daemon", icon: Settings },
     );
   }
 
+  sections.push(
+    { id: "diagnostics", label: "Diagnostics", icon: Stethoscope },
+    { id: "about", label: "About", icon: Info },
+  );
+
   return sections;
 }
 
@@ -177,13 +184,10 @@ interface HostsSectionProps {
   routeServerId: string;
   theme: ReturnType<typeof useUnistyles>["theme"];
   handleEditDaemon: (profile: HostProfile) => void;
-  setAddConnectionTargetServerId: (id: string | null) => void;
-  setPendingEditReopenServerId: (id: string | null) => void;
   setIsAddHostMethodVisible: (visible: boolean) => void;
   isAddHostMethodVisible: boolean;
   isDirectHostVisible: boolean;
   isPasteLinkVisible: boolean;
-  addConnectionTargetServerId: string | null;
   closeAddConnectionFlow: () => void;
   goBackToAddConnectionMethods: () => void;
   setIsDirectHostVisible: (visible: boolean) => void;
@@ -203,7 +207,6 @@ interface HostsSectionProps {
   handleSaveEditDaemon: (label: string) => Promise<void>;
   handleRemoveConnection: (serverId: string, connectionId: string) => Promise<void>;
   handleRemoveDaemon: (profile: HostProfile) => void;
-  handleAddConnectionFromModal: () => void;
   restartConfirmationMessage: string;
   waitForCondition: (
     predicate: () => boolean,
@@ -243,8 +246,6 @@ function HostsSection(props: HostsSectionProps) {
           style={styles.addButton}
           textStyle={styles.addButtonText}
           onPress={() => {
-            props.setAddConnectionTargetServerId(null);
-            props.setPendingEditReopenServerId(null);
             props.setIsAddHostMethodVisible(true);
           }}
         >
@@ -264,22 +265,17 @@ function HostsSection(props: HostsSectionProps) {
           props.setIsPasteLinkVisible(true);
         }}
         onScanQr={() => {
-          const targetServerId = props.addConnectionTargetServerId;
-          const source = targetServerId ? "editHost" : "settings";
-          const sourceServerId = props.routeServerId || targetServerId || undefined;
+          const sourceServerId = props.routeServerId || undefined;
           props.closeAddConnectionFlow();
           router.push({
             pathname: "/pair-scan",
-            params: targetServerId
-              ? { source, targetServerId, sourceServerId }
-              : { source, sourceServerId },
+            params: { source: "settings", sourceServerId },
           });
         }}
       />
 
       <AddHostModal
         visible={props.isDirectHostVisible}
-        targetServerId={props.addConnectionTargetServerId ?? undefined}
         onClose={props.closeAddConnectionFlow}
         onCancel={props.goBackToAddConnectionMethods}
         onSaved={({ serverId, hostname, isNewHost }) => {
@@ -291,7 +287,6 @@ function HostsSection(props: HostsSectionProps) {
 
       <PairLinkModal
         visible={props.isPasteLinkVisible}
-        targetServerId={props.addConnectionTargetServerId ?? undefined}
         onClose={props.closeAddConnectionFlow}
         onCancel={props.goBackToAddConnectionMethods}
         onSaved={({ serverId, hostname, isNewHost }) => {
@@ -371,7 +366,6 @@ function HostsSection(props: HostsSectionProps) {
         onSave={(label) => void props.handleSaveEditDaemon(label)}
         onRemoveConnection={props.handleRemoveConnection}
         onRemoveHost={props.handleRemoveDaemon}
-        onAddConnection={props.handleAddConnectionFromModal}
         restartConfirmationMessage={props.restartConfirmationMessage}
         waitForCondition={props.waitForCondition}
         isScreenMountedRef={props.isMountedRef}
@@ -520,6 +514,8 @@ function SettingsSectionContent({
       return <DiagnosticsSection {...diagnosticsProps} />;
     case "about":
       return <AboutSection {...aboutProps} />;
+    case "integrations":
+      return isDesktopApp ? <IntegrationsSection /> : null;
     case "permissions":
       return isDesktopApp ? <DesktopPermissionsSection /> : null;
     case "daemon":
@@ -570,31 +566,35 @@ function SettingsDesktopLayout({ sections, sectionContentProps }: SettingsLayout
         {sections.map((section) => {
           const isSelected = section.id === selectedSectionId;
           const IconComponent = section.icon;
+          const showSeparator =
+            section.id === "integrations" || section.id === "diagnostics";
           return (
-            <Pressable
-              key={section.id}
-              style={[
-                desktopStyles.sidebarItem,
-                isSelected && { backgroundColor: theme.colors.surface2 },
-              ]}
-              onPress={() => setSelectedSectionId(section.id)}
-              accessibilityRole="button"
-              accessibilityState={{ selected: isSelected }}
-            >
-              <IconComponent
-                size={theme.iconSize.md}
-                color={isSelected ? theme.colors.foreground : theme.colors.foregroundMuted}
-              />
-              <Text
+            <View key={section.id}>
+              {showSeparator ? <View style={desktopStyles.sidebarSeparator} /> : null}
+              <Pressable
                 style={[
-                  desktopStyles.sidebarLabel,
-                  isSelected && { color: theme.colors.foreground },
+                  desktopStyles.sidebarItem,
+                  isSelected && { backgroundColor: theme.colors.surface2 },
                 ]}
-                numberOfLines={1}
+                onPress={() => setSelectedSectionId(section.id)}
+                accessibilityRole="button"
+                accessibilityState={{ selected: isSelected }}
               >
-                {section.label}
-              </Text>
-            </Pressable>
+                <IconComponent
+                  size={theme.iconSize.md}
+                  color={isSelected ? theme.colors.foreground : theme.colors.foregroundMuted}
+                />
+                <Text
+                  style={[
+                    desktopStyles.sidebarLabel,
+                    isSelected && { color: theme.colors.foreground },
+                  ]}
+                  numberOfLines={1}
+                >
+                  {section.label}
+                </Text>
+              </Pressable>
+            </View>
           );
         })}
       </View>
@@ -728,10 +728,6 @@ export default function SettingsScreen() {
   const [isAddHostMethodVisible, setIsAddHostMethodVisible] = useState(false);
   const [isDirectHostVisible, setIsDirectHostVisible] = useState(false);
   const [isPasteLinkVisible, setIsPasteLinkVisible] = useState(false);
-  const [addConnectionTargetServerId, setAddConnectionTargetServerId] = useState<string | null>(
-    null,
-  );
-  const [pendingEditReopenServerId, setPendingEditReopenServerId] = useState<string | null>(null);
   const [pendingNameHost, setPendingNameHost] = useState<{
     serverId: string;
     hostname: string | null;
@@ -810,7 +806,6 @@ export default function SettingsScreen() {
     setIsAddHostMethodVisible(false);
     setIsDirectHostVisible(false);
     setIsPasteLinkVisible(false);
-    setAddConnectionTargetServerId(null);
   }, []);
 
   const goBackToAddConnectionMethods = useCallback(() => {
@@ -829,24 +824,6 @@ export default function SettingsScreen() {
     handleEditDaemon(profile);
   }, [daemons, handleEditDaemon, params.editHost]);
 
-  useEffect(() => {
-    if (!pendingEditReopenServerId) return;
-    if (isAddHostMethodVisible || isDirectHostVisible || isPasteLinkVisible) return;
-    const profile = daemons.find((daemon) => daemon.serverId === pendingEditReopenServerId) ?? null;
-    setPendingEditReopenServerId(null);
-    setAddConnectionTargetServerId(null);
-    if (profile) {
-      handleEditDaemon(profile);
-    }
-  }, [
-    daemons,
-    handleEditDaemon,
-    isAddHostMethodVisible,
-    isDirectHostVisible,
-    isPasteLinkVisible,
-    pendingEditReopenServerId,
-  ]);
-
   const handleSaveEditDaemon = useCallback(
     async (nextLabelRaw: string) => {
       if (!editingServerId) return;
@@ -884,15 +861,6 @@ export default function SettingsScreen() {
     setPendingRemoveHost(profile);
   }, []);
 
-  const handleAddConnectionFromModal = useCallback(() => {
-    if (!editingServerId) return;
-    const serverId = editingServerId;
-    setEditingDaemon(null);
-    setAddConnectionTargetServerId(serverId);
-    setPendingEditReopenServerId(serverId);
-    setIsAddHostMethodVisible(true);
-  }, [editingServerId]);
-
   const handleThemeChange = useCallback(
     (newTheme: AppSettings["theme"]) => {
       void updateSettings({ theme: newTheme });
@@ -938,13 +906,10 @@ export default function SettingsScreen() {
     routeServerId,
     theme,
     handleEditDaemon,
-    setAddConnectionTargetServerId,
-    setPendingEditReopenServerId,
     setIsAddHostMethodVisible,
     isAddHostMethodVisible,
     isDirectHostVisible,
     isPasteLinkVisible,
-    addConnectionTargetServerId,
     closeAddConnectionFlow,
     goBackToAddConnectionMethods,
     setIsDirectHostVisible,
@@ -964,7 +929,6 @@ export default function SettingsScreen() {
     handleSaveEditDaemon,
     handleRemoveConnection,
     handleRemoveDaemon,
-    handleAddConnectionFromModal,
     restartConfirmationMessage: "This will restart the daemon. The app will reconnect automatically.",
     waitForCondition,
     isMountedRef,
@@ -1029,7 +993,6 @@ interface HostDetailModalProps {
   onSave: (label: string) => void;
   onRemoveConnection: (serverId: string, connectionId: string) => Promise<void>;
   onRemoveHost: (host: HostProfile) => void;
-  onAddConnection: () => void;
   restartConfirmationMessage: string;
   waitForCondition: (
     predicate: () => boolean,
@@ -1047,7 +1010,6 @@ function HostDetailModal({
   onSave,
   onRemoveConnection,
   onRemoveHost,
-  onAddConnection,
   restartConfirmationMessage,
   waitForCondition,
   isScreenMountedRef,
@@ -1278,15 +1240,6 @@ function HostDetailModal({
                   />
                 );
               })}
-              <Button
-                variant="outline"
-                size="md"
-                style={styles.addButton}
-                textStyle={styles.addButtonText}
-                onPress={onAddConnection}
-              >
-                + Add connection
-              </Button>
             </View>
           </View>
         ) : null}
@@ -1893,6 +1846,12 @@ const desktopStyles = StyleSheet.create((theme) => ({
     color: theme.colors.foregroundMuted,
     fontWeight: theme.fontWeight.normal,
   },
+  sidebarSeparator: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border,
+    marginVertical: theme.spacing[2],
+    marginHorizontal: theme.spacing[3],
+  },
   contentPane: {
     flex: 1,
   },

packages/app/src/screens/settings/keyboard-shortcuts-section.tsx

@@ -192,8 +192,8 @@ export function KeyboardShortcutsSection() {
 
   return (
     <View style={settingsStyles.section}>
-      <View style={styles.sectionHeader}>
-        <Text style={settingsStyles.sectionTitle}>Shortcuts</Text>
+      <View style={settingsStyles.sectionHeader}>
+        <Text style={settingsStyles.sectionHeaderTitle}>Shortcuts</Text>
         {hasOverrides && (
           <Button variant="ghost" size="sm" onPress={() => void resetAll()}>
             Reset all
@@ -246,11 +246,6 @@ export function KeyboardShortcutsSection() {
 }
 
 const styles = StyleSheet.create((theme) => ({
-  sectionHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
   subsectionTitle: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,

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

@@ -8,6 +8,7 @@ import type { ImageAttachment } from "@/components/message-input";
 import { useAgentFormState } from "@/hooks/use-agent-form-state";
 import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
 import { useDraftAgentCreateFlow } from "@/hooks/use-draft-agent-create-flow";
+import { useDraftAgentFeatures } from "@/hooks/use-draft-agent-features";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { buildDraftStoreKey } from "@/stores/draft-keys";
 import type { Agent } from "@/stores/session-store";
@@ -110,6 +111,18 @@ export function WorkspaceDraftAgentTab({
       availableModels.find((model) => model.id === effectiveDraftModelId) ?? null;
     return selectedModelDefinition?.defaultThinkingOptionId ?? "";
   }, [availableModels, effectiveDraftModelId, selectedThinkingOptionId]);
+  const {
+    features: draftFeatures,
+    featureValues: draftFeatureValues,
+    setFeatureValue: setDraftFeatureValue,
+  } = useDraftAgentFeatures({
+    serverId,
+    provider: selectedProvider,
+    cwd: workspaceId,
+    modeId: selectedMode,
+    modelId: effectiveDraftModelId,
+    thinkingOptionId: effectiveDraftThinkingOptionId,
+  });
 
   const {
     formErrorMessage,
@@ -168,6 +181,7 @@ export function WorkspaceDraftAgentTab({
         title: "Agent",
         cwd: workspaceId,
         model,
+        features: draftFeatures,
         thinkingOptionId,
         labels: {},
       };
@@ -186,6 +200,7 @@ export function WorkspaceDraftAgentTab({
         ...(effectiveDraftThinkingOptionId
           ? { thinkingOptionId: effectiveDraftThinkingOptionId }
           : {}),
+        ...(draftFeatureValues ? { featureValues: draftFeatureValues } : {}),
       };
 
       const imagesData = await encodeImages(images);
@@ -215,8 +230,10 @@ export function WorkspaceDraftAgentTab({
       ...(effectiveDraftThinkingOptionId
         ? { thinkingOptionId: effectiveDraftThinkingOptionId }
         : {}),
+      ...(draftFeatureValues ? { featureValues: draftFeatureValues } : {}),
     };
   }, [
+    draftFeatureValues,
     effectiveDraftModelId,
     effectiveDraftThinkingOptionId,
     modeOptions.length,
@@ -297,6 +314,8 @@ export function WorkspaceDraftAgentTab({
               thinkingOptions: availableThinkingOptions,
               selectedThinkingOptionId,
               onSelectThinkingOption: setThinkingOptionFromUser,
+              features: draftFeatures,
+              onSetFeature: setDraftFeatureValue,
               disabled: isSubmitting,
             }}
           />

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

@@ -983,6 +983,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       if (
         canPruneAgentTabs &&
         tab.target.kind === "agent" &&
+        !pinnedAgentIds.has(tab.target.agentId) &&
         shouldPruneWorkspaceAgentTab({
           agentId: tab.target.agentId,
           agentsHydrated: hasHydratedAgents,

packages/app/src/screens/workspace/workspace-tab-presentation.tsx

@@ -8,7 +8,7 @@ import { ensurePanelsRegistered } from "@/panels/register-panels";
 import { getPanelRegistration } from "@/panels/panel-registry";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
 import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
-import { getStatusDotColor } from "@/utils/status-dot-color";
+import { getStatusDotColor, isEmphasizedStatusDotBucket } from "@/utils/status-dot-color";
 import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
 
 export interface WorkspaceTabPresentation {
@@ -21,6 +21,11 @@ export interface WorkspaceTabPresentation {
   statusBucket: SidebarStateBucket | null;
 }
 
+const DEFAULT_STATUS_DOT_SIZE = 7;
+const EMPHASIZED_STATUS_DOT_SIZE = 9;
+const DEFAULT_STATUS_DOT_OFFSET = -2;
+const EMPHASIZED_STATUS_DOT_OFFSET = -3;
+
 type WorkspaceTabPresentationResolverProps = {
   tab: WorkspaceTabDescriptor;
   serverId: string;
@@ -114,6 +119,13 @@ export function WorkspaceTabIcon({
           bucket: presentation.statusBucket,
           showDoneAsInactive: false,
         });
+  const statusDotSize = isEmphasizedStatusDotBucket(presentation.statusBucket)
+    ? EMPHASIZED_STATUS_DOT_SIZE
+    : DEFAULT_STATUS_DOT_SIZE;
+  const statusDotOffset =
+    statusDotSize === EMPHASIZED_STATUS_DOT_SIZE
+      ? EMPHASIZED_STATUS_DOT_OFFSET
+      : DEFAULT_STATUS_DOT_OFFSET;
   const shouldShowLoader = shouldRenderSyncedStatusLoader({
     bucket: presentation.statusBucket,
   });
@@ -137,6 +149,10 @@ export function WorkspaceTabIcon({
             {
               backgroundColor: statusDotColor,
               borderColor: statusDotBorderColor ?? theme.colors.surface0,
+              width: statusDotSize,
+              height: statusDotSize,
+              right: statusDotOffset,
+              bottom: statusDotOffset,
             },
           ]}
         />
@@ -199,10 +215,10 @@ const styles = StyleSheet.create((theme) => ({
   },
   statusDot: {
     position: "absolute",
-    right: -2,
-    bottom: -2,
-    width: 7,
-    height: 7,
+    right: DEFAULT_STATUS_DOT_OFFSET,
+    bottom: DEFAULT_STATUS_DOT_OFFSET,
+    width: DEFAULT_STATUS_DOT_SIZE,
+    height: DEFAULT_STATUS_DOT_SIZE,
     borderRadius: theme.borderRadius.full,
     borderWidth: 1,
   },

packages/app/src/stores/session-store.ts

@@ -10,6 +10,7 @@ import type {
   AgentPermissionResponse,
   AgentPermissionRequest,
   AgentSessionConfig,
+  AgentFeature,
   AgentProvider,
   AgentMode,
   AgentCapabilityFlags,
@@ -99,6 +100,7 @@ export interface Agent {
   title: string | null;
   cwd: string;
   model: string | null;
+  features?: AgentFeature[];
   thinkingOptionId?: string | null;
   requiresAttention?: boolean;
   attentionReason?: "finished" | "error" | "permission" | null;

packages/app/src/styles/settings.ts

@@ -4,6 +4,13 @@ export const settingsStyles = StyleSheet.create((theme) => ({
   section: {
     marginBottom: theme.spacing[6],
   },
+  sectionHeader: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing[3],
+    marginLeft: theme.spacing[1],
+  },
   sectionTitle: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,
@@ -11,6 +18,20 @@ export const settingsStyles = StyleSheet.create((theme) => ({
     marginBottom: theme.spacing[3],
     marginLeft: theme.spacing[1],
   },
+  sectionHeaderTitle: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+  },
+  sectionHeaderLink: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: theme.spacing[1],
+  },
+  sectionHeaderLinkText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+  },
   card: {
     backgroundColor: theme.colors.surface1,
     borderRadius: theme.borderRadius.lg,
@@ -18,4 +39,28 @@ export const settingsStyles = StyleSheet.create((theme) => ({
     borderColor: theme.colors.border,
     overflow: "hidden",
   },
+  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],
+  },
+  rowTitle: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.base,
+  },
+  rowHint: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    marginTop: theme.spacing[1],
+  },
 }));

packages/app/src/styles/theme.ts

@@ -193,7 +193,7 @@ const darkSemanticColors = {
   foregroundMuted: "#A1A5A4",
 
   // Controls
-  scrollbarHandle: "#71717a", // zinc-500
+  scrollbarHandle: "#717574", // zinc-500 w/ teal tint
 
   // Borders
   border: "#252B2A",

packages/app/src/terminal/runtime/terminal-emulator-runtime.ts

@@ -72,6 +72,11 @@ declare global {
   }
 }
 
+const isMac =
+  typeof navigator !== "undefined" &&
+  (/Macintosh|Mac OS/i.test(navigator.userAgent ?? "") ||
+    /Mac/i.test((navigator as any).platform ?? ""));
+
 const DEFAULT_TOUCH_SCROLL_LINE_HEIGHT_PX = 18;
 const FIT_TIMEOUT_DELAYS_MS = [0, 16, 48, 120, 250, 500, 1_000, 2_000];
 const OUTPUT_OPERATION_TIMEOUT_MS = 5_000;
@@ -280,6 +285,29 @@ export class TerminalEmulatorRuntime {
         return true;
       }
 
+      if (!isMac && event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+        const key = event.key.toLowerCase();
+
+        // Ctrl+C: copy selection to clipboard if text is selected, otherwise let xterm send SIGINT
+        if (key === "c" && terminal.hasSelection()) {
+          void navigator.clipboard.writeText(terminal.getSelection());
+          return false;
+        }
+
+        // Ctrl+V: paste from clipboard into terminal
+        if (key === "v") {
+          event.preventDefault();
+          void navigator.clipboard.readText().then((text) => {
+            if (text) {
+              terminal.paste(text);
+            }
+          });
+          return false;
+        }
+
+        return true;
+      }
+
       const normalizedKey = normalizeDomTerminalKey(event.key);
       if (!normalizedKey || isTerminalModifierDomKey(event.key)) {
         return true;

packages/app/src/utils/agent-snapshots.ts

@@ -47,6 +47,7 @@ export function normalizeAgentSnapshot(snapshot: AgentSnapshotPayload, serverId:
     title: snapshot.title ?? null,
     cwd: snapshot.cwd,
     model: snapshot.model ?? null,
+    features: snapshot.features,
     thinkingOptionId: snapshot.thinkingOptionId ?? null,
     requiresAttention: snapshot.requiresAttention ?? false,
     attentionReason: snapshot.attentionReason ?? null,

packages/app/src/utils/new-agent-routing.test.ts

@@ -39,8 +39,9 @@ describe("resolveNewAgentWorkingDir", () => {
   it("returns the main repo root for paseo-owned worktrees", () => {
     const checkout = {
       isPaseoOwnedWorktree: true,
+      worktreeRoot: "/repo/.paseo/worktrees/feature",
       mainRepoRoot: "/repo/main",
-    } as CheckoutStatusPayload;
+    } as unknown as CheckoutStatusPayload;
 
     expect(resolveNewAgentWorkingDir("/repo/.paseo/worktrees/feature", checkout)).toBe(
       "/repo/main",

packages/app/src/utils/project-placement.test.ts

@@ -28,6 +28,7 @@ describe("project-placement", () => {
         isGit: true as const,
         currentBranch: "main",
         remoteUrl: "https://github.com/acme/repo.git",
+        worktreeRoot: "/Users/test/repo",
         isPaseoOwnedWorktree: false as const,
         mainRepoRoot: null,
       },

packages/app/src/utils/project-placement.ts

@@ -18,6 +18,7 @@ export function deriveProjectPlacementFromCwd(cwd: string): ProjectPlacementPayl
       isGit: false,
       currentBranch: null,
       remoteUrl: null,
+      worktreeRoot: null,
       isPaseoOwnedWorktree: false,
       mainRepoRoot: null,
     },

packages/app/src/utils/status-dot-color.ts

@@ -25,3 +25,9 @@ export function getStatusDotColor(input: {
   }
   return null;
 }
+
+export function isEmphasizedStatusDotBucket(
+  bucket: SidebarStateBucket | null | undefined,
+): boolean {
+  return bucket === "needs_input" || bucket === "attention";
+}

packages/app/src/utils/test-daemon-connection.ts

@@ -2,6 +2,7 @@ import { DaemonClient } from "@server/client/daemon-client";
 import type { DaemonClientConfig } from "@server/client/daemon-client";
 import type { HostConnection } from "@/types/host-connection";
 import { getOrCreateClientId } from "./client-id";
+import { resolveAppVersion } from "./app-version";
 import { buildDaemonWebSocketUrl, buildRelayWebSocketUrl } from "./daemon-endpoints";
 import {
   buildLocalDaemonTransportUrl,
@@ -53,6 +54,7 @@ export async function buildClientConfig(
   const base = {
     clientId,
     clientType: "mobile" as const,
+    appVersion: resolveAppVersion() ?? undefined,
     suppressSendErrors: true,
     reconnect: { enabled: false },
     ...(connection.type === "directSocket" || connection.type === "directPipe"

packages/app/src/utils/tool-call-detail-state.ts

@@ -51,6 +51,8 @@ export function hasMeaningfulToolCallDetail(detail: ToolCallDetail | undefined):
       );
     case "plain_text":
       return Boolean(detail.label || detail.text);
+    case "plan":
+      return detail.text.trim().length > 0;
     case "unknown":
       return hasMeaningfulUnknownValue(detail.input) || hasMeaningfulUnknownValue(detail.output);
   }

packages/app/src/utils/tool-call-icon.ts

@@ -24,6 +24,7 @@ const TOOL_DETAIL_ICONS: Record<ToolCallDetail["type"], ToolCallIconComponent> =
   worktree_setup: SquareTerminal,
   sub_agent: Bot,
   plain_text: Wrench,
+  plan: Brain,
   unknown: Wrench,
 };
 

packages/cli/bin/paseo

@@ -1,2 +1,3 @@
-#!/usr/bin/env node
+#!/usr/bin/env -S node --disable-warning=DEP0040
 import '../dist/index.js'
+

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/cli",
-  "version": "0.1.41",
+  "version": "0.1.47",
   "description": "Paseo CLI - control your AI coding agents from the command line",
   "type": "module",
   "files": [
@@ -24,8 +24,8 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.0.0",
-    "@getpaseo/relay": "0.1.41",
-    "@getpaseo/server": "0.1.41",
+    "@getpaseo/relay": "0.1.47",
+    "@getpaseo/server": "0.1.47",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
     "mime-types": "^2.1.35",

packages/cli/src/classify.test.ts

@@ -0,0 +1,188 @@
+import { mkdirSync, mkdtempSync } from "node:fs";
+import { homedir, tmpdir } from "node:os";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { classifyInvocation, isExistingDirectory, isPathLikeArg } from "./classify.js";
+
+const knownCommands = new Set(["ls", "run", "status"]);
+
+describe("classifyInvocation", () => {
+  it("classifies no args as CLI mode", () => {
+    expect(
+      classifyInvocation({
+        argv: [],
+        knownCommands,
+        cwd: process.cwd(),
+      }),
+    ).toEqual({ kind: "cli", argv: [] });
+  });
+
+  it("classifies flags as CLI mode", () => {
+    expect(
+      classifyInvocation({
+        argv: ["--version"],
+        knownCommands,
+        cwd: process.cwd(),
+      }),
+    ).toEqual({ kind: "cli", argv: ["--version"] });
+  });
+
+  it("classifies known commands as CLI mode", () => {
+    expect(
+      classifyInvocation({
+        argv: ["ls", "--json"],
+        knownCommands,
+        cwd: process.cwd(),
+      }),
+    ).toEqual({ kind: "cli", argv: ["ls", "--json"] });
+  });
+
+  it("classifies '.' as an open-project invocation", () => {
+    const projectDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-dot-"));
+
+    expect(
+      classifyInvocation({
+        argv: ["."],
+        knownCommands,
+        cwd: projectDir,
+      }),
+    ).toEqual({
+      kind: "open-project",
+      resolvedPath: projectDir,
+    });
+  });
+
+  it("classifies '..' as an open-project invocation", () => {
+    const parentDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-parent-"));
+    const childDir = path.join(parentDir, "child");
+    mkdirSync(childDir);
+
+    expect(
+      classifyInvocation({
+        argv: [".."],
+        knownCommands,
+        cwd: childDir,
+      }),
+    ).toEqual({
+      kind: "open-project",
+      resolvedPath: parentDir,
+    });
+  });
+
+  it("classifies './myproject' as an open-project invocation", () => {
+    const parentDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-relative-"));
+    const projectDir = path.join(parentDir, "myproject");
+    mkdirSync(projectDir);
+
+    expect(
+      classifyInvocation({
+        argv: ["./myproject"],
+        knownCommands,
+        cwd: parentDir,
+      }),
+    ).toEqual({
+      kind: "open-project",
+      resolvedPath: projectDir,
+    });
+  });
+
+  it("classifies an absolute path as an open-project invocation", () => {
+    const projectDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-absolute-"));
+
+    expect(
+      classifyInvocation({
+        argv: [projectDir],
+        knownCommands,
+        cwd: process.cwd(),
+      }),
+    ).toEqual({
+      kind: "open-project",
+      resolvedPath: projectDir,
+    });
+  });
+
+  it("classifies a home-relative path as an open-project invocation", () => {
+    const projectDir = mkdtempSync(path.join(homedir(), "paseo-classify-home-"));
+    const relativeToHome = `~/${path.basename(projectDir)}`;
+
+    expect(
+      classifyInvocation({
+        argv: [relativeToHome],
+        knownCommands,
+        cwd: process.cwd(),
+      }),
+    ).toEqual({
+      kind: "open-project",
+      resolvedPath: projectDir,
+    });
+  });
+
+  it("classifies an existing directory name as an open-project invocation", () => {
+    const parentDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-existing-"));
+    const projectDir = path.join(parentDir, "myproject");
+    mkdirSync(projectDir);
+
+    expect(
+      classifyInvocation({
+        argv: ["myproject"],
+        knownCommands,
+        cwd: parentDir,
+      }),
+    ).toEqual({
+      kind: "open-project",
+      resolvedPath: projectDir,
+    });
+  });
+
+  it("keeps known commands in CLI mode even when a matching directory exists", () => {
+    const parentDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-command-"));
+    mkdirSync(path.join(parentDir, "status"));
+
+    expect(
+      classifyInvocation({
+        argv: ["status"],
+        knownCommands,
+        cwd: parentDir,
+      }),
+    ).toEqual({
+      kind: "cli",
+      argv: ["status"],
+    });
+  });
+
+  it("classifies nonexistent args as CLI mode", () => {
+    expect(
+      classifyInvocation({
+        argv: ["nonexistent"],
+        knownCommands,
+        cwd: process.cwd(),
+      }),
+    ).toEqual({
+      kind: "cli",
+      argv: ["nonexistent"],
+    });
+  });
+});
+
+describe("path helpers", () => {
+  it("detects path-like prefixes", () => {
+    expect(isPathLikeArg(".")).toBe(true);
+    expect(isPathLikeArg("..")).toBe(true);
+    expect(isPathLikeArg("./project")).toBe(true);
+    expect(isPathLikeArg("../project")).toBe(true);
+    expect(isPathLikeArg("/tmp/project")).toBe(true);
+    expect(isPathLikeArg("~")).toBe(true);
+    expect(isPathLikeArg("~/project")).toBe(true);
+    expect(isPathLikeArg("C:\\project")).toBe(true);
+    expect(isPathLikeArg("status")).toBe(false);
+  });
+
+  it("detects existing directories relative to cwd", () => {
+    const parentDir = mkdtempSync(path.join(tmpdir(), "paseo-classify-helper-"));
+    const projectDir = path.join(parentDir, "project");
+    mkdirSync(projectDir);
+
+    expect(isExistingDirectory({ pathArg: "project", cwd: parentDir })).toBe(true);
+    expect(isExistingDirectory({ pathArg: "missing", cwd: parentDir })).toBe(false);
+  });
+});

packages/cli/src/classify.ts

@@ -0,0 +1,70 @@
+import { existsSync, statSync } from "node:fs";
+import { homedir } from "node:os";
+import path from "node:path";
+
+export type CliInvocation =
+  | { kind: "cli"; argv: string[] }
+  | { kind: "open-project"; resolvedPath: string };
+
+export function isPathLikeArg(arg: string): boolean {
+  return (
+    arg === "." ||
+    arg === ".." ||
+    arg.startsWith("./") ||
+    arg.startsWith("../") ||
+    arg.startsWith("/") ||
+    arg === "~" ||
+    arg.startsWith("~/") ||
+    /^[A-Za-z]:[\\/]/.test(arg)
+  );
+}
+
+export function expandUserPath(inputPath: string): string {
+  if (inputPath === "~") {
+    return homedir();
+  }
+
+  if (inputPath.startsWith("~/")) {
+    return path.join(homedir(), inputPath.slice(2));
+  }
+
+  return inputPath;
+}
+
+export function isExistingDirectory(input: { pathArg: string; cwd: string }): boolean {
+  const resolvedPath = path.resolve(input.cwd, expandUserPath(input.pathArg));
+
+  if (!existsSync(resolvedPath)) {
+    return false;
+  }
+
+  return statSync(resolvedPath).isDirectory();
+}
+
+export function classifyInvocation(input: {
+  argv: string[];
+  knownCommands: ReadonlySet<string>;
+  cwd: string;
+}): CliInvocation {
+  const [firstArg] = input.argv;
+  if (!firstArg) {
+    return { kind: "cli", argv: input.argv };
+  }
+
+  if (firstArg.startsWith("-")) {
+    return { kind: "cli", argv: input.argv };
+  }
+
+  if (input.knownCommands.has(firstArg)) {
+    return { kind: "cli", argv: input.argv };
+  }
+
+  if (isExistingDirectory({ pathArg: firstArg, cwd: input.cwd })) {
+    return {
+      kind: "open-project",
+      resolvedPath: path.resolve(input.cwd, expandUserPath(firstArg)),
+    };
+  }
+
+  return { kind: "cli", argv: input.argv };
+}

packages/cli/src/commands/agent/run.ts

@@ -412,7 +412,7 @@ export async function runRunCommand(
       const callStructuredTurn = async (structuredPrompt: string): Promise<string> => {
         if (!structuredAgent) {
           structuredAgent = await client.createAgent({
-            provider: resolvedProviderModel.provider as "claude" | "codex" | "opencode",
+            provider: resolvedProviderModel.provider,
             cwd,
             title: options.name,
             modeId: options.mode,
@@ -511,7 +511,7 @@ export async function runRunCommand(
 
     // Create the agent
     const agent = await client.createAgent({
-      provider: resolvedProviderModel.provider as "claude" | "codex" | "opencode",
+      provider: resolvedProviderModel.provider,
       cwd,
       title: options.name,
       modeId: options.mode,

packages/cli/src/commands/daemon/local-daemon.ts

@@ -21,6 +21,7 @@ export interface LocalDaemonPidInfo {
   hostname?: string;
   uid?: number;
   listen?: string;
+  desktopManaged?: boolean;
 }
 
 export interface LocalDaemonState {
@@ -173,6 +174,7 @@ function readPidFile(pidPath: string): LocalDaemonPidInfo | null {
           : typeof parsed.sockPath === "string"
             ? parsed.sockPath
             : undefined,
+      desktopManaged: parsed.desktopManaged === true ? true : undefined,
     };
   } catch {
     return null;

packages/cli/src/commands/daemon/status.ts

@@ -1,7 +1,12 @@
 import type { Command } from "commander";
 import { execFileSync } from "node:child_process";
 import { createRequire } from "node:module";
-import { getOrCreateServerId, findExecutable, applyProviderEnv } from "@getpaseo/server";
+import {
+  getOrCreateServerId,
+  findExecutable,
+  quoteWindowsCommand,
+  applyProviderEnv,
+} from "@getpaseo/server";
 import { tryConnectToDaemon } from "../../utils/client.js";
 import type { CommandOptions, ListResult, OutputSchema } from "../../output/index.js";
 import { resolveLocalDaemonState, resolveTcpHostFromListen } from "./local-daemon.js";
@@ -29,6 +34,8 @@ interface DaemonStatus {
   daemonNode: string;
   cliNode: string;
   cliVersion: string;
+  daemonVersion: string | null;
+  desktopManaged: boolean;
   providers: ProviderBinaryStatus[];
   note?: string;
 }
@@ -124,6 +131,7 @@ function toStatusRows(status: DaemonStatus): StatusRow[] {
     { key: "Daemon Node", value: status.daemonNode },
     { key: "CLI Node", value: status.cliNode },
     { key: "CLI", value: status.cliVersion },
+    { key: "Daemon Version", value: status.daemonVersion ?? "-" },
   ];
 
   if (status.runningAgents !== null && status.idleAgents !== null) {
@@ -170,7 +178,7 @@ function checkProviderBinary(binary: string): { path: string | null; version: st
   }
   const env = applyProviderEnv(process.env);
   try {
-    const output = execFileSync(binaryPath, ["--version"], {
+    const output = execFileSync(quoteWindowsCommand(binaryPath), ["--version"], {
       encoding: "utf8",
       timeout: 5000,
       stdio: ["ignore", "pipe", "pipe"],
@@ -224,6 +232,7 @@ export async function runStatusCommand(
   let connectedDaemon: DaemonStatus["connectedDaemon"] = "not_probed";
   let runningAgents: number | null = null;
   let idleAgents: number | null = null;
+  let daemonVersion: string | null = null;
   let note: string | undefined;
 
   if (!state.running && state.stalePidFile && state.pidInfo) {
@@ -235,6 +244,7 @@ export async function runStatusCommand(
     const client = await tryConnectToDaemon({ host, timeout: 1500 });
     if (client) {
       connectedDaemon = "reachable";
+      daemonVersion = client.getLastServerInfoMessage()?.version ?? null;
       try {
         const agentsPayload = await client.fetchAgents({ filter: { includeArchived: true } });
         const agents = agentsPayload.entries.map((entry) => entry.agent);
@@ -303,6 +313,8 @@ export async function runStatusCommand(
     daemonNode,
     cliNode,
     cliVersion,
+    daemonVersion,
+    desktopManaged: state.pidInfo?.desktopManaged === true,
     providers,
     note,
   };

packages/cli/src/commands/loop/run.ts

@@ -18,9 +18,9 @@ export interface LoopRunRow {
 }
 
 export interface LoopRunOptions extends CommandOptions {
-  provider?: "claude" | "codex" | "opencode";
+  provider?: string;
   model?: string;
-  verifyProvider?: "claude" | "codex" | "opencode";
+  verifyProvider?: string;
   verifyModel?: string;
   verify?: string;
   verifyCheck?: string[];

packages/cli/src/commands/loop/types.ts

@@ -45,11 +45,11 @@ export interface LoopRecord {
   name: string | null;
   prompt: string;
   cwd: string;
-  provider: "claude" | "codex" | "opencode";
+  provider: string;
   model: string | null;
-  workerProvider: "claude" | "codex" | "opencode" | null;
+  workerProvider: string | null;
   workerModel: string | null;
-  verifierProvider: "claude" | "codex" | "opencode" | null;
+  verifierProvider: string | null;
   verifierModel: string | null;
   verifyPrompt: string | null;
   verifyChecks: string[];
@@ -122,11 +122,11 @@ export interface LoopStopPayload {
 export interface LoopRunInput {
   prompt: string;
   cwd: string;
-  provider?: "claude" | "codex" | "opencode";
+  provider?: string;
   model?: string;
-  workerProvider?: "claude" | "codex" | "opencode";
+  workerProvider?: string;
   workerModel?: string;
-  verifierProvider?: "claude" | "codex" | "opencode";
+  verifierProvider?: string;
   verifierModel?: string;
   verifyPrompt?: string;
   verifyChecks?: string[];

packages/cli/src/commands/open.ts

@@ -0,0 +1,99 @@
+import { existsSync } from "node:fs";
+import { spawn } from "node:child_process";
+import { homedir } from "node:os";
+import path from "node:path";
+
+function findDesktopApp(): string | null {
+  if (process.platform === "darwin") {
+    const candidates = [
+      "/Applications/Paseo.app",
+      path.join(homedir(), "Applications", "Paseo.app"),
+    ];
+
+    for (const candidate of candidates) {
+      if (existsSync(candidate)) {
+        return candidate;
+      }
+    }
+
+    return null;
+  }
+
+  if (process.platform === "linux") {
+    const candidates = [
+      "/usr/bin/Paseo",
+      "/opt/Paseo/Paseo",
+      path.join(homedir(), "Applications", "Paseo.AppImage"),
+    ];
+
+    for (const candidate of candidates) {
+      if (existsSync(candidate)) {
+        return candidate;
+      }
+    }
+
+    return null;
+  }
+
+  if (process.platform === "win32") {
+    const localAppData = process.env.LOCALAPPDATA;
+    if (!localAppData) {
+      return null;
+    }
+
+    const candidate = path.join(localAppData, "Programs", "Paseo", "Paseo.exe");
+    return existsSync(candidate) ? candidate : null;
+  }
+
+  return null;
+}
+
+function cleanEnvForDesktopLaunch(): NodeJS.ProcessEnv {
+  const env = { ...process.env };
+  // The CLI runs via ELECTRON_RUN_AS_NODE=1. On Linux/Windows the spawned
+  // desktop process inherits the env directly, so we must strip it or the
+  // desktop app would start as a bare Node process instead of Electron.
+  delete env.ELECTRON_RUN_AS_NODE;
+  return env;
+}
+
+function spawnDetached(command: string, args: string[]): void {
+  spawn(command, args, {
+    detached: true,
+    stdio: "ignore",
+    env: cleanEnvForDesktopLaunch(),
+  }).unref();
+}
+
+export async function openDesktopWithProject(projectPath: string): Promise<void> {
+  try {
+    if (process.env.PASEO_DESKTOP_CLI === "1") {
+      throw new Error(
+        "Cannot open a desktop project while running in desktop CLI passthrough mode.",
+      );
+    }
+
+    const desktopApp = findDesktopApp();
+    if (!desktopApp) {
+      throw new Error(
+        "Paseo desktop app not found. Install it from https://github.com/getpaseo/paseo/releases",
+      );
+    }
+
+    if (process.platform === "darwin") {
+      // -n forces a new instance even if the app is already running.
+      // The new instance hits requestSingleInstanceLock(), fails, and relays
+      // the argv to the first instance via the second-instance event.
+      // -g keeps the terminal in the foreground (better CLI UX).
+      // Without -n, macOS just activates the existing window and drops --args.
+      spawnDetached("open", ["-n", "-g", "-a", desktopApp, "--args", projectPath]);
+      return;
+    }
+
+    spawnDetached(desktopApp, [projectPath]);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    process.stderr.write(`${message}\n`);
+    process.exitCode = 1;
+  }
+}

packages/cli/src/commands/provider/ls.ts

@@ -1,5 +1,6 @@
 import type { Command } from "commander";
 import type { CommandOptions, ListResult, OutputSchema } from "../../output/index.js";
+import { AGENT_PROVIDER_DEFINITIONS } from "@getpaseo/server";
 
 /** Provider list item for display */
 export interface ProviderListItem {
@@ -9,27 +10,13 @@ export interface ProviderListItem {
   modes: string;
 }
 
-/** Static provider data - providers are built-in and don't require daemon */
-const PROVIDERS: ProviderListItem[] = [
-  {
-    provider: "claude",
-    status: "available",
-    defaultMode: "default",
-    modes: "plan, default, bypass",
-  },
-  {
-    provider: "codex",
-    status: "available",
-    defaultMode: "auto",
-    modes: "read-only, auto, full-access",
-  },
-  {
-    provider: "opencode",
-    status: "available",
-    defaultMode: "default",
-    modes: "plan, default, bypass",
-  },
-];
+/** Derive provider list from the manifest — single source of truth */
+const PROVIDERS: ProviderListItem[] = AGENT_PROVIDER_DEFINITIONS.map((def) => ({
+  provider: def.id,
+  status: "available",
+  defaultMode: def.defaultModeId ?? "default",
+  modes: def.modes.map((m) => m.label).join(", "),
+}));
 
 /** Schema for provider ls output */
 export const providerLsSchema: OutputSchema<ProviderListItem> = {

packages/cli/src/commands/schedule/types.ts

@@ -22,7 +22,7 @@ export type ScheduleTarget =
   | {
       type: "new-agent";
       config: {
-        provider: "claude" | "codex" | "opencode";
+        provider: string;
         cwd: string;
         modeId?: string;
         model?: string;

packages/cli/src/index.ts

@@ -1,7 +1,26 @@
 import { createCli } from "./cli.js";
+import { classifyInvocation } from "./classify.js";
+import { openDesktopWithProject } from "./commands/open.js";
 
 const program = createCli();
-if (process.argv.length <= 2) {
-  process.argv.push("onboard");
+const knownCommands = new Set(program.commands.map((command) => command.name()));
+
+const invocation = classifyInvocation({
+  argv: process.argv.slice(2),
+  knownCommands,
+  cwd: process.cwd(),
+});
+
+switch (invocation.kind) {
+  case "cli": {
+    const argv = [...process.argv.slice(0, 2), ...invocation.argv];
+    if (invocation.argv.length === 0) {
+      argv.push("onboard");
+    }
+    program.parse(argv, { from: "node" });
+    break;
+  }
+  case "open-project":
+    await openDesktopWithProject(invocation.resolvedPath);
+    break;
 }
-program.parse();

packages/cli/tests/15-provider.test.ts

@@ -54,7 +54,7 @@ let claudeModelsFromJson: ProviderModel[] = [];
 const ctx = await createE2ETestContext({ timeout: 120000 });
 
 async function runProviderModelsJson(
-  provider: "claude" | "codex" | "opencode",
+  provider: string,
 ): Promise<ProviderModel[]> {
   const transientNeedles = ["transport closed", "timed out", "timeout", "socket", "econn"];
 

packages/cli/tests/32-open-project.test.ts

@@ -0,0 +1,74 @@
+#!/usr/bin/env npx zx
+
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  classifyInvocation,
+  isExistingDirectory,
+  isPathLikeArg,
+} from "../src/classify.ts";
+import { openDesktopWithProject } from "../src/commands/open.ts";
+
+console.log("📋 Phase 32: Open Project CLI Tests\n");
+
+  console.log("  Testing path-like detection exports...");
+assert.equal(isPathLikeArg("."), true);
+assert.equal(isPathLikeArg("./app"), true);
+assert.equal(isPathLikeArg("/tmp/app"), true);
+assert.equal(isPathLikeArg("~/app"), true);
+assert.equal(isPathLikeArg("run"), false);
+assert.equal(isPathLikeArg("foo"), false);
+console.log("  ✅ path-like detection matches the expected prefixes");
+
+console.log("  Testing existing directory detection and command precedence...");
+const existingProject = join(await mkdtemp(join(tmpdir(), "paseo-open-project-")), "project");
+await mkdir(existingProject);
+const originalCwd = process.cwd();
+process.chdir(join(existingProject, ".."));
+
+assert.equal(isExistingDirectory({ pathArg: "project", cwd: process.cwd() }), true);
+assert.equal(
+  classifyInvocation({
+    argv: ["project"],
+    knownCommands: new Set(["run", "status"]),
+    cwd: process.cwd(),
+  }).kind,
+  "open-project",
+);
+assert.equal(
+  classifyInvocation({
+    argv: ["run"],
+    knownCommands: new Set(["run", "status"]),
+    cwd: process.cwd(),
+  }).kind,
+  "cli",
+);
+
+process.chdir(originalCwd);
+console.log("  ✅ existing directories open as projects, but known commands still win");
+
+console.log("  Testing desktop CLI passthrough guard...");
+const originalWrite = process.stderr.write.bind(process.stderr);
+const stderrChunks: string[] = [];
+process.stderr.write = ((chunk: string | Uint8Array) => {
+  stderrChunks.push(typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8"));
+  return true;
+}) as typeof process.stderr.write;
+
+const previousExitCode = process.exitCode;
+process.exitCode = undefined;
+const previousDesktopCli = process.env.PASEO_DESKTOP_CLI;
+process.env.PASEO_DESKTOP_CLI = "1";
+
+await openDesktopWithProject(existingProject);
+
+process.stderr.write = originalWrite;
+assert.equal(process.exitCode, 1);
+assert.match(stderrChunks.join(""), /desktop CLI passthrough mode/);
+process.exitCode = previousExitCode;
+process.env.PASEO_DESKTOP_CLI = previousDesktopCli;
+console.log("  ✅ desktop CLI passthrough mode is rejected");
+
+console.log("\n✅ Phase 32: Open Project CLI Tests PASSED");

packages/cli/tests/e2e/run-output-schema.test.ts

@@ -50,7 +50,7 @@ async function cleanup(): Promise<void> {
 }
 
 async function runProviderCase(input: {
-  provider: "claude" | "codex" | "opencode";
+  provider: string;
   mode: string;
   model: string;
 }): Promise<void> {

packages/desktop/bin/paseo

@@ -31,4 +31,7 @@ else
   exit 1
 fi
 
-exec env PASEO_DESKTOP_CLI=1 "${APP_EXECUTABLE}" "$@"
+RUNNER_PATH="${RESOURCES_DIR}/app.asar.unpacked/dist/daemon/node-entrypoint-runner.js"
+CLI_ENTRYPOINT="${RESOURCES_DIR}/app.asar/node_modules/@getpaseo/cli/dist/index.js"
+
+exec env ELECTRON_RUN_AS_NODE=1 "${APP_EXECUTABLE}" --disable-warning=DEP0040 "${RUNNER_PATH}" node-script "${CLI_ENTRYPOINT}" "$@"

packages/desktop/bin/paseo.cmd

@@ -10,5 +10,5 @@ if not exist "%APP_EXECUTABLE%" (
 )
 
 set "ELECTRON_RUN_AS_NODE=1"
-"%APP_EXECUTABLE%" "%RESOURCES_DIR%\app.asar\dist\daemon\node-entrypoint-runner.js" bare "%RESOURCES_DIR%\app.asar\node_modules\@getpaseo\cli\dist\index.js" %*
+"%APP_EXECUTABLE%" --disable-warning=DEP0040 "%RESOURCES_DIR%\app.asar.unpacked\dist\daemon\node-entrypoint-runner.js" node-script "%RESOURCES_DIR%\app.asar\node_modules\@getpaseo\cli\dist\index.js" %*
 exit /b %errorlevel%

packages/desktop/electron-builder.yml

@@ -1,3 +1,4 @@
+npmRebuild: false
 appId: sh.paseo.desktop
 productName: Paseo
 executableName: Paseo
@@ -6,9 +7,13 @@ directories:
   output: release
 files:
   - dist/**/*
+asarUnpack:
+  - dist/daemon/node-entrypoint-runner.js
 extraResources:
   - from: ../app/dist
     to: app-dist
+  - from: ../../skills
+    to: skills
 publish:
   provider: github
   owner: getpaseo

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/desktop",
-  "version": "0.1.41",
+  "version": "0.1.47",
   "private": true,
   "description": "Paseo desktop app (Electron wrapper)",
   "main": "dist/main.js",
@@ -12,8 +12,8 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@getpaseo/cli": "0.1.41",
-    "@getpaseo/server": "0.1.41",
+    "@getpaseo/cli": "0.1.47",
+    "@getpaseo/server": "0.1.47",
     "electron-log": "^5.4.3",
     "electron-updater": "^6.6.2",
     "ws": "^8.14.2"

packages/desktop/src/daemon/daemon-manager.ts

@@ -1,9 +1,9 @@
 import { spawn, type ChildProcess } from "node:child_process";
-import { existsSync, readFileSync } from "node:fs";
+import { readFileSync } from "node:fs";
 import path from "node:path";
 import { app, ipcMain } from "electron";
 import log from "electron-log/main";
-import { resolvePaseoHome, getOrCreateServerId } from "@getpaseo/server";
+import { resolvePaseoHome } from "@getpaseo/server";
 import {
   copyAttachmentFileToManagedStorage,
   deleteManagedAttachmentFile,
@@ -12,15 +12,25 @@ import {
   writeAttachmentBase64,
 } from "../features/attachments.js";
 import { checkForAppUpdate, downloadAndInstallUpdate } from "../features/auto-updater.js";
+import {
+  installCli,
+  getCliInstallStatus,
+  installSkills,
+  getSkillsInstallStatus,
+} from "../integrations/integrations-manager.js";
 import {
   openLocalTransportSession,
   sendLocalTransportMessage,
   closeLocalTransportSession,
 } from "./local-transport.js";
-import { createNodeEntrypointInvocation, resolveDaemonRunnerEntrypoint } from "./runtime-paths.js";
+import {
+  createNodeEntrypointInvocation,
+  resolveDaemonRunnerEntrypoint,
+  runCliJsonCommand,
+  runCliTextCommand,
+} from "./runtime-paths.js";
 
 const DAEMON_LOG_FILENAME = "daemon.log";
-const DAEMON_PID_FILENAME = "paseo.pid";
 const PID_POLL_INTERVAL_MS = 100;
 const STARTUP_POLL_INTERVAL_MS = 200;
 const STARTUP_POLL_MAX_ATTEMPTS = 150;
@@ -37,6 +47,8 @@ type DesktopDaemonStatus = {
   hostname: string | null;
   pid: number | null;
   home: string;
+  version: string | null;
+  desktopManaged: boolean;
   error: string | null;
 };
 
@@ -51,12 +63,6 @@ type DesktopPairingOffer = {
   qr: string | null;
 };
 
-type CliSymlinkInstructions = {
-  title: string;
-  detail: string;
-  commands: string;
-};
-
 type DesktopCommandHandler = (args?: Record<string, unknown>) => Promise<unknown> | unknown;
 
 // ---------------------------------------------------------------------------
@@ -67,10 +73,6 @@ function getPaseoHome(): string {
   return resolvePaseoHome(process.env);
 }
 
-function pidFilePath(): string {
-  return path.join(getPaseoHome(), DAEMON_PID_FILENAME);
-}
-
 function logFilePath(): string {
   return path.join(getPaseoHome(), DAEMON_LOG_FILENAME);
 }
@@ -160,41 +162,6 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
-function resolveTcpHostFromListen(listen: string): string | null {
-  const normalized = listen.trim();
-  if (!normalized) {
-    return null;
-  }
-
-  if (
-    normalized.startsWith("/") ||
-    normalized.startsWith("unix://") ||
-    normalized.startsWith("pipe://") ||
-    normalized.startsWith("\\\\.\\pipe\\") ||
-    /^[A-Za-z]:[/\\]/.test(normalized)
-  ) {
-    return null;
-  }
-
-  if (/^\d+$/.test(normalized)) {
-    return `127.0.0.1:${normalized}`;
-  }
-
-  if (normalized.includes(":")) {
-    return normalized;
-  }
-
-  return null;
-}
-
-function buildDaemonHttpBaseUrl(listen: string): string | null {
-  const endpoint = resolveTcpHostFromListen(listen);
-  if (!endpoint) {
-    return null;
-  }
-  return new URL(`http://${endpoint}`).toString().replace(/\/$/, "");
-}
-
 function resolveDesktopAppVersion(): string {
   if (app.isPackaged) {
     return app.getVersion();
@@ -219,57 +186,69 @@ function resolveDesktopAppVersion(): string {
 // Daemon lifecycle
 // ---------------------------------------------------------------------------
 
-function resolveStatus(): DesktopDaemonStatus {
+async function resolveStatus(): Promise<DesktopDaemonStatus> {
   const home = getPaseoHome();
-  const pidPath = pidFilePath();
-
-  let pid: number | null = null;
-  let hostname: string | null = null;
-  let listen: string | null = null;
 
   try {
-    if (existsSync(pidPath)) {
-      const parsed = JSON.parse(readFileSync(pidPath, "utf-8")) as Record<string, unknown>;
-      const pidValue = parsed.pid;
-      if (typeof pidValue === "number" && Number.isInteger(pidValue) && pidValue > 0) {
-        pid = pidValue;
-        hostname = typeof parsed.hostname === "string" ? parsed.hostname : null;
-        const pidListen =
-          typeof parsed.listen === "string"
-            ? parsed.listen
-            : typeof parsed.sockPath === "string"
-              ? (parsed.sockPath as string)
-              : null;
-        listen = pidListen;
-      }
-    }
-  } catch {
-    // PID file missing or malformed — treat as stopped.
+    const payload = (await runCliJsonCommand(["daemon", "status", "--json"])) as Record<
+      string,
+      unknown
+    >;
+    const localDaemon = typeof payload.localDaemon === "string" ? payload.localDaemon : "stopped";
+    const running = localDaemon === "running";
+
+    return {
+      serverId: typeof payload.serverId === "string" ? payload.serverId : "",
+      status: running ? "running" : "stopped",
+      listen: typeof payload.listen === "string" ? payload.listen : null,
+      hostname: running && typeof payload.hostname === "string" ? payload.hostname : null,
+      pid: running && typeof payload.pid === "number" ? payload.pid : null,
+      home,
+      version: typeof payload.daemonVersion === "string" ? payload.daemonVersion : null,
+      desktopManaged: payload.desktopManaged === true,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      serverId: "",
+      status: "stopped",
+      listen: null,
+      hostname: null,
+      pid: null,
+      home,
+      version: null,
+      desktopManaged: false,
+      error: error instanceof Error ? error.message : String(error),
+    };
   }
+}
 
-  const running = pid !== null && isProcessRunning(pid);
-
-  let serverId = "";
-  try {
-    serverId = getOrCreateServerId(home);
-  } catch {
-    // Ignore — server-id may not exist yet.
-  }
-
-  return {
-    serverId,
-    status: running ? "running" : "stopped",
-    listen,
-    hostname: running ? hostname : null,
-    pid: running ? pid : null,
-    home,
-    error: null,
-  };
+function normalizeVersion(version: string | null): string | null {
+  const trimmed = version?.trim();
+  if (!trimmed) return null;
+  return trimmed.replace(/^v/i, "");
 }
 
 async function startDaemon(): Promise<DesktopDaemonStatus> {
-  const current = resolveStatus();
-  if (current.status === "running") return current;
+  const current = await resolveStatus();
+  if (current.status === "running") {
+    const appVersion = normalizeVersion(resolveDesktopAppVersion());
+    const daemonVersion = normalizeVersion(current.version);
+    if (
+      current.desktopManaged &&
+      appVersion &&
+      daemonVersion &&
+      appVersion !== daemonVersion
+    ) {
+      logDesktopDaemonLifecycle("daemon version mismatch, restarting", {
+        appVersion,
+        daemonVersion,
+      });
+      await stopDaemon();
+    } else {
+      return current;
+    }
+  }
 
   const daemonRunner = resolveDaemonRunnerEntrypoint();
   const invocation = createNodeEntrypointInvocation({
@@ -292,7 +271,7 @@ async function startDaemon(): Promise<DesktopDaemonStatus> {
     invocation.args,
     {
       detached: true,
-      env: invocation.env,
+      env: { ...invocation.env, PASEO_DESKTOP_MANAGED: "1" },
       stdio: ["ignore", "ignore", "ignore"],
     },
   );
@@ -344,7 +323,7 @@ async function startDaemon(): Promise<DesktopDaemonStatus> {
 
   // Poll for PID file with server ID
   for (let attempt = 0; attempt < STARTUP_POLL_MAX_ATTEMPTS; attempt++) {
-    const status = resolveStatus();
+    const status = await resolveStatus();
     if (attempt === 0 || attempt === STARTUP_POLL_MAX_ATTEMPTS - 1 || attempt % 10 === 9) {
       logDesktopDaemonLifecycle("polling daemon status after detached start", {
         attempt: attempt + 1,
@@ -358,11 +337,11 @@ async function startDaemon(): Promise<DesktopDaemonStatus> {
     await sleep(STARTUP_POLL_INTERVAL_MS);
   }
 
-  return resolveStatus();
+  return await resolveStatus();
 }
 
 async function stopDaemon(): Promise<DesktopDaemonStatus> {
-  const status = resolveStatus();
+  const status = await resolveStatus();
   if (status.status !== "running" || !status.pid) return status;
 
   const pid = status.pid;
@@ -378,7 +357,7 @@ async function stopDaemon(): Promise<DesktopDaemonStatus> {
     throw new Error(`Timed out waiting for daemon PID ${pid} to stop`);
   }
 
-  return resolveStatus();
+  return await resolveStatus();
 }
 
 async function restartDaemon(): Promise<DesktopDaemonStatus> {
@@ -394,8 +373,12 @@ function getDaemonLogs(): DesktopDaemonLogs {
   };
 }
 
+async function getCliDaemonStatus(): Promise<string> {
+  return await runCliTextCommand(["daemon", "status"]);
+}
+
 async function getDaemonPairing(): Promise<DesktopPairingOffer> {
-  const status = resolveStatus();
+  const status = await resolveStatus();
   if (status.status !== "running") {
     return {
       relayEnabled: false,
@@ -405,20 +388,7 @@ async function getDaemonPairing(): Promise<DesktopPairingOffer> {
   }
 
   try {
-    if (!status.listen) {
-      throw new Error("Daemon listen target is unavailable.");
-    }
-    const baseUrl = buildDaemonHttpBaseUrl(status.listen);
-    if (!baseUrl) {
-      throw new Error(`Daemon listen target is not a TCP endpoint: ${status.listen}`);
-    }
-
-    const response = await fetch(`${baseUrl}/pairing`);
-    if (!response.ok) {
-      throw new Error(`Daemon pairing request failed with ${response.status}`);
-    }
-
-    const payload = (await response.json()) as unknown;
+    const payload = await runCliJsonCommand(["daemon", "pair", "--json"]);
     if (!isRecord(payload)) {
       throw new Error("Daemon pairing response was not an object.");
     }
@@ -437,86 +407,21 @@ async function getDaemonPairing(): Promise<DesktopPairingOffer> {
   }
 }
 
-async function getLocalDaemonVersion(): Promise<{
-  version: string | null;
-  error: string | null;
-}> {
-  const status = resolveStatus();
+async function getLocalDaemonVersion(): Promise<{ version: string | null; error: string | null }> {
+  const status = await resolveStatus();
   if (status.status !== "running") {
-    return {
-      version: null,
-      error: "Daemon is not running.",
-    };
+    return { version: null, error: "Daemon is not running." };
   }
-
-  if (!status.listen) {
-    return { version: null, error: "Daemon listen target is unavailable." };
-  }
-
-  const baseUrl = buildDaemonHttpBaseUrl(status.listen);
-  if (!baseUrl) {
-    return { version: null, error: `Daemon listen target is not a TCP endpoint: ${status.listen}` };
-  }
-
-  try {
-    const response = await fetch(`${baseUrl}/api/status`);
-    if (!response.ok) {
-      return { version: null, error: `Daemon status request failed with ${response.status}` };
-    }
-    const payload = (await response.json()) as Record<string, unknown>;
-    const version = typeof payload.version === "string" ? payload.version.trim() : null;
-    return {
-      version: version && version.length > 0 ? version : null,
-      error: version ? null : "Running daemon did not report a version.",
-    };
-  } catch (error) {
-    return {
-      version: null,
-      error: error instanceof Error ? error.message : String(error),
-    };
-  }
-}
-
-async function resolveCurrentUpdateVersion(): Promise<string> {
-  const daemonVersion = await getLocalDaemonVersion();
-  if (daemonVersion.version) {
-    return daemonVersion.version;
-  }
-  return resolveDesktopAppVersion();
-}
-
-function getCliSymlinkInstructions(): CliSymlinkInstructions {
-  const electronExePath = app.getPath("exe");
-  const cliShimFilename = process.platform === "win32" ? "paseo.cmd" : "paseo";
-
-  if (process.platform === "darwin") {
-    const appBundle = electronExePath.replace(/\/Contents\/MacOS\/.+$/, "");
-    const cliPath = path.join(appBundle, "Contents", "Resources", "bin", cliShimFilename);
-    return {
-      title: "Add paseo to your shell",
-      detail: "Create a symlink to the bundled Paseo CLI shim.",
-      commands: `sudo ln -sf "${cliPath}" /usr/local/bin/paseo`,
-    };
-  }
-
-  if (process.platform === "win32") {
-    const cliPath = path.join(path.dirname(electronExePath), "resources", "bin", cliShimFilename);
-    return {
-      title: "Add paseo to your PATH",
-      detail: "Add the Paseo installation directory to your system PATH so paseo.cmd is available.",
-      commands: `setx PATH "%PATH%;${path.dirname(cliPath)}"`,
-    };
-  }
-
-  // Linux
-  const cliPath = path.join(path.dirname(electronExePath), "resources", "bin", cliShimFilename);
   return {
-    title: "Add paseo to your shell",
-    detail: "Create a symlink to the bundled Paseo CLI shim.",
-    commands: `sudo ln -sf "${cliPath}" /usr/local/bin/paseo`,
+    version: status.version,
+    error: status.version ? null : "Running daemon did not report a version.",
   };
 }
 
+function resolveCurrentUpdateVersion(): string {
+  return resolveDesktopAppVersion();
+}
+
 // ---------------------------------------------------------------------------
 // IPC registration
 // ---------------------------------------------------------------------------
@@ -529,7 +434,7 @@ export function createDaemonCommandHandlers(): Record<string, DesktopCommandHand
     restart_desktop_daemon: () => restartDaemon(),
     desktop_daemon_logs: () => getDaemonLogs(),
     desktop_daemon_pairing: () => getDaemonPairing(),
-    cli_symlink_instructions: () => getCliSymlinkInstructions(),
+    cli_daemon_status: () => getCliDaemonStatus(),
     write_attachment_base64: (args) => writeAttachmentBase64(args ?? {}),
     copy_attachment_file: (args) => copyAttachmentFileToManagedStorage(args ?? {}),
     read_file_base64: (args) => readManagedFileBase64(args ?? {}),
@@ -557,9 +462,15 @@ export function createDaemonCommandHandlers(): Record<string, DesktopCommandHand
     },
     install_app_update: async () => {
       const currentVersion = await resolveCurrentUpdateVersion();
-      return downloadAndInstallUpdate(currentVersion);
+      return downloadAndInstallUpdate(currentVersion, async () => {
+        await stopDaemon();
+      });
     },
     get_local_daemon_version: () => getLocalDaemonVersion(),
+    install_cli: () => installCli(),
+    get_cli_install_status: () => getCliInstallStatus(),
+    install_skills: () => installSkills(),
+    get_skills_install_status: () => getSkillsInstallStatus(),
   };
 }
 

packages/desktop/src/daemon/node-entrypoint-launcher.test.ts

@@ -62,6 +62,20 @@ describe("node-entrypoint-launcher", () => {
       ).toEqual(["--version"]);
     });
 
+    it("passes --open-project through as a normal CLI arg", () => {
+      expect(
+        parseCliPassthroughArgsFromArgv({
+          argv: [
+            "/Applications/Paseo.app/Contents/MacOS/Paseo",
+            "--open-project",
+            "/tmp/project",
+          ],
+          isDefaultApp: false,
+          forceCli: false,
+        }),
+      ).toEqual(["--open-project", "/tmp/project"]);
+    });
+
     it("forces CLI mode for shim launches even without args", () => {
       expect(
         parseCliPassthroughArgsFromArgv({
@@ -81,15 +95,16 @@ describe("node-entrypoint-launcher", () => {
           isPackaged: true,
           packagedRunnerPath: "/Applications/Paseo.app/Contents/Resources/app.asar/dist/daemon/node-entrypoint-runner.js",
           entrypoint: CLI_ENTRYPOINT,
-          argvMode: "bare",
+          argvMode: "node-script",
           args: ["ls", "--json"],
           baseEnv: { PATH: "/usr/bin" },
         }),
       ).toEqual({
         command: "/Applications/Paseo.app/Contents/MacOS/Paseo",
         args: [
+          "--disable-warning=DEP0040",
           "/Applications/Paseo.app/Contents/Resources/app.asar/dist/daemon/node-entrypoint-runner.js",
-          "bare",
+          "node-script",
           "/tmp/paseo-cli.js",
           "ls",
           "--json",
@@ -108,7 +123,7 @@ describe("node-entrypoint-launcher", () => {
           isPackaged: false,
           packagedRunnerPath: null,
           entrypoint: CLI_ENTRYPOINT,
-          argvMode: "bare",
+          argvMode: "node-script",
           args: ["ls"],
           baseEnv: { PATH: "/usr/bin" },
         }),
@@ -136,6 +151,7 @@ describe("node-entrypoint-launcher", () => {
       ).toEqual({
         command: "/Applications/Paseo.app/Contents/MacOS/Paseo",
         args: [
+          "--disable-warning=DEP0040",
           "/Applications/Paseo.app/Contents/Resources/app.asar/dist/daemon/node-entrypoint-runner.js",
           "node-script",
           "/tmp/paseo-cli.js",