fix: update lockfile signatures and Nix hash

- Remove orphaned PID lock code from bootstrap (moved to supervisor)
- Fix worktree archive adapter to look up workspace by directory
- Replace registerWorktreeWorkspaceRecord with inline SQLite implementation
- Remove unused imports (stat, createPersistedWorkspaceRecord, PersistedProjectRecord)

.github/FUNDING.yml

@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: [boudra]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/deploy-website.yml

@@ -9,6 +9,8 @@ on:
       - 'package-lock.json'
       - 'patches/**'
       - '.github/workflows/deploy-website.yml'
+  release:
+    types: [published, edited]
   workflow_dispatch:
 
 jobs:

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.1.38 - 2026-03-30
+
+### Fixed
+- Fixed daemon startup race where the app could time out connecting on first launch because the PID file advertised a listen address before the server was ready.
+- Fixed daemon log rotation losing startup traces — trace-level WebSocket logs no longer include full message payloads.
+
+## 0.1.37 - 2026-03-29
+
+### Added
+- Custom window controls on Windows and Linux — the native titlebar is replaced with overlay controls that match the app's design.
+- Desktop file logging with electron-log for easier debugging of daemon and app issues.
+
+### Fixed
+- Fixed broken PATH propagation and Claude binary resolution on Windows.
+- Dictation errors now show a visible toast instead of failing silently.
+
 ## 0.1.36 - 2026-03-27
 
 ### Fixed

CLAUDE.md

@@ -35,6 +35,8 @@ npm run dev                          # Start daemon + Expo in Tmux
 npm run cli -- ls -a -g              # List all agents
 npm run cli -- daemon status         # Check daemon status
 npm run typecheck                    # Always run after changes
+npm run db:query                     # Show DB table row counts
+npm run db:query -- "SELECT ..."     # Run arbitrary SQL against SQLite
 ```
 
 See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requirements, and debugging.

README.md

@@ -26,20 +26,32 @@ Run agents in parallel on your own machines. Ship from your phone or your desk.
 
 ## Getting Started
 
-### Desktop app
+Paseo runs a local server called the daemon that manages your coding agents. Clients like the desktop app, mobile app, web app, and CLI connect to it.
 
-Download from [paseo.sh/download](https://paseo.sh/download) or the [GitHub releases page](https://github.com/getpaseo/paseo/releases). The app bundles its own daemon, so there's nothing else to install. It can also connect to daemons running on other machines.
+### Prerequisites
 
-### Headless / server mode
+You need at least one agent CLI installed and configured with your credentials:
 
-Run the daemon on any machine:
+- [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
+- [Codex](https://github.com/openai/codex)
+- [OpenCode](https://github.com/anomalyco/opencode)
+
+### Desktop app (recommended)
+
+Download it from [paseo.sh/download](https://paseo.sh/download) or the [GitHub releases page](https://github.com/getpaseo/paseo/releases). Open the app and the daemon starts automatically. Nothing else to install.
+
+To connect from your phone, scan the QR code shown in Settings.
+
+### CLI / headless
+
+Install the CLI and start Paseo:
 
 ```bash
 npm install -g @getpaseo/cli
 paseo
 ```
 
-Then connect from any client — desktop, web, mobile, or CLI. See [paseo.sh/download](https://paseo.sh/download) for all options.
+This shows a QR code in the terminal. Connect from any client. This path is useful for servers and remote machines.
 
 For full setup and configuration, see:
 - [Docs](https://paseo.sh/docs)

docs/ARCHITECTURE.md

@@ -31,6 +31,14 @@ Your code never leaves your machine. Paseo is local-first.
 └───────────┘ └────────┘ └──────────┘
 ```
 
+## Components at a glance
+
+- **Daemon:** Local server that spawns and manages agent processes and exposes the WebSocket API.
+- **App:** Cross-platform Expo client for iOS, Android, web, and the shared UI used by desktop.
+- **CLI:** Terminal interface for agent workflows that can also start and manage the daemon.
+- **Desktop app:** Electron wrapper around the web app that bundles and auto-manages its own daemon.
+- **Relay:** Optional encrypted bridge for remote access without opening ports directly.
+
 ## Packages
 
 ### `packages/server` — The daemon

docs/DEVELOPMENT.md

@@ -35,6 +35,25 @@ In worktrees or with `npm run dev`, ports may differ. Never assume defaults.
 
 Check `$PASEO_HOME/daemon.log` for trace-level logs.
 
+### Database queries
+
+Run arbitrary SQL against the SQLite database:
+
+```bash
+# Show table row counts
+npm run db:query
+
+# Run any SQL
+npm run db:query -- "SELECT agent_id, title, last_status FROM agent_snapshots"
+npm run db:query -- "SELECT agent_id, seq, item_kind FROM agent_timeline_rows ORDER BY committed_at DESC LIMIT 10"
+
+# Point at a specific DB directory
+npm run db:query -- --db /path/to/db "SELECT ..."
+```
+
+Auto-detects the running dev daemon's database from `/tmp/paseo-dev.*`, `PASEO_HOME`, or `~/.paseo/db`.
+Pass either a DB directory or a `paseo.sqlite` file to `--db`. The script opens the database directly in read-only mode.
+
 ## Build sync gotchas
 
 ### Relay → Daemon

docs/FILE_ICONS.md

@@ -0,0 +1,109 @@
+# File Icons
+
+The file explorer uses colored SVG icons from [`material-icon-theme`](https://github.com/material-extensions/vscode-material-icon-theme) (installed as a dev dependency in `packages/app`).
+
+Icons are inlined as SVG strings in:
+
+```
+packages/app/src/components/material-file-icons.ts
+```
+
+This file is auto-generated. Do not edit it by hand.
+
+## How it works
+
+- `SVG_ICONS` maps icon names (e.g. `"typescript"`) to raw SVG strings
+- `EXTENSION_TO_ICON` maps file extensions (e.g. `"ts"`) to icon names
+- `getFileIconSvg(fileName)` returns the SVG string for a given filename, falling back to a generic file icon
+
+## Adding a new icon
+
+1. Find the icon name in the material-icon-theme manifest:
+
+```bash
+node -e "
+const m = require('./node_modules/material-icon-theme/dist/material-icons.json');
+console.log('fileExtensions:', m.fileExtensions['YOUR_EXT']);
+console.log('languageIds:', m.languageIds['YOUR_LANG']);
+"
+```
+
+2. Verify the SVG exists:
+
+```bash
+cat node_modules/material-icon-theme/icons/ICON_NAME.svg
+```
+
+3. Add two things to `material-file-icons.ts`:
+
+   - The SVG string in `SVG_ICONS`:
+     ```ts
+     "icon_name": `<svg ...>...</svg>`,
+     ```
+
+   - The extension mapping in `EXTENSION_TO_ICON`:
+     ```ts
+     "ext": "icon_name",
+     ```
+
+4. Run `npm run typecheck` to verify.
+
+## Currently included icons
+
+53 unique icons covering these extensions:
+
+| Extension(s) | Icon |
+|---|---|
+| `ts` | typescript |
+| `tsx` | react_ts |
+| `js` | javascript |
+| `jsx` | react |
+| `py` | python |
+| `go` | go |
+| `rs` | rust |
+| `rb` | ruby |
+| `java` | java |
+| `kt` | kotlin |
+| `c` | c |
+| `cpp` | cpp |
+| `h` | h |
+| `hpp` | hpp |
+| `cs` | csharp |
+| `swift` | swift |
+| `dart` | dart |
+| `ex`, `exs` | elixir |
+| `erl` | erlang |
+| `hs` | haskell |
+| `clj` | clojure |
+| `scala` | scala |
+| `ml` | ocaml |
+| `r` | r |
+| `lua` | lua |
+| `zig` | zig |
+| `nix` | nix |
+| `php` | php |
+| `html` | html |
+| `css` | css |
+| `scss` | sass |
+| `less` | less |
+| `json` | json |
+| `yml`, `yaml` | yaml |
+| `xml` | xml |
+| `toml` | toml |
+| `md`, `markdown` | markdown |
+| `sql` | database |
+| `graphql`, `gql` | graphql |
+| `sh`, `bash` | console |
+| `tf` | terraform |
+| `hcl` | hcl |
+| `vue` | vue |
+| `svelte` | svelte |
+| `astro` | astro |
+| `wasm` | webassembly |
+| `svg` | svg |
+| `png`, `jpg`, `jpeg`, `gif`, `webp`, `ico` | image |
+| `txt` | document |
+| `conf`, `cfg`, `ini` | settings |
+| `lock` | lock |
+| `groovy` | groovy |
+| `gradle` | gradle |

docs/STORAGE_REVAMP_PLAN.md

@@ -0,0 +1,217 @@
+# Storage Revamp Plan
+
+Status: active rollout, phases 1 and 2 complete
+
+This document now tracks the storage revamp as it exists today, not as a speculative design exercise.
+The DB foundation and the project/workspace identity cutover have landed. What remains is the explicit
+creation/archive surface cleanup, timeline durability cutover, and final removal of legacy paths.
+
+## Goals
+
+- make structured records durable in Drizzle + SQLite
+- make projects and workspaces explicit first-class records
+- stop deriving project/workspace identity from agent `cwd`
+- keep agent snapshot persistence behind clear ownership
+- move committed timeline history to storage-owned rows
+- remove legacy JSON and in-memory authority once the DB path is proven
+
+## Out of scope
+
+- moving config, keypairs, push tokens, or server identity into the DB
+- persisting raw provider deltas or transport-only chunk streams
+- designing a hosted/remote database story beyond keeping the schema portable
+- durable reasoning history unless product explicitly asks for it later
+
+## Current state
+
+The storage revamp is no longer hypothetical.
+
+Completed:
+
+- Drizzle + SQLite database bootstrap is in place
+- `projects`, `workspaces`, and `agent_snapshots` use integer primary keys
+- `workspaces.project_id` and `agent_snapshots.workspace_id` cascade on delete
+- `agent_snapshots.workspace_id` is `NOT NULL`
+- legacy JSON import feeds the DB-backed structured records
+- project/workspace records use explicit `directory` fields instead of path-as-identity
+- session read paths now use persisted workspace/project rows instead of cwd/git derivation
+- `workspace-reconciliation-service.ts` is deleted
+- `workspace-registry-bootstrap.ts` is deleted
+- `workspace-registry-model.ts` is reduced to `normalizeWorkspaceId`
+
+Still pending:
+
+- explicit `create_project` / `create_workspace` API cleanup
+- final archive cascade behavior for descendants and live agents
+- committed timeline storage cutover
+- removal of remaining legacy JSON and in-memory committed-history authority
+
+## Converged decisions
+
+### Structured record authority
+
+Projects, workspaces, and agent snapshots are DB-backed structured records.
+The server should not recreate project/workspace identity from:
+
+- git remotes
+- worktree main-repo roots
+- normalized cwd strings
+
+Temporary exception:
+
+- agent creation may still find-or-create a workspace by directory if the UI has not yet provided
+  `workspaceId` explicitly
+
+That fallback is transitional and should be deleted once the client always sends the workspace id.
+
+### Storage seams
+
+The useful seams remain concrete and domain-shaped:
+
+- `ProjectRegistry`
+- `WorkspaceRegistry`
+- `AgentSnapshotStore`
+- `AgentTimelineStore`
+
+There is no reason to reintroduce a reconciliation service layer for project/workspace identity.
+
+### Timeline contract
+
+The long-term timeline contract remains:
+
+- committed rows are durable, canonical history
+- provisional live updates are transient subscription state
+- committed history is fetched by seq
+- provider history replay is not the durability mechanism
+
+The structured-record cutover is complete before the timeline cutover so timeline rows can rely on
+stable DB-backed agent and workspace identity.
+
+## Remaining phases
+
+### Phase 3: Explicit creation and archive cleanup
+
+Goal:
+Remove the last transitional write paths that still infer state from directories.
+
+Required work:
+
+- add explicit `create_project` handling
+- add explicit `create_workspace` handling
+- make agent creation require `workspaceId` once the UI is ready
+- finish archive semantics for workspaces/projects and any descendant agent state
+- remove the temporary find-or-create-by-directory fallback from agent creation
+
+Exit gate:
+
+- project/workspace creation is explicit end to end
+- no normal creation path infers identity from cwd or git metadata
+- archive flows behave consistently for structured records and live runtime state
+
+### Phase 4: Timeline storage cutover
+
+Goal:
+Make committed history durable and storage-owned.
+
+Required work:
+
+- make `AgentTimelineStore` authoritative for committed history
+- write one committed row per finalized logical item
+- support tail, before-seq, and after-seq queries from storage
+- stop treating provider history hydration as the normal refresh/load path
+- keep provisional live updates in memory only
+
+Exit gate:
+
+- committed history survives daemon restart
+- reconnect uses committed catch-up plus future live events without gaps or duplicates
+- unloaded agents can serve committed history from storage alone
+
+### Phase 5: Legacy cleanup
+
+Goal:
+Remove compatibility paths after the DB-backed model is fully authoritative.
+
+Required work:
+
+- remove legacy JSON authority for structured records
+- remove in-memory committed-history ownership
+- remove provider-history rehydrate compatibility paths
+- trim dead protocol and reducer logic from the pre-storage model
+- update architecture docs to match the final model
+
+Exit gate:
+
+- there is one durable storage path for structured records
+- there is one durable storage path for committed timeline history
+- the runtime no longer depends on the removed JSON/in-memory model
+
+## Data model summary
+
+### Projects
+
+- integer primary key
+- `directory` is unique
+- `display_name`
+- `kind`: `git | directory`
+- optional `git_remote`
+- timestamps and archive state
+
+### Workspaces
+
+- integer primary key
+- belongs to a project by `project_id`
+- `directory` is unique
+- `display_name`
+- `kind`: `checkout | worktree`
+- timestamps and archive state
+
+### Agent snapshots
+
+- `agent_id` remains the primary key
+- belongs to a workspace by integer `workspace_id`
+- `workspace_id` is required
+- timestamps, lifecycle state, persistence metadata, attention metadata, archive state
+
+### Timeline rows
+
+Target shape once Phase 4 lands:
+
+- `agent_id`
+- committed `seq`
+- committed timestamp
+- canonical finalized item payload
+
+Not part of durable history:
+
+- raw streaming chunks
+- provisional assistant text
+- provisional reasoning text
+
+## Verification requirements
+
+Every remaining phase should keep the same bar:
+
+- `npm run typecheck`
+- targeted tests for the touched storage/session/runtime paths
+- migration/import coverage when storage authority changes
+- reconnect and catch-up scenario coverage when timeline behavior changes
+
+At minimum, timeline cutover must explicitly prove:
+
+- `fetch-after-seq`
+- `fetch-before-seq`
+- restart durability
+- no-gap/no-duplicate reconnect behavior
+
+## Main risks
+
+- timeline work reintroduces provider-history replay as hidden authority
+- archive behavior diverges between stored records and live in-memory agents
+- explicit creation work leaves the transitional cwd fallback in place too long
+- cleanup stalls after compatibility paths stop being exercised
+
+## Rule of thumb
+
+If a new change needs to ask "what can we infer from this cwd?" for project or workspace identity,
+it is probably moving in the wrong direction.

docs/TERMINAL-MODE.md

@@ -0,0 +1,506 @@
+# Terminal Mode — Implementation Plan
+
+## Concept
+
+Terminal mode wraps an agent TUI (Claude Code, Codex, OpenCode, Gemini, etc.) in a Paseo agent entity. The agent is tracked in sessions, has a provider/icon/title, and can be archived — but instead of rendering a structured chat view, it renders a terminal running the agent's CLI.
+
+**Key principle:** `agent.terminal` is a boolean flag on the agent entity. If `true`, the panel renders a terminal. If `false` (default), it renders the current structured AgentStreamView.
+
+## What Changes
+
+### Phase 1: Server — Data Model & Provider Interface
+
+#### 1.1 Add `terminal` flag to `ManagedAgentBase`
+
+**File:** `packages/server/src/server/agent/agent-manager.ts`
+
+```typescript
+type ManagedAgentBase = {
+  // ...existing fields...
+  terminal: boolean;  // NEW — if true, this agent renders as a terminal TUI
+};
+```
+
+This flag is set at creation time and never changes. A terminal agent is always a terminal agent.
+
+#### 1.2 Add `terminal` to `AgentSessionConfig`
+
+**File:** `packages/server/src/server/agent/agent-sdk-types.ts`
+
+```typescript
+export type AgentSessionConfig = {
+  // ...existing fields...
+  terminal?: boolean;  // NEW — create as terminal agent
+};
+```
+
+#### 1.3 Add `terminal` to the Zod schema
+
+**File:** `packages/server/src/shared/messages.ts`
+
+Add to `AgentSessionConfigSchema`:
+```typescript
+terminal: z.boolean().optional(),
+```
+
+Add to the `AgentStateSchema` (the wire format sent to clients):
+```typescript
+terminal: z.boolean().optional(),
+```
+
+#### 1.4 Add terminal command builders to `AgentClient`
+
+**File:** `packages/server/src/server/agent/agent-sdk-types.ts`
+
+```typescript
+export type TerminalCommand = {
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+};
+
+export interface AgentClient {
+  // ...existing methods...
+
+  /**
+   * Build the shell command to launch this agent's TUI for a new session.
+   * Only available if capabilities.supportsTerminalMode is true.
+   */
+  buildTerminalCreateCommand?(config: AgentSessionConfig): TerminalCommand;
+
+  /**
+   * Build the shell command to resume an existing session in the agent's TUI.
+   * Only available if capabilities.supportsTerminalMode is true.
+   */
+  buildTerminalResumeCommand?(handle: AgentPersistenceHandle): TerminalCommand;
+}
+```
+
+#### 1.5 Add `supportsTerminalMode` capability
+
+**File:** `packages/server/src/server/agent/agent-sdk-types.ts`
+
+```typescript
+export type AgentCapabilityFlags = {
+  // ...existing flags...
+  supportsTerminalMode: boolean;  // NEW
+};
+```
+
+Also add to the Zod schema in `messages.ts`:
+```typescript
+supportsTerminalMode: z.boolean(),
+```
+
+#### 1.6 Implement terminal command builders in providers
+
+**Claude** (`packages/server/src/server/agent/providers/claude-agent.ts`):
+```typescript
+buildTerminalCreateCommand(config: AgentSessionConfig): TerminalCommand {
+  const args: string[] = [];
+  if (config.modeId === "bypassPermissions") {
+    args.push("--dangerously-skip-permissions");
+  }
+  if (config.model) args.push("--model", config.model);
+  // mode mapping: default → nothing, plan → --plan, etc.
+  return { command: "claude", args, env: {} };
+}
+
+buildTerminalResumeCommand(handle: AgentPersistenceHandle): TerminalCommand {
+  return {
+    command: "claude",
+    args: ["--resume", handle.sessionId],
+    env: {},
+  };
+}
+```
+
+**Codex** (`packages/server/src/server/agent/providers/codex-app-server-agent.ts`):
+```typescript
+buildTerminalCreateCommand(config: AgentSessionConfig): TerminalCommand {
+  const args: string[] = [];
+  if (config.model) args.push("--model", config.model);
+  if (config.modeId) args.push("--approval-mode", config.modeId);
+  return { command: "codex", args, env: {} };
+}
+
+buildTerminalResumeCommand(handle: AgentPersistenceHandle): TerminalCommand {
+  return {
+    command: "codex",
+    args: ["--resume", handle.nativeHandle ?? handle.sessionId],
+    env: {},
+  };
+}
+```
+
+**OpenCode** (`packages/server/src/server/agent/providers/opencode-agent.ts`):
+```typescript
+buildTerminalCreateCommand(config: AgentSessionConfig): TerminalCommand {
+  return { command: "opencode", args: [], env: {} };
+}
+// No resume support for OpenCode initially
+```
+
+Capabilities for each provider:
+- Claude: `supportsTerminalMode: true`
+- Codex: `supportsTerminalMode: true`
+- OpenCode: `supportsTerminalMode: true`
+
+#### 1.7 Handle terminal agent creation in `AgentManager.createAgent()`
+
+**File:** `packages/server/src/server/agent/agent-manager.ts`
+
+When `config.terminal === true`:
+1. Do NOT call `client.createSession()` — there is no managed session
+2. Call `client.buildTerminalCreateCommand(config)` to get the command
+3. Create a `TerminalSession` via `terminalManager.createTerminal()` with the command
+4. Register the agent with `terminal: true`, `lifecycle: "idle"`, `session: null`
+5. Store the terminal ID in the agent's metadata or a new field
+6. The agent's persistence handle can be populated later (the CLI will create its own session file)
+
+```typescript
+async createAgent(config: AgentSessionConfig, agentId?: string, options?: { labels?: Record<string, string> }): Promise<ManagedAgent> {
+  const resolvedAgentId = validateAgentId(agentId ?? this.idFactory(), "createAgent");
+  const normalizedConfig = await this.normalizeConfig(config);
+  const client = this.requireClient(normalizedConfig.provider);
+
+  if (normalizedConfig.terminal) {
+    // Terminal mode — no managed session, just build the command
+    const buildCmd = client.buildTerminalCreateCommand;
+    if (!buildCmd) {
+      throw new Error(`Provider '${normalizedConfig.provider}' does not support terminal mode`);
+    }
+    const cmd = buildCmd.call(client, normalizedConfig);
+    return this.registerTerminalAgent(resolvedAgentId, normalizedConfig, cmd, {
+      labels: options?.labels,
+    });
+  }
+
+  // ...existing managed agent flow...
+}
+```
+
+New method `registerTerminalAgent()`:
+- Creates a ManagedAgent with `terminal: true`
+- Stores the `TerminalCommand` in agent metadata for later use (resume, reconnect)
+- Sets lifecycle to `"idle"` (the terminal itself manages the agent's internal state)
+- Does NOT have an `AgentSession` — the `session` field is `null` (like closed agents)
+- Broadcasts `agent_state` event so clients know about it
+
+#### 1.8 New message: create terminal for agent
+
+The client needs a way to request a terminal for a terminal agent. Options:
+
+**Option A:** Extend `createTerminal` to accept an agent ID. When provided, the server looks up the agent, gets the command, and creates a terminal pre-configured with that command.
+
+**Option B:** New message type `create_terminal_agent_request` that combines agent creation + terminal creation in one step.
+
+**Recommendation: Option A.** Add optional `agentId` to `CreateTerminalRequestMessage`. If provided:
+- Look up the agent (must be a terminal agent)
+- Use the agent's stored command to create the terminal
+- Associate the terminal with the agent
+
+**File:** `packages/server/src/shared/messages.ts`
+
+```typescript
+const CreateTerminalRequestMessageSchema = z.object({
+  type: z.literal("create_terminal_request"),
+  cwd: z.string(),
+  name: z.string().optional(),
+  agentId: z.string().optional(),  // NEW — if provided, create terminal for this terminal agent
+  requestId: z.string(),
+});
+```
+
+#### 1.9 Terminal → Agent lifecycle binding
+
+When a terminal associated with a terminal agent exits:
+- Set agent lifecycle to `"closed"`
+- Attempt to detect the agent's session file for persistence handle
+- Broadcast state update
+
+When a terminal agent is opened from the sessions page:
+- Server calls `buildTerminalResumeCommand(handle)` if persistence handle exists
+- Otherwise calls `buildTerminalCreateCommand(config)`
+- Creates a new terminal with that command
+
+#### 1.10 Extend `createTerminal()` to support command + args
+
+**File:** `packages/server/src/terminal/terminal.ts`
+
+```typescript
+export interface CreateTerminalOptions {
+  cwd: string;
+  shell?: string;
+  env?: Record<string, string>;
+  rows?: number;
+  cols?: number;
+  name?: string;
+  command?: string;   // NEW — if provided, run this instead of shell
+  args?: string[];    // NEW — arguments for command
+}
+```
+
+In `createTerminal()`:
+```typescript
+const spawnCommand = options.command ?? shell;
+const spawnArgs = options.command ? (options.args ?? []) : [];
+
+const ptyProcess = pty.spawn(spawnCommand, spawnArgs, {
+  name: "xterm-256color",
+  cols, rows, cwd,
+  env: { ...process.env, ...env, TERM: "xterm-256color" },
+});
+```
+
+---
+
+### Phase 2: App — Draft UI & Terminal Toggle
+
+#### 2.1 Add terminal toggle to draft tab
+
+**File:** `packages/app/src/screens/workspace/workspace-draft-agent-tab.tsx`
+
+Add a toggle switch in the draft UI: **"Chat" / "Terminal"**
+
+State:
+```typescript
+const [isTerminalMode, setIsTerminalMode] = useState(false);
+```
+
+The toggle should be persistent per draft (stored in the draft store or as a preference).
+
+When terminal mode is selected:
+- The provider/model pickers still work (same UI)
+- The mode picker still works
+- The "send" button label changes to "Launch" or "Start"
+- The initial prompt input may be hidden or optional (terminal agents don't need an initial prompt — the user types directly into the TUI)
+
+#### 2.2 Modify agent creation to pass `terminal: true`
+
+When the user submits a draft in terminal mode:
+
+```typescript
+const config: AgentSessionConfig = {
+  provider: selectedProvider,
+  cwd: workspaceId,
+  model: selectedModel,
+  modeId: selectedMode,
+  terminal: true,  // NEW
+};
+```
+
+The `CreateAgentRequestMessage` already carries `config`, so no new wire message needed.
+
+#### 2.3 Terminal mode in `AgentStatusBar`
+
+**File:** `packages/app/src/components/agent-status-bar.tsx`
+
+When rendering a draft's status bar, filter the capability:
+- If `supportsTerminalMode` is false for a provider, disable the terminal toggle when that provider is selected
+- The terminal toggle can live next to the provider selector or as a segmented control above the input area
+
+---
+
+### Phase 3: App — Agent Panel Rendering
+
+#### 3.1 Branch rendering in `AgentPanel`
+
+**File:** `packages/app/src/panels/agent-panel.tsx`
+
+```typescript
+function AgentPanelContent({ agentId, ... }) {
+  const agent = useAgentState(agentId);
+
+  if (agent?.terminal) {
+    return <TerminalAgentPanel agentId={agentId} agent={agent} />;
+  }
+
+  return <AgentPanelBody agent={agent} ... />;
+}
+```
+
+#### 3.2 New component: `TerminalAgentPanel`
+
+**File:** `packages/app/src/panels/terminal-agent-panel.tsx` (new file)
+
+This component:
+1. Gets the terminal ID associated with the agent (from agent metadata or a new field)
+2. Renders a `TerminalPane` connected to that terminal session
+3. If no terminal exists yet (agent from sessions page), requests terminal creation via `createTerminal({ agentId })`
+4. Handles terminal exit → agent close lifecycle
+
+Essentially: it's the existing `TerminalPane` component, but associated with an agent entity instead of a standalone terminal.
+
+#### 3.3 Tab descriptor for terminal agents
+
+**File:** `packages/app/src/panels/agent-panel.tsx` → `useAgentPanelDescriptor`
+
+The tab descriptor (icon, label) already comes from the agent's provider. Terminal agents get the same icon/label as managed agents — that's the whole point. No changes needed here unless we want a "terminal" badge.
+
+Optional: add a small terminal icon badge to distinguish terminal agents from managed agents in the tab bar.
+
+---
+
+### Phase 4: Sessions Page
+
+#### 4.1 Terminal agents appear in sessions list
+
+No changes needed for listing — terminal agents are real agents, they already show up via `AgentManager.getAgents()`.
+
+#### 4.2 Opening a terminal agent from sessions
+
+**File:** `packages/app/src/screens/sessions/` (sessions screen)
+
+When the user clicks a closed terminal agent:
+1. Server calls `buildTerminalResumeCommand(handle)` if persistence exists
+2. Creates a new terminal with that command
+3. Opens agent tab in workspace
+
+If no persistence handle (session was ephemeral), show "Start new session" which calls `buildTerminalCreateCommand(config)`.
+
+---
+
+### Phase 5: CLI Gating
+
+#### 5.1 `paseo send` — error for terminal agents
+
+**File:** `packages/cli/src/commands/send.ts`
+
+```typescript
+if (agent.terminal) {
+  throw new Error("Cannot send messages to terminal agents. Open the terminal in the UI instead.");
+}
+```
+
+#### 5.2 `paseo run` — could support `--terminal` flag (future)
+
+Not in v1. For now, `paseo run` always creates managed agents. Terminal mode is UI-only.
+
+#### 5.3 `paseo ls` — show terminal flag
+
+Add a `terminal` column or badge to `paseo ls` output so users can distinguish terminal agents.
+
+---
+
+## Wire Format Changes Summary
+
+### AgentSessionConfig (create request)
+```diff
+ {
+   provider: string;
+   cwd: string;
+   model?: string;
+   modeId?: string;
++  terminal?: boolean;
+   ...
+ }
+```
+
+### AgentState (server → client)
+```diff
+ {
+   id: string;
+   provider: string;
+   lifecycle: string;
++  terminal?: boolean;
+   ...
+ }
+```
+
+### AgentCapabilityFlags
+```diff
+ {
+   supportsStreaming: boolean;
+   supportsSessionPersistence: boolean;
++  supportsTerminalMode: boolean;
+   ...
+ }
+```
+
+### CreateTerminalRequest
+```diff
+ {
+   type: "create_terminal_request";
+   cwd: string;
+   name?: string;
++  agentId?: string;
+   requestId: string;
+ }
+```
+
+### TerminalCommand (new type)
+```typescript
+{
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+}
+```
+
+---
+
+## Implementation Phases & Agent Assignments
+
+### Phase 1: Server data model (1 agent)
+- Add `terminal` to types, schemas, and agent manager
+- Add `TerminalCommand` type and `buildTerminalCreateCommand`/`buildTerminalResumeCommand` to `AgentClient`
+- Add `supportsTerminalMode` capability flag
+- Extend `createTerminal()` to support command+args
+- Implement terminal agent creation flow in `AgentManager`
+- Wire terminal exit → agent close lifecycle
+- Implement command builders in Claude, Codex, OpenCode providers
+- Typecheck must pass
+
+### Phase 2: App draft UI + terminal toggle (1 agent)
+- Add terminal mode toggle to `workspace-draft-agent-tab.tsx`
+- Pass `terminal: true` in config when toggle is on
+- Filter toggle based on `supportsTerminalMode` capability
+- Persist toggle preference
+- Typecheck must pass
+
+### Phase 3: App panel rendering (1 agent)
+- Branch `AgentPanelContent` on `agent.terminal`
+- Create `TerminalAgentPanel` component
+- Handle terminal creation for agent on open
+- Handle terminal exit lifecycle
+- Typecheck must pass
+
+### Phase 4: Sessions page + CLI gating (1 agent)
+- Terminal agents show in sessions with badge
+- Opening from sessions resumes or creates terminal
+- `paseo send` errors for terminal agents
+- `paseo ls` shows terminal badge
+- Typecheck must pass
+
+---
+
+## Feature Interaction Guards
+
+Terminal agents are explicitly excluded from automated dispatch paths:
+
+- **LoopService**: `buildWorkerConfig` and `buildVerifierConfig` set `terminal: false`
+- **ScheduleService**: `executeSchedule` rejects terminal agents with a clear error for agent-targeted schedules; new-agent schedules set `terminal: false`
+- **Voice mode / `handleSendAgentMessage`**: Guarded by `getStructuredSendRejection()` before send
+- **CLI `paseo send`**: Returns error for terminal agents
+- **MCP agent creation**: Programmatic paths don't pass `terminal: true`
+
+All session-specific operations (`runAgent`, `streamAgent`, `setMode`, `cancelAgentRun`, etc.) are guarded by the centralized `requireSessionAgent()` which rejects terminal agents.
+
+## What This Does NOT Change
+
+- The existing managed agent flow is untouched
+- Terminal sessions (non-agent) still work as before
+- The `AgentSession` interface is unchanged
+- Mobile experience is unchanged (terminal mode is web/desktop only for now)
+- No new providers are added (existing providers gain terminal command builders)
+- No hooks, no env injection, no process tree detection (v1 keeps it simple)
+
+## Future Work (Not In This Plan)
+
+- Auto-detect agent type from PTY process tree (for standalone terminals)
+- "Convert to chat" / "Convert to terminal" actions
+- Terminal title/icon from OSC sequences
+- `paseo run --terminal` CLI support
+- Mobile terminal mode (if xterm.js works well enough on mobile web)
+- Gemini / Aider / Goose provider definitions (terminal-only providers)

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-jBl1E7cwEf5XKXFQip/ZlEa/zNQoz0Hq5t0hqjp8Qe4=";
+  npmDepsHash = "sha256-r9y8rUyT/56wHFUp8D/yA7mjy715jjezSYaEuj1D4TQ=";
 
   # 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).
@@ -114,7 +114,7 @@ buildNpmPackage rec {
       fi
     done
 
-    # Copy server scripts (daemon-runner, supervisor) needed by CLI
+    # Copy server scripts (including supervisor-entrypoint) needed by CLI
     if [ -d packages/server/dist/scripts ]; then
       mkdir -p $out/lib/paseo/packages/server/dist/scripts
       cp -a packages/server/dist/scripts/* $out/lib/paseo/packages/server/dist/scripts/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "private": true,
   "workspaces": [
     "packages/expo-two-way-audio",
@@ -37,6 +37,7 @@
     "web": "npm run web --workspace=@getpaseo/app",
     "dev:desktop": "npm run dev --workspace=@getpaseo/desktop",
     "build:desktop": "npm run version:sync-internal && npm run build:web --workspace=@getpaseo/app && npm run build --workspace=@getpaseo/desktop",
+    "db:query": "npm run db:query --workspace=@getpaseo/server --",
     "cli": "npx tsx packages/cli/src/index.js",
     "version": "npm run version:sync-internal && npm run release:prepare && git add -A",
     "version:sync-internal": "node scripts/sync-workspace-versions.mjs",

packages/app/e2e/helpers/launcher.ts

@@ -0,0 +1,196 @@
+import { expect, type Page } from "@playwright/test";
+import { buildHostWorkspaceRoute } from "../../src/utils/host-routes";
+import { createTempGitRepo } from "./workspace";
+
+// ─── Navigation ────────────────────────────────────────────────────────────
+
+function getServerId(): string {
+  const serverId = process.env.E2E_SERVER_ID;
+  if (!serverId) {
+    throw new Error("E2E_SERVER_ID is not set (expected from Playwright globalSetup).");
+  }
+  return serverId;
+}
+
+/** Navigate to a workspace and wait for the tab bar to appear. */
+export async function gotoWorkspace(page: Page, cwd: string): Promise<void> {
+  const route = buildHostWorkspaceRoute(getServerId(), cwd);
+  await page.goto(route);
+  await waitForTabBar(page);
+}
+
+// ─── Tab bar queries ───────────────────────────────────────────────────────
+
+/** Wait for the workspace tab bar to be visible. */
+export async function waitForTabBar(page: Page): Promise<void> {
+  await expect(page.getByTestId("workspace-tabs-row").first()).toBeVisible({
+    timeout: 30_000,
+  });
+}
+
+/** Return all tab test IDs currently in the tab bar. */
+export async function getTabTestIds(page: Page): Promise<string[]> {
+  const tabs = page.locator('[data-testid^="workspace-tab-"]');
+  const count = await tabs.count();
+  const ids: string[] = [];
+  for (let i = 0; i < count; i++) {
+    const testId = await tabs.nth(i).getAttribute("data-testid");
+    if (testId) ids.push(testId);
+  }
+  return ids;
+}
+
+/** Return the number of tabs matching a kind prefix (e.g. "launcher", "draft", "terminal", "agent"). */
+export async function countTabsOfKind(page: Page, kind: string): Promise<number> {
+  const ids = await getTabTestIds(page);
+  return ids.filter((id) => id.includes(kind)).length;
+}
+
+/** Return the currently active tab's test ID (the one with aria-selected or focus styling). */
+export async function getActiveTabTestId(page: Page): Promise<string | null> {
+  // Active tab has the focused highlight — check for the aria-selected or data-active attribute
+  const activeTab = page.locator('[data-testid^="workspace-tab-"][aria-selected="true"]').first();
+  if (await activeTab.isVisible().catch(() => false)) {
+    return activeTab.getAttribute("data-testid");
+  }
+  // Fallback: the tab with focused styling
+  return null;
+}
+
+// ─── Tab actions ───────────────────────────────────────────────────────────
+
+/** Click the '+' button in the tab bar to open a new launcher tab. */
+export async function clickNewTabButton(page: Page): Promise<void> {
+  const button = page.getByTestId("workspace-new-tab");
+  await expect(button).toBeVisible({ timeout: 10_000 });
+  await button.click();
+}
+
+/** Press Cmd+T (macOS) to open a new tab. */
+export async function pressNewTabShortcut(page: Page): Promise<void> {
+  await page.keyboard.press("Meta+t");
+}
+
+// ─── Launcher panel assertions ─────────────────────────────────────────────
+
+/** Wait for the launcher panel to render with its primary tiles. */
+export async function waitForLauncherPanel(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "New Chat" }).first()).toBeVisible({
+    timeout: 15_000,
+  });
+  await expect(page.getByRole("button", { name: "Terminal" }).first()).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+/** Assert that the launcher panel shows provider tiles under "Terminal Agents". */
+export async function assertProviderTilesVisible(page: Page): Promise<void> {
+  await expect(page.getByText("Terminal Agents", { exact: true }).first()).toBeVisible({
+    timeout: 10_000,
+  });
+}
+
+/** Assert the launcher panel has a "New Chat" tile. */
+export async function assertNewChatTileVisible(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "New Chat" }).first()).toBeVisible();
+}
+
+/** Assert the launcher panel has a "Terminal" tile. */
+export async function assertTerminalTileVisible(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "Terminal" }).first()).toBeVisible();
+}
+
+// ─── Launcher tile clicks ──────────────────────────────────────────────────
+
+/** Click the "New Chat" tile on the launcher panel. */
+export async function clickNewChat(page: Page): Promise<void> {
+  const button = page.getByRole("button", { name: "New Chat" }).first();
+  await expect(button).toBeVisible({ timeout: 10_000 });
+  await button.click();
+}
+
+/** Click the "Terminal" tile on the launcher panel. */
+export async function clickTerminal(page: Page): Promise<void> {
+  const button = page.getByRole("button", { name: "Terminal" }).first();
+  await expect(button).toBeVisible({ timeout: 10_000 });
+  await button.click();
+}
+
+/** Click a provider tile by label (e.g. "Claude Code", "Codex"). */
+export async function clickProviderTile(page: Page, providerLabel: string): Promise<void> {
+  const tile = page.getByRole("button", { name: providerLabel }).first();
+  await expect(tile).toBeVisible({ timeout: 10_000 });
+  await tile.click();
+}
+
+// ─── Tab title assertions ──────────────────────────────────────────────────
+
+/** Wait for any tab in the bar to display the given title text. */
+export async function waitForTabWithTitle(
+  page: Page,
+  title: string | RegExp,
+  timeout = 30_000,
+): Promise<void> {
+  const matcher = typeof title === "string" ? new RegExp(title, "i") : title;
+  await expect(page.locator('[data-testid^="workspace-tab-"]').filter({ hasText: matcher }).first())
+    .toBeVisible({ timeout });
+}
+
+/** Assert the new-tab '+' button is visible and there is only one. */
+export async function assertSingleNewTabButton(page: Page): Promise<void> {
+  const buttons = page.getByTestId("workspace-new-tab");
+  // There might be multiple panes, each with a "+" button
+  // But within a single pane there should only be one
+  const count = await buttons.count();
+  expect(count).toBeGreaterThanOrEqual(1);
+}
+
+// ─── No-flash measurement ──────────────────────────────────────────────────
+
+/**
+ * Measure the time between clicking a launcher tile and the replacement panel becoming visible.
+ * Returns elapsed milliseconds.
+ */
+export async function measureTileTransition(
+  page: Page,
+  clickAction: () => Promise<void>,
+  successLocator: ReturnType<Page["locator"]>,
+  timeout = 5_000,
+): Promise<number> {
+  const start = Date.now();
+  await clickAction();
+  await expect(successLocator).toBeVisible({ timeout });
+  return Date.now() - start;
+}
+
+/**
+ * Sample tab IDs at high frequency across a transition to detect blank/intermediate states.
+ * Returns all unique snapshots observed.
+ */
+export async function sampleTabsDuringTransition(
+  page: Page,
+  action: () => Promise<void>,
+  durationMs = 2_000,
+  intervalMs = 30,
+): Promise<string[][]> {
+  const snapshots: string[][] = [];
+  const startSampling = async () => {
+    const start = Date.now();
+    while (Date.now() - start < durationMs) {
+      snapshots.push(await getTabTestIds(page));
+      await page.waitForTimeout(intervalMs);
+    }
+  };
+
+  const samplingPromise = startSampling();
+  await action();
+  await samplingPromise;
+  return snapshots;
+}
+
+// ─── Workspace setup ───────────────────────────────────────────────────────
+
+/** Create a temp git repo and return its path with a cleanup function. */
+export async function createWorkspace(prefix = "launcher-e2e-"): ReturnType<typeof createTempGitRepo> {
+  return createTempGitRepo(prefix);
+}

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

@@ -0,0 +1,343 @@
+import { test, expect } from "./fixtures";
+import { createTempGitRepo } from "./helpers/workspace";
+import {
+  gotoWorkspace,
+  waitForLauncherPanel,
+  assertProviderTilesVisible,
+  assertNewChatTileVisible,
+  assertTerminalTileVisible,
+  assertSingleNewTabButton,
+  clickNewTabButton,
+  pressNewTabShortcut,
+  clickNewChat,
+  clickTerminal,
+  clickProviderTile,
+  countTabsOfKind,
+  getTabTestIds,
+  waitForTabWithTitle,
+  measureTileTransition,
+  sampleTabsDuringTransition,
+} from "./helpers/launcher";
+import {
+  connectTerminalClient,
+  waitForTerminalContent,
+  setupDeterministicPrompt,
+  type TerminalPerfDaemonClient,
+} from "./helpers/terminal-perf";
+
+// ─── Shared state ──────────────────────────────────────────────────────────
+
+let tempRepo: { path: string; cleanup: () => Promise<void> };
+
+test.beforeAll(async () => {
+  tempRepo = await createTempGitRepo("launcher-e2e-");
+});
+
+test.afterAll(async () => {
+  if (tempRepo) await tempRepo.cleanup();
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Launcher Tab Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+test.describe("Launcher tab", () => {
+  test("Cmd+T opens launcher panel with New Chat, Terminal, and provider tiles", async ({
+    page,
+  }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await pressNewTabShortcut(page);
+
+    await waitForLauncherPanel(page);
+    await assertNewChatTileVisible(page);
+    await assertTerminalTileVisible(page);
+    await assertProviderTilesVisible(page);
+  });
+
+  test("opening two new tabs creates two launcher tabs", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await pressNewTabShortcut(page);
+    await waitForLauncherPanel(page);
+    const countAfterFirst = await countTabsOfKind(page, "launcher");
+
+    await pressNewTabShortcut(page);
+    await waitForLauncherPanel(page);
+    const countAfterSecond = await countTabsOfKind(page, "launcher");
+
+    expect(countAfterSecond).toBe(countAfterFirst + 1);
+  });
+
+  test("clicking New Chat replaces launcher in-place with draft tab", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const tabsBefore = await getTabTestIds(page);
+    const launcherCountBefore = tabsBefore.filter((id) => id.includes("launcher")).length;
+
+    await clickNewChat(page);
+
+    // Draft composer should appear (the agent message input)
+    const composer = page.getByRole("textbox", { name: "Message agent..." });
+    await expect(composer.first()).toBeVisible({ timeout: 15_000 });
+
+    // Launcher tab should have been replaced (not added alongside)
+    const tabsAfter = await getTabTestIds(page);
+    const launcherCountAfter = tabsAfter.filter((id) => id.includes("launcher")).length;
+    const draftCountAfter = tabsAfter.filter((id) => id.includes("draft")).length;
+
+    expect(launcherCountAfter).toBe(launcherCountBefore - 1);
+    expect(draftCountAfter).toBeGreaterThanOrEqual(1);
+    // Total tab count should stay the same (replaced, not added)
+    expect(tabsAfter.length).toBe(tabsBefore.length);
+  });
+
+  test("clicking Terminal replaces launcher with standalone terminal", async ({ page }) => {
+    test.setTimeout(45_000);
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const tabsBefore = await getTabTestIds(page);
+
+    await clickTerminal(page);
+
+    // Terminal surface should appear
+    const terminal = page.locator('[data-testid="terminal-surface"]');
+    await expect(terminal.first()).toBeVisible({ timeout: 20_000 });
+
+    // Tab count stays the same (in-place replacement)
+    const tabsAfter = await getTabTestIds(page);
+    expect(tabsAfter.length).toBe(tabsBefore.length);
+
+    // The launcher tab is gone, a terminal tab exists
+    const terminalTabs = tabsAfter.filter((id) => id.includes("terminal"));
+    expect(terminalTabs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test("clicking a provider tile replaces launcher with terminal agent tab", async ({ page }) => {
+    test.setTimeout(45_000);
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const tabsBefore = await getTabTestIds(page);
+
+    // Click the first visible provider tile under "Terminal Agents"
+    const providerTiles = page.locator('[role="button"]').filter({
+      has: page.locator("text=Terminal Agents").locator("..").locator(".."),
+    });
+
+    // Try clicking any provider tile — find the first one after the "Terminal Agents" label
+    const terminalAgentsLabel = page.getByText("Terminal Agents", { exact: true }).first();
+    await expect(terminalAgentsLabel).toBeVisible({ timeout: 10_000 });
+
+    // The provider grid follows the label. Click the first provider tile.
+    const providerGrid = terminalAgentsLabel.locator("~ *").first();
+    const firstProvider = providerGrid.getByRole("button").first();
+    if (await firstProvider.isVisible().catch(() => false)) {
+      await firstProvider.click();
+    } else {
+      // Fallback: look for any provider button after the section label
+      const allButtons = page.getByRole("button");
+      const count = await allButtons.count();
+      let clicked = false;
+      for (let i = 0; i < count; i++) {
+        const btn = allButtons.nth(i);
+        const text = await btn.innerText().catch(() => "");
+        // Skip known non-provider buttons
+        if (["New Chat", "Terminal", "More", "+"].includes(text.trim())) continue;
+        if (!text.trim()) continue;
+        await btn.click();
+        clicked = true;
+        break;
+      }
+      if (!clicked) {
+        test.skip(true, "No provider tiles available");
+        return;
+      }
+    }
+
+    // Should see an agent panel (terminal surface or agent stream)
+    const agentOrTerminal = page.locator(
+      '[data-testid="terminal-surface"], [data-testid^="agent-"]',
+    );
+    await expect(agentOrTerminal.first()).toBeVisible({ timeout: 30_000 });
+
+    // Tab count stays the same (replaced, not added)
+    const tabsAfter = await getTabTestIds(page);
+    expect(tabsAfter.length).toBe(tabsBefore.length);
+  });
+
+  test("tab bar shows a single + button per pane", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+    await assertSingleNewTabButton(page);
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Terminal Title Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+test.describe("Terminal title propagation", () => {
+  let client: TerminalPerfDaemonClient;
+
+  test.beforeAll(async () => {
+    client = await connectTerminalClient();
+  });
+
+  test.afterAll(async () => {
+    if (client) await client.close();
+  });
+
+  test("terminal tab title updates from OSC title escape sequence", async ({ page }) => {
+    test.setTimeout(60_000);
+
+    const result = await client.createTerminal(tempRepo.path, "title-test");
+    if (!result.terminal) throw new Error(`Failed to create terminal: ${result.error}`);
+    const terminalId = result.terminal.id;
+
+    try {
+      // Navigate to workspace and open the terminal
+      await gotoWorkspace(page, tempRepo.path);
+      await clickNewTabButton(page);
+      await waitForLauncherPanel(page);
+      await clickTerminal(page);
+
+      const terminal = page.locator('[data-testid="terminal-surface"]');
+      await expect(terminal.first()).toBeVisible({ timeout: 20_000 });
+      await terminal.first().click();
+
+      await setupDeterministicPrompt(page);
+
+      // Send OSC 0 (set window title) escape sequence
+      const testTitle = `E2E-Title-${Date.now()}`;
+      await terminal
+        .first()
+        .pressSequentially(`printf '\\033]0;${testTitle}\\007'\n`, { delay: 0 });
+
+      // Wait for the tab to reflect the new title
+      await waitForTabWithTitle(page, testTitle, 15_000);
+    } finally {
+      await client.killTerminal(terminalId).catch(() => {});
+    }
+  });
+
+  test("title debouncing coalesces rapid changes", async ({ page }) => {
+    test.setTimeout(60_000);
+
+    const result = await client.createTerminal(tempRepo.path, "debounce-test");
+    if (!result.terminal) throw new Error(`Failed to create terminal: ${result.error}`);
+    const terminalId = result.terminal.id;
+
+    try {
+      await gotoWorkspace(page, tempRepo.path);
+      await clickNewTabButton(page);
+      await waitForLauncherPanel(page);
+      await clickTerminal(page);
+
+      const terminal = page.locator('[data-testid="terminal-surface"]');
+      await expect(terminal.first()).toBeVisible({ timeout: 20_000 });
+      await terminal.first().click();
+
+      await setupDeterministicPrompt(page);
+
+      // Fire many rapid title changes — only the last should stick
+      const finalTitle = `Final-${Date.now()}`;
+      for (let i = 0; i < 5; i++) {
+        await terminal
+          .first()
+          .pressSequentially(`printf '\\033]0;Rapid-${i}\\007'\n`, { delay: 0 });
+      }
+      await terminal
+        .first()
+        .pressSequentially(`printf '\\033]0;${finalTitle}\\007'\n`, { delay: 0 });
+
+      // The tab should eventually settle on the final title
+      await waitForTabWithTitle(page, finalTitle, 15_000);
+    } finally {
+      await client.killTerminal(terminalId).catch(() => {});
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// No-Flash Transition Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+test.describe("Launcher transitions (no flash)", () => {
+  test("New Chat transition has no blank intermediate tab state", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    // Sample tabs at high frequency across the transition
+    const snapshots = await sampleTabsDuringTransition(
+      page,
+      () => clickNewChat(page),
+      2_000,
+      30,
+    );
+
+    // Every snapshot should have at least one tab — no blank/zero-tab frames
+    for (const snapshot of snapshots) {
+      expect(snapshot.length).toBeGreaterThanOrEqual(1);
+    }
+
+    // Tab count should never increase (no duplicate flash from add-then-remove)
+    const counts = snapshots.map((s) => s.length);
+    const maxCount = Math.max(...counts);
+    const initialCount = counts[0] ?? 0;
+
+    // Allow at most +1 transient tab (tolerance for React render batching)
+    expect(maxCount).toBeLessThanOrEqual(initialCount + 1);
+  });
+
+  test("Terminal transition completes within visual budget", async ({ page }) => {
+    test.setTimeout(30_000);
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const terminal = page.locator('[data-testid="terminal-surface"]');
+    const elapsed = await measureTileTransition(
+      page,
+      () => clickTerminal(page),
+      terminal.first(),
+      20_000,
+    );
+
+    // Terminal surface should appear within a reasonable budget.
+    // Note: terminal creation involves a server round-trip, so we allow more time
+    // than a pure in-memory transition, but it should still be well under 5 seconds.
+    expect(elapsed).toBeLessThan(5_000);
+  });
+
+  test("New Chat click → composer appears without launcher flash", async ({ page }) => {
+    await gotoWorkspace(page, tempRepo.path);
+
+    await clickNewTabButton(page);
+    await waitForLauncherPanel(page);
+
+    const composer = page.getByRole("textbox", { name: "Message agent..." }).first();
+
+    const elapsed = await measureTileTransition(
+      page,
+      () => clickNewChat(page),
+      composer,
+      10_000,
+    );
+
+    // Draft replacement is fully in-memory — should be fast
+    // We use a generous budget here because CI can be slow, but the key assertion
+    // is that no blank/flash frame appears (tested above).
+    expect(elapsed).toBeLessThan(3_000);
+  });
+});

packages/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "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.37",
-    "@getpaseo/highlight": "0.1.37",
-    "@getpaseo/server": "0.1.37",
+    "@getpaseo/expo-two-way-audio": "0.1.38",
+    "@getpaseo/highlight": "0.1.38",
+    "@getpaseo/server": "0.1.38",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.2.0",
@@ -111,6 +111,7 @@
     "eas-cli": "^16.24.1",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~10.0.0",
+    "material-icon-theme": "^5.32.0",
     "playwright": "^1.56.1",
     "typescript": "~5.9.2",
     "vitest": "^3.2.4",

packages/app/src/app/_layout.tsx

@@ -15,7 +15,7 @@ import { PortalProvider } from "@gorhom/portal";
 import { VoiceProvider } from "@/contexts/voice-context";
 import { useAppSettings } from "@/hooks/use-settings";
 import { useFaviconStatus } from "@/hooks/use-favicon-status";
-import { View, ActivityIndicator, Text } from "react-native";
+import { View, Text } from "react-native";
 import { UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { darkTheme } from "@/styles/theme";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -26,12 +26,13 @@ import {
   useHostRuntimeClient,
 } from "@/runtime/host-runtime";
 import { shouldUseDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
-import { StartupSplashScreen } from "@/screens/startup-splash-screen";
 import { loadSettingsFromStorage } from "@/hooks/use-settings";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 import { SessionProvider } from "@/contexts/session-context";
 import type { HostProfile } from "@/types/host-connection";
 import {
   createContext,
+  useCallback,
   useContext,
   useState,
   useEffect,
@@ -60,6 +61,7 @@ import { getIsDesktop } from "@/constants/layout";
 import { CommandCenter } from "@/components/command-center";
 import { ProjectPickerModal } from "@/components/project-picker-modal";
 import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog";
+import { WorkspaceSetupDialog } from "@/components/workspace-setup-dialog";
 import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
 import { queryClient } from "@/query/query-client";
 import {
@@ -68,6 +70,7 @@ import {
   ensureOsNotificationPermission,
 } from "@/utils/os-notifications";
 import { getDesktopHost } from "@/desktop/host";
+import { setDesktopTitleBarTheme } from "@/desktop/electron/window";
 import { buildNotificationRoute } from "@/utils/notification-routing";
 import {
   buildHostRootRoute,
@@ -79,7 +82,18 @@ import {
 import { syncNavigationActiveWorkspace } from "@/stores/navigation-active-workspace-store";
 
 polyfillCrypto();
-const HostRuntimeBootstrapContext = createContext(false);
+
+export type HostRuntimeBootstrapState = {
+  phase: "starting-daemon" | "connecting" | "online" | "error";
+  error: string | null;
+  retry: () => void;
+};
+
+const HostRuntimeBootstrapContext = createContext<HostRuntimeBootstrapState>({
+  phase: "starting-daemon",
+  error: null,
+  retry: () => {},
+});
 
 function PushNotificationRouter() {
   const router = useRouter();
@@ -207,49 +221,99 @@ function HostSessionManager() {
 }
 
 function HostRuntimeBootstrapProvider({ children }: { children: ReactNode }) {
-  const [ready, setReady] = useState(false);
+  const [phase, setPhase] = useState<HostRuntimeBootstrapState["phase"]>("starting-daemon");
+  const [error, setError] = useState<string | null>(null);
+  const [retryToken, setRetryToken] = useState(0);
+  const retry = useCallback(() => {
+    setPhase("starting-daemon");
+    setError(null);
+    setRetryToken((current) => current + 1);
+  }, []);
 
   useEffect(() => {
     let cancelled = false;
+    const shouldManageDesktop = shouldUseDesktopDaemon();
     const store = getHostRuntimeStore();
 
     const init = async () => {
       const settings = await loadSettingsFromStorage();
-      const isDesktopManaged = shouldUseDesktopDaemon() && settings.manageBuiltInDaemon;
+      const isDesktopManaged = shouldManageDesktop && settings.manageBuiltInDaemon;
       await store.loadFromStorage();
       if (isDesktopManaged) {
-        await store.bootstrap({ manageBuiltInDaemon: true });
+        setPhase("starting-daemon");
+        setError(null);
+        const bootstrapResult = await store.bootstrapDesktop();
+        if (!bootstrapResult.ok) {
+          if (!cancelled) {
+            setPhase("error");
+            setError(bootstrapResult.error);
+          }
+          return;
+        }
+
+        if (cancelled) {
+          return;
+        }
+
+        setPhase("connecting");
+        await store.addConnectionFromListenAndWaitForOnline({
+          listenAddress: bootstrapResult.listenAddress,
+          serverId: bootstrapResult.serverId,
+          hostname: bootstrapResult.hostname,
+        });
+        if (!cancelled) {
+          setPhase("online");
+          setError(null);
+        }
       } else {
         void store.bootstrap({ manageBuiltInDaemon: settings.manageBuiltInDaemon });
+        if (!cancelled) {
+          setPhase("online");
+          setError(null);
+        }
       }
     };
 
-    void init()
-      .then(() => {
-        if (!cancelled) {
-          setReady(true);
-        }
-      })
-      .catch((error) => {
-        console.error("[HostRuntime] Failed to initialize store", error);
-        if (!cancelled) {
-          setReady(true);
-        }
-      });
+    void init().catch((bootstrapError) => {
+      console.error("[HostRuntime] Failed to initialize store", bootstrapError);
+      if (cancelled) {
+        return;
+      }
+      if (shouldManageDesktop) {
+        setPhase("error");
+        setError(bootstrapError instanceof Error ? bootstrapError.message : String(bootstrapError));
+        return;
+      }
+      setPhase("online");
+      setError(null);
+    });
 
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [retryToken]);
+
+  const state = useMemo<HostRuntimeBootstrapState>(
+    () => ({
+      phase,
+      error,
+      retry,
+    }),
+    [error, phase, retry],
+  );
 
   return (
-    <HostRuntimeBootstrapContext.Provider value={ready}>
+    <HostRuntimeBootstrapContext.Provider value={state}>
       {children}
     </HostRuntimeBootstrapContext.Provider>
   );
 }
 
-function useStoreReady(): boolean {
+export function useStoreReady(): boolean {
+  return useContext(HostRuntimeBootstrapContext).phase === "online";
+}
+
+export function useHostRuntimeBootstrapState(): HostRuntimeBootstrapState {
   return useContext(HostRuntimeBootstrapContext);
 }
 
@@ -308,6 +372,7 @@ function AppContainer({
       <UpdateBanner />
       <CommandCenter />
       <ProjectPickerModal />
+      <WorkspaceSetupDialog />
       <KeyboardShortcutsDialog />
     </View>
   );
@@ -410,26 +475,30 @@ function MobileGestureWrapper({
 
 function ProvidersWrapper({ children }: { children: ReactNode }) {
   const { settings, isLoading: settingsLoading } = useAppSettings();
-  const storeReady = useStoreReady();
   const { upsertConnectionFromOfferUrl } = useHostMutations();
-  const isLoading = settingsLoading || !storeReady;
+  const systemColorScheme = useColorScheme();
+  const resolvedTheme = settings.theme === "auto" ? (systemColorScheme ?? "light") : settings.theme;
 
   // Apply theme setting on mount and when it changes
   useEffect(() => {
-    if (isLoading) return;
+    if (settingsLoading) return;
     if (settings.theme === "auto") {
       UnistylesRuntime.setAdaptiveThemes(true);
     } else {
       UnistylesRuntime.setAdaptiveThemes(false);
       UnistylesRuntime.setTheme(settings.theme);
     }
-  }, [isLoading, settings.theme]);
+  }, [settingsLoading, settings.theme]);
 
-  if (isLoading) {
-    const isDesktopManaged =
-      !settingsLoading && shouldUseDesktopDaemon() && settings.manageBuiltInDaemon;
-    return isDesktopManaged ? <StartupSplashScreen /> : <LoadingView />;
-  }
+  useEffect(() => {
+    if (settingsLoading || Platform.OS !== "web") {
+      return;
+    }
+
+    void setDesktopTitleBarTheme(resolvedTheme).catch((error) => {
+      console.warn("[DesktopWindow] Failed to update title bar theme", error);
+    });
+  }, [settingsLoading, resolvedTheme]);
 
   return (
     <VoiceProvider>
@@ -532,6 +601,38 @@ function FaviconStatusSync() {
   return null;
 }
 
+function RootStack() {
+  const storeReady = useStoreReady();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        animation: "none",
+        contentStyle: {
+          backgroundColor: darkTheme.colors.surface0,
+        },
+      }}
+    >
+      <Stack.Protected guard={storeReady}>
+        <Stack.Screen name="welcome" />
+        <Stack.Screen name="settings" />
+        <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
+        <Stack.Screen
+          name="h/[serverId]/agent/[agentId]"
+          options={{ gestureEnabled: false }}
+        />
+        <Stack.Screen name="h/[serverId]/index" />
+        <Stack.Screen name="h/[serverId]/sessions" />
+        <Stack.Screen name="h/[serverId]/open-project" />
+        <Stack.Screen name="h/[serverId]/settings" />
+        <Stack.Screen name="pair-scan" />
+      </Stack.Protected>
+      <Stack.Screen name="index" />
+    </Stack>
+  );
+}
+
 function NavigationActiveWorkspaceObserver() {
   const navigationRef = useNavigationContainerRef();
 
@@ -552,57 +653,6 @@ function NavigationActiveWorkspaceObserver() {
   return null;
 }
 
-function LoadingView({ message }: { message?: string } = {}) {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: darkTheme.colors.surface0,
-      }}
-    >
-      <ActivityIndicator size="large" color={darkTheme.colors.foreground} />
-      {message ? (
-        <Text
-          style={{
-            color: darkTheme.colors.foregroundMuted,
-            marginTop: 16,
-            fontSize: 14,
-          }}
-        >
-          {message}
-        </Text>
-      ) : null}
-    </View>
-  );
-}
-
-function MissingDaemonView() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 24,
-        backgroundColor: darkTheme.colors.surface0,
-      }}
-    >
-      <ActivityIndicator size="small" color={darkTheme.colors.foreground} />
-      <Text
-        style={{
-          color: darkTheme.colors.foreground,
-          marginTop: 16,
-          textAlign: "center",
-        }}
-      >
-        No host configured. Open Settings to add a server URL.
-      </Text>
-    </View>
-  );
-}
-
 export default function RootLayout() {
   return (
     <GestureHandlerRootView style={{ flex: 1, backgroundColor: darkTheme.colors.surface0 }}>
@@ -619,28 +669,7 @@ export default function RootLayout() {
                       <HorizontalScrollProvider>
                         <ToastProvider>
                           <AppWithSidebar>
-                            <Stack
-                              screenOptions={{
-                                headerShown: false,
-                                animation: "none",
-                                contentStyle: {
-                                  backgroundColor: darkTheme.colors.surface0,
-                                },
-                              }}
-                            >
-                              <Stack.Screen name="index" />
-                              <Stack.Screen name="settings" />
-                              <Stack.Screen name="h/[serverId]/workspace/[workspaceId]" />
-                              <Stack.Screen
-                                name="h/[serverId]/agent/[agentId]"
-                                options={{ gestureEnabled: false }}
-                              />
-                              <Stack.Screen name="h/[serverId]/index" />
-                              <Stack.Screen name="h/[serverId]/sessions" />
-                              <Stack.Screen name="h/[serverId]/open-project" />
-                              <Stack.Screen name="h/[serverId]/settings" />
-                              <Stack.Screen name="pair-scan" />
-                            </Stack>
+                            <RootStack />
                           </AppWithSidebar>
                         </ToastProvider>
                       </HorizontalScrollProvider>

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

@@ -5,6 +5,7 @@ import { useFormPreferences } from "@/hooks/use-form-preferences";
 import {
   buildHostOpenProjectRoute,
   buildHostRootRoute,
+  buildHostWorkspaceOpenRoute,
   buildHostWorkspaceRoute,
 } from "@/utils/host-routes";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
@@ -68,7 +69,9 @@ export default function HostIndexRoute() {
 
       const primaryWorkspace = visibleWorkspaces[0];
       if (primaryWorkspace?.id?.trim()) {
-        router.replace(buildHostWorkspaceRoute(serverId, primaryWorkspace.id.trim()) as any);
+        router.replace(
+          buildHostWorkspaceOpenRoute(serverId, primaryWorkspace.id.trim(), "draft:new") as any,
+        );
         return;
       }
 

packages/app/src/app/index.tsx

@@ -1,18 +1,65 @@
-import { useEffect } from "react";
+import { useEffect, useSyncExternalStore } from "react";
 import { usePathname, useRouter } from "expo-router";
+import { StartupSplashScreen } from "@/screens/startup-splash-screen";
+import {
+  useHostRuntimeBootstrapState,
+  useStoreReady,
+} from "@/app/_layout";
+import {
+  getHostRuntimeStore,
+  isHostRuntimeConnected,
+  useHosts,
+} from "@/runtime/host-runtime";
+import { buildHostRootRoute } from "@/utils/host-routes";
 
 const WELCOME_ROUTE = "/welcome";
 
+function useAnyOnlineHostServerId(serverIds: string[]): string | null {
+  const runtime = getHostRuntimeStore();
+
+  return useSyncExternalStore(
+    (onStoreChange) => runtime.subscribeAll(onStoreChange),
+    () => {
+      let firstOnlineServerId: string | null = null;
+      let firstOnlineAt: string | null = null;
+      for (const serverId of serverIds) {
+        const snapshot = runtime.getSnapshot(serverId);
+        const lastOnlineAt = snapshot?.lastOnlineAt ?? null;
+        if (!isHostRuntimeConnected(snapshot) || !lastOnlineAt) {
+          continue;
+        }
+        if (!firstOnlineAt || lastOnlineAt < firstOnlineAt) {
+          firstOnlineAt = lastOnlineAt;
+          firstOnlineServerId = serverId;
+        }
+      }
+      return firstOnlineServerId;
+    },
+    () => null,
+  );
+}
+
 export default function Index() {
   const router = useRouter();
   const pathname = usePathname();
+  const bootstrapState = useHostRuntimeBootstrapState();
+  const storeReady = useStoreReady();
+  const hosts = useHosts();
+  const anyOnlineServerId = useAnyOnlineHostServerId(hosts.map((host) => host.serverId));
 
   useEffect(() => {
+    if (!storeReady) {
+      return;
+    }
     if (pathname !== "/" && pathname !== "") {
       return;
     }
-    router.replace(WELCOME_ROUTE as any);
-  }, [pathname, router]);
 
-  return null;
+    const targetRoute = anyOnlineServerId
+      ? buildHostRootRoute(anyOnlineServerId)
+      : WELCOME_ROUTE;
+    router.replace(targetRoute as any);
+  }, [anyOnlineServerId, pathname, router, storeReady]);
+
+  return <StartupSplashScreen bootstrapState={bootstrapState} />;
 }

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

@@ -15,7 +15,8 @@ import { formatTimeAgo } from "@/utils/time";
 import { shortenPath } from "@/utils/shorten-path";
 import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
 import { useSessionStore } from "@/stores/session-store";
-import { Archive } from "lucide-react-native";
+import { Archive, SquareTerminal } from "lucide-react-native";
+import { getProviderIcon } from "@/components/provider-icons";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 
 interface AgentListProps {
@@ -130,6 +131,7 @@ function SessionRow({
   const isSelected = selectedAgentId === agentKey;
   const statusLabel = formatStatusLabel(agent.status);
   const projectPath = shortenPath(agent.cwd);
+  const ProviderIcon = getProviderIcon(agent.provider);
 
   return (
     <Pressable
@@ -145,12 +147,21 @@ function SessionRow({
     >
       <View style={styles.rowContent}>
         <View style={styles.rowTitleRow}>
+          <View style={styles.providerIconWrap}>
+            <ProviderIcon size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+          </View>
           <Text
             style={[styles.sessionTitle, isSelected && styles.sessionTitleHighlighted]}
             numberOfLines={1}
           >
             {agent.title || "New session"}
           </Text>
+          {agent.terminal ? (
+            <SessionBadge
+              label="Terminal"
+              icon={<SquareTerminal size={theme.fontSize.xs} color={theme.colors.foregroundMuted} />}
+            />
+          ) : null}
           {agent.archivedAt ? (
             <SessionBadge
               label="Archived"
@@ -239,6 +250,7 @@ export function AgentList({
         workspaceId: agent.cwd,
         target: { kind: "agent", agentId },
         pin: Boolean(agent.archivedAt),
+        requestReopen: agent.terminal && agent.status === "closed",
       });
       router.navigate(route as any);
     },
@@ -433,6 +445,11 @@ const styles = StyleSheet.create((theme) => ({
     flexWrap: "wrap",
     gap: theme.spacing[2],
   },
+  providerIconWrap: {
+    width: theme.iconSize.md,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   rowMetaRow: {
     flexDirection: "row",
     alignItems: "center",

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

@@ -8,6 +8,7 @@ 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 {
   DropdownMenu,
   DropdownMenuContent,
@@ -609,6 +610,7 @@ function ControlledStatusBar({
 const EMPTY_MODES: AgentMode[] = [];
 
 export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
+  const { preferences, updatePreferences } = useFormPreferences();
   const agent = useSessionStore(
     useShallow((state) => {
       const currentAgent = state.sessions[serverId]?.agents?.get(agentId) ?? null;
@@ -709,6 +711,17 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
         if (!client) {
           return;
         }
+        void updatePreferences(
+          mergeProviderPreferences({
+            preferences,
+            provider: agent.provider,
+            updates: {
+              model: modelId,
+            },
+          }),
+        ).catch((error) => {
+          console.warn("[AgentStatusBar] persist model preference failed", error);
+        });
         void client.setAgentModel(agentId, modelId).catch((error) => {
           console.warn("[AgentStatusBar] setAgentModel failed", error);
         });
@@ -719,6 +732,23 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
         if (!client) {
           return;
         }
+        const activeModelId = modelSelection.activeModelId;
+        if (activeModelId) {
+          void updatePreferences(
+            mergeProviderPreferences({
+              preferences,
+              provider: agent.provider,
+              updates: {
+                model: activeModelId,
+                thinkingByModel: {
+                  [activeModelId]: thinkingOptionId,
+                },
+              },
+            }),
+          ).catch((error) => {
+            console.warn("[AgentStatusBar] persist thinking preference failed", error);
+          });
+        }
         void client.setAgentThinkingOption(agentId, thinkingOptionId).catch((error) => {
           console.warn("[AgentStatusBar] setAgentThinkingOption failed", error);
         });

packages/app/src/components/composer.status-controls.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { resolveStatusControlMode } from "./agent-input-area.status-controls";
+import { resolveStatusControlMode } from "./composer.status-controls";
 
 describe("resolveStatusControlMode", () => {
   it("uses ready mode when no controlled status controls are provided", () => {

packages/app/src/components/composer.tsx

@@ -41,7 +41,7 @@ import {
   persistAttachmentFromBlob,
   persistAttachmentFromFileUri,
 } from "@/attachments/service";
-import { resolveStatusControlMode } from "@/components/agent-input-area.status-controls";
+import { resolveStatusControlMode } from "@/components/composer.status-controls";
 import { markScrollInvestigationRender } from "@/utils/scroll-jank-investigation";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
@@ -56,11 +56,12 @@ type QueuedMessage = {
 
 type ImageListUpdater = ImageAttachment[] | ((prev: ImageAttachment[]) => ImageAttachment[]);
 
-interface AgentInputAreaProps {
+interface ComposerProps {
   agentId: string;
   serverId: string;
   isInputActive: boolean;
   onSubmitMessage?: (payload: MessagePayload) => Promise<void>;
+  allowEmptySubmit?: boolean;
   /** Externally controlled loading state. When true, disables the submit button. */
   isSubmitLoading?: boolean;
   /** When true, blurs the input immediately when submitting. */
@@ -89,11 +90,12 @@ const EMPTY_ARRAY: readonly QueuedMessage[] = [];
 const DESKTOP_MESSAGE_PLACEHOLDER = "Message the agent, tag @files, or use /commands and /skills";
 const MOBILE_MESSAGE_PLACEHOLDER = "Message, @files, /commands";
 
-export function AgentInputArea({
+export function Composer({
   agentId,
   serverId,
   isInputActive,
   onSubmitMessage,
+  allowEmptySubmit = false,
   isSubmitLoading = false,
   blurOnSubmit = false,
   value,
@@ -109,8 +111,8 @@ export function AgentInputArea({
   onAttentionInputFocus,
   onAttentionPromptSend,
   statusControls,
-}: AgentInputAreaProps) {
-  markScrollInvestigationRender(`AgentInputArea:${serverId}:${agentId}`);
+}: ComposerProps) {
+  markScrollInvestigationRender(`Composer:${serverId}:${agentId}`);
   const { theme } = useUnistyles();
   const buttonIconSize = Platform.OS === "web" ? theme.iconSize.md : theme.iconSize.lg;
   const insets = useSafeAreaInsets();
@@ -480,7 +482,7 @@ export function AgentInputArea({
       return;
     }
     void voice.startVoice(serverId, agentId).catch((error) => {
-      console.error("[AgentInputArea] Failed to start voice mode", error);
+      console.error("[Composer] Failed to start voice mode", error);
       const message =
         error instanceof Error ? error.message : typeof error === "string" ? error : null;
       if (message && message.trim().length > 0) {
@@ -677,6 +679,7 @@ export function AgentInputArea({
               value={userInput}
               onChangeText={setUserInput}
               onSubmit={handleSubmit}
+              allowEmptySubmit={allowEmptySubmit}
               isSubmitDisabled={isProcessing || isSubmitLoading}
               isSubmitLoading={isProcessing || isSubmitLoading}
               images={selectedImages}

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

@@ -17,6 +17,7 @@ import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 import { GitDiffPane } from "./git-diff-pane";
 import { FileExplorerPane } from "./file-explorer-pane";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
+import { useWindowControlsPadding } from "@/utils/desktop-window";
 
 const MIN_CHAT_WIDTH = 400;
 function logExplorerSidebar(_event: string, _details: Record<string, unknown>): void {}
@@ -336,12 +337,13 @@ function SidebarContent({
   onOpenFile,
 }: SidebarContentProps) {
   const { theme } = useUnistyles();
+  const padding = useWindowControlsPadding("explorerSidebar");
   const resolvedTab: ExplorerTab = !isGit && activeTab === "changes" ? "files" : activeTab;
 
   return (
     <View style={styles.sidebarContent} pointerEvents="auto">
       {/* Header with tabs and close button */}
-      <View style={styles.header} testID="explorer-header">
+      <View style={[styles.header, { paddingRight: padding.right }]} testID="explorer-header">
         <View style={styles.tabsContainer}>
           {isGit && (
             <Pressable

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

@@ -26,18 +26,17 @@ import Animated, {
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { Fonts } from "@/constants/theme";
 import * as Clipboard from "expo-clipboard";
+import { SvgXml } from "react-native-svg";
 import {
+  ChevronDown,
+  ChevronRight,
   Copy,
   Download,
-  File,
-  FileText,
-  Folder,
-  FolderOpen,
-  Image as ImageIcon,
   MoreVertical,
   RotateCw,
   X,
 } from "lucide-react-native";
+import { getFileIconSvg } from "@/components/material-file-icons";
 import type { AgentFileExplorerState, ExplorerEntry } from "@/stores/session-store";
 import { useHosts } from "@/runtime/host-runtime";
 import { useSessionStore } from "@/stores/session-store";
@@ -65,7 +64,7 @@ const SORT_OPTIONS: { value: SortOption; label: string }[] = [
   { value: "size", label: "Size" },
 ];
 
-const INDENT_PER_LEVEL = 12;
+const INDENT_PER_LEVEL = 16;
 
 function formatFileSize({ size }: { size: number }): string {
   if (size < 1024) {
@@ -384,7 +383,6 @@ export function FileExplorerPane({
     ({ item }: ListRenderItemInfo<TreeRow>) => {
       const entry = item.entry;
       const depth = item.depth;
-      const displayKind = getEntryDisplayKind(entry);
       const isDirectory = entry.kind === "directory";
       const isExpanded = isDirectory && expandedPaths.has(entry.path);
       const isSelected = selectedEntryPath === entry.path;
@@ -399,16 +397,30 @@ export function FileExplorerPane({
             (hovered || pressed || isSelected) && styles.entryRowActive,
           ]}
         >
+          {depth > 0 &&
+            Array.from({ length: depth }, (_, i) => (
+              <View
+                key={i}
+                style={[
+                  styles.indentGuide,
+                  {
+                    left: theme.spacing[3] + i * INDENT_PER_LEVEL + 4,
+                  },
+                ]}
+              />
+            ))}
           <View style={styles.entryInfo}>
             <View style={styles.entryIcon}>
-              {loading ? (
-                <ActivityIndicator size="small" />
+              {isDirectory ? (
+                loading ? (
+                  <ActivityIndicator size="small" />
+                ) : (
+                  <View style={[styles.chevron, isExpanded && styles.chevronExpanded]}>
+                    <ChevronRight size={16} color={theme.colors.foregroundMuted} />
+                  </View>
+                )
               ) : (
-                renderEntryIcon(isDirectory ? "directory" : displayKind, {
-                  foreground: theme.colors.foregroundMuted,
-                  primary: theme.colors.primary,
-                  directoryOpen: isExpanded,
-                })
+                <SvgXml xml={getFileIconSvg(entry.name)} width={16} height={16} />
               )}
             </View>
             <Text style={styles.entryName} numberOfLines={1}>
@@ -552,27 +564,31 @@ export function FileExplorerPane({
       ) : (
         <View style={[styles.treePane, styles.treePaneFill]}>
           <View style={styles.paneHeader} testID="files-pane-header">
-            <View style={styles.paneHeaderLeft} />
-            <View style={styles.paneHeaderRight}>
-              <Pressable
-                onPress={handleRefresh}
-                disabled={isRefreshFetching}
-                hitSlop={8}
-                style={({ hovered, pressed }) => [
-                  styles.iconButton,
-                  (hovered || pressed) && styles.iconButtonHovered,
-                ]}
-                accessibilityRole="button"
-                accessibilityLabel="Refresh files"
-              >
-                <Animated.View style={[styles.refreshIcon, refreshIconAnimatedStyle]}>
-                  <RotateCw size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-                </Animated.View>
-              </Pressable>
-              <Pressable style={styles.sortButton} onPress={handleSortCycle}>
-                <Text style={styles.sortButtonText}>{currentSortLabel}</Text>
-              </Pressable>
-            </View>
+            <Pressable
+              onPress={handleSortCycle}
+              style={({ hovered, pressed }) => [
+                styles.sortTrigger,
+                (hovered || pressed) && styles.sortTriggerHovered,
+              ]}
+            >
+              <Text style={styles.sortTriggerText}>{currentSortLabel}</Text>
+              <ChevronDown size={12} color={theme.colors.foregroundMuted} />
+            </Pressable>
+            <Pressable
+              onPress={handleRefresh}
+              disabled={isRefreshFetching}
+              hitSlop={8}
+              style={({ hovered, pressed }) => [
+                styles.iconButton,
+                (hovered || pressed) && styles.iconButtonHovered,
+              ]}
+              accessibilityRole="button"
+              accessibilityLabel="Refresh files"
+            >
+              <Animated.View style={[styles.refreshIcon, refreshIconAnimatedStyle]}>
+                <RotateCw size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+              </Animated.View>
+            </Pressable>
           </View>
           <FlatList
             ref={treeListRef}
@@ -609,99 +625,6 @@ export function FileExplorerPane({
   );
 }
 
-type EntryDisplayKind = "directory" | "image" | "text" | "other";
-
-const IMAGE_EXTENSIONS = new Set(["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "ico"]);
-
-const TEXT_EXTENSIONS = new Set([
-  "txt",
-  "md",
-  "markdown",
-  "ts",
-  "tsx",
-  "js",
-  "jsx",
-  "json",
-  "yml",
-  "yaml",
-  "toml",
-  "py",
-  "rb",
-  "go",
-  "rs",
-  "java",
-  "kt",
-  "c",
-  "cpp",
-  "cc",
-  "h",
-  "hpp",
-  "cs",
-  "swift",
-  "php",
-  "html",
-  "css",
-  "scss",
-  "less",
-  "xml",
-  "sh",
-  "bash",
-  "zsh",
-  "ini",
-  "cfg",
-  "conf",
-]);
-
-function renderEntryIcon(
-  kind: EntryDisplayKind,
-  colors: { foreground: string; primary: string; directoryOpen?: boolean },
-) {
-  const color = colors.foreground;
-  switch (kind) {
-    case "directory":
-      return colors.directoryOpen ? (
-        <FolderOpen size={18} color={colors.primary} />
-      ) : (
-        <Folder size={18} color={colors.primary} />
-      );
-    case "image":
-      return <ImageIcon size={18} color={color} />;
-    case "text":
-      return <FileText size={18} color={color} />;
-    default:
-      return <File size={18} color={color} />;
-  }
-}
-
-function getEntryDisplayKind(entry: ExplorerEntry): EntryDisplayKind {
-  if (entry.kind === "directory") {
-    return "directory";
-  }
-
-  const extension = getExtension(entry.name);
-  if (extension === null) {
-    return "other";
-  }
-
-  if (IMAGE_EXTENSIONS.has(extension)) {
-    return "image";
-  }
-
-  if (TEXT_EXTENSIONS.has(extension)) {
-    return "text";
-  }
-
-  return "other";
-}
-
-function getExtension(name: string): string | null {
-  const index = name.lastIndexOf(".");
-  if (index === -1 || index === name.length - 1) {
-    return null;
-  }
-  return name.slice(index + 1).toLowerCase();
-}
-
 function sortEntries(entries: ExplorerEntry[], sortOption: SortOption): ExplorerEntry[] {
   const sorted = [...entries];
   sorted.sort((a, b) => {
@@ -842,50 +765,38 @@ const styles = StyleSheet.create((theme) => ({
     minWidth: 0,
   },
   paneHeader: {
+    height: WORKSPACE_SECONDARY_HEADER_HEIGHT,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    height: WORKSPACE_SECONDARY_HEADER_HEIGHT,
-    paddingHorizontal: theme.spacing[3],
+    paddingRight: theme.spacing[3],
     borderBottomWidth: 1,
     borderBottomColor: theme.colors.border,
-    backgroundColor: theme.colors.surfaceSidebar,
   },
-  paneHeaderLeft: {
-    flex: 1,
-    minWidth: 0,
-  },
-  paneHeaderRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    flexShrink: 0,
-  },
-  previewHeaderRight: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    flexShrink: 0,
-  },
-  sortButton: {
-    height: 28,
+  sortTrigger: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: theme.spacing[2],
-    borderRadius: theme.borderRadius.md,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
+    gap: theme.spacing[1],
+    marginLeft: theme.spacing[3] - theme.spacing[1],
+    paddingHorizontal: theme.spacing[1],
+    height: 24,
+    borderRadius: theme.borderRadius.base,
   },
-  sortButtonText: {
-    color: theme.colors.foregroundMuted,
+  sortTriggerHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  sortTriggerText: {
     fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
   },
   treeList: {
     flex: 1,
     minHeight: 0,
   },
   entriesContent: {
+    paddingHorizontal: theme.spacing[2],
+    paddingTop: theme.spacing[2],
     paddingBottom: theme.spacing[4],
   },
   centerState: {
@@ -936,8 +847,16 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "space-between",
     paddingVertical: 2,
     paddingRight: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
   },
   entryRowActive: {
+    backgroundColor: theme.colors.surface1,
+  },
+  indentGuide: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 1,
     backgroundColor: theme.colors.surface2,
   },
   entryInfo: {
@@ -947,6 +866,16 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     minWidth: 0,
   },
+  chevron: {
+    width: 16,
+    height: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  chevronExpanded: {
+    transform: [{ rotate: "90deg" }],
+  },
   entryIcon: {
     flexShrink: 0,
   },

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

@@ -10,6 +10,7 @@ import { getShortcutOs } from "@/utils/shortcut-platform";
 interface MenuHeaderProps {
   title?: string;
   rightContent?: ReactNode;
+  borderless?: boolean;
 }
 
 interface SidebarMenuToggleProps {
@@ -75,7 +76,7 @@ export function SidebarMenuToggle({
   );
 }
 
-export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
+export function MenuHeader({ title, rightContent, borderless }: MenuHeaderProps) {
   return (
     <ScreenHeader
       left={
@@ -90,6 +91,7 @@ export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
       }
       right={rightContent}
       leftStyle={styles.left}
+      borderless={borderless}
     />
   );
 }

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

@@ -7,33 +7,28 @@ import {
   HEADER_INNER_HEIGHT_MOBILE,
   HEADER_TOP_PADDING_MOBILE,
 } from "@/constants/layout";
-import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window";
-import { usePanelStore } from "@/stores/panel-store";
+import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
 
 interface ScreenHeaderProps {
   left?: ReactNode;
   right?: ReactNode;
   leftStyle?: StyleProp<ViewStyle>;
   rightStyle?: StyleProp<ViewStyle>;
+  borderless?: boolean;
 }
 
 /**
  * Shared frame for the home/back headers so we only maintain padding, border,
  * and safe-area logic in one place.
  */
-export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeaderProps) {
+export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }: ScreenHeaderProps) {
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const trafficLightPadding = useTrafficLightPadding();
+  const padding = useWindowControlsPadding("header");
   // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets
   const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0;
   const baseHorizontalPadding = theme.spacing[2];
-  const collapsedSidebarInset =
-    !isMobile && !desktopAgentListOpen && trafficLightPadding.side
-      ? trafficLightPadding
-      : { left: 0, right: 0 };
 
   const dragHandlers = useDesktopDragHandlers();
 
@@ -44,9 +39,10 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeade
           style={[
             styles.row,
             {
-              paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left,
-              paddingRight: baseHorizontalPadding + collapsedSidebarInset.right,
+              paddingLeft: baseHorizontalPadding + padding.left,
+              paddingRight: baseHorizontalPadding + padding.right,
             },
+            borderless && styles.borderless,
           ]}
           {...dragHandlers}
         >
@@ -87,4 +83,7 @@ const styles = StyleSheet.create((theme) => ({
     alignItems: "center",
     gap: theme.spacing[2],
   },
+  borderless: {
+    borderBottomColor: "transparent",
+  },
 }));

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

@@ -0,0 +1,16 @@
+import Svg, { Path } from "react-native-svg";
+
+interface AiderIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function AiderIcon({ size = 16, color = "currentColor" }: AiderIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path
+        d="M9 3.75h5.25V4.5H9V3.75Zm-.75.75h6v2.25h-6V4.5Zm6 3h2.25v3h-2.25v-3Zm-6 3h8.25v3h-8.25v-3Zm-1.5 3h1.5v3h-1.5v-3Zm7.5 0h2.25v3h-2.25v-3Zm-6 3h6v3h-6v-3Zm8.25 0H18v3h-1.5v-3Z"
+      />
+    </Svg>
+  );
+}

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

@@ -0,0 +1,29 @@
+import Svg, { Path } from "react-native-svg";
+
+interface AmpIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function AmpIcon({ size = 16, color = "currentColor" }: AmpIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fill={color}
+        d="m9.686 6.949 2.907.775-1.98-7.404-3.353.903 1.194 4.49a1.94 1.94 0 0 0 1.232 1.236Z"
+      />
+      <Path
+        fill={color}
+        d="m4.771 22 6.34-6.327 2.307 8.62 3.352-.903L13.432 10.87.912 7.533 0 10.906l8.61 2.3-6.31 6.317L4.77 22Z"
+      />
+      <Path
+        fill={color}
+        d="m13.254 11.707.778 2.917a1.937 1.937 0 0 0 1.23 1.234l4.511 1.199.89-3.37-7.409-1.98Z"
+      />
+      <Path
+        fill={color}
+        d="m15.916 2.484-2.883 2.88a2.063 2.063 0 0 0-.512 1.193l-.046 1.825 1.69.06-.022-.001c.463 0 .898-.181 1.225-.507L18.35 4.95l-2.434-2.467Z"
+      />
+    </Svg>
+  );
+}

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

@@ -0,0 +1,17 @@
+import Svg, { Path } from "react-native-svg";
+
+interface GeminiIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function GeminiIcon({ size = 16, color = "currentColor" }: GeminiIconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        fill={color}
+        d="M20.616 10.835a14.147 14.147 0 0 1-4.45-3.001 14.111 14.111 0 0 1-3.678-6.452.503.503 0 0 0-.975 0 14.134 14.134 0 0 1-3.679 6.452 14.155 14.155 0 0 1-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 0 0 0 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 0 1 4.45 3.001 14.112 14.112 0 0 1 3.679 6.453.502.502 0 0 0 .975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 0 1 3.001-4.45 14.113 14.113 0 0 1 6.453-3.678.503.503 0 0 0 0-.975 13.245 13.245 0 0 1-2.003-.678Z"
+      />
+    </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/left-sidebar.tsx

@@ -35,7 +35,7 @@ import {
   type SidebarProjectEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
 import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window";
+import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
 import { Combobox } from "@/components/ui/combobox";
 import { getHostRuntimeStore, useHosts } from "@/runtime/host-runtime";
 import { formatConnectionStatus } from "@/utils/daemons";
@@ -520,6 +520,7 @@ function MobileSidebar({
                 isRefreshing={isManualRefresh && isRevalidating}
                 onRefresh={handleRefresh}
                 onWorkspacePress={closeToAgent}
+                onAddProject={handleOpenProject}
                 parentGestureRef={closeGestureRef}
               />
             )}
@@ -556,7 +557,7 @@ function MobileSidebar({
                     >
                       {({ hovered }) => (
                         <Plus
-                          size={theme.iconSize.lg}
+                          size={theme.iconSize.md}
                           color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
                         />
                       )}
@@ -581,7 +582,7 @@ function MobileSidebar({
                 >
                   {({ hovered }) => (
                     <Settings
-                      size={theme.iconSize.lg}
+                      size={theme.iconSize.md}
                       color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
                     />
                   )}
@@ -631,7 +632,7 @@ function DesktopSidebar({
 }: DesktopSidebarProps) {
   const newAgentKeys = useShortcutKeys("new-agent");
   const dragHandlers = useDesktopDragHandlers();
-  const trafficLightPadding = useTrafficLightPadding();
+  const padding = useWindowControlsPadding("sidebar");
   const sidebarWidth = usePanelStore((state) => state.sidebarWidth);
   const setSidebarWidth = usePanelStore((state) => state.setSidebarWidth);
   const { width: viewportWidth } = useWindowDimensions();
@@ -681,9 +682,7 @@ function DesktopSidebar({
 
   return (
     <Animated.View style={[styles.desktopSidebar, resizeAnimatedStyle]}>
-      {trafficLightPadding.side === 'left' ? (
-        <View style={{ height: trafficLightPadding.top }} {...dragHandlers} />
-      ) : null}
+      {padding.top > 0 ? <View style={{ height: padding.top }} {...dragHandlers} /> : null}
       <View style={styles.sidebarHeader} {...dragHandlers}>
         <View style={styles.sidebarHeaderRow}>
           <SessionsButton onPress={handleViewMore} />
@@ -701,6 +700,7 @@ function DesktopSidebar({
           projects={projects}
           isRefreshing={isManualRefresh && isRevalidating}
           onRefresh={handleRefresh}
+          onAddProject={handleOpenProject}
         />
       )}
 
@@ -736,7 +736,7 @@ function DesktopSidebar({
               >
                 {({ hovered }) => (
                   <Plus
-                    size={theme.iconSize.lg}
+                    size={theme.iconSize.md}
                     color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
                   />
                 )}
@@ -761,7 +761,7 @@ function DesktopSidebar({
           >
             {({ hovered }) => (
               <Settings
-                size={theme.iconSize.lg}
+                size={theme.iconSize.md}
                 color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
               />
             )}
@@ -809,7 +809,6 @@ const styles = StyleSheet.create((theme) => ({
   sidebarContent: {
     flex: 1,
     minHeight: 0,
-    overflow: "hidden",
   },
   desktopSidebar: {
     position: "relative",

packages/app/src/components/material-file-icons.ts

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

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

@@ -53,6 +53,7 @@ export interface MessageInputProps {
   value: string;
   onChangeText: (text: string) => void;
   onSubmit: (payload: MessagePayload) => void;
+  allowEmptySubmit?: boolean;
   isSubmitDisabled?: boolean;
   isSubmitLoading?: boolean;
   images?: ImageAttachment[];
@@ -178,6 +179,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     value,
     onChangeText,
     onSubmit,
+    allowEmptySubmit = false,
     isSubmitDisabled = false,
     isSubmitLoading = false,
     images = [],
@@ -851,7 +853,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
   }
 
   const hasImages = images.length > 0;
-  const hasSendableContent = value.trim().length > 0 || hasImages;
+  const hasSendableContent = value.trim().length > 0 || hasImages || allowEmptySubmit;
   const shouldShowSendButton = hasSendableContent || isSubmitLoading;
   const canPressLoadingButton = isSubmitLoading && typeof onSubmitLoadingPress === "function";
   const isSendButtonDisabled =

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

@@ -1,10 +1,18 @@
 import { Bot } from "lucide-react-native";
+import { AiderIcon } from "@/components/icons/aider-icon";
+import { AmpIcon } from "@/components/icons/amp-icon";
 import { ClaudeIcon } from "@/components/icons/claude-icon";
 import { CodexIcon } from "@/components/icons/codex-icon";
+import { GeminiIcon } from "@/components/icons/gemini-icon";
+import { OpenCodeIcon } from "@/components/icons/opencode-icon";
 
 const PROVIDER_ICONS: Record<string, typeof Bot> = {
   claude: ClaudeIcon as unknown as typeof Bot,
   codex: CodexIcon as unknown as typeof Bot,
+  gemini: GeminiIcon as unknown as typeof Bot,
+  amp: AmpIcon as unknown as typeof Bot,
+  aider: AiderIcon as unknown as typeof Bot,
+  opencode: OpenCodeIcon as unknown as typeof Bot,
 };
 
 export function getProviderIcon(provider: string): typeof Bot {

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

@@ -10,7 +10,7 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import * as Haptics from "expo-haptics";
-import { useMutation, useQueries } from "@tanstack/react-query";
+import { useQueries } from "@tanstack/react-query";
 import {
   useCallback,
   useMemo,
@@ -36,6 +36,7 @@ import {
   GitPullRequest,
   Monitor,
   MoreVertical,
+  Plus,
 } from "lucide-react-native";
 import { NestableScrollContainer } from "react-native-draggable-flatlist";
 import { DraggableList, type DraggableRenderItemInfo } from "./draggable-list";
@@ -44,7 +45,6 @@ import { getHostRuntimeStore, isHostRuntimeConnected } from "@/runtime/host-runt
 import { getIsDesktop } from "@/constants/layout";
 import { projectIconQueryKey } from "@/hooks/use-project-icon-query";
 import { parseHostWorkspaceRouteFromPathname } from "@/utils/host-routes";
-import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 import {
   type SidebarProjectEntry,
   type SidebarWorkspaceEntry,
@@ -73,6 +73,7 @@ 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 { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
 import type { ShortcutKey } from "@/utils/format-shortcut";
@@ -81,8 +82,8 @@ import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import { type PrHint, useWorkspacePrHint } from "@/hooks/use-checkout-pr-status-query";
 import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model";
 import { useNavigationActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
-import { normalizeWorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
-import { createNameId } from "mnemonic-id";
+import { useSessionStore } from "@/stores/session-store";
+import { useWorkspaceSetupStore } from "@/stores/workspace-setup-store";
 import { buildWorkspaceArchiveRedirectRoute } from "@/utils/workspace-archive-navigation";
 import { openExternalUrl } from "@/utils/open-external-url";
 
@@ -113,6 +114,7 @@ interface SidebarWorkspaceListProps {
   isRefreshing?: boolean;
   onRefresh?: () => void;
   onWorkspacePress?: () => void;
+  onAddProject?: () => void;
   listFooterComponent?: ReactElement | null;
   /** Gesture ref for coordinating with parent gestures (e.g., sidebar close) */
   parentGestureRef?: MutableRefObject<GestureType | undefined>;
@@ -236,7 +238,7 @@ function WorkspaceStatusIndicator({
   }
 
   const KindIcon =
-    workspaceKind === "local_checkout"
+    workspaceKind === "checkout"
       ? Monitor
       : workspaceKind === "worktree"
         ? FolderGit2
@@ -651,7 +653,6 @@ function ProjectHeaderRow({
   canCreateWorktree,
   isProjectActive = false,
   onWorkspacePress,
-  onWorktreeCreated,
   shortcutNumber = null,
   showShortcutBadge = false,
   drag,
@@ -663,50 +664,30 @@ function ProjectHeaderRow({
   const [isHovered, setIsHovered] = useState(false);
   const isMobileBreakpoint =
     UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
-  const toast = useToast();
+  const beginWorkspaceSetup = useWorkspaceSetupStore((state) => state.beginWorkspaceSetup);
+
+  const handleBeginWorkspaceSetup = useCallback(() => {
+    if (!serverId) {
+      return;
+    }
+
+    onWorkspacePress?.();
+    beginWorkspaceSetup({
+      serverId,
+      projectPath: project.iconWorkingDir,
+      projectName: displayName,
+      creationMethod: "create_worktree",
+      navigationMethod: "navigate",
+    });
+  }, [beginWorkspaceSetup, displayName, onWorkspacePress, project.iconWorkingDir, serverId]);
 
-  const createWorktreeMutation = useMutation({
-    mutationFn: async () => {
-      if (!serverId) {
-        throw new Error("No server");
-      }
-      const client = getHostRuntimeStore().getClient(serverId);
-      if (!client || !isHostRuntimeConnected(getHostRuntimeStore().getSnapshot(serverId))) {
-        throw new Error("Host is not connected");
-      }
-      const payload = await client.createPaseoWorktree({
-        cwd: project.iconWorkingDir,
-        worktreeSlug: createNameId(),
-      });
-      if (payload.error || !payload.workspace) {
-        throw new Error(payload.error ?? "Failed to create worktree");
-      }
-      return payload.workspace;
-    },
-    onSuccess: (workspace) => {
-      mergeWorkspaces(serverId!, [normalizeWorkspaceDescriptor(workspace)]);
-      onWorktreeCreated?.(workspace.id);
-      onWorkspacePress?.();
-      router.navigate(
-        prepareWorkspaceTab({
-          serverId: serverId!,
-          workspaceId: workspace.id,
-          target: { kind: "draft", draftId: "new" },
-        }) as any,
-      );
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : String(error));
-    },
-  });
   useKeyboardActionHandler({
     handlerId: `worktree-new-${project.projectKey}`,
     actions: ["worktree.new"],
-    enabled: isProjectActive && canCreateWorktree && !createWorktreeMutation.isPending,
+    enabled: isProjectActive && canCreateWorktree,
     priority: 0,
     handle: () => {
-      createWorktreeMutation.mutate();
+      handleBeginWorkspaceSetup();
       return true;
     },
   });
@@ -750,9 +731,9 @@ function ProjectHeaderRow({
       {canCreateWorktree ? (
         <NewWorktreeButton
           displayName={displayName}
-          onPress={() => createWorktreeMutation.mutate()}
+          onPress={handleBeginWorkspaceSetup}
           visible={isHovered || isMobileBreakpoint}
-          loading={createWorktreeMutation.isPending}
+          loading={false}
           showShortcutHint={isProjectActive}
           testID={`sidebar-project-new-worktree-${project.projectKey}`}
         />
@@ -837,7 +818,7 @@ function WorkspaceRowInner({
   const prHint = useWorkspacePrHint({
     serverId: workspace.serverId,
     cwd: workspace.workspaceId,
-    enabled: workspace.workspaceKind !== "directory",
+    enabled: workspace.projectKind === "git",
   });
   const interaction = useLongPressDragInteraction({
     drag,
@@ -1093,7 +1074,7 @@ function WorkspaceRowWithMenu({
 
       setIsArchivingWorkspace(true);
       try {
-        const payload = await client.archiveWorkspace(workspace.workspaceId);
+        const payload = await client.archiveWorkspace(Number(workspace.workspaceId));
         if (payload.error) {
           throw new Error(payload.error);
         }
@@ -1238,7 +1219,7 @@ function NonGitProjectRowWithMenuContent({
 
       setIsArchivingWorkspace(true);
       try {
-        const payload = await client.archiveWorkspace(workspace.workspaceId);
+        const payload = await client.archiveWorkspace(Number(workspace.workspaceId));
         if (payload.error) {
           throw new Error(payload.error);
         }
@@ -1349,7 +1330,7 @@ function FlattenedProjectRow({
   dragHandleProps?: DraggableListDragHandleProps;
   isProjectActive?: boolean;
 }) {
-  if (project.projectKind === "non_git") {
+  if (project.projectKind === "directory") {
     return (
       <NonGitProjectRowWithMenu
         project={project}
@@ -1631,6 +1612,7 @@ export function SidebarWorkspaceList({
   isRefreshing = false,
   onRefresh,
   onWorkspacePress,
+  onAddProject,
   listFooterComponent,
   parentGestureRef,
 }: SidebarWorkspaceListProps) {
@@ -1900,7 +1882,18 @@ export function SidebarWorkspaceList({
   const content = (
     <>
       {projects.length === 0 ? (
-        <Text style={styles.emptyText}>No projects yet</Text>
+        <View style={styles.emptyContainer}>
+          <Text style={styles.emptyTitle}>No projects yet</Text>
+          <Text style={styles.emptyText}>Add a project to get started</Text>
+          <Button
+            variant="ghost"
+            size="sm"
+            leftIcon={Plus}
+            onPress={onAddProject}
+          >
+            Add project
+          </Button>
+        </View>
       ) : (
         <DraggableList
           testID="sidebar-project-list"
@@ -1963,11 +1956,27 @@ const styles = StyleSheet.create((theme) => ({
     marginBottom: theme.spacing[1],
   },
   workspaceListContainer: {},
+  emptyContainer: {
+    marginHorizontal: theme.spacing[2],
+    marginTop: theme.spacing[4],
+    paddingTop: theme.spacing[6],
+    paddingBottom: theme.spacing[4],
+    paddingHorizontal: theme.spacing[4],
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface0,
+    alignItems: "center",
+    gap: theme.spacing[3],
+  },
+  emptyTitle: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    textAlign: "center",
+  },
   emptyText: {
     color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
     textAlign: "center",
-    marginTop: theme.spacing[8],
-    marginHorizontal: theme.spacing[2],
   },
   projectRow: {
     minHeight: 36,

packages/app/src/components/split-container.tsx

@@ -32,7 +32,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { ResizeHandle } from "@/components/resize-handle";
 import { shouldFocusPaneFromEventTarget } from "@/components/split-container-pane-focus";
 import { usePanelStore } from "@/stores/panel-store";
-import { useTrafficLightPadding } from "@/utils/desktop-window";
+import { useWindowControlsPadding } from "@/utils/desktop-window";
 import {
   computeTabDropPreview,
   type TabDropPreview,
@@ -86,12 +86,7 @@ interface SplitContainerProps {
   onCloseTabsToLeft: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
   onCloseTabsToRight: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
   onCloseOtherTabs: (tabId: string, paneTabs: WorkspaceTabDescriptor[]) => Promise<void> | void;
-  onSelectNewTabOption: (selection: {
-    optionId: "__new_tab_agent__" | "__new_tab_terminal__";
-    paneId?: string;
-  }) => void;
-  onNewTerminalTab: (input: { paneId?: string }) => void;
-  newTabAgentOptionId?: "__new_tab_agent__" | "__new_tab_terminal__";
+  onCreateLauncherTab: (input: { paneId?: string }) => void;
   buildPaneContentModel: (input: {
     paneId: string;
     isPaneFocused: boolean;
@@ -267,9 +262,7 @@ export function SplitContainer({
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
-  onSelectNewTabOption,
-  onNewTerminalTab,
-  newTabAgentOptionId = "__new_tab_agent__",
+  onCreateLauncherTab,
   buildPaneContentModel,
   onFocusPane,
   onSplitPane,
@@ -536,9 +529,7 @@ export function SplitContainer({
         onCloseTabsToLeft={onCloseTabsToLeft}
         onCloseTabsToRight={onCloseTabsToRight}
         onCloseOtherTabs={onCloseOtherTabs}
-        onSelectNewTabOption={onSelectNewTabOption}
-        onNewTerminalTab={onNewTerminalTab}
-        newTabAgentOptionId={newTabAgentOptionId}
+        onCreateLauncherTab={onCreateLauncherTab}
         buildPaneContentModel={buildPaneContentModel}
         onFocusPane={onFocusPane}
         onSplitPane={onSplitPane}
@@ -658,9 +649,7 @@ function SplitNodeView({
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
-  onSelectNewTabOption,
-  onNewTerminalTab,
-  newTabAgentOptionId,
+  onCreateLauncherTab,
   buildPaneContentModel,
   onFocusPane,
   onSplitPane,
@@ -693,9 +682,7 @@ function SplitNodeView({
         onCloseTabsToLeft={onCloseTabsToLeft}
         onCloseTabsToRight={onCloseTabsToRight}
         onCloseOtherTabs={onCloseOtherTabs}
-        onSelectNewTabOption={onSelectNewTabOption}
-        onNewTerminalTab={onNewTerminalTab}
-        newTabAgentOptionId={newTabAgentOptionId}
+        onCreateLauncherTab={onCreateLauncherTab}
         buildPaneContentModel={buildPaneContentModel}
         onFocusPane={onFocusPane}
         onSplitPane={onSplitPane}
@@ -743,9 +730,7 @@ function SplitNodeView({
               onCloseTabsToLeft={onCloseTabsToLeft}
               onCloseTabsToRight={onCloseTabsToRight}
               onCloseOtherTabs={onCloseOtherTabs}
-              onSelectNewTabOption={onSelectNewTabOption}
-              onNewTerminalTab={onNewTerminalTab}
-              newTabAgentOptionId={newTabAgentOptionId}
+              onCreateLauncherTab={onCreateLauncherTab}
               buildPaneContentModel={buildPaneContentModel}
               onFocusPane={onFocusPane}
               onSplitPane={onSplitPane}
@@ -792,9 +777,7 @@ function SplitPaneView({
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
-  onSelectNewTabOption,
-  onNewTerminalTab,
-  newTabAgentOptionId,
+  onCreateLauncherTab,
   buildPaneContentModel,
   onFocusPane,
   onSplitPane,
@@ -809,8 +792,7 @@ function SplitPaneView({
   const { theme } = useUnistyles();
   const paneRef = useRef<View | null>(null);
   const stableOnFocusPane = useStableEvent(onFocusPane);
-  const isFocusModeEnabled = usePanelStore((s) => s.desktop.focusModeEnabled);
-  const trafficLightPadding = useTrafficLightPadding();
+  const padding = useWindowControlsPadding("tabRow");
   const paneState = useMemo(
     () =>
       deriveWorkspacePaneState({
@@ -885,11 +867,7 @@ function SplitPaneView({
       <View
         style={[
           styles.paneTabs,
-          isFocusModeEnabled &&
-            trafficLightPadding.side && {
-              paddingLeft: trafficLightPadding.left,
-              paddingRight: trafficLightPadding.right,
-            },
+          { paddingLeft: padding.left, paddingRight: padding.right },
         ]}
       >
         <WorkspaceDesktopTabsRow
@@ -907,9 +885,7 @@ function SplitPaneView({
           onCloseTabsToLeft={(tabId) => onCloseTabsToLeft(tabId, paneTabs)}
           onCloseTabsToRight={(tabId) => onCloseTabsToRight(tabId, paneTabs)}
           onCloseOtherTabs={(tabId) => onCloseOtherTabs(tabId, paneTabs)}
-          onSelectNewTabOption={onSelectNewTabOption}
-          onNewTerminalTab={onNewTerminalTab}
-          newTabAgentOptionId={newTabAgentOptionId ?? "__new_tab_agent__"}
+          onCreateLauncherTab={onCreateLauncherTab}
           onReorderTabs={(nextTabs) => {
             onReorderTabsInPane(
               pane.id,

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

@@ -565,6 +565,18 @@ export default function TerminalEmulator({
   const handleInsetTop = Math.max(0, (thumbRegionHeight - scrollbarGeometry.handleSize) / 2);
   const handleTravelDurationMs =
     isDraggingScrollbar || isScrollActive ? 0 : SCROLLBAR_HANDLE_TRAVEL_DURATION_MS;
+  const handleContextMenu = () => {
+    const showContextMenu = window.paseoDesktop?.menu?.showContextMenu;
+    if (typeof showContextMenu !== "function") {
+      return;
+    }
+
+    const hasSelection = Boolean(window.getSelection()?.toString());
+    void showContextMenu({
+      kind: "terminal",
+      hasSelection,
+    });
+  };
 
   return (
     <div
@@ -586,6 +598,10 @@ export default function TerminalEmulator({
       onPointerDown={() => {
         runtimeRef.current?.focus();
       }}
+      onContextMenu={(event) => {
+        event.preventDefault();
+        handleContextMenu();
+      }}
     >
       <div
         ref={hostRef}

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

@@ -1,11 +1,19 @@
-import type { PropsWithChildren, ReactElement } from "react";
+import { useState, type ComponentType, type PropsWithChildren, type ReactElement } from "react";
 import { Pressable, Text, View } from "react-native";
 import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
 type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";
 type ButtonSize = "sm" | "md" | "lg";
 
+type LeftIcon =
+  | ReactElement
+  | ComponentType<{ color: string; size: number }>
+  | ((color: string) => ReactElement)
+  | null;
+
+const ICON_SIZE: Record<ButtonSize, number> = { sm: 14, md: 16, lg: 20 };
+
 const styles = StyleSheet.create((theme) => ({
   base: {
     flexDirection: "row",
@@ -67,6 +75,12 @@ const styles = StyleSheet.create((theme) => ({
   textDestructive: {
     color: theme.colors.palette.white,
   },
+  textGhost: {
+    color: theme.colors.foregroundMuted,
+  },
+  textGhostHovered: {
+    color: theme.colors.foreground,
+  },
 }));
 
 export function Button({
@@ -83,11 +97,14 @@ export function Button({
   Omit<PressableProps, "style"> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    leftIcon?: ReactElement | null;
+    leftIcon?: LeftIcon;
     style?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
   }
 >) {
+  const [hovered, setHovered] = useState(false);
+  const { theme } = useUnistyles();
+
   const variantStyle =
     variant === "default"
       ? styles.default
@@ -100,19 +117,47 @@ export function Button({
             : styles.destructive;
 
   const sizeStyle = size === "sm" ? styles.sm : size === "lg" ? styles.lg : styles.md;
+  const isGhostHovered = hovered && variant === "ghost";
 
   const resolvedTextStyle = [
     styles.text,
     variant === "default" ? styles.textDefault : null,
     variant === "destructive" ? styles.textDestructive : null,
+    variant === "ghost" ? styles.textGhost : null,
     textStyle,
+    isGhostHovered ? styles.textGhostHovered : null,
   ];
 
+  function renderIcon() {
+    if (!leftIcon) return null;
+
+    // Pre-rendered element — pass through
+    if (typeof leftIcon === "object" && "type" in leftIcon) {
+      return <View>{leftIcon}</View>;
+    }
+
+    const color = variant === "ghost"
+      ? (isGhostHovered ? theme.colors.foreground : theme.colors.foregroundMuted)
+      : theme.colors.foreground;
+    const iconSize = ICON_SIZE[size];
+
+    // Render function
+    if (typeof leftIcon === "function" && !leftIcon.prototype?.isReactComponent && leftIcon.length > 0) {
+      return <View>{(leftIcon as (color: string) => ReactElement)(color)}</View>;
+    }
+
+    // Component type
+    const Icon = leftIcon as ComponentType<{ color: string; size: number }>;
+    return <View><Icon color={color} size={iconSize} /></View>;
+  }
+
   return (
     <Pressable
       {...props}
       accessibilityRole={accessibilityRole ?? "button"}
       disabled={disabled}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
       style={({ pressed }) => [
         styles.base,
         sizeStyle,
@@ -122,7 +167,7 @@ export function Button({
         style,
       ]}
     >
-      {leftIcon ? <View>{leftIcon}</View> : null}
+      {renderIcon()}
       <Text style={resolvedTextStyle}>{children}</Text>
     </Pressable>
   );

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

@@ -278,7 +278,10 @@ export function DropdownMenuContent({
       setModalVisible(true);
       setClosing(false);
     } else if (modalVisible) {
-      setClosing(true);
+      // Avoid leaving an invisible full-screen Modal mounted on native when
+      // the exit animation callback does not fire.
+      setClosing(false);
+      setModalVisible(false);
     }
   }, [open, modalVisible]);
 

packages/app/src/components/workspace-setup-dialog.tsx

@@ -0,0 +1,715 @@
+import { useCallback, useEffect, useMemo, useState, type ComponentType } from "react";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { Bot, ChevronLeft, MessagesSquare, SquareTerminal } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
+import { createNameId } from "mnemonic-id";
+import { AdaptiveModalSheet, AdaptiveTextInput } from "@/components/adaptive-modal-sheet";
+import { Composer } from "@/components/composer";
+import { getProviderIcon } from "@/components/provider-icons";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/contexts/toast-context";
+import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { useProviderRecency } from "@/stores/provider-recency-store";
+import { normalizeWorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
+import { useWorkspaceSetupStore } from "@/stores/workspace-setup-store";
+import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
+import { encodeImages } from "@/utils/encode-images";
+import { toErrorMessage } from "@/utils/error-messages";
+import { navigateToPreparedWorkspaceTab } from "@/utils/workspace-navigation";
+import type { MessagePayload } from "./message-input";
+
+type SetupStep = "choose" | "chat" | "terminal-agent";
+
+export function WorkspaceSetupDialog() {
+  const { theme } = useUnistyles();
+  const toast = useToast();
+  const pendingWorkspaceSetup = useWorkspaceSetupStore((state) => state.pendingWorkspaceSetup);
+  const clearWorkspaceSetup = useWorkspaceSetupStore((state) => state.clearWorkspaceSetup);
+  const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
+  const setHasHydratedWorkspaces = useSessionStore((state) => state.setHasHydratedWorkspaces);
+  const setAgents = useSessionStore((state) => state.setAgents);
+  const [step, setStep] = useState<SetupStep>("choose");
+  const [terminalPrompt, setTerminalPrompt] = useState("");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [createdWorkspace, setCreatedWorkspace] = useState<ReturnType<
+    typeof normalizeWorkspaceDescriptor
+  > | null>(null);
+  const [pendingAction, setPendingAction] = useState<"chat" | "terminal-agent" | "terminal" | null>(
+    null,
+  );
+
+  const serverId = pendingWorkspaceSetup?.serverId ?? "";
+  const projectPath = pendingWorkspaceSetup?.projectPath ?? "";
+  const projectName = pendingWorkspaceSetup?.projectName?.trim() ?? "";
+  const workspace = createdWorkspace;
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const chatDraft = useAgentInputDraft({
+    draftKey: `workspace-setup:${serverId}:${projectPath}`,
+    composer: {
+      initialServerId: serverId || null,
+      initialValues: projectPath ? { workingDir: projectPath } : undefined,
+      isVisible: pendingWorkspaceSetup !== null,
+      onlineServerIds: isConnected && serverId ? [serverId] : [],
+      lockedWorkingDir: workspace?.id ?? projectPath,
+    },
+  });
+  const composerState = chatDraft.composerState;
+  if (!composerState && pendingWorkspaceSetup) {
+    throw new Error("Workspace setup composer state is required");
+  }
+  const { providers: sortedProviders, recordUsage } = useProviderRecency(
+    composerState?.providerDefinitions ?? [],
+  );
+
+  useEffect(() => {
+    setStep("choose");
+    setTerminalPrompt("");
+    setErrorMessage(null);
+    setCreatedWorkspace(null);
+    setPendingAction(null);
+  }, [pendingWorkspaceSetup?.creationMethod, projectPath, serverId]);
+
+  const handleClose = useCallback(() => {
+    clearWorkspaceSetup();
+  }, [clearWorkspaceSetup]);
+
+  const navigateAfterCreation = useCallback(
+    (
+      workspaceId: string,
+      target: { kind: "agent"; agentId: string } | { kind: "terminal"; terminalId: string },
+    ) => {
+      if (!pendingWorkspaceSetup) {
+        return;
+      }
+
+      clearWorkspaceSetup();
+      navigateToPreparedWorkspaceTab({
+        serverId: pendingWorkspaceSetup.serverId,
+        workspaceId,
+        target,
+        navigationMethod: pendingWorkspaceSetup.navigationMethod,
+      });
+    },
+    [clearWorkspaceSetup, pendingWorkspaceSetup],
+  );
+
+  const withConnectedClient = useCallback(() => {
+    if (!client || !isConnected) {
+      throw new Error("Host is not connected");
+    }
+    return client;
+  }, [client, isConnected]);
+
+  const ensureWorkspace = useCallback(async () => {
+    if (!pendingWorkspaceSetup) {
+      throw new Error("No workspace setup is pending");
+    }
+
+    if (createdWorkspace) {
+      return createdWorkspace;
+    }
+
+    const connectedClient = withConnectedClient();
+    const payload =
+      pendingWorkspaceSetup.creationMethod === "create_worktree"
+        ? await connectedClient.createPaseoWorktree({
+            cwd: pendingWorkspaceSetup.projectPath,
+            worktreeSlug: createNameId(),
+          })
+        : await connectedClient.openProject(pendingWorkspaceSetup.projectPath);
+
+    if (payload.error || !payload.workspace) {
+      throw new Error(
+        payload.error ??
+          (pendingWorkspaceSetup.creationMethod === "create_worktree"
+            ? "Failed to create worktree"
+            : "Failed to open project"),
+      );
+    }
+
+    const normalizedWorkspace = normalizeWorkspaceDescriptor(payload.workspace);
+    mergeWorkspaces(pendingWorkspaceSetup.serverId, [normalizedWorkspace]);
+    if (pendingWorkspaceSetup.creationMethod === "open_project") {
+      setHasHydratedWorkspaces(pendingWorkspaceSetup.serverId, true);
+    }
+    setCreatedWorkspace(normalizedWorkspace);
+    return normalizedWorkspace;
+  }, [
+    createdWorkspace,
+    mergeWorkspaces,
+    pendingWorkspaceSetup,
+    setHasHydratedWorkspaces,
+    withConnectedClient,
+  ]);
+
+  const getIsStillActive = useCallback(() => {
+    const current = useWorkspaceSetupStore.getState().pendingWorkspaceSetup;
+    return (
+      current?.serverId === pendingWorkspaceSetup?.serverId &&
+      current?.projectPath === pendingWorkspaceSetup?.projectPath &&
+      current?.creationMethod === pendingWorkspaceSetup?.creationMethod
+    );
+  }, [
+    pendingWorkspaceSetup?.creationMethod,
+    pendingWorkspaceSetup?.projectPath,
+    pendingWorkspaceSetup?.serverId,
+  ]);
+
+  const handleCreateChatAgent = useCallback(
+    async ({ text, images }: MessagePayload) => {
+      try {
+        setPendingAction("chat");
+        setErrorMessage(null);
+        const workspace = await ensureWorkspace();
+        const connectedClient = withConnectedClient();
+        if (!composerState) {
+          throw new Error("Workspace setup composer state is required");
+        }
+
+        const encodedImages = await encodeImages(images);
+        const agent = await connectedClient.createAgent({
+          provider: composerState.selectedProvider,
+          cwd: workspace.id,
+          ...(composerState.modeOptions.length > 0 && composerState.selectedMode !== ""
+            ? { modeId: composerState.selectedMode }
+            : {}),
+          ...(composerState.effectiveModelId ? { model: composerState.effectiveModelId } : {}),
+          ...(composerState.effectiveThinkingOptionId
+            ? { thinkingOptionId: composerState.effectiveThinkingOptionId }
+            : {}),
+          ...(text.trim() ? { initialPrompt: text.trim() } : {}),
+          ...(encodedImages && encodedImages.length > 0 ? { images: encodedImages } : {}),
+        });
+
+        if (!getIsStillActive()) {
+          return;
+        }
+
+        setAgents(serverId, (previous) => {
+          const next = new Map(previous);
+          next.set(agent.id, normalizeAgentSnapshot(agent, serverId));
+          return next;
+        });
+        navigateAfterCreation(workspace.id, { kind: "agent", agentId: agent.id });
+      } catch (error) {
+        const message = toErrorMessage(error);
+        setErrorMessage(message);
+        toast.error(message);
+      } finally {
+        if (getIsStillActive()) {
+          setPendingAction(null);
+        }
+      }
+    },
+    [
+      composerState,
+      getIsStillActive,
+      navigateAfterCreation,
+      serverId,
+      setAgents,
+      ensureWorkspace,
+      toast,
+      withConnectedClient,
+    ],
+  );
+
+  const handleCreateTerminalAgent = useCallback(async () => {
+    try {
+      setPendingAction("terminal-agent");
+      setErrorMessage(null);
+      const workspace = await ensureWorkspace();
+      const connectedClient = withConnectedClient();
+      if (!composerState) {
+        throw new Error("Workspace setup composer state is required");
+      }
+
+      const agent = await connectedClient.createAgent({
+        provider: composerState.selectedProvider,
+        cwd: workspace.id,
+        terminal: true,
+        ...(terminalPrompt.trim() ? { initialPrompt: terminalPrompt.trim() } : {}),
+      });
+
+      if (!getIsStillActive()) {
+        return;
+      }
+
+      recordUsage(composerState.selectedProvider);
+      setAgents(serverId, (previous) => {
+        const next = new Map(previous);
+        next.set(agent.id, normalizeAgentSnapshot(agent, serverId));
+        return next;
+      });
+      navigateAfterCreation(workspace.id, { kind: "agent", agentId: agent.id });
+    } catch (error) {
+      const message = toErrorMessage(error);
+      setErrorMessage(message);
+      toast.error(message);
+    } finally {
+      if (getIsStillActive()) {
+        setPendingAction(null);
+      }
+    }
+  }, [
+    composerState,
+    getIsStillActive,
+    navigateAfterCreation,
+    recordUsage,
+    serverId,
+    setAgents,
+    ensureWorkspace,
+    terminalPrompt,
+    toast,
+    withConnectedClient,
+  ]);
+
+  const handleCreateTerminal = useCallback(async () => {
+    try {
+      setPendingAction("terminal");
+      setErrorMessage(null);
+      const workspace = await ensureWorkspace();
+      const connectedClient = withConnectedClient();
+
+      const payload = await connectedClient.createTerminal(workspace.id);
+      if (payload.error || !payload.terminal) {
+        throw new Error(payload.error ?? "Failed to open terminal");
+      }
+
+      if (!getIsStillActive()) {
+        return;
+      }
+
+      navigateAfterCreation(workspace.id, { kind: "terminal", terminalId: payload.terminal.id });
+    } catch (error) {
+      const message = toErrorMessage(error);
+      setErrorMessage(message);
+      toast.error(message);
+    } finally {
+      if (getIsStillActive()) {
+        setPendingAction(null);
+      }
+    }
+  }, [ensureWorkspace, getIsStillActive, navigateAfterCreation, toast, withConnectedClient]);
+
+  const workspaceTitle =
+    workspace?.name ||
+    workspace?.projectDisplayName ||
+    projectName ||
+    projectPath.split(/[\\/]/).filter(Boolean).pop() ||
+    projectPath;
+  const workspacePath = workspace?.projectRootPath || projectPath;
+
+  if (!pendingWorkspaceSetup || !projectPath) {
+    return null;
+  }
+
+  return (
+    <AdaptiveModalSheet
+      title="Set up workspace"
+      visible={true}
+      onClose={handleClose}
+      snapPoints={["82%", "94%"]}
+      testID="workspace-setup-dialog"
+    >
+      <View style={styles.header}>
+        <Text style={styles.workspaceTitle}>{workspaceTitle}</Text>
+        <Text style={styles.workspacePath}>{workspacePath}</Text>
+      </View>
+
+      {step === "choose" ? (
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>What do you want to open?</Text>
+          <View style={styles.choiceGrid}>
+            <ChoiceCard
+              title="Chat Agent"
+              description="Open this workspace with a prompt-first chat agent."
+              Icon={MessagesSquare}
+              disabled={pendingAction !== null}
+              onPress={() => {
+                setErrorMessage(null);
+                setStep("chat");
+              }}
+            />
+            <ChoiceCard
+              title="Terminal Agent"
+              description="Launch an agent-backed terminal in an agent tab."
+              Icon={Bot}
+              disabled={pendingAction !== null}
+              onPress={() => {
+                setErrorMessage(null);
+                setStep("terminal-agent");
+              }}
+            />
+            <ChoiceCard
+              title="Terminal"
+              description="Create the workspace, then open a standalone terminal tab."
+              Icon={SquareTerminal}
+              disabled={pendingAction !== null}
+              pending={pendingAction === "terminal"}
+              onPress={() => {
+                void handleCreateTerminal();
+              }}
+            />
+          </View>
+        </View>
+      ) : null}
+
+      {step === "chat" ? (
+        <View style={styles.section}>
+          <StepHeader
+            title="Chat Agent"
+            onBack={() => {
+              setErrorMessage(null);
+              setStep("choose");
+            }}
+          />
+          <Text style={styles.helper}>
+            Start with a prompt and optional images. The workspace is created first, then the agent launches, then navigation happens.
+          </Text>
+          <View style={styles.composerCard}>
+            <Composer
+              agentId={`workspace-setup:${serverId}:${projectPath}`}
+              serverId={serverId}
+              isInputActive={true}
+              onSubmitMessage={handleCreateChatAgent}
+              isSubmitLoading={pendingAction === "chat"}
+              blurOnSubmit={true}
+              value={chatDraft.text}
+              onChangeText={chatDraft.setText}
+              images={chatDraft.images}
+              onChangeImages={chatDraft.setImages}
+              clearDraft={chatDraft.clear}
+              autoFocus
+              commandDraftConfig={composerState?.commandDraftConfig}
+              statusControls={
+                composerState
+                  ? {
+                      ...composerState.statusControls,
+                      disabled: pendingAction !== null,
+                    }
+                  : undefined
+              }
+            />
+          </View>
+        </View>
+      ) : null}
+
+      {step === "terminal-agent" ? (
+        <View style={styles.section}>
+          <StepHeader
+            title="Terminal Agent"
+            onBack={() => {
+              setErrorMessage(null);
+              setStep("choose");
+            }}
+          />
+          <Text style={styles.helper}>
+            Choose a provider and optionally send an initial prompt. The workspace is created before the terminal agent launches.
+          </Text>
+
+          <View style={styles.providerGrid}>
+            {sortedProviders.map((provider) => (
+              <ProviderOption
+                key={provider.id}
+                provider={provider}
+                selected={provider.id === composerState?.selectedProvider}
+                disabled={pendingAction !== null}
+                onPress={() => composerState?.setProviderFromUser(provider.id)}
+              />
+            ))}
+          </View>
+
+          <View style={styles.field}>
+            <Text style={styles.fieldLabel}>Initial prompt</Text>
+            <AdaptiveTextInput
+              value={terminalPrompt}
+              onChangeText={setTerminalPrompt}
+              placeholder="Optional"
+              placeholderTextColor={theme.colors.foregroundMuted}
+              style={styles.input}
+              multiline
+              autoCapitalize="sentences"
+              autoCorrect={false}
+            />
+          </View>
+
+          <View style={styles.actions}>
+            <Button
+              variant="secondary"
+              style={styles.actionButton}
+              disabled={pendingAction !== null}
+              onPress={handleClose}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="default"
+              style={styles.actionButton}
+              disabled={pendingAction !== null}
+              onPress={() => {
+                void handleCreateTerminalAgent();
+              }}
+            >
+              {pendingAction === "terminal-agent" ? "Launching..." : "Launch"}
+            </Button>
+          </View>
+        </View>
+      ) : null}
+
+      {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
+    </AdaptiveModalSheet>
+  );
+}
+
+function StepHeader({ title, onBack }: { title: string; onBack: () => void }) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View style={styles.stepHeader}>
+      <Pressable accessibilityRole="button" onPress={onBack} style={styles.backButton}>
+        <ChevronLeft size={16} color={theme.colors.foregroundMuted} />
+      </Pressable>
+      <Text style={styles.sectionTitle}>{title}</Text>
+    </View>
+  );
+}
+
+function ChoiceCard({
+  title,
+  description,
+  Icon,
+  disabled,
+  pending = false,
+  onPress,
+}: {
+  title: string;
+  description: string;
+  Icon: ComponentType<{ size: number; color: string }>;
+  disabled: boolean;
+  pending?: boolean;
+  onPress: () => void;
+}) {
+  const { theme } = useUnistyles();
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ hovered, pressed }) => [
+        styles.choiceCard,
+        (hovered || pressed) && !disabled ? styles.choiceCardHovered : null,
+        disabled ? styles.cardDisabled : null,
+      ]}
+    >
+      <View style={styles.choiceIconWrap}>
+        {pending ? (
+          <ActivityIndicator size="small" color={theme.colors.foreground} />
+        ) : (
+          <Icon size={16} color={theme.colors.foreground} />
+        )}
+      </View>
+      <View style={styles.choiceBody}>
+        <Text style={styles.choiceTitle}>{title}</Text>
+        <Text numberOfLines={1} style={styles.choiceDescription}>{description}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+function ProviderOption({
+  provider,
+  selected,
+  disabled,
+  onPress,
+}: {
+  provider: { id: AgentProvider; label: string; description: string };
+  selected: boolean;
+  disabled: boolean;
+  onPress: () => void;
+}) {
+  const { theme } = useUnistyles();
+  const Icon = getProviderIcon(provider.id);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ hovered, pressed }) => [
+        styles.providerCard,
+        selected ? styles.providerCardSelected : null,
+        (hovered || pressed) && !disabled ? styles.choiceCardHovered : null,
+        disabled ? styles.cardDisabled : null,
+      ]}
+    >
+      <View style={styles.providerIconWrap}>
+        <Icon size={16} color={theme.colors.foreground} />
+      </View>
+      <View style={styles.providerBody}>
+        <Text style={styles.providerTitle}>{provider.label}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  header: {
+    gap: theme.spacing[1],
+  },
+  workspaceTitle: {
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.colors.foreground,
+  },
+  workspacePath: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+  },
+  section: {
+    gap: theme.spacing[3],
+  },
+  sectionTitle: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foregroundMuted,
+  },
+  helper: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    lineHeight: 20,
+  },
+  choiceGrid: {
+    gap: theme.spacing[2],
+  },
+  choiceCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface1,
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[3],
+  },
+  choiceCardHovered: {
+    backgroundColor: theme.colors.surface2,
+  },
+  cardDisabled: {
+    opacity: theme.opacity[50],
+  },
+  choiceIconWrap: {
+    width: 32,
+    height: 32,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface2,
+  },
+  choiceBody: {
+    flex: 1,
+    gap: 2,
+  },
+  choiceTitle: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+  choiceDescription: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+  },
+  composerCard: {
+    minHeight: 180,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface0,
+    overflow: "hidden",
+  },
+  stepHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  backButton: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface2,
+  },
+  providerGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.spacing[2],
+  },
+  providerCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface1,
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+  },
+  providerCardSelected: {
+    borderColor: theme.colors.accent,
+    backgroundColor: theme.colors.surface2,
+  },
+  providerIconWrap: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface2,
+  },
+  providerBody: {
+    flex: 1,
+  },
+  providerTitle: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+  field: {
+    gap: theme.spacing[2],
+  },
+  fieldLabel: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+  input: {
+    minHeight: 80,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface1,
+    color: theme.colors.foreground,
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[3],
+    textAlignVertical: "top",
+    fontSize: theme.fontSize.sm,
+  },
+  actions: {
+    flexDirection: "row",
+    gap: theme.spacing[2],
+  },
+  actionButton: {
+    flex: 1,
+  },
+  errorText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.destructive,
+    lineHeight: 20,
+  },
+}));

packages/app/src/constants/layout.ts

@@ -60,14 +60,3 @@ export function getIsDesktop(): boolean {
   }
   return result;
 }
-
-// Get traffic light padding values (only non-zero on desktop macOS)
-export function getTrafficLightPadding(): { left: number; top: number } {
-  if (!getIsDesktopMac()) {
-    return { left: 0, top: 0 };
-  }
-  return {
-    left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
-    top: DESKTOP_TRAFFIC_LIGHT_HEIGHT,
-  };
-}

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

@@ -4,6 +4,10 @@ import { useSharedValue, withTiming, Easing, type SharedValue } from "react-nati
 import { type GestureType } from "react-native-gesture-handler";
 import { UnistylesRuntime } from "react-native-unistyles";
 import { usePanelStore } from "@/stores/panel-store";
+import {
+  getRightSidebarAnimationTargets,
+  shouldSyncSidebarAnimation,
+} from "@/utils/sidebar-animation-state";
 
 const ANIMATION_DURATION = 220;
 const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
@@ -31,55 +35,59 @@ export function ExplorerSidebarAnimationProvider({ children }: { children: React
   const isOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
 
   // Right sidebar: closed = +windowWidth (off-screen right), open = 0
-  const translateX = useSharedValue(isOpen ? 0 : windowWidth);
-  const backdropOpacity = useSharedValue(isOpen ? 1 : 0);
+  const initialTargets = getRightSidebarAnimationTargets({ isOpen, windowWidth });
+  const translateX = useSharedValue(initialTargets.translateX);
+  const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
   const prevIsOpen = useRef(isOpen);
+  const prevWindowWidth = useRef(windowWidth);
 
   // Sync animation with store state changes (e.g., backdrop tap, programmatic open/close)
   useEffect(() => {
-    // Skip if this is initial render or if we're mid-gesture
-    if (prevIsOpen.current === isOpen) {
-      return;
-    }
+    const didStateChange = shouldSyncSidebarAnimation({
+      previousIsOpen: prevIsOpen.current,
+      nextIsOpen: isOpen,
+      previousWindowWidth: prevWindowWidth.current,
+      nextWindowWidth: windowWidth,
+    });
     const previousIsOpen = prevIsOpen.current;
     prevIsOpen.current = isOpen;
+    prevWindowWidth.current = windowWidth;
+
+    if (!didStateChange) {
+      return;
+    }
 
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
       return;
     }
 
-    if (isOpen) {
-      translateX.value = withTiming(0, {
+    const targets = getRightSidebarAnimationTargets({ isOpen, windowWidth });
+
+    if (previousIsOpen !== isOpen) {
+      translateX.value = withTiming(targets.translateX, {
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
       });
-      backdropOpacity.value = withTiming(1, {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      });
-    } else {
-      translateX.value = withTiming(windowWidth, {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      });
-      backdropOpacity.value = withTiming(0, {
+      backdropOpacity.value = withTiming(targets.backdropOpacity, {
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
       });
+      return;
     }
+
+    translateX.value = targets.translateX;
+    backdropOpacity.value = targets.backdropOpacity;
   }, [
     isOpen,
     translateX,
     backdropOpacity,
     windowWidth,
     isGesturing,
-    mobileView,
-    desktopFileExplorerOpen,
   ]);
 
   const animateToOpen = () => {

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

@@ -521,9 +521,8 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           void client
             .fetchAgentTimeline(agentId, {
               direction: "after",
-              cursor: { epoch: cursor.epoch, seq: cursor.endSeq },
+              cursor: { seq: cursor.endSeq },
               limit: 0,
-              projection: "canonical",
             })
             .catch((error) => {
               console.warn("[Session] failed to fetch catch-up timeline on resume", agentId, error);
@@ -749,13 +748,12 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
   );
 
   const requestCanonicalCatchUp = useCallback(
-    (agentId: string, cursor: { epoch: string; endSeq: number }) => {
+    (agentId: string, cursor: { endSeq: number }) => {
       void client
         .fetchAgentTimeline(agentId, {
           direction: "after",
-          cursor: { epoch: cursor.epoch, seq: cursor.endSeq },
+          cursor: { seq: cursor.endSeq },
           limit: 0,
-          projection: "canonical",
         })
         .catch((error) => {
           console.warn("[Session] failed to fetch canonical catch-up timeline", agentId, error);
@@ -858,7 +856,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           }
           if (
             current &&
-            current.epoch === result.cursor.epoch &&
             current.startSeq === result.cursor.startSeq &&
             current.endSeq === result.cursor.endSeq
           ) {
@@ -963,7 +960,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
 
     const unsubAgentStream = client.on("agent_stream", (message) => {
       if (message.type !== "agent_stream") return;
-      const { agentId, event, timestamp, seq, epoch } = message.payload;
+      const { agentId, event, timestamp, seq } = message.payload;
       const parsedTimestamp = new Date(timestamp);
       const streamEvent = event as AgentStreamEventPayload;
       if (
@@ -1005,7 +1002,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
       const result = processAgentStreamEvent({
         event: streamEvent,
         seq,
-        epoch,
         currentTail,
         currentHead,
         currentCursor,
@@ -1029,8 +1025,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           if (
             current &&
             typeof seq === "number" &&
-            typeof epoch === "string" &&
-            current.epoch === epoch &&
             seq >= current.startSeq &&
             seq <= current.endSeq
           ) {
@@ -1039,7 +1033,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           }
           if (
             current &&
-            current.epoch === nextCursor.epoch &&
             current.startSeq === nextCursor.startSeq &&
             current.endSeq === nextCursor.endSeq
           ) {
@@ -1090,7 +1083,7 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
     const unsubWorkspaceUpdate = client.on("workspace_update", (message) => {
       if (message.type !== "workspace_update") return;
       if (message.payload.kind === "remove") {
-        removeWorkspace(serverId, message.payload.id);
+        removeWorkspace(serverId, String(message.payload.id));
         return;
       }
       mergeWorkspaces(serverId, [normalizeWorkspaceDescriptor(message.payload.workspace)]);

packages/app/src/contexts/session-status-tracking.test.ts

@@ -7,6 +7,7 @@ function createAgent(status: Agent["status"]): Agent {
     serverId: "server-1",
     id: "agent-1",
     provider: "codex",
+    terminal: false,
     status,
     createdAt: new Date(0),
     updatedAt: new Date(0),
@@ -19,6 +20,7 @@ function createAgent(status: Agent["status"]): Agent {
       supportsMcpServers: true,
       supportsReasoningStream: true,
       supportsToolInvocations: true,
+      supportsTerminalMode: false,
     },
     currentModeId: null,
     availableModes: [],

packages/app/src/contexts/session-stream-reducers.test.ts

@@ -9,13 +9,9 @@ import {
   type TimelineCursor,
 } from "./session-stream-reducers";
 
-// ---------------------------------------------------------------------------
-// Test helpers
-// ---------------------------------------------------------------------------
-
 function makeTimelineEntry(seq: number, text: string, type: string = "assistant_message") {
   return {
-    seqStart: seq,
+    seq,
     provider: "claude",
     item: { type, text },
     timestamp: new Date(1000 + seq).toISOString(),
@@ -33,22 +29,30 @@ function makeTimelineEvent(
   } as AgentStreamEventPayload;
 }
 
-function makeUserTimelineEvent(text: string): AgentStreamEventPayload {
+function makeToolCallEvent(status: "running" | "completed"): AgentStreamEventPayload {
   return {
     type: "timeline",
     provider: "claude",
-    item: { type: "user_message", text },
-  } as AgentStreamEventPayload;
+    item: {
+      type: "tool_call",
+      callId: "call-1",
+      name: "shell",
+      status,
+      detail: {
+        type: "shell",
+        command: "pwd",
+      },
+      error: null,
+    },
+  };
 }
 
 const baseTimelineInput: ProcessTimelineResponseInput = {
   payload: {
     agentId: "agent-1",
     direction: "after",
-    reset: false,
-    epoch: "epoch-1",
-    startCursor: null,
-    endCursor: null,
+    startSeq: null,
+    endSeq: null,
     entries: [],
     error: null,
   },
@@ -63,7 +67,6 @@ const baseTimelineInput: ProcessTimelineResponseInput = {
 const baseStreamInput: ProcessAgentStreamEventInput = {
   event: makeTimelineEvent("hello"),
   seq: undefined,
-  epoch: undefined,
   currentTail: [],
   currentHead: [],
   currentCursor: undefined,
@@ -71,10 +74,6 @@ const baseStreamInput: ProcessAgentStreamEventInput = {
   timestamp: new Date(2000),
 };
 
-// ---------------------------------------------------------------------------
-// processTimelineResponse
-// ---------------------------------------------------------------------------
-
 describe("processTimelineResponse", () => {
   it("returns error path when payload.error is set", () => {
     const result = processTimelineResponse({
@@ -93,35 +92,10 @@ describe("processTimelineResponse", () => {
     expect(result.tail).toBe(baseTimelineInput.currentTail);
     expect(result.head).toBe(baseTimelineInput.currentHead);
     expect(result.cursorChanged).toBe(false);
-    expect(result.sideEffects).toEqual([]);
   });
 
-  it("returns error with no init resolution when no deferred exists", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      isInitializing: true,
-      hasActiveInitDeferred: false,
-      payload: {
-        ...baseTimelineInput.payload,
-        error: "timeout",
-      },
-    });
-
-    expect(result.error).toBe("timeout");
-    expect(result.initResolution).toBe(null);
-    expect(result.clearInitializing).toBe(true);
-  });
-
-  it("replaces tail and clears head when reset=true", () => {
-    const existingTail: StreamItem[] = [
-      {
-        kind: "user_message",
-        id: "old",
-        text: "old message",
-        timestamp: new Date(500),
-      },
-    ];
-    const existingHead: StreamItem[] = [
+  it("replaces tail during bootstrap tail init and schedules committed catch-up", () => {
+    const provisionalHead: StreamItem[] = [
       {
         kind: "assistant_message",
         id: "head-1",
@@ -132,518 +106,280 @@ describe("processTimelineResponse", () => {
 
     const result = processTimelineResponse({
       ...baseTimelineInput,
-      currentTail: existingTail,
-      currentHead: existingHead,
-      payload: {
-        ...baseTimelineInput.payload,
-        reset: true,
-        startCursor: { seq: 1 },
-        endCursor: { seq: 3 },
-        entries: [
-          makeTimelineEntry(1, "first"),
-          makeTimelineEntry(2, "second"),
-          makeTimelineEntry(3, "third"),
-        ],
-      },
-    });
-
-    expect(result.tail).not.toBe(existingTail);
-    expect(result.tail.length).toBeGreaterThan(0);
-    expect(result.head).toEqual([]);
-    expect(result.cursorChanged).toBe(true);
-    expect(result.cursor).toEqual({
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 3,
-    });
-    expect(result.error).toBe(null);
-    expect(result.sideEffects.some((e) => e.type === "flush_pending_updates")).toBe(true);
-  });
-
-  it("sets cursor to null when reset=true but no cursors in payload", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      currentCursor: { epoch: "epoch-1", startSeq: 1, endSeq: 5 },
-      payload: {
-        ...baseTimelineInput.payload,
-        reset: true,
-        entries: [],
-      },
-    });
-
-    expect(result.cursor).toBe(null);
-    expect(result.cursorChanged).toBe(true);
-  });
-
-  it("performs bootstrap tail init with catch-up side effect", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
+      currentHead: provisionalHead,
       isInitializing: true,
       hasActiveInitDeferred: true,
       initRequestDirection: "tail",
       payload: {
         ...baseTimelineInput.payload,
         direction: "tail",
-        epoch: "epoch-1",
-        startCursor: { seq: 1 },
-        endCursor: { seq: 5 },
+        startSeq: 1,
+        endSeq: 5,
         entries: [makeTimelineEntry(1, "first"), makeTimelineEntry(5, "last")],
       },
     });
 
-    // Bootstrap tail replaces
     expect(result.tail.length).toBeGreaterThan(0);
     expect(result.head).toEqual([]);
     expect(result.cursorChanged).toBe(true);
     expect(result.cursor).toEqual({
-      epoch: "epoch-1",
       startSeq: 1,
       endSeq: 5,
     });
 
-    // Should have catch-up side effect
-    const catchUp = result.sideEffects.find((e) => e.type === "catch_up");
-    expect(catchUp).toBeDefined();
-    expect(catchUp!.type === "catch_up" && catchUp!.cursor).toEqual({
-      epoch: "epoch-1",
-      endSeq: 5,
+    const catchUp = result.sideEffects.find((effect) => effect.type === "catch_up");
+    expect(catchUp).toEqual({
+      type: "catch_up",
+      cursor: { endSeq: 5 },
     });
   });
 
-  it("appends incrementally for contiguous seqs", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 3,
-    };
-
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      currentCursor: existingCursor,
-      payload: {
-        ...baseTimelineInput.payload,
-        epoch: "epoch-1",
-        entries: [makeTimelineEntry(4, "next-1"), makeTimelineEntry(5, "next-2")],
+  it("prepends older committed history for before pagination", () => {
+    const currentTail: StreamItem[] = [
+      {
+        kind: "assistant_message",
+        id: "tail-3",
+        text: "newer",
+        timestamp: new Date(3000),
       },
-    });
-
-    expect(result.tail.length).toBeGreaterThan(0);
-    expect(result.cursorChanged).toBe(true);
-    expect(result.cursor).toEqual({
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 5,
-    });
-    expect(result.error).toBe(null);
-  });
-
-  it("detects gap and emits catch-up side effect", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 3,
-    };
+    ];
+    const currentCursor: TimelineCursor = { startSeq: 3, endSeq: 4 };
 
     const result = processTimelineResponse({
       ...baseTimelineInput,
-      currentCursor: existingCursor,
-      payload: {
-        ...baseTimelineInput.payload,
-        epoch: "epoch-1",
-        entries: [makeTimelineEntry(10, "far ahead")],
-      },
-    });
-
-    // Gap should trigger catch-up
-    const catchUp = result.sideEffects.find((e) => e.type === "catch_up");
-    expect(catchUp).toBeDefined();
-    expect(catchUp!.type === "catch_up" && catchUp!.cursor).toEqual({
-      epoch: "epoch-1",
-      endSeq: 3,
-    });
-  });
-
-  it("drops stale entries silently", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 8,
-    };
-
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      currentCursor: existingCursor,
-      payload: {
-        ...baseTimelineInput.payload,
-        epoch: "epoch-1",
-        entries: [makeTimelineEntry(5, "old"), makeTimelineEntry(7, "also old")],
-      },
-    });
-
-    // No new items appended (all dropped as stale)
-    expect(result.tail).toBe(baseTimelineInput.currentTail);
-    expect(result.cursorChanged).toBe(false);
-  });
-
-  it("drops entries with epoch mismatch", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 5,
-    };
-
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      currentCursor: existingCursor,
-      payload: {
-        ...baseTimelineInput.payload,
-        epoch: "epoch-2",
-        entries: [makeTimelineEntry(6, "different epoch")],
-      },
-    });
-
-    expect(result.tail).toBe(baseTimelineInput.currentTail);
-    expect(result.cursorChanged).toBe(false);
-  });
-
-  it("resolves init when deferred matches direction", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      isInitializing: true,
-      hasActiveInitDeferred: true,
-      initRequestDirection: "after",
-      payload: {
-        ...baseTimelineInput.payload,
-        direction: "after",
-        entries: [],
-      },
-    });
-
-    expect(result.initResolution).toBe("resolve");
-    expect(result.clearInitializing).toBe(true);
-  });
-
-  it("does not resolve init when directions differ (before vs after)", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      isInitializing: true,
-      hasActiveInitDeferred: true,
-      initRequestDirection: "after",
+      currentTail,
+      currentCursor,
       payload: {
         ...baseTimelineInput.payload,
         direction: "before",
-        entries: [],
+        startSeq: 1,
+        endSeq: 2,
+        entries: [
+          makeTimelineEntry(1, "hello", "user_message"),
+          makeTimelineEntry(2, "older"),
+        ],
       },
     });
 
-    // "before" direction doesn't match "after" initRequestDirection,
-    // and "before" is not a bootstrap tail path, so init should NOT resolve
-    expect(result.initResolution).toBe(null);
-    expect(result.clearInitializing).toBe(false);
+    expect(result.cursorChanged).toBe(true);
+    expect(result.cursor).toEqual({
+      startSeq: 1,
+      endSeq: 4,
+    });
+    expect(result.tail).toHaveLength(3);
+    expect(result.tail[0]?.kind).toBe("user_message");
+    expect(result.tail[1]?.kind).toBe("assistant_message");
+    expect(result.tail[2]).toBe(currentTail[0]);
   });
 
-  it("clears initializing even without deferred", () => {
+  it("replaces stale provisional assistant UI when fetch-after returns committed row 121", () => {
+    const currentHead: StreamItem[] = [
+      {
+        kind: "assistant_message",
+        id: "head-assistant",
+        text: "partial",
+        timestamp: new Date(120000),
+      },
+    ];
+    const currentCursor: TimelineCursor = { startSeq: 1, endSeq: 120 };
+
     const result = processTimelineResponse({
       ...baseTimelineInput,
-      isInitializing: true,
-      hasActiveInitDeferred: false,
+      currentHead,
+      currentCursor,
       payload: {
         ...baseTimelineInput.payload,
         direction: "after",
-        entries: [],
-      },
-    });
-
-    expect(result.clearInitializing).toBe(true);
-    expect(result.initResolution).toBe(null);
-  });
-
-  it("always includes flush_pending_updates side effect on success", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      payload: {
-        ...baseTimelineInput.payload,
-        entries: [],
-      },
-    });
-
-    expect(result.sideEffects.some((e) => e.type === "flush_pending_updates")).toBe(true);
-  });
-
-  it("initializes cursor when no existing cursor on first entries", () => {
-    const result = processTimelineResponse({
-      ...baseTimelineInput,
-      currentCursor: undefined,
-      payload: {
-        ...baseTimelineInput.payload,
-        epoch: "epoch-1",
-        entries: [makeTimelineEntry(1, "first"), makeTimelineEntry(2, "second")],
+        startSeq: 121,
+        endSeq: 121,
+        entries: [makeTimelineEntry(121, "finalized reply")],
       },
     });
 
+    expect(result.head).toEqual([]);
     expect(result.cursorChanged).toBe(true);
     expect(result.cursor).toEqual({
-      epoch: "epoch-1",
       startSeq: 1,
-      endSeq: 2,
+      endSeq: 121,
+    });
+    expect(result.tail[result.tail.length - 1]).toMatchObject({
+      kind: "assistant_message",
+      text: "finalized reply",
+    });
+  });
+
+  it("keeps provisional head when reconnect catch-up has no new committed rows yet", () => {
+    const currentHead: StreamItem[] = [
+      {
+        kind: "assistant_message",
+        id: "head-assistant",
+        text: "still streaming",
+        timestamp: new Date(120000),
+      },
+    ];
+    const currentCursor: TimelineCursor = { startSeq: 1, endSeq: 120 };
+
+    const result = processTimelineResponse({
+      ...baseTimelineInput,
+      currentHead,
+      currentCursor,
+      payload: {
+        ...baseTimelineInput.payload,
+        direction: "after",
+        startSeq: null,
+        endSeq: null,
+        entries: [],
+      },
+    });
+
+    expect(result.head).toBe(currentHead);
+    expect(result.cursorChanged).toBe(false);
+    expect(result.tail).toBe(baseTimelineInput.currentTail);
+  });
+
+  it("requests catch-up when committed rows arrive with a forward gap", () => {
+    const currentCursor: TimelineCursor = { startSeq: 1, endSeq: 120 };
+
+    const result = processTimelineResponse({
+      ...baseTimelineInput,
+      currentCursor,
+      payload: {
+        ...baseTimelineInput.payload,
+        direction: "after",
+        startSeq: 125,
+        endSeq: 125,
+        entries: [makeTimelineEntry(125, "far ahead")],
+      },
+    });
+
+    expect(result.cursorChanged).toBe(false);
+    expect(result.tail).toBe(baseTimelineInput.currentTail);
+    expect(result.sideEffects).toContainEqual({
+      type: "catch_up",
+      cursor: { endSeq: 120 },
     });
   });
 });
 
-// ---------------------------------------------------------------------------
-// processAgentStreamEvent
-// ---------------------------------------------------------------------------
-
 describe("processAgentStreamEvent", () => {
-  it("passes through non-timeline events without cursor changes", () => {
-    const turnEvent: AgentStreamEventPayload = {
-      type: "turn_completed",
-      provider: "claude",
-    };
-
+  it("treats seq-less timeline events as provisional head updates", () => {
     const result = processAgentStreamEvent({
       ...baseStreamInput,
-      event: turnEvent,
+      event: makeTimelineEvent("partial"),
       seq: undefined,
-      epoch: undefined,
     });
 
+    expect(result.changedHead).toBe(true);
+    expect(result.changedTail).toBe(false);
+    expect(result.head).toHaveLength(1);
+    expect(result.head[0]).toMatchObject({
+      kind: "assistant_message",
+      text: "partial",
+    });
     expect(result.cursorChanged).toBe(false);
-    expect(result.cursor).toBe(null);
-    expect(result.sideEffects).toEqual([]);
   });
 
-  it("accepts timeline event with cursor advance", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 4,
-    };
+  it("appends committed live rows to tail and clears superseded provisional assistant state", () => {
+    const currentHead: StreamItem[] = [
+      {
+        kind: "assistant_message",
+        id: "head-assistant",
+        text: "partial",
+        timestamp: new Date(1000),
+      },
+    ];
+    const currentCursor: TimelineCursor = { startSeq: 1, endSeq: 120 };
 
     const result = processAgentStreamEvent({
       ...baseStreamInput,
-      event: makeTimelineEvent("new chunk"),
-      seq: 5,
-      epoch: "epoch-1",
-      currentCursor: existingCursor,
+      event: makeTimelineEvent("finalized reply"),
+      seq: 121,
+      currentHead,
+      currentCursor,
     });
 
+    expect(result.changedTail).toBe(true);
+    expect(result.changedHead).toBe(true);
+    expect(result.head).toEqual([]);
     expect(result.cursorChanged).toBe(true);
     expect(result.cursor).toEqual({
-      epoch: "epoch-1",
       startSeq: 1,
-      endSeq: 5,
+      endSeq: 121,
+    });
+    expect(result.tail[result.tail.length - 1]).toMatchObject({
+      kind: "assistant_message",
+      text: "finalized reply",
     });
-    expect(result.sideEffects).toEqual([]);
   });
 
-  it("detects gap and emits catch-up side effect", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 4,
-    };
+  it("replaces provisional tool progress when the committed tool row arrives", () => {
+    const provisional = processAgentStreamEvent({
+      ...baseStreamInput,
+      event: makeToolCallEvent("running"),
+      seq: undefined,
+    });
 
+    const committed = processAgentStreamEvent({
+      ...baseStreamInput,
+      event: makeToolCallEvent("completed"),
+      seq: 8,
+      currentHead: provisional.head,
+      currentTail: provisional.tail,
+      currentCursor: { startSeq: 1, endSeq: 7 },
+    });
+
+    expect(committed.head).toEqual([]);
+    expect(committed.tail).toHaveLength(1);
+    expect(committed.tail[0]).toMatchObject({
+      kind: "tool_call",
+      payload: {
+        source: "agent",
+        data: {
+          callId: "call-1",
+          status: "completed",
+        },
+      },
+    });
+  });
+
+  it("requests catch-up when a committed live row skips ahead", () => {
     const result = processAgentStreamEvent({
       ...baseStreamInput,
       event: makeTimelineEvent("far ahead"),
-      seq: 10,
-      epoch: "epoch-1",
-      currentCursor: existingCursor,
+      seq: 125,
+      currentCursor: { startSeq: 1, endSeq: 120 },
     });
 
-    expect(result.cursorChanged).toBe(false);
     expect(result.changedTail).toBe(false);
     expect(result.changedHead).toBe(false);
-
-    const catchUp = result.sideEffects.find((e) => e.type === "catch_up");
-    expect(catchUp).toBeDefined();
-    expect(catchUp!.cursor).toEqual({
-      epoch: "epoch-1",
-      endSeq: 4,
-    });
-  });
-
-  it("drops stale timeline event", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 8,
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: makeTimelineEvent("old"),
-      seq: 5,
-      epoch: "epoch-1",
-      currentCursor: existingCursor,
-    });
-
     expect(result.cursorChanged).toBe(false);
+    expect(result.sideEffects).toContainEqual({
+      type: "catch_up",
+      cursor: { endSeq: 120 },
+    });
+  });
+
+  it("clears provisional head on terminal turn events without committing it to tail", () => {
+    const result = processAgentStreamEvent({
+      ...baseStreamInput,
+      event: {
+        type: "turn_completed",
+        provider: "claude",
+      },
+      currentHead: [
+        {
+          kind: "thought",
+          id: "reasoning-1",
+          text: "thinking",
+          timestamp: new Date(1000),
+          status: "loading",
+        },
+      ],
+    });
+
+    expect(result.changedHead).toBe(true);
     expect(result.changedTail).toBe(false);
-    expect(result.changedHead).toBe(false);
-    expect(result.sideEffects).toEqual([]);
-  });
-
-  it("drops timeline event with epoch mismatch", () => {
-    const existingCursor: TimelineCursor = {
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 5,
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: makeTimelineEvent("wrong epoch"),
-      seq: 6,
-      epoch: "epoch-2",
-      currentCursor: existingCursor,
-    });
-
-    expect(result.cursorChanged).toBe(false);
-    expect(result.changedTail).toBe(false);
-    expect(result.changedHead).toBe(false);
-    expect(result.sideEffects).toEqual([]);
-  });
-
-  it("initializes cursor when none exists", () => {
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: makeTimelineEvent("first"),
-      seq: 1,
-      epoch: "epoch-1",
-      currentCursor: undefined,
-    });
-
-    expect(result.cursorChanged).toBe(true);
-    expect(result.cursor).toEqual({
-      epoch: "epoch-1",
-      startSeq: 1,
-      endSeq: 1,
-    });
-  });
-
-  it("derives optimistic idle status on turn_completed for running agent", () => {
-    const turnCompletedEvent: AgentStreamEventPayload = {
-      type: "turn_completed",
-      provider: "claude",
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: turnCompletedEvent,
-      currentAgent: {
-        status: "running",
-        updatedAt: new Date(1000),
-        lastActivityAt: new Date(1000),
-      },
-      timestamp: new Date(2000),
-    });
-
-    expect(result.agentChanged).toBe(true);
-    expect(result.agent).not.toBe(null);
-    expect(result.agent!.status).toBe("idle");
-    expect(result.agent!.updatedAt.getTime()).toBe(2000);
-    expect(result.agent!.lastActivityAt.getTime()).toBe(2000);
-  });
-
-  it("derives optimistic error status on turn_failed for running agent", () => {
-    const turnFailedEvent: AgentStreamEventPayload = {
-      type: "turn_failed",
-      provider: "claude",
-      error: "something broke",
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: turnFailedEvent,
-      currentAgent: {
-        status: "running",
-        updatedAt: new Date(1000),
-        lastActivityAt: new Date(1000),
-      },
-      timestamp: new Date(2000),
-    });
-
-    expect(result.agentChanged).toBe(true);
-    expect(result.agent!.status).toBe("error");
-  });
-
-  it("does not change agent when status is not running", () => {
-    const turnCompletedEvent: AgentStreamEventPayload = {
-      type: "turn_completed",
-      provider: "claude",
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: turnCompletedEvent,
-      currentAgent: {
-        status: "idle",
-        updatedAt: new Date(1000),
-        lastActivityAt: new Date(1000),
-      },
-      timestamp: new Date(2000),
-    });
-
-    expect(result.agentChanged).toBe(false);
-    expect(result.agent).toBe(null);
-  });
-
-  it("does not change agent when no agent is provided", () => {
-    const turnCompletedEvent: AgentStreamEventPayload = {
-      type: "turn_completed",
-      provider: "claude",
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: turnCompletedEvent,
-      currentAgent: null,
-      timestamp: new Date(2000),
-    });
-
-    expect(result.agentChanged).toBe(false);
-    expect(result.agent).toBe(null);
-  });
-
-  it("preserves updatedAt when agent timestamp is newer than event", () => {
-    const turnCompletedEvent: AgentStreamEventPayload = {
-      type: "turn_completed",
-      provider: "claude",
-    };
-
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: turnCompletedEvent,
-      currentAgent: {
-        status: "running",
-        updatedAt: new Date(5000),
-        lastActivityAt: new Date(5000),
-      },
-      timestamp: new Date(2000),
-    });
-
-    expect(result.agentChanged).toBe(true);
-    expect(result.agent!.updatedAt.getTime()).toBe(5000);
-    expect(result.agent!.lastActivityAt.getTime()).toBe(5000);
-  });
-
-  it("does not produce agent patch for non-terminal events", () => {
-    const result = processAgentStreamEvent({
-      ...baseStreamInput,
-      event: makeTimelineEvent("just text"),
-      currentAgent: {
-        status: "running",
-        updatedAt: new Date(1000),
-        lastActivityAt: new Date(1000),
-      },
-      seq: 1,
-      epoch: "epoch-1",
-      timestamp: new Date(2000),
-    });
-
-    expect(result.agentChanged).toBe(false);
-    expect(result.agent).toBe(null);
+    expect(result.head).toEqual([]);
+    expect(result.tail).toEqual([]);
   });
 });

packages/app/src/contexts/session-stream-reducers.ts

@@ -1,7 +1,7 @@
 import type { AgentStreamEventPayload } from "@server/shared/messages";
 import type { AgentLifecycleStatus } from "@server/shared/agent-lifecycle";
 import type { StreamItem } from "@/types/stream";
-import { applyStreamEvent, hydrateStreamState, reduceStreamUpdate } from "@/types/stream";
+import { hydrateStreamState, reduceStreamUpdate } from "@/types/stream";
 import {
   classifySessionTimelineSeq,
   type SessionTimelineSeqDecision,
@@ -12,38 +12,25 @@ import {
 } from "@/contexts/session-timeline-bootstrap-policy";
 import { deriveOptimisticLifecycleStatus } from "@/contexts/session-stream-lifecycle";
 
-// ---------------------------------------------------------------------------
-// Shared cursor type
-// ---------------------------------------------------------------------------
-
 export type TimelineCursor = {
-  epoch: string;
   startSeq: number;
   endSeq: number;
 };
 
-// ---------------------------------------------------------------------------
-// Side-effect discriminated unions
-// ---------------------------------------------------------------------------
-
 export type TimelineReducerSideEffect =
-  | { type: "catch_up"; cursor: { epoch: string; endSeq: number } }
+  | { type: "catch_up"; cursor: { endSeq: number } }
   | { type: "flush_pending_updates" };
 
 export type AgentStreamReducerSideEffect = {
   type: "catch_up";
-  cursor: { epoch: string; endSeq: number };
+  cursor: { endSeq: number };
 };
 
-// ---------------------------------------------------------------------------
-// processTimelineResponse
-// ---------------------------------------------------------------------------
-
 type TimelineDirection = "tail" | "before" | "after";
 type InitRequestDirection = "tail" | "after";
 
 type TimelineResponseEntry = {
-  seqStart: number;
+  seq: number;
   provider: string;
   item: Record<string, unknown>;
   timestamp: string;
@@ -53,10 +40,8 @@ export interface ProcessTimelineResponseInput {
   payload: {
     agentId: string;
     direction: TimelineDirection;
-    reset: boolean;
-    epoch: string;
-    startCursor: { seq: number } | null;
-    endCursor: { seq: number } | null;
+    startSeq: number | null;
+    endSeq: number | null;
     entries: TimelineResponseEntry[];
     error: string | null;
   };
@@ -79,205 +64,9 @@ export interface ProcessTimelineResponseOutput {
   sideEffects: TimelineReducerSideEffect[];
 }
 
-export function processTimelineResponse(
-  input: ProcessTimelineResponseInput,
-): ProcessTimelineResponseOutput {
-  const {
-    payload,
-    currentTail,
-    currentHead,
-    currentCursor,
-    isInitializing,
-    hasActiveInitDeferred,
-    initRequestDirection,
-  } = input;
-
-  // ------------------------------------------------------------------
-  // Error path: reject init and leave stream state unchanged
-  // ------------------------------------------------------------------
-  if (payload.error) {
-    return {
-      tail: currentTail,
-      head: currentHead,
-      cursor: currentCursor,
-      cursorChanged: false,
-      initResolution: hasActiveInitDeferred ? "reject" : null,
-      clearInitializing: isInitializing,
-      error: payload.error,
-      sideEffects: [],
-    };
-  }
-
-  // ------------------------------------------------------------------
-  // Convert entries to timeline units
-  // ------------------------------------------------------------------
-  const timelineUnits = payload.entries.map((entry) => ({
-    seq: entry.seqStart,
-    event: {
-      type: "timeline",
-      provider: entry.provider,
-      item: entry.item,
-    } as AgentStreamEventPayload,
-    timestamp: new Date(entry.timestamp),
-  }));
-
-  const toHydratedEvents = (
-    units: typeof timelineUnits,
-  ): Array<{ event: AgentStreamEventPayload; timestamp: Date }> =>
-    units.map(({ event, timestamp }) => ({ event, timestamp }));
-
-  // ------------------------------------------------------------------
-  // Derive bootstrap policy (replace vs incremental)
-  // ------------------------------------------------------------------
-  const bootstrapPolicy = deriveBootstrapTailTimelinePolicy({
-    direction: payload.direction,
-    reset: payload.reset,
-    epoch: payload.epoch,
-    endCursor: payload.endCursor,
-    isInitializing,
-    hasActiveInitDeferred,
-  });
-  const replace = bootstrapPolicy.replace;
-
-  let nextTail = currentTail;
-  let nextHead = currentHead;
-  let nextCursor: TimelineCursor | null | undefined = currentCursor;
-  let cursorChanged = false;
-  const sideEffects: TimelineReducerSideEffect[] = [];
-
-  if (replace) {
-    // ----------------------------------------------------------------
-    // Replace path: full hydration from scratch
-    // ----------------------------------------------------------------
-    nextTail = hydrateStreamState(toHydratedEvents(timelineUnits), {
-      source: "canonical",
-    });
-    nextHead = [];
-
-    if (payload.startCursor && payload.endCursor) {
-      nextCursor = {
-        epoch: payload.epoch,
-        startSeq: payload.startCursor.seq,
-        endSeq: payload.endCursor.seq,
-      };
-      cursorChanged = true;
-    } else {
-      nextCursor = null;
-      cursorChanged = true;
-    }
-
-    if (bootstrapPolicy.catchUpCursor) {
-      sideEffects.push({
-        type: "catch_up",
-        cursor: bootstrapPolicy.catchUpCursor,
-      });
-    }
-  } else if (timelineUnits.length > 0) {
-    // ----------------------------------------------------------------
-    // Incremental append path
-    // ----------------------------------------------------------------
-    const acceptedUnits: typeof timelineUnits = [];
-    let cursor = currentCursor;
-    let gapCursor: { epoch: string; endSeq: number } | null = null;
-
-    for (const unit of timelineUnits) {
-      const decision: SessionTimelineSeqDecision = classifySessionTimelineSeq({
-        cursor: cursor ? { epoch: cursor.epoch, endSeq: cursor.endSeq } : null,
-        epoch: payload.epoch,
-        seq: unit.seq,
-      });
-
-      if (decision === "gap") {
-        gapCursor = cursor ? { epoch: cursor.epoch, endSeq: cursor.endSeq } : null;
-        break;
-      }
-      if (decision === "drop_stale" || decision === "drop_epoch") {
-        continue;
-      }
-
-      acceptedUnits.push(unit);
-      if (decision === "init") {
-        cursor = {
-          epoch: payload.epoch,
-          startSeq: unit.seq,
-          endSeq: unit.seq,
-        };
-        continue;
-      }
-      if (!cursor) {
-        continue;
-      }
-      cursor = {
-        ...cursor,
-        endSeq: unit.seq,
-      };
-    }
-
-    if (acceptedUnits.length > 0) {
-      nextTail = acceptedUnits.reduce<StreamItem[]>(
-        (state, { event, timestamp }) =>
-          reduceStreamUpdate(state, event, timestamp, {
-            source: "canonical",
-          }),
-        currentTail,
-      );
-    }
-
-    if (
-      cursor &&
-      (!currentCursor ||
-        currentCursor.epoch !== cursor.epoch ||
-        currentCursor.startSeq !== cursor.startSeq ||
-        currentCursor.endSeq !== cursor.endSeq)
-    ) {
-      nextCursor = cursor;
-      cursorChanged = true;
-    }
-
-    if (gapCursor) {
-      sideEffects.push({ type: "catch_up", cursor: gapCursor });
-    }
-  }
-
-  // ------------------------------------------------------------------
-  // Flush pending agent updates side effect
-  // ------------------------------------------------------------------
-  sideEffects.push({ type: "flush_pending_updates" });
-
-  // ------------------------------------------------------------------
-  // Init resolution
-  // ------------------------------------------------------------------
-  const shouldResolveDeferredInit = shouldResolveTimelineInit({
-    hasActiveInitDeferred,
-    isInitializing,
-    initRequestDirection,
-    responseDirection: payload.direction,
-    reset: payload.reset,
-  });
-  const clearInitializing = shouldResolveDeferredInit || (isInitializing && !hasActiveInitDeferred);
-
-  const initResolution: "resolve" | "reject" | null = shouldResolveDeferredInit ? "resolve" : null;
-
-  return {
-    tail: nextTail,
-    head: nextHead,
-    cursor: nextCursor,
-    cursorChanged,
-    initResolution,
-    clearInitializing,
-    error: null,
-    sideEffects,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// processAgentStreamEvent
-// ---------------------------------------------------------------------------
-
 export interface ProcessAgentStreamEventInput {
   event: AgentStreamEventPayload;
   seq: number | undefined;
-  epoch: string | undefined;
   currentTail: StreamItem[];
   currentHead: StreamItem[];
   currentCursor: TimelineCursor | undefined;
@@ -307,75 +96,250 @@ export interface ProcessAgentStreamEventOutput {
   sideEffects: AgentStreamReducerSideEffect[];
 }
 
+function cursorsEqual(
+  left: TimelineCursor | null | undefined,
+  right: TimelineCursor | null | undefined,
+): boolean {
+  if (!left || !right) {
+    return left === right;
+  }
+  return left.startSeq === right.startSeq && left.endSeq === right.endSeq;
+}
+
+function removeSupersededProvisionalItems(
+  head: StreamItem[],
+  event: AgentStreamEventPayload,
+): StreamItem[] {
+  if (head.length === 0 || event.type !== "timeline") {
+    return head;
+  }
+
+  let nextHead = head;
+  if (event.item.type === "assistant_message") {
+    nextHead = head.filter((item) => item.kind !== "assistant_message");
+  } else if (event.item.type === "tool_call") {
+    const committedToolCall = event.item;
+    nextHead = head.filter(
+      (item) =>
+        item.kind !== "tool_call" ||
+        item.payload.source !== "agent" ||
+        item.payload.data.callId !== committedToolCall.callId,
+    );
+  }
+
+  return nextHead.length === head.length ? head : nextHead;
+}
+
+export function processTimelineResponse(
+  input: ProcessTimelineResponseInput,
+): ProcessTimelineResponseOutput {
+  const {
+    payload,
+    currentTail,
+    currentHead,
+    currentCursor,
+    isInitializing,
+    hasActiveInitDeferred,
+    initRequestDirection,
+  } = input;
+
+  if (payload.error) {
+    return {
+      tail: currentTail,
+      head: currentHead,
+      cursor: currentCursor,
+      cursorChanged: false,
+      initResolution: hasActiveInitDeferred ? "reject" : null,
+      clearInitializing: isInitializing,
+      error: payload.error,
+      sideEffects: [],
+    };
+  }
+
+  const timelineUnits = payload.entries.map((entry) => ({
+    seq: entry.seq,
+    event: {
+      type: "timeline",
+      provider: entry.provider,
+      item: entry.item,
+    } as AgentStreamEventPayload,
+    timestamp: new Date(entry.timestamp),
+  }));
+
+  const bootstrapPolicy = deriveBootstrapTailTimelinePolicy({
+    direction: payload.direction,
+    endSeq: payload.endSeq,
+    isInitializing,
+    hasActiveInitDeferred,
+  });
+
+  let nextTail = currentTail;
+  let nextHead = currentHead;
+  let nextCursor: TimelineCursor | null | undefined = currentCursor;
+  let cursorChanged = false;
+  const sideEffects: TimelineReducerSideEffect[] = [];
+
+  if (bootstrapPolicy.replace) {
+    nextTail = hydrateStreamState(
+      timelineUnits.map(({ event, timestamp }) => ({ event, timestamp })),
+      { source: "canonical" },
+    );
+    nextHead = [];
+    nextCursor =
+      typeof payload.startSeq === "number" && typeof payload.endSeq === "number"
+        ? {
+            startSeq: payload.startSeq,
+            endSeq: payload.endSeq,
+          }
+        : null;
+    cursorChanged = !cursorsEqual(currentCursor, nextCursor);
+
+    if (bootstrapPolicy.catchUpCursor) {
+      sideEffects.push({
+        type: "catch_up",
+        cursor: bootstrapPolicy.catchUpCursor,
+      });
+    }
+  } else if (payload.direction === "before") {
+    const prepended = hydrateStreamState(
+      timelineUnits.map(({ event, timestamp }) => ({ event, timestamp })),
+      { source: "canonical" },
+    );
+    nextTail = prepended.length > 0 ? [...prepended, ...currentTail] : currentTail;
+    const derivedCursor =
+      typeof payload.startSeq === "number"
+        ? {
+            startSeq: payload.startSeq,
+            endSeq: currentCursor?.endSeq ?? payload.endSeq ?? payload.startSeq,
+          }
+        : currentCursor;
+    nextCursor = derivedCursor;
+    cursorChanged = !cursorsEqual(currentCursor, derivedCursor);
+  } else if (timelineUnits.length > 0) {
+    const acceptedUnits: typeof timelineUnits = [];
+    let cursor = currentCursor;
+    let gapCursor: { endSeq: number } | null = null;
+
+    for (const unit of timelineUnits) {
+      const decision: SessionTimelineSeqDecision = classifySessionTimelineSeq({
+        cursor: cursor ? { endSeq: cursor.endSeq } : null,
+        seq: unit.seq,
+      });
+
+      if (decision === "gap") {
+        gapCursor = cursor ? { endSeq: cursor.endSeq } : null;
+        break;
+      }
+      if (decision === "drop_stale") {
+        continue;
+      }
+
+      acceptedUnits.push(unit);
+      cursor =
+        decision === "init"
+          ? { startSeq: unit.seq, endSeq: unit.seq }
+          : { ...(cursor ?? { startSeq: unit.seq, endSeq: unit.seq }), endSeq: unit.seq };
+      nextHead = removeSupersededProvisionalItems(nextHead, unit.event);
+    }
+
+    if (acceptedUnits.length > 0) {
+      nextTail = acceptedUnits.reduce<StreamItem[]>(
+        (state, { event, timestamp }) =>
+          reduceStreamUpdate(state, event, timestamp, {
+            source: "canonical",
+          }),
+        currentTail,
+      );
+    }
+
+    if (cursor && !cursorsEqual(currentCursor, cursor)) {
+      nextCursor = cursor;
+      cursorChanged = true;
+    }
+
+    if (gapCursor) {
+      sideEffects.push({ type: "catch_up", cursor: gapCursor });
+    }
+  }
+
+  sideEffects.push({ type: "flush_pending_updates" });
+
+  const shouldResolveDeferredInit = shouldResolveTimelineInit({
+    hasActiveInitDeferred,
+    isInitializing,
+    initRequestDirection,
+    responseDirection: payload.direction,
+  });
+  const clearInitializing = shouldResolveDeferredInit || (isInitializing && !hasActiveInitDeferred);
+
+  return {
+    tail: nextTail,
+    head: nextHead,
+    cursor: nextCursor,
+    cursorChanged,
+    initResolution: shouldResolveDeferredInit ? "resolve" : null,
+    clearInitializing,
+    error: null,
+    sideEffects,
+  };
+}
+
 export function processAgentStreamEvent(
   input: ProcessAgentStreamEventInput,
 ): ProcessAgentStreamEventOutput {
-  const { event, seq, epoch, currentTail, currentHead, currentCursor, currentAgent, timestamp } =
-    input;
+  const { event, seq, currentTail, currentHead, currentCursor, currentAgent, timestamp } = input;
 
-  let shouldApplyStreamEvent = true;
+  let nextTail = currentTail;
+  let nextHead = currentHead;
+  let changedTail = false;
+  let changedHead = false;
   let nextTimelineCursor: TimelineCursor | null = null;
   let cursorChanged = false;
   const sideEffects: AgentStreamReducerSideEffect[] = [];
 
-  // ------------------------------------------------------------------
-  // Timeline sequencing gate
-  // ------------------------------------------------------------------
-  if (event.type === "timeline" && typeof seq === "number" && typeof epoch === "string") {
+  if (event.type === "timeline" && typeof seq === "number") {
     const decision = classifySessionTimelineSeq({
-      cursor: currentCursor ? { epoch: currentCursor.epoch, endSeq: currentCursor.endSeq } : null,
-      epoch,
+      cursor: currentCursor ? { endSeq: currentCursor.endSeq } : null,
       seq,
     });
 
-    if (decision === "init") {
-      nextTimelineCursor = { epoch, startSeq: seq, endSeq: seq };
-      cursorChanged = true;
-    } else if (decision === "accept") {
-      nextTimelineCursor = {
-        ...(currentCursor ?? { epoch, startSeq: seq, endSeq: seq }),
-        epoch,
-        endSeq: seq,
-      };
-      cursorChanged = true;
-    } else if (decision === "gap") {
-      shouldApplyStreamEvent = false;
+    if (decision === "gap") {
       if (currentCursor) {
         sideEffects.push({
           type: "catch_up",
-          cursor: {
-            epoch: currentCursor.epoch,
-            endSeq: currentCursor.endSeq,
-          },
+          cursor: { endSeq: currentCursor.endSeq },
         });
       }
-    } else {
-      // drop_stale or drop_epoch
-      shouldApplyStreamEvent = false;
+    } else if (decision !== "drop_stale") {
+      nextTail = reduceStreamUpdate(currentTail, event, timestamp, {
+        source: "canonical",
+      });
+      changedTail = nextTail !== currentTail;
+
+      nextHead = removeSupersededProvisionalItems(currentHead, event);
+      changedHead = nextHead !== currentHead;
+
+      nextTimelineCursor =
+        decision === "init"
+          ? { startSeq: seq, endSeq: seq }
+          : { ...(currentCursor ?? { startSeq: seq, endSeq: seq }), endSeq: seq };
+      cursorChanged = !cursorsEqual(currentCursor, nextTimelineCursor);
     }
+  } else if (event.type === "timeline") {
+    nextHead = reduceStreamUpdate(currentHead, event, timestamp, {
+      source: "live",
+    });
+    changedHead = nextHead !== currentHead;
+  } else if (
+    (event.type === "turn_completed" ||
+      event.type === "turn_canceled" ||
+      event.type === "turn_failed") &&
+    currentHead.length > 0
+  ) {
+    nextHead = [];
+    changedHead = true;
   }
 
-  // ------------------------------------------------------------------
-  // Apply stream event to tail/head
-  // ------------------------------------------------------------------
-  const { tail, head, changedTail, changedHead } = shouldApplyStreamEvent
-    ? applyStreamEvent({
-        tail: currentTail,
-        head: currentHead,
-        event,
-        timestamp,
-        source: "live",
-      })
-    : {
-        tail: currentTail,
-        head: currentHead,
-        changedTail: false,
-        changedHead: false,
-      };
-
-  // ------------------------------------------------------------------
-  // Optimistic lifecycle status
-  // ------------------------------------------------------------------
   let agentPatch: AgentPatch | null = null;
   let agentChanged = false;
 
@@ -402,8 +366,8 @@ export function processAgentStreamEvent(
   }
 
   return {
-    tail,
-    head,
+    tail: nextTail,
+    head: nextHead,
     changedTail,
     changedHead,
     cursor: nextTimelineCursor,

packages/app/src/contexts/session-timeline-bootstrap-policy.test.ts

@@ -2,26 +2,42 @@ import { describe, expect, it } from "vitest";
 import { classifySessionTimelineSeq } from "./session-timeline-seq-gate";
 import {
   deriveBootstrapTailTimelinePolicy,
+  deriveInitialTimelineRequest,
   shouldResolveTimelineInit,
 } from "./session-timeline-bootstrap-policy";
 
-describe("deriveBootstrapTailTimelinePolicy", () => {
-  it("always replaces on explicit reset without catch-up cursor", () => {
-    const policy = deriveBootstrapTailTimelinePolicy({
-      direction: "after",
-      reset: true,
-      epoch: "epoch-1",
-      endCursor: { seq: 200 },
-      isInitializing: false,
-      hasActiveInitDeferred: false,
+describe("deriveInitialTimelineRequest", () => {
+  it("uses tail bootstrap when history has not synced yet", () => {
+    expect(
+      deriveInitialTimelineRequest({
+        cursor: { seq: 42 },
+        hasAuthoritativeHistory: false,
+        initialTimelineLimit: 200,
+      }),
+    ).toEqual({
+      direction: "tail",
+      limit: 200,
     });
-
-    expect(policy.replace).toBe(true);
-    expect(policy.catchUpCursor).toBeNull();
   });
 
+  it("uses catch-up after the committed cursor once history is synced", () => {
+    expect(
+      deriveInitialTimelineRequest({
+        cursor: { seq: 42 },
+        hasAuthoritativeHistory: true,
+        initialTimelineLimit: 200,
+      }),
+    ).toEqual({
+      direction: "after",
+      cursor: { seq: 42 },
+      limit: 0,
+    });
+  });
+});
+
+describe("deriveBootstrapTailTimelinePolicy", () => {
   it("forces baseline replace and canonical catch-up for init tail race", () => {
-    const advancedCursor = { epoch: "epoch-1", endSeq: 205 };
+    const advancedCursor = { endSeq: 205 };
     const tailSeqStart = 101;
     const tailSeqEnd = 200;
 
@@ -29,7 +45,6 @@ describe("deriveBootstrapTailTimelinePolicy", () => {
     for (let seq = tailSeqStart; seq <= tailSeqEnd; seq += 1) {
       const decision = classifySessionTimelineSeq({
         cursor: advancedCursor,
-        epoch: "epoch-1",
         seq,
       });
       if (decision === "accept" || decision === "init") {
@@ -40,16 +55,13 @@ describe("deriveBootstrapTailTimelinePolicy", () => {
 
     const policy = deriveBootstrapTailTimelinePolicy({
       direction: "tail",
-      reset: false,
-      epoch: "epoch-1",
-      endCursor: { seq: 200 },
+      endSeq: 200,
       isInitializing: true,
       hasActiveInitDeferred: true,
     });
 
     expect(policy.replace).toBe(true);
     expect(policy.catchUpCursor).toEqual({
-      epoch: "epoch-1",
       endSeq: 200,
     });
   });
@@ -57,9 +69,7 @@ describe("deriveBootstrapTailTimelinePolicy", () => {
   it("does not replace non-bootstrap, non-reset responses", () => {
     const policy = deriveBootstrapTailTimelinePolicy({
       direction: "tail",
-      reset: false,
-      epoch: "epoch-1",
-      endCursor: { seq: 200 },
+      endSeq: 200,
       isInitializing: false,
       hasActiveInitDeferred: false,
     });
@@ -77,7 +87,6 @@ describe("shouldResolveTimelineInit", () => {
         isInitializing: true,
         initRequestDirection: "tail",
         responseDirection: "tail",
-        reset: false,
       }),
     ).toBe(true);
   });
@@ -89,7 +98,6 @@ describe("shouldResolveTimelineInit", () => {
         isInitializing: true,
         initRequestDirection: "tail",
         responseDirection: "after",
-        reset: false,
       }),
     ).toBe(false);
   });
@@ -101,7 +109,6 @@ describe("shouldResolveTimelineInit", () => {
         isInitializing: true,
         initRequestDirection: "after",
         responseDirection: "after",
-        reset: false,
       }),
     ).toBe(true);
   });

packages/app/src/contexts/session-timeline-bootstrap-policy.ts

@@ -6,7 +6,6 @@ type BootstrapTailCursor = {
 } | null;
 
 type InitialTimelineCursor = {
-  epoch: string;
   seq: number;
 } | null;
 
@@ -20,48 +19,37 @@ export function deriveInitialTimelineRequest({
   initialTimelineLimit: number;
 }): {
   direction: "tail" | "after";
-  cursor?: { epoch: string; seq: number };
+  cursor?: { seq: number };
   limit: number;
-  projection: "canonical";
 } {
   if (!hasAuthoritativeHistory || !cursor) {
     return {
       direction: "tail",
       limit: initialTimelineLimit,
-      projection: "canonical",
     };
   }
 
   return {
     direction: "after",
-    cursor: { epoch: cursor.epoch, seq: cursor.seq },
+    cursor: { seq: cursor.seq },
     limit: 0,
-    projection: "canonical",
   };
 }
 
 export function deriveBootstrapTailTimelinePolicy({
   direction,
-  reset,
-  epoch,
-  endCursor,
+  endSeq,
   isInitializing,
   hasActiveInitDeferred,
 }: {
   direction: TimelineDirection;
-  reset: boolean;
-  epoch: string;
-  endCursor: BootstrapTailCursor;
+  endSeq: number | null;
   isInitializing: boolean;
   hasActiveInitDeferred: boolean;
 }): {
   replace: boolean;
-  catchUpCursor: { epoch: string; endSeq: number } | null;
+  catchUpCursor: { endSeq: number } | null;
 } {
-  if (reset) {
-    return { replace: true, catchUpCursor: null };
-  }
-
   const isBootstrapTailInit = direction === "tail" && isInitializing && hasActiveInitDeferred;
   if (!isBootstrapTailInit) {
     return { replace: false, catchUpCursor: null };
@@ -69,7 +57,7 @@ export function deriveBootstrapTailTimelinePolicy({
 
   return {
     replace: true,
-    catchUpCursor: endCursor ? { epoch, endSeq: endCursor.seq } : null,
+    catchUpCursor: typeof endSeq === "number" ? { endSeq } : null,
   };
 }
 
@@ -78,19 +66,14 @@ export function shouldResolveTimelineInit({
   isInitializing,
   initRequestDirection,
   responseDirection,
-  reset,
 }: {
   hasActiveInitDeferred: boolean;
   isInitializing: boolean;
   initRequestDirection: InitRequestDirection;
   responseDirection: TimelineDirection;
-  reset: boolean;
 }): boolean {
   if (!hasActiveInitDeferred || !isInitializing) {
     return false;
   }
-  if (reset) {
-    return true;
-  }
   return responseDirection === initRequestDirection;
 }

packages/app/src/contexts/session-timeline-seq-gate.test.ts

@@ -5,8 +5,7 @@ describe("classifySessionTimelineSeq", () => {
   it("accepts contiguous forward seq", () => {
     expect(
       classifySessionTimelineSeq({
-        cursor: { epoch: "epoch-1", endSeq: 4 },
-        epoch: "epoch-1",
+        cursor: { endSeq: 4 },
         seq: 5,
       }),
     ).toBe("accept");
@@ -15,8 +14,7 @@ describe("classifySessionTimelineSeq", () => {
   it("drops stale seq older than the current end", () => {
     expect(
       classifySessionTimelineSeq({
-        cursor: { epoch: "epoch-1", endSeq: 8 },
-        epoch: "epoch-1",
+        cursor: { endSeq: 8 },
         seq: 7,
       }),
     ).toBe("drop_stale");
@@ -25,28 +23,16 @@ describe("classifySessionTimelineSeq", () => {
   it("drops duplicate replay seq equal to the current end", () => {
     expect(
       classifySessionTimelineSeq({
-        cursor: { epoch: "epoch-1", endSeq: 8 },
-        epoch: "epoch-1",
+        cursor: { endSeq: 8 },
         seq: 8,
       }),
     ).toBe("drop_stale");
   });
 
-  it("drops epoch mismatch", () => {
-    expect(
-      classifySessionTimelineSeq({
-        cursor: { epoch: "epoch-1", endSeq: 4 },
-        epoch: "epoch-2",
-        seq: 5,
-      }),
-    ).toBe("drop_epoch");
-  });
-
   it("initializes when cursor is null", () => {
     expect(
       classifySessionTimelineSeq({
         cursor: null,
-        epoch: "epoch-1",
         seq: 1,
       }),
     ).toBe("init");
@@ -55,8 +41,7 @@ describe("classifySessionTimelineSeq", () => {
   it("classifies forward gaps", () => {
     expect(
       classifySessionTimelineSeq({
-        cursor: { epoch: "epoch-1", endSeq: 4 },
-        epoch: "epoch-1",
+        cursor: { endSeq: 4 },
         seq: 9,
       }),
     ).toBe("gap");

packages/app/src/contexts/session-timeline-seq-gate.ts

@@ -1,28 +1,22 @@
 export type SessionTimelineSeqCursor =
   | {
-      epoch: string;
       endSeq: number;
     }
   | null
   | undefined;
 
-export type SessionTimelineSeqDecision = "accept" | "drop_stale" | "drop_epoch" | "gap" | "init";
+export type SessionTimelineSeqDecision = "accept" | "drop_stale" | "gap" | "init";
 
 export function classifySessionTimelineSeq({
   cursor,
-  epoch,
   seq,
 }: {
   cursor: SessionTimelineSeqCursor;
-  epoch: string;
   seq: number;
 }): SessionTimelineSeqDecision {
   if (!cursor) {
     return "init";
   }
-  if (cursor.epoch !== epoch) {
-    return "drop_epoch";
-  }
   if (seq <= cursor.endSeq) {
     return "drop_stale";
   }

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

@@ -12,6 +12,10 @@ import { useSharedValue, withTiming, Easing, type SharedValue } from "react-nati
 import { type GestureType } from "react-native-gesture-handler";
 import { UnistylesRuntime } from "react-native-unistyles";
 import { usePanelStore } from "@/stores/panel-store";
+import {
+  getLeftSidebarAnimationTargets,
+  shouldSyncSidebarAnimation,
+} from "@/utils/sidebar-animation-state";
 
 const ANIMATION_DURATION = 220;
 const ANIMATION_EASING = Easing.bezier(0.25, 0.1, 0.25, 1);
@@ -38,46 +42,53 @@ export function SidebarAnimationProvider({ children }: { children: ReactNode })
   const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
 
   // Initialize based on current state
-  const translateX = useSharedValue(isOpen ? 0 : -windowWidth);
-  const backdropOpacity = useSharedValue(isOpen ? 1 : 0);
+  const initialTargets = getLeftSidebarAnimationTargets({ isOpen, windowWidth });
+  const translateX = useSharedValue(initialTargets.translateX);
+  const backdropOpacity = useSharedValue(initialTargets.backdropOpacity);
   const isGesturing = useSharedValue(false);
   const closeGestureRef = useRef<GestureType | undefined>(undefined);
 
   // Track previous isOpen to detect changes
   const prevIsOpen = useRef(isOpen);
+  const prevWindowWidth = useRef(windowWidth);
 
   // Sync animation with store state changes (e.g., backdrop tap, programmatic open/close)
   useEffect(() => {
-    // Skip if this is initial render or if we're mid-gesture
-    if (prevIsOpen.current === isOpen) {
+    const didStateChange = shouldSyncSidebarAnimation({
+      previousIsOpen: prevIsOpen.current,
+      nextIsOpen: isOpen,
+      previousWindowWidth: prevWindowWidth.current,
+      nextWindowWidth: windowWidth,
+    });
+    const previousIsOpen = prevIsOpen.current;
+    prevIsOpen.current = isOpen;
+    prevWindowWidth.current = windowWidth;
+
+    if (!didStateChange) {
       return;
     }
-    prevIsOpen.current = isOpen;
 
     // Don't animate if we're in the middle of a gesture - the gesture handler will handle it
     if (isGesturing.value) {
       return;
     }
 
-    if (isOpen) {
-      translateX.value = withTiming(0, {
+    const targets = getLeftSidebarAnimationTargets({ isOpen, windowWidth });
+
+    if (previousIsOpen !== isOpen) {
+      translateX.value = withTiming(targets.translateX, {
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
       });
-      backdropOpacity.value = withTiming(1, {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      });
-    } else {
-      translateX.value = withTiming(-windowWidth, {
-        duration: ANIMATION_DURATION,
-        easing: ANIMATION_EASING,
-      });
-      backdropOpacity.value = withTiming(0, {
+      backdropOpacity.value = withTiming(targets.backdropOpacity, {
         duration: ANIMATION_DURATION,
         easing: ANIMATION_EASING,
       });
+      return;
     }
+
+    translateX.value = targets.translateX;
+    backdropOpacity.value = targets.backdropOpacity;
   }, [isOpen, translateX, backdropOpacity, windowWidth, isGesturing]);
 
   const animateToOpen = useCallback(() => {

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

@@ -6,7 +6,7 @@ export type DesktopDaemonState = "starting" | "running" | "stopped" | "errored";
 export type DesktopDaemonStatus = {
   serverId: string;
   status: DesktopDaemonState;
-  listen: string;
+  listen: string | null;
   hostname: string | null;
   pid: number | null;
   home: string;
@@ -82,7 +82,7 @@ function parseDesktopDaemonStatus(raw: unknown): DesktopDaemonStatus {
   return {
     serverId: toStringOrNull(raw.serverId) ?? "",
     status: parseDesktopDaemonState(raw.status),
-    listen: toStringOrNull(raw.listen) ?? "",
+    listen: toStringOrNull(raw.listen),
     hostname: toStringOrNull(raw.hostname),
     pid: toNumberOrNull(raw.pid),
     home: toStringOrNull(raw.home) ?? "",

packages/app/src/desktop/electron/window.ts

@@ -27,3 +27,12 @@ export async function isDesktopFullscreen(): Promise<boolean> {
   }
   return await win.isFullscreen();
 }
+
+export async function setDesktopTitleBarTheme(theme: "light" | "dark"): Promise<void> {
+  const win = getDesktopWindow();
+  if (!win || typeof win.setTitleBarTheme !== "function") {
+    return;
+  }
+
+  await win.setTitleBarTheme(theme);
+}

packages/app/src/desktop/host.ts

@@ -37,6 +37,13 @@ export interface DesktopOpenerBridge {
   openUrl?: (url: string) => Promise<void>;
 }
 
+export interface DesktopMenuBridge {
+  showContextMenu?: (input?: {
+    kind?: "terminal";
+    hasSelection?: boolean;
+  }) => Promise<void>;
+}
+
 export interface DesktopWindowBridge {
   label?: string;
   startMove?: (screenX: number, screenY: number) => void;
@@ -44,6 +51,7 @@ export interface DesktopWindowBridge {
   endMove?: () => void;
   toggleMaximize?: () => Promise<void>;
   isFullscreen?: () => Promise<boolean>;
+  setTitleBarTheme?: (theme: "light" | "dark") => Promise<void>;
   onResized?: <TEvent = unknown>(
     handler: (event: TEvent) => void,
   ) => Promise<() => void> | (() => void);
@@ -73,6 +81,7 @@ export interface DesktopHostBridge {
   dialog?: DesktopDialogBridge;
   notification?: DesktopNotificationBridge;
   opener?: DesktopOpenerBridge;
+  menu?: DesktopMenuBridge;
 }
 
 declare global {

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

@@ -10,8 +10,15 @@ const CHANGELOG_URL = "https://paseo.sh/changelog";
 
 export function UpdateBanner() {
   const { theme } = useUnistyles();
-  const { isDesktop, status, availableUpdate, checkForUpdates, installUpdate, isInstalling } =
-    useDesktopAppUpdater();
+  const {
+    isDesktop,
+    status,
+    availableUpdate,
+    errorMessage,
+    checkForUpdates,
+    installUpdate,
+    isInstalling,
+  } = useDesktopAppUpdater();
   const [dismissed, setDismissed] = useState(false);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -33,24 +40,36 @@ export function UpdateBanner() {
 
   if (!isDesktop) return null;
   if (dismissed) return null;
-  if (status !== "available" && status !== "installed") return null;
+  if (status !== "available" && status !== "installed" && status !== "installing" && status !== "error")
+    return null;
 
   const isInstalled = status === "installed";
+  const isError = status === "error";
+
+  function getTitle(): string {
+    if (isInstalled) return "Update installed";
+    if (isInstalling) return "Installing update";
+    if (isError) return "Update failed";
+    return "Update available";
+  }
+
+  function getSubtitle(): string {
+    if (isInstalled) return "Restart to use the new version.";
+    if (isInstalling) return "Downloading and installing...";
+    if (isError) return errorMessage ?? "Something went wrong.";
+    return `${availableUpdate?.latestVersion ? `v${availableUpdate.latestVersion.replace(/^v/i, "")} is ready` : "A new version is ready"} to install.`;
+  }
 
   return (
     <View style={styles.container} pointerEvents="box-none">
-      <View style={styles.banner}>
-        <Pressable onPress={() => setDismissed(true)} hitSlop={8} style={styles.closeButton}>
-          <X size={14} color={theme.colors.foregroundMuted} />
-        </Pressable>
+      <Pressable onPress={() => setDismissed(true)} hitSlop={8} style={styles.closeButton}>
+        <X size={12} color={theme.colors.foregroundMuted} />
+      </Pressable>
 
+      <View style={styles.banner}>
         <View style={styles.textSection}>
-          <Text style={styles.title}>{isInstalled ? "Update installed" : "Update available"}</Text>
-          <Text style={styles.subtitle}>
-            {isInstalled
-              ? "Restart to use the new version."
-              : `${availableUpdate?.latestVersion ? `v${availableUpdate.latestVersion.replace(/^v/i, "")} is ready` : "A new version is ready"} to install.`}
-          </Text>
+          <Text style={styles.title}>{getTitle()}</Text>
+          <Text style={styles.subtitle}>{getSubtitle()}</Text>
         </View>
 
         <View style={styles.actions}>
@@ -61,7 +80,7 @@ export function UpdateBanner() {
             <Text style={styles.outlineButtonText}>What's new</Text>
           </Pressable>
 
-          {!isInstalled && (
+          {!isInstalled && !isError && (
             <Pressable
               onPress={() => void installUpdate()}
               disabled={isInstalling}
@@ -76,6 +95,15 @@ export function UpdateBanner() {
               </Text>
             </Pressable>
           )}
+
+          {isError && (
+            <Pressable
+              onPress={() => void checkForUpdates()}
+              style={({ pressed }) => [styles.primaryButton, pressed && styles.buttonPressed]}
+            >
+              <Text style={styles.primaryButtonText}>Retry</Text>
+            </Pressable>
+          )}
         </View>
       </View>
     </View>
@@ -109,15 +137,21 @@ const styles = StyleSheet.create((theme) => ({
   },
   closeButton: {
     position: "absolute",
-    top: theme.spacing[2],
-    left: theme.spacing[2],
-    padding: theme.spacing[1],
+    top: -8,
+    left: -8,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: theme.colors.surface2,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    alignItems: "center",
+    justifyContent: "center",
     zIndex: 1,
   },
   textSection: {
     flex: 1,
     gap: 2,
-    paddingTop: theme.spacing[1],
   },
   title: {
     color: theme.colors.foreground,

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

@@ -13,6 +13,7 @@ import { useHosts } from "@/runtime/host-runtime";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import {
   useFormPreferences,
+  mergeProviderPreferences,
   type FormPreferences,
   type ProviderPreferences,
 } from "./use-form-preferences";
@@ -65,7 +66,7 @@ type UseAgentFormStateOptions = {
   onlineServerIds?: string[];
 };
 
-type UseAgentFormStateResult = {
+export type UseAgentFormStateResult = {
   selectedServerId: string | null;
   setSelectedServerId: (value: string | null) => void;
   setSelectedServerIdFromUser: (value: string | null) => void;
@@ -693,26 +694,23 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
   const persistFormPreferences = useCallback(async () => {
     const resolvedModel = resolveEffectiveModel(availableModels, formState.model);
     const modelId = resolvedModel?.id ?? formState.model;
-    const existingProviderPrefs = preferences?.providerPreferences?.[formState.provider];
-
-    const nextProviderPrefs: ProviderPreferences = {
-      model: modelId || undefined,
-      mode: formState.modeId || undefined,
-      thinkingByModel: {
-        ...existingProviderPrefs?.thinkingByModel,
-        ...(modelId && formState.thinkingOptionId
-          ? { [modelId]: formState.thinkingOptionId }
-          : {}),
-      },
-    };
-
-    await updatePreferences({
+    const nextPreferences = mergeProviderPreferences({
+      preferences: preferences ?? {},
       provider: formState.provider,
-      providerPreferences: {
-        ...preferences?.providerPreferences,
-        [formState.provider]: nextProviderPrefs,
-      },
+      updates: {
+        model: modelId || undefined,
+        mode: formState.modeId || undefined,
+        ...(modelId && formState.thinkingOptionId
+          ? {
+              thinkingByModel: {
+                [modelId]: formState.thinkingOptionId,
+              },
+            }
+          : {}),
+      } satisfies Partial<ProviderPreferences>,
     });
+
+    await updatePreferences(nextPreferences);
   }, [
     availableModels,
     formState.model,

packages/app/src/hooks/use-agent-initialization.test.ts

@@ -2,11 +2,10 @@ import { describe, expect, it } from "vitest";
 import { __private__ } from "./use-agent-initialization";
 
 describe("useAgentInitialization timeline request policy", () => {
-  it("uses canonical tail bootstrap when history has not synced yet", () => {
+  it("uses committed tail bootstrap when history has not synced yet", () => {
     expect(
       __private__.deriveInitialTimelineRequest({
         cursor: {
-          epoch: "epoch-1",
           seq: 42,
         },
         hasAuthoritativeHistory: false,
@@ -15,11 +14,10 @@ describe("useAgentInitialization timeline request policy", () => {
     ).toEqual({
       direction: "tail",
       limit: 200,
-      projection: "canonical",
     });
   });
 
-  it("uses canonical tail bootstrap when cursor is missing", () => {
+  it("uses committed tail bootstrap when cursor is missing", () => {
     expect(
       __private__.deriveInitialTimelineRequest({
         cursor: null,
@@ -29,15 +27,13 @@ describe("useAgentInitialization timeline request policy", () => {
     ).toEqual({
       direction: "tail",
       limit: 200,
-      projection: "canonical",
     });
   });
 
-  it("uses canonical catch-up after the current cursor once history is synced", () => {
+  it("uses committed catch-up after the current cursor once history is synced", () => {
     expect(
       __private__.deriveInitialTimelineRequest({
         cursor: {
-          epoch: "epoch-1",
           seq: 42,
         },
         hasAuthoritativeHistory: true,
@@ -45,9 +41,8 @@ describe("useAgentInitialization timeline request policy", () => {
       }),
     ).toEqual({
       direction: "after",
-      cursor: { epoch: "epoch-1", seq: 42 },
+      cursor: { seq: 42 },
       limit: 0,
-      projection: "canonical",
     });
   });
 
@@ -61,7 +56,6 @@ describe("useAgentInitialization timeline request policy", () => {
     ).toEqual({
       direction: "tail",
       limit: 0,
-      projection: "canonical",
     });
   });
 

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

@@ -60,7 +60,7 @@ export function useAgentInitialization({
       const hasAuthoritativeHistory =
         session?.agentAuthoritativeHistoryApplied.get(agentId) === true;
       const timelineRequest = deriveInitialTimelineRequest({
-        cursor: cursor ? { epoch: cursor.epoch, seq: cursor.endSeq } : null,
+        cursor: cursor ? { seq: cursor.endSeq } : null,
         hasAuthoritativeHistory,
         initialTimelineLimit,
       });
@@ -107,7 +107,6 @@ export function useAgentInitialization({
         await client.fetchAgentTimeline(agentId, {
           direction: "tail",
           limit: initialTimelineLimit,
-          projection: "canonical",
         });
       } catch (error) {
         setAgentInitializing(agentId, false);

packages/app/src/hooks/use-agent-input-draft.live.test.tsx

@@ -0,0 +1,270 @@
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { JSDOM } from "jsdom";
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDraftStore } from "@/stores/draft-store";
+import type { AttachmentMetadata } from "@/attachments/types";
+
+const { asyncStorage } = vi.hoisted(() => ({
+  asyncStorage: new Map<string, string>(),
+}));
+
+vi.mock("@react-native-async-storage/async-storage", () => ({
+  default: {
+    getItem: async (key: string) => asyncStorage.get(key) ?? null,
+    setItem: async (key: string, value: string) => {
+      asyncStorage.set(key, value);
+    },
+    removeItem: async (key: string) => {
+      asyncStorage.delete(key);
+    },
+  },
+}));
+
+vi.mock("@/attachments/service", () => ({
+  garbageCollectAttachments: async () => undefined,
+}));
+
+vi.mock("./use-agent-form-state", () => ({
+  useAgentFormState: () => ({
+    selectedServerId: "host-1",
+    setSelectedServerId: () => undefined,
+    setSelectedServerIdFromUser: () => undefined,
+    selectedProvider: "codex",
+    setProviderFromUser: () => undefined,
+    selectedMode: "auto",
+    setModeFromUser: () => undefined,
+    selectedModel: "",
+    setModelFromUser: () => undefined,
+    selectedThinkingOptionId: "",
+    setThinkingOptionFromUser: () => undefined,
+    workingDir: "/repo",
+    setWorkingDir: () => undefined,
+    setWorkingDirFromUser: () => undefined,
+    providerDefinitions: [{ id: "codex", label: "Codex", modes: [{ id: "auto", label: "Auto" }] }],
+    providerDefinitionMap: new Map(),
+    agentDefinition: undefined,
+    modeOptions: [{ id: "auto", label: "Auto" }],
+    availableModels: [
+      {
+        provider: "codex",
+        id: "gpt-5.4",
+        label: "gpt-5.4",
+        isDefault: true,
+        defaultThinkingOptionId: "high",
+        thinkingOptions: [
+          { id: "medium", label: "Medium" },
+          { id: "high", label: "High", isDefault: true },
+        ],
+      },
+    ],
+    allProviderModels: new Map([
+      [
+        "codex",
+        [
+          {
+            provider: "codex",
+            id: "gpt-5.4",
+            label: "gpt-5.4",
+            isDefault: true,
+            defaultThinkingOptionId: "high",
+            thinkingOptions: [
+              { id: "medium", label: "Medium" },
+              { id: "high", label: "High", isDefault: true },
+            ],
+          },
+        ],
+      ],
+    ]),
+    isAllModelsLoading: false,
+    availableThinkingOptions: [
+      { id: "medium", label: "Medium" },
+      { id: "high", label: "High", isDefault: true },
+    ],
+    isModelLoading: false,
+    modelError: null,
+    refreshProviderModels: () => undefined,
+    setProviderAndModelFromUser: () => undefined,
+    workingDirIsEmpty: false,
+    persistFormPreferences: async () => undefined,
+  }),
+}));
+
+let useAgentInputDraft: typeof import("./use-agent-input-draft").useAgentInputDraft;
+
+beforeAll(async () => {
+  const storage = new Map<string, string>();
+
+  Object.defineProperty(globalThis, "window", {
+    value: {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => {
+          storage.set(key, value);
+        },
+        removeItem: (key: string) => {
+          storage.delete(key);
+        },
+      },
+    },
+    configurable: true,
+  });
+  Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+    value: true,
+    configurable: true,
+  });
+
+  ({ useAgentInputDraft } = await import("./use-agent-input-draft"));
+});
+
+describe("useAgentInputDraft live contract", () => {
+  beforeEach(() => {
+    asyncStorage.clear();
+    const dom = new JSDOM("<!doctype html><html><body><div id='root'></div></body></html>", {
+      url: "http://localhost",
+    });
+
+    Object.defineProperty(globalThis, "document", {
+      value: dom.window.document,
+      configurable: true,
+    });
+    Object.defineProperty(globalThis, "navigator", {
+      value: dom.window.navigator,
+      configurable: true,
+    });
+
+    useDraftStore.setState({ drafts: {}, createModalDraft: null });
+  });
+
+  it("hydrates persisted text and images and returns draft-mode composer state for a caller-provided key", async () => {
+    let latest: ReturnType<typeof useAgentInputDraft> | null = null;
+    const image: AttachmentMetadata = {
+      id: "attachment-1",
+      mimeType: "image/png",
+      storageType: "web-indexeddb",
+      storageKey: "attachments/1",
+      createdAt: 1,
+      fileName: "image.png",
+      byteSize: 128,
+    };
+
+    function getLatest(): ReturnType<typeof useAgentInputDraft> {
+      if (!latest) {
+        throw new Error("Expected hook result");
+      }
+      return latest;
+    }
+
+    function Probe({ draftKey }: { draftKey: string }) {
+      latest = useAgentInputDraft({
+        draftKey,
+        composer: {
+          initialServerId: "host-1",
+          initialValues: { workingDir: "/repo" },
+          isVisible: true,
+          onlineServerIds: ["host-1"],
+          lockedWorkingDir: "/repo",
+        },
+      });
+      return null;
+    }
+
+    const container = document.getElementById("root");
+    if (!container) {
+      throw new Error("Missing root container");
+    }
+
+    let root: Root | null = createRoot(container);
+    await act(async () => {
+      root!.render(<Probe draftKey="draft:setup" />);
+    });
+
+    expect(getLatest().composerState?.statusControls.selectedProvider).toBe("codex");
+    expect(getLatest().composerState?.commandDraftConfig).toEqual({
+      provider: "codex",
+      cwd: "/repo",
+      modeId: "auto",
+      model: "gpt-5.4",
+      thinkingOptionId: "high",
+    });
+
+    await act(async () => {
+      getLatest().setText("hello world");
+      getLatest().setImages([image]);
+    });
+
+    await act(async () => {
+      root!.unmount();
+    });
+
+    root = createRoot(container);
+    await act(async () => {
+      root.render(<Probe draftKey="draft:setup" />);
+    });
+
+    expect(getLatest().text).toBe("hello world");
+    expect(getLatest().images).toEqual([image]);
+  });
+
+  it("clears drafts with sent and abandoned lifecycle tombstones", async () => {
+    let latest: ReturnType<typeof useAgentInputDraft> | null = null;
+    const sentImage: AttachmentMetadata = {
+      id: "attachment-sent",
+      mimeType: "image/png",
+      storageType: "web-indexeddb",
+      storageKey: "attachments/sent",
+      createdAt: 2,
+    };
+
+    function getLatest(): ReturnType<typeof useAgentInputDraft> {
+      if (!latest) {
+        throw new Error("Expected hook result");
+      }
+      return latest;
+    }
+
+    function Probe() {
+      latest = useAgentInputDraft({ draftKey: "draft:lifecycle" });
+      return null;
+    }
+
+    const container = document.getElementById("root");
+    if (!container) {
+      throw new Error("Missing root container");
+    }
+
+    const root = createRoot(container);
+    await act(async () => {
+      root.render(<Probe />);
+    });
+
+    await act(async () => {
+      getLatest().setText("queued message");
+      getLatest().setImages([sentImage]);
+    });
+
+    await act(async () => {
+      getLatest().clear("sent");
+    });
+
+    expect(getLatest().text).toBe("");
+    expect(getLatest().images).toEqual([]);
+    expect(useDraftStore.getState().drafts["draft:lifecycle"]).toMatchObject({
+      lifecycle: "sent",
+      input: { text: "", images: [] },
+    });
+
+    await act(async () => {
+      getLatest().setText("draft again");
+    });
+
+    await act(async () => {
+      getLatest().clear("abandoned");
+    });
+
+    expect(useDraftStore.getState().drafts["draft:lifecycle"]).toMatchObject({
+      lifecycle: "abandoned",
+      input: { text: "", images: [] },
+    });
+  });
+});

packages/app/src/hooks/use-agent-input-draft.test.ts

@@ -0,0 +1,149 @@
+import { beforeAll, describe, expect, it } from "vitest";
+
+let __private__: typeof import("./use-agent-input-draft").__private__;
+
+beforeAll(async () => {
+  const storage = new Map<string, string>();
+  Object.defineProperty(globalThis, "window", {
+    value: {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => {
+          storage.set(key, value);
+        },
+        removeItem: (key: string) => {
+          storage.delete(key);
+        },
+      },
+    },
+    configurable: true,
+  });
+
+  ({ __private__ } = await import("./use-agent-input-draft"));
+});
+
+describe("useAgentInputDraft", () => {
+  describe("__private__.resolveDraftKey", () => {
+    it("returns an object draft key string unchanged", () => {
+      expect(
+        __private__.resolveDraftKey({
+          draftKey: "draft:key",
+          selectedServerId: "host-1",
+        }),
+      ).toBe("draft:key");
+    });
+
+    it("resolves a computed draft key from the selected server", () => {
+      expect(
+        __private__.resolveDraftKey({
+          draftKey: ({ selectedServerId }) => `draft:${selectedServerId ?? "none"}`,
+          selectedServerId: "host-1",
+        }),
+      ).toBe("draft:host-1");
+    });
+  });
+
+  describe("__private__.resolveEffectiveComposerModelId", () => {
+    const models = [
+      {
+        provider: "codex",
+        id: "gpt-5.4",
+        label: "gpt-5.4",
+        isDefault: true,
+      },
+      {
+        provider: "codex",
+        id: "gpt-5.4-mini",
+        label: "gpt-5.4-mini",
+      },
+    ];
+
+    it("prefers the selected model when present", () => {
+      expect(
+        __private__.resolveEffectiveComposerModelId({
+          selectedModel: "gpt-5.4-mini",
+          availableModels: models,
+        }),
+      ).toBe("gpt-5.4-mini");
+    });
+
+    it("falls back to the provider default model", () => {
+      expect(
+        __private__.resolveEffectiveComposerModelId({
+          selectedModel: "",
+          availableModels: models,
+        }),
+      ).toBe("gpt-5.4");
+    });
+  });
+
+  describe("__private__.resolveEffectiveComposerThinkingOptionId", () => {
+    const models = [
+      {
+        provider: "codex",
+        id: "gpt-5.4",
+        label: "gpt-5.4",
+        isDefault: true,
+        defaultThinkingOptionId: "high",
+        thinkingOptions: [
+          { id: "medium", label: "Medium" },
+          { id: "high", label: "High", isDefault: true },
+        ],
+      },
+    ];
+
+    it("prefers the selected thinking option when present", () => {
+      expect(
+        __private__.resolveEffectiveComposerThinkingOptionId({
+          selectedThinkingOptionId: "medium",
+          availableModels: models,
+          effectiveModelId: "gpt-5.4",
+        }),
+      ).toBe("medium");
+    });
+
+    it("falls back to the model default thinking option", () => {
+      expect(
+        __private__.resolveEffectiveComposerThinkingOptionId({
+          selectedThinkingOptionId: "",
+          availableModels: models,
+          effectiveModelId: "gpt-5.4",
+        }),
+      ).toBe("high");
+    });
+  });
+
+  describe("__private__.buildDraftComposerCommandConfig", () => {
+    it("returns undefined when cwd is empty", () => {
+      expect(
+        __private__.buildDraftComposerCommandConfig({
+          provider: "codex",
+          cwd: "  ",
+          modeOptions: [],
+          selectedMode: "",
+          effectiveModelId: "gpt-5.4",
+          effectiveThinkingOptionId: "high",
+        }),
+      ).toBeUndefined();
+    });
+
+    it("builds the draft command config from derived composer state", () => {
+      expect(
+        __private__.buildDraftComposerCommandConfig({
+          provider: "codex",
+          cwd: "/repo",
+          modeOptions: [{ id: "auto", label: "Auto" }],
+          selectedMode: "auto",
+          effectiveModelId: "gpt-5.4",
+          effectiveThinkingOptionId: "high",
+        }),
+      ).toEqual({
+        provider: "codex",
+        cwd: "/repo",
+        modeId: "auto",
+        model: "gpt-5.4",
+        thinkingOptionId: "high",
+      });
+    });
+  });
+});

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

@@ -1,9 +1,44 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { AttachmentMetadata } from "@/attachments/types";
+import type { DraftAgentStatusBarProps } from "@/components/agent-status-bar";
+import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
+import {
+  useAgentFormState,
+  type CreateAgentInitialValues,
+  type UseAgentFormStateResult,
+} from "@/hooks/use-agent-form-state";
 import { useDraftStore } from "@/stores/draft-store";
+import type { AgentModelDefinition } from "@server/server/agent/agent-sdk-types";
 
 type ImageUpdater = AttachmentMetadata[] | ((prev: AttachmentMetadata[]) => AttachmentMetadata[]);
 
+type AgentInputDraftComposerOptions = {
+  initialServerId: string | null;
+  initialValues?: CreateAgentInitialValues;
+  isVisible?: boolean;
+  onlineServerIds?: string[];
+  lockedWorkingDir?: string;
+};
+
+type DraftKeyContext = {
+  selectedServerId: string | null;
+};
+
+type DraftKeyInput = string | ((context: DraftKeyContext) => string);
+
+type UseAgentInputDraftInput = {
+  draftKey: DraftKeyInput;
+  composer?: AgentInputDraftComposerOptions;
+};
+
+type DraftComposerState = UseAgentFormStateResult & {
+  workingDir: string;
+  effectiveModelId: string;
+  effectiveThinkingOptionId: string;
+  statusControls: DraftAgentStatusBarProps;
+  commandDraftConfig: DraftCommandConfig | undefined;
+};
+
 interface AgentInputDraft {
   text: string;
   setText: (text: string) => void;
@@ -11,6 +46,7 @@ interface AgentInputDraft {
   setImages: (updater: ImageUpdater) => void;
   clear: (lifecycle: "sent" | "abandoned") => void;
   isHydrated: boolean;
+  composerState: DraftComposerState | null;
 }
 
 function hasDraftContent(input: { text: string; images: AttachmentMetadata[] }): boolean {
@@ -36,7 +72,108 @@ function areImagesEqual(input: {
   });
 }
 
-export function useAgentInputDraft(draftKey: string): AgentInputDraft {
+function resolveDraftKey(input: {
+  draftKey: DraftKeyInput;
+  selectedServerId: string | null;
+}): string {
+  if (typeof input.draftKey === "function") {
+    return input.draftKey({ selectedServerId: input.selectedServerId });
+  }
+  return input.draftKey;
+}
+
+function resolveEffectiveComposerModelId(input: {
+  selectedModel: string;
+  availableModels: AgentModelDefinition[];
+}): string {
+  const selectedModel = input.selectedModel.trim();
+  if (selectedModel) {
+    return selectedModel;
+  }
+
+  return input.availableModels.find((model) => model.isDefault)?.id ?? input.availableModels[0]?.id ?? "";
+}
+
+function resolveEffectiveComposerThinkingOptionId(input: {
+  selectedThinkingOptionId: string;
+  availableModels: AgentModelDefinition[];
+  effectiveModelId: string;
+}): string {
+  const selectedThinkingOptionId = input.selectedThinkingOptionId.trim();
+  if (selectedThinkingOptionId) {
+    return selectedThinkingOptionId;
+  }
+
+  const selectedModelDefinition =
+    input.availableModels.find((model) => model.id === input.effectiveModelId) ?? null;
+  return selectedModelDefinition?.defaultThinkingOptionId ?? "";
+}
+
+function buildDraftComposerCommandConfig(input: {
+  provider: DraftAgentStatusBarProps["selectedProvider"];
+  cwd: string;
+  modeOptions: DraftAgentStatusBarProps["modeOptions"];
+  selectedMode: string;
+  effectiveModelId: string;
+  effectiveThinkingOptionId: string;
+}): DraftCommandConfig | undefined {
+  const cwd = input.cwd.trim();
+  if (!cwd) {
+    return undefined;
+  }
+
+  return {
+    provider: input.provider,
+    cwd,
+    ...(input.modeOptions.length > 0 && input.selectedMode !== "" ? { modeId: input.selectedMode } : {}),
+    ...(input.effectiveModelId ? { model: input.effectiveModelId } : {}),
+    ...(input.effectiveThinkingOptionId
+      ? { thinkingOptionId: input.effectiveThinkingOptionId }
+      : {}),
+  };
+}
+
+function buildDraftStatusControls(input: {
+  formState: UseAgentFormStateResult;
+}): DraftAgentStatusBarProps {
+  const { formState } = input;
+  return {
+    providerDefinitions: formState.providerDefinitions,
+    selectedProvider: formState.selectedProvider,
+    onSelectProvider: formState.setProviderFromUser,
+    modeOptions: formState.modeOptions,
+    selectedMode: formState.selectedMode,
+    onSelectMode: formState.setModeFromUser,
+    models: formState.availableModels,
+    selectedModel: formState.selectedModel,
+    onSelectModel: formState.setModelFromUser,
+    isModelLoading: formState.isModelLoading,
+    allProviderModels: formState.allProviderModels,
+    isAllModelsLoading: formState.isAllModelsLoading,
+    onSelectProviderAndModel: formState.setProviderAndModelFromUser,
+    thinkingOptions: formState.availableThinkingOptions,
+    selectedThinkingOptionId: formState.selectedThinkingOptionId,
+    onSelectThinkingOption: formState.setThinkingOptionFromUser,
+  };
+}
+
+export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDraft {
+  const composerOptions = input.composer ?? null;
+  const formState = useAgentFormState({
+    initialServerId: composerOptions?.initialServerId ?? null,
+    initialValues: composerOptions?.initialValues,
+    isVisible: composerOptions?.isVisible ?? false,
+    isCreateFlow: true,
+    onlineServerIds: composerOptions?.onlineServerIds ?? [],
+  });
+  const draftKey = useMemo(
+    () =>
+      resolveDraftKey({
+        draftKey: input.draftKey,
+        selectedServerId: formState.selectedServerId,
+      }),
+    [formState.selectedServerId, input.draftKey],
+  );
   const [text, setText] = useState("");
   const [images, setImagesState] = useState<AttachmentMetadata[]>([]);
   const [isHydrated, setIsHydrated] = useState(false);
@@ -148,6 +285,83 @@ export function useAgentInputDraft(draftKey: string): AgentInputDraft {
     });
   }, [draftKey, images, text]);
 
+  const lockedWorkingDir = composerOptions?.lockedWorkingDir?.trim() ?? "";
+  useEffect(() => {
+    if (!composerOptions || !lockedWorkingDir) {
+      return;
+    }
+    if (formState.workingDir.trim() === lockedWorkingDir) {
+      return;
+    }
+    formState.setWorkingDir(lockedWorkingDir);
+  }, [composerOptions, formState, lockedWorkingDir]);
+
+  const effectiveModelId = useMemo(
+    () =>
+      resolveEffectiveComposerModelId({
+        selectedModel: formState.selectedModel,
+        availableModels: formState.availableModels,
+      }),
+    [formState.availableModels, formState.selectedModel],
+  );
+
+  const effectiveThinkingOptionId = useMemo(
+    () =>
+      resolveEffectiveComposerThinkingOptionId({
+        selectedThinkingOptionId: formState.selectedThinkingOptionId,
+        availableModels: formState.availableModels,
+        effectiveModelId,
+      }),
+    [effectiveModelId, formState.availableModels, formState.selectedThinkingOptionId],
+  );
+
+  const workingDir = lockedWorkingDir || formState.workingDir;
+
+  const commandDraftConfig = useMemo(
+    () =>
+      composerOptions
+        ? buildDraftComposerCommandConfig({
+            provider: formState.selectedProvider,
+            cwd: workingDir,
+            modeOptions: formState.modeOptions,
+            selectedMode: formState.selectedMode,
+            effectiveModelId,
+            effectiveThinkingOptionId,
+          })
+        : undefined,
+    [
+      composerOptions,
+      effectiveModelId,
+      effectiveThinkingOptionId,
+      workingDir,
+      formState.modeOptions,
+      formState.selectedMode,
+      formState.selectedProvider,
+    ],
+  );
+
+  const composerState = useMemo<DraftComposerState | null>(() => {
+    if (!composerOptions) {
+      return null;
+    }
+
+    return {
+      ...formState,
+      workingDir,
+      effectiveModelId,
+      effectiveThinkingOptionId,
+      statusControls: buildDraftStatusControls({ formState }),
+      commandDraftConfig,
+    };
+  }, [
+    commandDraftConfig,
+    composerOptions,
+    effectiveModelId,
+    effectiveThinkingOptionId,
+    formState,
+    workingDir,
+  ]);
+
   return {
     text,
     setText,
@@ -155,5 +369,14 @@ export function useAgentInputDraft(draftKey: string): AgentInputDraft {
     setImages,
     clear,
     isHydrated,
+    composerState,
   };
 }
+
+export const __private__ = {
+  resolveDraftKey,
+  resolveEffectiveComposerModelId,
+  resolveEffectiveComposerThinkingOptionId,
+  buildDraftComposerCommandConfig,
+  buildDraftStatusControls,
+};

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

@@ -17,6 +17,7 @@ function createAgent(id: string): Agent {
     serverId: "server-1",
     id,
     provider: "claude",
+    terminal: false,
     status: "running",
     createdAt: now,
     updatedAt: now,
@@ -29,6 +30,7 @@ function createAgent(id: string): Agent {
       supportsMcpServers: true,
       supportsReasoningStream: true,
       supportsToolInvocations: true,
+      supportsTerminalMode: false,
     },
     currentModeId: null,
     availableModes: [],

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

@@ -5,6 +5,14 @@ export interface AgentScreenAgent {
   id: string;
   status: "initializing" | "idle" | "running" | "error" | "closed";
   cwd: string;
+  lastError?: string | null;
+  terminalExit?: {
+    command: string;
+    message: string;
+    exitCode: number | null;
+    signal: number | null;
+    outputLines: string[];
+  } | null;
   projectPlacement?: {
     checkout?: {
       cwd?: string;

packages/app/src/hooks/use-aggregated-agents.ts

@@ -65,6 +65,7 @@ export function useAggregatedAgents(options?: {
           serverId,
           serverLabel,
           title: agent.title ?? null,
+          terminal: agent.terminal,
           status: agent.status,
           lastActivityAt: agent.lastActivityAt,
           cwd: agent.cwd,

packages/app/src/hooks/use-all-agents-list.test.ts

@@ -8,6 +8,7 @@ function makeAgent(input?: Partial<Agent>): Agent {
     serverId: "server-1",
     id: input?.id ?? "agent-1",
     provider: input?.provider ?? "codex",
+    terminal: input?.terminal ?? false,
     status: input?.status ?? "idle",
     createdAt: input?.createdAt ?? timestamp,
     updatedAt: input?.updatedAt ?? timestamp,
@@ -20,6 +21,7 @@ function makeAgent(input?: Partial<Agent>): Agent {
       supportsMcpServers: true,
       supportsReasoningStream: true,
       supportsToolInvocations: true,
+      supportsTerminalMode: false,
     },
     currentModeId: input?.currentModeId ?? null,
     availableModes: input?.availableModes ?? [],

packages/app/src/hooks/use-all-agents-list.ts

@@ -19,6 +19,7 @@ function toAggregatedAgent(params: {
     serverId: params.serverId,
     serverLabel: params.serverLabel,
     title: source.title ?? null,
+    terminal: source.terminal,
     status: source.status,
     lastActivityAt: source.lastActivityAt,
     cwd: source.cwd,

packages/app/src/hooks/use-draft-agent-create-flow.ts

@@ -72,6 +72,7 @@ type CreateRequestContext = {
 interface UseDraftAgentCreateFlowOptions<TDraftAgent, TCreateResult> {
   draftId: string;
   getPendingServerId: () => string | null;
+  allowEmptyText?: boolean;
   validateBeforeSubmit?: (ctx: SubmitContext) => string | null;
   onBeforeSubmit?: (ctx: CreateRequestContext) => void;
   onCreateStart?: () => void;
@@ -84,6 +85,7 @@ interface UseDraftAgentCreateFlowOptions<TDraftAgent, TCreateResult> {
 export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
   draftId,
   getPendingServerId,
+  allowEmptyText = false,
   validateBeforeSubmit,
   onBeforeSubmit,
   onCreateStart,
@@ -110,6 +112,10 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
       return EMPTY_STREAM_ITEMS;
     }
 
+    if (!machine.attempt.text && (!machine.attempt.images || machine.attempt.images.length === 0)) {
+      return EMPTY_STREAM_ITEMS;
+    }
+
     return [
       {
         kind: "user_message",
@@ -139,7 +145,7 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
       dispatch({ type: "DRAFT_SET_ERROR", message: "" });
 
       const trimmedPrompt = text.trim();
-      if (!trimmedPrompt) {
+      if (!trimmedPrompt && !allowEmptyText) {
         const error = new Error("Initial prompt is required");
         dispatch({ type: "DRAFT_SET_ERROR", message: error.message });
         throw error;
@@ -215,6 +221,7 @@ export function useDraftAgentCreateFlow<TDraftAgent, TCreateResult>({
       setPendingCreateAttempt,
       updatePendingAgentId,
       validateBeforeSubmit,
+      allowEmptyText,
     ],
   );
 

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

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import { mergeProviderPreferences } from "./use-form-preferences";
+
+describe("mergeProviderPreferences", () => {
+  it("stores the selected model for a provider", () => {
+    expect(
+      mergeProviderPreferences({
+        preferences: {},
+        provider: "claude",
+        updates: { model: "claude-opus-4-6" },
+      }),
+    ).toEqual({
+      provider: "claude",
+      providerPreferences: {
+        claude: {
+          model: "claude-opus-4-6",
+        },
+      },
+    });
+  });
+
+  it("merges thinking preferences by model without dropping existing entries", () => {
+    expect(
+      mergeProviderPreferences({
+        preferences: {
+          provider: "claude",
+          providerPreferences: {
+            claude: {
+              model: "claude-sonnet-4-6",
+              thinkingByModel: {
+                "claude-sonnet-4-6": "medium",
+              },
+            },
+          },
+        },
+        provider: "claude",
+        updates: {
+          thinkingByModel: {
+            "claude-opus-4-6": "high",
+          },
+        },
+      }),
+    ).toEqual({
+      provider: "claude",
+      providerPreferences: {
+        claude: {
+          model: "claude-sonnet-4-6",
+          thinkingByModel: {
+            "claude-sonnet-4-6": "medium",
+            "claude-opus-4-6": "high",
+          },
+        },
+      },
+    });
+  });
+});

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

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { z } from "zod";
+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"];
@@ -35,6 +36,36 @@ export interface UseFormPreferencesReturn {
   updatePreferences: (updates: Partial<FormPreferences>) => Promise<void>;
 }
 
+export function mergeProviderPreferences(args: {
+  preferences: FormPreferences;
+  provider: AgentProvider;
+  updates: Partial<ProviderPreferences>;
+}): FormPreferences {
+  const { preferences, provider, updates } = args;
+  const existingProviderPreferences = preferences.providerPreferences ?? {};
+  const existing = existingProviderPreferences[provider] ?? {};
+  const nextThinkingByModel =
+    updates.thinkingByModel === undefined
+      ? existing.thinkingByModel
+      : {
+          ...existing.thinkingByModel,
+          ...updates.thinkingByModel,
+        };
+
+  return {
+    ...preferences,
+    provider,
+    providerPreferences: {
+      ...existingProviderPreferences,
+      [provider]: {
+        ...existing,
+        ...updates,
+        ...(nextThinkingByModel ? { thinkingByModel: nextThinkingByModel } : {}),
+      },
+    },
+  };
+}
+
 export function useFormPreferences(): UseFormPreferencesReturn {
   const queryClient = useQueryClient();
   const { data, isPending } = useQuery({

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

@@ -0,0 +1,133 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@react-native-async-storage/async-storage", () => {
+  const storage = new Map<string, string>();
+  return {
+    default: {
+      getItem: vi.fn(async (key: string) => storage.get(key) ?? null),
+      setItem: vi.fn(async (key: string, value: string) => {
+        storage.set(key, value);
+      }),
+      removeItem: vi.fn(async (key: string) => {
+        storage.delete(key);
+      }),
+    },
+  };
+});
+
+const { replaceRoute } = vi.hoisted(() => ({
+  replaceRoute: vi.fn(),
+}));
+
+vi.mock("expo-router", () => ({
+  router: {
+    replace: replaceRoute,
+  },
+}));
+
+import { openProjectDirectly } from "@/hooks/use-open-project";
+import { useSessionStore } from "@/stores/session-store";
+import {
+  buildWorkspaceTabPersistenceKey,
+  collectAllTabs,
+  useWorkspaceLayoutStore,
+} from "@/stores/workspace-layout-store";
+
+const SERVER_ID = "server-1";
+const WORKSPACE_ID = "/repo/project";
+
+describe("openProjectDirectly", () => {
+  beforeEach(() => {
+    replaceRoute.mockReset();
+    useSessionStore.setState({
+      sessions: {},
+    });
+    useSessionStore.getState().initializeSession(SERVER_ID, {} as never);
+    useWorkspaceLayoutStore.setState({
+      layoutByWorkspace: {},
+      splitSizesByWorkspace: {},
+      pinnedAgentIdsByWorkspace: {},
+    });
+    vi.restoreAllMocks();
+  });
+
+  it("opens the workspace directly, marks workspaces hydrated, and seeds a launcher tab", async () => {
+    vi.spyOn(globalThis.crypto, "randomUUID").mockReturnValue(
+      "11111111-1111-1111-1111-111111111111",
+    );
+
+    const result = await openProjectDirectly({
+      serverId: SERVER_ID,
+      projectPath: WORKSPACE_ID,
+      isConnected: true,
+      client: {
+        openProject: vi.fn(async () => ({
+          requestId: "request-1",
+          error: null,
+          workspace: {
+            id: 1,
+            projectId: 1,
+            projectDisplayName: "project",
+            projectRootPath: WORKSPACE_ID,
+            projectKind: "git" as const,
+            workspaceKind: "checkout" as const,
+            name: "project",
+            status: "done" as const,
+            activityAt: null,
+            diffStat: null,
+          },
+        })),
+      },
+      mergeWorkspaces: useSessionStore.getState().mergeWorkspaces,
+      setHasHydratedWorkspaces: useSessionStore.getState().setHasHydratedWorkspaces,
+      openLauncherTab: useWorkspaceLayoutStore.getState().openLauncherTab,
+      replaceRoute,
+    });
+
+    expect(result).toBe(true);
+    expect(useSessionStore.getState().sessions[SERVER_ID]?.hasHydratedWorkspaces).toBe(true);
+    expect(Array.from(useSessionStore.getState().sessions[SERVER_ID]?.workspaces.values() ?? [])).toEqual([
+      expect.objectContaining({ id: "1", projectId: "1", projectRootPath: WORKSPACE_ID }),
+    ]);
+
+    const workspaceKey = buildWorkspaceTabPersistenceKey({
+      serverId: SERVER_ID,
+      workspaceId: "1",
+    });
+    expect(workspaceKey).toBeTruthy();
+    const layout = useWorkspaceLayoutStore.getState().layoutByWorkspace[workspaceKey as string];
+    expect(layout.root.kind).toBe("pane");
+    const tabs = collectAllTabs(layout.root);
+    expect(tabs).toHaveLength(1);
+    expect(tabs[0]?.target).toEqual({
+      kind: "launcher",
+      launcherId: "11111111-1111-1111-1111-111111111111",
+    });
+    expect(replaceRoute).toHaveBeenCalledWith("/h/server-1/workspace/MQ");
+  });
+
+  it("does not navigate or seed tabs when openProject fails", async () => {
+    const result = await openProjectDirectly({
+      serverId: SERVER_ID,
+      projectPath: WORKSPACE_ID,
+      isConnected: true,
+      client: {
+        openProject: vi.fn(async () => ({
+          requestId: "request-2",
+          error: "Failed to open project",
+          workspace: null,
+        })),
+      },
+      mergeWorkspaces: useSessionStore.getState().mergeWorkspaces,
+      setHasHydratedWorkspaces: useSessionStore.getState().setHasHydratedWorkspaces,
+      openLauncherTab: useWorkspaceLayoutStore.getState().openLauncherTab,
+      replaceRoute,
+    });
+
+    expect(result).toBe(false);
+    expect(useSessionStore.getState().sessions[SERVER_ID]?.hasHydratedWorkspaces).toBe(false);
+    expect(useSessionStore.getState().sessions[SERVER_ID]?.workspaces.size).toBe(0);
+    expect(useWorkspaceLayoutStore.getState().layoutByWorkspace).toEqual({});
+    expect(replaceRoute).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,45 +1,76 @@
-import { router } from "expo-router";
 import { useCallback } from "react";
-import { useToast } from "@/contexts/toast-context";
-import { useHostRuntimeClient } from "@/runtime/host-runtime";
-import { normalizeWorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
-import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
+import { router } from "expo-router";
+import type { DaemonClient } from "@server/client/daemon-client";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { normalizeWorkspaceDescriptor, type WorkspaceDescriptor, useSessionStore } from "@/stores/session-store";
+import {
+  buildWorkspaceTabPersistenceKey,
+  useWorkspaceLayoutStore,
+} from "@/stores/workspace-layout-store";
+import { buildHostWorkspaceRoute } from "@/utils/host-routes";
+
+interface OpenProjectDirectlyInput {
+  serverId: string;
+  projectPath: string;
+  isConnected: boolean;
+  client: Pick<DaemonClient, "openProject"> | null;
+  mergeWorkspaces: (serverId: string, workspaces: Iterable<WorkspaceDescriptor>) => void;
+  setHasHydratedWorkspaces: (serverId: string, hydrated: boolean) => void;
+  openLauncherTab: (workspaceKey: string) => string | null;
+  replaceRoute: (route: string) => void;
+}
+
+export async function openProjectDirectly(input: OpenProjectDirectlyInput): Promise<boolean> {
+  const normalizedServerId = input.serverId.trim();
+  const trimmedPath = input.projectPath.trim();
+  if (!normalizedServerId || !trimmedPath || !input.client || !input.isConnected) {
+    return false;
+  }
+
+  const payload = await input.client.openProject(trimmedPath);
+  if (payload.error || !payload.workspace) {
+    return false;
+  }
+
+  const workspace = normalizeWorkspaceDescriptor(payload.workspace);
+  input.mergeWorkspaces(normalizedServerId, [workspace]);
+  input.setHasHydratedWorkspaces(normalizedServerId, true);
+
+  const workspaceKey = buildWorkspaceTabPersistenceKey({
+    serverId: normalizedServerId,
+    workspaceId: workspace.id,
+  });
+  if (!workspaceKey) {
+    return false;
+  }
+
+  input.openLauncherTab(workspaceKey);
+  input.replaceRoute(buildHostWorkspaceRoute(normalizedServerId, workspace.id));
+  return true;
+}
 
 export function useOpenProject(serverId: string | null): (path: string) => Promise<boolean> {
   const normalizedServerId = serverId?.trim() ?? "";
-  const toast = useToast();
   const client = useHostRuntimeClient(normalizedServerId);
+  const isConnected = useHostRuntimeIsConnected(normalizedServerId);
   const mergeWorkspaces = useSessionStore((state) => state.mergeWorkspaces);
   const setHasHydratedWorkspaces = useSessionStore((state) => state.setHasHydratedWorkspaces);
 
   return useCallback(
     async (path: string) => {
-      const trimmedPath = path.trim();
-      if (!trimmedPath || !client || !normalizedServerId) {
-        return false;
-      }
-
-      try {
-        const payload = await client.openProject(trimmedPath);
-        if (payload.error || !payload.workspace) {
-          throw new Error(payload.error || "Failed to open project");
-        }
-
-        mergeWorkspaces(normalizedServerId, [normalizeWorkspaceDescriptor(payload.workspace)]);
-        setHasHydratedWorkspaces(normalizedServerId, true);
-        router.replace(
-          prepareWorkspaceTab({
-            serverId: normalizedServerId,
-            workspaceId: payload.workspace.id,
-            target: { kind: "draft", draftId: "new" },
-          }) as any,
-        );
-        return true;
-      } catch (error) {
-        toast.error(error instanceof Error ? error.message : "Failed to open project");
-        return false;
-      }
+      return openProjectDirectly({
+        serverId: normalizedServerId,
+        projectPath: path,
+        isConnected,
+        client,
+        mergeWorkspaces,
+        setHasHydratedWorkspaces,
+        openLauncherTab: useWorkspaceLayoutStore.getState().openLauncherTab,
+        replaceRoute: (route) => {
+          router.replace(route as any);
+        },
+      });
     },
-    [client, mergeWorkspaces, normalizedServerId, setHasHydratedWorkspaces, toast],
+    [client, isConnected, mergeWorkspaces, normalizedServerId, setHasHydratedWorkspaces],
   );
 }

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

@@ -30,6 +30,16 @@ describe("use-settings", () => {
     );
   });
 
+  it("defaults theme to auto when storage is empty", async () => {
+    asyncStorageMock.getItem.mockResolvedValue(null);
+    asyncStorageMock.setItem.mockResolvedValue();
+
+    const mod = await import("./use-settings");
+    const result = await mod.loadSettingsFromStorage();
+
+    expect(result.theme).toBe("auto");
+  });
+
   it("loads persisted built-in daemon management state", async () => {
     asyncStorageMock.getItem.mockImplementation(async (key: string) => {
       if (key === "@paseo:app-settings") {

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

@@ -12,7 +12,7 @@ export interface AppSettings {
 }
 
 export const DEFAULT_APP_SETTINGS: AppSettings = {
-  theme: "dark",
+  theme: "auto",
   manageBuiltInDaemon: true,
 };
 

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

@@ -29,7 +29,7 @@ function workspace(
     projectDisplayName: input.projectDisplayName ?? input.projectId,
     projectRootPath: input.projectRootPath ?? input.id,
     projectKind: input.projectKind ?? "git",
-    workspaceKind: input.workspaceKind ?? "local_checkout",
+    workspaceKind: input.workspaceKind ?? "checkout",
     name: input.name,
     status: input.status,
     activityAt: input.activityAt,

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

@@ -15,6 +15,7 @@ export interface SidebarWorkspaceEntry {
   workspaceKey: string;
   serverId: string;
   workspaceId: string;
+  projectKind: WorkspaceDescriptor["projectKind"];
   workspaceKind: WorkspaceDescriptor["workspaceKind"];
   name: string;
   activityAt: Date | null;
@@ -130,6 +131,7 @@ export function buildSidebarProjectsFromWorkspaces(input: {
       workspaceKey: `${input.serverId}:${workspace.id}`,
       serverId: input.serverId,
       workspaceId: workspace.id,
+      projectKind: workspace.projectKind,
       workspaceKind: workspace.workspaceKind,
       name: workspace.name,
       activityAt: workspace.activityAt,
@@ -248,8 +250,8 @@ function getWorkspaceOrderScopeKey(serverId: string, projectKey: string): string
 }
 
 function toWorkspaceDescriptor(payload: {
-  id: string;
-  projectId: string;
+  id: number;
+  projectId: number;
   projectDisplayName: string;
   projectRootPath: string;
   projectKind: WorkspaceDescriptor["projectKind"];

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

@@ -204,7 +204,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     help: {
       id: "workspace-tab-new",
       section: "tabs-panes",
-      label: "New agent tab",
+      label: "New tab",
       keys: ["mod", "T"],
     },
   },
@@ -216,7 +216,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     help: {
       id: "workspace-tab-new",
       section: "tabs-panes",
-      label: "New agent tab",
+      label: "New tab",
       keys: ["mod", "T"],
     },
   },

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

@@ -4,16 +4,14 @@ import ReanimatedAnimated from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useShallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
-import { Bot } from "lucide-react-native";
 import invariant from "tiny-invariant";
 import { AgentStreamView, type AgentStreamViewHandle } from "@/components/agent-stream-view";
-import { AgentInputArea } from "@/components/agent-input-area";
+import { Composer } from "@/components/composer";
 import { ArchivedAgentCallout } from "@/components/archived-agent-callout";
 import { FileDropZone } from "@/components/file-drop-zone";
+import { getProviderIcon } from "@/components/provider-icons";
 import type { ImageAttachment } from "@/components/message-input";
 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 {
@@ -28,6 +26,7 @@ import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useStableEvent } from "@/hooks/use-stable-event";
 import { usePaneContext } from "@/panels/pane-context";
 import type { PanelDescriptor, PanelRegistration } from "@/panels/panel-registry";
+import { TerminalAgentPanel } from "@/panels/terminal-agent-panel";
 import {
   useHostRuntimeClient,
   useHostRuntimeConnectionStatus,
@@ -96,7 +95,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);
 
   return {
     label: label ?? "",
@@ -155,6 +154,12 @@ function isNotFoundErrorMessage(message: string): boolean {
   return /agent not found|not found/i.test(message);
 }
 
+type AgentLookupState =
+  | { tag: "idle" }
+  | { tag: "loading" }
+  | { tag: "not_found"; message: string }
+  | { tag: "error"; message: string };
+
 function AgentPanelContent({
   serverId,
   agentId,
@@ -227,6 +232,219 @@ function AgentPanelBody({
   isConnected: boolean;
   connectionStatus: HostRuntimeConnectionStatus;
   onOpenWorkspaceFile?: (input: { filePath: string }) => void;
+}) {
+  const { theme } = useUnistyles();
+  const { isArchivingAgent } = useArchiveAgent();
+  const hasSession = useSessionStore((state) => Boolean(state.sessions[serverId]));
+  const setAgents = useSessionStore((state) => state.setAgents);
+  const setPendingPermissions = useSessionStore((state) => state.setPendingPermissions);
+  const projectPlacement = useStoreWithEqualityFn(
+    useSessionStore,
+    (state) =>
+      agentId ? (state.sessions[serverId]?.agents?.get(agentId)?.projectPlacement ?? null) : null,
+    (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b),
+  );
+  const agentState = useSessionStore(
+    useShallow((state) => {
+      const agent = agentId ? state.sessions[serverId]?.agents?.get(agentId) ?? null : null;
+      return {
+        serverId: agent?.serverId ?? null,
+        id: agent?.id ?? null,
+        terminal: agent?.terminal ?? false,
+        status: agent?.status ?? null,
+        cwd: agent?.cwd ?? null,
+        lastError: agent?.lastError ?? null,
+        terminalExit: agent?.terminalExit ?? null,
+        archivedAt: agent?.archivedAt ?? null,
+      };
+    }),
+  );
+  const [lookupState, setLookupState] = useState<AgentLookupState>({ tag: "idle" });
+  const lookupAttemptTokenRef = useRef(0);
+
+  useEffect(() => {
+    lookupAttemptTokenRef.current += 1;
+    setLookupState({ tag: "idle" });
+  }, [agentId, serverId]);
+
+  useEffect(() => {
+    if (!agentId) {
+      return;
+    }
+    if (agentState.id) {
+      if (lookupState.tag !== "idle") {
+        setLookupState({ tag: "idle" });
+      }
+      return;
+    }
+    if (!isConnected || !hasSession) {
+      return;
+    }
+    if (lookupState.tag === "loading" || lookupState.tag === "not_found") {
+      return;
+    }
+
+    setLookupState({ tag: "loading" });
+    const attemptToken = ++lookupAttemptTokenRef.current;
+
+    client
+      .fetchAgent(agentId)
+      .then((result) => {
+        if (attemptToken !== lookupAttemptTokenRef.current) {
+          return;
+        }
+        if (!result) {
+          setLookupState({
+            tag: "not_found",
+            message: `Agent not found: ${agentId}`,
+          });
+          return;
+        }
+
+        const normalized = normalizeAgentSnapshot(result.agent, serverId);
+        const hydrated = {
+          ...normalized,
+          projectPlacement: result.project,
+        };
+        setAgents(serverId, (previous) => {
+          const next = new Map(previous);
+          next.set(hydrated.id, hydrated);
+          return next;
+        });
+        setPendingPermissions(serverId, (previous) => {
+          const next = new Map(previous);
+          for (const [key, pending] of next.entries()) {
+            if (pending.agentId === hydrated.id) {
+              next.delete(key);
+            }
+          }
+          for (const request of hydrated.pendingPermissions) {
+            const key = derivePendingPermissionKey(hydrated.id, request);
+            next.set(key, { key, agentId: hydrated.id, request });
+          }
+          return next;
+        });
+        setLookupState({ tag: "idle" });
+      })
+      .catch((error) => {
+        if (attemptToken !== lookupAttemptTokenRef.current) {
+          return;
+        }
+        const message = toErrorMessage(error);
+        if (isNotFoundErrorMessage(message)) {
+          setLookupState({ tag: "not_found", message });
+          return;
+        }
+        setLookupState({ tag: "error", message });
+      });
+  }, [
+    agentId,
+    agentState.id,
+    client,
+    hasSession,
+    isConnected,
+    lookupState.tag,
+    serverId,
+    setAgents,
+    setPendingPermissions,
+  ]);
+
+  if (lookupState.tag === "not_found") {
+    return (
+      <View style={styles.container} testID="agent-not-found">
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>Agent not found</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (lookupState.tag === "error") {
+    return (
+      <View style={styles.container} testID="agent-load-error">
+        <View style={styles.errorContainer}>
+          <Text style={styles.errorText}>Failed to load agent</Text>
+          <Text style={styles.statusText}>{lookupState.message}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  const agent: AgentScreenAgent | null =
+    agentState.serverId && agentState.id && agentState.status && agentState.cwd
+      ? {
+          serverId: agentState.serverId,
+          id: agentState.id,
+          status: agentState.status,
+          cwd: agentState.cwd,
+          lastError: agentState.lastError ?? null,
+          terminalExit: agentState.terminalExit ?? null,
+          projectPlacement,
+        }
+      : null;
+
+  if (!agent) {
+    return (
+      <View style={styles.container} testID="agent-loading">
+        <View style={styles.errorContainer}>
+          <ActivityIndicator size="large" color={theme.colors.foregroundMuted} />
+        </View>
+      </View>
+    );
+  }
+
+  const isArchivingCurrentAgent = Boolean(agentId && isArchivingAgent({ serverId, agentId }));
+
+  if (agentState.terminal) {
+    return (
+      <View style={styles.root}>
+        <TerminalAgentPanel
+          serverId={serverId}
+          client={client}
+          agent={agent}
+          isPaneFocused={isPaneFocused}
+        />
+
+        {isArchivingCurrentAgent ? (
+          <View style={styles.archivingOverlay} testID="agent-archiving-overlay">
+            <ActivityIndicator size="large" color={theme.colors.foreground} />
+            <Text style={styles.archivingTitle}>Archiving agent...</Text>
+            <Text style={styles.archivingSubtitle}>Please wait while we archive this agent.</Text>
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+
+  return (
+    <ChatAgentContent
+      serverId={serverId}
+      agentId={agentId}
+      isPaneFocused={isPaneFocused}
+      client={client}
+      isConnected={isConnected}
+      connectionStatus={connectionStatus}
+      onOpenWorkspaceFile={onOpenWorkspaceFile}
+    />
+  );
+}
+
+function ChatAgentContent({
+  serverId,
+  agentId,
+  isPaneFocused,
+  client,
+  isConnected,
+  connectionStatus,
+  onOpenWorkspaceFile,
+}: {
+  serverId: string;
+  agentId?: string;
+  isPaneFocused: boolean;
+  client: NonNullable<ReturnType<typeof useHostRuntimeClient>>;
+  isConnected: boolean;
+  connectionStatus: HostRuntimeConnectionStatus;
+  onOpenWorkspaceFile?: (input: { filePath: string }) => void;
 }) {
   const { theme } = useUnistyles();
   const panelToast = useToastHost();
@@ -241,12 +459,12 @@ function AgentPanelBody({
     routeKey: string;
     reason: "initial-entry" | "resume";
   } | null>(null);
-  const agentInputDraft = useAgentInputDraft(
-    buildDraftStoreKey({
+  const agentInputDraft = useAgentInputDraft({
+    draftKey: buildDraftStoreKey({
       serverId,
       agentId: agentId ?? "__pending__",
     }),
-  );
+  });
 
   const handleFilesDropped = useCallback((files: ImageAttachment[]) => {
     addImagesRef.current?.(files);
@@ -262,8 +480,11 @@ function AgentPanelBody({
       return {
         serverId: agent?.serverId ?? null,
         id: agent?.id ?? null,
+        terminal: agent?.terminal ?? false,
         status: agent?.status ?? null,
         cwd: agent?.cwd ?? null,
+        lastError: agent?.lastError ?? null,
+        terminalExit: agent?.terminalExit ?? null,
         archivedAt: agent?.archivedAt ?? null,
         requiresAttention: agent?.requiresAttention ?? false,
         attentionReason: agent?.attentionReason ?? null,
@@ -494,6 +715,8 @@ function AgentPanelBody({
           id: agentState.id,
           status: agentState.status,
           cwd: agentState.cwd,
+          lastError: agentState.lastError ?? null,
+          terminalExit: agentState.terminalExit ?? null,
           projectPlacement,
         }
       : null;
@@ -615,98 +838,6 @@ function AgentPanelBody({
     setMissingAgentState({ kind: "idle" });
   }, [agentId, serverId]);
 
-  useEffect(() => {
-    if (!agentId) {
-      return;
-    }
-    if (agentState.id || shouldUseOptimisticStream) {
-      if (missingAgentState.kind !== "idle") {
-        setMissingAgentState({ kind: "idle" });
-      }
-      return;
-    }
-    if (!isConnected || !hasSession) {
-      return;
-    }
-    if (missingAgentState.kind === "resolving" || missingAgentState.kind === "not_found") {
-      return;
-    }
-
-    setMissingAgentState({ kind: "resolving" });
-    const attemptToken = ++initAttemptTokenRef.current;
-
-    ensureAgentIsInitialized(agentId)
-      .then(async () => {
-        if (attemptToken !== initAttemptTokenRef.current) {
-          return;
-        }
-        const currentAgent = useSessionStore.getState().sessions[serverId]?.agents.get(agentId);
-        if (!currentAgent) {
-          const result = await client.fetchAgent(agentId);
-          if (attemptToken !== initAttemptTokenRef.current) {
-            return;
-          }
-          if (!result) {
-            setMissingAgentState({
-              kind: "not_found",
-              message: `Agent not found: ${agentId}`,
-            });
-            return;
-          }
-          const normalized = normalizeAgentSnapshot(result.agent, serverId);
-          const hydrated = {
-            ...normalized,
-            projectPlacement: result.project,
-          };
-          setAgents(serverId, (previous) => {
-            const next = new Map(previous);
-            next.set(hydrated.id, hydrated);
-            return next;
-          });
-          setPendingPermissions(serverId, (previous) => {
-            const next = new Map(previous);
-            for (const [key, pending] of next.entries()) {
-              if (pending.agentId === hydrated.id) {
-                next.delete(key);
-              }
-            }
-            for (const request of hydrated.pendingPermissions) {
-              const key = derivePendingPermissionKey(hydrated.id, request);
-              next.set(key, { key, agentId: hydrated.id, request });
-            }
-            return next;
-          });
-        }
-        if (attemptToken !== initAttemptTokenRef.current) {
-          return;
-        }
-        setMissingAgentState({ kind: "idle" });
-      })
-      .catch((error) => {
-        if (attemptToken !== initAttemptTokenRef.current) {
-          return;
-        }
-        const message = toErrorMessage(error);
-        if (isNotFoundErrorMessage(message)) {
-          setMissingAgentState({ kind: "not_found", message });
-          return;
-        }
-        setMissingAgentState({ kind: "error", message });
-      });
-  }, [
-    agentState.id,
-    agentId,
-    client,
-    ensureAgentIsInitialized,
-    hasSession,
-    isConnected,
-    missingAgentState.kind,
-    serverId,
-    setAgents,
-    setPendingPermissions,
-    shouldUseOptimisticStream,
-  ]);
-
   const isHistoryRefreshCatchingUp =
     viewState.tag === "ready" &&
     viewState.sync.status === "catching_up" &&
@@ -781,7 +912,7 @@ function AgentPanelBody({
           </View>
 
           {agentId && !isArchivingCurrentAgent && !agentState.archivedAt ? (
-            <AgentInputArea
+            <Composer
               agentId={agentId}
               serverId={serverId}
               isInputActive={isPaneFocused}

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

@@ -0,0 +1,446 @@
+import { useCallback, useMemo, useState, type ComponentType } from "react";
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
+import { Bot, ChevronDown, Plus, SquarePen, SquareTerminal } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import invariant from "tiny-invariant";
+import type { AgentProvider } from "@server/server/agent/agent-sdk-types";
+import { getProviderIcon } from "@/components/provider-icons";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { usePaneContext } from "@/panels/pane-context";
+import type { PanelRegistration } from "@/panels/panel-registry";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { generateDraftId } from "@/stores/draft-keys";
+import { useProviderRecency } from "@/stores/provider-recency-store";
+import { useSessionStore } from "@/stores/session-store";
+import { normalizeAgentSnapshot } from "@/utils/agent-snapshots";
+import { toErrorMessage } from "@/utils/error-messages";
+
+const MAX_VISIBLE_PROVIDER_TILES = 4;
+
+function useLauncherPanelDescriptor() {
+  return {
+    label: "New Tab",
+    subtitle: "New Tab",
+    titleState: "ready" as const,
+    icon: Plus,
+    statusBucket: null,
+  };
+}
+
+function LauncherPanel() {
+  const { serverId, workspaceId, target, retargetCurrentTab, isPaneFocused } = usePaneContext();
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+  const { providers, recordUsage } = useProviderRecency();
+  const setAgents = useSessionStore((state) => state.setAgents);
+  const [pendingAction, setPendingAction] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  invariant(target.kind === "launcher", "LauncherPanel requires launcher target");
+
+  const visibleProviders = useMemo(
+    () => providers.slice(0, MAX_VISIBLE_PROVIDER_TILES),
+    [providers],
+  );
+  const overflowProviders = useMemo(
+    () => providers.slice(MAX_VISIBLE_PROVIDER_TILES),
+    [providers],
+  );
+
+  const launchTerminalAgent = useCallback(
+    async (providerId: AgentProvider) => {
+      if (!client || !isConnected) {
+        setErrorMessage("Host is not connected");
+        return;
+      }
+
+      setPendingAction(providerId);
+      setErrorMessage(null);
+
+      try {
+        const agent = await client.createAgent({
+          provider: providerId,
+          cwd: workspaceId,
+          terminal: true,
+        });
+        recordUsage(providerId);
+        // Retarget first so the launcher converts in place before session reconciliation
+        // can materialize the new agent as a separate tab.
+        retargetCurrentTab({ kind: "agent", agentId: agent.id });
+        setAgents(serverId, (previous) => {
+          const next = new Map(previous);
+          next.set(agent.id, normalizeAgentSnapshot(agent, serverId));
+          return next;
+        });
+      } catch (error) {
+        setErrorMessage(toErrorMessage(error));
+      } finally {
+        setPendingAction((current) => (current === providerId ? null : current));
+      }
+    },
+    [client, isConnected, recordUsage, retargetCurrentTab, serverId, setAgents, workspaceId],
+  );
+
+  const openDraftTab = useCallback(() => {
+    setErrorMessage(null);
+    setPendingAction("draft");
+    retargetCurrentTab({
+      kind: "draft",
+      draftId: generateDraftId(),
+    });
+    setPendingAction(null);
+  }, [retargetCurrentTab]);
+
+  const openTerminalTab = useCallback(async () => {
+    if (!client || !isConnected) {
+      setErrorMessage("Host is not connected");
+      return;
+    }
+
+    setPendingAction("terminal");
+    setErrorMessage(null);
+
+    try {
+      const payload = await client.createTerminal(workspaceId);
+      if (payload.error || !payload.terminal) {
+        throw new Error(payload.error ?? "Failed to open terminal");
+      }
+      retargetCurrentTab({
+        kind: "terminal",
+        terminalId: payload.terminal.id,
+      });
+    } catch (error) {
+      setErrorMessage(toErrorMessage(error));
+    } finally {
+      setPendingAction((current) => (current === "terminal" ? null : current));
+    }
+  }, [client, isConnected, retargetCurrentTab, workspaceId]);
+
+  const actionsDisabled = pendingAction !== null;
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={[
+          styles.content,
+          !isPaneFocused ? styles.contentUnfocused : null,
+        ]}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.inner}>
+          <View style={styles.primaryRow}>
+            <LauncherTile
+              title="New Chat"
+              Icon={SquarePen}
+              accent
+              disabled={actionsDisabled}
+              pending={pendingAction === "draft"}
+              onPress={openDraftTab}
+            />
+            <LauncherTile
+              title="Terminal"
+              Icon={SquareTerminal}
+              disabled={actionsDisabled}
+              pending={pendingAction === "terminal"}
+              onPress={() => {
+                void openTerminalTab();
+              }}
+            />
+          </View>
+
+          <Text style={styles.sectionLabel}>Terminal Agents</Text>
+
+          <View style={styles.providerGrid}>
+            {visibleProviders.map((provider) => (
+              <ProviderTile
+                key={provider.id}
+                provider={provider}
+                disabled={actionsDisabled}
+                pending={pendingAction === provider.id}
+                onPress={() => {
+                  void launchTerminalAgent(provider.id);
+                }}
+              />
+            ))}
+
+            {overflowProviders.length > 0 ? (
+              <ViewAllProvidersTile
+                providers={overflowProviders}
+                disabled={actionsDisabled}
+                pendingProviderId={pendingAction}
+                onSelectProvider={(providerId) => {
+                  void launchTerminalAgent(providerId);
+                }}
+              />
+            ) : null}
+          </View>
+
+          {errorMessage ? <Text style={styles.errorText}>{errorMessage}</Text> : null}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+function LauncherTile({
+  title,
+  Icon,
+  accent = false,
+  disabled,
+  pending,
+  onPress,
+}: {
+  title: string;
+  Icon: ComponentType<{ size: number; color: string }>;
+  accent?: boolean;
+  disabled: boolean;
+  pending: boolean;
+  onPress: () => void;
+}) {
+  const { theme } = useUnistyles();
+  const iconColor = accent ? theme.colors.accentForeground : theme.colors.foreground;
+  const titleColor = accent ? theme.colors.accentForeground : theme.colors.foreground;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ hovered, pressed }) => [
+        styles.primaryTile,
+        accent ? styles.primaryTileAccent : null,
+        (hovered || pressed) && !disabled
+          ? accent
+            ? styles.primaryTileAccentInteractive
+            : styles.tileInteractive
+          : null,
+        disabled ? styles.tileDisabled : null,
+      ]}
+    >
+      <View style={[styles.primaryIconWrap, accent ? styles.primaryIconWrapAccent : null]}>
+        {pending ? (
+          <ActivityIndicator
+            size="small"
+            color={accent ? theme.colors.accentForeground : theme.colors.foreground}
+          />
+        ) : (
+          <Icon size={16} color={iconColor} />
+        )}
+      </View>
+      <Text style={[styles.primaryTileTitle, { color: titleColor }]}>{title}</Text>
+    </Pressable>
+  );
+}
+
+function ProviderTile({
+  provider,
+  disabled,
+  pending,
+  onPress,
+}: {
+  provider: { id: string; label: string; description: string };
+  disabled: boolean;
+  pending: boolean;
+  onPress: () => void;
+}) {
+  const { theme } = useUnistyles();
+  const Icon = getProviderIcon(provider.id);
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ hovered, pressed }) => [
+        styles.providerTile,
+        (hovered || pressed) && !disabled ? styles.tileInteractive : null,
+        disabled ? styles.tileDisabled : null,
+      ]}
+    >
+      <View style={styles.providerIconWrap}>
+        {pending ? (
+          <ActivityIndicator size="small" color={theme.colors.foreground} />
+        ) : (
+          <Icon size={16} color={theme.colors.foreground} />
+        )}
+      </View>
+      <Text style={styles.providerLabel}>{provider.label}</Text>
+    </Pressable>
+  );
+}
+
+function ViewAllProvidersTile({
+  providers,
+  disabled,
+  pendingProviderId,
+  onSelectProvider,
+}: {
+  providers: Array<{ id: string; label: string; description: string }>;
+  disabled: boolean;
+  pendingProviderId: string | null;
+  onSelectProvider: (providerId: AgentProvider) => void;
+}) {
+  const { theme } = useUnistyles();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger disabled={disabled} style={styles.providerTile}>
+        {({ open }) => (
+          <>
+            <View style={styles.providerIconWrap}>
+              <Bot size={16} color={theme.colors.foreground} />
+            </View>
+            <Text style={styles.providerLabel}>More</Text>
+            <ChevronDown size={14} color={theme.colors.foregroundMuted} />
+            {open ? <View style={styles.dropdownOutline} /> : null}
+          </>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" width={260}>
+        {providers.map((provider) => {
+          const Icon = getProviderIcon(provider.id);
+          return (
+            <DropdownMenuItem
+              key={provider.id}
+              description={provider.description}
+              onSelect={() => onSelectProvider(provider.id as AgentProvider)}
+              leading={<Icon size={16} color={theme.colors.foregroundMuted} />}
+              status={pendingProviderId === provider.id ? "pending" : "idle"}
+              pendingLabel={`Launching ${provider.label}...`}
+            >
+              {provider.label}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const launcherPanelRegistration: PanelRegistration<"launcher"> = {
+  kind: "launcher",
+  component: LauncherPanel,
+  useDescriptor: useLauncherPanelDescriptor,
+};
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.surface0,
+  },
+  content: {
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[8],
+  },
+  contentUnfocused: {
+    opacity: 0.96,
+  },
+  inner: {
+    width: "100%",
+    maxWidth: 360,
+    gap: theme.spacing[4],
+  },
+  primaryRow: {
+    flexDirection: "row",
+    gap: theme.spacing[2],
+  },
+  tileInteractive: {
+    backgroundColor: theme.colors.surface2,
+  },
+  tileDisabled: {
+    opacity: theme.opacity[50],
+  },
+  primaryTile: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.borderAccent,
+    backgroundColor: theme.colors.surface1,
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+  },
+  primaryTileAccent: {
+    backgroundColor: theme.colors.accent,
+    borderColor: theme.colors.accent,
+  },
+  primaryTileAccentInteractive: {
+    backgroundColor: theme.colors.accentBright,
+    borderColor: theme.colors.accentBright,
+  },
+  primaryIconWrap: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface2,
+  },
+  primaryIconWrapAccent: {
+    backgroundColor: "rgba(255,255,255,0.14)",
+  },
+  primaryTileTitle: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+  },
+  sectionLabel: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foregroundMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.6,
+  },
+  providerGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.spacing[2],
+  },
+  providerTile: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.borderAccent,
+    backgroundColor: theme.colors.surface1,
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+  },
+  providerIconWrap: {
+    width: 28,
+    height: 28,
+    borderRadius: theme.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.colors.surface2,
+  },
+  providerLabel: {
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+  dropdownOutline: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.accent,
+  },
+  errorText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.destructive,
+  },
+}));

packages/app/src/panels/register-panels.ts

@@ -1,6 +1,7 @@
 import { agentPanelRegistration } from "@/panels/agent-panel";
 import { draftPanelRegistration } from "@/panels/draft-panel";
 import { filePanelRegistration } from "@/panels/file-panel";
+import { launcherPanelRegistration } from "@/panels/launcher-panel";
 import { registerPanel } from "@/panels/panel-registry";
 import { terminalPanelRegistration } from "@/panels/terminal-panel";
 
@@ -14,5 +15,6 @@ export function ensurePanelsRegistered(): void {
   registerPanel(agentPanelRegistration);
   registerPanel(terminalPanelRegistration);
   registerPanel(filePanelRegistration);
+  registerPanel(launcherPanelRegistration);
   panelsRegistered = true;
 }

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

@@ -0,0 +1,316 @@
+import { useIsFocused } from "@react-navigation/native";
+import { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import type { DaemonClient } from "@server/client/daemon-client";
+import { TerminalPane } from "@/components/terminal-pane";
+import { Fonts } from "@/constants/theme";
+import { useArchiveAgent } from "@/hooks/use-archive-agent";
+import { usePaneContext } from "@/panels/pane-context";
+import type { AgentScreenAgent } from "@/hooks/use-agent-screen-state-machine";
+import {
+  buildTerminalAgentReopenKey,
+  useTerminalAgentReopenStore,
+} from "@/stores/terminal-agent-reopen-store";
+import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
+import { buildWorkspaceTabPersistenceKey } from "@/stores/workspace-tabs-store";
+
+type TerminalAgentPanelProps = {
+  serverId: string;
+  client: DaemonClient;
+  agent: AgentScreenAgent;
+  isPaneFocused: boolean;
+};
+
+function toErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+
+function getTerminalExitTitle(agent: AgentScreenAgent): string {
+  const exitCode = agent.terminalExit?.exitCode;
+  const signal = agent.terminalExit?.signal;
+  if (
+    agent.status === "error" ||
+    (exitCode != null && exitCode !== 0) ||
+    signal != null
+  ) {
+    return "Terminal session failed";
+  }
+  return "Terminal session ended";
+}
+
+function getTerminalExitMessage(agent: AgentScreenAgent): string {
+  const summary = agent.terminalExit?.message?.trim();
+  if (summary) {
+    return summary;
+  }
+  const lastError = agent.lastError?.trim();
+  if (lastError) {
+    return lastError;
+  }
+  return "Reopen the agent from the sessions list to start it again.";
+}
+
+function isCleanTerminalExit(agent: AgentScreenAgent): boolean {
+  return agent.status === "closed" && agent.terminalExit?.exitCode === 0 && agent.terminalExit.signal == null;
+}
+
+export function TerminalAgentPanel({
+  serverId,
+  client,
+  agent,
+  isPaneFocused,
+}: TerminalAgentPanelProps) {
+  const isScreenFocused = useIsFocused();
+  const { theme } = useUnistyles();
+  const { tabId, workspaceId } = usePaneContext();
+  const { archiveAgent } = useArchiveAgent();
+  const closeWorkspaceTab = useWorkspaceLayoutStore((state) => state.closeTab);
+  const unpinWorkspaceAgent = useWorkspaceLayoutStore((state) => state.unpinAgent);
+  const [terminalId, setTerminalId] = useState<string | null>(null);
+  const [isCreating, setIsCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [didExitInPanel, setDidExitInPanel] = useState(false);
+  const reopenKey = buildTerminalAgentReopenKey({ serverId, agentId: agent.id });
+  const reopenIntentVersion = useTerminalAgentReopenStore((state) =>
+    reopenKey ? (state.reopenIntentVersionByAgentKey[reopenKey] ?? 0) : 0,
+  );
+
+  // Refs for effect guards — these values gate whether the creation effect
+  // should run, but changes to them should NOT re-trigger the effect.
+  const isCreatingRef = useRef(false);
+  const didExitRef = useRef(false);
+  const lastHandledReopenIntentRef = useRef(reopenIntentVersion);
+  const isAutoClosingRef = useRef(false);
+
+  useEffect(() => {
+    setTerminalId(null);
+    setIsCreating(false);
+    setCreateError(null);
+    setDidExitInPanel(false);
+    isCreatingRef.current = false;
+    didExitRef.current = false;
+  }, [agent.id, serverId]);
+
+  useEffect(() => {
+    if (reopenIntentVersion <= lastHandledReopenIntentRef.current) {
+      return;
+    }
+
+    lastHandledReopenIntentRef.current = reopenIntentVersion;
+    if (!didExitRef.current && !didExitInPanel && !createError) {
+      return;
+    }
+
+    didExitRef.current = false;
+    setDidExitInPanel(false);
+    setCreateError(null);
+  }, [createError, didExitInPanel, reopenIntentVersion]);
+
+  useEffect(() => {
+    if (!terminalId) {
+      return;
+    }
+    return client.on("terminal_stream_exit", (message) => {
+      if (message.type !== "terminal_stream_exit" || message.payload.terminalId !== terminalId) {
+        return;
+      }
+      setTerminalId((current) => (current === message.payload.terminalId ? null : current));
+      setDidExitInPanel(true);
+      didExitRef.current = true;
+    });
+  }, [client, terminalId]);
+
+  useEffect(() => {
+    if (!isCleanTerminalExit(agent) || isAutoClosingRef.current) {
+      return;
+    }
+
+    const workspaceKey = buildWorkspaceTabPersistenceKey({ serverId, workspaceId });
+    if (!workspaceKey) {
+      return;
+    }
+
+    isAutoClosingRef.current = true;
+    void archiveAgent({ serverId, agentId: agent.id })
+      .then(() => {
+        unpinWorkspaceAgent(workspaceKey, agent.id);
+        closeWorkspaceTab(workspaceKey, tabId);
+      })
+      .finally(() => {
+        isAutoClosingRef.current = false;
+      });
+  }, [
+    agent,
+    archiveAgent,
+    closeWorkspaceTab,
+    serverId,
+    tabId,
+    unpinWorkspaceAgent,
+    workspaceId,
+  ]);
+
+  // Create the terminal when the panel becomes visible and no terminal exists yet.
+  // Guards (isCreatingRef, didExitRef) are refs to avoid re-triggering the effect
+  // when their values change — we only want this to fire on genuine state transitions
+  // (focus change, terminal cleared, agent change).
+  useEffect(() => {
+    if (
+      !isScreenFocused ||
+      !isPaneFocused ||
+      terminalId ||
+      isCreatingRef.current ||
+      didExitRef.current
+    ) {
+      return;
+    }
+
+    let cancelled = false;
+    isCreatingRef.current = true;
+    setIsCreating(true);
+    setCreateError(null);
+
+    void client
+      .createTerminal(agent.cwd, undefined, undefined, { agentId: agent.id })
+      .then((payload) => {
+        if (cancelled) {
+          return;
+        }
+        if (payload.error || !payload.terminal) {
+          setCreateError(payload.error ?? "Failed to open terminal");
+          return;
+        }
+        setTerminalId(payload.terminal.id);
+      })
+      .catch((error) => {
+        if (cancelled) {
+          return;
+        }
+        setCreateError(toErrorMessage(error));
+      })
+      .finally(() => {
+        if (!cancelled) {
+          isCreatingRef.current = false;
+          setIsCreating(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [agent.cwd, agent.id, client, isPaneFocused, isScreenFocused, terminalId]);
+
+  if (!isScreenFocused) {
+    return <View style={styles.container} />;
+  }
+
+  if (terminalId) {
+    return (
+      <TerminalPane
+        serverId={serverId}
+        cwd={agent.cwd}
+        terminalId={terminalId}
+        isPaneFocused={isPaneFocused}
+      />
+    );
+  }
+
+  if (isCreating) {
+    return (
+      <View style={styles.state} testID="terminal-agent-loading">
+        <ActivityIndicator size="large" color={theme.colors.foregroundMuted} />
+        <Text style={styles.message}>Opening terminal…</Text>
+      </View>
+    );
+  }
+
+  if (createError) {
+    return (
+      <View style={styles.state} testID="terminal-agent-error">
+        <Text style={styles.title}>Failed to open terminal</Text>
+        <Text style={styles.message}>{createError}</Text>
+      </View>
+    );
+  }
+
+  if (didExitInPanel || agent.status === "closed" || agent.status === "error") {
+    const terminalExit = agent.terminalExit ?? null;
+    const exitMeta =
+      terminalExit?.exitCode != null
+        ? `Exit code ${terminalExit.exitCode}`
+        : terminalExit?.signal != null
+          ? `Signal ${terminalExit.signal}`
+          : null;
+    return (
+      <View style={styles.state} testID="terminal-agent-closed">
+        <Text style={styles.title}>{getTerminalExitTitle(agent)}</Text>
+        <Text style={styles.message}>{getTerminalExitMessage(agent)}</Text>
+        {terminalExit ? (
+          <View style={styles.detailsCard}>
+            {exitMeta ? <Text style={styles.detailsLabel}>{exitMeta}</Text> : null}
+            {terminalExit.outputLines.length > 0 ? (
+              <Text style={styles.output}>{terminalExit.outputLines.join("\n")}</Text>
+            ) : null}
+          </View>
+        ) : null}
+        <Text style={styles.message}>Reopen the agent from the sessions list to start it again.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.state} testID="terminal-agent-idle">
+      <ActivityIndicator size="large" color={theme.colors.foregroundMuted} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.surface0,
+  },
+  state: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[3],
+    paddingHorizontal: theme.spacing[6],
+    backgroundColor: theme.colors.surface0,
+  },
+  title: {
+    fontSize: theme.fontSize.lg,
+    color: theme.colors.foreground,
+    textAlign: "center",
+  },
+  message: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+    textAlign: "center",
+  },
+  detailsCard: {
+    width: "100%",
+    maxWidth: 560,
+    padding: theme.spacing[4],
+    gap: theme.spacing[2],
+    borderRadius: theme.spacing[3],
+    backgroundColor: theme.colors.surface1,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border,
+  },
+  detailsLabel: {
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foregroundMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+  },
+  output: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foreground,
+    fontFamily: Fonts.mono,
+    lineHeight: 20,
+  },
+}));

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

@@ -39,7 +39,7 @@ function useTerminalPanelDescriptor(
     terminalsQuery.data?.terminals.find((entry) => entry.id === target.terminalId) ?? null;
 
   return {
-    label: trimNonEmpty(terminal?.name ?? null) ?? "Terminal",
+    label: trimNonEmpty(terminal?.title ?? terminal?.name ?? null) ?? "Terminal",
     subtitle: "Terminal",
     titleState: "ready",
     icon: Terminal,

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

@@ -133,6 +133,7 @@ function makeFetchAgentsEntry(input: {
         supportsMcpServers: true,
         supportsReasoningStream: true,
         supportsToolInvocations: true,
+        supportsTerminalMode: false,
       },
       currentModeId: null,
       availableModes: [],

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

@@ -15,7 +15,10 @@ import {
 } from "@/types/host-connection";
 import { decodeOfferFragmentPayload, normalizeHostPort } from "@/utils/daemon-endpoints";
 import { ConnectionOfferSchema, type ConnectionOffer } from "@server/shared/connection-offer";
-import { shouldUseDesktopDaemon, startDesktopDaemon } from "@/desktop/daemon/desktop-daemon";
+import {
+  shouldUseDesktopDaemon,
+  startDesktopDaemon,
+} from "@/desktop/daemon/desktop-daemon";
 import { connectToDaemon } from "@/utils/test-daemon-connection";
 import { buildDaemonWebSocketUrl, buildRelayWebSocketUrl } from "@/utils/daemon-endpoints";
 import { getOrCreateClientId } from "@/utils/client-id";
@@ -33,6 +36,10 @@ import { useSessionStore, type Agent } from "@/stores/session-store";
 
 export type HostRuntimeConnectionStatus = "idle" | "connecting" | "online" | "offline" | "error";
 
+export type HostRuntimeBootstrapResult =
+  | { ok: true; listenAddress: string; serverId: string; hostname: string | null }
+  | { ok: false; error: string };
+
 export type ActiveConnection =
   | { type: "directTcp"; endpoint: string; display: string }
   | { type: "directSocket"; endpoint: string; display: "socket" }
@@ -1073,6 +1080,7 @@ const DEFAULT_LOCALHOST_ENDPOINT =
   process.env.EXPO_PUBLIC_LOCAL_DAEMON?.trim() || "localhost:6767";
 const DEFAULT_LOCALHOST_BOOTSTRAP_KEY = "@paseo:default-localhost-bootstrap-v1";
 const DEFAULT_LOCALHOST_BOOTSTRAP_TIMEOUT_MS = 2500;
+const CONNECTION_ONLINE_TIMEOUT_MS = 15_000;
 const E2E_STORAGE_KEY = "@paseo:e2e";
 
 export class HostRuntimeStore {
@@ -1161,20 +1169,40 @@ export class HostRuntimeStore {
     }
   }
 
-  private async bootstrapDesktop(): Promise<void> {
+  async bootstrapDesktop(): Promise<HostRuntimeBootstrapResult> {
     try {
       const daemon = await startDesktopDaemon();
-      const connection = connectionFromListen(daemon.listen);
-      if (!connection || !daemon.serverId) {
-        return;
+      const listenAddress = daemon.listen?.trim() ?? "";
+      const serverId = daemon.serverId.trim();
+      if (!listenAddress) {
+        return {
+          ok: false,
+          error: "Desktop daemon did not return a listen address.",
+        };
       }
-      await this.upsertHostConnection({
-        serverId: daemon.serverId,
-        label: daemon.hostname ?? undefined,
-        connection,
-      });
+      if (!serverId) {
+        return {
+          ok: false,
+          error: "Desktop daemon did not return a server id.",
+        };
+      }
+      if (!connectionFromListen(listenAddress)) {
+        return {
+          ok: false,
+          error: `Desktop daemon returned an unsupported listen address: ${listenAddress}`,
+        };
+      }
+      return {
+        ok: true,
+        listenAddress,
+        serverId,
+        hostname: daemon.hostname,
+      };
     } catch (error) {
-      console.warn("[HostRuntime] Failed to bootstrap desktop daemon", error);
+      return {
+        ok: false,
+        error: toErrorMessage(error),
+      };
     }
   }
 
@@ -1280,6 +1308,36 @@ export class HostRuntimeStore {
     return this.upsertConnectionFromOffer(offer);
   }
 
+  async addConnectionFromListenAndWaitForOnline(input: {
+    listenAddress: string;
+    serverId: string;
+    hostname: string | null;
+    timeoutMs?: number;
+  }): Promise<HostProfile> {
+    const normalizedListenAddress = input.listenAddress.trim();
+    const serverId = input.serverId.trim();
+    const connection = connectionFromListen(normalizedListenAddress);
+    if (!connection) {
+      throw new Error(`Unsupported listen address: ${input.listenAddress}`);
+    }
+    if (!serverId) {
+      throw new Error("Desktop daemon did not return a server id.");
+    }
+    const profile = await this.upsertHostConnection({
+      serverId,
+      label: input.hostname ?? undefined,
+      connection,
+    });
+
+    await this.waitForConnectionOnline({
+      serverId,
+      connectionId: connection.id,
+      timeoutMs: input.timeoutMs,
+    });
+
+    return profile;
+  }
+
   async renameHost(serverId: string, label: string): Promise<void> {
     const next = this.hosts.map((h) =>
       h.serverId === serverId ? { ...h, label, updatedAt: new Date().toISOString() } : h,
@@ -1441,6 +1499,100 @@ export class HostRuntimeStore {
     }
   }
 
+  private waitForConnectionOnline(input: {
+    serverId: string;
+    connectionId: string;
+    timeoutMs?: number;
+  }): Promise<void> {
+    const { serverId, connectionId } = input;
+    const timeoutMs = input.timeoutMs ?? CONNECTION_ONLINE_TIMEOUT_MS;
+
+    return new Promise((resolve, reject) => {
+      let settled = false;
+      let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+
+      const cleanup = (unsubscribe: (() => void) | null): void => {
+        if (timeoutHandle) {
+          clearTimeout(timeoutHandle);
+          timeoutHandle = null;
+        }
+        unsubscribe?.();
+      };
+
+      const settle = (
+        unsubscribe: (() => void) | null,
+        outcome: { ok: true } | { ok: false; error: Error },
+      ): void => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        cleanup(unsubscribe);
+        if (outcome.ok) {
+          resolve();
+        } else {
+          reject(outcome.error);
+        }
+      };
+
+      const readSnapshot = (): { ok: true } | { ok: false; error: Error } | null => {
+        const snapshot = this.getSnapshot(serverId);
+        if (!snapshot) {
+          return {
+            ok: false,
+            error: new Error(`Unknown host runtime for serverId ${serverId}`),
+          };
+        }
+
+        if (
+          snapshot.activeConnectionId === connectionId &&
+          snapshot.connectionStatus === "online"
+        ) {
+          return { ok: true };
+        }
+
+        if (
+          snapshot.activeConnectionId === connectionId &&
+          snapshot.connectionStatus === "error"
+        ) {
+          return {
+            ok: false,
+            error: new Error(snapshot.lastError ?? "Connection failed before coming online."),
+          };
+        }
+
+        return null;
+      };
+
+      const unsubscribe = this.subscribe(serverId, () => {
+        const outcome = readSnapshot();
+        if (outcome) {
+          settle(unsubscribe, outcome);
+        }
+      });
+
+      timeoutHandle = setTimeout(() => {
+        settle(unsubscribe, {
+          ok: false,
+          error: new Error(`Timed out waiting for connection ${connectionId} to come online.`),
+        });
+      }, timeoutMs);
+
+      const initialOutcome = readSnapshot();
+      if (initialOutcome) {
+        settle(unsubscribe, initialOutcome);
+        return;
+      }
+
+      void this.runProbeCycleNow(serverId).catch((error) => {
+        settle(unsubscribe, {
+          ok: false,
+          error: error instanceof Error ? error : new Error(String(error)),
+        });
+      });
+    });
+  }
+
   private maybeAutoBootstrapAgentDirectory(serverId: string): void {
     const controller = this.controllers.get(serverId);
     if (!controller) {

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

@@ -11,15 +11,14 @@ import Animated from "react-native-reanimated";
 import { Folder, GitBranch, PanelRight } from "lucide-react-native";
 import { SidebarMenuToggle } from "@/components/headers/menu-header";
 import { HeaderToggleButton } from "@/components/headers/header-toggle-button";
-import { AgentInputArea } from "@/components/agent-input-area";
+import { Composer } from "@/components/composer";
 import { AgentStreamView } from "@/components/agent-stream-view";
 import { FormSelectTrigger } from "@/components/agent-form/agent-form-dropdowns";
 import { ExplorerSidebar } from "@/components/explorer-sidebar";
 import { Combobox } from "@/components/ui/combobox";
 import { FileDropZone } from "@/components/file-drop-zone";
 import { useQuery } from "@tanstack/react-query";
-import { useAgentFormState, type CreateAgentInitialValues } from "@/hooks/use-agent-form-state";
-import type { DraftCommandConfig } from "@/hooks/use-agent-commands-query";
+import type { CreateAgentInitialValues } from "@/hooks/use-agent-form-state";
 import {
   CHECKOUT_STATUS_STALE_TIME,
   checkoutStatusQueryKey,
@@ -65,6 +64,7 @@ const DRAFT_CAPABILITIES: AgentCapabilityFlags = {
   supportsMcpServers: false,
   supportsReasoningStream: false,
   supportsToolInvocations: false,
+  supportsTerminalMode: false,
 };
 const PROVIDER_DEFINITION_MAP = new Map(
   AGENT_PROVIDER_DEFINITIONS.map((definition) => [definition.id, definition]),
@@ -202,37 +202,45 @@ function DraftAgentScreenContent({
     return values;
   }, [resolvedMode, resolvedModel, resolvedProvider, resolvedThinkingOptionId, resolvedWorkingDir]);
 
+  const draftIdRef = useRef(generateDraftId());
+  const draftAgentIdRef = useRef(generateDraftId());
+  const draftInput = useAgentInputDraft(
+    {
+      draftKey: ({ selectedServerId }) =>
+        buildDraftStoreKey({
+          serverId: selectedServerId ?? "",
+          agentId: draftAgentIdRef.current,
+          draftId: draftIdRef.current,
+        }),
+      composer: {
+        initialServerId: resolvedServerId ?? null,
+        initialValues,
+        isVisible,
+        onlineServerIds,
+      },
+    },
+  );
+  const composerState = draftInput.composerState;
+  if (!composerState) {
+    throw new Error("Draft agent composer state is required");
+  }
+
   const {
     selectedServerId,
     setSelectedServerIdFromUser,
-    selectedProvider,
-    setProviderFromUser,
-    selectedMode,
-    setModeFromUser,
-    selectedModel,
-    setModelFromUser,
-    selectedThinkingOptionId,
-    setThinkingOptionFromUser,
+    providerDefinitions,
     workingDir,
     setWorkingDirFromUser,
-    providerDefinitions,
     modeOptions,
-    availableModels,
-    allProviderModels,
-    isAllModelsLoading,
-    availableThinkingOptions,
     isModelLoading,
     modelError,
     refreshProviderModels,
-    setProviderAndModelFromUser,
     persistFormPreferences,
-  } = useAgentFormState({
-    initialServerId: resolvedServerId ?? null,
-    initialValues,
-    isVisible,
-    isCreateFlow: true,
-    onlineServerIds,
-  });
+    effectiveModelId,
+    effectiveThinkingOptionId,
+    commandDraftConfig,
+    statusControls,
+  } = composerState;
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
@@ -245,15 +253,6 @@ function DraftAgentScreenContent({
   );
   const dragHandlers = useDesktopDragHandlers();
   const isExplorerOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
-  const draftIdRef = useRef(generateDraftId());
-  const draftAgentIdRef = useRef(generateDraftId());
-  const draftInput = useAgentInputDraft(
-    buildDraftStoreKey({
-      serverId: selectedServerId ?? "",
-      agentId: draftAgentIdRef.current,
-      draftId: draftIdRef.current,
-    }),
-  );
 
   const [worktreeMode, setWorktreeMode] = useState<"none" | "create" | "attach">(
     initialWorktreeMode,
@@ -744,47 +743,6 @@ function DraftAgentScreenContent({
   }, [baseBranch, branchSearchQuery, branchSuggestionsQuery.data, checkout, worktreeOptions]);
 
   const createAgentClient = sessionClient;
-  const effectiveDraftModelId = useMemo(() => {
-    if (selectedModel.trim()) {
-      return selectedModel.trim();
-    }
-    return availableModels.find((model) => model.isDefault)?.id ?? availableModels[0]?.id ?? "";
-  }, [availableModels, selectedModel]);
-  const effectiveDraftThinkingOptionId = useMemo(() => {
-    if (selectedThinkingOptionId.trim()) {
-      return selectedThinkingOptionId.trim();
-    }
-    const selectedModelDefinition =
-      availableModels.find((model) => model.id === effectiveDraftModelId) ?? null;
-    return selectedModelDefinition?.defaultThinkingOptionId ?? "";
-  }, [availableModels, effectiveDraftModelId, selectedThinkingOptionId]);
-  const draftCommandConfig = useMemo<DraftCommandConfig | undefined>(() => {
-    const cwd = (
-      isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : workingDir
-    ).trim();
-    if (!cwd) {
-      return undefined;
-    }
-
-    return {
-      provider: selectedProvider,
-      cwd,
-      ...(modeOptions.length > 0 && selectedMode !== "" ? { modeId: selectedMode } : {}),
-      ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
-      ...(effectiveDraftThinkingOptionId
-        ? { thinkingOptionId: effectiveDraftThinkingOptionId }
-        : {}),
-    };
-  }, [
-    effectiveDraftModelId,
-    effectiveDraftThinkingOptionId,
-    isAttachWorktree,
-    modeOptions.length,
-    selectedMode,
-    selectedProvider,
-    selectedWorktreePath,
-    workingDir,
-  ]);
 
   const {
     formErrorMessage,
@@ -818,7 +776,7 @@ function DraftAgentScreenContent({
       if (isModelLoading) {
         return "Model defaults are still loading";
       }
-      if (!effectiveDraftModelId) {
+      if (!effectiveModelId) {
         return "No model is available for the selected provider";
       }
       if (isAttachWorktree && !selectedWorktreePath) {
@@ -851,15 +809,19 @@ function DraftAgentScreenContent({
       const cwd =
         (isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : workingDir).trim() ||
         ".";
-      const provider = selectedProvider;
-      const model = effectiveDraftModelId || null;
-      const thinkingOptionId = effectiveDraftThinkingOptionId || null;
-      const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : null;
+      const provider = composerState.selectedProvider;
+      const model = effectiveModelId || null;
+      const thinkingOptionId = effectiveThinkingOptionId || null;
+      const modeId =
+        composerState.modeOptions.length > 0 && composerState.selectedMode !== ""
+          ? composerState.selectedMode
+          : null;
 
       return {
         serverId,
         id: draftAgentIdRef.current,
         provider,
+        terminal: false,
         status: "running",
         createdAt: now,
         updatedAt: now,
@@ -888,14 +850,17 @@ function DraftAgentScreenContent({
       const resolvedWorkingDir =
         isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : trimmedPath;
 
-      const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;
+      const modeId =
+        composerState.modeOptions.length > 0 && composerState.selectedMode !== ""
+          ? composerState.selectedMode
+          : undefined;
       const config: AgentSessionConfig = {
-        provider: selectedProvider,
+        provider: composerState.selectedProvider,
         cwd: resolvedWorkingDir,
         ...(modeId ? { modeId } : {}),
-        ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
-        ...(effectiveDraftThinkingOptionId
-          ? { thinkingOptionId: effectiveDraftThinkingOptionId }
+        ...(effectiveModelId ? { model: effectiveModelId } : {}),
+        ...(effectiveThinkingOptionId
+          ? { thinkingOptionId: effectiveThinkingOptionId }
           : {}),
       };
 
@@ -1216,7 +1181,7 @@ function DraftAgentScreenContent({
             )}
           </Animated.View>
           <View style={styles.inputAreaWrapper}>
-            <AgentInputArea
+            <Composer
               agentId={draftAgentIdRef.current}
               serverId={selectedServerId ?? ""}
               isInputActive={isFocused}
@@ -1230,24 +1195,9 @@ function DraftAgentScreenContent({
               clearDraft={draftInput.clear}
               autoFocus={!isSubmitting}
               onAddImages={handleAddImagesCallback}
-              commandDraftConfig={draftCommandConfig}
+              commandDraftConfig={commandDraftConfig}
               statusControls={{
-                providerDefinitions,
-                selectedProvider,
-                onSelectProvider: setProviderFromUser,
-                modeOptions,
-                selectedMode,
-                onSelectMode: setModeFromUser,
-                models: availableModels,
-                selectedModel,
-                onSelectModel: setModelFromUser,
-                isModelLoading,
-                allProviderModels,
-                isAllModelsLoading,
-                onSelectProviderAndModel: setProviderAndModelFromUser,
-                thinkingOptions: availableThinkingOptions,
-                selectedThinkingOptionId,
-                onSelectThinkingOption: setThinkingOptionFromUser,
+                ...statusControls,
                 disabled: isSubmitting,
               }}
             />

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

@@ -1,27 +1,22 @@
 import { useEffect } from "react";
-import { View, Text, Pressable } from "react-native";
-import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { View, Text } from "react-native";
+import { StyleSheet, UnistylesRuntime } from "react-native-unistyles";
 import { FolderOpen } from "lucide-react-native";
 import { PaseoLogo } from "@/components/icons/paseo-logo";
-import { SidebarMenuToggle } from "@/components/headers/menu-header";
+import { Button } from "@/components/ui/button";
+import { MenuHeader } from "@/components/headers/menu-header";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
 import { usePanelStore } from "@/stores/panel-store";
-import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window";
+import { useSessionStore } from "@/stores/session-store";
+import { useDesktopDragHandlers } from "@/utils/desktop-window";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
-  const { theme } = useUnistyles();
-  const insets = useSafeAreaInsets();
-  const trafficLightPadding = useTrafficLightPadding();
-  const desktopAgentListOpen = usePanelStore((s) => s.desktop.agentListOpen);
   const openAgentList = usePanelStore((s) => s.openAgentList);
   const openProjectPicker = useOpenProjectPicker(serverId);
+  const hasHydrated = useSessionStore((s) => s.sessions[serverId]?.hasHydratedWorkspaces ?? false);
+  const hasProjects = useSessionStore((s) => (s.sessions[serverId]?.workspaces?.size ?? 0) > 0);
 
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const collapsedSidebarInset =
-    !isMobile && !desktopAgentListOpen && trafficLightPadding.side
-      ? trafficLightPadding
-      : { left: 0, right: 0 };
   const dragHandlers = useDesktopDragHandlers();
 
   useEffect(() => {
@@ -31,23 +26,25 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
   }, [isMobile, openAgentList]);
 
   return (
-    <View style={styles.container} {...dragHandlers}>
-      <View style={[styles.menuToggle, { paddingTop: insets.top, paddingLeft: collapsedSidebarInset.left, paddingRight: collapsedSidebarInset.right }]}>
-        <SidebarMenuToggle />
-      </View>
-      <View style={styles.content}>
-        <PaseoLogo size={56} />
-        <Text style={styles.heading}>What shall we build today?</Text>
-        <Pressable
-          style={({ hovered }) => [styles.openButton, hovered && styles.openButtonHovered]}
-          onPress={() => {
-            void openProjectPicker();
-          }}
-          testID="open-project-submit"
-        >
-          <FolderOpen size={16} color={theme.colors.foregroundMuted} />
-          <Text style={styles.openButtonText}>Add a project</Text>
-        </Pressable>
+    <View style={styles.container}>
+      <MenuHeader borderless />
+      <View style={styles.content} {...dragHandlers}>
+        <View style={styles.logo}>
+          <PaseoLogo size={56} />
+        </View>
+        <View style={styles.headingGroup}>
+          <Text style={styles.heading}>What shall we build today?</Text>
+          {hasHydrated && !hasProjects ? (
+            <Text style={styles.subtitle}>
+              Add a project folder to start running agents on your codebase
+            </Text>
+          ) : null}
+        </View>
+        <View style={styles.cta}>
+          <Button variant="default" leftIcon={FolderOpen} onPress={() => void openProjectPicker()} testID="open-project-submit">
+            Add a project
+          </Button>
+        </View>
       </View>
     </View>
   );
@@ -59,43 +56,32 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface0,
     userSelect: "none",
   },
-  menuToggle: {
-    position: "absolute",
-    top: theme.spacing[3],
-    left: theme.spacing[3],
-    zIndex: 1,
-  },
   content: {
     flexGrow: 1,
     justifyContent: "center",
     alignItems: "center",
-    gap: theme.spacing[6],
+    gap: 0,
     padding: theme.spacing[6],
   },
+  logo: {
+    marginBottom: theme.spacing[8],
+  },
+  headingGroup: {
+    alignItems: "center",
+    gap: theme.spacing[3],
+  },
+  cta: {
+    marginTop: theme.spacing[12],
+  },
   heading: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize["2xl"],
     fontWeight: theme.fontWeight.normal,
     textAlign: "center",
   },
-  openButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[2],
-    paddingVertical: theme.spacing[3],
-    paddingHorizontal: theme.spacing[4],
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: "transparent",
-  },
-  openButtonHovered: {
-    borderColor: theme.colors.borderAccent,
-    backgroundColor: theme.colors.surface1,
-  },
-  openButtonText: {
+  subtitle: {
     color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.normal,
+    fontSize: theme.fontSize.base,
+    textAlign: "center",
   },
 }));

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

@@ -1,10 +1,14 @@
 import { useMemo, useState, useCallback, useEffect } from "react";
-import { View } from "react-native";
+import { View, Text } from "react-native";
 import { useIsFocused } from "@react-navigation/native";
+import { router } from "expo-router";
 import { StyleSheet } from "react-native-unistyles";
+import { ChevronLeft } from "lucide-react-native";
 import { MenuHeader } from "@/components/headers/menu-header";
+import { Button } from "@/components/ui/button";
 import { AgentList } from "@/components/agent-list";
 import { useAllAgentsList } from "@/hooks/use-all-agents-list";
+import { buildHostOpenProjectRoute } from "@/utils/host-routes";
 
 export function SessionsScreen({ serverId }: { serverId: string }) {
   const isFocused = useIsFocused();
@@ -44,13 +48,26 @@ function SessionsScreenContent({ serverId }: { serverId: string }) {
   return (
     <View style={styles.container}>
       <MenuHeader title="Sessions" />
-      <AgentList
-        agents={sortedAgents}
-        showCheckoutInfo={false}
-        isRefreshing={isManualRefresh && isRevalidating}
-        onRefresh={handleRefresh}
-        showAttentionIndicator={false}
-      />
+      {sortedAgents.length === 0 ? (
+        <View style={styles.emptyContainer}>
+          <Text style={styles.emptyText}>No sessions yet</Text>
+          <Button
+            variant="ghost"
+            leftIcon={ChevronLeft}
+            onPress={() => router.navigate(buildHostOpenProjectRoute(serverId) as any)}
+          >
+            Back
+          </Button>
+        </View>
+      ) : (
+        <AgentList
+          agents={sortedAgents}
+          showCheckoutInfo={false}
+          isRefreshing={isManualRefresh && isRevalidating}
+          onRefresh={handleRefresh}
+          showAttentionIndicator={false}
+        />
+      )}
     </View>
   );
 }
@@ -60,4 +77,15 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     backgroundColor: theme.colors.surface0,
   },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.spacing[6],
+    padding: theme.spacing[6],
+  },
+  emptyText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.lg,
+  },
 }));

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

@@ -896,12 +896,6 @@ export default function SettingsScreen() {
   const handleThemeChange = useCallback(
     (newTheme: AppSettings["theme"]) => {
       void updateSettings({ theme: newTheme });
-      if (newTheme === "auto") {
-        UnistylesRuntime.setAdaptiveThemes(true);
-      } else {
-        UnistylesRuntime.setAdaptiveThemes(false);
-        UnistylesRuntime.setTheme(newTheme);
-      }
     },
     [updateSettings],
   );

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

@@ -1,29 +1,318 @@
-import { Text, View } from "react-native";
-import { StyleSheet } from "react-native-unistyles";
+import { useEffect, useMemo, useState } from "react";
+import { ActivityIndicator, Platform, ScrollView, Text, View } from "react-native";
+import * as Clipboard from "expo-clipboard";
+import { openExternalUrl } from "@/utils/open-external-url";
+import { BookOpen, Check, Copy, RotateCw, TriangleAlert } from "lucide-react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { PaseoLogo } from "@/components/icons/paseo-logo";
+import { Button } from "@/components/ui/button";
+import { Fonts } from "@/constants/theme";
+import {
+  getDesktopDaemonLogs,
+  type DesktopDaemonLogs,
+} from "@/desktop/daemon/desktop-daemon";
 import { useDesktopDragHandlers } from "@/utils/desktop-window";
 
+type StartupSplashScreenProps = {
+  bootstrapState?: {
+    phase: "starting-daemon" | "connecting" | "online" | "error";
+    error: string | null;
+    retry: () => void;
+  };
+};
+
+const GITHUB_ISSUE_URL = "https://github.com/getpaseo/paseo/issues/new";
+const DOCS_URL = "https://paseo.sh/docs";
+
 const styles = StyleSheet.create((theme) => ({
   container: {
     flex: 1,
-    justifyContent: "center",
     alignItems: "center",
+    justifyContent: "center",
     backgroundColor: theme.colors.surface0,
+    paddingHorizontal: theme.spacing[8],
+    paddingVertical: theme.spacing[8],
   },
-  status: {
+  containerError: {
+    justifyContent: "flex-start",
+    paddingTop: theme.spacing[16],
+  },
+  centeredContent: {
+    alignItems: "center",
+    justifyContent: "center",
+    maxWidth: 520,
+    width: "100%",
+  },
+  errorContent: {
+    alignItems: "stretch",
+    maxWidth: 720,
+    width: "100%",
+    gap: theme.spacing[6],
+  },
+  errorHeader: {
+    alignItems: "flex-start",
+  },
+  title: {
+    marginTop: theme.spacing[8],
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize["3xl"],
+    fontWeight: theme.fontWeight.semibold,
+    textAlign: "center",
+  },
+  titleError: {
+    textAlign: "left",
+  },
+  subtitleRow: {
+    marginTop: theme.spacing[4],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+  },
+  progressSteps: {
+    marginTop: theme.spacing[4],
+    gap: theme.spacing[3],
+    width: "100%",
+  },
+  progressStepRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[3],
+  },
+  subtitle: {
     marginTop: theme.spacing[8],
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.lg,
+    textAlign: "center",
+  },
+  subtitleInline: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.lg,
+    textAlign: "center",
+  },
+  errorDescription: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.base,
+    lineHeight: 22,
+  },
+  errorMessage: {
+    color: theme.colors.destructive,
+    fontSize: theme.fontSize.sm,
+    lineHeight: 20,
+    fontFamily: Fonts.mono,
+  },
+  logsMeta: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.sm,
+  },
+  logsContainer: {
+    height: 200,
+    borderRadius: theme.borderRadius.xl,
+    backgroundColor: theme.colors.surface1,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+    overflow: "hidden",
+  },
+  logsScroll: {
+    flexGrow: 0,
+  },
+  logsContent: {
+    padding: theme.spacing[4],
+  },
+  logsText: {
+    fontFamily: Fonts.mono,
+    fontSize: theme.fontSize.xs,
+    color: theme.colors.foreground,
+    lineHeight: 18,
+    ...(Platform.OS === "web"
+      ? {
+          whiteSpace: "pre",
+          overflowWrap: "normal",
+        }
+      : null),
+  },
+  actionRow: {
+    flexDirection: "row",
+    gap: theme.spacing[3],
+    flexWrap: "wrap",
   },
 }));
 
-export function StartupSplashScreen() {
+export function StartupSplashScreen({ bootstrapState }: StartupSplashScreenProps) {
+  const { theme } = useUnistyles();
   const dragHandlers = useDesktopDragHandlers();
+  const [daemonLogs, setDaemonLogs] = useState<DesktopDaemonLogs | null>(null);
+  const [logsError, setLogsError] = useState<string | null>(null);
+  const [isLoadingLogs, setIsLoadingLogs] = useState(false);
+
+  const phase = bootstrapState?.phase;
+  const isError = phase === "error";
+  const isSimpleSplash = bootstrapState === undefined;
+
+  useEffect(() => {
+    if (!isError) {
+      setDaemonLogs(null);
+      setLogsError(null);
+      setIsLoadingLogs(false);
+      return;
+    }
+
+    let isCancelled = false;
+    setIsLoadingLogs(true);
+    setLogsError(null);
+
+    void getDesktopDaemonLogs()
+      .then((logs) => {
+        if (isCancelled) {
+          return;
+        }
+        setDaemonLogs(logs);
+      })
+      .catch((error) => {
+        if (isCancelled) {
+          return;
+        }
+        const message = error instanceof Error ? error.message : String(error);
+        setDaemonLogs(null);
+        setLogsError(`Unable to load daemon logs: ${message}`);
+      })
+      .finally(() => {
+        if (!isCancelled) {
+          setIsLoadingLogs(false);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [isError]);
+
+  const progressSteps =
+    phase === "starting-daemon"
+      ? [{ key: "starting-daemon", label: "Starting local server...", status: "active" as const }]
+      : phase === "connecting"
+        ? [
+            { key: "starting-daemon", label: "Started local server", status: "complete" as const },
+            { key: "connecting", label: "Connecting to local server...", status: "active" as const },
+          ]
+        : [
+            { key: "starting-daemon", label: "Started local server", status: "complete" as const },
+            { key: "connecting", label: "Connected to local server", status: "complete" as const },
+          ];
+
+  const logsText = useMemo(() => {
+    if (isLoadingLogs) {
+      return "Loading daemon logs...";
+    }
+    if (daemonLogs?.contents) {
+      return daemonLogs.contents;
+    }
+    if (logsError) {
+      return logsError;
+    }
+    return "No daemon logs available.";
+  }, [daemonLogs?.contents, isLoadingLogs, logsError]);
+
+  const handleCopyLogs = () => {
+    const payload = daemonLogs?.logPath
+      ? `${daemonLogs.logPath}\n\n${daemonLogs.contents}`
+      : logsText;
+    void Clipboard.setStringAsync(payload);
+  };
+
+  if (isSimpleSplash) {
+    return (
+      <View style={styles.container} {...dragHandlers}>
+        <PaseoLogo size={96} />
+        <Text style={styles.subtitle}>Starting up…</Text>
+      </View>
+    );
+  }
+
+  if (!isError) {
+    return (
+      <View style={styles.container} {...dragHandlers}>
+        <View style={styles.centeredContent}>
+          <PaseoLogo size={96} />
+          <Text style={styles.title}>Welcome to Paseo</Text>
+          <View style={styles.progressSteps}>
+            {progressSteps.map((step) => (
+              <View key={step.key} style={styles.progressStepRow}>
+                {step.status === "complete" ? (
+                  <Check size={18} color={theme.colors.success} />
+                ) : (
+                  <ActivityIndicator color={theme.colors.accent} />
+                )}
+                <Text style={styles.subtitleInline}>{step.label}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      </View>
+    );
+  }
 
   return (
-    <View style={styles.container} {...dragHandlers}>
-      <PaseoLogo size={96} />
-      <Text style={styles.status}>Starting up…</Text>
+    <View style={[styles.container, styles.containerError]} {...dragHandlers}>
+      <View style={styles.errorContent}>
+        <View style={styles.errorHeader}>
+          <PaseoLogo size={64} />
+          <Text style={[styles.title, styles.titleError]}>Something went wrong</Text>
+        </View>
+
+        <Text style={styles.errorDescription}>
+          The local server failed to start. If this keeps happening, please report the issue on GitHub and include the logs below.
+        </Text>
+
+        <Text style={styles.errorMessage}>
+          {bootstrapState.error}
+        </Text>
+
+        {daemonLogs?.logPath ? <Text style={styles.logsMeta}>{daemonLogs.logPath}</Text> : null}
+
+        <View style={styles.logsContainer}>
+          <ScrollView
+            style={styles.logsScroll}
+            contentContainerStyle={styles.logsContent}
+            showsVerticalScrollIndicator
+          >
+            <Text selectable style={styles.logsText}>
+              {logsText}
+            </Text>
+          </ScrollView>
+        </View>
+
+        <View style={styles.actionRow}>
+          <Button
+            variant="secondary"
+            leftIcon={<Copy size={16} color={theme.colors.foreground} />}
+            onPress={handleCopyLogs}
+          >
+            Copy logs
+          </Button>
+          <Button
+            variant="outline"
+            leftIcon={<TriangleAlert size={16} color={theme.colors.foreground} />}
+            onPress={() => void openExternalUrl(GITHUB_ISSUE_URL)}
+          >
+            Open GitHub issue
+          </Button>
+          <Button
+            variant="outline"
+            leftIcon={<BookOpen size={16} color={theme.colors.foreground} />}
+            onPress={() => void openExternalUrl(DOCS_URL)}
+          >
+            Docs
+          </Button>
+          <Button
+            variant="default"
+            leftIcon={<RotateCw size={16} color={theme.colors.palette.white} />}
+            onPress={bootstrapState.retry}
+          >
+            Retry
+          </Button>
+        </View>
+      </View>
     </View>
   );
 }

packages/app/src/screens/workspace/workspace-agent-visibility.test.ts

@@ -19,6 +19,7 @@ function makeAgent(input: {
     serverId: "srv",
     id: input.id,
     provider: "codex",
+    terminal: false,
     status: "idle",
     createdAt,
     updatedAt: createdAt,
@@ -31,6 +32,7 @@ function makeAgent(input: {
       supportsMcpServers: true,
       supportsReasoningStream: true,
       supportsToolInvocations: true,
+      supportsTerminalMode: false,
     },
     currentModeId: null,
     availableModes: [],

packages/app/src/screens/workspace/workspace-desktop-tabs-row.tsx

@@ -8,7 +8,7 @@ import {
   View,
   type LayoutChangeEvent,
 } from "react-native";
-import { Columns2, Rows2, SquarePen, SquareTerminal, X } from "lucide-react-native";
+import { Columns2, Plus, Rows2, X } from "lucide-react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { SortableInlineList } from "@/components/sortable-inline-list";
 import {
@@ -36,11 +36,6 @@ import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-
 
 const DROPDOWN_WIDTH = 220;
 const LOADING_TAB_LABEL_SKELETON_WIDTH = 80;
-type NewTabOptionId = "__new_tab_agent__" | "__new_tab_terminal__";
-type NewTabSelection = {
-  optionId: NewTabOptionId;
-  paneId?: string;
-};
 
 export interface WorkspaceDesktopTabRowItem {
   tab: WorkspaceTabDescriptor;
@@ -64,10 +59,8 @@ type WorkspaceDesktopTabsRowProps = {
   onCloseTabsToLeft: (tabId: string) => Promise<void> | void;
   onCloseTabsToRight: (tabId: string) => Promise<void> | void;
   onCloseOtherTabs: (tabId: string) => Promise<void> | void;
-  onSelectNewTabOption: (selection: NewTabSelection) => void;
-  newTabAgentOptionId: NewTabOptionId;
+  onCreateLauncherTab: (input: { paneId?: string }) => void;
   onReorderTabs: (nextTabs: WorkspaceTabDescriptor[]) => void;
-  onNewTerminalTab: (input: { paneId?: string }) => void;
   onSplitRight: () => void;
   onSplitDown: () => void;
   externalDndContext?: boolean;
@@ -76,6 +69,9 @@ type WorkspaceDesktopTabsRowProps = {
 };
 
 function getFallbackTabLabel(tab: WorkspaceTabDescriptor): string {
+  if (tab.target.kind === "launcher") {
+    return "New Tab";
+  }
   if (tab.target.kind === "draft") {
     return "New Agent";
   }
@@ -298,10 +294,8 @@ export function WorkspaceDesktopTabsRow({
   onCloseTabsToLeft,
   onCloseTabsToRight,
   onCloseOtherTabs,
-  onSelectNewTabOption,
-  newTabAgentOptionId,
+  onCreateLauncherTab,
   onReorderTabs,
-  onNewTerminalTab,
   onSplitRight,
   onSplitDown,
   externalDndContext = false,
@@ -309,8 +303,7 @@ export function WorkspaceDesktopTabsRow({
   tabDropPreviewIndex = null,
 }: WorkspaceDesktopTabsRowProps) {
   const { theme } = useUnistyles();
-  const newAgentTabKeys = useShortcutKeys("workspace-tab-new");
-  const newTerminalTabKeys = useShortcutKeys("workspace-terminal-new");
+  const newTabKeys = useShortcutKeys("workspace-tab-new");
   const splitRightKeys = useShortcutKeys("workspace-pane-split-right");
   const splitDownKeys = useShortcutKeys("workspace-pane-split-down");
   const [tabsContainerWidth, setTabsContainerWidth] = useState<number>(0);
@@ -437,48 +430,22 @@ export function WorkspaceDesktopTabsRow({
       <View style={styles.tabsActions} onLayout={handleTabsActionsLayout}>
         <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
           <TooltipTrigger
-            testID="workspace-new-agent-tab"
-            onPress={() =>
-              onSelectNewTabOption({
-                optionId: newTabAgentOptionId,
-                paneId,
-              })
-            }
+            testID="workspace-new-tab"
+            onPress={() => onCreateLauncherTab({ paneId })}
             accessibilityRole="button"
-            accessibilityLabel="New agent tab"
+            accessibilityLabel="New tab"
             style={({ hovered, pressed }) => [
               styles.newTabActionButton,
               (hovered || pressed) && styles.newTabActionButtonHovered,
             ]}
           >
-            <SquarePen size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
+            <Plus size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </TooltipTrigger>
           <TooltipContent side="bottom" align="center" offset={8}>
             <View style={styles.newTabTooltipRow}>
-              <Text style={styles.newTabTooltipText}>New agent tab</Text>
-              {newAgentTabKeys ? (
-                <Shortcut chord={newAgentTabKeys} style={styles.newTabTooltipShortcut} />
-              ) : null}
-            </View>
-          </TooltipContent>
-        </Tooltip>
-        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-          <TooltipTrigger
-            onPress={() => onNewTerminalTab({ paneId })}
-            accessibilityRole="button"
-            accessibilityLabel="New terminal tab"
-            style={({ hovered, pressed }) => [
-              styles.newTabActionButton,
-              (hovered || pressed) && styles.newTabActionButtonHovered,
-            ]}
-          >
-            <SquareTerminal size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
-          </TooltipTrigger>
-          <TooltipContent side="bottom" align="center" offset={8}>
-            <View style={styles.newTabTooltipRow}>
-              <Text style={styles.newTabTooltipText}>New terminal tab</Text>
-              {newTerminalTabKeys ? (
-                <Shortcut chord={newTerminalTabKeys} style={styles.newTabTooltipShortcut} />
+              <Text style={styles.newTabTooltipText}>New tab</Text>
+              {newTabKeys ? (
+                <Shortcut chord={newTabKeys} style={styles.newTabTooltipShortcut} />
               ) : null}
             </View>
           </TooltipContent>

packages/app/src/screens/workspace/workspace-draft-agent-config.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { buildWorkspaceDraftAgentConfig } from "./workspace-draft-agent-config";
+
+describe("workspace-draft-agent-config", () => {
+  it("builds chat-only config for workspace draft agents", () => {
+    expect(
+      buildWorkspaceDraftAgentConfig({
+        provider: "codex",
+        cwd: "/tmp/project",
+        modeId: "auto",
+        model: "gpt-5.4",
+        thinkingOptionId: "high",
+      }),
+    ).toEqual({
+      provider: "codex",
+      cwd: "/tmp/project",
+      modeId: "auto",
+      model: "gpt-5.4",
+      thinkingOptionId: "high",
+    });
+  });
+});

packages/app/src/screens/workspace/workspace-draft-agent-config.ts

@@ -0,0 +1,17 @@
+import type { AgentSessionConfig } from "@server/server/agent/agent-sdk-types";
+
+export function buildWorkspaceDraftAgentConfig(input: {
+  provider: AgentSessionConfig["provider"];
+  cwd: string;
+  modeId?: string;
+  model?: string;
+  thinkingOptionId?: string;
+}): AgentSessionConfig {
+  return {
+    provider: input.provider,
+    cwd: input.cwd,
+    ...(input.modeId ? { modeId: input.modeId } : {}),
+    ...(input.model ? { model: input.model } : {}),
+    ...(input.thinkingOptionId ? { thinkingOptionId: input.thinkingOptionId } : {}),
+  };
+}

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

@@ -1,22 +1,19 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { Keyboard, Platform, ScrollView, Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
-import { AgentInputArea } from "@/components/agent-input-area";
+import { Composer } from "@/components/composer";
 import { FileDropZone } from "@/components/file-drop-zone";
 import { AgentStreamView } from "@/components/agent-stream-view";
 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 { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { buildWorkspaceDraftAgentConfig } from "@/screens/workspace/workspace-draft-agent-config";
 import { buildDraftStoreKey } from "@/stores/draft-keys";
 import type { Agent } from "@/stores/session-store";
 import { encodeImages } from "@/utils/encode-images";
 import { shouldAutoFocusWorkspaceDraftComposer } from "@/screens/workspace/workspace-draft-pane-focus";
-import type {
-  AgentCapabilityFlags,
-  AgentSessionConfig,
-} from "@server/server/agent/agent-sdk-types";
+import type { AgentCapabilityFlags } from "@server/server/agent/agent-sdk-types";
 import type { AgentSnapshotPayload } from "@server/shared/messages";
 
 const EMPTY_PENDING_PERMISSIONS = new Map();
@@ -27,6 +24,7 @@ const DRAFT_CAPABILITIES: AgentCapabilityFlags = {
   supportsMcpServers: false,
   supportsReasoningStream: false,
   supportsToolInvocations: false,
+  supportsTerminalMode: false,
 };
 
 type WorkspaceDraftAgentTabProps = {
@@ -51,65 +49,31 @@ export function WorkspaceDraftAgentTab({
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
   const addImagesRef = useRef<((images: ImageAttachment[]) => void) | null>(null);
-  const draftInput = useAgentInputDraft(
-    buildDraftStoreKey({
-      serverId,
-      agentId: tabId,
-      draftId,
-    }),
+  const draftStoreKey = useMemo(
+    () =>
+      buildDraftStoreKey({
+        serverId,
+        agentId: tabId,
+        draftId,
+      }),
+    [draftId, serverId, tabId],
   );
-
-  const {
-    selectedProvider,
-    setProviderFromUser,
-    selectedMode,
-    setModeFromUser,
-    selectedModel,
-    setModelFromUser,
-    selectedThinkingOptionId,
-    setThinkingOptionFromUser,
-    workingDir,
-    setWorkingDir,
-    providerDefinitions,
-    modeOptions,
-    availableModels,
-    allProviderModels,
-    isAllModelsLoading,
-    availableThinkingOptions,
-    isModelLoading,
-    setProviderAndModelFromUser,
-    persistFormPreferences,
-  } = useAgentFormState({
-    initialServerId: serverId,
-    initialValues: { workingDir: workspaceId },
-    isVisible: true,
-    isCreateFlow: true,
-    onlineServerIds: isConnected ? [serverId] : [],
-  });
-
-  // Lock working directory to workspace.
-  useEffect(() => {
-    if (workingDir.trim() === workspaceId.trim()) {
-      return;
-    }
-    setWorkingDir(workspaceId);
-  }, [setWorkingDir, workingDir, workspaceId]);
-
-  const effectiveDraftModelId = useMemo(() => {
-    if (selectedModel.trim()) {
-      return selectedModel.trim();
-    }
-    return availableModels.find((model) => model.isDefault)?.id ?? availableModels[0]?.id ?? "";
-  }, [availableModels, selectedModel]);
-
-  const effectiveDraftThinkingOptionId = useMemo(() => {
-    if (selectedThinkingOptionId.trim()) {
-      return selectedThinkingOptionId.trim();
-    }
-    const selectedModelDefinition =
-      availableModels.find((model) => model.id === effectiveDraftModelId) ?? null;
-    return selectedModelDefinition?.defaultThinkingOptionId ?? "";
-  }, [availableModels, effectiveDraftModelId, selectedThinkingOptionId]);
+  const draftInput = useAgentInputDraft(
+    {
+      draftKey: draftStoreKey,
+      composer: {
+        initialServerId: serverId,
+        initialValues: { workingDir: workspaceId },
+        isVisible: true,
+        onlineServerIds: isConnected ? [serverId] : [],
+        lockedWorkingDir: workspaceId,
+      },
+    },
+  );
+  const composerState = draftInput.composerState;
+  if (!composerState) {
+    throw new Error("Workspace draft composer state is required");
+  }
 
   const {
     formErrorMessage,
@@ -124,13 +88,13 @@ export function WorkspaceDraftAgentTab({
       if (!text.trim()) {
         return "Initial prompt is required";
       }
-      if (providerDefinitions.length === 0) {
+      if (composerState.providerDefinitions.length === 0) {
         return "No available providers on the selected host";
       }
-      if (isModelLoading) {
+      if (composerState.isModelLoading) {
         return "Model defaults are still loading";
       }
-      if (!effectiveDraftModelId) {
+      if (!composerState.effectiveModelId) {
         return "No model is available for the selected provider";
       }
       if (!client) {
@@ -139,7 +103,7 @@ export function WorkspaceDraftAgentTab({
       return null;
     },
     onBeforeSubmit: () => {
-      void persistFormPreferences();
+      void composerState.persistFormPreferences();
       if (Platform.OS === "web") {
         (document.activeElement as HTMLElement | null)?.blur?.();
       }
@@ -147,13 +111,17 @@ export function WorkspaceDraftAgentTab({
     },
     buildDraftAgent: (attempt) => {
       const now = attempt.timestamp;
-      const model = effectiveDraftModelId || null;
-      const thinkingOptionId = effectiveDraftThinkingOptionId || null;
-      const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : null;
+      const model = composerState.effectiveModelId || null;
+      const thinkingOptionId = composerState.effectiveThinkingOptionId || null;
+      const modeId =
+        composerState.modeOptions.length > 0 && composerState.selectedMode !== ""
+          ? composerState.selectedMode
+          : null;
       return {
         serverId,
         id: tabId,
-        provider: selectedProvider,
+        provider: composerState.selectedProvider,
+        terminal: false,
         status: "running",
         createdAt: now,
         updatedAt: now,
@@ -164,7 +132,7 @@ export function WorkspaceDraftAgentTab({
         availableModes: [],
         pendingPermissions: [],
         persistence: null,
-        runtimeInfo: { provider: selectedProvider, sessionId: null, model, modeId },
+        runtimeInfo: { provider: composerState.selectedProvider, sessionId: null, model, modeId },
         title: "Agent",
         cwd: workspaceId,
         model,
@@ -177,21 +145,20 @@ export function WorkspaceDraftAgentTab({
         throw new Error("Host is not connected");
       }
 
-      const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;
-      const config: AgentSessionConfig = {
-        provider: selectedProvider,
+      const config = buildWorkspaceDraftAgentConfig({
+        provider: composerState.selectedProvider,
         cwd: workspaceId,
-        ...(modeId ? { modeId } : {}),
-        ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
-        ...(effectiveDraftThinkingOptionId
-          ? { thinkingOptionId: effectiveDraftThinkingOptionId }
+        ...(composerState.modeOptions.length > 0 && composerState.selectedMode !== ""
+          ? { modeId: composerState.selectedMode }
           : {}),
-      };
+        model: composerState.effectiveModelId || undefined,
+        thinkingOptionId: composerState.effectiveThinkingOptionId || undefined,
+      });
 
       const imagesData = await encodeImages(images);
       const result = await client.createAgent({
         config,
-        initialPrompt: text,
+        ...(text ? { initialPrompt: text } : {}),
         clientMessageId: attempt.clientMessageId,
         ...(imagesData && imagesData.length > 0 ? { images: imagesData } : {}),
       });
@@ -206,25 +173,6 @@ export function WorkspaceDraftAgentTab({
     },
   });
 
-  const draftCommandConfig = useMemo(() => {
-    return {
-      provider: selectedProvider,
-      cwd: workspaceId,
-      ...(modeOptions.length > 0 && selectedMode !== "" ? { modeId: selectedMode } : {}),
-      ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
-      ...(effectiveDraftThinkingOptionId
-        ? { thinkingOptionId: effectiveDraftThinkingOptionId }
-        : {}),
-    };
-  }, [
-    effectiveDraftModelId,
-    effectiveDraftThinkingOptionId,
-    modeOptions.length,
-    selectedMode,
-    selectedProvider,
-    workspaceId,
-  ]);
-
   const handleFilesDropped = useCallback((files: ImageAttachment[]) => {
     addImagesRef.current?.(files);
   }, []);
@@ -265,11 +213,12 @@ export function WorkspaceDraftAgentTab({
         </View>
 
         <View style={styles.inputAreaWrapper}>
-          <AgentInputArea
+          <Composer
             agentId={tabId}
             serverId={serverId}
             isInputActive={isPaneFocused}
             onSubmitMessage={handleCreateFromInput}
+            allowEmptySubmit={false}
             isSubmitLoading={isSubmitting}
             blurOnSubmit={true}
             value={draftInput.text}
@@ -279,24 +228,9 @@ export function WorkspaceDraftAgentTab({
             clearDraft={draftInput.clear}
             autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
             onAddImages={handleAddImagesCallback}
-            commandDraftConfig={draftCommandConfig}
+            commandDraftConfig={composerState.commandDraftConfig}
             statusControls={{
-              providerDefinitions,
-              selectedProvider,
-              onSelectProvider: setProviderFromUser,
-              modeOptions,
-              selectedMode,
-              onSelectMode: setModeFromUser,
-              models: availableModels,
-              selectedModel,
-              onSelectModel: setModelFromUser,
-              isModelLoading,
-              allProviderModels,
-              isAllModelsLoading,
-              onSelectProviderAndModel: setProviderAndModelFromUser,
-              thinkingOptions: availableThinkingOptions,
-              selectedThinkingOptionId,
-              onSelectThinkingOption: setThinkingOptionFromUser,
+              ...composerState.statusControls,
               disabled: isSubmitting,
             }}
           />

packages/app/src/screens/workspace/workspace-pane-content.tsx

@@ -36,7 +36,7 @@ export function buildWorkspacePaneContentModel({
   const registration = getPanelRegistration(tab.kind);
   invariant(registration, `No panel registration for kind: ${tab.kind}`);
   return {
-    key: `${normalizedServerId}:${normalizedWorkspaceId}:${tab.tabId}`,
+    key: `${normalizedServerId}:${normalizedWorkspaceId}:${tab.tabId}:${tab.kind}`,
     Component: registration.component,
     paneContextValue: {
       serverId: normalizedServerId,

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

@@ -90,7 +90,6 @@ import {
 } from "@/screens/workspace/workspace-header-source";
 import {
   deriveWorkspaceAgentVisibility,
-  shouldPruneWorkspaceAgentTab,
   workspaceAgentVisibilityEqual,
 } from "@/screens/workspace/workspace-agent-visibility";
 import { deriveWorkspacePaneState } from "@/screens/workspace/workspace-pane-state";
@@ -107,11 +106,7 @@ import {
 import { findAdjacentPane } from "@/utils/split-navigation";
 
 const TERMINALS_QUERY_STALE_TIME = 5_000;
-const NEW_TAB_AGENT_OPTION_ID = "__new_tab_agent__";
-const NEW_TAB_TERMINAL_OPTION_ID = "__new_tab_terminal__";
-type NewTabOptionId = typeof NEW_TAB_AGENT_OPTION_ID | typeof NEW_TAB_TERMINAL_OPTION_ID;
 const EMPTY_UI_TABS: WorkspaceTab[] = [];
-const EMPTY_PINNED_AGENT_IDS = new Set<string>();
 const EMPTY_SET = new Set<string>();
 
 type WorkspaceScreenProps = {
@@ -136,6 +131,9 @@ function decodeSegment(value: string): string {
 }
 
 function getFallbackTabOptionLabel(tab: WorkspaceTabDescriptor): string {
+  if (tab.target.kind === "launcher") {
+    return "New Tab";
+  }
   if (tab.target.kind === "draft") {
     return "New Agent";
   }
@@ -149,6 +147,9 @@ function getFallbackTabOptionLabel(tab: WorkspaceTabDescriptor): string {
 }
 
 function getFallbackTabOptionDescription(tab: WorkspaceTabDescriptor): string {
+  if (tab.target.kind === "launcher") {
+    return "New Tab";
+  }
   if (tab.target.kind === "draft") {
     return "New Agent";
   }
@@ -798,10 +799,13 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     [workspaceLayout],
   );
   const openWorkspaceTab = useWorkspaceLayoutStore((state) => state.openTab);
+  const openWorkspaceLauncherTab = useWorkspaceLayoutStore((state) => state.openLauncherTab);
   const focusWorkspaceTab = useWorkspaceLayoutStore((state) => state.focusTab);
   const closeWorkspaceTab = useWorkspaceLayoutStore((state) => state.closeTab);
-  const unpinWorkspaceAgent = useWorkspaceLayoutStore((state) => state.unpinAgent);
   const retargetWorkspaceTab = useWorkspaceLayoutStore((state) => state.retargetTab);
+  const convertWorkspaceDraftToAgent = useWorkspaceLayoutStore((state) => state.convertDraftToAgent);
+  const reconcileWorkspaceTabs = useWorkspaceLayoutStore((state) => state.reconcileTabs);
+  const unpinWorkspaceAgent = useWorkspaceLayoutStore((state) => state.unpinAgent);
   const splitWorkspacePane = useWorkspaceLayoutStore((state) => state.splitPane);
   const splitWorkspacePaneEmpty = useWorkspaceLayoutStore((state) => state.splitPaneEmpty);
   const moveWorkspaceTabToPane = useWorkspaceLayoutStore((state) => state.moveTabToPane);
@@ -809,11 +813,6 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   const paneFocusSuppressedRef = useRef(false);
   const resizeWorkspaceSplit = useWorkspaceLayoutStore((state) => state.resizeSplit);
   const reorderWorkspaceTabsInPane = useWorkspaceLayoutStore((state) => state.reorderTabsInPane);
-  const pinnedAgentIds = useWorkspaceLayoutStore((state) =>
-    persistenceKey
-      ? (state.pinnedAgentIdsByWorkspace[persistenceKey] ?? EMPTY_PINNED_AGENT_IDS)
-      : EMPTY_PINNED_AGENT_IDS,
-  );
   const pendingByDraftId = useCreateFlowStore((state) => state.pendingByDraftId);
   const { closingTabIds, closeTab } = useCloseTabs();
   const closeWorkspaceTabWithCleanup = useCallback(
@@ -917,7 +916,6 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       return;
     }
 
-    const terminalIds = new Set(terminals.map((terminal) => terminal.id));
     const hasActivePendingDraftCreateInWorkspace = uiTabs.some((tab) => {
       if (tab.target.kind !== "draft") {
         return false;
@@ -926,57 +924,19 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       return pending?.serverId === normalizedServerId && pending.lifecycle === "active";
     });
 
-    for (const agentId of workspaceAgentVisibility.activeAgentIds) {
-      const representedByTarget = uiTabs.some(
-        (tab) => tab.target.kind === "agent" && tab.target.agentId === agentId,
-      );
-      const representedByDeterministicTabId = uiTabs.some(
-        (tab) => tab.tabId === `agent_${agentId}`,
-      );
-      if (
-        hasActivePendingDraftCreateInWorkspace &&
-        !representedByTarget &&
-        !representedByDeterministicTabId
-      ) {
-        continue;
-      }
-      ensureWorkspaceTab({ kind: "agent", agentId });
-    }
-    for (const terminal of terminals) {
-      ensureWorkspaceTab({ kind: "terminal", terminalId: terminal.id });
-    }
-
-    const canPruneAgentTabs = hasHydratedAgents;
-    const canPruneTerminalTabs = terminalsQuery.isSuccess;
-    for (const tab of uiTabs) {
-      if (
-        canPruneAgentTabs &&
-        tab.target.kind === "agent" &&
-        !pinnedAgentIds.has(tab.target.agentId) &&
-        shouldPruneWorkspaceAgentTab({
-          agentId: tab.target.agentId,
-          agentsHydrated: hasHydratedAgents,
-          knownAgentIds: workspaceAgentVisibility.knownAgentIds,
-          activeAgentIds: workspaceAgentVisibility.activeAgentIds,
-        })
-      ) {
-        closeWorkspaceTabWithCleanup({ tabId: tab.tabId, target: tab.target });
-      }
-      if (
-        canPruneTerminalTabs &&
-        tab.target.kind === "terminal" &&
-        !terminalIds.has(tab.target.terminalId)
-      ) {
-        closeWorkspaceTabWithCleanup({ tabId: tab.tabId, target: tab.target });
-      }
-    }
+    reconcileWorkspaceTabs(persistenceKey, {
+      agentsHydrated: hasHydratedAgents,
+      terminalsHydrated: terminalsQuery.isSuccess,
+      activeAgentIds: workspaceAgentVisibility.activeAgentIds,
+      knownAgentIds: workspaceAgentVisibility.knownAgentIds,
+      standaloneTerminalIds: terminals.map((terminal) => terminal.id),
+      hasActivePendingDraftCreate: hasActivePendingDraftCreateInWorkspace,
+    });
   }, [
-    closeWorkspaceTabWithCleanup,
-    ensureWorkspaceTab,
     hasHydratedAgents,
     pendingByDraftId,
-    pinnedAgentIds,
     persistenceKey,
+    reconcileWorkspaceTabs,
     terminals,
     terminalsQuery.isSuccess,
     uiTabs,
@@ -986,13 +946,6 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   const activeTabId = focusedPaneTabState.activeTabId;
   const activeTab = focusedPaneTabState.activeTab;
 
-  useEffect(() => {
-    if (!activeTabId || !persistenceKey) {
-      return;
-    }
-    focusWorkspaceTab(persistenceKey, activeTabId);
-  }, [activeTabId, focusWorkspaceTab, persistenceKey]);
-
   const tabs = useMemo<WorkspaceTabDescriptor[]>(
     () => focusedPaneTabState.tabs.map((tab) => tab.descriptor),
     [focusedPaneTabState.tabs],
@@ -1104,6 +1057,25 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     openWorkspaceDraftTab();
   }, [openWorkspaceDraftTab]);
 
+  const handleCreateLauncherTab = useCallback(
+    (input?: { paneId?: string }) => {
+      if (!persistenceKey) {
+        return null;
+      }
+
+      if (input?.paneId) {
+        focusWorkspacePane(persistenceKey, input.paneId);
+      }
+
+      const tabId = openWorkspaceLauncherTab(persistenceKey);
+      if (tabId) {
+        focusWorkspaceTab(persistenceKey, tabId);
+      }
+      return tabId;
+    },
+    [focusWorkspacePane, focusWorkspaceTab, openWorkspaceLauncherTab, persistenceKey],
+  );
+
   const handleCreateTerminal = useCallback(
     (input?: { paneId?: string }) => {
       if (createTerminalMutation.isPending) {
@@ -1124,21 +1096,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     [navigateToTabId],
   );
 
-  const handleSelectNewTabOption = useCallback(
-    (selection: { optionId: NewTabOptionId; paneId?: string }) => {
-      if (selection.paneId && persistenceKey) {
-        focusWorkspacePane(persistenceKey, selection.paneId);
-      }
-      if (selection.optionId === NEW_TAB_AGENT_OPTION_ID) {
-        handleCreateDraftTab();
-      } else if (selection.optionId === NEW_TAB_TERMINAL_OPTION_ID) {
-        handleCreateTerminal({ paneId: selection.paneId });
-      }
-    },
-    [focusWorkspacePane, handleCreateDraftTab, handleCreateTerminal, persistenceKey],
-  );
-
-  const handleCreateDraftSplit = useCallback(
+  const handleCreateLauncherSplit = useCallback(
     (input: { targetPaneId: string; position: "left" | "right" | "top" | "bottom" }) => {
       if (!persistenceKey) {
         return;
@@ -1149,10 +1107,9 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
         return;
       }
 
-      focusWorkspacePane(persistenceKey, paneId);
-      openWorkspaceDraftTab();
+      handleCreateLauncherTab({ paneId });
     },
-    [focusWorkspacePane, openWorkspaceDraftTab, persistenceKey, splitWorkspacePaneEmpty],
+    [handleCreateLauncherTab, persistenceKey, splitWorkspacePaneEmpty],
   );
 
   const killTerminalAsync = killTerminalMutation.mutateAsync;
@@ -1267,29 +1224,6 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     [allTabDescriptorsById, handleCloseAgentTab, handleCloseDraftOrFileTab, handleCloseTerminalTab],
   );
 
-  const prevCloseTabDeps = useRef({
-    allTabDescriptorsById,
-    handleCloseAgentTab,
-    handleCloseDraftOrFileTab,
-    handleCloseTerminalTab,
-  });
-  useEffect(() => {
-    const prev = prevCloseTabDeps.current;
-    const changed: string[] = [];
-    if (prev.allTabDescriptorsById !== allTabDescriptorsById) changed.push("allTabDescriptorsById");
-    if (prev.handleCloseAgentTab !== handleCloseAgentTab) changed.push("handleCloseAgentTab");
-    if (prev.handleCloseDraftOrFileTab !== handleCloseDraftOrFileTab)
-      changed.push("handleCloseDraftOrFileTab");
-    if (prev.handleCloseTerminalTab !== handleCloseTerminalTab)
-      changed.push("handleCloseTerminalTab");
-    if (changed.length > 0) console.log("[handleCloseTabById] deps changed:", changed.join(", "));
-    prevCloseTabDeps.current = {
-      allTabDescriptorsById,
-      handleCloseAgentTab,
-      handleCloseDraftOrFileTab,
-      handleCloseTerminalTab,
-    };
-  });
   const handleCopyAgentId = useCallback(
     async (agentId: string) => {
       if (!agentId) return;
@@ -1523,7 +1457,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
     (action: KeyboardActionDefinition): boolean => {
       switch (action.id) {
         case "workspace.tab.new":
-          handleCreateDraftTab();
+          handleCreateLauncherTab();
           return true;
         case "workspace.terminal.new":
           handleCreateTerminal();
@@ -1556,7 +1490,14 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           return false;
       }
     },
-    [activeTabId, handleCloseTabById, handleCreateDraftTab, handleCreateTerminal, navigateToTabId, tabs],
+    [
+      activeTabId,
+      handleCloseTabById,
+      handleCreateLauncherTab,
+      handleCreateTerminal,
+      navigateToTabId,
+      tabs,
+    ],
   );
 
   const handleWorkspacePaneAction = useCallback(
@@ -1571,7 +1512,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       }
 
       if (action.id === "workspace.pane.split.right") {
-        handleCreateDraftSplit({
+        handleCreateLauncherSplit({
           targetPaneId: focusedPane.id,
           position: "right",
         });
@@ -1579,7 +1520,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       }
 
       if (action.id === "workspace.pane.split.down") {
-        handleCreateDraftSplit({
+        handleCreateLauncherSplit({
           targetPaneId: focusedPane.id,
           position: "bottom",
         });
@@ -1649,7 +1590,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       allTabDescriptorsById,
       closeWorkspaceTabWithCleanup,
       focusWorkspacePane,
-      handleCreateDraftSplit,
+      handleCreateLauncherSplit,
       moveWorkspaceTabToPane,
       persistenceKey,
       focusedPaneTabState.activeTabId,
@@ -1732,6 +1673,10 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           if (!persistenceKey) {
             return;
           }
+          if (input.tab.kind === "draft" && target.kind === "agent") {
+            convertWorkspaceDraftToAgent(persistenceKey, input.tab.tabId, target.agentId);
+            return;
+          }
           retargetWorkspaceTab(persistenceKey, input.tab.tabId, target);
         },
         onOpenWorkspaceFile: (filePath) => {
@@ -1750,47 +1695,10 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       normalizedWorkspaceId,
       openWorkspaceTab,
       persistenceKey,
+      convertWorkspaceDraftToAgent,
       retargetWorkspaceTab,
     ],
   );
-  const prevBuildDeps = useRef({
-    handleCloseTabById,
-    handleOpenFileFromChat,
-    focusWorkspacePane,
-    navigateToTabId,
-    normalizedServerId,
-    normalizedWorkspaceId,
-    openWorkspaceTab,
-    persistenceKey,
-    retargetWorkspaceTab,
-  });
-  useEffect(() => {
-    const prev = prevBuildDeps.current;
-    const changed: string[] = [];
-    if (prev.handleCloseTabById !== handleCloseTabById) changed.push("handleCloseTabById");
-    if (prev.handleOpenFileFromChat !== handleOpenFileFromChat)
-      changed.push("handleOpenFileFromChat");
-    if (prev.focusWorkspacePane !== focusWorkspacePane) changed.push("focusWorkspacePane");
-    if (prev.navigateToTabId !== navigateToTabId) changed.push("navigateToTabId");
-    if (prev.normalizedServerId !== normalizedServerId) changed.push("normalizedServerId");
-    if (prev.normalizedWorkspaceId !== normalizedWorkspaceId) changed.push("normalizedWorkspaceId");
-    if (prev.openWorkspaceTab !== openWorkspaceTab) changed.push("openWorkspaceTab");
-    if (prev.persistenceKey !== persistenceKey) changed.push("persistenceKey");
-    if (prev.retargetWorkspaceTab !== retargetWorkspaceTab) changed.push("retargetWorkspaceTab");
-    if (changed.length > 0)
-      console.log("[buildPaneContentModel] deps changed:", changed.join(", "));
-    prevBuildDeps.current = {
-      handleCloseTabById,
-      handleOpenFileFromChat,
-      focusWorkspacePane,
-      navigateToTabId,
-      normalizedServerId,
-      normalizedWorkspaceId,
-      openWorkspaceTab,
-      persistenceKey,
-      retargetWorkspaceTab,
-    };
-  });
   const focusedPaneId = focusedPaneTabState.pane?.id ?? null;
   const focusedPaneTabIds = useMemo(() => tabs.map((tab) => tab.tabId), [tabs]);
   const focusedPaneTabDescriptorMap = useStableTabDescriptorMap(tabs);
@@ -2205,13 +2113,11 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                     onCloseTabsToLeft={handleCloseTabsToLeftInPane}
                     onCloseTabsToRight={handleCloseTabsToRightInPane}
                     onCloseOtherTabs={handleCloseOtherTabsInPane}
-                    onSelectNewTabOption={handleSelectNewTabOption}
-                    newTabAgentOptionId={NEW_TAB_AGENT_OPTION_ID}
+                    onCreateLauncherTab={handleCreateLauncherTab}
                     buildPaneContentModel={buildDesktopPaneContentModel}
                     onFocusPane={handleFocusPane}
-                    onNewTerminalTab={handleCreateTerminal}
                     onSplitPane={handleSplitPane}
-                    onSplitPaneEmpty={handleCreateDraftSplit}
+                    onSplitPaneEmpty={handleCreateLauncherSplit}
                     onMoveTabToPane={handleMoveTabToPane}
                     onResizeSplit={handleResizePaneSplit}
                     onReorderTabsInPane={handleReorderTabsInPane}

packages/app/src/screens/workspace/workspace-source-of-truth.test.ts

@@ -14,7 +14,7 @@ describe("workspace source of truth consumption", () => {
       projectDisplayName: "getpaseo/paseo",
       projectRootPath: "/repo/main",
       projectKind: "git",
-      workspaceKind: "local_checkout",
+      workspaceKind: "checkout",
       name: "feat/workspace-sot",
       status: "running",
       activityAt: new Date("2026-03-01T00:00:00.000Z"),

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

@@ -76,6 +76,9 @@ function getCloseButtonTestId(tab: WorkspaceTabDescriptor): string {
   if (tab.target.kind === "draft") {
     return `workspace-draft-close-${tab.target.draftId}`;
   }
+  if (tab.target.kind === "launcher") {
+    return `workspace-launcher-close-${tab.target.launcherId}`;
+  }
   return `workspace-file-close-${encodeFilePathForPathSegment(tab.target.path)}`;
 }
 

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

@@ -44,7 +44,7 @@ export function WorkspaceTabPresentationResolver({
 
   return (
     <WorkspaceTabPresentationResolverInner
-      key={tab.kind}
+      key={`${tab.key}:${tab.kind}`}
       registration={registration}
       tab={tab}
       serverId={serverId}