chore(release): cut 0.1.45

- Add classify.ts as the single source of truth for CLI invocation
  routing (discriminated union, derives known commands from Commander)
- Remove all hardcoded command lists and duplicate path detection logic
- Simplify shell wrappers to dumb pipes (zero classification)
- Fix hot-start: use `open -n -g -a` (VS Code pattern) so second-instance
  event fires when app is already running
- Fix cold-start race: pull-based IPC (getPendingOpenProject) so renderer
  fetches the pending path after React mounts, instead of push event that
  arrived before the listener existed
- Fix asar read corruption: unpack node-entrypoint-runner.js from asar
  (Node.js v24 in Electron 41 can't parse package.json inside asar)
- Strip ELECTRON_RUN_AS_NODE from env when spawning desktop app from CLI

.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,64 @@
 # Changelog
 
+## 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

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-RqH1tJ6+pS0XJ4yxxfQ6BRQJfSdsPcxXwCpy+BJ/dhY=";
+  npmDepsHash = "sha256-KBkXlFzYesnNdRRchNzJtrDGQUsIFv9hYYf1TBnfWSA=";
 
   # 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.42",
+  "version": "0.1.45",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "paseo",
-      "version": "0.1.42",
+      "version": "0.1.45",
       "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.42",
+      "version": "0.1.45",
       "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.42",
-        "@getpaseo/highlight": "0.1.42",
-        "@getpaseo/server": "0.1.42",
+        "@getpaseo/expo-two-way-audio": "0.1.45",
+        "@getpaseo/highlight": "0.1.45",
+        "@getpaseo/server": "0.1.45",
         "@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.42",
+      "version": "0.1.45",
       "dependencies": {
         "@clack/prompts": "^1.0.0",
-        "@getpaseo/relay": "0.1.42",
-        "@getpaseo/server": "0.1.42",
+        "@getpaseo/relay": "0.1.45",
+        "@getpaseo/server": "0.1.45",
         "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.42",
+      "version": "0.1.45",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
-        "@getpaseo/cli": "0.1.42",
-        "@getpaseo/server": "0.1.42",
+        "@getpaseo/cli": "0.1.45",
+        "@getpaseo/server": "0.1.45",
         "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.42",
+      "version": "0.1.45",
       "license": "MIT",
       "devDependencies": {
         "@biomejs/biome": "1.9.4",
@@ -35372,7 +35440,7 @@
     },
     "packages/highlight": {
       "name": "@getpaseo/highlight",
-      "version": "0.1.42",
+      "version": "0.1.45",
       "dependencies": {
         "@lezer/common": "^1.5.0",
         "@lezer/cpp": "^1.1.5",
@@ -35398,7 +35466,7 @@
     },
     "packages/relay": {
       "name": "@getpaseo/relay",
-      "version": "0.1.42",
+      "version": "0.1.45",
       "dependencies": {
         "base64-js": "^1.5.1",
         "tweetnacl": "^1.0.3",
@@ -35414,13 +35482,14 @@
     },
     "packages/server": {
       "name": "@getpaseo/server",
-      "version": "0.1.42",
+      "version": "0.1.45",
       "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.42",
-        "@getpaseo/relay": "0.1.42",
+        "@getpaseo/highlight": "0.1.45",
+        "@getpaseo/relay": "0.1.45",
         "@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.42",
+      "version": "0.1.45",
       "dependencies": {
         "@cloudflare/vite-plugin": "^1.20.3",
         "@cloudflare/workers-types": "^4.20260114.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.42",
+  "version": "0.1.45",
   "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.42",
+  "version": "0.1.45",
   "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.42",
-    "@getpaseo/highlight": "0.1.42",
-    "@getpaseo/server": "0.1.42",
+    "@getpaseo/expo-two-way-audio": "0.1.45",
+    "@getpaseo/highlight": "0.1.45",
+    "@getpaseo/server": "0.1.45",
     "@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;
 }
 
@@ -520,6 +527,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 +579,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>
@@ -1893,6 +1906,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpaseo/cli",
-  "version": "0.1.42",
+  "version": "0.1.45",
   "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.42",
-    "@getpaseo/server": "0.1.42",
+    "@getpaseo/relay": "0.1.45",
+    "@getpaseo/server": "0.1.45",
     "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

@@ -34,6 +34,8 @@ interface DaemonStatus {
   daemonNode: string;
   cliNode: string;
   cliVersion: string;
+  daemonVersion: string | null;
+  desktopManaged: boolean;
   providers: ProviderBinaryStatus[];
   note?: string;
 }
@@ -129,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) {
@@ -229,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) {
@@ -240,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);
@@ -308,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}" "${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%" "%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.42",
+  "version": "0.1.45",
   "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.42",
-    "@getpaseo/server": "0.1.42",
+    "@getpaseo/cli": "0.1.45",
+    "@getpaseo/server": "0.1.45",
     "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,7 +95,7 @@ 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" },
         }),
@@ -89,7 +103,7 @@ describe("node-entrypoint-launcher", () => {
         command: "/Applications/Paseo.app/Contents/MacOS/Paseo",
         args: [
           "/Applications/Paseo.app/Contents/Resources/app.asar/dist/daemon/node-entrypoint-runner.js",
-          "bare",
+          "node-script",
           "/tmp/paseo-cli.js",
           "ls",
           "--json",
@@ -108,7 +122,7 @@ describe("node-entrypoint-launcher", () => {
           isPackaged: false,
           packagedRunnerPath: null,
           entrypoint: CLI_ENTRYPOINT,
-          argvMode: "bare",
+          argvMode: "node-script",
           args: ["ls"],
           baseEnv: { PATH: "/usr/bin" },
         }),

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

@@ -42,9 +42,14 @@ export function parseCliPassthroughArgsFromArgv(
   input: ParseCliPassthroughArgsFromArgvInput,
 ): string[] | null {
   const startIndex = input.isDefaultApp ? 2 : 1;
-  const effective = input.argv
-    .slice(startIndex)
-    .filter((arg) => !IGNORED_ARG_PREFIXES.some((p) => arg.startsWith(p)));
+  const effective: string[] = [];
+
+  for (const arg of input.argv.slice(startIndex)) {
+    if (IGNORED_ARG_PREFIXES.some((prefix) => arg.startsWith(prefix))) {
+      continue;
+    }
+    effective.push(arg);
+  }
 
   if (input.forceCli) {
     return effective;

packages/desktop/src/daemon/runtime-paths.ts

@@ -1,5 +1,5 @@
 import { existsSync, readFileSync } from "node:fs";
-import { spawnSync, type SpawnSyncReturns } from "node:child_process";
+import { spawn, spawnSync } from "node:child_process";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { app } from "electron";
@@ -76,7 +76,7 @@ function resolvePackagedAsarPath(): string {
 }
 
 function resolvePackagedNodeEntrypointRunnerPath(): string {
-  return path.join(resolvePackagedAsarPath(), "dist", "daemon", "node-entrypoint-runner.js");
+  return path.join(process.resourcesPath, "app.asar.unpacked", "dist", "daemon", "node-entrypoint-runner.js");
 }
 
 function assertPathExists(input: { label: string; filePath: string }): string {
@@ -219,23 +219,22 @@ export function createNodeEntrypointInvocation(input: {
   });
 }
 
-function spawnCliProcess(args: string[]): SpawnSyncReturns<Buffer> {
+function createCliInvocation(args: string[]): NodeEntrypointInvocation {
   const cli = resolveCliEntrypoint();
-  const invocation = createNodeEntrypointInvocation({
+  return createNodeEntrypointInvocation({
     entrypoint: cli,
     argvMode: "bare",
     args,
     baseEnv: process.env,
   });
-
-  return spawnSync(invocation.command, invocation.args, {
-    env: invocation.env,
-    stdio: "inherit",
-  });
 }
 
 export function runCliPassthroughCommand(args: string[]): number {
-  const result = spawnCliProcess(args);
+  const invocation = createCliInvocation(args);
+  const result = spawnSync(invocation.command, invocation.args, {
+    env: invocation.env,
+    stdio: "inherit",
+  });
   if (result.error) {
     throw result.error;
   }
@@ -246,3 +245,70 @@ export function runCliPassthroughCommand(args: string[]): number {
 
   return result.signal ? 1 : 0;
 }
+
+function spawnAsync(
+  command: string,
+  args: string[],
+  options: { env: NodeJS.ProcessEnv },
+): Promise<{ stdout: string; stderr: string; exitCode: number | null }> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      env: options.env,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    let stdout = "";
+    let stderr = "";
+
+    child.stdout.on("data", (data: Buffer) => {
+      stdout += data.toString();
+    });
+    child.stderr.on("data", (data: Buffer) => {
+      stderr += data.toString();
+    });
+
+    child.on("error", reject);
+    child.on("close", (exitCode) => {
+      resolve({ stdout, stderr, exitCode });
+    });
+  });
+}
+
+export async function runCliTextCommand(args: string[]): Promise<string> {
+  const invocation = createCliInvocation(args);
+  const result = await spawnAsync(invocation.command, invocation.args, {
+    env: invocation.env,
+  });
+
+  if (result.exitCode !== 0) {
+    const stderr = result.stderr.trim();
+    throw new Error(stderr.length > 0 ? stderr : `CLI command failed with exit code ${result.exitCode}`);
+  }
+
+  return result.stdout.trimEnd();
+}
+
+export async function runCliJsonCommand(args: string[]): Promise<unknown> {
+  const invocation = createCliInvocation(args);
+  const result = await spawnAsync(invocation.command, invocation.args, {
+    env: invocation.env,
+  });
+
+  if (result.exitCode !== 0) {
+    const stderr = result.stderr.trim();
+    throw new Error(stderr.length > 0 ? stderr : `CLI command failed with exit code ${result.exitCode}`);
+  }
+
+  const stdout = result.stdout.trim();
+  if (stdout.length === 0) {
+    throw new Error("CLI command did not produce JSON output.");
+  }
+
+  try {
+    return JSON.parse(stdout) as unknown;
+  } catch (error) {
+    throw new Error(
+      `CLI command returned invalid JSON: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}

packages/desktop/src/features/auto-updater.ts

@@ -98,6 +98,7 @@ export async function checkForAppUpdate(currentVersion: string): Promise<AppUpda
 
 export async function downloadAndInstallUpdate(
   currentVersion: string,
+  onBeforeQuit?: () => Promise<void>,
 ): Promise<AppUpdateInstallResult> {
   if (!app.isPackaged) {
     return {
@@ -131,8 +132,9 @@ export async function downloadAndInstallUpdate(
     await autoUpdater.downloadUpdate();
     // quitAndInstall restarts the app with the new version.
     // Use a short delay to allow the renderer to receive the response.
-    setTimeout(() => {
+    setTimeout(async () => {
       try {
+        if (onBeforeQuit) await onBeforeQuit();
         autoUpdater.quitAndInstall(/* isSilent */ false, /* isForceRunAfter */ true);
       } catch (error) {
         console.error("[auto-updater] quitAndInstall failed:", error);