Add database query CLI tool for development

Bootstrap now opens PGlite and uses DB-backed project/workspace
registries as the sole runtime authority. Legacy JSON files are
imported transactionally on first startup; restart is idempotent.

Key changes:
- bootstrap.ts: DB registries replace file-backed, DB lifecycle
  managed on startup/shutdown/error
- workspace-registry-bootstrap.ts: fixed FK write order (project
  before workspace), uses list() instead of existsOnDisk()
- New transactional import module with rollback safety
- Bootstrap smoke tests for import, idempotence, and reconciliation

Audit-verified: authority cutover (13/13 checks), boundary (10/10).

.github/workflows/android-apk-release.yml

@@ -4,6 +4,7 @@ on:
   push:
     tags:
       - "v*"
+      - "android-v*"
   workflow_dispatch:
     inputs:
       tag:
@@ -16,7 +17,7 @@ concurrency:
   cancel-in-progress: false
 
 env:
-  RELEASE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+  SOURCE_TAG: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
 
 jobs:
   publish-android-apk:
@@ -31,6 +32,18 @@ jobs:
           fetch-depth: 0
           ref: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref }}
 
+      - name: Resolve release tag
+        shell: bash
+        run: |
+          set -euo pipefail
+          source_tag="${SOURCE_TAG}"
+          if [[ "$source_tag" =~ ^(android-)?v([0-9]+\.[0-9]+\.[0-9]+) ]]; then
+            release_tag="v${BASH_REMATCH[2]}"
+          else
+            release_tag="$source_tag"
+          fi
+          echo "RELEASE_TAG=$release_tag" >> "$GITHUB_ENV"
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:

.github/workflows/deploy-app.yml

@@ -26,6 +26,9 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
       - name: Typecheck
         run: npm run typecheck --workspace=@getpaseo/app
 

.github/workflows/desktop-release.yml

@@ -132,6 +132,7 @@ jobs:
         shell: bash
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EP_GH_IGNORE_TIME: true
           CSC_LINK: ${{ secrets.APPLE_CERTIFICATE }}
           CSC_KEY_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
@@ -237,6 +238,7 @@ jobs:
         shell: bash
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EP_GH_IGNORE_TIME: true
         run: |
           set -euo pipefail
           publish_mode="never"
@@ -345,6 +347,7 @@ jobs:
         shell: bash
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EP_GH_IGNORE_TIME: true
         run: |
           set -euo pipefail
           publish_mode="never"

.github/workflows/server-ci.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Install server dependencies
         run: npm install --workspace=@getpaseo/server --include-workspace-root
 
+      - name: Build highlight dependency
+        run: npm run build --workspace=@getpaseo/highlight
+
       - name: Build relay dependency
         run: npm run build --workspace=@getpaseo/relay
 

CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 0.1.33 - 2026-03-23
+
+### Fixed
+- Fixed the desktop app failing to reopen after closing on macOS — the daemon and agent processes were registering with Launch Services as instances of the main app, blocking subsequent launches.
+- Fixed dictation not working in the packaged desktop app — the microphone entitlement was missing from the hardened runtime configuration.
+- Fixed leaked Claude Code child processes when agents were closed — the SDK query stream was not being properly shut down.
+- The notification test button now surfaces errors instead of failing silently.
+
+## 0.1.32 - 2026-03-23
+
+### Added
+- Fully rebindable keyboard shortcuts with chord support — all shortcuts are now declarative with proper Cmd (Mac) vs Ctrl (Windows/Linux) separation.
+- Migrated the desktop app from Tauri to Electron, with macOS notarization, code signing, and Linux Wayland support.
+- Added line numbers and word-wrap toggle to file previews.
+- Added an archived agent callout with an unarchive button so you can restore agents directly from the chat view.
+- Added workspace kind indicators in the sidebar (e.g. worktree vs standalone).
+- Expanded diff syntax highlighting to cover more languages.
+- Added status bar tooltips for project and agent status.
+
+### Improved
+- Redesigned the mobile tab switcher as a compact header row with quick access to new agents and terminals.
+- Streamlined workspace creation — worktrees are now created inline with a single action instead of a multi-step flow.
+- Agent history now streams from disk on reconnect, so you see past messages immediately instead of a blank screen.
+- Automatic cleanup of stale workspaces: deleted worktree directories and fully-archived workspaces are pruned automatically.
+- After archiving a workspace, the app now redirects to the next available workspace instead of leaving you on a dead screen.
+- Reopening an archived agent tab now keeps it open instead of collapsing back to archived state.
+- Reduced unnecessary re-renders across the workspace screen, sidebar, and agent list for smoother scrolling and interaction.
+- Agent list no longer refreshes in the background when the screen is unfocused, saving resources.
+- Desktop key repeat now works correctly on macOS.
+- Desktop notifications on macOS are more reliable.
+- Daemon startup no longer blocks on model downloads.
+- Better error messages from the daemon — RPC errors now include the actual underlying details.
+
+### Fixed
+- Fixed user messages appearing as assistant output in the timeline when messages contained structured content blocks.
+- Fixed archived workspace routing so navigating to an archived session no longer breaks the app.
+- Fixed Linux AppImage failing to launch on Wayland-only desktops.
+- Fixed desktop window drag coordinates being applied when they shouldn't be.
+
 ## 0.1.30 - 2026-03-19
 
 ### Added

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 PGlite
 ```
 
 See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requirements, and debugging.
@@ -46,9 +48,7 @@ See [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md) for full setup, build sync requir
 - **NEVER add auth checks to tests** — agent providers handle their own auth.
 - **Always run typecheck after every change.**
 
-## Orchestrator mode
+## Debugging
 
-- Prefix agent titles with "🎭" (e.g., "🎭 Feature Implementation")
-- Launch agents in the most permissive mode
-- Set cwd to the repository root
-- When agent control tool calls fail, list agents first — it may be a wait timeout
+
+Find the complete daemon logs and traces in the $PASEO_HOME/daemon.log

docs/DEVELOPMENT.md

@@ -35,6 +35,24 @@ 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 PGlite 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`.
+
 ## Build sync gotchas
 
 ### Relay → Daemon

docs/PRODUCT.md

@@ -0,0 +1,74 @@
+# Product
+
+What Paseo is, who it's for, and where it's going.
+
+## What is Paseo
+
+Paseo is a next-generation development environment built around agents. One interface to run, monitor, and interact with coding agents across desktop, mobile, terminal, and web.
+
+The development workflow is shifting from manually editing files to orchestrating agents that do the editing. Paseo is built for that workflow.
+
+## Core philosophy
+
+Freedom and flexibility. Every design decision follows from this:
+
+- **Multi-provider** — Use any coding agent harness. Pick the right model for each job, switch freely as the landscape shifts. No vendor-lock in.
+- **Cross-device** — Desktop, mobile, web, CLI. Start work at your desk, check progress from your phone, script from the terminal.
+- **Self-hosted** — The daemon runs on your machine. Your code, your keys, your environment. No inference markup, no cloud dependency.
+- **Respectful** - No telemetry, no forced cloud, no forced accounts
+- **Open source** — AGPL-3.0. Users can inspect, fork, and contribute.
+- **BYOK** — Bring your own keys. Use your subsidized plans and first-party provider pricing. Paseo adds zero cost on top.
+
+## How it works
+
+### Projects and workspaces
+
+Projects are grouped in the sidebar, detected automatically from your filesystem and tagged by git remote when available.
+
+Each project opens as a workspace. For git projects, the default workspace is the main checkout. Users can create additional workspaces, which are isolated copies (git worktrees) where agents work without affecting main.
+
+### Inside a workspace
+
+A workspace is a flexible canvas:
+- Launch multiple agents side by side in split panes
+- Open terminals alongside agents
+- Mix and match providers within the same workspace
+
+### The daemon
+
+Paseo is a client-server system. The daemon (Node.js) runs on your machine, manages agent processes, and streams output in real time over WebSocket. Clients connect to the daemon — locally or remotely.
+
+This architecture means:
+- The daemon can run on any machine: laptop, VM, remote server
+- Multiple clients can connect simultaneously
+- Agents keep running when you close the app
+
+## Target user
+
+Anyone who builds software:
+
+- Care about owning their tools and their data
+- Use multiple AI providers and want to switch freely
+- Run agents on real tasks across real projects
+- Want to work from multiple devices
+
+## What compounds over time
+
+- **Trust** — Showing up daily, shipping in public, being open source. Earned slowly, lost quickly.
+- **Community contributions** — Code, packaging, skills, agent configs. Contributors become advocates.
+- **Ecosystem** — Skills, integrations, shared configs. Community-built content that makes the platform more valuable.
+
+## Strategic bets
+
+1. **Models commoditize.** Value moves to the orchestration layer. The best model changes monthly — the workflow layer stays.
+2. **Multi-provider wins.** No single provider stays on top. Developers want the best model for each task.
+3. **The daemon as infrastructure.** Server/client architecture enables deployment anywhere.
+4. **Open source outlasts funding.** Open source communities are resilient. Contributors become advocates.
+
+## Current state (March 2026)
+
+- Desktop (Electron), mobile (iOS/Android), web, CLI
+- Providers: Claude Code (Agent SDK), Codex (app-server), OpenCode
+- Daily releases
+- Community contributions starting (packaging, bug fixes)
+- Key UX: split panes, keybinding customization, workspace model

docs/RELEASE.md

@@ -37,18 +37,24 @@ npm run release:finalize       # Publish npm, promote draft to published
 
 **NEVER bump the version to fix a build problem.** New versions are reserved for meaningful product changes (features, fixes, improvements). Build/CI failures are fixed on the current version.
 
-To retry a failed workflow for an existing tag:
+**NEVER use `workflow_dispatch` to retry release builds.** The `workflow_dispatch` trigger runs the workflow file from the default branch but checks out the code at the tag ref (`ref: ${{ inputs.tag }}`). This means build fixes committed to `main` won't be picked up — the old broken code at the tag gets built again.
 
-1. **Retry via `workflow_dispatch`** — all release workflows support `workflow_dispatch` with a `tag` input:
-   ```bash
-   gh workflow run "Desktop Release" -f tag=v0.1.28                      # all platforms
-   gh workflow run "Desktop Release" -f tag=v0.1.28 -f platform=macos    # single platform
-   gh workflow run "Android APK Release" -f tag=v0.1.28
-   gh workflow run "Deploy App"                                           # no tag input needed
-   ```
-2. **Platform-specific retry tags** (desktop only) — push a tag like `desktop-macos-v0.1.28` to rebuild just that platform against the release tag's code
+To retry a failed workflow, **always push a retry tag** on the commit you want to build:
 
-If the fix requires a code change (e.g. a broken build script), commit the fix to `main` and use `workflow_dispatch` pointing at the existing tag — the workflow checks out the tag ref, but for build-tooling fixes you may need to point it at `main` or cherry-pick the fix onto the tag.
+```bash
+# Desktop (all platforms)
+git tag -f desktop-v0.1.28 HEAD && git push origin desktop-v0.1.28 --force
+
+# Desktop (single platform)
+git tag -f desktop-macos-v0.1.28 HEAD && git push origin desktop-macos-v0.1.28 --force
+git tag -f desktop-linux-v0.1.28 HEAD && git push origin desktop-linux-v0.1.28 --force
+git tag -f desktop-windows-v0.1.28 HEAD && git push origin desktop-windows-v0.1.28 --force
+
+# Android APK
+git tag -f android-v0.1.28 HEAD && git push origin android-v0.1.28 --force
+```
+
+This ensures the checkout ref matches the actual code on `main` with the fix included.
 
 ## Notes
 

docs/STORAGE_REVAMP_PLAN.md

@@ -0,0 +1,848 @@
+# Storage Revamp Plan
+
+Status: working implementation plan
+
+This document is meant to guide implementation and review. It captures the decisions that have already converged, names the sequencing and test gates that should not be skipped, and leaves open the product and implementation details that are still legitimately undecided.
+
+## Goals and scope
+
+The storage revamp moves Paseo from a mixed JSON plus in-memory model to an explicit storage layer backed by Drizzle and PGlite.
+
+In scope:
+
+- durable storage for project records
+- durable storage for workspace records
+- durable storage for agent snapshot metadata
+- durable storage for committed agent timeline history
+- a simplified timeline contract: committed canonical history vs provisional live updates
+- removal of `epoch`/`reset`/projection-heavy timeline recovery paths
+- migration and cutover from existing JSON-backed Paseo homes where source data actually exists
+
+## Non-goals
+
+Out of scope for this plan:
+
+- migrating config, keypairs, server identity, or push-token files into the DB
+- persisting raw provider deltas, chunk streams, or other transport-only live updates
+- designing a remote/cloud database story beyond keeping the schema portable
+- committing durable reasoning history in v1 unless product explicitly asks for it later
+- preserving legacy timeline semantics such as `epoch`, projection metadata, or provider-history rehydrate on refresh/load
+
+## Current state and migration hazards
+
+Today the server persists three different kinds of state in three different ways:
+
+- projects in `projects/projects.json`
+- workspaces in `projects/workspaces.json`
+- agent snapshots in `agents/{cwd}/{agent-id}.json`
+
+Committed timeline history is different. It is still effectively an in-memory `AgentManager` concern:
+
+- rows live in `agent.timelineRows`
+- sequence numbers are assigned in memory
+- retention trimming can drop older rows
+- `fetchAgentTimeline` still carries `epoch`, `reset`, `gap`, projection mode, and seq-range metadata to compensate for that model
+
+There are also two migration hazards that should be treated as foundation work, not cleanup:
+
+1. Agent snapshot persistence is split across multiple writers.
+   `attachAgentStoragePersistence()` flushes `agent_state` snapshots, while `Session` also writes agent records directly for archive/unarchive and related flows. The storage revamp should collapse that into clearer ownership before the DB swap broadens the write surface.
+
+2. Agent load and refresh still depend on provider history hydration.
+   `Session.ensureAgentLoaded()` resumes or recreates a provider session and then calls `hydrateTimelineFromProvider()`. That makes refresh/load behavior depend on provider-managed history, creates replay and dedup complexity, and blocks a clean storage-owned timeline contract.
+
+The practical implication is that this is not just a database wiring task. The contract and ownership model have to be simplified first.
+
+## Converged decisions and contracts
+
+### Storage choice: Drizzle + PGlite
+
+This plan assumes Drizzle plus PGlite.
+
+Why this is the right default:
+
+- one Postgres-flavored schema and migration pipeline for local and future hosted storage
+- no native addon packaging burden in the Electron and local-daemon environment
+- Drizzle keeps the schema in TypeScript and fits the existing codebase style better than a heavier codegen-oriented ORM
+- PGlite is fast enough for Paseo's local CRUD and timeline query workload
+
+This does not lock the project into every detail of local database lifecycle yet. It does lock the plan onto a Postgres-shaped schema and Drizzle-based migration workflow.
+
+### Storage boundary
+
+The goal is not a grand generic repository framework. The useful seams are:
+
+- `ProjectRegistry`
+- `WorkspaceRegistry`
+- `AgentSnapshotStore`
+- `AgentTimelineStore`
+- `WorkspaceReconciliationService`
+
+The refactor should preserve clear domain ownership:
+
+- project and workspace records stay distinct because reconciliation and placement logic are distinct
+- agent snapshot metadata stays separate from timeline history
+- filesystem reconciliation stays as a service over stored records, not an accidental side effect inside session code
+
+### Timeline contract
+
+The room has converged on a simplified contract:
+
+- `timeline` event with `seq` present means committed canonical history owned by Paseo storage
+- `timeline` event with no `seq` means provisional live-only state and is never returned by catch-up fetches
+- committed rows must already be in canonical display/history shape, not raw provider chunk shape
+- `fetch-after-seq` returns committed rows only
+- Phase 0 policy: reconnect does not use a subscribe-time provisional seed
+- if a turn is still active after reconnect, the client resumes from future live provisional updates only
+- provisional-seed ordering is therefore out of scope for Phase 0 until product explicitly chooses to add that policy
+- at most one active provisional assistant stream and one active provisional reasoning stream exist per turn
+- tool progress continues to correlate by existing `callId`
+- reasoning is live-only for v1 unless product explicitly changes that call later
+
+### Why `epoch` is removed
+
+`epoch` exists today because timeline identity is not fully owned by durable storage. It resets when the in-memory window is invalidated or rebuilt, and clients carry that reset logic in public protocol state.
+
+That is the wrong long-term contract for a DB-backed append-only history. Once committed history is storage-owned and no longer trimmed out from under clients:
+
+- catch-up can be `after seq`
+- published sequence numbers do not need to be rewritten
+- clients do not need `epoch`, `reset`, or projection-derived recovery metadata
+
+Removing `epoch` is not a cosmetic cleanup. It is the public sign that committed history is finally durable and stable.
+
+### Why refresh/load must not rehydrate provider history
+
+Provider history hydration made sense as a stopgap while Paseo did not own durable timeline history. It is now an obstacle.
+
+Refresh/load must stop rehydrating provider history because it:
+
+- makes the public history contract depend on provider-specific retention and replay behavior
+- forces user-message dedup rules and other replay suppression into server logic
+- creates ambiguity over whether a timeline row is provider-imported history or Paseo-owned committed history
+- makes reconnect behavior depend on re-importing old provider state instead of reading committed rows from storage
+
+The replacement contract is simpler:
+
+- refresh/load restores agent snapshot state from Paseo storage
+- committed history comes from `AgentTimelineStore`
+- provisional in-flight state, if any, is subscription-scoped and may be seeded once per subscription according to the chosen policy
+
+## Timeline consumption contract
+
+The client model is intentionally two-layered:
+
+- committed history is the durable tail, keyed by monotonically increasing `seq`
+- provisional live state is the transient head, carried by unsequenced `timeline` events
+
+The client keeps a committed cursor, not a provisional cursor. Provisional streaming never advances that committed cursor.
+
+### Client mental model
+
+The client stores:
+
+- the last committed `seq` it has accepted for a given agent
+- the committed history rows needed for the current view
+- any current provisional UI state for in-progress assistant, reasoning, or tool activity
+
+It does not store or reason about a second durable sequence space for provisional data.
+
+### `fetch-after-seq`
+
+`fetch-after-seq(agentId, seq)` means:
+
+- return committed canonical history rows with `seq > cursor`
+- never return provisional live state
+- never return raw chunk rows
+- preserve committed order
+
+If there are no committed rows after that cursor yet, the result is empty even if an in-progress message is still streaming live.
+
+### Subscribe-time provisional seed
+
+A subscribe-time provisional seed, if used by the chosen policy, is a one-time delivery of the current full provisional items for that subscription.
+
+It is not:
+
+- a historical replay of provider deltas
+- a second committed history fetch
+- a second sequence space
+
+If emitted, it must arrive before later provisional patch events for that subscription.
+
+Phase 0 chooses the simpler policy: no subscribe-time provisional seed for now.
+
+### Reconnect scenarios
+
+Concrete reconnect example:
+
+- the client has accepted committed history through `seq = 120`
+- the committed tail includes rows through `120`
+- the client UI also shows an in-progress assistant message in the provisional head
+- that provisional assistant message has no committed seq yet
+
+Case A: the assistant message finishes while the client is disconnected
+
+1. The client reconnects with last committed `seq = 120`.
+2. The client calls `fetch-after-seq(agentId, 120)`.
+3. The server returns committed row `121`, containing the full finalized assistant message.
+4. The client accepts row `121` into the durable tail and advances its committed cursor to `121`.
+5. The stale provisional assistant UI from before disconnect is dropped because the committed row has now superseded it.
+
+Case B: the assistant message has not finished by the time the client reconnects
+
+1. The client reconnects with last committed `seq = 120`.
+2. The client calls `fetch-after-seq(agentId, 120)`.
+3. The server may legitimately return nothing new yet, because committed row `121` does not exist yet.
+4. Live streaming resumes.
+5. In Phase 0, the client continues from fresh live updates only.
+6. When the assistant message finally completes, it becomes one committed row `121`.
+
+In both cases:
+
+- partial streaming before disconnect never advanced the committed cursor
+- `fetch-after-seq` is about committed history only
+- provisional streaming is transient UI state, not committed history
+
+If the daemon restarted or the agent is unloaded:
+
+- committed history still comes from `AgentTimelineStore`
+- the client can fetch committed history by seq without the provider session being active
+- provisional state is absent unless a new live subscription later seeds it
+
+### Replacement rule without a second sequence space
+
+The replacement rule is intentionally simple:
+
+- committed rows are authoritative durable history
+- provisional UI is best-effort and disposable
+- when a committed row arrives that corresponds to previously shown provisional state, the committed row becomes the durable representation and the provisional UI is cleared
+
+This simplicity depends on the agreed invariant that there is at most one active provisional assistant stream and one active provisional reasoning stream per turn.
+
+This avoids introducing `epoch`, a second durable sequence space, or provider-specific replay semantics.
+
+## Authority and ownership
+
+The storage revamp needs explicit authority boundaries so the model cannot drift during implementation.
+
+- `AgentTimelineStore` owns committed timeline authority
+- only the committed-history authority path may assign durable `seq`
+- provisional/live buffering is owned by the runtime/session path that is already handling live provider events; it is not owned by the DB
+- `AgentSnapshotStore` owns durable agent snapshot persistence
+- `WorkspaceReconciliationService` owns filesystem-vs-stored-workspace reconciliation
+- `ProjectRegistry` and `WorkspaceRegistry` own durable structured records for those domains
+- legacy structured-record import is a bootstrap path owned by the structured-record storage layer, not by ad hoc session code
+
+Practical implications:
+
+- providers do not assign committed seqs
+- clients do not infer committed seq advancement from provisional events
+- session code may read committed history, but it should not become an alternate authority for committed storage semantics
+
+## Interfaces and module boundaries
+
+These are design-level contracts, not implementation-level signatures.
+
+### `AgentSnapshotStore`
+
+Responsibilities:
+
+- read and write durable agent snapshot metadata
+- archive and unarchive snapshot records
+- list and fetch stored agent snapshots without requiring an active provider session
+
+Useful method shape:
+
+- `get(agentId)`
+- `list(filter?)`
+- `upsert(snapshotRecord)`
+- `archive(agentId, archivedAt)`
+- `unarchive(agentId)`
+
+### `AgentTimelineStore`
+
+Responsibilities:
+
+- append finalized committed history rows
+- fetch committed history by tail, before-seq, or after-seq queries
+- serve committed history for unloaded or restarted agents
+- guarantee ordered committed seq allocation per agent
+
+Useful method shape:
+
+- `appendCommitted(agentId, item, metadata?) -> committedRow`
+- `fetchTail(agentId, limit)`
+- `fetchBeforeSeq(agentId, beforeSeq, limit)`
+- `fetchAfterSeq(agentId, seq, limit?)`
+- `getLatestCommittedSeq(agentId)`
+
+Constraints:
+
+- no raw chunk rows in durable history
+- no provisional rows in durable history
+- seq assignment happens only here or in the narrow authority path directly behind it
+
+### `ProjectRegistry`
+
+Responsibilities:
+
+- store and fetch durable project records
+- upsert, archive, and list project records
+
+Useful method shape:
+
+- `get(projectId)`
+- `list(filter?)`
+- `upsert(projectRecord)`
+- `archive(projectId, archivedAt)`
+
+### `WorkspaceRegistry`
+
+Responsibilities:
+
+- store and fetch durable workspace records
+- upsert, archive, and list workspace records
+
+Useful method shape:
+
+- `get(workspaceId)`
+- `list(filter?)`
+- `upsert(workspaceRecord)`
+- `archive(workspaceId, archivedAt)`
+
+### `WorkspaceReconciliationService`
+
+Responsibilities:
+
+- own both targeted reconcile-on-register or placement-update checks and broader stale-workspace sweeps
+- compare durable workspace records against filesystem reality
+- mark stale or missing workspaces according to the chosen policy
+- keep reconciliation logic out of session orchestration code
+
+Useful method shape:
+
+- `reconcileTarget(workspaceId | cwd) -> reconcileResult`
+- `reconcileSweep() -> reconciliationResult`
+
+### Timeline-facing session/service seam
+
+One session-facing timeline contract is useful so the app/CLI path does not need to know storage internals.
+
+Responsibilities:
+
+- fetch committed history for initial view, older-history pagination, or reconnect
+- expose live subscription semantics
+- apply the committed-vs-provisional contract consistently for app and CLI consumers
+
+Useful method shape:
+
+- `fetchTail(agentId, limit)`
+- `fetchBeforeSeq(agentId, beforeSeq, limit)`
+- `fetchAfterSeq(agentId, seq, limit?)`
+- `subscribe(agentId, options?)`
+
+This seam is a consumer-facing contract exposed by the session layer so app and CLI callers do not need to know storage internals. It is not a second storage/service authority for committed timeline semantics.
+
+## DB design and query shape
+
+The plan does not need to freeze the final schema, but it should lock the query-driving shape.
+
+### Main tables expected
+
+- `projects`
+- `workspaces`
+- `agent_snapshots`
+- `agent_timeline_rows`
+
+### Fields that matter for core queries
+
+For `agent_timeline_rows`:
+
+- `agent_id`
+- committed `seq`
+- committed timestamp
+- canonical item payload
+- optional item kind or type discriminator only if it helps storage ergonomics without expanding the hot-path query surface
+
+For `agent_snapshots`:
+
+- `agent_id`
+- provider
+- cwd / workspace linkage
+- lifecycle/status metadata
+- timestamps needed for listing and resume decisions
+- archive state
+
+For `projects` and `workspaces`:
+
+- durable IDs
+- linkage fields
+- display fields
+- archive state
+- timestamps needed for reconciliation and listing
+
+### Main queries to support efficiently
+
+Hot-path:
+
+- fetch committed tail for an agent
+- fetch older committed history before a known seq for scrollback / pagination
+- fetch committed rows after a known seq for reconnect/catch-up
+- fetch committed history for an unloaded or restarted agent through the same per-agent tail/after-seq path
+- append one finalized committed row
+- list/fetch agent snapshots for UI and session bootstrap
+- list/fetch projects and workspaces for the app shell
+
+Cold-path:
+
+- legacy structured-record import
+- archive/unarchive and reconciliation sweeps
+
+### Likely indexes and why
+
+- unique ordered `(agent_id, seq)` constraint/index on timeline rows for per-agent seq uniqueness, ordered append, and after-seq fetch
+- index on agent snapshot status/update time for list views
+- index on workspace `project_id` for grouped workspace listing
+- index on archive state where it materially reduces active-record scans
+
+This is enough to guide implementation without prematurely optimizing secondary filters or analytics-style queries. Per-type filtering is not part of the required v1 hot path.
+
+### Not optimizing yet
+
+The v1 design is intentionally not optimizing for:
+
+- cross-agent global timeline queries
+- full-text search over timeline history
+- reasoning-history analytics
+- provider-specific chunk replay
+- multi-tenant or remote-hosted query patterns
+
+## Timeline query scenarios and invariants
+
+Primary timeline queries:
+
+### Fetch tail for initial view
+
+- input: `agentId`, `limit`
+- result: latest committed canonical rows only
+- invariant: tail fetch does not depend on an active provider session
+
+### Fetch after seq for reconnect/catch-up
+
+- input: `agentId`, last committed `seq`
+- result: committed canonical rows with greater seq
+- invariant: no provisional rows are returned
+- invariant: no gaps or duplicates appear when combined with resumed live streaming
+
+### Fetch before seq for older-history pagination
+
+- input: `agentId`, `beforeSeq`, `limit`
+- result: older committed canonical rows with `seq < beforeSeq`
+- invariant: older-history pagination uses the same committed-row contract as tail and after-seq reads
+- invariant: no provisional rows or raw chunk rows are returned
+
+### Fetch committed history for unloaded or restarted agent
+
+- input: `agentId`
+- result: committed history from storage
+- invariant: provider-history rehydrate is not required
+
+### Append finalized committed row
+
+- input: finalized logical history item
+- result: one committed row with one durable seq
+- invariant: no raw chunk rows are written as durable history
+
+Core invariants:
+
+- provisional streaming does not advance the committed seq cursor
+- durable history contains finalized canonical rows only
+- clients recover from disconnect by fetching committed rows after the last committed seq
+- if nothing finalized while disconnected, `fetch-after-seq` may return nothing and live streaming resumes
+- if something finalized while disconnected, the returned committed row supersedes stale provisional client UI
+- no gaps or duplicates are allowed across catch-up plus live resume
+
+## v1 design non-goals
+
+The design deliberately does not support these in v1:
+
+- durable reasoning history
+- historical backfill of timeline data that never existed in Paseo storage
+- provider-history rehydrate as a normal refresh/load mechanism
+- raw chunk durability
+- multiple simultaneous provisional assistant or reasoning streams beyond the agreed single-stream invariant
+
+## Phase plan
+
+Each phase below includes the required goals, sequencing, tests, exit gate, and suggested commit boundary. The phases are intentionally practical rather than over-detailed.
+
+Suggested commit boundaries are approximate. They are there to keep reviewable slices and clear gates, not to force an artificial commit count if two adjacent steps clearly belong together.
+
+### Phase 0: Contract and model cleanup before DB wiring
+
+Goal:
+Lock the public and internal timeline contract before introducing a new storage backend.
+
+What changes:
+
+- remove `epoch` from shared timeline cursor/message shapes
+- define committed-vs-provisional semantics around `timeline + optional seq`
+- remove projection-specific public response baggage such as `reset`, `projection`, seq-range collapse metadata, and related epoch gates
+- update server/session/app catch-up logic to use seq-backed committed history plus provisional head seeding
+- make reasoning explicitly live-only for v1
+- document and enforce the single-provisional-stream invariant per kind
+
+Dependencies:
+
+- none beyond the contract decisions already converged in the room
+
+Tests required:
+
+- shared message parsing tests for the simplified timeline payloads
+- app reducer tests for committed append, provisional merge, and reconnect without provisional seeding
+- session/WebSocket tests for `live -> disconnect -> fetch-after-seq -> subscribe -> resume`
+- explicit no-provisional-seed reconnect test proving that reconnect resumes from committed catch-up plus future live events only
+
+Exit gate:
+The client and server can exchange committed and provisional timeline updates without `epoch`, `reset`, or projection metadata, and all timeline catch-up tests pass with the new contract.
+
+Can happen in parallel:
+
+- shared message/schema cleanup
+- app reducer and bootstrap policy cleanup
+- server session fetch/subscribe cleanup
+
+Must stay sequential:
+
+- final protocol shape must settle before DB schema and timeline store work begin
+
+Suggested commit boundaries:
+
+- protocol and message schema cleanup
+- app/session reducer and catch-up logic cleanup
+- tests locking the new contract
+
+### Phase 1: Storage boundary refactor with current backends
+
+Goal:
+Separate domain ownership and persistence seams while still using the current JSON and in-memory backends.
+
+What changes:
+
+- introduce explicit `AgentSnapshotStore` and `AgentTimelineStore` seams
+- keep `ProjectRegistry` and `WorkspaceRegistry` as concrete domain seams rather than wrapping them in a generic repository abstraction
+- extract workspace reconciliation into a dedicated `WorkspaceReconciliationService`
+- collapse duplicate snapshot-writer paths so snapshot persistence ownership is explicit
+- isolate current in-memory timeline logic behind the timeline store interface
+- isolate refresh/load dependence on provider history rehydrate behind explicit seams so Phase 4 can remove it cleanly without another structural refactor
+
+Dependencies:
+
+- Phase 0 contract and message-shape cleanup should be settled enough that the extracted seams do not preserve `epoch`-era behavior by accident
+
+Tests required:
+
+- store contract tests for snapshot store and timeline store
+- registry contract tests for projects and workspaces
+- reconciliation tests using real temp directories and real filesystem mutations
+- refresh/load tests proving any remaining provider-history dependency is isolated behind explicit storage/session seams rather than scattered through the runtime
+
+Exit gate:
+The server can run unchanged behavior through explicit storage interfaces, duplicate snapshot-writer ownership is collapsed, and any remaining provider-history rehydrate dependency is isolated to a narrow compatibility path that Phase 4 can delete.
+
+Can happen in parallel:
+
+- snapshot-store extraction
+- reconciliation extraction
+- timeline-store interface extraction
+
+Must stay sequential:
+
+- duplicate snapshot-writer cleanup should land before DB-backed snapshot cutover
+- timeline store contract should settle before DB timeline work begins
+
+Suggested commit boundaries:
+
+- snapshot-store ownership cleanup
+- reconciliation-service extraction
+- timeline-store extraction with in-memory adapter
+
+### Phase 2: DB foundation
+
+Goal:
+Land the database runtime, schema, and migration tooling without yet making the DB the source of truth for every domain.
+
+What changes:
+
+- add Drizzle schema and migration workflow
+- add PGlite database bootstrap and lifecycle management
+- define tables for projects, workspaces, agent snapshots, and committed timeline history
+- choose indexes based on the first real query set, especially `agent_id + seq`
+- implement DB-backed adapters for the storage seams introduced in Phase 1
+
+Dependencies:
+
+- Phase 1 storage seams should exist before DB adapters become the main implementation path
+
+Tests required:
+
+- migration tests on fresh databases
+- migration tests on incremental schema upgrades
+- DB adapter tests against a real PGlite database
+- startup/shutdown tests for DB bootstrap in the daemon environment
+
+Exit gate:
+The repo can create, migrate, and query a real PGlite-backed Drizzle database in tests, and the new adapters satisfy the same contract tests as the current backends.
+
+Suggested commit boundaries:
+
+- Drizzle and PGlite foundation
+- schema plus migrations
+- DB adapters wired behind existing interfaces
+
+### Phase 3: Structured-record cutover and legacy JSON import
+
+Goal:
+Move projects, workspaces, and agent snapshot metadata onto the DB, with explicit import rules from existing Paseo homes.
+
+What changes:
+
+- make the DB-backed project/workspace stores authoritative
+- make the DB-backed agent snapshot store authoritative
+- import legacy `projects.json`, `workspaces.json`, and agent snapshot JSON into the DB
+- run workspace reconciliation against stored records and filesystem state
+- keep archive/unarchive and related metadata flows working through the new store ownership model
+
+Dependencies:
+
+- Phase 2 DB bootstrap, migrations, and DB-backed structured-record adapters must be stable first
+
+Tests required:
+
+- import tests from existing JSON files into empty DBs
+- idempotent re-import tests where the DB already contains matching rows
+- reconciliation tests covering deleted directories and archived-agent edge cases
+- agent list/fetch/workspace list session tests against DB-backed stores
+
+Exit gate:
+A daemon can start from a legacy Paseo home, import structured records into the DB, restart from the same home again without duplication or state drift, and serve project/workspace/agent metadata without depending on JSON files as the source of truth.
+
+Ordered rollout note:
+
+- first, project/workspace authority plus reconciliation and import harness
+- second, restart/idempotence verification on the structured-record path
+- third, agent snapshot metadata authority
+- structured records should cut over before timeline storage so the timeline phase can rely on stable DB-backed agent identity and metadata
+
+Suggested commit boundaries:
+
+- project/workspace DB cutover plus import harness and reconciliation
+- agent snapshot DB cutover and restart/idempotence tests
+
+### Phase 4: Timeline storage and catch-up cutover
+
+Goal:
+Move committed timeline history to storage-owned append-only rows and remove provider-history rehydrate from refresh/load.
+
+What changes:
+
+- make `AgentTimelineStore` authoritative for committed history
+- write one committed row per finalized history item
+- stop storing raw chunk rows as committed history
+- keep provisional live updates in memory/subscription scope only
+- make fetch/catch-up query committed rows by `agent_id + seq`
+- remove provider-history rehydrate from normal refresh/load flows
+- remove retention-window timeline trimming and epoch-reset behavior for committed history
+
+Dependencies:
+
+- Phase 0 contract cleanup
+- Phase 2 DB foundation
+- Phase 3 structured-record cutover, so timeline rows attach to stable DB-backed agent metadata and identity
+
+Tests required:
+
+- timeline store contract tests against real PGlite
+- live-to-commit tests for assistant, tool, and reasoning-live-only behavior
+- reconnect tests covering committed catch-up plus provisional seed ordering
+- migration/cutover tests proving refresh/load do not import provider history
+- scenario tests for:
+- live stream while connected
+- disconnect after committed seq `N`, reconnect, `fetch-after-seq(N)`, then resume live without gaps or duplicates
+- daemon restart, then fetch committed history without provider rehydrate
+- `attach`/`logs` against an agent with committed stored history but no active provider session
+
+Exit gate:
+Committed timeline history survives daemon restart, reconnect from a known committed seq yields ordered history with no gaps or duplicates across catch-up plus live resume, including the provisional-seed case, and refresh/load no longer depend on provider history replay.
+
+Internal sub-gates:
+
+- write-path parity is established before the DB-backed timeline writer becomes authoritative
+- `fetch-after-seq` parity is established before legacy committed-history reads are removed
+- reconnect no-gap/no-duplicate behavior is proven before timeline cutover is considered complete
+- refresh/load de-rehydrate removal lands only after committed-history write and read authority are stable
+
+Can happen in parallel:
+
+- timeline write path
+- fetch/catch-up query path
+- CLI/app verification against storage-backed committed history behavior
+
+Must stay sequential:
+
+- this phase depends on Phase 0 contract cleanup and Phase 2 DB foundation
+- it should land after Phase 3 so agent and workspace identity are already DB-backed
+
+Suggested commit boundaries:
+
+- gated committed timeline store plus write/read parity work, not yet authoritative until matching read-path coverage exists
+- authoritative fetch/catch-up cutover together with reconnect scenario coverage
+- refresh/load de-rehydrate cleanup and related tests
+
+### Phase 5: Cleanup and removal
+
+Goal:
+Delete legacy paths once DB-backed storage and the simplified contract are proven.
+
+What changes:
+
+- remove legacy JSON source-of-truth paths for projects, workspaces, and agent snapshots
+- remove in-memory committed timeline ownership and retention trimming
+- remove leftover compatibility code and dead reducers from the pre-Phase-0 timeline model
+- remove provider-history hydration paths that are no longer part of refresh/load
+- update architecture and developer docs to reflect the new ownership model
+
+Dependencies:
+
+- Phase 3 and Phase 4 must both have passed their exit gates
+
+Tests required:
+
+- full server typecheck and existing relevant test suites
+- targeted regression tests for deleted legacy branches
+- migration tests proving old homes still import correctly into the new model
+
+Exit gate:
+There is one durable storage path for structured records and committed timeline history, normal runtime no longer writes legacy JSON or in-memory committed-history branches, and no runtime behavior depends on the removed JSON/in-memory history model.
+
+Suggested commit boundaries:
+
+- legacy path removal
+- doc updates and final contract cleanup
+
+## Legacy data and import constraints
+
+The migration story is intentionally narrower than a full historical backfill.
+
+What can be imported from existing Paseo homes:
+
+- projects from `projects/projects.json`
+- workspaces from `projects/workspaces.json`
+- agent snapshot metadata from agent JSON files
+
+What cannot be broadly backfilled:
+
+- committed timeline history that never existed in Paseo storage
+- raw provider history that would need to be rehydrated on refresh/load
+- provisional live state from prior daemon lifetimes
+
+That means the honest timeline migration story is:
+
+- existing committed history only exists for whatever Paseo has already written under the new timeline store
+- after cutover, timeline history is durable and append-only
+- before cutover, old homes do not gain full historical timelines unless a separate import source is defined later
+
+This is a feature, not a gap. It keeps the new contract storage-owned instead of reintroducing provider-specific replay semantics.
+
+## Orchestrator audit plan
+
+Every implementation slice requires an independent audit pass before it is accepted. Audit agents verify; they do not edit files. A phase is not complete until its audit gate passes.
+
+Audit prompts should be checklist-based and evidence-driven. The point of these passes is to catch regressions, hidden behavior changes, missing tests, two-authority drift, and unnecessary complexity before the next phase begins.
+
+### Phase 0 audit
+
+The audit pass must verify:
+
+- the public contract actually removed `epoch`, `reset`, and projection-heavy response baggage where intended
+- `timeline` with `seq` vs without `seq` behaves as specified
+- the explicit `seq = 120 -> 121` reconnect scenario is covered by tests
+- older-history pagination still works under the committed-history contract
+- app reducer and session/WebSocket behavior match the agreed contract
+
+### Phase 1 audit
+
+The audit pass must verify:
+
+- no functional behavior changed beyond the intended seam refactor
+- duplicate snapshot-writer ownership is actually collapsed
+- reconciliation ownership is actually extracted from `Session`
+- provider-history dependency is isolated and not still scattered through runtime code
+- seam contract tests exist and pass
+
+### Phase 2 audit
+
+The audit pass must verify:
+
+- fresh migrations succeed
+- incremental migrations succeed
+- DB adapters pass the same contract tests as current backends
+- bootstrap and shutdown are stable
+- no DB path is prematurely authoritative unless explicitly intended
+
+### Phase 3 audit
+
+The audit pass must verify:
+
+- import from a legacy Paseo home works
+- restarting from the same legacy home does not duplicate or drift structured records
+- project, workspace, and agent metadata behavior matches prior behavior
+- reconciliation still surfaces stale or missing workspaces correctly
+- archive, unarchive, list, and fetch flows still work
+
+### Phase 4 audit
+
+The audit pass must verify:
+
+- committed history survives daemon restart
+- `fetch-after-seq` and `fetch-before-seq` behave correctly
+- no raw chunk rows are persisted
+- reconnect satisfies the no-gap/no-duplicate invariant
+- the `120 -> 121` reconnect scenario is explicitly verified
+- unloaded or restarted agent history reads work without provider rehydrate
+- CLI and app history behaviors such as `logs`, `attach`, and timeline fetch still work against committed stored history
+
+### Phase 5 audit
+
+The audit pass must verify:
+
+- normal runtime no longer writes legacy JSON or in-memory committed-history branches
+- dead compatibility branches are actually gone
+- relevant test suites and typecheck pass
+- legacy-home import still works under the final model
+
+## Open questions and risks
+
+Open product or implementation questions:
+
+- should subscribe-time provisional seeding always happen when a turn is active, or only when the client asks for streaming state
+- do we want a durable system/error timeline row for failed or canceled turns, or should those remain transport-only
+- do any providers require an extra adapter constraint to uphold the single-provisional-stream invariant
+
+Main risks and mitigations:
+
+- risk: the plan quietly recreates projection complexity inside the DB schema
+  mitigation: store canonical committed rows only, and keep raw/provisional data out of durable history
+
+- risk: refresh/load still leaks provider-history import back into the committed-history path
+  mitigation: make de-rehydrate behavior a named Phase 4 gate with dedicated tests
+
+- risk: legacy import over-promises timeline backfill
+  mitigation: keep timeline migration constraints explicit and separate from structured-record import
+
+- risk: the storage refactor turns into a large abstraction exercise
+  mitigation: keep the seam list concrete and domain-shaped; avoid generic repository frameworks
+
+- risk: sequencing gets inverted and DB work begins before the protocol and ownership model settle
+  mitigation: keep Phase 0 and Phase 1 as hard prerequisites for DB timeline cutover

docs/design/agent-event-stream-redesign.md

@@ -0,0 +1,170 @@
+# Agent Event Stream Redesign
+
+Status: **Implemented** (2026-03-24)
+
+## Problem
+
+The Claude provider had three event paths delivering the same events to the agent-manager:
+
+1. **Foreground stream** (`stream()` → `activeForegroundTurn.queue`)
+2. **Live event pump** (`streamLiveEvents()` → `liveEventQueue`) fed by the query pump
+3. **JSONL history poller** (`startLiveHistoryPolling()` → `routeSdkMessageFromPump()`)
+
+Routing between paths was timing-based (`Boolean(activeForegroundTurn)`, `pendingRun`). This caused:
+
+- **Duplicate user messages**: trailing SDK events routed to the live queue after `activeForegroundTurn` cleared
+- **Stuck running state**: stale `turn_started` from the live path flipped lifecycle back to `running` after finalize set it to terminal
+- **Fragile dedup**: `shouldSuppressLiveUserMessageEcho` checked `pendingRun` (already null) and `messageId` (Claude assigns its own UUID)
+
+Codex and OpenCode were stable because they had ONE event path with no routing decision.
+
+## Design
+
+### Core principle
+
+One event source per provider session. Identity-based turn ownership, not timing-based routing.
+
+### Provider contract (`AgentSession`)
+
+```typescript
+interface AgentSession {
+  readonly provider: AgentProvider;
+  readonly id: string | null;
+  readonly capabilities: AgentCapabilityFlags;
+
+  // Turn lifecycle
+  startTurn(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<{ turnId: string }>;
+  interrupt(): Promise<void>;
+
+  // Event delivery (push-based)
+  subscribe(callback: (event: AgentStreamEvent) => void): () => void;
+
+  // History (hydration only — never live dispatch)
+  streamHistory(): AsyncGenerator<AgentStreamEvent>;
+
+  // Run (uses startTurn + subscribe internally)
+  run(prompt: AgentPromptInput, options?: AgentRunOptions): Promise<AgentRunResult>;
+
+  // Session metadata (unchanged)
+  getRuntimeInfo(): Promise<AgentRuntimeInfo>;
+  getAvailableModes(): Promise<AgentMode[]>;
+  getCurrentMode(): Promise<string | null>;
+  setMode(modeId: string): Promise<void>;
+  getPendingPermissions(): AgentPermissionRequest[];
+  respondToPermission(requestId: string, response: AgentPermissionResponse): Promise<void>;
+  describePersistence(): AgentPersistenceHandle | null;
+  close(): Promise<void>;
+  listCommands?(): Promise<AgentSlashCommand[]>;
+  setModel?(modelId: string | null): Promise<void>;
+  setThinkingOption?(thinkingOptionId: string | null): Promise<void>;
+}
+```
+
+### Method contracts
+
+#### `startTurn(prompt, options?): Promise<{ turnId: string }>`
+
+Initiates a foreground turn. The provider validates readiness, generates a unique `turnId`, submits the prompt to the runtime, and resolves once accepted. Resolving means the prompt was accepted — not that the turn has started processing.
+
+Rejects if: session not connected, foreground turn already active, runtime rejects prompt.
+
+#### `subscribe(callback): () => void`
+
+Registers a callback that receives ALL provider events — foreground and autonomous — in provider order. Returns an unsubscribe function. Events carry `turnId` when they belong to a turn.
+
+#### `streamHistory(): AsyncGenerator<AgentStreamEvent>`
+
+Yields persisted timeline items from prior sessions. Hydration only. Does NOT yield live events.
+
+#### `interrupt(): Promise<void>`
+
+Cancels the active foreground turn. The resulting `turn_canceled` event arrives via `subscribe()`.
+
+### Provider-side guarantees
+
+1. **Per-session ordering**: callbacks invoked in provider event order
+2. **No concurrent callback execution**: serialized delivery per session
+3. **Subscribe-before-start safety**: manager subscribes at session creation, before any `startTurn()` call — no events missed
+4. **Callback error isolation**: subscriber throws → provider logs and continues
+5. **Deterministic cleanup**: `close()` stops all callbacks; `unsubscribe()` stops that specific callback
+
+### Event tagging
+
+All turn-scoped events carry `turnId: string`. Providers stamp turnId in `notifySubscribers()` from the active turn state (`activeForegroundTurnId` or `autonomousTurn.id`). The manager derives turn kind (foreground vs autonomous) by comparing against its own `activeForegroundTurnId`.
+
+### User message dedup
+
+Claude SDK assigns its own UUID to user messages (does not preserve ours). The provider deduplicates user_message echoes by text content against the most recent foreground prompt.
+
+## Manager
+
+### Single subscription per session
+
+When a session is loaded, the manager subscribes once via `session.subscribe()`. This is the only live input path. Events flow through a single dispatcher that handles lifecycle projection, foreground turn waiters, and UI updates.
+
+### Lifecycle projection from turn identity
+
+- After `startTurn()` resolves: foreground turn is active
+- On `turn_started` for active foreground turnId: lifecycle = `running`
+- On terminal for active foreground turnId: lifecycle = `idle` or `error`, clear foreground turn
+- On autonomous `turn_started`: lifecycle = `running`
+- On autonomous terminal: lifecycle = `idle` or `error`
+
+### `streamAgent()` as filtered view
+
+```typescript
+async *streamAgent(agentId, prompt, options) {
+  const { turnId } = await session.startTurn(prompt, options);
+  agent.activeForegroundTurnId = turnId;
+
+  // Foreground turn waiter yields events matching this turnId
+  // Ends when terminal event for turnId arrives
+}
+```
+
+### State model
+
+| Concept | Implementation |
+|---------|---------------|
+| Foreground turn tracking | `activeForegroundTurnId: string \| null` |
+| Lifecycle projection | From turn events via turnId matching |
+| Cancellation | `session.interrupt()` + await waiter settlement |
+
+## What was deleted
+
+- `stream()` from `AgentSession` interface and all providers
+- `Pushable<T>` async queue from all providers
+- `streamLiveEvents()` capability
+- `activeForegroundTurn` + foreground queue in Claude provider
+- `liveEventQueue` in Claude provider
+- `routeSdkMessageFromPump()` timing-based routing (simplified to direct dispatch)
+- `startLiveEventPump()` in manager
+- `liveEventBacklog` + `flushLiveEventBacklog()` in manager
+- `shouldSuppressLiveUserMessageEcho()` in manager
+- `startLiveHistoryPolling()` for live dispatch
+- `snapHistoryOffsetToEnd()`
+- `pendingRun` as iterator reference
+
+## Integration tests
+
+All tests run against real Claude sessions with credentials from `.env.test`. No mocks.
+
+File: `packages/server/src/server/agent/providers/__tests__/claude-agent.event-stream.integration.test.ts`
+
+| Test | What it verifies |
+|------|-----------------|
+| Basic foreground turn | startTurn → events via subscribe → terminal with matching turnId |
+| No duplicate user_messages | Exactly ONE user_message per prompt, even after terminal |
+| Lifecycle doesn't get stuck | No stale turn_started after terminal for same turnId |
+| Autonomous run | sleep 5 in bg → idle → autonomous wake → idle (distinct turnIds) |
+| Interruption | Start long task → interrupt → turn_canceled arrives |
+| Sequential turns | Two turns produce distinct turnIds, no cross-contamination |
+| Fast-fail | Quick error produces clean terminal, no stale events |
+| User message dedup | Exactly one user_message with matching text in event log |
+
+### Invariants (asserted on every test)
+
+1. For each foreground turnId, exactly ONE `user_message` event
+2. Every `turn_started` has exactly one matching terminal
+3. After terminal for a foreground turnId, no later event with that turnId gets projected as autonomous
+4. Autonomous turns between foreground turns are visible with distinct turnIds

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "private": true,
   "workspaces": [
     "packages/expo-two-way-audio",
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "dev": "./scripts/dev.sh",
-    "dev:server": "NODE_ENV=development tsx packages/server/scripts/daemon-runner.ts --dev",
+    "dev:server": "npm run dev --workspace=@getpaseo/server",
     "dev:app": "npm run start --workspace=@getpaseo/app",
     "dev:website": "npm run dev --workspace=@getpaseo/website",
     "postinstall": "node scripts/postinstall-patches.mjs",
@@ -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",
@@ -44,9 +45,9 @@
     "version:all:patch": "npm version patch --include-workspace-root --message \"chore(release): cut %s\"",
     "version:all:minor": "npm version minor --include-workspace-root --message \"chore(release): cut %s\"",
     "version:all:major": "npm version major --include-workspace-root --message \"chore(release): cut %s\"",
-    "release:check": "npm run release:prepare && npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm run build --workspace=@getpaseo/relay && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/relay && npm pack --dry-run --workspace=@getpaseo/server && npm pack --dry-run --workspace=@getpaseo/cli",
-    "release:publish:dry-run": "npm publish --dry-run --workspace=@getpaseo/relay --access public && npm publish --dry-run --workspace=@getpaseo/server --access public && npm publish --dry-run --workspace=@getpaseo/cli --access public",
-    "release:publish": "npm publish --workspace=@getpaseo/relay --access public && npm publish --workspace=@getpaseo/server --access public && npm publish --workspace=@getpaseo/cli --access public",
+    "release:check": "npm run release:prepare && npm run typecheck --workspace=@getpaseo/highlight && npm run typecheck --workspace=@getpaseo/relay && npm run typecheck --workspace=@getpaseo/server && npm run typecheck --workspace=@getpaseo/cli && npm run build --workspace=@getpaseo/highlight && npm run build --workspace=@getpaseo/relay && npm run build --workspace=@getpaseo/server && npm run build --workspace=@getpaseo/cli && npm pack --dry-run --workspace=@getpaseo/highlight && npm pack --dry-run --workspace=@getpaseo/relay && npm pack --dry-run --workspace=@getpaseo/server && npm pack --dry-run --workspace=@getpaseo/cli",
+    "release:publish:dry-run": "npm publish --dry-run --workspace=@getpaseo/highlight --access public && npm publish --dry-run --workspace=@getpaseo/relay --access public && npm publish --dry-run --workspace=@getpaseo/server --access public && npm publish --dry-run --workspace=@getpaseo/cli --access public",
+    "release:publish": "npm publish --workspace=@getpaseo/highlight --access public && npm publish --workspace=@getpaseo/relay --access public && npm publish --workspace=@getpaseo/server --access public && npm publish --workspace=@getpaseo/cli --access public",
     "release:push": "node scripts/push-current-release-tag.mjs",
     "draft-release:push": "node scripts/push-current-release-tag.mjs --draft-release",
     "draft-release:patch": "npm run version:all:patch && npm run release:check && npm run draft-release:push",
@@ -59,6 +60,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.8",
+    "concurrently": "^9.2.1",
     "get-port-cli": "^3.0.0",
     "knip": "^5.82.1",
     "patch-package": "^8.0.1",

packages/app/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@getpaseo/app",
   "main": "index.ts",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "private": true,
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
-    "build:workspace-deps": "npm run build --workspace=@getpaseo/highlight && npm run build --prefix ../expo-two-way-audio",
+    "build:workspace-deps": "npm run build --workspace=@getpaseo/highlight && npm run build --workspace=@getpaseo/expo-two-way-audio",
     "eas-build-post-install": "npm run build:workspace-deps",
     "android": "npm run android:development",
     "android:development": "APP_VARIANT=development expo prebuild --platform android --non-interactive && APP_VARIANT=development expo run:android --variant=debug",
@@ -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.32",
-    "@getpaseo/highlight": "*",
-    "@getpaseo/server": "0.1.32",
+    "@getpaseo/expo-two-way-audio": "0.1.33",
+    "@getpaseo/highlight": "0.1.33",
+    "@getpaseo/server": "0.1.33",
     "@gorhom/bottom-sheet": "^5.2.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "2.2.0",
@@ -44,8 +44,13 @@
     "@react-navigation/native": "^7.1.8",
     "@tanstack/react-query": "^5.90.11",
     "@tanstack/react-virtual": "^3.13.21",
+    "@xterm/addon-clipboard": "^0.2.0",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-image": "^0.9.0",
+    "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-search": "^0.16.0",
     "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "base64-js": "^1.5.1",

packages/app/src/app/_layout.tsx

@@ -264,6 +264,9 @@ function AppContainer({
   const daemons = useHosts();
   const toggleAgentList = usePanelStore((state) => state.toggleAgentList);
   const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
+  const toggleBothSidebars = usePanelStore((state) => state.toggleBothSidebars);
+  const toggleFocusMode = usePanelStore((state) => state.toggleFocusMode);
+  const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
 
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
   const chromeEnabled = chromeEnabledOverride ?? daemons.length > 0;
@@ -274,6 +277,8 @@ function AppContainer({
     toggleAgentList,
     selectedAgentId,
     toggleFileExplorer,
+    toggleBothSidebars,
+    toggleFocusMode,
   });
 
   const containerStyle = useMemo(
@@ -284,7 +289,7 @@ function AppContainer({
   const content = (
     <View style={containerStyle}>
       <View style={rowStyle}>
-        {!isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
+        {!isMobile && chromeEnabled && !isFocusModeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}
         <View style={flexStyle}>{children}</View>
       </View>
       {isMobile && chromeEnabled && <LeftSidebar selectedAgentId={selectedAgentId} />}

packages/app/src/app/settings.tsx

@@ -1,55 +1,23 @@
 import { useEffect, useMemo } from "react";
-import { ActivityIndicator, View } from "react-native";
 import { useRouter } from "expo-router";
-import { useUnistyles } from "react-native-unistyles";
 import { DraftAgentScreen } from "@/screens/agent/draft-agent-screen";
 import { useHosts } from "@/runtime/host-runtime";
-import { useFormPreferences } from "@/hooks/use-form-preferences";
 import { buildHostSettingsRoute } from "@/utils/host-routes";
 
 export default function LegacySettingsRoute() {
   const router = useRouter();
-  const { theme } = useUnistyles();
   const daemons = useHosts();
-  const { preferences, isLoading: preferencesLoading } = useFormPreferences();
 
   const targetServerId = useMemo(() => {
-    if (daemons.length === 0) {
-      return null;
-    }
-    if (preferences.serverId) {
-      const match = daemons.find((daemon) => daemon.serverId === preferences.serverId);
-      if (match) {
-        return match.serverId;
-      }
-    }
     return daemons[0]?.serverId ?? null;
-  }, [daemons, preferences.serverId]);
+  }, [daemons]);
 
   useEffect(() => {
-    if (preferencesLoading) {
-      return;
-    }
     if (!targetServerId) {
       return;
     }
     router.replace(buildHostSettingsRoute(targetServerId) as any);
-  }, [preferencesLoading, router, targetServerId]);
-
-  if (preferencesLoading) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: theme.colors.surface0,
-        }}
-      >
-        <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
-      </View>
-    );
-  }
+  }, [router, targetServerId]);
 
   if (!targetServerId) {
     return <DraftAgentScreen />;

packages/app/src/components/active-processes.tsx

@@ -36,10 +36,12 @@ function getModeName(modeId?: string, availableModes?: Agent["availableModes"]):
 function getModeColor(modeId?: string): string {
   if (!modeId) return "#9ca3af"; // gray
 
-  // Color based on common mode types
-  if (modeId.includes("ask")) return "#f59e0b"; // orange - asks permission
-  if (modeId.includes("code")) return "#22c55e"; // green - writes code
-  if (modeId.includes("architect") || modeId.includes("plan")) return "#3b82f6"; // blue - plans
+  if (modeId.includes("bypass") || modeId.includes("full-access")) return "#ef4444"; // red - dangerous
+  if (modeId.includes("auto") || modeId.includes("build") || modeId.includes("acceptEdits"))
+    return "#3b82f6"; // blue - build/auto
+  if (modeId.includes("plan") || modeId.includes("architect")) return "#a855f7"; // purple - planning
+  if (modeId.includes("ask") || modeId.includes("read-only") || modeId === "default")
+    return "#22c55e"; // green - safest
 
   return "#9ca3af"; // gray - unknown
 }

packages/app/src/components/agent-form/agent-form-dropdowns.tsx

@@ -537,14 +537,10 @@ export function AgentConfigRow({
   }, [modeOptions]);
 
   const modelSelectOptions: ComboSelectOption[] = useMemo(() => {
-    const opts: ComboSelectOption[] = [{ id: "", label: "Auto" }];
-    for (const model of models) {
-      opts.push({
-        id: model.id,
-        label: model.label,
-      });
-    }
-    return opts;
+    return models.map((model) => ({
+      id: model.id,
+      label: model.label,
+    }));
   }, [models]);
 
   const thinkingSelectOptions: ComboSelectOption[] = useMemo(
@@ -586,7 +582,7 @@ export function AgentConfigRow({
           title="Select model"
           value={selectedModel}
           options={modelSelectOptions}
-          placeholder="Auto"
+          placeholder={isModelLoading ? "Loading..." : "Select model"}
           disabled={disabled}
           isLoading={isModelLoading}
           onSelect={onSelectModel}
@@ -777,10 +773,8 @@ export function ModelDropdown({
   const [isOpen, setIsOpen] = useState(false);
   const anchorRef = useRef<View>(null);
 
-  const selectedLabel = selectedModel
-    ? (models.find((model) => model.id === selectedModel)?.label ?? selectedModel)
-    : "Automatic";
-  const placeholder = isLoading && models.length === 0 ? "Loading..." : "Automatic";
+  const selectedLabel = models.find((model) => model.id === selectedModel)?.label ?? selectedModel ?? "Select model";
+  const placeholder = isLoading && models.length === 0 ? "Loading..." : "Select model";
   const helperText = error
     ? undefined
     : isLoading
@@ -790,34 +784,20 @@ export function ModelDropdown({
         : undefined;
 
   const options = useMemo(() => {
-    const opts: ComboSelectOption[] = [
-      {
-        id: "",
-        label: "Automatic (provider default)",
-        description: "Let the assistant pick the recommended model.",
-      },
-    ];
-    for (const model of models) {
-      opts.push({
-        id: model.id,
-        label: model.label,
-        description: model.description,
-      });
-    }
-    return opts;
+    return models.map((model) => ({
+      id: model.id,
+      label: model.label,
+      description: model.description,
+    }));
   }, [models]);
 
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleOpenChange = useCallback((open: boolean) => setIsOpen(open), []);
   const handleSelect = useCallback(
     (id: string) => {
-      if (id === "") {
-        onClear();
-      } else {
-        onSelect(id);
-      }
+      onSelect(id);
     },
-    [onClear, onSelect],
+    [onSelect],
   );
 
   return (

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

@@ -1,10 +1,10 @@
 import { View, Pressable, Text, ActivityIndicator, Platform } from "react-native";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
+import { useShallow } from "zustand/shallow";
 import { ArrowUp, Square, Pencil, AudioLines } from "lucide-react-native";
 import Animated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useIsFocused } from "@react-navigation/native";
 import { FOOTER_HEIGHT, MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { generateMessageId, type StreamItem } from "@/types/stream";
 import {
@@ -59,6 +59,7 @@ type ImageListUpdater = ImageAttachment[] | ((prev: ImageAttachment[]) => ImageA
 interface AgentInputAreaProps {
   agentId: string;
   serverId: string;
+  isInputActive: boolean;
   onSubmitMessage?: (payload: MessagePayload) => Promise<void>;
   /** Externally controlled loading state. When true, disables the submit button. */
   isSubmitLoading?: boolean;
@@ -91,6 +92,7 @@ const MOBILE_MESSAGE_PLACEHOLDER = "Message, @files, /commands";
 export function AgentInputArea({
   agentId,
   serverId,
+  isInputActive,
   onSubmitMessage,
   isSubmitLoading = false,
   blurOnSubmit = false,
@@ -112,21 +114,27 @@ export function AgentInputArea({
   const { theme } = useUnistyles();
   const buttonIconSize = Platform.OS === "web" ? theme.iconSize.md : theme.iconSize.lg;
   const insets = useSafeAreaInsets();
-  const isScreenFocused = useIsFocused();
-
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
   const agentDirectoryStatus = useHostRuntimeAgentDirectoryStatus(serverId);
   const toast = useToast();
   const voice = useVoiceOptional();
   const voiceToggleKeys = useShortcutKeys("voice-toggle");
+  const dictationCancelKeys = useShortcutKeys("dictation-cancel");
   const isDictationReady =
     isConnected &&
     (agentDirectoryStatus === "ready" ||
       agentDirectoryStatus === "revalidating" ||
       agentDirectoryStatus === "error_after_ready");
 
-  const agent = useSessionStore((state) => state.sessions[serverId]?.agents?.get(agentId));
+  const agentState = useSessionStore(
+    useShallow((state) => {
+      const agent = state.sessions[serverId]?.agents?.get(agentId) ?? null;
+      return {
+        status: agent?.status ?? null,
+      };
+    }),
+  );
 
   const queuedMessagesRaw = useSessionStore((state) =>
     state.sessions[serverId]?.queuedMessages?.get(agentId),
@@ -259,7 +267,6 @@ export function AgentInputArea({
           return updated;
         });
       }
-
       const imagesData = await encodeImages(images);
       await client.sendAgentMessage(agentId, text, {
         messageId: clientMessageId,
@@ -273,41 +280,8 @@ export function AgentInputArea({
     onSubmitMessageRef.current = onSubmitMessage;
   }, [onSubmitMessage]);
 
-  const isAgentRunning = agent?.status === "running";
-  const agentUpdatedAtMs = agent?.updatedAt?.getTime() ?? 0;
-
-  const prevIsAgentRunningRef = useRef(isAgentRunning);
-  const latestAgentUpdatedAtRef = useRef(agentUpdatedAtMs);
-  useEffect(() => {
-    const previousUpdatedAt = latestAgentUpdatedAtRef.current;
-    if (agentUpdatedAtMs < previousUpdatedAt) {
-      if (isProcessing && !isAgentRunning) {
-        prevIsAgentRunningRef.current = false;
-        setIsProcessing(false);
-      }
-      return;
-    }
-
-    const wasRunning = prevIsAgentRunningRef.current;
-    let shouldClearProcessing = false;
-
-    if (isProcessing) {
-      const hasEnteredRunning = !wasRunning && isAgentRunning;
-      const hasFreshRunningUpdateWhileRunning =
-        wasRunning && isAgentRunning && agentUpdatedAtMs > previousUpdatedAt;
-      const hasStoppedRunning = wasRunning && !isAgentRunning;
-
-      shouldClearProcessing =
-        hasEnteredRunning || hasFreshRunningUpdateWhileRunning || hasStoppedRunning;
-    }
-
-    prevIsAgentRunningRef.current = isAgentRunning;
-    latestAgentUpdatedAtRef.current = agentUpdatedAtMs;
-
-    if (shouldClearProcessing) {
-      setIsProcessing(false);
-    }
-  }, [agentUpdatedAtMs, isAgentRunning, isProcessing]);
+  const isAgentRunning = agentState.status === "running";
+  const hasAgent = agentState.status !== null;
 
   const updateQueue = useCallback(
     (updater: (current: QueuedMessage[]) => QueuedMessage[]) => {
@@ -349,7 +323,7 @@ export function AgentInputArea({
       message,
       imageAttachments,
       forceSend,
-      isAgentRunning: agent?.status === "running",
+      isAgentRunning: agentState.status === "running",
       // Parent-managed submits are still valid submit paths even when the
       // transport is disconnected, because the parent decides the failure mode.
       canSubmit: Boolean(sendAgentMessageRef.current || onSubmitMessageRef.current),
@@ -423,7 +397,7 @@ export function AgentInputArea({
 
   const handleKeyboardAction = useCallback(
     (action: KeyboardActionDefinition): boolean => {
-      if (!isScreenFocused) {
+      if (!isInputActive) {
         return false;
       }
 
@@ -459,7 +433,7 @@ export function AgentInputArea({
           return false;
       }
     },
-    [isScreenFocused],
+    [isInputActive],
   );
 
   useKeyboardActionHandler({
@@ -471,9 +445,9 @@ export function AgentInputArea({
       "message-input.voice-toggle",
       "message-input.voice-mute-toggle",
     ],
-    enabled: isScreenFocused,
+    enabled: isInputActive,
     priority: isMessageInputFocused ? 200 : 100,
-    isActive: () => isScreenFocused,
+    isActive: () => isInputActive,
     handle: handleKeyboardAction,
   });
 
@@ -482,7 +456,7 @@ export function AgentInputArea({
   });
 
   function handleCancelAgent() {
-    if (!agent || agent.status !== "running" || isCancellingAgent) {
+    if (!isAgentRunning || isCancellingAgent) {
       return;
     }
     if (!isConnected || !client) {
@@ -496,7 +470,7 @@ export function AgentInputArea({
   const isVoiceModeForAgent = voice?.isVoiceModeForAgent(serverId, agentId) ?? false;
 
   const handleToggleRealtimeVoice = useCallback(() => {
-    if (!voice || !isConnected || !agent) {
+    if (!voice || !isConnected || !hasAgent) {
       return;
     }
     if (voice.isVoiceSwitching) {
@@ -513,7 +487,7 @@ export function AgentInputArea({
         toast.error(message);
       }
     });
-  }, [agent, agentId, isConnected, serverId, toast, voice]);
+  }, [agentId, hasAgent, isConnected, serverId, toast, voice]);
 
   function handleEditQueuedMessage(id: string) {
     const item = queuedMessages.find((q) => q.id === id);
@@ -593,17 +567,19 @@ export function AgentInputArea({
           )}
         </TooltipTrigger>
         <TooltipContent side="top" align="center" offset={8}>
-          <View style={styles.tooltipRow}>
-            <Text style={styles.tooltipText}>Interrupt</Text>
-            <Shortcut keys={["Esc"]} style={styles.tooltipShortcut} />
-          </View>
-        </TooltipContent>
-      </Tooltip>
+            <View style={styles.tooltipRow}>
+              <Text style={styles.tooltipText}>Interrupt</Text>
+              {dictationCancelKeys ? (
+                <Shortcut chord={dictationCancelKeys} style={styles.tooltipShortcut} />
+              ) : null}
+            </View>
+          </TooltipContent>
+        </Tooltip>
     ) : null;
 
   const rightContent = (
     <View style={styles.rightControls}>
-      {!isVoiceModeForAgent && agent ? (
+      {!isVoiceModeForAgent && hasAgent ? (
         <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
           <TooltipTrigger
             onPress={handleToggleRealtimeVoice}
@@ -625,7 +601,9 @@ export function AgentInputArea({
           <TooltipContent side="top" align="center" offset={8}>
             <View style={styles.tooltipRow}>
               <Text style={styles.tooltipText}>Voice mode</Text>
-              {voiceToggleKeys && <Shortcut keys={voiceToggleKeys} style={styles.tooltipShortcut} />}
+              {voiceToggleKeys ? (
+                <Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
+              ) : null}
             </View>
           </TooltipContent>
         </Tooltip>
@@ -711,7 +689,7 @@ export function AgentInputArea({
               autoFocus={autoFocus && isDesktopWebBreakpoint}
               autoFocusKey={`${serverId}:${agentId}`}
               disabled={isSubmitLoading}
-              isScreenFocused={isScreenFocused}
+              isInputActive={isInputActive}
               leftContent={leftContent}
               rightContent={rightContent}
               voiceServerId={serverId}

packages/app/src/components/agent-input-submit.ts

@@ -46,6 +46,7 @@ export async function submitAgentInput<TImage>(
   try {
     await input.submitMessage({ message: trimmedMessage, imageAttachments });
     input.clearDraft("sent");
+    input.setIsProcessing(false);
     return "submitted";
   } catch (error) {
     input.onSubmitError?.(error);

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

@@ -14,14 +14,14 @@ describe("getStatusSelectorHint", () => {
 });
 
 describe("normalizeModelId", () => {
-  it("treats empty and default values as unset", () => {
+  it("treats empty values as unset", () => {
     expect(normalizeModelId("")).toBeNull();
-    expect(normalizeModelId(" default ")).toBeNull();
     expect(normalizeModelId(undefined)).toBeNull();
   });
 
   it("returns trimmed model ids", () => {
     expect(normalizeModelId(" gpt-5.1-codex ")).toBe("gpt-5.1-codex");
+    expect(normalizeModelId(" default ")).toBe("default");
   });
 });
 
@@ -69,4 +69,50 @@ describe("resolveAgentModelSelection", () => {
     expect(selection.selectedThinkingId).toBe("high");
     expect(selection.displayThinking).toBe("High");
   });
+
+  it("falls back to the provider default model label instead of Auto", () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: "a",
+          provider: "codex",
+          label: "Model A",
+          isDefault: true,
+          thinkingOptions: [{ id: "low", label: "Low" }],
+          defaultThinkingOptionId: "low",
+        },
+      ],
+      runtimeModelId: null,
+      configuredModelId: null,
+      explicitThinkingOptionId: null,
+    });
+
+    expect(selection.displayModel).toBe("Model A");
+    expect(selection.displayThinking).toBe("Low");
+  });
+
+  it("prefers the configured model when runtime model is not in the model list", () => {
+    const selection = resolveAgentModelSelection({
+      models: [
+        {
+          id: "default",
+          provider: "claude",
+          label: "Default (Sonnet 4.6)",
+          isDefault: true,
+          thinkingOptions: [
+            { id: "low", label: "Low" },
+            { id: "medium", label: "Medium" },
+          ],
+        },
+      ],
+      runtimeModelId: "claude-sonnet-4-6-20260101",
+      configuredModelId: "default",
+      explicitThinkingOptionId: null,
+    });
+
+    expect(selection.activeModelId).toBe("default");
+    expect(selection.displayModel).toBe("Default (Sonnet 4.6)");
+    expect(selection.selectedThinkingId).toBe("low");
+    expect(selection.displayThinking).toBe("Low");
+  });
 });

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

@@ -1,6 +1,8 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { View, Text, Platform, Pressable, Keyboard } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useShallow } from "zustand/shallow";
+import { useStoreWithEqualityFn } from "zustand/traditional";
 import { Brain, ChevronDown, ShieldAlert, ShieldCheck, ShieldOff } from "lucide-react-native";
 import { getProviderIcon } from "@/components/provider-icons";
 import { CombinedModelSelector } from "@/components/combined-model-selector";
@@ -104,21 +106,18 @@ function getModeIconColor(
   palette: {
     blue: { 500: string };
     green: { 500: string };
-    amber: { 500: string };
     red: { 500: string };
     purple: { 500: string };
   },
 ): string {
   switch (colorTier) {
-    case "default":
-      return palette.blue[500];
     case "safe":
       return palette.green[500];
     case "moderate":
-      return palette.amber[500];
+      return palette.blue[500];
     case "dangerous":
       return palette.red[500];
-    case "readonly":
+    case "planning":
       return palette.purple[500];
     default:
       return palette.blue[500];
@@ -166,8 +165,12 @@ function ControlledStatusBar({
   const displayModel =
     isModelLoading && (!modelOptions || modelOptions.length === 0)
       ? "Loading models..."
-      : findOptionLabel(modelOptions, selectedModelId, "Auto");
-  const displayThinking = findOptionLabel(thinkingOptions, selectedThinkingOptionId, "auto");
+      : findOptionLabel(modelOptions, selectedModelId, "Select model");
+  const displayThinking = findOptionLabel(
+    thinkingOptions,
+    selectedThinkingOptionId,
+    thinkingOptions?.[0]?.label ?? "Unknown",
+  );
 
   const modeVisuals = selectedModeId ? getModeVisuals(provider, selectedModeId) : undefined;
   const ModeIconComponent = modeVisuals?.icon ? MODE_ICONS[modeVisuals.icon] : null;
@@ -283,55 +286,6 @@ function ControlledStatusBar({
             </>
           ) : null}
 
-          {modeOptions && modeOptions.length > 0 ? (
-            <>
-              <Tooltip
-                key={`mode-${openSelector === "mode" ? "open" : "closed"}`}
-                delayDuration={0}
-                enabledOnDesktop
-                enabledOnMobile={false}
-              >
-                <TooltipTrigger asChild triggerRefProp="ref">
-                  <Pressable
-                    ref={modeAnchorRef}
-                    collapsable={false}
-                    disabled={disabled || !canSelectMode}
-                    onPress={() => handleSelectorPress("mode")}
-                    style={({ pressed, hovered }) => [
-                      styles.modeIconBadge,
-                      hovered && styles.modeBadgeHovered,
-                      (pressed || openSelector === "mode") && styles.modeBadgePressed,
-                      (disabled || !canSelectMode) && styles.disabledBadge,
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityLabel={`Select agent mode (${displayMode})`}
-                    testID="agent-mode-selector"
-                  >
-                    {ModeIconComponent ? (
-                      <ModeIconComponent size={theme.iconSize.md} color={modeIconColor} />
-                    ) : (
-                      <ShieldCheck size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-                    )}
-                  </Pressable>
-                </TooltipTrigger>
-                <TooltipContent side="top" align="center" offset={8}>
-                  <Text style={styles.tooltipText}>{getStatusSelectorHint("mode")}</Text>
-                </TooltipContent>
-              </Tooltip>
-              <Combobox
-                options={comboboxModeOptions}
-                value={selectedModeId ?? ""}
-                onSelect={(id) => onSelectMode?.(id)}
-                searchable={comboboxModeOptions.length > SEARCH_THRESHOLD}
-                open={openSelector === "mode"}
-                onOpenChange={handleOpenChange("mode")}
-                anchorRef={modeAnchorRef}
-                desktopPlacement="top-start"
-                renderOption={renderModeOption}
-              />
-            </>
-          ) : null}
-
           {canSelectModel ? (
             <>
               <Tooltip
@@ -423,6 +377,55 @@ function ControlledStatusBar({
               />
             </>
           ) : null}
+
+          {modeOptions && modeOptions.length > 0 ? (
+            <>
+              <Tooltip
+                key={`mode-${openSelector === "mode" ? "open" : "closed"}`}
+                delayDuration={0}
+                enabledOnDesktop
+                enabledOnMobile={false}
+              >
+                <TooltipTrigger asChild triggerRefProp="ref">
+                  <Pressable
+                    ref={modeAnchorRef}
+                    collapsable={false}
+                    disabled={disabled || !canSelectMode}
+                    onPress={() => handleSelectorPress("mode")}
+                    style={({ pressed, hovered }) => [
+                      styles.modeIconBadge,
+                      hovered && styles.modeBadgeHovered,
+                      (pressed || openSelector === "mode") && styles.modeBadgePressed,
+                      (disabled || !canSelectMode) && styles.disabledBadge,
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel={`Select agent mode (${displayMode})`}
+                    testID="agent-mode-selector"
+                  >
+                    {ModeIconComponent ? (
+                      <ModeIconComponent size={theme.iconSize.md} color={modeIconColor} />
+                    ) : (
+                      <ShieldCheck size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+                    )}
+                  </Pressable>
+                </TooltipTrigger>
+                <TooltipContent side="top" align="center" offset={8}>
+                  <Text style={styles.tooltipText}>{getStatusSelectorHint("mode")}</Text>
+                </TooltipContent>
+              </Tooltip>
+              <Combobox
+                options={comboboxModeOptions}
+                value={selectedModeId ?? ""}
+                onSelect={(id) => onSelectMode?.(id)}
+                searchable={comboboxModeOptions.length > SEARCH_THRESHOLD}
+                open={openSelector === "mode"}
+                onOpenChange={handleOpenChange("mode")}
+                anchorRef={modeAnchorRef}
+                desktopPlacement="top-start"
+                renderOption={renderModeOption}
+              />
+            </>
+          ) : null}
         </>
       ) : (
         <>
@@ -484,49 +487,6 @@ function ControlledStatusBar({
               </View>
             ) : null}
 
-            {modeOptions && modeOptions.length > 0 ? (
-              <View style={styles.sheetSection}>
-                <DropdownMenu
-                  open={openSelector === "mode"}
-                  onOpenChange={handleOpenChange("mode")}
-                >
-                  <DropdownMenuTrigger
-                    disabled={disabled || !canSelectMode}
-                    style={({ pressed }) => [
-                      styles.sheetSelect,
-                      pressed && styles.sheetSelectPressed,
-                      (disabled || !canSelectMode) && styles.disabledSheetSelect,
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityLabel="Select agent mode"
-                    testID="agent-preferences-mode"
-                  >
-                    {ModeIconComponent ? (
-                      <ModeIconComponent size={theme.iconSize.md} color={modeIconColor} />
-                    ) : null}
-                    <Text style={styles.sheetSelectText}>{displayMode}</Text>
-                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent side="top" align="start">
-                    {modeOptions.map((mode) => {
-                      const visuals = getModeVisuals(provider, mode.id);
-                      const Icon = visuals?.icon ? MODE_ICONS[visuals.icon] : ShieldCheck;
-                      return (
-                        <DropdownMenuItem
-                          key={mode.id}
-                          selected={mode.id === selectedModeId}
-                          onSelect={() => onSelectMode?.(mode.id)}
-                          leading={<Icon size={16} color={theme.colors.foreground} />}
-                        >
-                          {mode.label}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </View>
-            ) : null}
-
             {canSelectModel ? (
               <View style={styles.sheetSection}>
                 <DropdownMenu
@@ -596,6 +556,49 @@ function ControlledStatusBar({
                 </DropdownMenu>
               </View>
             ) : null}
+
+            {modeOptions && modeOptions.length > 0 ? (
+              <View style={styles.sheetSection}>
+                <DropdownMenu
+                  open={openSelector === "mode"}
+                  onOpenChange={handleOpenChange("mode")}
+                >
+                  <DropdownMenuTrigger
+                    disabled={disabled || !canSelectMode}
+                    style={({ pressed }) => [
+                      styles.sheetSelect,
+                      pressed && styles.sheetSelectPressed,
+                      (disabled || !canSelectMode) && styles.disabledSheetSelect,
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel="Select agent mode"
+                    testID="agent-preferences-mode"
+                  >
+                    {ModeIconComponent ? (
+                      <ModeIconComponent size={theme.iconSize.md} color={modeIconColor} />
+                    ) : null}
+                    <Text style={styles.sheetSelectText}>{displayMode}</Text>
+                    <ChevronDown size={theme.iconSize.md} color={theme.colors.foregroundMuted} />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="top" align="start">
+                    {modeOptions.map((mode) => {
+                      const visuals = getModeVisuals(provider, mode.id);
+                      const Icon = visuals?.icon ? MODE_ICONS[visuals.icon] : ShieldCheck;
+                      return (
+                        <DropdownMenuItem
+                          key={mode.id}
+                          selected={mode.id === selectedModeId}
+                          onSelect={() => onSelectMode?.(mode.id)}
+                          leading={<Icon size={16} color={theme.colors.foreground} />}
+                        >
+                          {mode.label}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </View>
+            ) : null}
           </AdaptiveModalSheet>
         </>
       )}
@@ -603,8 +606,29 @@ function ControlledStatusBar({
   );
 }
 
+const EMPTY_MODES: AgentMode[] = [];
+
 export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
-  const agent = useSessionStore((state) => state.sessions[serverId]?.agents?.get(agentId));
+  const agent = useSessionStore(
+    useShallow((state) => {
+      const currentAgent = state.sessions[serverId]?.agents?.get(agentId) ?? null;
+      return currentAgent
+        ? {
+            provider: currentAgent.provider,
+            cwd: currentAgent.cwd,
+            currentModeId: currentAgent.currentModeId,
+            runtimeModelId: currentAgent.runtimeInfo?.model ?? null,
+            model: currentAgent.model,
+            thinkingOptionId: currentAgent.thinkingOptionId,
+          }
+        : null;
+    }),
+  );
+  const availableModes = useStoreWithEqualityFn(
+    useSessionStore,
+    (state) => state.sessions[serverId]?.agents?.get(agentId)?.availableModes ?? EMPTY_MODES,
+    (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b),
+  );
   const client = useSessionStore((state) => state.sessions[serverId]?.client ?? null);
 
   const modelsQuery = useQuery({
@@ -631,23 +655,23 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
   const models = modelsQuery.data ?? null;
 
   const displayMode =
-    agent?.availableModes?.find((mode) => mode.id === agent.currentModeId)?.label ||
+    availableModes.find((mode) => mode.id === agent?.currentModeId)?.label ||
     agent?.currentModeId ||
     "default";
 
   const modelSelection = resolveAgentModelSelection({
     models,
-    runtimeModelId: agent?.runtimeInfo?.model,
+    runtimeModelId: agent?.runtimeModelId,
     configuredModelId: agent?.model,
     explicitThinkingOptionId: agent?.thinkingOptionId,
   });
 
   const modeOptions = useMemo<StatusOption[]>(() => {
-    return (agent?.availableModes ?? []).map((mode) => ({
+    return availableModes.map((mode) => ({
       id: mode.id,
       label: mode.label,
     }));
-  }, [agent?.availableModes]);
+  }, [availableModes]);
 
   const modelOptions = useMemo<StatusOption[]>(() => {
     return (models ?? []).map((model) => ({ id: model.id, label: model.label }));
@@ -668,9 +692,7 @@ export function AgentStatusBar({ agentId, serverId }: AgentStatusBarProps) {
     <ControlledStatusBar
       provider={agent.provider}
       modeOptions={
-        modeOptions.length > 0
-          ? modeOptions
-          : [{ id: agent.currentModeId ?? "", label: displayMode }]
+        modeOptions.length > 0 ? modeOptions : [{ id: agent.currentModeId ?? "", label: displayMode }]
       }
       selectedModeId={agent.currentModeId ?? undefined}
       onSelectMode={(modeId) => {
@@ -777,7 +799,7 @@ export function DraftAgentStatusBar({
     label: definition.label,
   }));
 
-  const modelOptions: StatusOption[] = [{ id: "", label: "Auto" }];
+  const modelOptions: StatusOption[] = [];
   for (const model of models) {
     modelOptions.push({ id: model.id, label: model.label });
   }

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

@@ -15,7 +15,7 @@ export function getStatusSelectorHint(selector: ExplainedStatusSelector): string
 
 export function normalizeModelId(modelId: string | null | undefined): string | null {
   const normalized = typeof modelId === "string" ? modelId.trim() : "";
-  if (!normalized || normalized.toLowerCase() === "default") {
+  if (!normalized) {
     return null;
   }
   return normalized;
@@ -30,25 +30,33 @@ export function resolveAgentModelSelection(input: {
   const { models, runtimeModelId, configuredModelId, explicitThinkingOptionId } = input;
   const normalizedRuntimeModelId = normalizeModelId(runtimeModelId);
   const normalizedConfiguredModelId = normalizeModelId(configuredModelId);
-  const preferredModelId = normalizedRuntimeModelId ?? normalizedConfiguredModelId;
+  const runtimeSelectedModel =
+    models && normalizedRuntimeModelId
+      ? (models.find((model) => model.id === normalizedRuntimeModelId) ?? null)
+      : null;
+  const preferredModelId =
+    runtimeSelectedModel?.id ?? normalizedConfiguredModelId ?? normalizedRuntimeModelId;
+  const fallbackModel =
+    models?.find((model) => model.isDefault) ?? models?.[0] ?? null;
   const selectedModel =
     models && preferredModelId
-      ? (models.find((model) => model.id === preferredModelId) ?? null)
-      : null;
+      ? (models.find((model) => model.id === preferredModelId) ?? fallbackModel ?? null)
+      : fallbackModel;
 
   const activeModelId = selectedModel?.id ?? preferredModelId ?? null;
-  const displayModel = selectedModel?.label ?? preferredModelId ?? "Auto";
+  const displayModel =
+    selectedModel?.label ?? preferredModelId ?? fallbackModel?.label ?? "Unknown model";
 
   const thinkingOptions = selectedModel?.thinkingOptions ?? null;
-  const selectedThinkingId =
+  const resolvedThinkingId =
     explicitThinkingOptionId && explicitThinkingOptionId !== "default"
       ? explicitThinkingOptionId
       : (selectedModel?.defaultThinkingOptionId ?? null);
   const selectedThinking =
-    thinkingOptions?.find((option) => option.id === selectedThinkingId) ?? null;
-  const displayThinking =
-    selectedThinking?.label ??
-    (selectedThinkingId === "default" ? "Model default" : (selectedThinkingId ?? "auto"));
+    thinkingOptions?.find((option) => option.id === resolvedThinkingId) ?? null;
+  const effectiveThinking = selectedThinking ?? thinkingOptions?.[0] ?? null;
+  const selectedThinkingId = effectiveThinking?.id ?? null;
+  const displayThinking = effectiveThinking?.label ?? selectedThinkingId ?? "Unknown";
 
   return {
     selectedModel,

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

@@ -1,5 +1,6 @@
 import {
   forwardRef,
+  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -38,7 +39,7 @@ import {
 import type { StreamItem } from "@/types/stream";
 import type { PendingPermission } from "@/types/shared";
 import type { AgentPermissionResponse } from "@server/server/agent/agent-sdk-types";
-import type { Agent } from "@/contexts/session-context";
+import type { AgentScreenAgent } from "@/hooks/use-agent-screen-state-machine";
 import { useSessionStore } from "@/stores/session-store";
 import { useFileExplorerActions } from "@/hooks/use-file-explorer-actions";
 import type { DaemonClient } from "@server/client/daemon-client";
@@ -63,6 +64,7 @@ import { MAX_CONTENT_WIDTH } from "@/constants/layout";
 import { getMarkdownListMarker } from "@/utils/markdown-list";
 import { normalizeInlinePathTarget } from "@/utils/inline-path";
 import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
+import { useStableEvent } from "@/hooks/use-stable-event";
 import {
   getWorkingIndicatorDotStrength,
   WORKING_INDICATOR_CYCLE_MS,
@@ -80,7 +82,7 @@ export interface AgentStreamViewHandle {
 export interface AgentStreamViewProps {
   agentId: string;
   serverId?: string;
-  agent: Agent;
+  agent: AgentScreenAgent;
   streamItems: StreamItem[];
   pendingPermissions: Map<string, PendingPermission>;
   routeBottomAnchorRequest?: BottomAnchorRouteRequest | null;
@@ -88,7 +90,7 @@ export interface AgentStreamViewProps {
   onOpenWorkspaceFile?: (input: { filePath: string }) => void;
 }
 
-export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamViewProps>(
+const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamViewProps>(
   function AgentStreamView(
     {
       agentId,
@@ -136,6 +138,11 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
       workspaceId,
       workspaceRoot,
     });
+    const openWorkspaceFile = useStableEvent(function openWorkspaceFile(input: {
+      filePath: string;
+    }) {
+      onOpenWorkspaceFile?.(input);
+    });
     // Keep entry/exit animations off on Android due to RN dispatchDraw crashes
     // tracked in react-native-reanimated#8422.
     const shouldDisableEntryExitAnimations = Platform.OS === "android";
@@ -164,7 +171,7 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
 
         if (normalized.file) {
           if (onOpenWorkspaceFile) {
-            onOpenWorkspaceFile({ filePath: normalized.file });
+            openWorkspaceFile({ filePath: normalized.file });
             return;
           }
 
@@ -197,7 +204,7 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
         resolvedServerId,
         router,
         setExplorerTabForCheckout,
-        onOpenWorkspaceFile,
+        openWorkspaceFile,
         workspaceId,
       ],
     );
@@ -657,6 +664,9 @@ export const AgentStreamView = forwardRef<AgentStreamViewHandle, AgentStreamView
   },
 );
 
+export const AgentStreamView = memo(AgentStreamViewComponent);
+AgentStreamView.displayName = "AgentStreamView";
+
 function WorkingIndicator() {
   const progress = useSharedValue(0);
 

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

@@ -11,6 +11,13 @@ const INLINE_MODEL_THRESHOLD = 8;
 
 type DrillDownView = { provider: string };
 
+function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
+  if (!models || models.length === 0) {
+    return "Select model";
+  }
+  return (models.find((model) => model.isDefault) ?? models[0])?.label ?? "Select model";
+}
+
 interface CombinedModelSelectorProps {
   providerDefinitions: AgentProviderDefinition[];
   allProviderModels: Map<string, AgentModelDefinition[]>;
@@ -66,9 +73,9 @@ export function CombinedModelSelector({
 
   const selectedModelLabel = useMemo(() => {
     const models = allProviderModels.get(selectedProvider);
-    if (!models) return isLoading ? "Loading..." : "Auto";
+    if (!models) return isLoading ? "Loading..." : "Select model";
     const model = models.find((m) => m.id === selectedModel);
-    return model?.label ?? "Auto";
+    return model?.label ?? resolveDefaultModelLabel(models);
   }, [allProviderModels, selectedProvider, selectedModel, isLoading]);
 
   return (

packages/app/src/components/command-center.tsx

@@ -178,7 +178,7 @@ export function CommandCenter() {
                               </View>
                             </View>
                             {action.shortcutKeys ? (
-                              <Shortcut keys={action.shortcutKeys} style={styles.rowShortcut} />
+                              <Shortcut chord={action.shortcutKeys} style={styles.rowShortcut} />
                             ) : null}
                           </View>
                         </CommandCenterRow>

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

@@ -9,6 +9,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Shortcut } from "@/components/ui/shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import type { GitAction, GitActions } from "@/components/git-actions-policy";
 
 interface GitActionsSplitButtonProps {
@@ -17,6 +19,7 @@ interface GitActionsSplitButtonProps {
 
 export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps) {
   const { theme } = useUnistyles();
+  const archiveShortcutKeys = useShortcutKeys("archive-worktree");
 
   const getActionDisplayLabel = useCallback((action: GitAction): string => {
     if (action.status === "pending") return action.pendingLabel;
@@ -77,6 +80,11 @@ export function GitActionsSplitButton({ gitActions }: GitActionsSplitButtonProps
                       <DropdownMenuItem
                         testID={`changes-menu-${action.id}`}
                         leading={action.icon}
+                        trailing={
+                          action.id === "archive-worktree" && archiveShortcutKeys
+                            ? <Shortcut chord={archiveShortcutKeys} />
+                            : undefined
+                        }
                         disabled={action.disabled}
                         status={action.status}
                         pendingLabel={action.pendingLabel}

packages/app/src/components/keyboard-shortcuts-dialog.tsx

@@ -21,7 +21,7 @@ export function KeyboardShortcutsDialog() {
 
   return (
     <AdaptiveModalSheet
-      title="Keyboard shortcuts"
+      title="Shortcuts"
       visible={open}
       onClose={() => setOpen(false)}
       testID="keyboard-shortcuts-dialog"

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

@@ -565,7 +565,7 @@ function MobileSidebar({
                   <TooltipContent side="top" align="center" offset={8}>
                     <View style={styles.tooltipRow}>
                       <Text style={styles.tooltipText}>Add project</Text>
-                      {newAgentKeys && <Shortcut keys={newAgentKeys} />}
+                      {newAgentKeys ? <Shortcut chord={newAgentKeys} /> : null}
                     </View>
                   </TooltipContent>
                 </Tooltip>
@@ -745,7 +745,7 @@ function DesktopSidebar({
             <TooltipContent side="top" align="center" offset={8}>
               <View style={styles.tooltipRow}>
                 <Text style={styles.tooltipText}>Add project</Text>
-                <Shortcut keys={["⌘", "⇧", "O"]} />
+                {newAgentKeys ? <Shortcut chord={newAgentKeys} /> : null}
               </View>
             </TooltipContent>
           </Tooltip>

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

@@ -33,6 +33,7 @@ import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-ur
 import { focusWithRetries } from "@/utils/web-focus";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Shortcut } from "@/components/ui/shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import type { MessageInputKeyboardActionKind } from "@/keyboard/actions";
 import {
   markScrollInvestigationEvent,
@@ -65,8 +66,8 @@ export interface MessageInputProps {
   autoFocus?: boolean;
   autoFocusKey?: string;
   disabled?: boolean;
-  /** True when the containing screen is focused (React Navigation). Used to disable global hotkeys and cancel dictation when unfocused. */
-  isScreenFocused?: boolean;
+  /** True when this input is the active composer. Used to gate global hotkeys and stop dictation when hidden. */
+  isInputActive?: boolean;
   /** Content to render on the left side of the button row (e.g., AgentStatusBar) */
   leftContent?: React.ReactNode;
   /** Content to render on the right side after voice button (e.g., realtime button, cancel button) */
@@ -189,7 +190,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     autoFocus = false,
     autoFocusKey,
     disabled = false,
-    isScreenFocused = true,
+    isInputActive = true,
     leftContent,
     rightContent,
     voiceServerId,
@@ -210,6 +211,10 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
   markScrollInvestigationRender(investigationComponentId);
   const toast = useToast();
   const voice = useVoiceOptional();
+  const sendKeys = useShortcutKeys("message-input-send");
+  const voiceMuteToggleKeys = useShortcutKeys("voice-mute-toggle");
+  const dictationToggleKeys = useShortcutKeys("dictation-toggle");
+  const queueKeys = useShortcutKeys("message-input-queue");
   const [inputHeight, setInputHeight] = useState(MIN_INPUT_HEIGHT);
   const rootRef = useRef<View | null>(null);
   const inputWrapperRef = useRef<View | null>(null);
@@ -382,7 +387,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
     onError: handleDictationError,
     canStart: canStartDictation,
     canConfirm: canConfirmDictation,
-    autoStopWhenHidden: { isVisible: isScreenFocused },
+    autoStopWhenHidden: { isVisible: isInputActive },
     enableDuration: true,
   });
 
@@ -1006,10 +1011,16 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                         : "Mute voice"
                       : "Dictation"}
                   </Text>
-                  <Shortcut
-                    keys={isRealtimeVoiceForCurrentAgent ? ["Space"] : ["mod", "D"]}
-                    style={styles.tooltipShortcut}
-                  />
+                  {(isRealtimeVoiceForCurrentAgent ? voiceMuteToggleKeys : dictationToggleKeys) ? (
+                    <Shortcut
+                      chord={
+                        (isRealtimeVoiceForCurrentAgent
+                          ? voiceMuteToggleKeys
+                          : dictationToggleKeys)!
+                      }
+                      style={styles.tooltipShortcut}
+                    />
+                  ) : null}
                 </View>
               </TooltipContent>
             </Tooltip>
@@ -1032,7 +1043,9 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                 <TooltipContent side="top" align="center" offset={8}>
                   <View style={styles.tooltipRow}>
                     <Text style={styles.tooltipText}>Queue</Text>
-                    <Shortcut keys={["mod", "Enter"]} style={styles.tooltipShortcut} />
+                    {queueKeys ? (
+                      <Shortcut chord={queueKeys} style={styles.tooltipShortcut} />
+                    ) : null}
                   </View>
                 </TooltipContent>
               </Tooltip>
@@ -1055,7 +1068,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
                 <TooltipContent side="top" align="center" offset={8}>
                   <View style={styles.tooltipRow}>
                     <Text style={styles.tooltipText}>Send</Text>
-                    <Shortcut keys={["Enter"]} style={styles.tooltipShortcut} />
+                    {sendKeys ? <Shortcut chord={sendKeys} style={styles.tooltipShortcut} /> : null}
                   </View>
                 </TooltipContent>
               </Tooltip>

packages/app/src/components/message.tsx

@@ -420,6 +420,7 @@ export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
     fontFamily: Fonts.mono,
     fontSize: 13,
+    userSelect: Platform.OS === "web" ? "text" : "auto",
   },
 }));
 
@@ -821,7 +822,7 @@ export const AssistantMessage = memo(function AssistantMessage({
             <Text
               key={node.key}
               onPress={() => parsed && onInlinePathPress?.(parsed)}
-              selectable={false}
+              selectable={Platform.OS === "web" ? undefined : false}
               style={[assistantMessageStylesheet.pathChip, assistantMessageStylesheet.pathChipText]}
             >
               {content}

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

@@ -27,12 +27,12 @@ import { type GestureType } from "react-native-gesture-handler";
 import * as Clipboard from "expo-clipboard";
 import {
   Archive,
-  Check,
   ChevronDown,
   ChevronRight,
-  CircleHelp,
   Copy,
+  ExternalLink,
   FolderGit2,
+  GitPullRequest,
   Monitor,
   MoreVertical,
   Plus,
@@ -48,7 +48,6 @@ import { prepareWorkspaceTab } from "@/utils/workspace-navigation";
 import {
   type SidebarProjectEntry,
   type SidebarWorkspaceEntry,
-  type SidebarStateBucket,
 } from "@/hooks/use-sidebar-workspaces-list";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
 import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
@@ -73,12 +72,19 @@ import { decideLongPressMove } from "@/utils/sidebar-gesture-arbitration";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { projectIconPlaceholderLabelFromDisplayName } from "@/utils/project-display-name";
 import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
+import { getStatusDotColor } from "@/utils/status-dot-color";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Shortcut } from "@/components/ui/shortcut";
+import type { ShortcutKey } from "@/utils/format-shortcut";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
+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 { buildWorkspaceArchiveRedirectRoute } from "@/utils/workspace-archive-navigation";
+import { openExternalUrl } from "@/utils/open-external-url";
 
 function toProjectIconDataUri(icon: { mimeType: string; data: string } | null): string | null {
   if (!icon) {
@@ -91,6 +97,12 @@ const workspaceKeyExtractor = (workspace: SidebarWorkspaceEntry) => workspace.wo
 
 const projectKeyExtractor = (project: SidebarProjectEntry) => project.projectKey;
 const EMPTY_WORKSPACES = new Map();
+const WORKSPACE_STATUS_DOT_WIDTH = 14;
+const GITHUB_PR_STATE_LABELS: Record<PrHint["state"], string> = {
+  open: "Open",
+  merged: "Merged",
+  closed: "Closed",
+};
 
 interface SidebarWorkspaceListProps {
   projects: SidebarProjectEntry[];
@@ -116,6 +128,7 @@ interface ProjectHeaderRowProps {
   onPress: () => void;
   serverId: string | null;
   canCreateWorktree: boolean;
+  isProjectActive?: boolean;
   onWorkspacePress?: () => void;
   onWorktreeCreated?: (workspaceId: string) => void;
   shortcutNumber?: number | null;
@@ -145,22 +158,53 @@ interface WorkspaceRowInnerProps {
   onArchive?: () => void;
   onCopyBranchName?: () => void;
   onCopyPath?: () => void;
+  archiveShortcutKeys?: ShortcutKey[][] | null;
 }
 
-function resolveStatusDotColor(input: {
-  theme: ReturnType<typeof useUnistyles>["theme"];
-  bucket: SidebarStateBucket;
-}) {
-  const { theme, bucket } = input;
-  return bucket === "needs_input"
-    ? theme.colors.palette.amber[500]
-    : bucket === "failed"
-      ? theme.colors.palette.red[500]
-      : bucket === "running"
-        ? theme.colors.palette.blue[500]
-        : bucket === "attention"
-          ? theme.colors.palette.green[500]
-          : theme.colors.border;
+function WorkspacePrBadge({ hint }: { hint: PrHint }) {
+  const { theme } = useUnistyles();
+  const [isHovered, setIsHovered] = useState(false);
+  const activeColor = isHovered ? theme.colors.foreground : theme.colors.foregroundMuted;
+
+  const handlePressIn = useCallback((event: GestureResponderEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      event.stopPropagation();
+      void openExternalUrl(hint.url);
+    },
+    [hint.url],
+  );
+
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={`${hint.state} pull request #${hint.number}`}
+      hitSlop={4}
+      onPressIn={handlePressIn}
+      onPress={handlePress}
+      onPointerEnter={() => setIsHovered(true)}
+      onPointerLeave={() => setIsHovered(false)}
+      style={({ pressed }) => [
+        styles.workspacePrBadge,
+        pressed && styles.workspacePrBadgePressed,
+      ]}
+    >
+      <GitPullRequest size={12} color={activeColor} />
+      <Text
+        style={[
+          styles.workspacePrBadgeText,
+          { color: activeColor },
+        ]}
+        numberOfLines={1}
+      >
+        #{hint.number} · {GITHUB_PR_STATE_LABELS[hint.state]}
+      </Text>
+      {isHovered && <ExternalLink size={10} color={activeColor} />}
+    </Pressable>
+  );
 }
 
 function WorkspaceStatusIndicator({
@@ -173,38 +217,48 @@ function WorkspaceStatusIndicator({
   loading?: boolean;
 }) {
   const { theme } = useUnistyles();
-  const color = resolveStatusDotColor({ theme, bucket });
   const shouldShowSyncedLoader = shouldRenderSyncedStatusLoader({ bucket });
-  const isIdle = !loading && !shouldShowSyncedLoader && bucket === "done";
 
-  if (isIdle) {
-    const KindIcon =
-      workspaceKind === "local_checkout"
-        ? Monitor
-        : workspaceKind === "worktree"
-          ? FolderGit2
-          : null;
-    if (!KindIcon) return null;
+  if (loading) {
     return (
       <View style={styles.workspaceStatusDot}>
-        <KindIcon size={14} color={theme.colors.foregroundMuted} />
+        <ActivityIndicator size={8} color={theme.colors.foregroundMuted} />
       </View>
     );
   }
 
+  if (shouldShowSyncedLoader) {
+    return (
+      <View style={styles.workspaceStatusDot}>
+        <SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
+      </View>
+    );
+  }
+
+  const KindIcon =
+    workspaceKind === "local_checkout"
+      ? Monitor
+      : workspaceKind === "worktree"
+        ? FolderGit2
+        : null;
+  if (!KindIcon) return null;
+
+  const dotColor = getStatusDotColor({ theme, bucket, showDoneAsInactive: false });
+
   return (
     <View style={styles.workspaceStatusDot}>
-      {loading ? (
-        <ActivityIndicator size={8} color={theme.colors.foregroundMuted} />
-      ) : shouldShowSyncedLoader ? (
-        <SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
-      ) : bucket === "needs_input" ? (
-        <CircleHelp size={14} color={theme.colors.palette.amber[500]} />
-      ) : bucket === "attention" ? (
-        <Check size={14} color={theme.colors.palette.green[500]} />
-      ) : (
-        <View style={[styles.workspaceStatusDotFill, { backgroundColor: color }]} />
-      )}
+      <KindIcon size={14} color={theme.colors.foregroundMuted} />
+      {dotColor ? (
+        <View
+          style={[
+            styles.statusDotOverlay,
+            {
+              backgroundColor: dotColor,
+              borderColor: theme.colors.surface0,
+            },
+          ]}
+        />
+      ) : null}
     </View>
   );
 }
@@ -224,29 +278,72 @@ function ProjectLeadingVisual({
   showChevron?: boolean;
   isArchiving?: boolean;
 }) {
+  const { theme } = useUnistyles();
   const placeholderLabel = projectIconPlaceholderLabelFromDisplayName(displayName);
   const placeholderInitial = placeholderLabel.charAt(0).toUpperCase();
   const activeWorkspace = workspace;
   const shouldShowWorkspaceStatus =
     activeWorkspace !== null && (isArchiving || activeWorkspace.statusBucket !== "done");
+  const shouldShowSyncedLoader = activeWorkspace
+    ? shouldRenderSyncedStatusLoader({ bucket: activeWorkspace.statusBucket })
+    : false;
+
+  if (showChevron && chevron !== null) {
+    return (
+      <View style={styles.projectLeadingVisualSlot}>
+        <ProjectInlineChevron chevron={chevron} />
+      </View>
+    );
+  }
+
+  const projectIcon = iconDataUri ? (
+    <Image source={{ uri: iconDataUri }} style={styles.projectIcon} />
+  ) : (
+    <View style={styles.projectIconFallback}>
+      <Text style={styles.projectIconFallbackText}>{placeholderInitial}</Text>
+    </View>
+  );
+
+  if (!shouldShowWorkspaceStatus || !activeWorkspace) {
+    return <View style={styles.projectLeadingVisualSlot}>{projectIcon}</View>;
+  }
+
+  if (isArchiving) {
+    return (
+      <View style={styles.projectLeadingVisualSlot}>
+        <ActivityIndicator size={8} color={theme.colors.foregroundMuted} />
+      </View>
+    );
+  }
+
+  if (shouldShowSyncedLoader) {
+    return (
+      <View style={styles.projectLeadingVisualSlot}>
+        <SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
+      </View>
+    );
+  }
+
+  const dotColor = getStatusDotColor({
+    theme,
+    bucket: activeWorkspace.statusBucket,
+    showDoneAsInactive: false,
+  });
 
   return (
     <View style={styles.projectLeadingVisualSlot}>
-      {showChevron && chevron !== null ? (
-        <ProjectInlineChevron chevron={chevron} />
-      ) : shouldShowWorkspaceStatus && activeWorkspace ? (
-        <WorkspaceStatusIndicator
-          bucket={activeWorkspace.statusBucket}
-          workspaceKind={activeWorkspace.workspaceKind}
-          loading={isArchiving}
+      {projectIcon}
+      {dotColor ? (
+        <View
+          style={[
+            styles.statusDotOverlay,
+            {
+              backgroundColor: dotColor,
+              borderColor: theme.colors.surface0,
+            },
+          ]}
         />
-      ) : iconDataUri ? (
-        <Image source={{ uri: iconDataUri }} style={styles.projectIcon} />
-      ) : (
-        <View style={styles.projectIconFallback}>
-          <Text style={styles.projectIconFallbackText}>{placeholderInitial}</Text>
-        </View>
-      )}
+      ) : null}
     </View>
   );
 }
@@ -267,14 +364,17 @@ function NewWorktreeButton({
   visible,
   loading = false,
   testID,
+  showShortcutHint = false,
 }: {
   displayName: string;
   onPress: () => void;
   visible: boolean;
   loading?: boolean;
   testID: string;
+  showShortcutHint?: boolean;
 }) {
   const { theme } = useUnistyles();
+  const newWorktreeKeys = useShortcutKeys("new-worktree");
 
   return (
     <View style={styles.projectTrailingControlSlot} pointerEvents={visible ? "auto" : "none"}>
@@ -309,8 +409,13 @@ function NewWorktreeButton({
             }
           </Pressable>
         </TooltipTrigger>
-        <TooltipContent side="bottom" align="end" offset={8}>
-          <Text style={styles.projectActionTooltipText}>New worktree</Text>
+        <TooltipContent side="bottom" align="center" offset={8}>
+          <View style={styles.projectActionTooltipRow}>
+            <Text style={styles.projectActionTooltipText}>New worktree</Text>
+            {showShortcutHint && newWorktreeKeys ? (
+              <Shortcut chord={newWorktreeKeys} style={styles.projectActionTooltipShortcut} />
+            ) : null}
+          </View>
         </TooltipContent>
       </Tooltip>
     </View>
@@ -544,6 +649,7 @@ function ProjectHeaderRow({
   onPress,
   serverId,
   canCreateWorktree,
+  isProjectActive = false,
   onWorkspacePress,
   onWorktreeCreated,
   shortcutNumber = null,
@@ -594,6 +700,17 @@ function ProjectHeaderRow({
       toast.error(error instanceof Error ? error.message : String(error));
     },
   });
+  useKeyboardActionHandler({
+    handlerId: `worktree-new-${project.projectKey}`,
+    actions: ["worktree.new"],
+    enabled: isProjectActive && canCreateWorktree && !createWorktreeMutation.isPending,
+    priority: 0,
+    handle: () => {
+      createWorktreeMutation.mutate();
+      return true;
+    },
+  });
+
   const interaction = useLongPressDragInteraction({
     drag,
     menuController,
@@ -636,6 +753,7 @@ function ProjectHeaderRow({
           onPress={() => createWorktreeMutation.mutate()}
           visible={isHovered || isMobileBreakpoint}
           loading={createWorktreeMutation.isPending}
+          showShortcutHint={isProjectActive}
           testID={`sidebar-project-new-worktree-${project.projectKey}`}
         />
       ) : null}
@@ -711,10 +829,16 @@ function WorkspaceRowInner({
   onArchive,
   onCopyBranchName,
   onCopyPath,
+  archiveShortcutKeys,
 }: WorkspaceRowInnerProps) {
   const { theme } = useUnistyles();
   const [isHovered, setIsHovered] = useState(false);
   const isMobile = Platform.OS !== "web";
+  const prHint = useWorkspacePrHint({
+    serverId: workspace.serverId,
+    cwd: workspace.workspaceId,
+    enabled: workspace.workspaceKind !== "directory",
+  });
   const interaction = useLongPressDragInteraction({
     drag,
     menuController,
@@ -749,91 +873,99 @@ function WorkspaceRowInner({
         onPress={handlePress}
         testID={`sidebar-workspace-row-${workspace.workspaceKey}`}
       >
-        <View
-          {...(dragHandleProps?.attributes as any)}
-          {...(dragHandleProps?.listeners as any)}
-          ref={dragHandleProps?.setActivatorNodeRef as any}
-          style={styles.workspaceRowLeft}
-        >
-          <WorkspaceStatusIndicator
-            bucket={workspace.statusBucket}
-            workspaceKind={workspace.workspaceKind}
-            loading={isArchiving || isCreating}
-          />
-          <Text
-            style={[
-              styles.workspaceBranchText,
-              isHovered && styles.workspaceBranchTextHovered,
-              isCreating && styles.workspaceBranchTextCreating,
-            ]}
-            numberOfLines={1}
+        <View style={styles.workspaceRowMain}>
+          <View
+            {...(dragHandleProps?.attributes as any)}
+            {...(dragHandleProps?.listeners as any)}
+            ref={dragHandleProps?.setActivatorNodeRef as any}
+            style={styles.workspaceRowLeft}
           >
-            {workspace.name}
-          </Text>
-        </View>
-        <View style={styles.workspaceRowRight}>
-          {isCreating ? <Text style={styles.workspaceCreatingText}>Creating...</Text> : null}
-          {onArchive && (isHovered || isMobile) ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                hitSlop={8}
-                style={({ hovered = false }) => [
-                  styles.kebabButton,
-                  hovered && styles.kebabButtonHovered,
-                ]}
-                accessibilityRole="button"
-                accessibilityLabel="Workspace actions"
-                testID={`sidebar-workspace-kebab-${workspace.workspaceKey}`}
-              >
-                {({ hovered }) => (
-                  <MoreVertical
-                    size={14}
-                    color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
-                  />
-                )}
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" width={200}>
-                {onCopyPath ? (
-                  <DropdownMenuItem
-                    testID={`sidebar-workspace-menu-copy-path-${workspace.workspaceKey}`}
-                    leading={<Copy size={14} color={theme.colors.foregroundMuted} />}
-                    onSelect={onCopyPath}
-                  >
-                    Copy path
-                  </DropdownMenuItem>
-                ) : null}
-                {onCopyBranchName ? (
-                  <DropdownMenuItem
-                    testID={`sidebar-workspace-menu-copy-branch-name-${workspace.workspaceKey}`}
-                    leading={<Copy size={14} color={theme.colors.foregroundMuted} />}
-                    onSelect={onCopyBranchName}
-                  >
-                    Copy branch name
-                  </DropdownMenuItem>
-                ) : null}
-                <DropdownMenuItem
-                  testID={`sidebar-workspace-menu-archive-${workspace.workspaceKey}`}
-                  leading={<Archive size={14} color={theme.colors.foregroundMuted} />}
-                  status={archiveStatus}
-                  pendingLabel={archivePendingLabel}
-                  onSelect={onArchive}
+            <WorkspaceStatusIndicator
+              bucket={workspace.statusBucket}
+              workspaceKind={workspace.workspaceKind}
+              loading={isArchiving || isCreating}
+            />
+            <Text
+              style={[
+                styles.workspaceBranchText,
+                isHovered && styles.workspaceBranchTextHovered,
+                isCreating && styles.workspaceBranchTextCreating,
+              ]}
+              numberOfLines={1}
+            >
+              {workspace.name}
+            </Text>
+          </View>
+          <View style={styles.workspaceRowRight}>
+            {isCreating ? <Text style={styles.workspaceCreatingText}>Creating...</Text> : null}
+            {onArchive && (isHovered || isMobile) ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger
+                  hitSlop={8}
+                  style={({ hovered = false }) => [
+                    styles.kebabButton,
+                    hovered && styles.kebabButtonHovered,
+                  ]}
+                  accessibilityRole="button"
+                  accessibilityLabel="Workspace actions"
+                  testID={`sidebar-workspace-kebab-${workspace.workspaceKey}`}
                 >
-                  {archiveLabel ?? "Archive"}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : workspace.diffStat ? (
-            <View style={styles.diffStatRow}>
-              <Text style={styles.diffStatAdditions}>+{workspace.diffStat.additions}</Text>
-              <Text style={styles.diffStatDeletions}>-{workspace.diffStat.deletions}</Text>
-            </View>
-          ) : null}
-          {showShortcutBadge && shortcutNumber !== null ? (
-            <View style={styles.shortcutBadge}>
-              <Text style={styles.shortcutBadgeText}>{shortcutNumber}</Text>
-            </View>
-          ) : null}
+                  {({ hovered }) => (
+                    <MoreVertical
+                      size={14}
+                      color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                    />
+                  )}
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" width={260}>
+                  {onCopyPath ? (
+                    <DropdownMenuItem
+                      testID={`sidebar-workspace-menu-copy-path-${workspace.workspaceKey}`}
+                      leading={<Copy size={14} color={theme.colors.foregroundMuted} />}
+                      onSelect={onCopyPath}
+                    >
+                      Copy path
+                    </DropdownMenuItem>
+                  ) : null}
+                  {onCopyBranchName ? (
+                    <DropdownMenuItem
+                      testID={`sidebar-workspace-menu-copy-branch-name-${workspace.workspaceKey}`}
+                      leading={<Copy size={14} color={theme.colors.foregroundMuted} />}
+                      onSelect={onCopyBranchName}
+                    >
+                      Copy branch name
+                    </DropdownMenuItem>
+                  ) : null}
+                  <DropdownMenuItem
+                    testID={`sidebar-workspace-menu-archive-${workspace.workspaceKey}`}
+                    leading={<Archive size={14} color={theme.colors.foregroundMuted} />}
+                    trailing={archiveShortcutKeys ? <Shortcut chord={archiveShortcutKeys} /> : null}
+                    status={archiveStatus}
+                    pendingLabel={archivePendingLabel}
+                    onSelect={onArchive}
+                  >
+                    {archiveLabel ?? "Archive"}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : workspace.diffStat ? (
+              <View style={styles.diffStatRow}>
+                <Text style={styles.diffStatAdditions}>+{workspace.diffStat.additions}</Text>
+                <Text style={styles.diffStatDeletions}>-{workspace.diffStat.deletions}</Text>
+              </View>
+            ) : null}
+            {showShortcutBadge && shortcutNumber !== null ? (
+              <View style={styles.shortcutBadge}>
+                <Text style={styles.shortcutBadgeText}>{shortcutNumber}</Text>
+              </View>
+            ) : null}
+          </View>
         </View>
+        {prHint ? (
+          <View style={styles.workspacePrBadgeRow}>
+            <WorkspacePrBadge hint={prHint} />
+          </View>
+        ) : null}
       </Pressable>
     </View>
   );
@@ -903,7 +1035,7 @@ function WorkspaceRowWithMenu({
     void (async () => {
       const confirmed = await confirmDialog({
         title: "Archive worktree?",
-        message: `Archive "${workspace.name}"?\n\nThis removes the worktree from the sidebar.`,
+        message: `Archive "${workspace.name}"?\n\nThe worktree will be removed from disk, terminals will be stopped, and agents inside will be archived.\n\nYour branch is still accessible if you committed.`,
         confirmLabel: "Archive",
         cancelLabel: "Cancel",
         destructive: true,
@@ -991,6 +1123,23 @@ function WorkspaceRowWithMenu({
     toast.copied("Branch name copied");
   }, [toast, workspace.name]);
 
+  const archiveShortcutKeys = useShortcutKeys("archive-worktree");
+
+  useKeyboardActionHandler({
+    handlerId: `worktree-archive-${workspace.workspaceKey}`,
+    actions: ["worktree.archive"],
+    enabled: selected && !isArchiving,
+    priority: 0,
+    handle: () => {
+      if (isWorktree) {
+        handleArchiveWorktree();
+      } else {
+        handleArchiveWorkspace();
+      }
+      return true;
+    },
+  });
+
   return (
     <WorkspaceRowInner
       workspace={workspace}
@@ -1010,6 +1159,7 @@ function WorkspaceRowWithMenu({
       onArchive={isWorktree ? handleArchiveWorktree : handleArchiveWorkspace}
       onCopyBranchName={canCopyBranchName ? handleCopyBranchName : undefined}
       onCopyPath={handleCopyPath}
+      archiveShortcutKeys={selected ? archiveShortcutKeys : null}
     />
   );
 }
@@ -1182,6 +1332,7 @@ function FlattenedProjectRow({
   drag,
   isDragging,
   dragHandleProps,
+  isProjectActive = false,
 }: {
   project: SidebarProjectEntry;
   displayName: string;
@@ -1196,6 +1347,7 @@ function FlattenedProjectRow({
   drag: () => void;
   isDragging: boolean;
   dragHandleProps?: DraggableListDragHandleProps;
+  isProjectActive?: boolean;
 }) {
   if (project.projectKind === "non_git") {
     return (
@@ -1226,6 +1378,7 @@ function FlattenedProjectRow({
       onPress={onPress}
       serverId={serverId}
       canCreateWorktree={rowModel.trailingAction === "new_worktree"}
+      isProjectActive={isProjectActive}
       onWorkspacePress={onWorkspacePress}
       onWorktreeCreated={onWorktreeCreated}
       shortcutNumber={shortcutNumber}
@@ -1327,6 +1480,13 @@ function ProjectBlock({
     [activeWorkspaceSelection, collapsed, project, serverId],
   );
 
+  const isProjectActive = useMemo(() => {
+    if (!serverId || !activeWorkspaceSelection || activeWorkspaceSelection.serverId !== serverId) {
+      return false;
+    }
+    return project.workspaces.some((w) => w.workspaceId === activeWorkspaceSelection.workspaceId);
+  }, [serverId, activeWorkspaceSelection, project.workspaces]);
+
   const renderWorkspaceRow = useCallback(
     (
       item: SidebarWorkspaceEntry,
@@ -1419,6 +1579,7 @@ function ProjectBlock({
           drag={drag}
           isDragging={isDragging}
           dragHandleProps={dragHandleProps}
+          isProjectActive={isProjectActive}
         />
       ) : (
         <>
@@ -1432,6 +1593,7 @@ function ProjectBlock({
             onPress={onToggleCollapsed}
             serverId={serverId}
             canCreateWorktree={rowModel.trailingAction === "new_worktree"}
+            isProjectActive={isProjectActive}
             onWorkspacePress={onWorkspacePress}
             onWorktreeCreated={onWorktreeCreated}
             drag={drag}
@@ -1800,12 +1962,7 @@ const styles = StyleSheet.create((theme) => ({
   projectBlock: {
     marginBottom: theme.spacing[1],
   },
-  workspaceListContainer: {
-    marginLeft: theme.spacing[3],
-    paddingLeft: theme.spacing[2],
-    borderLeftWidth: StyleSheet.hairlineWidth,
-    borderLeftColor: theme.colors.surface1,
-  },
+  workspaceListContainer: {},
   emptyText: {
     color: theme.colors.foregroundMuted,
     textAlign: "center",
@@ -1815,7 +1972,7 @@ const styles = StyleSheet.create((theme) => ({
   projectRow: {
     minHeight: 36,
     paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[3],
+    paddingHorizontal: theme.spacing[2],
     borderRadius: theme.borderRadius.lg,
     marginBottom: theme.spacing[1],
     flexDirection: "row",
@@ -1861,6 +2018,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.sm,
   },
   projectLeadingVisualSlot: {
+    position: "relative",
     width: theme.iconSize.md,
     height: theme.iconSize.md,
     flexShrink: 0,
@@ -1883,6 +2041,7 @@ const styles = StyleSheet.create((theme) => ({
   projectTitle: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
+    fontWeight: "400",
     minWidth: 0,
     flexShrink: 1,
   },
@@ -1923,20 +2082,37 @@ const styles = StyleSheet.create((theme) => ({
     justifyContent: "center",
     flexShrink: 0,
   },
+  projectActionTooltipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
   projectActionTooltipText: {
     color: theme.colors.foreground,
-    fontSize: theme.fontSize.xs,
+    fontSize: theme.fontSize.sm,
+  },
+  projectActionTooltipShortcut: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
   },
   workspaceRow: {
     minHeight: 36,
     marginBottom: theme.spacing[1],
     paddingVertical: theme.spacing[2],
-    paddingHorizontal: theme.spacing[3],
+    paddingLeft: theme.spacing[3] + theme.spacing[3],
+    paddingRight: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "center",
+    gap: theme.spacing[1],
+  },
+  workspaceRowMain: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     gap: theme.spacing[2],
+    width: "100%",
   },
   workspaceRowLeft: {
     flexDirection: "row",
@@ -1976,17 +2152,22 @@ const styles = StyleSheet.create((theme) => ({
     position: "relative",
   },
   workspaceStatusDot: {
-    width: 14,
+    position: "relative",
+    width: WORKSPACE_STATUS_DOT_WIDTH,
     height: 16,
     borderRadius: theme.borderRadius.full,
     flexShrink: 0,
-    alignItems: "flex-start",
+    alignItems: "center",
     justifyContent: "center",
   },
-  workspaceStatusDotFill: {
+  statusDotOverlay: {
+    position: "absolute",
+    right: 0,
+    bottom: 0,
     width: 7,
     height: 7,
     borderRadius: theme.borderRadius.full,
+    borderWidth: 1,
   },
   workspaceArchivingOverlay: {
     ...StyleSheet.absoluteFillObject,
@@ -2006,6 +2187,7 @@ const styles = StyleSheet.create((theme) => ({
   workspaceBranchText: {
     color: theme.colors.foreground,
     fontSize: theme.fontSize.sm,
+    fontWeight: "400",
     lineHeight: 20,
     opacity: 0.76,
     flex: 1,
@@ -2017,6 +2199,23 @@ const styles = StyleSheet.create((theme) => ({
   workspaceBranchTextHovered: {
     opacity: 1,
   },
+  workspacePrBadgeRow: {
+    paddingLeft: WORKSPACE_STATUS_DOT_WIDTH + theme.spacing[2],
+  },
+  workspacePrBadge: {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[1],
+  },
+  workspacePrBadgePressed: {
+    opacity: 0.82,
+  },
+  workspacePrBadgeText: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    lineHeight: 14,
+  },
   workspaceCreatingText: {
     color: theme.colors.foregroundMuted,
     fontSize: theme.fontSize.xs,

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

@@ -1,5 +1,6 @@
 import {
   Fragment,
+  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -9,6 +10,7 @@ import {
   type ReactNode,
   type SetStateAction,
 } from "react";
+import { useStableEvent } from "@/hooks/use-stable-event";
 import {
   DndContext,
   DragOverlay,
@@ -29,6 +31,8 @@ import { Platform, View, Text } from "react-native";
 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 {
   computeTabDropPreview,
   type TabDropPreview,
@@ -42,6 +46,7 @@ import {
   deriveWorkspacePaneState,
   getWorkspacePaneDescriptors,
 } from "@/screens/workspace/workspace-pane-state";
+import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
 import {
   WorkspacePaneContent,
   type WorkspacePaneContentModel,
@@ -62,6 +67,7 @@ import {
   type WorkspaceLayout,
 } from "@/stores/workspace-layout-store";
 import type { WorkspaceTab } from "@/stores/workspace-tabs-store";
+import { workspaceTabTargetsEqual } from "@/utils/workspace-tab-identity";
 
 interface SplitContainerProps {
   layout: WorkspaceLayout;
@@ -105,6 +111,7 @@ interface SplitContainerProps {
   onResizeSplit: (groupId: string, sizes: number[]) => void;
   onReorderTabsInPane: (paneId: string, tabIds: string[]) => void;
   renderPaneEmptyState?: () => ReactNode;
+  focusModeEnabled?: boolean;
 }
 
 interface WorkspaceTabDragData {
@@ -149,6 +156,81 @@ interface SplitPaneViewProps
   tabDropPreview: TabDropPreview | null;
 }
 
+interface MountedTabSlotProps {
+  tabDescriptor: WorkspaceTabDescriptor;
+  isVisible: boolean;
+  isPaneFocused: boolean;
+  paneId: string;
+  buildPaneContentModel: (input: {
+    paneId: string;
+    isPaneFocused: boolean;
+    tab: WorkspaceTabDescriptor;
+  }) => WorkspacePaneContentModel;
+}
+
+const MountedTabSlot = memo(function MountedTabSlot({
+  tabDescriptor,
+  isVisible,
+  isPaneFocused,
+  paneId,
+  buildPaneContentModel,
+}: MountedTabSlotProps) {
+  useEffect(() => {
+    if (tabDescriptor.target.kind !== "terminal") {
+      return;
+    }
+    console.log("[terminal-tab-slot]", {
+      paneId,
+      tabId: tabDescriptor.tabId,
+      terminalId: tabDescriptor.target.terminalId,
+      isVisible,
+      isPaneFocused,
+    });
+  }, [isPaneFocused, isVisible, paneId, tabDescriptor]);
+
+  const content = useMemo(
+    () =>
+      buildPaneContentModel({
+        paneId,
+        isPaneFocused,
+        tab: tabDescriptor,
+      }),
+    [buildPaneContentModel, isPaneFocused, paneId, tabDescriptor],
+  );
+
+  return (
+    <View style={{ display: isVisible ? "flex" : "none", flex: 1 }}>
+      <WorkspacePaneContent content={content} />
+    </View>
+  );
+});
+
+function useStableTabDescriptorMap(tabDescriptors: WorkspaceTabDescriptor[]) {
+  const cacheRef = useRef(new Map<string, WorkspaceTabDescriptor>());
+  const tabDescriptorMap = useMemo(() => {
+    const next = new Map<string, WorkspaceTabDescriptor>();
+    for (const tabDescriptor of tabDescriptors) {
+      const cachedDescriptor = cacheRef.current.get(tabDescriptor.tabId);
+      if (
+        cachedDescriptor &&
+        cachedDescriptor.key === tabDescriptor.key &&
+        cachedDescriptor.kind === tabDescriptor.kind &&
+        workspaceTabTargetsEqual(cachedDescriptor.target, tabDescriptor.target)
+      ) {
+        next.set(tabDescriptor.tabId, cachedDescriptor);
+        continue;
+      }
+      next.set(tabDescriptor.tabId, tabDescriptor);
+    }
+    return next;
+  }, [tabDescriptors]);
+  useEffect(() => {
+    cacheRef.current = tabDescriptorMap;
+  }, [tabDescriptorMap]);
+
+  return tabDescriptorMap;
+}
+
 const dropCollisionDetection: CollisionDetection = (args) => {
   const pointerHits = pointerWithin(args);
   const tabHits = pointerHits.filter(
@@ -196,6 +278,7 @@ export function SplitContainer({
   onResizeSplit,
   onReorderTabsInPane,
   renderPaneEmptyState = () => null,
+  focusModeEnabled,
 }: SplitContainerProps) {
   const [activeDragTabId, setActiveDragTabId] = useState<string | null>(null);
   const [dropPreview, setDropPreview] = useState<SplitDropZoneHover | null>(null);
@@ -214,6 +297,17 @@ export function SplitContainer({
 
   const panesById = useMemo(() => collectPanesById(layout.root), [layout.root]);
 
+  const effectiveRoot = useMemo(() => {
+    if (!focusModeEnabled) {
+      return layout.root;
+    }
+    const focusedPane = panesById.get(layout.focusedPaneId);
+    if (!focusedPane) {
+      return layout.root;
+    }
+    return { kind: "pane" as const, pane: focusedPane };
+  }, [focusModeEnabled, layout.root, layout.focusedPaneId, panesById]);
+
   const handleDragStart = useCallback((event: DragStartEvent) => {
     const data = event.active.data.current as WorkspaceTabDragData | undefined;
     if (data?.kind !== "workspace-tab") {
@@ -425,7 +519,7 @@ export function SplitContainer({
       onDragEnd={handleDragEnd}
     >
       <SplitNodeView
-        node={layout.root}
+        node={effectiveRoot}
         workspaceKey={workspaceKey}
         uiTabs={uiTabs}
         focusedPaneId={layout.focusedPaneId}
@@ -714,6 +808,9 @@ function SplitPaneView({
 }: SplitPaneViewProps) {
   const { theme } = useUnistyles();
   const paneRef = useRef<View | null>(null);
+  const stableOnFocusPane = useStableEvent(onFocusPane);
+  const isFocusModeEnabled = usePanelStore((s) => s.desktop.focusModeEnabled);
+  const trafficLightPadding = useTrafficLightPadding();
   const paneState = useMemo(
     () =>
       deriveWorkspacePaneState({
@@ -723,7 +820,18 @@ function SplitPaneView({
     [pane, uiTabs],
   );
   const paneTabs = useMemo(() => paneState.tabs.map((tab) => tab.descriptor), [paneState.tabs]);
+  const paneTabIds = useMemo(() => paneTabs.map((tab) => tab.tabId), [paneTabs]);
+  const tabDescriptorMap = useStableTabDescriptorMap(paneTabs);
   const activeTabDescriptor = paneState.activeTab?.descriptor ?? null;
+  const { mountedTabIds } = useMountedTabSet({
+    activeTabId: activeTabDescriptor?.tabId ?? null,
+    allTabIds: paneTabIds,
+    cap: 3,
+  });
+  const mountedPaneTabIds = useMemo(
+    () => paneTabIds.filter((tabId) => mountedTabIds.has(tabId)),
+    [mountedTabIds, paneTabIds],
+  );
   const desktopTabRowItems = useMemo<WorkspaceDesktopTabRowItem[]>(
     () =>
       paneTabs.map((tab) => ({
@@ -734,17 +842,6 @@ function SplitPaneView({
       })),
     [activeTabDescriptor?.key, closingTabIds, hoveredCloseTabKey, paneTabs],
   );
-  const paneContent = useMemo(
-    () =>
-      activeTabDescriptor
-        ? buildPaneContentModel({
-            paneId: pane.id,
-            isPaneFocused: isFocused,
-            tab: activeTabDescriptor,
-          })
-        : null,
-    [activeTabDescriptor, buildPaneContentModel, pane.id],
-  );
 
   useEffect(() => {
     if (Platform.OS !== "web") {
@@ -764,14 +861,14 @@ function SplitPaneView({
       if (!shouldFocusPaneFromEventTarget(event.target)) {
         return;
       }
-      onFocusPane(pane.id);
+      stableOnFocusPane(pane.id);
     };
 
     const handlePaneFocusIn = (event: FocusEvent) => {
       if (!shouldFocusPaneFromEventTarget(event.target)) {
         return;
       }
-      onFocusPane(pane.id);
+      stableOnFocusPane(pane.id);
     };
 
     paneElement.addEventListener("pointerdown", handlePanePointerDown, true);
@@ -781,11 +878,17 @@ function SplitPaneView({
       paneElement.removeEventListener("pointerdown", handlePanePointerDown, true);
       paneElement.removeEventListener("focusin", handlePaneFocusIn, true);
     };
-  }, [onFocusPane, pane.id]);
+  }, [stableOnFocusPane, pane.id]);
 
   return (
     <View ref={paneRef} collapsable={false} style={styles.pane}>
-      <View style={styles.paneTabs}>
+      <View
+        style={[
+          styles.paneTabs,
+          isFocusModeEnabled &&
+            trafficLightPadding.left > 0 && { paddingLeft: trafficLightPadding.left },
+        ]}
+      >
         <WorkspaceDesktopTabsRow
           paneId={pane.id}
           isFocused={isFocused}
@@ -821,8 +924,24 @@ function SplitPaneView({
       </View>
 
       <View style={styles.paneContent}>
-        {paneContent ? (
-          <WorkspacePaneContent content={paneContent} />
+        {mountedPaneTabIds.length > 0 ? (
+          mountedPaneTabIds.map((tabId) => {
+            const tabDescriptor = tabDescriptorMap.get(tabId);
+            if (!tabDescriptor) {
+              return null;
+            }
+
+            return (
+              <MountedTabSlot
+                key={tabId}
+                tabDescriptor={tabDescriptor}
+                isVisible={tabId === activeTabDescriptor?.tabId}
+                isPaneFocused={isFocused && tabId === activeTabDescriptor?.tabId}
+                paneId={pane.id}
+                buildPaneContentModel={buildPaneContentModel}
+              />
+            );
+          })
         ) : (
           (renderPaneEmptyState?.() ?? null)
         )}

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

@@ -1,9 +1,11 @@
 "use dom";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type Ref } from "react";
 import type { DOMProps } from "expo/dom";
+import { useDOMImperativeHandle, type DOMImperativeFactory } from "expo/dom";
 import "@xterm/xterm/css/xterm.css";
 import type { ITheme } from "@xterm/xterm";
+import type { TerminalState } from "@server/shared/messages";
 import type { PendingTerminalModifiers } from "../utils/terminal-keys";
 import { TerminalEmulatorRuntime } from "../terminal/runtime/terminal-emulator-runtime";
 import { focusWithRetries } from "../utils/web-focus";
@@ -12,6 +14,12 @@ import {
   computeVerticalScrollbarGeometry,
 } from "./web-desktop-scrollbar.math";
 
+export interface TerminalEmulatorHandle {
+  writeOutput: (text: string) => void;
+  renderSnapshot: (state: TerminalState | null) => void;
+  clear: () => void;
+}
+
 const SCROLLBAR_HANDLE_WIDTH_IDLE = 6;
 const SCROLLBAR_HANDLE_WIDTH_ACTIVE = 9;
 const SCROLLBAR_HANDLE_GRAB_WIDTH = 18;
@@ -63,17 +71,14 @@ function buildXtermThemeKey(theme: ITheme): string {
 
 interface TerminalEmulatorProps {
   dom?: DOMProps;
+  ref: Ref<TerminalEmulatorHandle>;
   streamKey: string;
-  initialOutputText: string;
-  initialOutputChunkSequence?: number;
-  outputChunkText: string;
-  outputChunkSequence: number;
-  outputChunkReplay?: boolean;
   testId?: string;
   xtermTheme?: ITheme;
   swipeGesturesEnabled?: boolean;
   onSwipeLeft?: () => void;
   onSwipeRight?: () => void;
+  initialSnapshot?: TerminalState | null;
   onInput?: (data: string) => Promise<void> | void;
   onResize?: (input: { rows: number; cols: number }) => Promise<void> | void;
   onTerminalKey?: (input: {
@@ -84,7 +89,6 @@ interface TerminalEmulatorProps {
     meta: boolean;
   }) => Promise<void> | void;
   onPendingModifiersConsumed?: () => Promise<void> | void;
-  onOutputChunkConsumed?: (sequence: number) => Promise<void> | void;
   pendingModifiers?: PendingTerminalModifiers;
   focusRequestToken?: number;
   resizeRequestToken?: number;
@@ -123,12 +127,8 @@ function ensureTerminalScrollbarStyle(): void {
 }
 
 export default function TerminalEmulator({
+  ref,
   streamKey,
-  initialOutputText,
-  initialOutputChunkSequence = 0,
-  outputChunkText,
-  outputChunkSequence,
-  outputChunkReplay = false,
   testId = "terminal-surface",
   xtermTheme = {
     background: "#0b0b0b",
@@ -138,11 +138,11 @@ export default function TerminalEmulator({
   swipeGesturesEnabled = false,
   onSwipeLeft,
   onSwipeRight,
+  initialSnapshot = null,
   onInput,
   onResize,
   onTerminalKey,
   onPendingModifiersConsumed,
-  onOutputChunkConsumed,
   pendingModifiers = { ctrl: false, shift: false, alt: false },
   focusRequestToken = 0,
   resizeRequestToken = 0,
@@ -150,7 +150,6 @@ export default function TerminalEmulator({
   const rootRef = useRef<HTMLDivElement | null>(null);
   const hostRef = useRef<HTMLDivElement | null>(null);
   const runtimeRef = useRef<TerminalEmulatorRuntime | null>(null);
-  const appliedChunkSequenceRef = useRef(0);
   const mountedThemeRef = useRef<ITheme>(xtermTheme);
   const viewportRef = useRef<HTMLElement | null>(null);
   const dragStartOffsetRef = useRef(0);
@@ -169,6 +168,23 @@ export default function TerminalEmulator({
   const [isScrollVisible, setIsScrollVisible] = useState(false);
   const [isScrollActive, setIsScrollActive] = useState(false);
 
+  useDOMImperativeHandle(
+    ref as Ref<DOMImperativeFactory>,
+    () =>
+      ({
+        writeOutput: (text: string) => {
+          runtimeRef.current?.write({ text });
+        },
+        renderSnapshot: (state: TerminalState | null) => {
+          runtimeRef.current?.renderSnapshot({ state });
+        },
+        clear: () => {
+          runtimeRef.current?.clear();
+        },
+      }) as unknown as DOMImperativeFactory,
+    [],
+  );
+
   useEffect(() => {
     mountedThemeRef.current = xtermTheme;
     runtimeRef.current?.setTheme({ theme: xtermTheme });
@@ -315,17 +331,15 @@ export default function TerminalEmulator({
     runtime.mount({
       root,
       host,
-      initialOutputText,
+      initialSnapshot,
       theme: mountedThemeRef.current,
     });
-    appliedChunkSequenceRef.current = Math.max(0, Math.floor(initialOutputChunkSequence));
 
     return () => {
       runtime.unmount();
       if (runtimeRef.current === runtime) {
         runtimeRef.current = null;
       }
-      appliedChunkSequenceRef.current = 0;
     };
   }, [streamKey]);
 
@@ -344,45 +358,11 @@ export default function TerminalEmulator({
     runtimeRef.current?.setPendingModifiers({ pendingModifiers });
   }, [pendingModifiers]);
 
-  useEffect(() => {
-    const runtime = runtimeRef.current;
-    if (outputChunkSequence <= 0) {
-      return;
-    }
-
-    if (outputChunkSequence <= appliedChunkSequenceRef.current) {
-      onOutputChunkConsumed?.(outputChunkSequence);
-      return;
-    }
-
-    if (!runtime) {
-      onOutputChunkConsumed?.(outputChunkSequence);
-      return;
-    }
-
-    appliedChunkSequenceRef.current = outputChunkSequence;
-
-    if (outputChunkText.length === 0) {
-      runtime.clear({
-        onCommitted: () => {
-          onOutputChunkConsumed?.(outputChunkSequence);
-        },
-      });
-      return;
-    }
-    runtime.write({
-      text: outputChunkText,
-      suppressInput: outputChunkReplay,
-      onCommitted: () => {
-        onOutputChunkConsumed?.(outputChunkSequence);
-      },
-    });
-  }, [onOutputChunkConsumed, outputChunkReplay, outputChunkSequence, outputChunkText]);
-
   useEffect(() => {
     if (focusRequestToken <= 0) {
       return;
     }
+    runtimeRef.current?.resize({ force: true });
     return focusWithRetries({
       focus: () => {
         runtimeRef.current?.focus();
@@ -617,9 +597,9 @@ export default function TerminalEmulator({
           height: "100%",
           overflow: "hidden",
           overscrollBehavior: "none",
-          paddingTop: 8,
-          paddingBottom: 8,
-          paddingLeft: 8,
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: 0,
           paddingRight: 0,
         }}
       />

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

@@ -1,22 +1,18 @@
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFocusEffect, useIsFocused } from "@react-navigation/native";
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
-import { Plus, X } from "lucide-react-native";
 import Animated, { runOnJS, useAnimatedReaction } from "react-native-reanimated";
-import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
-import type { ListTerminalsResponse } from "@server/shared/messages";
 import { encodeTerminalKeyInput } from "@server/shared/terminal-key-input";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
 import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
+import { useAppVisible } from "@/hooks/use-app-visible";
+import { useStableEvent } from "@/hooks/use-stable-event";
 import {
   hasPendingTerminalModifiers,
   normalizeTerminalTransportKey,
   resolvePendingModifierDataInput,
 } from "@/utils/terminal-keys";
-import { upsertTerminalListEntry } from "@/utils/terminal-list";
-import { confirmDialog } from "@/utils/confirm-dialog";
 import { getWorkspaceTerminalSession } from "@/terminal/runtime/workspace-terminal-session";
 import {
   TerminalStreamController,
@@ -24,19 +20,15 @@ import {
 } from "@/terminal/runtime/terminal-stream-controller";
 import { usePanelStore } from "@/stores/panel-store";
 import { toXtermTheme } from "@/utils/to-xterm-theme";
-import TerminalEmulator from "./terminal-emulator";
+import TerminalEmulator, { type TerminalEmulatorHandle } from "./terminal-emulator";
 
 interface TerminalPaneProps {
   serverId: string;
   cwd: string;
-  selectedTerminalId: string | null;
-  onSelectedTerminalIdChange?: (terminalId: string | null) => void;
-  hideHeader?: boolean;
-  manageTerminalDirectorySubscription?: boolean;
+  terminalId: string;
+  isPaneFocused: boolean;
 }
 
-const MAX_OUTPUT_CHARS = 200_000;
-const TERMINAL_TAB_MAX_WIDTH = 220;
 const TERMINAL_REFIT_DELAYS_MS = [0, 48, 144, 320];
 
 const MODIFIER_LABELS = {
@@ -79,8 +71,6 @@ type PendingTerminalInput =
       };
     };
 
-type ListTerminalsPayload = ListTerminalsResponse["payload"];
-
 const EMPTY_MODIFIERS: ModifierState = {
   ctrl: false,
   shift: false,
@@ -91,32 +81,14 @@ function terminalScopeKey(input: { serverId: string; cwd: string }): string {
   return `${input.serverId}:${input.cwd}`;
 }
 
-function TerminalCloseGradient({ color, gradientId }: { color: string; gradientId: string }) {
-  return (
-    <View style={styles.terminalTabCloseGradient} pointerEvents="none">
-      <Svg width="100%" height="100%" preserveAspectRatio="none">
-        <Defs>
-          <SvgLinearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
-            <Stop offset="0%" stopColor={color} stopOpacity={0} />
-            <Stop offset="10%" stopColor={color} stopOpacity={1} />
-            <Stop offset="100%" stopColor={color} stopOpacity={1} />
-          </SvgLinearGradient>
-        </Defs>
-        <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${gradientId})`} />
-      </Svg>
-    </View>
-  );
-}
-
 export function TerminalPane({
   serverId,
   cwd,
-  selectedTerminalId,
-  onSelectedTerminalIdChange,
-  hideHeader = false,
-  manageTerminalDirectorySubscription = true,
+  terminalId,
+  isPaneFocused,
 }: TerminalPaneProps) {
   const isScreenFocused = useIsFocused();
+  const isAppVisible = useAppVisible();
   const { theme } = useUnistyles();
   const xtermTheme = useMemo(() => toXtermTheme(theme.colors.terminal), [theme.colors.terminal]);
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
@@ -129,119 +101,28 @@ export function TerminalPane({
     enabled: isMobile,
   });
 
-  const queryClient = useQueryClient();
   const client = useHostRuntimeClient(serverId);
   const isConnected = useHostRuntimeIsConnected(serverId);
 
   const scopeKey = useMemo(() => terminalScopeKey({ serverId, cwd }), [serverId, cwd]);
-  const terminalsQueryKey = useMemo(() => ["terminals", serverId, cwd] as const, [cwd, serverId]);
   const lastReportedSizeRef = useRef<{ rows: number; cols: number } | null>(null);
   const streamControllerRef = useRef<TerminalStreamController | null>(null);
-  const workspaceTerminalSession = useMemo(
-    () =>
-      getWorkspaceTerminalSession({
-        scopeKey,
-        maxOutputChars: MAX_OUTPUT_CHARS,
-      }),
-    [scopeKey],
-  );
-  const outputSession = workspaceTerminalSession.outputSession;
-  const subscribeOutputSession = useCallback(
-    (listener: () => void) => outputSession.subscribe(listener),
-    [outputSession],
-  );
-  const getOutputSessionState = useCallback(() => outputSession.getState(), [outputSession]);
-  const outputState = useSyncExternalStore(
-    subscribeOutputSession,
-    getOutputSessionState,
-    getOutputSessionState,
-  );
-  const selectedOutputState = useMemo(() => {
-    if (outputState.selectedTerminalId === selectedTerminalId) {
-      return outputState;
-    }
-
-    return {
-      ...outputState,
-      selectedTerminalId,
-      snapshotText: outputSession.readSnapshot({ terminalId: selectedTerminalId }),
-      snapshotSequence: 0,
-      chunkText: "",
-      chunkSequence: 0,
-      chunkReplay: false,
-    };
-  }, [outputSession, outputState, selectedTerminalId]);
-  const [activeStream, setActiveStream] = useState<{
-    terminalId: string;
-    streamId: number;
-  } | null>(null);
+  const workspaceTerminalSession = useMemo(() => getWorkspaceTerminalSession({ scopeKey }), [scopeKey]);
   const [isAttaching, setIsAttaching] = useState(false);
   const [streamError, setStreamError] = useState<string | null>(null);
   const [modifiers, setModifiers] = useState<ModifierState>(EMPTY_MODIFIERS);
   const [focusRequestToken, setFocusRequestToken] = useState(0);
   const [resizeRequestToken, setResizeRequestToken] = useState(0);
-  const [hoveredTerminalId, setHoveredTerminalId] = useState<string | null>(null);
-  const [hoveredCloseTerminalId, setHoveredCloseTerminalId] = useState<string | null>(null);
-  const hoverOutTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const selectedTerminalIdRef = useRef<string | null>(selectedTerminalId);
+  const emulatorRef = useRef<TerminalEmulatorHandle>(null);
+  const terminalIdRef = useRef<string>(terminalId);
   const pendingTerminalInputRef = useRef<PendingTerminalInput[]>([]);
   const keyboardRefitTimeoutsRef = useRef<Array<ReturnType<typeof setTimeout>>>([]);
   const lastAutoFocusKeyRef = useRef<string | null>(null);
-
-  const updateSelectedTerminalId = useCallback(
-    (next: string | null) => {
-      onSelectedTerminalIdChange?.(next);
-    },
-    [onSelectedTerminalIdChange],
-  );
+  const initialSnapshot = workspaceTerminalSession.snapshots.get({ terminalId });
 
   useEffect(() => {
-    selectedTerminalIdRef.current = selectedTerminalId;
-  }, [selectedTerminalId]);
-
-  const clearHoverOutTimeout = useCallback(() => {
-    if (!hoverOutTimeoutRef.current) {
-      return;
-    }
-    clearTimeout(hoverOutTimeoutRef.current);
-    hoverOutTimeoutRef.current = null;
-  }, []);
-
-  const handleTerminalTabHoverIn = useCallback(
-    (terminalId: string) => {
-      clearHoverOutTimeout();
-      setHoveredTerminalId(terminalId);
-    },
-    [clearHoverOutTimeout],
-  );
-
-  const handleTerminalTabHoverOut = useCallback(
-    (terminalId: string) => {
-      clearHoverOutTimeout();
-      hoverOutTimeoutRef.current = setTimeout(() => {
-        setHoveredTerminalId((current) => (current === terminalId ? null : current));
-        setHoveredCloseTerminalId((current) => (current === terminalId ? null : current));
-      }, 50);
-    },
-    [clearHoverOutTimeout],
-  );
-
-  const handleTerminalCloseHoverIn = useCallback(
-    (terminalId: string) => {
-      clearHoverOutTimeout();
-      setHoveredTerminalId(terminalId);
-      setHoveredCloseTerminalId(terminalId);
-    },
-    [clearHoverOutTimeout],
-  );
-
-  const handleTerminalCloseHoverOut = useCallback((terminalId: string) => {
-    setHoveredCloseTerminalId((current) => (current === terminalId ? null : current));
-  }, []);
-
-  useEffect(() => {
-    return () => clearHoverOutTimeout();
-  }, [clearHoverOutTimeout]);
+    terminalIdRef.current = terminalId;
+  }, [terminalId]);
 
   const requestTerminalFocus = useCallback(() => {
     setFocusRequestToken((current) => current + 1);
@@ -251,19 +132,26 @@ export function TerminalPane({
   }, []);
 
   useEffect(() => {
-    if (isMobile || !isScreenFocused || !selectedTerminalId) {
+    if (isMobile || !isScreenFocused || !isPaneFocused || !terminalId) {
       lastAutoFocusKeyRef.current = null;
       return;
     }
 
-    const nextFocusKey = `${scopeKey}:${selectedTerminalId}`;
+    const nextFocusKey = `${scopeKey}:${terminalId}`;
     if (lastAutoFocusKeyRef.current === nextFocusKey) {
       return;
     }
 
     lastAutoFocusKeyRef.current = nextFocusKey;
     requestTerminalFocus();
-  }, [isMobile, isScreenFocused, requestTerminalFocus, scopeKey, selectedTerminalId]);
+  }, [isMobile, isPaneFocused, isScreenFocused, requestTerminalFocus, scopeKey, terminalId]);
+
+  useEffect(() => {
+    if (isPaneFocused && isScreenFocused && isAppVisible && terminalId) {
+      lastReportedSizeRef.current = null;
+      requestTerminalReflow();
+    }
+  }, [isAppVisible, isPaneFocused, isScreenFocused, requestTerminalReflow, terminalId]);
 
   const clearKeyboardRefitTimeouts = useCallback(() => {
     if (keyboardRefitTimeoutsRef.current.length === 0) {
@@ -302,7 +190,7 @@ export function TerminalPane({
 
   useFocusEffect(
     useCallback(() => {
-      if (!selectedTerminalId) {
+      if (!terminalId) {
         return;
       }
       // Navigation transitions can temporarily report stale dimensions.
@@ -318,23 +206,9 @@ export function TerminalPane({
           clearTimeout(handle);
         }
       };
-    }, [requestTerminalReflow, selectedTerminalId]),
+    }, [requestTerminalReflow, terminalId]),
   );
 
-  const terminalsQuery = useQuery({
-    queryKey: terminalsQueryKey,
-    enabled: Boolean(client && isConnected && cwd.startsWith("/")),
-    queryFn: async () => {
-      if (!client) {
-        throw new Error("Host is not connected");
-      }
-      return await client.listTerminals(cwd);
-    },
-    staleTime: 5_000,
-  });
-
-  const terminals = terminalsQuery.data?.terminals ?? [];
-
   useEffect(() => {
     if (!client || !isConnected || !isScreenFocused) {
       return;
@@ -350,135 +224,29 @@ export function TerminalPane({
         return;
       }
 
-      streamControllerRef.current?.handleStreamExit({
+      workspaceTerminalSession.snapshots.clear({ terminalId: exitedTerminalId });
+      if (terminalIdRef.current === exitedTerminalId) {
+        emulatorRef.current?.clear();
+      }
+      streamControllerRef.current?.handleTerminalExit({
         terminalId: exitedTerminalId,
-        streamId: message.payload.streamId,
       });
       setModifiers({ ...EMPTY_MODIFIERS });
     });
-  }, [client, isConnected]);
-
-  useEffect(() => {
-    if (!manageTerminalDirectorySubscription || !client || !isConnected || !cwd.startsWith("/")) {
-      return;
-    }
-
-    const unsubscribe = client.on("terminals_changed", (message) => {
-      if (message.type !== "terminals_changed") {
-        return;
-      }
-      if (message.payload.cwd !== cwd) {
-        return;
-      }
-
-      queryClient.setQueryData<ListTerminalsPayload>(terminalsQueryKey, (current) => ({
-        cwd: message.payload.cwd,
-        terminals: message.payload.terminals,
-        requestId: current?.requestId ?? `terminals-changed-${Date.now()}`,
-      }));
-    });
-
-    client.subscribeTerminals({ cwd });
-
-    return () => {
-      unsubscribe();
-      client.unsubscribeTerminals({ cwd });
-    };
-  }, [
-    client,
-    cwd,
-    isConnected,
-    manageTerminalDirectorySubscription,
-    queryClient,
-    terminalsQueryKey,
-  ]);
-
-  const createTerminalMutation = useMutation({
-    mutationFn: async () => {
-      if (!client) {
-        throw new Error("Host is not connected");
-      }
-      return await client.createTerminal(cwd);
-    },
-    onSuccess: (payload) => {
-      const createdTerminal = payload.terminal;
-      if (createdTerminal) {
-        queryClient.setQueryData<ListTerminalsPayload>(terminalsQueryKey, (current) => {
-          const nextTerminals = upsertTerminalListEntry({
-            terminals: current?.terminals ?? [],
-            terminal: createdTerminal,
-          });
-
-          return {
-            cwd: current?.cwd ?? cwd,
-            terminals: nextTerminals,
-            requestId: current?.requestId ?? `terminal-create-${createdTerminal.id}`,
-          };
-        });
-        updateSelectedTerminalId(createdTerminal.id);
-        requestTerminalFocus();
-      }
-      void queryClient.invalidateQueries({
-        queryKey: terminalsQueryKey,
-      });
-    },
-  });
-
-  const killTerminalMutation = useMutation({
-    mutationFn: async (terminalId: string) => {
-      if (!client) {
-        throw new Error("Host is not connected");
-      }
-      const payload = await client.killTerminal(terminalId);
-      if (!payload.success) {
-        throw new Error("Unable to close terminal");
-      }
-      return payload;
-    },
-    onSuccess: (_, terminalId) => {
-      setHoveredTerminalId((current) => (current === terminalId ? null : current));
-      outputSession.clearTerminal({ terminalId });
-      if (selectedTerminalIdRef.current === terminalId) {
-        updateSelectedTerminalId(null);
-        setModifiers({ ...EMPTY_MODIFIERS });
-      }
-      void queryClient.invalidateQueries({
-        queryKey: terminalsQueryKey,
-      });
-      void queryClient.refetchQueries({
-        queryKey: terminalsQueryKey,
-        type: "active",
-      });
-    },
-  });
+  }, [client, isConnected, workspaceTerminalSession.snapshots]);
 
   useEffect(() => {
     lastReportedSizeRef.current = null;
   }, [scopeKey]);
 
-  useEffect(() => {
-    const terminalIds = terminals.map((terminal) => terminal.id);
-    outputSession.prune({ terminalIds });
-    streamControllerRef.current?.pruneResumeOffsets({ terminalIds });
-  }, [outputSession, terminals]);
-
   const handleStreamControllerStatus = useCallback((status: TerminalStreamControllerStatus) => {
     setIsAttaching(status.isAttaching);
     setStreamError(status.error);
-    if (status.terminalId && typeof status.streamId === "number") {
-      setActiveStream({
-        terminalId: status.terminalId,
-        streamId: status.streamId,
-      });
-      return;
-    }
-    setActiveStream(null);
   }, []);
 
   useEffect(() => {
     streamControllerRef.current?.dispose();
     streamControllerRef.current = null;
-    setActiveStream(null);
     setIsAttaching(false);
     setStreamError(null);
 
@@ -489,19 +257,25 @@ export function TerminalPane({
     const controller = new TerminalStreamController({
       client,
       getPreferredSize: () => lastReportedSizeRef.current,
-      resumeOffsets: workspaceTerminalSession.resumeOffsets,
-      onChunk: ({ terminalId, text, replay }) => {
-        outputSession.append({ terminalId, text, replay });
+      onOutput: ({ terminalId, text }) => {
+        if (!isScreenFocused || terminalIdRef.current !== terminalId) {
+          return;
+        }
+        emulatorRef.current?.writeOutput(text);
       },
-      onReset: ({ terminalId }) => {
-        outputSession.clearTerminal({ terminalId });
+      onSnapshot: ({ terminalId, state }) => {
+        workspaceTerminalSession.snapshots.set({ terminalId, state });
+        if (!isScreenFocused || terminalIdRef.current !== terminalId) {
+          return;
+        }
+        emulatorRef.current?.renderSnapshot(state);
       },
       onStatusChange: handleStreamControllerStatus,
     });
 
     streamControllerRef.current = controller;
     controller.setTerminal({
-      terminalId: isScreenFocused ? selectedTerminalIdRef.current : null,
+      terminalId: isScreenFocused ? terminalIdRef.current : null,
     });
 
     return () => {
@@ -515,34 +289,16 @@ export function TerminalPane({
     handleStreamControllerStatus,
     isConnected,
     isScreenFocused,
-    outputSession,
-    workspaceTerminalSession.resumeOffsets,
+    workspaceTerminalSession.snapshots,
   ]);
 
   useEffect(() => {
     pendingTerminalInputRef.current = [];
-    const nextSelectedTerminalId = isScreenFocused ? selectedTerminalId : null;
-    outputSession.setSelectedTerminal({
-      terminalId: nextSelectedTerminalId,
-    });
+    const nextTerminalId = isScreenFocused ? terminalId : null;
     streamControllerRef.current?.setTerminal({
-      terminalId: nextSelectedTerminalId,
+      terminalId: nextTerminalId,
     });
-  }, [isScreenFocused, outputSession, selectedTerminalId]);
-
-  const activeStreamId =
-    activeStream && activeStream.terminalId === selectedTerminalId ? activeStream.streamId : null;
-  const getCurrentActiveStreamId = useCallback(() => {
-    return streamControllerRef.current?.getActiveStreamId() ?? null;
-  }, []);
-
-  const selectedTerminal = useMemo(
-    () => terminals.find((terminal) => terminal.id === selectedTerminalId) ?? null,
-    [terminals, selectedTerminalId],
-  );
-  const handleCreateTerminal = useCallback(() => {
-    createTerminalMutation.mutate();
-  }, [createTerminalMutation]);
+  }, [isScreenFocused, terminalId]);
 
   const enqueuePendingTerminalInput = useCallback((entry: PendingTerminalInput) => {
     const queue = pendingTerminalInputRef.current;
@@ -558,13 +314,13 @@ export function TerminalPane({
         return false;
       }
 
-      const terminalId = selectedTerminalIdRef.current;
-      if (!terminalId) {
+      const currentTerminalId = terminalIdRef.current;
+      if (!currentTerminalId) {
         return false;
       }
 
       if (entry.type === "data") {
-        client.sendTerminalInput(terminalId, {
+        client.sendTerminalInput(currentTerminalId, {
           type: "input",
           data: entry.data,
         });
@@ -575,7 +331,7 @@ export function TerminalPane({
       if (encoded.length === 0) {
         return true;
       }
-      client.sendTerminalInput(terminalId, {
+      client.sendTerminalInput(currentTerminalId, {
         type: "input",
         data: encoded,
       });
@@ -608,31 +364,10 @@ export function TerminalPane({
   }, [dispatchTerminalInputEntry]);
 
   useEffect(() => {
-    flushPendingTerminalInput();
-  }, [activeStreamId, flushPendingTerminalInput]);
-
-  const handleCloseTerminal = useCallback(
-    async (terminalId: string) => {
-      if (killTerminalMutation.isPending && killTerminalMutation.variables === terminalId) {
-        return;
-      }
-
-      const confirmed = await confirmDialog({
-        title: "Close terminal?",
-        message: "Any running process in this terminal will be stopped immediately.",
-        confirmLabel: "Close",
-        cancelLabel: "Cancel",
-        destructive: true,
-      });
-
-      if (!confirmed) {
-        return;
-      }
-
-      killTerminalMutation.mutate(terminalId);
-    },
-    [killTerminalMutation],
-  );
+    if (!isAttaching && !streamError) {
+      flushPendingTerminalInput();
+    }
+  }, [flushPendingTerminalInput, isAttaching, streamError]);
 
   const clearPendingModifiers = useCallback(() => {
     setModifiers({ ...EMPTY_MODIFIERS });
@@ -646,7 +381,7 @@ export function TerminalPane({
       alt: boolean;
       meta?: boolean;
     }): boolean => {
-      if (!client || !selectedTerminalIdRef.current) {
+      if (!client || !terminalIdRef.current) {
         enqueuePendingTerminalInput({
           type: "key",
           input: {
@@ -676,7 +411,7 @@ export function TerminalPane({
       }
       return true;
     },
-    [client, dispatchTerminalInputEntry, enqueuePendingTerminalInput, getCurrentActiveStreamId],
+    [client, dispatchTerminalInputEntry, enqueuePendingTerminalInput],
   );
 
   const handleTerminalData = useCallback(
@@ -710,7 +445,7 @@ export function TerminalPane({
         }
       }
 
-      if (!client || !selectedTerminalIdRef.current) {
+      if (!client || !terminalIdRef.current) {
         enqueuePendingTerminalInput({
           type: "data",
           data,
@@ -729,7 +464,6 @@ export function TerminalPane({
       clearPendingModifiers,
       client,
       dispatchTerminalInputEntry,
-      getCurrentActiveStreamId,
       modifiers.alt,
       modifiers.ctrl,
       modifiers.shift,
@@ -738,10 +472,10 @@ export function TerminalPane({
     ],
   );
 
-  const handleTerminalResize = useCallback(
-    async (input: { rows: number; cols: number }) => {
+  const handleTerminalResize = useStableEvent(
+    (input: { rows: number; cols: number }) => {
       const { rows, cols } = input;
-      if (!client || !selectedTerminalId || rows <= 0 || cols <= 0) {
+      if (!client || !terminalId || !isPaneFocused || !isScreenFocused || !isAppVisible || rows <= 0 || cols <= 0) {
         return;
       }
       const normalizedRows = Math.floor(rows);
@@ -751,13 +485,12 @@ export function TerminalPane({
         return;
       }
       lastReportedSizeRef.current = { rows: normalizedRows, cols: normalizedCols };
-      client.sendTerminalInput(selectedTerminalId, {
+      client.sendTerminalInput(terminalId, {
         type: "resize",
         rows: normalizedRows,
         cols: normalizedCols,
       });
     },
-    [client, selectedTerminalId],
   );
 
   const handleTerminalKey = useCallback(
@@ -771,13 +504,6 @@ export function TerminalPane({
     clearPendingModifiers();
   }, [clearPendingModifiers]);
 
-  const handleOutputChunkConsumed = useCallback(
-    (sequence: number) => {
-      outputSession.consume({ sequence });
-    },
-    [outputSession],
-  );
-
   const toggleModifier = useCallback(
     (modifier: keyof ModifierState) => {
       setModifiers((current) => ({ ...current, [modifier]: !current[modifier] }));
@@ -816,121 +542,13 @@ export function TerminalPane({
     );
   }
 
-  const queryError = terminalsQuery.error instanceof Error ? terminalsQuery.error.message : null;
-  const isCreating = createTerminalMutation.isPending;
-  const createError =
-    createTerminalMutation.error instanceof Error ? createTerminalMutation.error.message : null;
-  const closeError =
-    killTerminalMutation.error instanceof Error ? killTerminalMutation.error.message : null;
-  const combinedError = streamError ?? closeError ?? createError ?? queryError;
-
   return (
     <Animated.View style={[styles.container, keyboardPaddingStyle]}>
-      {!hideHeader ? (
-        <View style={styles.header} testID="terminals-header">
-          <ScrollView
-            horizontal
-            style={styles.tabsScroll}
-            contentContainerStyle={styles.tabsContent}
-            showsHorizontalScrollIndicator={false}
-          >
-            {terminals.map((terminal) => {
-              const isActive = terminal.id === selectedTerminalId;
-              const isTabHovered = hoveredTerminalId === terminal.id;
-              const isCloseHovered = hoveredCloseTerminalId === terminal.id;
-              const isClosingTerminal =
-                killTerminalMutation.isPending && killTerminalMutation.variables === terminal.id;
-              const shouldShowCloseButton = isTabHovered || isCloseHovered || isClosingTerminal;
-              const gradientId = `terminal-close-gradient-${terminal.id.replace(
-                /[^a-zA-Z0-9_-]/g,
-                "-",
-              )}`;
-              return (
-                <Pressable
-                  key={terminal.id}
-                  testID={`terminal-tab-${terminal.id}`}
-                  onPress={() => updateSelectedTerminalId(terminal.id)}
-                  onHoverIn={() => handleTerminalTabHoverIn(terminal.id)}
-                  onHoverOut={() => handleTerminalTabHoverOut(terminal.id)}
-                  style={({ pressed, hovered }) => [
-                    styles.terminalTab,
-                    isActive && styles.terminalTabActive,
-                    shouldShowCloseButton && styles.terminalTabHovered,
-                    (pressed || hovered) && styles.terminalTabHovered,
-                  ]}
-                >
-                  <Text
-                    style={[styles.terminalTabText, isActive && styles.terminalTabTextActive]}
-                    numberOfLines={1}
-                    ellipsizeMode="tail"
-                  >
-                    {terminal.name}
-                  </Text>
-                  <Pressable
-                    testID={`terminal-close-${terminal.id}`}
-                    pointerEvents={shouldShowCloseButton ? "auto" : "none"}
-                    disabled={!shouldShowCloseButton || isClosingTerminal}
-                    onHoverIn={() => handleTerminalCloseHoverIn(terminal.id)}
-                    onHoverOut={() => handleTerminalCloseHoverOut(terminal.id)}
-                    onPress={(event) => {
-                      event.stopPropagation();
-                      void handleCloseTerminal(terminal.id);
-                    }}
-                    style={({ hovered, pressed }) => [
-                      styles.terminalTabCloseButton,
-                      shouldShowCloseButton
-                        ? styles.terminalTabCloseButtonShown
-                        : styles.terminalTabCloseButtonHidden,
-                    ]}
-                  >
-                    {({ hovered = false, pressed = false }) => {
-                      const iconColor =
-                        hovered || pressed ? theme.colors.foreground : theme.colors.foregroundMuted;
-                      return (
-                        <>
-                          <TerminalCloseGradient
-                            color={theme.colors.surface2}
-                            gradientId={gradientId}
-                          />
-                          <View style={styles.terminalTabCloseIcon}>
-                            {isClosingTerminal ? (
-                              <ActivityIndicator size={12} color={iconColor} />
-                            ) : (
-                              <X size={12} color={iconColor} />
-                            )}
-                          </View>
-                        </>
-                      );
-                    }}
-                  </Pressable>
-                </Pressable>
-              );
-            })}
-          </ScrollView>
-          <View style={styles.headerActions}>
-            <Pressable
-              testID="terminals-create-button"
-              onPress={handleCreateTerminal}
-              disabled={isCreating}
-              style={({ hovered, pressed }) => [
-                styles.headerIconButton,
-                (hovered || pressed) && styles.headerIconButtonHovered,
-              ]}
-            >
-              {isCreating ? (
-                <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
-              ) : (
-                <Plus size={16} color={theme.colors.foregroundMuted} />
-              )}
-            </Pressable>
-          </View>
-        </View>
-      ) : null}
-
       <View style={styles.outputContainer}>
-        {selectedTerminal && isScreenFocused ? (
+        {isScreenFocused ? (
           <View style={styles.terminalGestureContainer}>
             <TerminalEmulator
+              ref={emulatorRef}
               dom={{
                 style: { flex: 1 },
                 matchContents: false,
@@ -941,15 +559,11 @@ export function TerminalPane({
                 automaticallyAdjustContentInsets: false,
                 contentInsetAdjustmentBehavior: "never",
               }}
-              streamKey={`${scopeKey}:${selectedTerminal.id}`}
-              initialOutputText={selectedOutputState.snapshotText}
-              initialOutputChunkSequence={selectedOutputState.snapshotSequence}
-              outputChunkText={selectedOutputState.chunkText}
-              outputChunkSequence={selectedOutputState.chunkSequence}
-              outputChunkReplay={selectedOutputState.chunkReplay}
+              streamKey={`${scopeKey}:${terminalId}`}
               testId="terminal-surface"
               xtermTheme={xtermTheme}
               swipeGesturesEnabled={swipeGesturesEnabled}
+              initialSnapshot={initialSnapshot}
               onSwipeRight={() => {
                 if (!swipeGesturesEnabled) {
                   return;
@@ -966,18 +580,13 @@ export function TerminalPane({
               onResize={handleTerminalResize}
               onTerminalKey={handleTerminalKey}
               onPendingModifiersConsumed={handlePendingModifiersConsumed}
-              onOutputChunkConsumed={handleOutputChunkConsumed}
               pendingModifiers={modifiers}
               focusRequestToken={focusRequestToken}
               resizeRequestToken={resizeRequestToken}
             />
           </View>
-        ) : selectedTerminal ? (
-          <View style={styles.terminalGestureContainer} />
         ) : (
-          <View style={styles.centerState}>
-            <Text style={styles.stateText}>No terminal selected</Text>
-          </View>
+          <View style={styles.terminalGestureContainer} />
         )}
 
         {isAttaching && isScreenFocused ? (
@@ -987,10 +596,10 @@ export function TerminalPane({
         ) : null}
       </View>
 
-      {combinedError ? (
+      {streamError ? (
         <View style={styles.errorRow}>
           <Text style={styles.statusError} numberOfLines={2}>
-            {combinedError}
+            {streamError}
           </Text>
         </View>
       ) : null}
@@ -1048,100 +657,6 @@ const styles = StyleSheet.create((theme) => ({
     minHeight: 0,
     backgroundColor: theme.colors.surface0,
   },
-  header: {
-    minHeight: 48,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.colors.border,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.spacing[1],
-    paddingHorizontal: theme.spacing[1],
-    paddingVertical: theme.spacing[1],
-  },
-  tabsScroll: {
-    flex: 1,
-    minWidth: 0,
-  },
-  tabsContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-    paddingRight: theme.spacing[2],
-  },
-  terminalTab: {
-    borderRadius: theme.borderRadius.md,
-    paddingHorizontal: theme.spacing[3],
-    paddingVertical: theme.spacing[2],
-    justifyContent: "center",
-    maxWidth: TERMINAL_TAB_MAX_WIDTH,
-    minWidth: 96,
-    overflow: "hidden",
-    position: "relative",
-  },
-  terminalTabHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
-  terminalTabActive: {
-    backgroundColor: theme.colors.surface2,
-  },
-  terminalTabText: {
-    minWidth: 0,
-    flexShrink: 1,
-    color: theme.colors.foregroundMuted,
-    fontSize: theme.fontSize.sm,
-    fontWeight: theme.fontWeight.normal,
-  },
-  terminalTabTextActive: {
-    color: theme.colors.foreground,
-  },
-  terminalTabCloseButton: {
-    position: "absolute",
-    right: 0,
-    top: 0,
-    bottom: 0,
-    width: 32,
-    borderRadius: theme.borderRadius.sm,
-    alignItems: "flex-end",
-    justifyContent: "center",
-    paddingRight: theme.spacing[2],
-  },
-  terminalTabCloseButtonShown: {
-    opacity: 1,
-  },
-  terminalTabCloseButtonHidden: {
-    opacity: 0,
-  },
-  terminalTabCloseGradient: {
-    ...StyleSheet.absoluteFillObject,
-    borderRadius: theme.borderRadius.sm,
-    overflow: "hidden",
-    zIndex: 0,
-  },
-  terminalTabCloseIcon: {
-    position: "relative",
-    zIndex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  headerActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.spacing[1],
-  },
-  headerIconButton: {
-    width: 30,
-    height: 30,
-    borderRadius: theme.borderRadius.md,
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    backgroundColor: theme.colors.surface1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  headerIconButtonHovered: {
-    backgroundColor: theme.colors.surface2,
-  },
   outputContainer: {
     flex: 1,
     minHeight: 0,

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

@@ -150,70 +150,136 @@ export function Autocomplete({
     );
   }
 
+  const selectedOption = options[selectedIndex];
+
   return (
-    <View style={[styles.container, { maxHeight }]}>
-      <ScrollView
-        ref={scrollRef}
-        onLayout={handleScrollViewLayout}
-        onContentSizeChange={pinToBottom}
-        onScroll={(event) => {
-          scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
-        }}
-        scrollEventThrottle={16}
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="always"
-      >
-        {options.map((option, index) => {
-          const isSelected = index === selectedIndex;
-          const optionLabel = removeBoltGlyphs(option.label) ?? option.label;
-          const optionDetail = removeBoltGlyphs(option.detail);
-          const optionDescription = removeBoltGlyphs(option.description);
-          return (
-            <Pressable
-              key={option.id}
-              onLayout={(event) => handleRowLayout(index, event)}
-              onPress={() => onSelect(option)}
-              style={({ hovered = false, pressed }) => [
-                styles.item,
-                (hovered || pressed || isSelected) && styles.itemActive,
-              ]}
-            >
-              {option.kind === "directory" || option.kind === "file" ? (
-                <View style={styles.itemLeading}>
-                  {option.kind === "directory" ? (
-                    <Folder size={14} color={theme.colors.foregroundMuted} />
-                  ) : (
-                    <File size={14} color={theme.colors.foregroundMuted} />
-                  )}
-                </View>
-              ) : null}
-              <View style={styles.itemMain}>
-                <View style={styles.itemHeader}>
-                  <Text style={styles.itemLabel}>{optionLabel}</Text>
-                  {optionDetail ? <Text style={styles.itemDetail}>{optionDetail}</Text> : null}
-                </View>
-                {optionDescription ? (
-                  <Text style={styles.itemDescription} numberOfLines={1}>
-                    {optionDescription}
-                  </Text>
-                ) : null}
-              </View>
-            </Pressable>
-          );
-        })}
-      </ScrollView>
+    <View style={styles.outerWrapper}>
+      {selectedOption?.kind === "command" && selectedOption.description ? (
+        <View style={styles.detailCard}>
+          <Text style={styles.detailLabel}>
+            {removeBoltGlyphs(selectedOption.label) ?? selectedOption.label}
+          </Text>
+          <Text style={styles.detailDescription}>
+            {removeBoltGlyphs(selectedOption.description)}
+          </Text>
+          {selectedOption.detail ? (
+            <Text style={styles.detailHint}>{removeBoltGlyphs(selectedOption.detail)}</Text>
+          ) : null}
+        </View>
+      ) : null}
+      <View style={[styles.container, { maxHeight }]}>
+        <ScrollView
+          ref={scrollRef}
+          onLayout={handleScrollViewLayout}
+          onContentSizeChange={pinToBottom}
+          onScroll={(event) => {
+            scrollOffsetRef.current = event.nativeEvent.contentOffset.y;
+          }}
+          scrollEventThrottle={16}
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          keyboardShouldPersistTaps="always"
+        >
+          {options.map((option, index) => {
+            const isSelected = index === selectedIndex;
+            const optionLabel = removeBoltGlyphs(option.label) ?? option.label;
+            const optionDescription = removeBoltGlyphs(option.description);
+            const isFileOrDir = option.kind === "directory" || option.kind === "file";
+            return (
+              <Pressable
+                key={option.id}
+                onLayout={(event) => handleRowLayout(index, event)}
+                onPress={() => onSelect(option)}
+                style={({ hovered = false, pressed }) => [
+                  styles.item,
+                  (hovered || pressed || isSelected) && styles.itemActive,
+                ]}
+              >
+                {isFileOrDir ? (
+                  <>
+                    <View style={styles.itemLeading}>
+                      {option.kind === "directory" ? (
+                        <Folder size={14} color={theme.colors.foregroundMuted} />
+                      ) : (
+                        <File size={14} color={theme.colors.foregroundMuted} />
+                      )}
+                    </View>
+                    <View style={styles.itemMain}>
+                      <View style={styles.itemHeader}>
+                        <Text style={styles.itemLabel}>{optionLabel}</Text>
+                        {removeBoltGlyphs(option.detail) ? (
+                          <Text style={styles.itemDetail}>{removeBoltGlyphs(option.detail)}</Text>
+                        ) : null}
+                      </View>
+                      {optionDescription ? (
+                        <Text style={styles.itemDescription} numberOfLines={1}>
+                          {optionDescription}
+                        </Text>
+                      ) : null}
+                    </View>
+                  </>
+                ) : (
+                  <View style={styles.itemMainRow}>
+                    <Text style={styles.itemLabel}>{optionLabel}</Text>
+                    {optionDescription ? (
+                      <Text style={styles.itemDescriptionInline} numberOfLines={1}>
+                        {optionDescription}
+                      </Text>
+                    ) : null}
+                  </View>
+                )}
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create(((theme: Theme) => ({
-  container: {
-    backgroundColor: theme.colors.surface0,
+  outerWrapper: {
+    gap: theme.spacing[1],
+  },
+  detailCard: {
+    backgroundColor: theme.colors.surface1,
     borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
+    borderColor: theme.colors.borderAccent,
+    borderRadius: theme.borderRadius.lg,
+    paddingHorizontal: theme.spacing[3],
+    paddingVertical: theme.spacing[3],
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  detailLabel: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.normal,
+  },
+  detailDescription: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    marginTop: theme.spacing[1],
+  },
+  detailHint: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+    marginTop: theme.spacing[1],
+  },
+  container: {
+    backgroundColor: theme.colors.surface1,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
     borderRadius: theme.borderRadius.lg,
     overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 8,
+    elevation: 8,
   },
   scrollView: {
     flexGrow: 0,
@@ -236,12 +302,19 @@ const styles = StyleSheet.create(((theme: Theme) => ({
     marginRight: theme.spacing[1],
   },
   itemActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
   },
   itemMain: {
     flex: 1,
     minWidth: 0,
   },
+  itemMainRow: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
   itemHeader: {
     flexDirection: "row",
     alignItems: "center",
@@ -261,6 +334,11 @@ const styles = StyleSheet.create(((theme: Theme) => ({
     fontSize: theme.fontSize.xs,
     marginTop: 2,
   },
+  itemDescriptionInline: {
+    flex: 1,
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.xs,
+  },
   emptyItem: {
     paddingHorizontal: theme.spacing[3],
     paddingVertical: theme.spacing[3],

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

@@ -24,7 +24,7 @@ import {
   type ViewStyle,
   type StyleProp,
 } from "react-native";
-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import Animated, { Keyframe, runOnJS } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Check, CheckCircle } from "lucide-react-native";
 
@@ -226,6 +226,22 @@ export function DropdownMenuTrigger({
   );
 }
 
+function getTransformOrigin(placement: Placement, alignment: Alignment): string {
+  const vertical = placement === "bottom" ? "top" : placement === "top" ? "bottom" : "center";
+  const horizontal = alignment === "start" ? "left" : alignment === "end" ? "right" : "center";
+  return `${vertical} ${horizontal}`;
+}
+
+const contentEntering = new Keyframe({
+  0: { opacity: 0, transform: [{ scale: 0.97 }] },
+  100: { opacity: 1, transform: [{ scale: 1 }] },
+}).duration(150);
+
+const contentExiting = new Keyframe({
+  0: { opacity: 1, transform: [{ scale: 1 }] },
+  100: { opacity: 0, transform: [{ scale: 0.97 }] },
+}).duration(100);
+
 export function DropdownMenuContent({
   children,
   side = "bottom",
@@ -249,9 +265,22 @@ export function DropdownMenuContent({
   testID?: string;
 }>): ReactElement | null {
   const { open, setOpen, triggerRef } = useDropdownMenuContext("DropdownMenuContent");
+  const [modalVisible, setModalVisible] = useState(false);
+  const [closing, setClosing] = useState(false);
   const [triggerRect, setTriggerRect] = useState<Rect | null>(null);
   const [contentSize, setContentSize] = useState<{ width: number; height: number } | null>(null);
   const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
+  const [actualPlacement, setActualPlacement] = useState<Placement>(side);
+
+  // Keep Modal mounted during exit animation
+  useEffect(() => {
+    if (open) {
+      setModalVisible(true);
+      setClosing(false);
+    } else if (modalVisible) {
+      setClosing(true);
+    }
+  }, [open, modalVisible]);
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -314,6 +343,7 @@ export function DropdownMenuContent({
     // For fullWidth, x is simply the horizontal padding to center on screen
     const x = fullWidth ? horizontalPadding : result.x;
     setPosition({ x, y: result.y });
+    setActualPlacement(result.actualPlacement);
   }, [triggerRect, contentSize, side, align, offset, fullWidth, horizontalPadding]);
 
   const handleContentLayout = useCallback(
@@ -324,7 +354,7 @@ export function DropdownMenuContent({
     [],
   );
 
-  if (!open) return null;
+  if (!modalVisible) return null;
 
   const { width: screenWidth } = Dimensions.get("window");
   const resolvedWidthStyle: ViewStyle = fullWidth
@@ -337,7 +367,7 @@ export function DropdownMenuContent({
 
   return (
     <Modal
-      visible={open}
+      visible={modalVisible}
       transparent
       animationType="none"
       statusBarTranslucent={Platform.OS === "android"}
@@ -351,30 +381,38 @@ export function DropdownMenuContent({
           onPress={handleClose}
           testID={testID ? `${testID}-backdrop` : undefined}
         />
-        <Animated.View
-          entering={FadeIn.duration(100)}
-          exiting={FadeOut.duration(100)}
-          collapsable={false}
-          testID={testID}
-          onLayout={handleContentLayout}
-          style={[
-            styles.content,
-            resolvedWidthStyle,
-            {
-              position: "absolute",
-              top: position?.y ?? -9999,
-              left: position?.x ?? -9999,
-            },
-          ]}
-        >
-          <ScrollView
-            bounces={false}
-            showsVerticalScrollIndicator
-            contentContainerStyle={{ flexGrow: 1 }}
+        {!closing ? (
+          <Animated.View
+            entering={contentEntering}
+            exiting={contentExiting.withCallback((finished) => {
+              "worklet";
+              if (finished) {
+                runOnJS(setModalVisible)(false);
+              }
+            })}
+            collapsable={false}
+            testID={testID}
+            onLayout={handleContentLayout}
+            style={[
+              styles.content,
+              resolvedWidthStyle,
+              {
+                position: "absolute",
+                top: position?.y ?? -9999,
+                left: position?.x ?? -9999,
+                transformOrigin: getTransformOrigin(actualPlacement, align),
+              },
+            ]}
           >
-            {children}
-          </ScrollView>
-        </Animated.View>
+            <ScrollView
+              bounces={false}
+              showsVerticalScrollIndicator
+              contentContainerStyle={{ flexGrow: 1 }}
+            >
+              {children}
+            </ScrollView>
+          </Animated.View>
+        ) : null}
       </View>
     </Modal>
   );
@@ -559,9 +597,9 @@ const styles = StyleSheet.create((theme) => ({
     left: 0,
   },
   content: {
-    backgroundColor: theme.colors.surface0,
+    backgroundColor: theme.colors.surface1,
     borderWidth: 1,
-    borderColor: theme.colors.border,
+    borderColor: theme.colors.borderAccent,
     borderRadius: theme.borderRadius.lg,
     overflow: "hidden",
     shadowColor: "#000",
@@ -604,16 +642,16 @@ const styles = StyleSheet.create((theme) => ({
     borderColor: "transparent",
   },
   itemHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
   },
   itemPressed: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
   },
   itemSelected: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
   },
   itemSelectedInteractive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surface2,
   },
   itemSelectedAccent: {
     backgroundColor: theme.colors.accent,

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

@@ -6,22 +6,46 @@ import { getShortcutOs } from "@/utils/shortcut-platform";
 
 export function Shortcut({
   keys,
+  chord,
   style,
   textStyle,
 }: {
-  keys: ShortcutKey[];
+  keys?: ShortcutKey[];
+  chord?: ShortcutKey[][];
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
 }): ReactElement {
+  const displayChord = chord ?? (keys ? [keys] : []);
+  const shortcutOs = getShortcutOs();
+  const singleCombo = displayChord[0];
+
+  if (!singleCombo) {
+    return <View style={style} />;
+  }
+
+  if (displayChord.length === 1) {
+    return (
+      <View style={[styles.badge, style]}>
+        <Text style={[styles.text, textStyle]}>{formatShortcut(singleCombo, shortcutOs)}</Text>
+      </View>
+    );
+  }
+
   return (
-    <View style={[styles.root, style]}>
-      <Text style={[styles.text, textStyle]}>{formatShortcut(keys, getShortcutOs())}</Text>
+    <View style={[styles.sequence, style]}>
+      {displayChord.map(function (combo, index) {
+        return (
+          <View key={`${combo.join("+")}-${index}`} style={styles.badge}>
+            <Text style={[styles.text, textStyle]}>{formatShortcut(combo, shortcutOs)}</Text>
+          </View>
+        );
+      })}
     </View>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  root: {
+  badge: {
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
     borderRadius: theme.borderRadius.md,
@@ -29,6 +53,12 @@ const styles = StyleSheet.create((theme) => ({
     borderWidth: theme.borderWidth[1],
     borderColor: theme.colors.borderAccent,
   },
+  sequence: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: theme.spacing[1],
+  },
   text: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,

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

@@ -516,12 +516,30 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
   const handleAppResumed = useCallback(
     (awayMs: number) => {
       scheduleAuthoritativeRevalidation();
+
+      if (Platform.OS !== "web") {
+        const session = useSessionStore.getState().sessions[serverId];
+        const agentId = session?.focusedAgentId;
+        const cursor = agentId ? session?.agentTimelineCursor.get(agentId) : undefined;
+        if (agentId && cursor) {
+          void client
+            .fetchAgentTimeline(agentId, {
+              direction: "after",
+              cursor: { seq: cursor.endSeq },
+              limit: 0,
+            })
+            .catch((error) => {
+              console.warn("[Session] failed to fetch catch-up timeline on resume", agentId, error);
+            });
+        }
+      }
+
       if (awayMs < HISTORY_STALE_AFTER_MS) {
         return;
       }
       bumpHistorySyncGeneration(serverId);
     },
-    [bumpHistorySyncGeneration, scheduleAuthoritativeRevalidation, serverId],
+    [bumpHistorySyncGeneration, client, scheduleAuthoritativeRevalidation, serverId],
   );
 
   // Client activity tracking (heartbeat, push token registration)
@@ -734,13 +752,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);
@@ -843,7 +860,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           }
           if (
             current &&
-            current.epoch === result.cursor.epoch &&
             current.startSeq === result.cursor.startSeq &&
             current.endSeq === result.cursor.endSeq
           ) {
@@ -948,7 +964,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 (
@@ -990,7 +1006,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
       const result = processAgentStreamEvent({
         event: streamEvent,
         seq,
-        epoch,
         currentTail,
         currentHead,
         currentCursor,
@@ -1014,8 +1029,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           if (
             current &&
             typeof seq === "number" &&
-            typeof epoch === "string" &&
-            current.epoch === epoch &&
             seq >= current.startSeq &&
             seq <= current.endSeq
           ) {
@@ -1024,7 +1037,6 @@ function SessionProviderInternal({ children, serverId, client }: SessionProvider
           }
           if (
             current &&
-            current.epoch === nextCursor.epoch &&
             current.startSeq === nextCursor.startSeq &&
             current.endSeq === nextCursor.endSeq
           ) {

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/desktop/components/desktop-permissions-section.tsx

@@ -14,6 +14,7 @@ export function DesktopPermissionsSection() {
     isRefreshing,
     requestingPermission,
     isSendingTestNotification,
+    testNotificationError,
     refreshPermissions,
     requestPermission,
     sendTestNotification,
@@ -58,6 +59,11 @@ export function DesktopPermissionsSection() {
             void sendTestNotification();
           }}
         />
+        {testNotificationError ? (
+          <Text style={[styles.errorText, { color: theme.colors.destructive }]}>
+            {testNotificationError}
+          </Text>
+        ) : null}
         <DesktopPermissionRow
           title="Microphone"
           showBorder
@@ -80,4 +86,9 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     marginBottom: theme.spacing[3],
   },
+  errorText: {
+    fontSize: theme.fontSize.xs,
+    paddingHorizontal: theme.spacing[4],
+    paddingBottom: theme.spacing[2],
+  },
 }));

packages/app/src/desktop/permissions/use-desktop-permissions.ts

@@ -14,6 +14,7 @@ export interface UseDesktopPermissionsReturn {
   isRefreshing: boolean;
   requestingPermission: DesktopPermissionKind | null;
   isSendingTestNotification: boolean;
+  testNotificationError: string | null;
   refreshPermissions: () => Promise<void>;
   requestPermission: (kind: DesktopPermissionKind) => Promise<void>;
   sendTestNotification: () => Promise<void>;
@@ -112,22 +113,25 @@ export function useDesktopPermissions(): UseDesktopPermissionsReturn {
     [isDesktop, refreshPermissions],
   );
 
+  const [testNotificationError, setTestNotificationError] = useState<string | null>(null);
+
   const sendTestNotification = useCallback(async () => {
     if (!isDesktop) {
       return;
     }
 
     setIsSendingTestNotification(true);
+    setTestNotificationError(null);
     try {
       const sent = await sendOsNotification({
         title: "Paseo notification test",
         body: "If you can see this, desktop notifications work.",
       });
       if (!sent) {
-        console.warn("[Settings] Desktop test notification was not delivered");
+        setTestNotificationError("Notification was not delivered. Check System Settings > Notifications.");
       }
     } catch (error) {
-      console.error("[Settings] Failed to send desktop test notification", error);
+      setTestNotificationError("Failed to send notification.");
     } finally {
       if (isMountedRef.current) {
         setIsSendingTestNotification(false);
@@ -149,6 +153,7 @@ export function useDesktopPermissions(): UseDesktopPermissionsReturn {
     isRefreshing,
     requestingPermission,
     isSendingTestNotification,
+    testNotificationError,
     refreshPermissions,
     requestPermission,
     sendTestNotification,

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

@@ -80,20 +80,14 @@ describe("useAgentFormState", () => {
         new Set<string>(),
       );
 
+      expect(resolved.model).toBe("gpt-5.3-codex");
       expect(resolved.thinkingOptionId).toBe("xhigh");
     });
 
-    it("keeps provider thinking preference when it is valid for the effective model", () => {
+    it("prefers provider defaults on fresh drafts", () => {
       const resolved = __private__.resolveFormState(
         undefined,
-        {
-          provider: "codex",
-          providerPreferences: {
-            codex: {
-              thinkingOptionId: "low",
-            },
-          },
-        },
+        { provider: "codex" },
         codexModels,
         {
           serverId: false,
@@ -114,20 +108,14 @@ describe("useAgentFormState", () => {
         new Set<string>(),
       );
 
-      expect(resolved.thinkingOptionId).toBe("low");
+      expect(resolved.model).toBe("gpt-5.3-codex");
+      expect(resolved.thinkingOptionId).toBe("xhigh");
     });
 
     it("falls back to model default when saved thinking preference is invalid", () => {
       const resolved = __private__.resolveFormState(
         undefined,
-        {
-          provider: "codex",
-          providerPreferences: {
-            codex: {
-              thinkingOptionId: "medium",
-            },
-          },
-        },
+        { provider: "codex" },
         codexModels,
         {
           serverId: false,
@@ -151,7 +139,7 @@ describe("useAgentFormState", () => {
       expect(resolved.thinkingOptionId).toBe("xhigh");
     });
 
-    it("normalizes legacy model id 'default' from initial values to auto", () => {
+    it("normalizes legacy model id 'default' from initial values to the provider default model", () => {
       const resolved = __private__.resolveFormState(
         { model: "default" },
         { provider: "codex" },
@@ -175,20 +163,13 @@ describe("useAgentFormState", () => {
         new Set<string>(),
       );
 
-      expect(resolved.model).toBe("");
+      expect(resolved.model).toBe("gpt-5.3-codex");
     });
 
-    it("normalizes legacy model id 'default' from provider preferences to auto", () => {
+    it("normalizes legacy model id 'default' to the provider default model", () => {
       const resolved = __private__.resolveFormState(
-        undefined,
-        {
-          provider: "codex",
-          providerPreferences: {
-            codex: {
-              model: "default",
-            },
-          },
-        },
+        { model: "default" },
+        { provider: "codex" },
         codexModels,
         {
           serverId: false,
@@ -209,7 +190,76 @@ describe("useAgentFormState", () => {
         new Set<string>(),
       );
 
-      expect(resolved.model).toBe("");
+      expect(resolved.model).toBe("gpt-5.3-codex");
+    });
+
+    it("keeps an explicit initial thinking option when it is valid", () => {
+      const resolved = __private__.resolveFormState(
+        { thinkingOptionId: "low" },
+        { provider: "codex" },
+        codexModels,
+        {
+          serverId: false,
+          provider: false,
+          modeId: false,
+          model: false,
+          thinkingOptionId: false,
+          workingDir: false,
+        },
+        {
+          serverId: null,
+          provider: "codex",
+          modeId: "",
+          model: "",
+          thinkingOptionId: "",
+          workingDir: "",
+        },
+        new Set<string>(),
+      );
+
+      expect(resolved.model).toBe("gpt-5.3-codex");
+      expect(resolved.thinkingOptionId).toBe("low");
+    });
+
+    it("leaves thinking unset when the model exposes options without a provider default", () => {
+      const claudeModels: AgentModelDefinition[] = [
+        {
+          provider: "claude",
+          id: "default",
+          label: "Default (Sonnet 4.6)",
+          isDefault: true,
+          thinkingOptions: [
+            { id: "low", label: "Low" },
+            { id: "medium", label: "Medium" },
+          ],
+        },
+      ];
+
+      const resolved = __private__.resolveFormState(
+        undefined,
+        { provider: "claude" },
+        claudeModels,
+        {
+          serverId: false,
+          provider: false,
+          modeId: false,
+          model: false,
+          thinkingOptionId: false,
+          workingDir: false,
+        },
+        {
+          serverId: null,
+          provider: "claude",
+          modeId: "",
+          model: "",
+          thinkingOptionId: "",
+          workingDir: "",
+        },
+        new Set<string>(),
+      );
+
+      expect(resolved.model).toBe("default");
+      expect(resolved.thinkingOptionId).toBe("");
     });
 
     it("resolves provider only from allowed provider map", () => {

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

@@ -11,7 +11,11 @@ import type {
 } from "@server/server/agent/agent-sdk-types";
 import { useHosts } from "@/runtime/host-runtime";
 import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
-import { useFormPreferences, type FormPreferences } from "./use-form-preferences";
+import {
+  useFormPreferences,
+  type FormPreferences,
+  type ProviderPreferences,
+} from "./use-form-preferences";
 
 // Explicit overrides from URL params or "New Agent" button
 export interface FormInitialValues {
@@ -102,7 +106,7 @@ const DEFAULT_MODE_FOR_DEFAULT_PROVIDER = fallbackDefinition?.defaultModeId ?? "
 
 function normalizeSelectedModelId(modelId: string | null | undefined): string {
   const normalized = typeof modelId === "string" ? modelId.trim() : "";
-  if (!normalized || normalized.toLowerCase() === "default") {
+  if (!normalized) {
     return "";
   }
   return normalized;
@@ -117,6 +121,10 @@ function resolveDefaultModel(
   return availableModels.find((model) => model.isDefault) ?? availableModels[0] ?? null;
 }
 
+function resolveDefaultModelId(availableModels: AgentModelDefinition[] | null): string {
+  return resolveDefaultModel(availableModels)?.id ?? "";
+}
+
 function resolveEffectiveModel(
   availableModels: AgentModelDefinition[] | null,
   modelId: string,
@@ -134,9 +142,31 @@ function resolveEffectiveModel(
   );
 }
 
+function resolveThinkingOptionId(args: {
+  availableModels: AgentModelDefinition[] | null;
+  modelId: string;
+  requestedThinkingOptionId: string;
+}): string {
+  const effectiveModel = resolveEffectiveModel(args.availableModels, args.modelId);
+  const thinkingOptions = effectiveModel?.thinkingOptions ?? [];
+  if (thinkingOptions.length === 0) {
+    return "";
+  }
+
+  const normalizedThinkingOptionId = args.requestedThinkingOptionId.trim();
+  if (
+    normalizedThinkingOptionId &&
+    thinkingOptions.some((option) => option.id === normalizedThinkingOptionId)
+  ) {
+    return normalizedThinkingOptionId;
+  }
+
+  return effectiveModel?.defaultThinkingOptionId ?? thinkingOptions[0]?.id ?? "";
+}
+
 /**
  * Pure function that resolves form state from multiple data sources.
- * Priority: explicit (URL params) > preferences > provider defaults > fallback
+ * Priority: explicit (URL params) > provider defaults > lightweight app prefs > fallback
  *
  * Only resolves fields that haven't been user-modified.
  */
@@ -195,25 +225,22 @@ function resolveFormState(
     const isValidModel = (m: string) => availableModels?.some((am) => am.id === m) ?? false;
     const initialModel = normalizeSelectedModelId(initialValues?.model);
     const preferredModel = normalizeSelectedModelId(providerPrefs?.model);
+    const defaultModelId = resolveDefaultModelId(availableModels);
 
     if (initialModel) {
-      // If models aren't loaded yet, trust the initial value
-      // It will be validated once models load
       if (!availableModels || isValidModel(initialModel)) {
         result.model = initialModel;
-      } else if (preferredModel && isValidModel(preferredModel)) {
-        result.model = preferredModel;
       } else {
-        result.model = "";
+        result.model = defaultModelId;
       }
     } else if (preferredModel) {
-      // If models haven't loaded yet, optimistically apply the stored preference.
-      // We'll validate once models load and clear it if it isn't available.
       if (!availableModels || isValidModel(preferredModel)) {
         result.model = preferredModel;
       } else {
-        result.model = "";
+        result.model = defaultModelId;
       }
+    } else if (defaultModelId) {
+      result.model = defaultModelId;
     } else {
       result.model = "";
     }
@@ -224,13 +251,17 @@ function resolveFormState(
     typeof initialValues?.thinkingOptionId === "string"
       ? initialValues.thinkingOptionId.trim()
       : "";
-  const preferredThinkingOptionId = providerPrefs?.thinkingOptionId?.trim() ?? "";
 
   if (!userModified.thinkingOptionId) {
+    const effectiveModelId = result.model.trim();
+    const preferredThinking = effectiveModelId
+      ? providerPrefs?.thinkingByModel?.[effectiveModelId]?.trim() ?? ""
+      : "";
+
     if (initialThinkingOptionId.length > 0) {
       result.thinkingOptionId = initialThinkingOptionId;
-    } else if (preferredThinkingOptionId.length > 0) {
-      result.thinkingOptionId = preferredThinkingOptionId;
+    } else if (preferredThinking.length > 0) {
+      result.thinkingOptionId = preferredThinking;
     } else {
       result.thinkingOptionId = "";
     }
@@ -238,27 +269,17 @@ function resolveFormState(
 
   // Validate thinking option once model metadata is available.
   if (availableModels) {
-    const effectiveModel = resolveEffectiveModel(availableModels, result.model);
-    const thinkingOptions = effectiveModel?.thinkingOptions ?? [];
-    if (thinkingOptions.length === 0) {
-      result.thinkingOptionId = "";
-    } else {
-      const thinkingIds = new Set(thinkingOptions.map((option) => option.id));
-      const defaultThinkingOptionId =
-        effectiveModel?.defaultThinkingOptionId ?? thinkingOptions[0]?.id ?? "";
-      if (!result.thinkingOptionId || !thinkingIds.has(result.thinkingOptionId)) {
-        result.thinkingOptionId = defaultThinkingOptionId;
-      }
-    }
+    result.thinkingOptionId = resolveThinkingOptionId({
+      availableModels,
+      modelId: result.model,
+      requestedThinkingOptionId: result.thinkingOptionId,
+    });
   }
 
   // 5. Resolve serverId (independent)
-  // Only use stored serverId if the host still exists in the registry
   if (!userModified.serverId) {
     if (initialValues?.serverId !== undefined) {
       result.serverId = initialValues.serverId;
-    } else if (preferences?.serverId && validServerIds.has(preferences.serverId)) {
-      result.serverId = preferences.serverId;
     }
     // else keep current
   }
@@ -267,8 +288,6 @@ function resolveFormState(
   if (!userModified.workingDir) {
     if (initialValues?.workingDir !== undefined) {
       result.workingDir = initialValues.workingDir;
-    } else if (preferences?.workingDir) {
-      result.workingDir = preferences.workingDir;
     }
     // else keep current (empty string)
   }
@@ -313,7 +332,6 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
     preferences,
     isLoading: isPreferencesLoading,
     updatePreferences,
-    updateProviderPreferences,
   } = useFormPreferences();
 
   const daemons = useHosts();
@@ -537,107 +555,119 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
     validServerIds,
   ]);
 
-  // Persist inferred serverId so reloads keep the selection (e.g. URL serverId or first-time load).
-  useEffect(() => {
-    if (!isVisible || !isCreateFlow) return;
-    if (isPreferencesLoading) return;
-    if (userModified.serverId) return;
-    const serverId = formState.serverId;
-    if (!serverId) return;
-    if (preferences?.serverId === serverId) return;
-    void updatePreferences({ serverId });
-  }, [
-    isVisible,
-    isCreateFlow,
-    isPreferencesLoading,
-    userModified.serverId,
-    formState.serverId,
-    preferences?.serverId,
-    updatePreferences,
-  ]);
-
   // User setters - mark fields as modified and persist to preferences
   const setSelectedServerIdFromUser = useCallback(
     (value: string | null) => {
       setFormState((prev) => ({ ...prev, serverId: value }));
       setUserModified((prev) => ({ ...prev, serverId: true }));
-      void updatePreferences({ serverId: value ?? undefined });
     },
-    [updatePreferences],
+    [],
   );
 
   const setProviderFromUser = useCallback(
     (provider: AgentProvider) => {
-      setFormState((prev) => ({ ...prev, provider }));
-      setUserModified((prev) => ({ ...prev, provider: true }));
-      void updatePreferences({ provider });
-
-      // When provider changes, reset mode and model to provider defaults
-      // (unless user has explicitly set them)
+      const providerModels = allProviderModels.get(provider) ?? null;
       const providerDef = providerDefinitionMap.get(provider);
       const providerPrefs = preferences?.providerPreferences?.[provider];
 
+      const isValidModel = (m: string) =>
+        providerModels?.some((am) => am.id === m) ?? false;
+      const preferredModel = normalizeSelectedModelId(providerPrefs?.model);
+      const defaultModelId = resolveDefaultModelId(providerModels);
+      const nextModelId =
+        preferredModel && (!providerModels || isValidModel(preferredModel))
+          ? preferredModel
+          : defaultModelId;
+
+      const validModeIds = providerDef?.modes.map((m) => m.id) ?? [];
+      const nextModeId =
+        providerPrefs?.mode && validModeIds.includes(providerPrefs.mode)
+          ? providerPrefs.mode
+          : providerDef?.defaultModeId ?? "";
+
+      const preferredThinking = nextModelId
+        ? providerPrefs?.thinkingByModel?.[nextModelId]?.trim() ?? ""
+        : "";
+      const nextThinkingOptionId = resolveThinkingOptionId({
+        availableModels: providerModels,
+        modelId: nextModelId,
+        requestedThinkingOptionId: preferredThinking,
+      });
+
+      setUserModified((prev) => ({ ...prev, provider: true }));
+      void updatePreferences({ provider });
+
       setFormState((prev) => ({
         ...prev,
         provider,
-        modeId: providerPrefs?.mode ?? providerDef?.defaultModeId ?? "",
-        model: normalizeSelectedModelId(providerPrefs?.model),
-        thinkingOptionId: providerPrefs?.thinkingOptionId ?? "",
+        modeId: nextModeId,
+        model: nextModelId,
+        thinkingOptionId: nextThinkingOptionId,
       }));
     },
-    [preferences?.providerPreferences, providerDefinitionMap, updatePreferences],
+    [allProviderModels, preferences?.providerPreferences, providerDefinitionMap, updatePreferences],
   );
 
   const setProviderAndModelFromUser = useCallback(
     (provider: AgentProvider, modelId: string) => {
       const providerDef = providerDefinitionMap.get(provider);
-      const providerPrefs = preferences?.providerPreferences?.[provider];
+      const providerModels = allProviderModels.get(provider) ?? null;
+      const normalizedModelId = normalizeSelectedModelId(modelId);
+      const nextModelId = normalizedModelId || resolveDefaultModelId(providerModels);
+      const nextThinkingOptionId = resolveThinkingOptionId({
+        availableModels: providerModels,
+        modelId: nextModelId,
+        requestedThinkingOptionId: "",
+      });
 
       setFormState((prev) => ({
         ...prev,
         provider,
-        model: modelId,
-        modeId: providerPrefs?.mode ?? providerDef?.defaultModeId ?? "",
-        thinkingOptionId: providerPrefs?.thinkingOptionId ?? "",
+        model: nextModelId,
+        modeId: providerDef?.defaultModeId ?? "",
+        thinkingOptionId: nextThinkingOptionId,
       }));
       setUserModified((prev) => ({ ...prev, provider: true, model: true }));
       void updatePreferences({ provider });
-      void updateProviderPreferences(provider, { model: modelId });
     },
-    [
-      preferences?.providerPreferences,
-      providerDefinitionMap,
-      updatePreferences,
-      updateProviderPreferences,
-    ],
+    [allProviderModels, providerDefinitionMap, updatePreferences],
   );
 
   const setModeFromUser = useCallback(
     (modeId: string) => {
       setFormState((prev) => ({ ...prev, modeId }));
       setUserModified((prev) => ({ ...prev, modeId: true }));
-      void updateProviderPreferences(formState.provider, { mode: modeId });
     },
-    [formState.provider, updateProviderPreferences],
+    [],
   );
 
   const setModelFromUser = useCallback(
     (modelId: string) => {
       const normalizedModelId = normalizeSelectedModelId(modelId);
-      setFormState((prev) => ({ ...prev, model: normalizedModelId }));
+      const nextModelId = normalizedModelId || resolveDefaultModelId(availableModels);
+      const nextThinkingOptionId = resolveThinkingOptionId({
+        availableModels,
+        modelId: nextModelId,
+        requestedThinkingOptionId: userModified.thinkingOptionId
+          ? formStateRef.current.thinkingOptionId
+          : "",
+      });
+      setFormState((prev) => ({
+        ...prev,
+        model: nextModelId,
+        thinkingOptionId: nextThinkingOptionId,
+      }));
       setUserModified((prev) => ({ ...prev, model: true }));
-      void updateProviderPreferences(formState.provider, { model: normalizedModelId });
     },
-    [formState.provider, updateProviderPreferences],
+    [availableModels, userModified.thinkingOptionId],
   );
 
   const setThinkingOptionFromUser = useCallback(
     (thinkingOptionId: string) => {
       setFormState((prev) => ({ ...prev, thinkingOptionId }));
       setUserModified((prev) => ({ ...prev, thinkingOptionId: true }));
-      void updateProviderPreferences(formState.provider, { thinkingOptionId });
     },
-    [formState.provider, updateProviderPreferences],
+    [],
   );
 
   const setWorkingDir = useCallback((value: string) => {
@@ -648,9 +678,8 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
     (value: string) => {
       setFormState((prev) => ({ ...prev, workingDir: value }));
       setUserModified((prev) => ({ ...prev, workingDir: true }));
-      void updatePreferences({ workingDir: value });
     },
-    [updatePreferences],
+    [],
   );
 
   const setSelectedServerId = useCallback((value: string | null) => {
@@ -662,39 +691,42 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
   }, [providerModelsQuery]);
 
   const persistFormPreferences = useCallback(async () => {
-    const providerPreferenceUpdates: {
-      mode: string;
-      model: string;
-      thinkingOptionId?: string;
-    } = {
-      mode: formState.modeId,
-      model: formState.model,
+    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 }
+          : {}),
+      },
     };
-    if (userModified.thinkingOptionId) {
-      providerPreferenceUpdates.thinkingOptionId = formState.thinkingOptionId;
-    }
 
     await updatePreferences({
-      workingDir: formState.workingDir,
       provider: formState.provider,
-      serverId: formState.serverId ?? undefined,
+      providerPreferences: {
+        ...preferences?.providerPreferences,
+        [formState.provider]: nextProviderPrefs,
+      },
     });
-    await updateProviderPreferences(formState.provider, providerPreferenceUpdates);
   }, [
-    formState.modeId,
+    availableModels,
     formState.model,
+    formState.modeId,
     formState.provider,
-    formState.serverId,
     formState.thinkingOptionId,
-    formState.workingDir,
-    userModified.thinkingOptionId,
+    preferences?.providerPreferences,
     updatePreferences,
-    updateProviderPreferences,
   ]);
 
   const agentDefinition = providerDefinitionMap.get(formState.provider);
   const modeOptions = agentDefinition?.modes ?? [];
   const effectiveModel = resolveEffectiveModel(availableModels, formState.model);
+  const resolvedModelId = effectiveModel?.id ?? formState.model;
   const availableThinkingOptions = effectiveModel?.thinkingOptions ?? [];
   const isModelLoading = providerModelsQuery.isLoading || providerModelsQuery.isFetching;
   const modelError =
@@ -711,7 +743,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
       setProviderFromUser,
       selectedMode: formState.modeId,
       setModeFromUser,
-      selectedModel: formState.model,
+      selectedModel: resolvedModelId,
       setModelFromUser,
       selectedThinkingOptionId: formState.thinkingOptionId,
       setThinkingOptionFromUser,
@@ -737,7 +769,7 @@ export function useAgentFormState(options: UseAgentFormStateOptions = {}): UseAg
       formState.serverId,
       formState.provider,
       formState.modeId,
-      formState.model,
+      resolvedModelId,
       formState.thinkingOptionId,
       formState.workingDir,
       setSelectedServerId,
@@ -771,5 +803,7 @@ export type CreateAgentInitialValues = FormInitialValues;
 
 export const __private__ = {
   combineInitialValues,
+  resolveDefaultModel,
   resolveFormState,
+  resolveThinkingOptionId,
 };

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-screen-state-machine.ts

@@ -1,5 +1,17 @@
 import { useRef } from "react";
-import type { Agent } from "@/contexts/session-context";
+
+export interface AgentScreenAgent {
+  serverId: string;
+  id: string;
+  status: "initializing" | "idle" | "running" | "error" | "closed";
+  cwd: string;
+  projectPlacement?: {
+    checkout?: {
+      cwd?: string;
+      isGit?: boolean;
+    };
+  } | null;
+}
 
 export type AgentScreenMissingState =
   | { kind: "idle" }
@@ -8,8 +20,8 @@ export type AgentScreenMissingState =
   | { kind: "error"; message: string };
 
 export interface AgentScreenMachineInput {
-  agent: Agent | null;
-  placeholderAgent: Agent | null;
+  agent: AgentScreenAgent | null;
+  placeholderAgent: AgentScreenAgent | null;
   missingAgentState: AgentScreenMissingState;
   isConnected: boolean;
   isArchivingCurrentAgent: boolean;
@@ -31,7 +43,7 @@ export type AgentScreenToastLatch = "none" | "history_refresh" | "sync_error";
 
 export interface AgentScreenMachineMemory {
   hasRenderedReady: boolean;
-  lastReadyAgent: Agent | null;
+  lastReadyAgent: AgentScreenAgent | null;
   activeToastLatch: AgentScreenToastLatch;
   hadInitialSyncFailure: boolean;
 }
@@ -70,7 +82,7 @@ export type AgentScreenViewState =
     }
   | {
       tag: "ready";
-      agent: Agent;
+      agent: AgentScreenAgent;
       source: "authoritative" | "optimistic" | "stale";
       sync: AgentScreenReadySyncState;
       isArchiving: boolean;

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

@@ -0,0 +1,49 @@
+import { useEffect, useSyncExternalStore } from "react";
+import { AppState, Platform } from "react-native";
+import { getIsAppActivelyVisible } from "@/utils/app-visibility";
+
+let current = getIsAppActivelyVisible();
+const listeners = new Set<() => void>();
+
+function notify(): void {
+  const next = getIsAppActivelyVisible();
+  if (next === current) {
+    return;
+  }
+  current = next;
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function getSnapshot(): boolean {
+  return current;
+}
+
+export function useAppVisible(): boolean {
+  useEffect(() => {
+    const appStateSubscription = AppState.addEventListener("change", notify);
+
+    if (Platform.OS === "web" && typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", notify);
+      window.addEventListener("focus", notify);
+      window.addEventListener("blur", notify);
+    }
+
+    return () => {
+      appStateSubscription.remove();
+      if (Platform.OS === "web" && typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", notify);
+        window.removeEventListener("focus", notify);
+        window.removeEventListener("blur", notify);
+      }
+    };
+  }, []);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

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

@@ -3,6 +3,7 @@ import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-
 import type { CheckoutPrStatusResponse } from "@server/shared/messages";
 
 const CHECKOUT_PR_STATUS_STALE_TIME = 20_000;
+const WORKSPACE_PR_HINT_REFETCH_INTERVAL = 60_000;
 
 function checkoutPrStatusQueryKey(serverId: string, cwd: string) {
   return ["checkoutPrStatus", serverId, cwd] as const;
@@ -15,6 +16,48 @@ interface UseCheckoutPrStatusQueryOptions {
 }
 
 export type CheckoutPrStatusPayload = CheckoutPrStatusResponse["payload"];
+export interface PrHint {
+  url: string;
+  number: number;
+  state: "open" | "merged" | "closed";
+}
+
+function parsePullRequestNumber(url: string): number | null {
+  try {
+    const pathname = new URL(url).pathname;
+    const match = pathname.match(/\/pull\/(\d+)(?:\/|$)/);
+    if (!match) {
+      return null;
+    }
+
+    const number = Number.parseInt(match[1], 10);
+    return Number.isFinite(number) ? number : null;
+  } catch {
+    return null;
+  }
+}
+
+function selectWorkspacePrHint(payload: CheckoutPrStatusPayload): PrHint | null {
+  const status = payload.status;
+  if (!status?.url) {
+    return null;
+  }
+
+  const number = parsePullRequestNumber(status.url);
+  if (number === null) {
+    return null;
+  }
+
+  return {
+    url: status.url,
+    number,
+    state: status.isMerged || status.state === "merged"
+      ? "merged"
+      : status.state === "open"
+        ? "open"
+        : "closed",
+  };
+}
 
 export function useCheckoutPrStatusQuery({
   serverId,
@@ -48,3 +91,28 @@ export function useCheckoutPrStatusQuery({
     refresh: query.refetch,
   };
 }
+
+export function useWorkspacePrHint({
+  serverId,
+  cwd,
+  enabled = true,
+}: UseCheckoutPrStatusQueryOptions): PrHint | null {
+  const client = useHostRuntimeClient(serverId);
+  const isConnected = useHostRuntimeIsConnected(serverId);
+
+  const query = useQuery<CheckoutPrStatusPayload, Error, PrHint | null>({
+    queryKey: checkoutPrStatusQueryKey(serverId, cwd),
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Daemon client not available");
+      }
+      return await client.checkoutPrStatus(cwd);
+    },
+    enabled: !!client && isConnected && !!cwd && enabled,
+    staleTime: CHECKOUT_PR_STATUS_STALE_TIME,
+    refetchInterval: WORKSPACE_PR_HINT_REFETCH_INTERVAL,
+    select: selectWorkspacePrHint,
+  });
+
+  return query.data ?? null;
+}

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

@@ -13,7 +13,7 @@ import {
 } from "@/utils/command-center-focus-restore";
 import { buildHostSettingsRoute, parseServerIdFromPathname } from "@/utils/host-routes";
 import type { ShortcutKey } from "@/utils/format-shortcut";
-import { comboStringToShortcutKeys } from "@/keyboard/shortcut-string";
+import { chordStringToShortcutKeys } from "@/keyboard/shortcut-string";
 import { getBindingIdForAction, getDefaultKeysForAction } from "@/keyboard/keyboard-shortcuts";
 import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
 import { getShortcutOs } from "@/utils/shortcut-platform";
@@ -91,7 +91,7 @@ export type CommandCenterActionItem = {
   title: string;
   icon?: "plus" | "settings";
   route?: Href;
-  shortcutKeys?: ShortcutKey[];
+  shortcutKeys?: ShortcutKey[][];
 };
 
 export type CommandCenterItem =
@@ -107,7 +107,7 @@ export type CommandCenterItem =
 function resolveActionShortcutKeys(
   actionId: string | undefined,
   overrides: Record<string, string>,
-): ShortcutKey[] | undefined {
+): ShortcutKey[][] | undefined {
   if (!actionId) return undefined;
   const isMac = getShortcutOs() === "mac";
   const isDesktop = getIsDesktop();
@@ -115,8 +115,9 @@ function resolveActionShortcutKeys(
   const bindingId = getBindingIdForAction(actionId, platform);
   if (!bindingId) return undefined;
   const override = overrides[bindingId];
-  if (override) return comboStringToShortcutKeys(override);
-  return getDefaultKeysForAction(actionId, platform) ?? undefined;
+  if (override) return chordStringToShortcutKeys(override);
+  const defaultKeys = getDefaultKeysForAction(actionId, platform);
+  return defaultKeys ? [defaultKeys] : undefined;
 }
 
 export function useCommandCenter() {

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

@@ -2,7 +2,6 @@ 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"];
@@ -10,13 +9,11 @@ const FORM_PREFERENCES_QUERY_KEY = ["form-preferences"];
 const providerPreferencesSchema = z.object({
   model: z.string().optional(),
   mode: z.string().optional(),
-  thinkingOptionId: z.string().optional(),
+  thinkingByModel: z.record(z.string()).optional(),
 });
 
 const formPreferencesSchema = z.object({
-  workingDir: z.string().optional(),
   provider: z.string().optional(),
-  serverId: z.string().optional(),
   providerPreferences: z.record(providerPreferencesSchema).optional(),
 });
 
@@ -35,12 +32,7 @@ async function loadFormPreferences(): Promise<FormPreferences> {
 export interface UseFormPreferencesReturn {
   preferences: FormPreferences;
   isLoading: boolean;
-  getProviderPreferences: (provider: AgentProvider) => ProviderPreferences | undefined;
   updatePreferences: (updates: Partial<FormPreferences>) => Promise<void>;
-  updateProviderPreferences: (
-    provider: AgentProvider,
-    updates: Partial<ProviderPreferences>,
-  ) => Promise<void>;
 }
 
 export function useFormPreferences(): UseFormPreferencesReturn {
@@ -54,13 +46,6 @@ export function useFormPreferences(): UseFormPreferencesReturn {
 
   const preferences = data ?? DEFAULT_FORM_PREFERENCES;
 
-  const getProviderPreferences = useCallback(
-    (provider: AgentProvider): ProviderPreferences | undefined => {
-      return preferences.providerPreferences?.[provider];
-    },
-    [preferences.providerPreferences],
-  );
-
   const updatePreferences = useCallback(
     async (updates: Partial<FormPreferences>) => {
       const prev =
@@ -73,32 +58,9 @@ export function useFormPreferences(): UseFormPreferencesReturn {
     [queryClient],
   );
 
-  const updateProviderPreferences = useCallback(
-    async (provider: AgentProvider, updates: Partial<ProviderPreferences>) => {
-      const prev =
-        queryClient.getQueryData<FormPreferences>(FORM_PREFERENCES_QUERY_KEY) ??
-        DEFAULT_FORM_PREFERENCES;
-      const next: FormPreferences = {
-        ...prev,
-        providerPreferences: {
-          ...prev.providerPreferences,
-          [provider]: {
-            ...prev.providerPreferences?.[provider],
-            ...updates,
-          },
-        },
-      };
-      queryClient.setQueryData<FormPreferences>(FORM_PREFERENCES_QUERY_KEY, next);
-      await AsyncStorage.setItem(FORM_PREFERENCES_STORAGE_KEY, JSON.stringify(next));
-    },
-    [queryClient],
-  );
-
   return {
     preferences,
     isLoading: isPending,
-    getProviderPreferences,
     updatePreferences,
-    updateProviderPreferences,
   };
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import { usePathname } from "expo-router";
 import { getIsDesktop } from "@/constants/layout";
@@ -17,7 +17,11 @@ import {
 } from "@/keyboard/actions";
 import { canToggleFileExplorerShortcut } from "@/keyboard/keyboard-shortcut-routing";
 import { keyboardActionDispatcher } from "@/keyboard/keyboard-action-dispatcher";
-import { resolveKeyboardShortcut, buildEffectiveBindings } from "@/keyboard/keyboard-shortcuts";
+import {
+  type ChordState,
+  resolveKeyboardShortcut,
+  buildEffectiveBindings,
+} from "@/keyboard/keyboard-shortcuts";
 import { resolveKeyboardFocusScope } from "@/keyboard/focus-scope";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 import { useOpenProjectPicker } from "@/hooks/use-open-project-picker";
@@ -29,18 +33,27 @@ export function useKeyboardShortcuts({
   toggleAgentList,
   selectedAgentId,
   toggleFileExplorer,
+  toggleBothSidebars,
+  toggleFocusMode,
 }: {
   enabled: boolean;
   isMobile: boolean;
   toggleAgentList: () => void;
   selectedAgentId?: string;
   toggleFileExplorer?: () => void;
+  toggleBothSidebars?: () => void;
+  toggleFocusMode?: () => void;
 }) {
   const pathname = usePathname();
   const hosts = useHosts();
   const resetModifiers = useKeyboardShortcutsStore((s) => s.resetModifiers);
   const { overrides } = useKeyboardShortcutOverrides();
   const bindings = useMemo(() => buildEffectiveBindings(overrides), [overrides]);
+  const chordStateRef = useRef<ChordState>({
+    candidateIndices: [],
+    step: 0,
+    timeoutId: null,
+  });
   const activeServerIdFromPath = parseServerIdFromPathname(pathname);
   const activeServerId =
     hosts.find((host) => host.serverId === activeServerIdFromPath)?.serverId ??
@@ -153,6 +166,21 @@ export function useKeyboardShortcuts({
             id: "workspace.tab.new",
             scope: "workspace",
           });
+        case "worktree.archive":
+          return keyboardActionDispatcher.dispatch({
+            id: "worktree.archive",
+            scope: "sidebar",
+          });
+        case "worktree.new":
+          return keyboardActionDispatcher.dispatch({
+            id: "worktree.new",
+            scope: "sidebar",
+          });
+        case "workspace.terminal.new":
+          return keyboardActionDispatcher.dispatch({
+            id: "workspace.terminal.new",
+            scope: "workspace",
+          });
         case "workspace.tab.close.current":
           return keyboardActionDispatcher.dispatch({
             id: "workspace.tab.close-current",
@@ -204,6 +232,11 @@ export function useKeyboardShortcuts({
         case "sidebar.toggle.left":
           toggleAgentList();
           return true;
+        case "sidebar.toggle.both":
+          if (toggleBothSidebars) {
+            toggleBothSidebars();
+          }
+          return true;
         case "sidebar.toggle.right":
           if (!toggleFileExplorer) {
             return false;
@@ -219,6 +252,11 @@ export function useKeyboardShortcuts({
           }
           toggleFileExplorer();
           return true;
+        case "view.toggle.focus":
+          if (toggleFocusMode) {
+            toggleFocusMode();
+          }
+          return true;
         case "command-center.toggle": {
           const store = useKeyboardShortcutsStore.getState();
           if (!store.commandCenterOpen) {
@@ -256,6 +294,11 @@ export function useKeyboardShortcuts({
         return;
       }
 
+      const store = useKeyboardShortcutsStore.getState();
+      if (store.capturingShortcut) {
+        return;
+      }
+
       const key = event.key ?? "";
       if (key === "Alt" && !event.shiftKey) {
         useKeyboardShortcutsStore.getState().setAltDown(true);
@@ -270,12 +313,11 @@ export function useKeyboardShortcuts({
         }
       }
 
-      const store = useKeyboardShortcutsStore.getState();
       const focusScope = resolveKeyboardFocusScope({
         target: event.target,
         commandCenterOpen: store.commandCenterOpen,
       });
-      const match = resolveKeyboardShortcut({
+      const result = resolveKeyboardShortcut({
         event,
         context: {
           isMac,
@@ -288,25 +330,41 @@ export function useKeyboardShortcuts({
             toggleFileExplorer,
           }),
         },
+        chordState: chordStateRef.current,
+        onChordReset: () => {
+          chordStateRef.current = {
+            candidateIndices: [],
+            step: 0,
+            timeoutId: null,
+          };
+        },
         bindings,
       });
-      if (!match) {
+
+      chordStateRef.current = result.nextChordState;
+
+      if (result.preventDefault) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      if (!result.match) {
         return;
       }
 
       const handled = handleAction({
-        action: match.action,
-        payload: match.payload,
+        action: result.match.action,
+        payload: result.match.payload,
         event,
       });
       if (!handled) {
         return;
       }
 
-      if (match.preventDefault) {
+      if (result.match.preventDefault) {
         event.preventDefault();
       }
-      if (match.stopPropagation) {
+      if (result.match.stopPropagation) {
         event.stopPropagation();
       }
     };
@@ -330,6 +388,14 @@ export function useKeyboardShortcuts({
     window.addEventListener("blur", handleBlurOrHide);
     document.addEventListener("visibilitychange", handleBlurOrHide);
     return () => {
+      if (chordStateRef.current.timeoutId !== null) {
+        clearTimeout(chordStateRef.current.timeoutId);
+        chordStateRef.current = {
+          candidateIndices: [],
+          step: 0,
+          timeoutId: null,
+        };
+      }
       window.removeEventListener("keydown", handleKeyDown, true);
       window.removeEventListener("keyup", handleKeyUp, true);
       window.removeEventListener("blur", handleBlurOrHide);
@@ -345,5 +411,6 @@ export function useKeyboardShortcuts({
     selectedAgentId,
     toggleAgentList,
     toggleFileExplorer,
+    toggleFocusMode,
   ]);
 }

packages/app/src/hooks/use-shortcut-keys.ts

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
 import type { ShortcutKey } from "@/utils/format-shortcut";
-import { comboStringToShortcutKeys } from "@/keyboard/shortcut-string";
+import { chordStringToShortcutKeys } from "@/keyboard/shortcut-string";
 import { getBindingIdForAction, getDefaultKeysForAction } from "@/keyboard/keyboard-shortcuts";
 import { useKeyboardShortcutOverrides } from "@/hooks/use-keyboard-shortcut-overrides";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 import { getIsDesktop } from "@/constants/layout";
 
-export function useShortcutKeys(actionId: string): ShortcutKey[] | null {
+export function useShortcutKeys(actionId: string): ShortcutKey[][] | null {
   const { overrides } = useKeyboardShortcutOverrides();
   const isMac = getShortcutOs() === "mac";
   const isDesktop = getIsDesktop();
@@ -18,9 +18,10 @@ export function useShortcutKeys(actionId: string): ShortcutKey[] | null {
 
     const override = overrides[bindingId];
     if (override) {
-      return comboStringToShortcutKeys(override);
+      return chordStringToShortcutKeys(override);
     }
 
-    return getDefaultKeysForAction(actionId, platform);
+    const defaultKeys = getDefaultKeysForAction(actionId, platform);
+    return defaultKeys ? [defaultKeys] : null;
   }, [actionId, overrides, isMac, isDesktop]);
 }

packages/app/src/hooks/use-stable-event.ts

@@ -0,0 +1,10 @@
+import { useCallback, useRef } from "react";
+
+export function useStableEvent<TArgs extends unknown[], TResult>(
+  handler: (...args: TArgs) => TResult,
+): (...args: TArgs) => TResult {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  return useCallback((...args: TArgs) => handlerRef.current(...args), []);
+}

packages/app/src/keyboard/actions.ts

@@ -7,6 +7,8 @@ export type KeyboardFocusScope =
 
 export type MessageInputKeyboardActionKind =
   | "focus"
+  | "send"
+  | "queue"
   | "dictation-toggle"
   | "dictation-cancel"
   | "voice-toggle"
@@ -33,8 +35,13 @@ export type KeyboardActionId =
   | "workspace.navigate.relative"
   | "sidebar.toggle.left"
   | "sidebar.toggle.right"
+  | "sidebar.toggle.both"
   | "command-center.toggle"
   | "shortcuts.dialog.toggle"
+  | "workspace.terminal.new"
+  | "worktree.new"
+  | "worktree.archive"
+  | "view.toggle.focus"
   | "message-input.action";
 
 export type KeyboardShortcutPayload =

packages/app/src/keyboard/keyboard-action-dispatcher.test.ts

@@ -89,6 +89,43 @@ describe("keyboard-action-dispatcher", () => {
     expect(handle).toHaveBeenCalledTimes(1);
   });
 
+  it("dispatches to the active mounted tab when a newer hidden tab is inactive", () => {
+    const calls: string[] = [];
+    const action: KeyboardActionDefinition = {
+      id: "message-input.dictation-toggle",
+      scope: "message-input",
+    };
+
+    dispatcher.registerHandler({
+      handlerId: "visible-tab",
+      actions: [action.id],
+      enabled: true,
+      priority: 100,
+      isActive: () => true,
+      handle: () => {
+        calls.push("visible-tab");
+        return true;
+      },
+    });
+
+    dispatcher.registerHandler({
+      handlerId: "hidden-tab",
+      actions: [action.id],
+      enabled: true,
+      priority: 100,
+      isActive: () => false,
+      handle: () => {
+        calls.push("hidden-tab");
+        return true;
+      },
+    });
+
+    const handled = dispatcher.dispatch(action);
+
+    expect(handled).toBe(true);
+    expect(calls).toEqual(["visible-tab"]);
+  });
+
   it("tries lower-priority handlers when a higher one does not consume the action", () => {
     const calls: string[] = [];
     const action: KeyboardActionDefinition = {

packages/app/src/keyboard/keyboard-action-dispatcher.ts

@@ -20,7 +20,10 @@ export type KeyboardActionId =
   | "workspace.pane.move-tab.right"
   | "workspace.pane.move-tab.up"
   | "workspace.pane.move-tab.down"
-  | "workspace.pane.close";
+  | "workspace.pane.close"
+  | "workspace.terminal.new"
+  | "worktree.new"
+  | "worktree.archive";
 
 export type KeyboardActionDefinition =
   | { id: "message-input.focus"; scope: KeyboardActionScope }
@@ -42,7 +45,10 @@ export type KeyboardActionDefinition =
   | { id: "workspace.pane.move-tab.right"; scope: KeyboardActionScope }
   | { id: "workspace.pane.move-tab.up"; scope: KeyboardActionScope }
   | { id: "workspace.pane.move-tab.down"; scope: KeyboardActionScope }
-  | { id: "workspace.pane.close"; scope: KeyboardActionScope };
+  | { id: "workspace.pane.close"; scope: KeyboardActionScope }
+  | { id: "workspace.terminal.new"; scope: KeyboardActionScope }
+  | { id: "worktree.new"; scope: KeyboardActionScope }
+  | { id: "worktree.archive"; scope: KeyboardActionScope };
 
 export type KeyboardActionHandler = {
   handlerId: string;

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

@@ -1,8 +1,11 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   buildKeyboardShortcutHelpSections,
+  buildEffectiveBindings,
   resolveKeyboardShortcut,
+  type ChordState,
   type KeyboardShortcutContext,
+  type ParsedShortcutBinding,
 } from "./keyboard-shortcuts";
 
 function keyboardEvent(overrides: Partial<KeyboardEvent>): KeyboardEvent {
@@ -31,6 +34,30 @@ function shortcutContext(
   };
 }
 
+function initialChordState(): ChordState {
+  return {
+    candidateIndices: [],
+    step: 0,
+    timeoutId: null,
+  };
+}
+
+function resolveShortcut(input: {
+  event: Partial<KeyboardEvent>;
+  context?: Partial<KeyboardShortcutContext>;
+  chordState?: ChordState;
+  onChordReset?: () => void;
+  bindings?: readonly ParsedShortcutBinding[];
+}) {
+  return resolveKeyboardShortcut({
+    event: keyboardEvent(input.event),
+    context: shortcutContext(input.context),
+    chordState: input.chordState ?? initialChordState(),
+    onChordReset: input.onChordReset ?? (() => undefined),
+    ...(input.bindings ? { bindings: input.bindings } : {}),
+  });
+}
+
 function expectShortcutResolution(input: {
   event: Partial<KeyboardEvent>;
   context?: Partial<KeyboardShortcutContext>;
@@ -39,29 +66,33 @@ function expectShortcutResolution(input: {
   preventDefault?: boolean;
   stopPropagation?: boolean;
 }) {
-  const match = resolveKeyboardShortcut({
-    event: keyboardEvent(input.event),
-    context: shortcutContext(input.context),
+  const result = resolveShortcut({
+    event: input.event,
+    context: input.context,
   });
 
-  expect(match?.action).toBe(input.action);
+  expect(result.match?.action).toBe(input.action);
   if ("payload" in input) {
-    expect(match?.payload).toEqual(input.payload);
+    expect(result.match?.payload).toEqual(input.payload);
   }
-  expect(match?.preventDefault).toBe(input.preventDefault ?? true);
-  expect(match?.stopPropagation).toBe(input.stopPropagation ?? true);
+  expect(result.match?.preventDefault).toBe(input.preventDefault ?? true);
+  expect(result.match?.stopPropagation).toBe(input.stopPropagation ?? true);
+  expect(result.preventDefault).toBe(false);
+  expect(result.nextChordState).toEqual(initialChordState());
 }
 
 function expectNoShortcutResolution(input: {
   event: Partial<KeyboardEvent>;
   context?: Partial<KeyboardShortcutContext>;
 }) {
-  const match = resolveKeyboardShortcut({
-    event: keyboardEvent(input.event),
-    context: shortcutContext(input.context),
+  const result = resolveShortcut({
+    event: input.event,
+    context: input.context,
   });
 
-  expect(match).toBeNull();
+  expect(result.match).toBeNull();
+  expect(result.preventDefault).toBe(false);
+  expect(result.nextChordState).toEqual(initialChordState());
 }
 
 type MatchingShortcutCase = {
@@ -338,6 +369,66 @@ describe("keyboard-shortcuts", () => {
   it.each(nonMatchingCases)("$name", ({ event, context }) => {
     expectNoShortcutResolution({ event, context });
   });
+
+  it("prefers advancing chord candidates over single-combo matches on the same prefix", () => {
+    const bindings = buildEffectiveBindings({
+      "workspace-terminal-new-ctrl-shift-t-non-mac": "Ctrl+W S",
+    });
+    const chordBindingIndex = bindings.findIndex(
+      (binding) => binding.id === "workspace-terminal-new-ctrl-shift-t-non-mac",
+    );
+    expect(chordBindingIndex).toBeGreaterThan(-1);
+
+    const firstResult = resolveShortcut({
+      event: { key: "w", code: "KeyW", ctrlKey: true },
+      context: { isMac: false, isDesktop: true },
+      bindings,
+    });
+
+    expect(firstResult.match).toBeNull();
+    expect(firstResult.preventDefault).toBe(true);
+    expect(firstResult.nextChordState.step).toBe(1);
+    expect(firstResult.nextChordState.candidateIndices).toEqual([chordBindingIndex]);
+
+    const secondResult = resolveShortcut({
+      event: { key: "s", code: "KeyS" },
+      context: { isMac: false, isDesktop: true },
+      chordState: firstResult.nextChordState,
+      bindings,
+    });
+
+    expect(secondResult.match?.action).toBe("workspace.terminal.new");
+    expect(secondResult.match?.payload).toBeNull();
+    expect(secondResult.match?.preventDefault).toBe(true);
+    expect(secondResult.match?.stopPropagation).toBe(true);
+    expect(secondResult.preventDefault).toBe(false);
+    expect(secondResult.nextChordState).toEqual(initialChordState());
+  });
+
+  it("schedules a chord reset timeout for advancing candidates", () => {
+    vi.useFakeTimers();
+
+    const bindings = buildEffectiveBindings({
+      "workspace-terminal-new-ctrl-shift-t-non-mac": "Ctrl+W S",
+    });
+    const onChordReset = vi.fn();
+
+    const result = resolveShortcut({
+      event: { key: "w", code: "KeyW", ctrlKey: true },
+      context: { isMac: false, isDesktop: true },
+      onChordReset,
+      bindings,
+    });
+
+    expect(result.match).toBeNull();
+    expect(result.preventDefault).toBe(true);
+    expect(result.nextChordState.timeoutId).not.toBeNull();
+
+    vi.advanceTimersByTime(1500);
+
+    expect(onChordReset).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+  });
 });
 
 describe("keyboard-shortcut help sections", () => {

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

@@ -5,7 +5,7 @@ import type {
   KeyboardShortcutPayload,
   MessageInputKeyboardActionKind,
 } from "@/keyboard/actions";
-import { type KeyCombo, parseShortcutString } from "@/keyboard/shortcut-string";
+import { type KeyCombo, parseChordString } from "@/keyboard/shortcut-string";
 
 export type { KeyCombo } from "@/keyboard/shortcut-string";
 
@@ -33,8 +33,15 @@ export type KeyboardShortcutHelpRow = {
   note?: string;
 };
 
+export type ShortcutSectionId =
+  | "navigation"
+  | "tabs-panes"
+  | "projects"
+  | "panels"
+  | "agent-input";
+
 export type KeyboardShortcutHelpSection = {
-  id: "global" | "agent-input";
+  id: ShortcutSectionId;
   title: string;
   rows: KeyboardShortcutHelpRow[];
 };
@@ -69,7 +76,7 @@ type ShortcutPayloadDef =
 
 interface ShortcutHelp {
   id: string;
-  section: "global" | "agent-input";
+  section: ShortcutSectionId;
   label: string;
   keys: ShortcutKey[];
   note?: string;
@@ -88,13 +95,22 @@ interface ShortcutBinding {
 }
 
 export interface ParsedShortcutBinding extends ShortcutBinding {
-  parsedCombo: KeyCombo;
+  parsedChord: KeyCombo[];
+}
+
+export interface ChordState {
+  candidateIndices: number[];
+  step: number;
+  timeoutId: ReturnType<typeof setTimeout> | null;
 }
 
 // --- Constants ---
 
-const SHORTCUT_HELP_SECTION_TITLES: Record<KeyboardShortcutHelpSection["id"], string> = {
-  global: "Global",
+const SHORTCUT_HELP_SECTION_TITLES: Record<ShortcutSectionId, string> = {
+  navigation: "Navigation",
+  "tabs-panes": "Tabs & Panes",
+  projects: "Projects",
+  panels: "Panels",
   "agent-input": "Agent Input",
 };
 
@@ -109,7 +125,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: true },
     help: {
       id: "new-agent",
-      section: "global",
+      section: "projects",
       label: "Open project",
       keys: ["mod", "shift", "O"],
     },
@@ -121,12 +137,64 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: false, terminal: false },
     help: {
       id: "new-agent",
-      section: "global",
+      section: "projects",
       label: "Open project",
       keys: ["mod", "shift", "O"],
     },
   },
 
+  // --- New worktree ---
+  {
+    id: "worktree-new-cmd-o-mac",
+    action: "worktree.new",
+    combo: "Cmd+O",
+    when: { mac: true, commandCenter: false },
+    help: {
+      id: "new-worktree",
+      section: "projects",
+      label: "New worktree",
+      keys: ["mod", "O"],
+    },
+  },
+  {
+    id: "worktree-new-ctrl-o-non-mac",
+    action: "worktree.new",
+    combo: "Ctrl+O",
+    when: { mac: false, commandCenter: false, terminal: false },
+    help: {
+      id: "new-worktree",
+      section: "projects",
+      label: "New worktree",
+      keys: ["mod", "O"],
+    },
+  },
+
+  // --- Archive worktree ---
+  {
+    id: "worktree-archive-cmd-shift-backspace-mac",
+    action: "worktree.archive",
+    combo: "Cmd+Shift+Backspace",
+    when: { mac: true, commandCenter: false },
+    help: {
+      id: "archive-worktree",
+      section: "projects",
+      label: "Archive worktree",
+      keys: ["mod", "shift", "Backspace"],
+    },
+  },
+  {
+    id: "worktree-archive-ctrl-shift-backspace-non-mac",
+    action: "worktree.archive",
+    combo: "Ctrl+Shift+Backspace",
+    when: { mac: false, commandCenter: false, terminal: false },
+    help: {
+      id: "archive-worktree",
+      section: "projects",
+      label: "Archive worktree",
+      keys: ["mod", "shift", "Backspace"],
+    },
+  },
+
   // --- Tab management ---
   {
     id: "workspace-tab-new-cmd-t-mac",
@@ -135,7 +203,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-tab-new",
-      section: "global",
+      section: "tabs-panes",
       label: "New agent tab",
       keys: ["mod", "T"],
     },
@@ -147,7 +215,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: false, commandCenter: false, terminal: false },
     help: {
       id: "workspace-tab-new",
-      section: "global",
+      section: "tabs-panes",
       label: "New agent tab",
       keys: ["mod", "T"],
     },
@@ -159,7 +227,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: true, desktop: true, commandCenter: false },
     help: {
       id: "workspace-tab-close-current",
-      section: "global",
+      section: "tabs-panes",
       label: "Close current tab",
       keys: ["meta", "W"],
     },
@@ -171,7 +239,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: false, desktop: true, commandCenter: false, terminal: false },
     help: {
       id: "workspace-tab-close-current",
-      section: "global",
+      section: "tabs-panes",
       label: "Close current tab",
       keys: ["ctrl", "W"],
     },
@@ -183,7 +251,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { desktop: false, commandCenter: false },
     help: {
       id: "workspace-tab-close-current",
-      section: "global",
+      section: "tabs-panes",
       label: "Close current tab",
       keys: ["alt", "shift", "W"],
     },
@@ -198,7 +266,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "index" },
     help: {
       id: "workspace-jump-index",
-      section: "global",
+      section: "navigation",
       label: "Jump to workspace",
       keys: ["mod", "1-9"],
     },
@@ -211,7 +279,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "index" },
     help: {
       id: "workspace-jump-index",
-      section: "global",
+      section: "navigation",
       label: "Jump to workspace",
       keys: ["mod", "1-9"],
     },
@@ -224,7 +292,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "index" },
     help: {
       id: "workspace-jump-index",
-      section: "global",
+      section: "navigation",
       label: "Jump to workspace",
       keys: ["alt", "1-9"],
     },
@@ -239,7 +307,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "index" },
     help: {
       id: "workspace-tab-jump-index",
-      section: "global",
+      section: "navigation",
       label: "Jump to tab",
       keys: ["alt", "1-9"],
     },
@@ -252,7 +320,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "index" },
     help: {
       id: "workspace-tab-jump-index",
-      section: "global",
+      section: "navigation",
       label: "Jump to tab",
       keys: ["alt", "shift", "1-9"],
     },
@@ -267,7 +335,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: -1 },
     help: {
       id: "workspace-prev",
-      section: "global",
+      section: "navigation",
       label: "Previous workspace",
       keys: ["mod", "["],
     },
@@ -280,7 +348,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: -1 },
     help: {
       id: "workspace-prev",
-      section: "global",
+      section: "navigation",
       label: "Previous workspace",
       keys: ["mod", "["],
     },
@@ -293,7 +361,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: 1 },
     help: {
       id: "workspace-next",
-      section: "global",
+      section: "navigation",
       label: "Next workspace",
       keys: ["mod", "]"],
     },
@@ -306,7 +374,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: 1 },
     help: {
       id: "workspace-next",
-      section: "global",
+      section: "navigation",
       label: "Next workspace",
       keys: ["mod", "]"],
     },
@@ -319,7 +387,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: -1 },
     help: {
       id: "workspace-prev",
-      section: "global",
+      section: "navigation",
       label: "Previous workspace",
       keys: ["alt", "["],
     },
@@ -332,7 +400,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: 1 },
     help: {
       id: "workspace-next",
-      section: "global",
+      section: "navigation",
       label: "Next workspace",
       keys: ["alt", "]"],
     },
@@ -347,7 +415,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: -1 },
     help: {
       id: "workspace-tab-prev",
-      section: "global",
+      section: "navigation",
       label: "Previous tab",
       keys: ["alt", "shift", "["],
     },
@@ -360,7 +428,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     payload: { type: "delta", delta: 1 },
     help: {
       id: "workspace-tab-next",
-      section: "global",
+      section: "navigation",
       label: "Next tab",
       keys: ["alt", "shift", "]"],
     },
@@ -371,10 +439,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-split-right-cmd-backslash",
     action: "workspace.pane.split.right",
     combo: "Cmd+\\",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-split-right",
-      section: "global",
+      section: "tabs-panes",
       label: "Split pane right",
       keys: ["mod", "\\"],
     },
@@ -383,10 +451,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-split-down-cmd-shift-backslash",
     action: "workspace.pane.split.down",
     combo: "Cmd+Shift+\\",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-split-down",
-      section: "global",
+      section: "tabs-panes",
       label: "Split pane down",
       keys: ["mod", "shift", "\\"],
     },
@@ -395,10 +463,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-focus-left-cmd-shift-left",
     action: "workspace.pane.focus.left",
     combo: "Cmd+Shift+ArrowLeft",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-focus-left",
-      section: "global",
+      section: "tabs-panes",
       label: "Focus pane left",
       keys: ["mod", "shift", "Left"],
     },
@@ -407,10 +475,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-focus-right-cmd-shift-right",
     action: "workspace.pane.focus.right",
     combo: "Cmd+Shift+ArrowRight",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-focus-right",
-      section: "global",
+      section: "tabs-panes",
       label: "Focus pane right",
       keys: ["mod", "shift", "Right"],
     },
@@ -419,10 +487,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-focus-up-cmd-shift-up",
     action: "workspace.pane.focus.up",
     combo: "Cmd+Shift+ArrowUp",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-focus-up",
-      section: "global",
+      section: "tabs-panes",
       label: "Focus pane up",
       keys: ["mod", "shift", "Up"],
     },
@@ -431,10 +499,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-focus-down-cmd-shift-down",
     action: "workspace.pane.focus.down",
     combo: "Cmd+Shift+ArrowDown",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-focus-down",
-      section: "global",
+      section: "tabs-panes",
       label: "Focus pane down",
       keys: ["mod", "shift", "Down"],
     },
@@ -443,10 +511,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-move-tab-left-cmd-shift-alt-left",
     action: "workspace.pane.move-tab.left",
     combo: "Cmd+Alt+Shift+ArrowLeft",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-left",
-      section: "global",
+      section: "tabs-panes",
       label: "Move tab left",
       keys: ["mod", "shift", "alt", "Left"],
     },
@@ -455,10 +523,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-move-tab-right-cmd-shift-alt-right",
     action: "workspace.pane.move-tab.right",
     combo: "Cmd+Alt+Shift+ArrowRight",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-right",
-      section: "global",
+      section: "tabs-panes",
       label: "Move tab right",
       keys: ["mod", "shift", "alt", "Right"],
     },
@@ -467,10 +535,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-move-tab-up-cmd-shift-alt-up",
     action: "workspace.pane.move-tab.up",
     combo: "Cmd+Alt+Shift+ArrowUp",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-up",
-      section: "global",
+      section: "tabs-panes",
       label: "Move tab up",
       keys: ["mod", "shift", "alt", "Up"],
     },
@@ -479,10 +547,10 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-move-tab-down-cmd-shift-alt-down",
     action: "workspace.pane.move-tab.down",
     combo: "Cmd+Alt+Shift+ArrowDown",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-move-tab-down",
-      section: "global",
+      section: "tabs-panes",
       label: "Move tab down",
       keys: ["mod", "shift", "alt", "Down"],
     },
@@ -491,15 +559,41 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     id: "workspace-pane-close-cmd-shift-w",
     action: "workspace.pane.close",
     combo: "Cmd+Shift+W",
-    when: { mac: true, terminal: false, commandCenter: false },
+    when: { mac: true, commandCenter: false },
     help: {
       id: "workspace-pane-close",
-      section: "global",
+      section: "tabs-panes",
       label: "Close pane",
       keys: ["mod", "shift", "W"],
     },
   },
 
+  // --- New terminal ---
+  {
+    id: "workspace-terminal-new-cmd-shift-t-mac",
+    action: "workspace.terminal.new",
+    combo: "Cmd+Shift+T",
+    when: { mac: true, commandCenter: false },
+    help: {
+      id: "workspace-terminal-new",
+      section: "panels",
+      label: "New terminal",
+      keys: ["mod", "shift", "T"],
+    },
+  },
+  {
+    id: "workspace-terminal-new-ctrl-shift-t-non-mac",
+    action: "workspace.terminal.new",
+    combo: "Ctrl+Shift+T",
+    when: { mac: false, commandCenter: false, terminal: false },
+    help: {
+      id: "workspace-terminal-new",
+      section: "panels",
+      label: "New terminal",
+      keys: ["mod", "shift", "T"],
+    },
+  },
+
   // --- Command center ---
   {
     id: "command-center-toggle-cmd-k-mac",
@@ -508,7 +602,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: true },
     help: {
       id: "toggle-command-center",
-      section: "global",
+      section: "panels",
       label: "Toggle command center",
       keys: ["mod", "K"],
     },
@@ -520,7 +614,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: false, terminal: false },
     help: {
       id: "toggle-command-center",
-      section: "global",
+      section: "panels",
       label: "Toggle command center",
       keys: ["mod", "K"],
     },
@@ -535,7 +629,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { focusScope: "other" },
     help: {
       id: "show-shortcuts",
-      section: "global",
+      section: "panels",
       label: "Show keyboard shortcuts",
       keys: ["?"],
       note: "Available when focus is not in a text field or terminal.",
@@ -550,27 +644,21 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: true },
     help: {
       id: "toggle-left-sidebar",
-      section: "global",
+      section: "panels",
       label: "Toggle left sidebar",
       keys: ["mod", "B"],
     },
   },
-  {
-    id: "sidebar-toggle-left-cmd-period-mac",
-    action: "sidebar.toggle.left",
-    combo: "Cmd+.",
-    when: { mac: true, commandCenter: false },
-  },
   {
     id: "sidebar-toggle-left-ctrl-period-non-mac",
     action: "sidebar.toggle.left",
-    combo: "Ctrl+.",
+    combo: "Ctrl+B",
     when: { mac: false, commandCenter: false, terminal: false },
     help: {
       id: "toggle-left-sidebar",
-      section: "global",
+      section: "panels",
       label: "Toggle left sidebar",
-      keys: ["mod", "."],
+      keys: ["mod", "B"],
     },
   },
   {
@@ -580,7 +668,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: true, hasSelectedAgent: true, commandCenter: false },
     help: {
       id: "toggle-right-sidebar",
-      section: "global",
+      section: "panels",
       label: "Toggle right sidebar",
       keys: ["mod", "E"],
     },
@@ -592,7 +680,7 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { mac: false, hasSelectedAgent: true, commandCenter: false, terminal: false },
     help: {
       id: "toggle-right-sidebar",
-      section: "global",
+      section: "panels",
       label: "Toggle right sidebar",
       keys: ["mod", "E"],
     },
@@ -604,6 +692,58 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
     when: { hasSelectedAgent: true, commandCenter: false },
   },
 
+  // --- Toggle both sidebars ---
+  {
+    id: "sidebar-toggle-both-cmd-period-mac",
+    action: "sidebar.toggle.both",
+    combo: "Cmd+.",
+    when: { mac: true, commandCenter: false },
+    help: {
+      id: "toggle-both-sidebars",
+      section: "panels",
+      label: "Toggle both sidebars",
+      keys: ["mod", "."],
+    },
+  },
+  {
+    id: "sidebar-toggle-both-ctrl-period-non-mac",
+    action: "sidebar.toggle.both",
+    combo: "Ctrl+.",
+    when: { mac: false, commandCenter: false, terminal: false },
+    help: {
+      id: "toggle-both-sidebars",
+      section: "panels",
+      label: "Toggle both sidebars",
+      keys: ["mod", "."],
+    },
+  },
+
+  // --- Focus mode ---
+  {
+    id: "view-toggle-focus-cmd-shift-f-mac",
+    action: "view.toggle.focus",
+    combo: "Cmd+Shift+F",
+    when: { mac: true, hasSelectedAgent: true, commandCenter: false },
+    help: {
+      id: "toggle-focus",
+      section: "panels",
+      label: "Toggle focus mode",
+      keys: ["mod", "shift", "F"],
+    },
+  },
+  {
+    id: "view-toggle-focus-ctrl-shift-f-non-mac",
+    action: "view.toggle.focus",
+    combo: "Ctrl+Shift+F",
+    when: { mac: false, hasSelectedAgent: true, commandCenter: false, terminal: false },
+    help: {
+      id: "toggle-focus",
+      section: "panels",
+      label: "Toggle focus mode",
+      keys: ["mod", "shift", "F"],
+    },
+  },
+
   // --- Message input ---
   {
     id: "message-input-voice-toggle-cmd-shift-d-mac",
@@ -674,6 +814,52 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
       keys: ["Esc"],
     },
   },
+  {
+    id: "message-input-send-enter",
+    action: "message-input.action",
+    combo: "Enter",
+    when: { focusScope: "message-input", commandCenter: false },
+    payload: { type: "message-input", kind: "send" },
+    preventDefault: false,
+    stopPropagation: false,
+    help: {
+      id: "message-input-send",
+      section: "agent-input",
+      label: "Send message",
+      keys: ["Enter"],
+    },
+  },
+  {
+    id: "message-input-queue-cmd-enter-mac",
+    action: "message-input.action",
+    combo: "Cmd+Enter",
+    when: { mac: true, focusScope: "message-input", commandCenter: false },
+    payload: { type: "message-input", kind: "queue" },
+    preventDefault: false,
+    stopPropagation: false,
+    help: {
+      id: "message-input-queue",
+      section: "agent-input",
+      label: "Queue message",
+      keys: ["mod", "Enter"],
+    },
+  },
+  {
+    id: "message-input-queue-ctrl-enter-non-mac",
+    action: "message-input.action",
+    combo: "Ctrl+Enter",
+    when: { mac: false, focusScope: "message-input", commandCenter: false },
+    payload: { type: "message-input", kind: "queue" },
+    preventDefault: false,
+    stopPropagation: false,
+    help: {
+      id: "message-input-queue",
+      section: "agent-input",
+      label: "Queue message",
+      keys: ["mod", "Enter"],
+    },
+  },
+
   {
     id: "message-input-voice-mute-toggle",
     action: "message-input.action",
@@ -693,11 +879,12 @@ const SHORTCUT_BINDINGS: readonly ShortcutBinding[] = [
 // --- Parse bindings at module load ---
 
 function parseBinding(binding: ShortcutBinding): ParsedShortcutBinding {
-  const parsedCombo = parseShortcutString(binding.combo);
-  if (binding.repeat === false) {
-    parsedCombo.repeat = false;
+  const parsedChord = parseChordString(binding.combo);
+  const lastCombo = parsedChord.at(-1);
+  if (binding.repeat === false && lastCombo) {
+    lastCombo.repeat = false;
   }
-  return { ...binding, parsedCombo };
+  return { ...binding, parsedChord };
 }
 
 export const DEFAULT_BINDINGS: readonly ParsedShortcutBinding[] =
@@ -711,16 +898,17 @@ export function buildEffectiveBindings(
     if (override === undefined) {
       return binding;
     }
-    let parsedCombo: KeyCombo;
+    let parsedChord: KeyCombo[];
     try {
-      parsedCombo = parseShortcutString(override);
+      parsedChord = parseChordString(override);
     } catch {
       return binding;
     }
-    if (binding.repeat === false) {
-      parsedCombo.repeat = false;
+    const lastCombo = parsedChord.at(-1);
+    if (binding.repeat === false && lastCombo) {
+      lastCombo.repeat = false;
     }
-    return { ...binding, combo: override, parsedCombo };
+    return { ...binding, combo: override, parsedChord };
   });
 }
 
@@ -797,6 +985,27 @@ function resolvePayload(
   }
 }
 
+const CHORD_TIMEOUT_MS = 1500;
+
+function clearChordTimeout(timeoutId: ReturnType<typeof setTimeout> | null): void {
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId);
+  }
+}
+
+function createChordTimeout(onChordReset: () => void): ReturnType<typeof setTimeout> {
+  return setTimeout(onChordReset, CHORD_TIMEOUT_MS);
+}
+
+function resetChordState(input: ChordState): ChordState {
+  clearChordTimeout(input.timeoutId);
+  return {
+    candidateIndices: [],
+    step: 0,
+    timeoutId: null,
+  };
+}
+
 function helpMatchesPlatform(
   when: ShortcutWhen | undefined,
   context: KeyboardShortcutPlatformContext,
@@ -811,24 +1020,131 @@ function helpMatchesPlatform(
 export function resolveKeyboardShortcut(input: {
   event: KeyboardEvent;
   context: KeyboardShortcutContext;
+  chordState: ChordState;
+  onChordReset: () => void;
   bindings?: readonly ParsedShortcutBinding[];
-}): KeyboardShortcutMatch | null {
-  const { event, context, bindings = DEFAULT_BINDINGS } = input;
-  for (const binding of bindings) {
-    if (!matchesCombo(binding.parsedCombo, event, context.isMac)) {
+}): {
+  match: KeyboardShortcutMatch | null;
+  nextChordState: ChordState;
+  preventDefault: boolean;
+};
+export function resolveKeyboardShortcut(input: {
+  event: KeyboardEvent;
+  context: KeyboardShortcutContext;
+  chordState: ChordState;
+  onChordReset: () => void;
+  bindings?: readonly ParsedShortcutBinding[];
+}): {
+  match: KeyboardShortcutMatch | null;
+  nextChordState: ChordState;
+  preventDefault: boolean;
+} {
+  const { event, context, chordState, onChordReset, bindings = DEFAULT_BINDINGS } = input;
+
+  if (chordState.step === 0) {
+    const advancingCandidateIndices: number[] = [];
+    let singleComboMatch: KeyboardShortcutMatch | null = null;
+
+    for (const [index, binding] of bindings.entries()) {
+      const firstCombo = binding.parsedChord[0];
+      if (!firstCombo) {
+        continue;
+      }
+      if (!matchesCombo(firstCombo, event, context.isMac)) {
+        continue;
+      }
+      if (!matchesWhen(binding.when, context)) {
+        continue;
+      }
+      if (binding.parsedChord.length > 1) {
+        advancingCandidateIndices.push(index);
+        continue;
+      }
+      if (!singleComboMatch) {
+        singleComboMatch = {
+          action: binding.action,
+          payload: resolvePayload(binding.payload, event),
+          preventDefault: binding.preventDefault ?? true,
+          stopPropagation: binding.stopPropagation ?? true,
+        };
+      }
+    }
+
+    if (advancingCandidateIndices.length > 0) {
+      return {
+        match: null,
+        nextChordState: {
+          candidateIndices: advancingCandidateIndices,
+          step: 1,
+          timeoutId: createChordTimeout(onChordReset),
+        },
+        preventDefault: true,
+      };
+    }
+
+    return {
+      match: singleComboMatch,
+      nextChordState: resetChordState(chordState),
+      preventDefault: false,
+    };
+  }
+
+  const matchingCandidateIndices: number[] = [];
+  let completedMatch: KeyboardShortcutMatch | null = null;
+
+  for (const index of chordState.candidateIndices) {
+    const binding = bindings[index];
+    if (!binding) {
+      continue;
+    }
+    const combo = binding.parsedChord[chordState.step];
+    if (!combo) {
+      continue;
+    }
+    if (!matchesCombo(combo, event, context.isMac)) {
       continue;
     }
     if (!matchesWhen(binding.when, context)) {
       continue;
     }
+    if (chordState.step + 1 === binding.parsedChord.length) {
+      completedMatch = {
+        action: binding.action,
+        payload: resolvePayload(binding.payload, event),
+        preventDefault: binding.preventDefault ?? true,
+        stopPropagation: binding.stopPropagation ?? true,
+      };
+      break;
+    }
+    matchingCandidateIndices.push(index);
+  }
+
+  if (completedMatch) {
     return {
-      action: binding.action,
-      payload: resolvePayload(binding.payload, event),
-      preventDefault: binding.preventDefault ?? true,
-      stopPropagation: binding.stopPropagation ?? true,
+      match: completedMatch,
+      nextChordState: resetChordState(chordState),
+      preventDefault: false,
     };
   }
-  return null;
+
+  if (matchingCandidateIndices.length > 0) {
+    clearChordTimeout(chordState.timeoutId);
+    return {
+      match: null,
+      nextChordState: {
+        candidateIndices: matchingCandidateIndices,
+        step: chordState.step + 1,
+        timeoutId: createChordTimeout(onChordReset),
+      },
+      preventDefault: true,
+    };
+  }
+
+  return {
+    match: null,
+    nextChordState: resetChordState(chordState),
+    preventDefault: false,
+  };
 }
 
 export function getBindingIdForAction(
@@ -868,8 +1184,11 @@ export function buildKeyboardShortcutHelpSections(
   bindings: readonly ParsedShortcutBinding[] = DEFAULT_BINDINGS,
 ): KeyboardShortcutHelpSection[] {
   const seenRows = new Set<string>();
-  const rowsBySection = new Map<KeyboardShortcutHelpSection["id"], KeyboardShortcutHelpRow[]>([
-    ["global", []],
+  const rowsBySection = new Map<ShortcutSectionId, KeyboardShortcutHelpRow[]>([
+    ["navigation", []],
+    ["tabs-panes", []],
+    ["projects", []],
+    ["panels", []],
     ["agent-input", []],
   ]);
 
@@ -899,7 +1218,7 @@ export function buildKeyboardShortcutHelpSections(
     });
   }
 
-  const sectionOrder: KeyboardShortcutHelpSection["id"][] = ["global", "agent-input"];
+  const sectionOrder: ShortcutSectionId[] = ["navigation", "tabs-panes", "projects", "panels", "agent-input"];
 
   return sectionOrder.flatMap((sectionId) => {
     const rows = rowsBySection.get(sectionId) ?? [];

packages/app/src/keyboard/shortcut-string.ts

@@ -36,6 +36,8 @@ KEY_MAP["`"] = { code: "Backquote", key: "`" };
 KEY_MAP["/"] = { code: "Slash" };
 KEY_MAP["?"] = { code: "Slash", key: "?" };
 KEY_MAP["Space"] = { code: "Space", key: " " };
+KEY_MAP["Enter"] = { code: "Enter", key: "Enter" };
+KEY_MAP["Backspace"] = { code: "Backspace" };
 KEY_MAP["Escape"] = { code: "Escape" };
 KEY_MAP["ArrowLeft"] = { code: "ArrowLeft" };
 KEY_MAP["ArrowRight"] = { code: "ArrowRight" };
@@ -101,6 +103,10 @@ export function parseShortcutString(s: string): KeyCombo {
   return combo;
 }
 
+export function parseChordString(s: string): KeyCombo[] {
+  return s.split(" ").map(parseShortcutString);
+}
+
 export function keyComboToString(combo: KeyCombo): string {
   const parts: string[] = [];
 
@@ -120,6 +126,10 @@ export function keyComboToString(combo: KeyCombo): string {
   return parts.join("+");
 }
 
+export function chordToString(chord: KeyCombo[]): string {
+  return chord.map(keyComboToString).join(" ");
+}
+
 const MODIFIER_CODES = new Set([
   "MetaLeft",
   "MetaRight",
@@ -156,6 +166,10 @@ export function comboStringToShortcutKeys(comboString: string): ShortcutKey[] {
   return keys;
 }
 
+export function chordStringToShortcutKeys(s: string): ShortcutKey[][] {
+  return s.split(" ").map(comboStringToShortcutKeys);
+}
+
 export function keyboardEventToComboString(event: KeyboardEvent): string | null {
   if (MODIFIER_CODES.has(event.code)) {
     return null;

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

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ActivityIndicator, Platform, Text, View } from "react-native";
 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";
@@ -16,12 +18,14 @@ import { useAgentAttentionClear } from "@/hooks/use-agent-attention-clear";
 import { useAgentInitialization } from "@/hooks/use-agent-initialization";
 import {
   useAgentScreenStateMachine,
+  type AgentScreenAgent,
   type AgentScreenMissingState,
 } from "@/hooks/use-agent-screen-state-machine";
 import { useArchiveAgent } from "@/hooks/use-archive-agent";
 import { useDelayedHistoryRefreshToast } from "@/hooks/use-delayed-history-refresh-toast";
 import { useAgentInputDraft } from "@/hooks/use-agent-input-draft";
 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 {
@@ -77,11 +81,21 @@ function useAgentPanelDescriptor(
   target: { kind: "agent"; agentId: string },
   context: { serverId: string },
 ): PanelDescriptor {
-  const agent = useSessionStore(
-    (state) => state.sessions[context.serverId]?.agents?.get(target.agentId) ?? null,
+  const descriptorState = useSessionStore(
+    useShallow((state) => {
+      const agent = state.sessions[context.serverId]?.agents?.get(target.agentId) ?? null;
+      return {
+        provider: agent?.provider ?? "codex",
+        title: agent?.title ?? null,
+        status: agent?.status ?? null,
+        pendingPermissionCount: agent?.pendingPermissions.length ?? 0,
+        requiresAttention: agent?.requiresAttention ?? false,
+        attentionReason: agent?.attentionReason ?? null,
+      };
+    }),
   );
-  const provider = agent?.provider ?? "codex";
-  const label = resolveWorkspaceAgentTabLabel(agent?.title);
+  const provider = descriptorState.provider;
+  const label = resolveWorkspaceAgentTabLabel(descriptorState.title);
   const icon = provider === "claude" ? ClaudeIcon : provider === "codex" ? CodexIcon : Bot;
 
   return {
@@ -89,12 +103,12 @@ function useAgentPanelDescriptor(
     subtitle: `${formatProviderLabel(provider)} agent`,
     titleState: label ? "ready" : "loading",
     icon,
-    statusBucket: agent
+    statusBucket: descriptorState.status
       ? deriveSidebarStateBucket({
-          status: agent.status,
-          pendingPermissionCount: agent.pendingPermissions.length,
-          requiresAttention: agent.requiresAttention,
-          attentionReason: agent.attentionReason,
+          status: descriptorState.status,
+          pendingPermissionCount: descriptorState.pendingPermissionCount,
+          requiresAttention: descriptorState.requiresAttention,
+          attentionReason: descriptorState.attentionReason,
         })
       : null,
   };
@@ -103,12 +117,13 @@ function useAgentPanelDescriptor(
 function AgentPanel() {
   const { serverId, target, isPaneFocused, openFileInWorkspace } = usePaneContext();
   invariant(target.kind === "agent", "AgentPanel requires agent target");
-  const handleOpenWorkspaceFile = useCallback(
-    (input: { filePath: string }) => {
-      openFileInWorkspace(input.filePath);
-    },
-    [openFileInWorkspace],
-  );
+
+  function openWorkspaceFile(input: { filePath: string }) {
+    openFileInWorkspace(input.filePath);
+  }
+
+  const handleOpenWorkspaceFile = useStableEvent(openWorkspaceFile);
+
   return (
     <AgentPanelContent
       serverId={serverId}
@@ -241,8 +256,25 @@ function AgentPanelBody({
     addImagesRef.current = addImages;
   }, []);
 
-  const agent = useSessionStore((state) =>
-    agentId ? state.sessions[serverId]?.agents?.get(agentId) : undefined,
+  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,
+        status: agent?.status ?? null,
+        cwd: agent?.cwd ?? null,
+        archivedAt: agent?.archivedAt ?? null,
+        requiresAttention: agent?.requiresAttention ?? false,
+        attentionReason: agent?.attentionReason ?? null,
+      };
+    }),
+  );
+  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 streamItemsRaw = useSessionStore((state) =>
     agentId ? state.sessions[serverId]?.agentStreamTail?.get(agentId) : undefined,
@@ -316,52 +348,14 @@ function AgentPanelBody({
     agentId,
     client,
     isConnected,
-    requiresAttention: agent?.requiresAttention,
-    attentionReason: agent?.attentionReason,
+    requiresAttention: agentState.requiresAttention,
+    attentionReason: agentState.attentionReason,
     isScreenFocused: isPaneFocused,
   });
   useEffect(() => {
     clearOnAgentBlurRef.current = attentionController.clearOnAgentBlur;
   }, [attentionController.clearOnAgentBlur]);
 
-  // ---------------------------------------------------------------------------
-  // DEBUG: track which selector values change between renders
-  // ---------------------------------------------------------------------------
-  const debugPrevRef = useRef<Record<string, unknown>>({});
-  useEffect(() => {
-    const prev = debugPrevRef.current;
-    const curr: Record<string, unknown> = {
-      agent,
-      "agent?.status": agent?.status,
-      "agent?.cwd": agent?.cwd,
-      "agent?.updatedAt": agent?.updatedAt,
-      "agent?.requiresAttention": agent?.requiresAttention,
-      streamItemsRaw,
-      "streamItems.length": streamItems.length,
-      allPendingPermissions,
-      isInitializingFromMap,
-      historySyncGeneration,
-      hasAppliedAuthoritativeHistory,
-      agentHistorySyncGeneration,
-      hasSession,
-      isPaneFocused,
-      isConnected,
-    };
-    const changed: string[] = [];
-    for (const key of Object.keys(curr)) {
-      if (!Object.is(prev[key], curr[key])) {
-        changed.push(key);
-      }
-    }
-    if (changed.length > 0 && Object.keys(prev).length > 0) {
-      console.log("[AgentPanelBody] values changed:", changed.join(", "), {
-        changed: Object.fromEntries(changed.map((k) => [k, { prev: prev[k], curr: curr[k] }])),
-      });
-    }
-    debugPrevRef.current = curr;
-  });
-  // ---------------------------------------------------------------------------
-
   const { style: animatedKeyboardStyle } = useKeyboardShiftStyle({
     mode: "translate",
   });
@@ -486,49 +480,34 @@ function AgentPanelBody({
   }, [optimisticStreamItems, streamItems]);
 
   const shouldUseOptimisticStream = isPendingCreateForPanel && optimisticStreamItems.length > 0;
-  const authoritativeStatus = agent?.status;
+  const authoritativeStatus = agentState.status;
   const isAuthoritativeBootstrapping =
     authoritativeStatus === "initializing" || authoritativeStatus === "idle";
   const showPendingCreateSubmitLoading =
     isPendingCreateForPanel && (!authoritativeStatus || isAuthoritativeBootstrapping);
   const canFinalizePendingCreate = Boolean(authoritativeStatus) && !isAuthoritativeBootstrapping;
 
-  const placeholderAgent: Agent | null = useMemo(() => {
+  const agent: AgentScreenAgent | null =
+    agentState.serverId && agentState.id && agentState.status && agentState.cwd
+      ? {
+          serverId: agentState.serverId,
+          id: agentState.id,
+          status: agentState.status,
+          cwd: agentState.cwd,
+          projectPlacement,
+        }
+      : null;
+
+  const placeholderAgent: AgentScreenAgent | null = useMemo(() => {
     if (!shouldUseOptimisticStream || !agentId) {
       return null;
     }
-    const now = new Date();
     return {
       serverId,
       id: agentId,
-      provider: "claude",
       status: "running",
-      createdAt: now,
-      updatedAt: now,
-      lastUserMessageAt: now,
-      lastActivityAt: now,
-      capabilities: {
-        supportsStreaming: true,
-        supportsSessionPersistence: false,
-        supportsDynamicModes: false,
-        supportsMcpServers: false,
-        supportsReasoningStream: false,
-        supportsToolInvocations: false,
-      },
-      currentModeId: null,
-      availableModes: [],
-      pendingPermissions: [],
-      persistence: null,
-      runtimeInfo: {
-        provider: "claude",
-        sessionId: null,
-        model: null,
-        modeId: null,
-      },
-      title: "Agent",
       cwd: ".",
-      model: null,
-      labels: {},
+      projectPlacement: null,
     };
   }, [agentId, serverId, shouldUseOptimisticStream]);
 
@@ -640,7 +619,7 @@ function AgentPanelBody({
     if (!agentId) {
       return;
     }
-    if (agent || shouldUseOptimisticStream) {
+    if (agentState.id || shouldUseOptimisticStream) {
       if (missingAgentState.kind !== "idle") {
         setMissingAgentState({ kind: "idle" });
       }
@@ -715,7 +694,7 @@ function AgentPanelBody({
         setMissingAgentState({ kind: "error", message });
       });
   }, [
-    agent,
+    agentState.id,
     agentId,
     client,
     ensureAgentIsInitialized,
@@ -801,10 +780,11 @@ function AgentPanelBody({
             </ReanimatedAnimated.View>
           </View>
 
-          {agentId && !isArchivingCurrentAgent && !agent?.archivedAt ? (
+          {agentId && !isArchivingCurrentAgent && !agentState.archivedAt ? (
             <AgentInputArea
               agentId={agentId}
               serverId={serverId}
+              isInputActive={isPaneFocused}
               value={agentInputDraft.text}
               onChangeText={agentInputDraft.setText}
               images={agentInputDraft.images}
@@ -829,7 +809,7 @@ function AgentPanelBody({
                 streamViewRef.current?.scrollToBottom("message-sent");
               }}
             />
-          ) : agentId && agent?.archivedAt ? (
+          ) : agentId && agentState.archivedAt ? (
             <ArchivedAgentCallout serverId={serverId} agentId={agentId} />
           ) : null}
 

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

@@ -17,8 +17,15 @@ function useDraftPanelDescriptor() {
 }
 
 function DraftPanel() {
-  const { serverId, workspaceId, tabId, target, openFileInWorkspace, retargetCurrentTab } =
-    usePaneContext();
+  const {
+    serverId,
+    workspaceId,
+    tabId,
+    target,
+    isPaneFocused,
+    openFileInWorkspace,
+    retargetCurrentTab,
+  } = usePaneContext();
   invariant(target.kind === "draft", "DraftPanel requires draft target");
 
   return (
@@ -27,6 +34,7 @@ function DraftPanel() {
       workspaceId={workspaceId}
       tabId={tabId}
       draftId={target.draftId}
+      isPaneFocused={isPaneFocused}
       onOpenWorkspaceFile={({ filePath }) => {
         openFileInWorkspace(filePath);
       }}

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

@@ -49,7 +49,7 @@ function useTerminalPanelDescriptor(
 
 function TerminalPanel() {
   const isFocused = useIsFocused();
-  const { serverId, workspaceId, target, openTab } = usePaneContext();
+  const { serverId, workspaceId, target, isPaneFocused } = usePaneContext();
   invariant(target.kind === "terminal", "TerminalPanel requires terminal target");
 
   if (!isFocused) {
@@ -60,15 +60,8 @@ function TerminalPanel() {
     <TerminalPane
       serverId={serverId}
       cwd={workspaceId}
-      selectedTerminalId={target.terminalId}
-      onSelectedTerminalIdChange={(terminalId) => {
-        if (!terminalId) {
-          return;
-        }
-        openTab({ kind: "terminal", terminalId });
-      }}
-      hideHeader
-      manageTerminalDirectorySubscription={false}
+      terminalId={target.terminalId}
+      isPaneFocused={isPaneFocused}
     />
   );
 }

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

@@ -1069,7 +1069,8 @@ export class HostRuntimeController {
 }
 
 const REGISTRY_STORAGE_KEY = "@paseo:daemon-registry";
-const DEFAULT_LOCALHOST_ENDPOINT = "localhost:6767";
+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 E2E_STORAGE_KEY = "@paseo:e2e";

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

@@ -744,6 +744,20 @@ 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
@@ -756,18 +770,18 @@ function DraftAgentScreenContent({
       provider: selectedProvider,
       cwd,
       ...(modeOptions.length > 0 && selectedMode !== "" ? { modeId: selectedMode } : {}),
-      ...(selectedModel.trim() ? { model: selectedModel.trim() } : {}),
-      ...(selectedThinkingOptionId.trim()
-        ? { thinkingOptionId: selectedThinkingOptionId.trim() }
+      ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
+      ...(effectiveDraftThinkingOptionId
+        ? { thinkingOptionId: effectiveDraftThinkingOptionId }
         : {}),
     };
   }, [
+    effectiveDraftModelId,
+    effectiveDraftThinkingOptionId,
     isAttachWorktree,
     modeOptions.length,
     selectedMode,
-    selectedModel,
     selectedProvider,
-    selectedThinkingOptionId,
     selectedWorktreePath,
     workingDir,
   ]);
@@ -801,6 +815,12 @@ function DraftAgentScreenContent({
       if (gitBlockingError) {
         return gitBlockingError;
       }
+      if (isModelLoading) {
+        return "Model defaults are still loading";
+      }
+      if (!effectiveDraftModelId) {
+        return "No model is available for the selected provider";
+      }
       if (isAttachWorktree && !selectedWorktreePath) {
         return "Select a worktree to attach";
       }
@@ -832,8 +852,8 @@ function DraftAgentScreenContent({
         (isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : workingDir).trim() ||
         ".";
       const provider = selectedProvider;
-      const model = selectedModel.trim() || null;
-      const thinkingOptionId = selectedThinkingOptionId.trim() || null;
+      const model = effectiveDraftModelId || null;
+      const thinkingOptionId = effectiveDraftThinkingOptionId || null;
       const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : null;
 
       return {
@@ -869,14 +889,14 @@ function DraftAgentScreenContent({
         isAttachWorktree && selectedWorktreePath ? selectedWorktreePath : trimmedPath;
 
       const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;
-      const trimmedModel = selectedModel.trim();
-      const trimmedThinkingOptionId = selectedThinkingOptionId.trim();
       const config: AgentSessionConfig = {
         provider: selectedProvider,
         cwd: resolvedWorkingDir,
         ...(modeId ? { modeId } : {}),
-        ...(trimmedModel ? { model: trimmedModel } : {}),
-        ...(trimmedThinkingOptionId ? { thinkingOptionId: trimmedThinkingOptionId } : {}),
+        ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
+        ...(effectiveDraftThinkingOptionId
+          ? { thinkingOptionId: effectiveDraftThinkingOptionId }
+          : {}),
       };
 
       const effectiveBaseBranch = baseBranch.trim();
@@ -1199,6 +1219,7 @@ function DraftAgentScreenContent({
             <AgentInputArea
               agentId={draftAgentIdRef.current}
               serverId={selectedServerId ?? ""}
+              isInputActive={isFocused}
               onSubmitMessage={handleCreateFromInput}
               isSubmitLoading={isSubmitting}
               blurOnSubmit={true}

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

@@ -67,7 +67,7 @@ import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
 type SettingsSectionId =
   | "hosts"
   | "appearance"
-  | "keyboard-shortcuts"
+  | "shortcuts"
   | "diagnostics"
   | "about"
   | "permissions"
@@ -83,7 +83,7 @@ function getSettingsSections(context: { isDesktop: boolean }): SettingsSectionDe
   const sections: SettingsSectionDef[] = [
     { id: "hosts", label: "Hosts", icon: Server },
     { id: "appearance", label: "Appearance", icon: Palette },
-    { id: "keyboard-shortcuts", label: "Keyboard Shortcuts", icon: Keyboard },
+    { id: "shortcuts", label: "Shortcuts", icon: Keyboard },
     { id: "diagnostics", label: "Diagnostics", icon: Stethoscope },
     { id: "about", label: "About", icon: Info },
   ];
@@ -514,7 +514,7 @@ function SettingsSectionContent({
       return <HostsSection {...hostsProps} />;
     case "appearance":
       return <AppearanceSection {...appearanceProps} />;
-    case "keyboard-shortcuts":
+    case "shortcuts":
       return <KeyboardShortcutsSection />;
     case "diagnostics":
       return <DiagnosticsSection {...diagnosticsProps} />;

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

@@ -10,16 +10,31 @@ import {
   getBindingIdForAction,
   type KeyboardShortcutHelpRow,
 } from "@/keyboard/keyboard-shortcuts";
-import { comboStringToShortcutKeys, keyboardEventToComboString } from "@/keyboard/shortcut-string";
+import {
+  chordStringToShortcutKeys,
+  comboStringToShortcutKeys,
+  keyboardEventToComboString,
+} from "@/keyboard/shortcut-string";
+import { useKeyboardShortcutsStore } from "@/stores/keyboard-shortcuts-store";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 import { getIsDesktop } from "@/constants/layout";
 
+function ShortcutSequence({ chord }: { chord: string[] | null }) {
+  if (!chord || chord.length === 0) {
+    return <Text style={styles.capturingText}>Press shortcut...</Text>;
+  }
+
+  return <Shortcut chord={chord.map(comboStringToShortcutKeys)} />;
+}
+
 function ShortcutRow({
   row,
   bindingId,
   overrideCombo,
   isCapturing,
+  capturedCombos,
   onRebind,
+  onDone,
   onCancel,
   onReset,
 }: {
@@ -27,29 +42,38 @@ function ShortcutRow({
   bindingId: string | null;
   overrideCombo: string | undefined;
   isCapturing: boolean;
+  capturedCombos: string[];
   onRebind: () => void;
+  onDone: () => void;
   onCancel: () => void;
   onReset: () => void;
 }) {
-  const displayKeys = overrideCombo ? comboStringToShortcutKeys(overrideCombo) : row.keys;
+  const displayChord = overrideCombo ? chordStringToShortcutKeys(overrideCombo) : [row.keys];
 
   return (
     <View style={[styles.row, isCapturing && styles.rowCapturing]}>
       <Text style={styles.rowLabel}>{row.label}</Text>
       <View style={styles.rowActions}>
         {isCapturing ? (
-          <Text style={styles.capturingText}>Press shortcut...</Text>
+          <ShortcutSequence chord={capturedCombos} />
         ) : (
-          <Shortcut keys={displayKeys} />
+          <Shortcut chord={displayChord} />
         )}
         {bindingId !== null && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onPress={isCapturing ? onCancel : onRebind}
-          >
-            {isCapturing ? "Cancel" : "Rebind"}
-          </Button>
+          <>
+            {isCapturing && capturedCombos.length > 0 ? (
+              <Button variant="ghost" size="sm" onPress={onDone}>
+                Done
+              </Button>
+            ) : null}
+            <Button
+              variant="ghost"
+              size="sm"
+              onPress={isCapturing ? onCancel : onRebind}
+            >
+              {isCapturing ? "Cancel" : "Rebind"}
+            </Button>
+          </>
         )}
         {overrideCombo !== undefined && !isCapturing && (
           <Button variant="ghost" size="sm" onPress={onReset}>
@@ -63,51 +87,73 @@ function ShortcutRow({
 
 export function KeyboardShortcutsSection() {
   const [capturingBindingId, setCapturingBindingId] = useState<string | null>(null);
+  const [capturedCombos, setCapturedCombos] = useState<string[]>([]);
   const { overrides, hasOverrides, setOverride, removeOverride, resetAll } =
     useKeyboardShortcutOverrides();
+  const setCapturingShortcut = useKeyboardShortcutsStore((s) => s.setCapturingShortcut);
 
   const isMac = getShortcutOs() === "mac";
   const isDesktop = getIsDesktop();
   const sections = buildKeyboardShortcutHelpSections({ isMac, isDesktop });
 
+  function cancelCapture() {
+    setCapturedCombos([]);
+    setCapturingBindingId(null);
+    setCapturingShortcut(false);
+  }
+
+  function startCapture(bindingId: string) {
+    setCapturedCombos([]);
+    setCapturingBindingId(bindingId);
+    setCapturingShortcut(true);
+  }
+
+  function saveCapture() {
+    if (capturingBindingId === null || capturedCombos.length === 0) {
+      return;
+    }
+    void setOverride(capturingBindingId, capturedCombos.join(" "));
+    cancelCapture();
+  }
+
   useEffect(() => {
     if (Platform.OS !== "web") return;
     if (capturingBindingId === null) return;
 
-    const activeBindingId = capturingBindingId;
-
     function handleKeyDown(event: KeyboardEvent) {
-      const key = event.key ?? "";
-      if (key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        setCapturingBindingId(null);
-        return;
-      }
+      event.preventDefault();
+      event.stopPropagation();
 
-      if (key === "Alt" || key === "Control" || key === "Meta" || key === "Shift") {
+      const key = event.key ?? "";
+      if (key === "Backspace") {
+        setCapturedCombos((current) => (current.length > 0 ? current.slice(0, -1) : current));
         return;
       }
 
       const comboString = keyboardEventToComboString(event);
-      if (comboString === null) return;
+      if (comboString === null) {
+        return;
+      }
 
-      event.preventDefault();
-      event.stopPropagation();
-      void setOverride(activeBindingId, comboString);
-      setCapturingBindingId(null);
+      setCapturedCombos((current) => [...current, comboString]);
     }
 
     window.addEventListener("keydown", handleKeyDown, true);
     return () => {
       window.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [capturingBindingId, setOverride]);
+  }, [capturingBindingId]);
+
+  useEffect(() => {
+    return () => {
+      setCapturingShortcut(false);
+    };
+  }, [setCapturingShortcut]);
 
   if (Platform.OS !== "web") {
     return (
       <View style={settingsStyles.section}>
-        <Text style={settingsStyles.sectionTitle}>Keyboard Shortcuts</Text>
+        <Text style={settingsStyles.sectionTitle}>Shortcuts</Text>
         <View style={[settingsStyles.card, styles.mobileCard]}>
           <Text style={styles.mobileText}>
             Keyboard shortcuts are only available on desktop.
@@ -120,7 +166,7 @@ export function KeyboardShortcutsSection() {
   return (
     <View style={settingsStyles.section}>
       <View style={styles.sectionHeader}>
-        <Text style={settingsStyles.sectionTitle}>Keyboard Shortcuts</Text>
+        <Text style={settingsStyles.sectionTitle}>Shortcuts</Text>
         {hasOverrides && (
           <Button variant="ghost" size="sm" onPress={() => void resetAll()}>
             Reset all
@@ -144,8 +190,14 @@ export function KeyboardShortcutsSection() {
                       bindingId={bindingId}
                       overrideCombo={overrideCombo}
                       isCapturing={capturingBindingId === bindingId}
-                      onRebind={() => setCapturingBindingId(bindingId)}
-                      onCancel={() => setCapturingBindingId(null)}
+                      capturedCombos={capturingBindingId === bindingId ? capturedCombos : []}
+                      onRebind={() => {
+                        if (bindingId) {
+                          startCapture(bindingId);
+                        }
+                      }}
+                      onDone={saveCapture}
+                      onCancel={cancelCapture}
                       onReset={() => {
                         if (bindingId) void removeOverride(bindingId);
                       }}

packages/app/src/screens/workspace/use-mounted-tab-set.ts

@@ -0,0 +1,64 @@
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+interface UseMountedTabSetInput {
+  activeTabId: string | null;
+  allTabIds: string[];
+  cap: number;
+}
+
+interface UseMountedTabSetResult {
+  mountedTabIds: Set<string>;
+}
+
+function createInitialMountedTabIds(input: UseMountedTabSetInput): Set<string> {
+  if (!input.activeTabId || !input.allTabIds.includes(input.activeTabId)) {
+    return new Set<string>();
+  }
+  return new Set<string>([input.activeTabId]);
+}
+
+function setsEqual(left: Set<string>, right: Set<string>): boolean {
+  if (left.size !== right.size) {
+    return false;
+  }
+  for (const value of left) {
+    if (!right.has(value)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function useMountedTabSet(input: UseMountedTabSetInput): UseMountedTabSetResult {
+  const { activeTabId, allTabIds, cap } = input;
+  const allTabIdsKey = allTabIds.join("\u0000");
+  const availableTabIds = useMemo(() => new Set(allTabIds), [allTabIdsKey]);
+  const [mountedTabIds, setMountedTabIds] = useState(() => createInitialMountedTabIds(input));
+  const lruRef = useRef(
+    activeTabId && allTabIds.includes(activeTabId) ? [activeTabId] : [],
+  );
+
+  useLayoutEffect(() => {
+    const nextLru = lruRef.current.filter((tabId) => availableTabIds.has(tabId));
+    if (activeTabId && availableTabIds.has(activeTabId)) {
+      const existingIndex = nextLru.indexOf(activeTabId);
+      if (existingIndex >= 0) {
+        nextLru.splice(existingIndex, 1);
+      }
+      nextLru.unshift(activeTabId);
+    }
+    if (nextLru.length > cap) {
+      nextLru.length = cap;
+    }
+
+    lruRef.current = nextLru;
+    setMountedTabIds((previousMountedTabIds) => {
+      const nextMountedTabIds = new Set(nextLru);
+      return setsEqual(previousMountedTabIds, nextMountedTabIds)
+        ? previousMountedTabIds
+        : nextMountedTabIds;
+    });
+  }, [activeTabId, availableTabIds, cap]);
+
+  return { mountedTabIds };
+}

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

@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/context-menu";
 import { Shortcut } from "@/components/ui/shortcut";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { useWorkspaceTabLayout } from "@/screens/workspace/use-workspace-tab-layout";
 import {
@@ -308,6 +309,10 @@ export function WorkspaceDesktopTabsRow({
   tabDropPreviewIndex = null,
 }: WorkspaceDesktopTabsRowProps) {
   const { theme } = useUnistyles();
+  const newAgentTabKeys = useShortcutKeys("workspace-tab-new");
+  const newTerminalTabKeys = useShortcutKeys("workspace-terminal-new");
+  const splitRightKeys = useShortcutKeys("workspace-pane-split-right");
+  const splitDownKeys = useShortcutKeys("workspace-pane-split-down");
   const [tabsContainerWidth, setTabsContainerWidth] = useState<number>(0);
   const [tabsActionsWidth, setTabsActionsWidth] = useState<number>(0);
 
@@ -448,10 +453,12 @@ export function WorkspaceDesktopTabsRow({
           >
             <SquarePen size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </TooltipTrigger>
-          <TooltipContent side="bottom" align="end" offset={8}>
+          <TooltipContent side="bottom" align="center" offset={8}>
             <View style={styles.newTabTooltipRow}>
               <Text style={styles.newTabTooltipText}>New agent tab</Text>
-              <Shortcut keys={["mod", "T"]} style={styles.newTabTooltipShortcut} />
+              {newAgentTabKeys ? (
+                <Shortcut chord={newAgentTabKeys} style={styles.newTabTooltipShortcut} />
+              ) : null}
             </View>
           </TooltipContent>
         </Tooltip>
@@ -467,8 +474,13 @@ export function WorkspaceDesktopTabsRow({
           >
             <SquareTerminal size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </TooltipTrigger>
-          <TooltipContent side="bottom" align="end" offset={8}>
-            <Text style={styles.newTabTooltipText}>New terminal tab</Text>
+          <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} />
+              ) : null}
+            </View>
           </TooltipContent>
         </Tooltip>
         <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
@@ -483,8 +495,13 @@ export function WorkspaceDesktopTabsRow({
           >
             <Columns2 size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </TooltipTrigger>
-          <TooltipContent side="bottom" align="end" offset={8}>
-            <Text style={styles.newTabTooltipText}>Split pane right</Text>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <View style={styles.newTabTooltipRow}>
+              <Text style={styles.newTabTooltipText}>Split pane right</Text>
+              {splitRightKeys ? (
+                <Shortcut chord={splitRightKeys} style={styles.newTabTooltipShortcut} />
+              ) : null}
+            </View>
           </TooltipContent>
         </Tooltip>
         <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
@@ -499,8 +516,13 @@ export function WorkspaceDesktopTabsRow({
           >
             <Rows2 size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />
           </TooltipTrigger>
-          <TooltipContent side="bottom" align="end" offset={8}>
-            <Text style={styles.newTabTooltipText}>Split pane down</Text>
+          <TooltipContent side="bottom" align="center" offset={8}>
+            <View style={styles.newTabTooltipRow}>
+              <Text style={styles.newTabTooltipText}>Split pane down</Text>
+              {splitDownKeys ? (
+                <Shortcut chord={splitDownKeys} style={styles.newTabTooltipShortcut} />
+              ) : null}
+            </View>
           </TooltipContent>
         </Tooltip>
       </View>

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

@@ -12,6 +12,7 @@ import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-
 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,
@@ -33,6 +34,7 @@ type WorkspaceDraftAgentTabProps = {
   workspaceId: string;
   tabId: string;
   draftId: string;
+  isPaneFocused: boolean;
   onCreated: (snapshot: AgentSnapshotPayload) => void;
   onOpenWorkspaceFile: (input: { filePath: string }) => void;
 };
@@ -42,6 +44,7 @@ export function WorkspaceDraftAgentTab({
   workspaceId,
   tabId,
   draftId,
+  isPaneFocused,
   onCreated,
   onOpenWorkspaceFile,
 }: WorkspaceDraftAgentTabProps) {
@@ -92,6 +95,22 @@ export function WorkspaceDraftAgentTab({
     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 {
     formErrorMessage,
     isSubmitting,
@@ -108,6 +127,12 @@ export function WorkspaceDraftAgentTab({
       if (providerDefinitions.length === 0) {
         return "No available providers on the selected host";
       }
+      if (isModelLoading) {
+        return "Model defaults are still loading";
+      }
+      if (!effectiveDraftModelId) {
+        return "No model is available for the selected provider";
+      }
       if (!client) {
         return "Host is not connected";
       }
@@ -122,8 +147,8 @@ export function WorkspaceDraftAgentTab({
     },
     buildDraftAgent: (attempt) => {
       const now = attempt.timestamp;
-      const model = selectedModel.trim() || null;
-      const thinkingOptionId = selectedThinkingOptionId.trim() || null;
+      const model = effectiveDraftModelId || null;
+      const thinkingOptionId = effectiveDraftThinkingOptionId || null;
       const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : null;
       return {
         serverId,
@@ -153,14 +178,14 @@ export function WorkspaceDraftAgentTab({
       }
 
       const modeId = modeOptions.length > 0 && selectedMode !== "" ? selectedMode : undefined;
-      const trimmedModel = selectedModel.trim();
-      const trimmedThinkingOptionId = selectedThinkingOptionId.trim();
       const config: AgentSessionConfig = {
         provider: selectedProvider,
         cwd: workspaceId,
         ...(modeId ? { modeId } : {}),
-        ...(trimmedModel ? { model: trimmedModel } : {}),
-        ...(trimmedThinkingOptionId ? { thinkingOptionId: trimmedThinkingOptionId } : {}),
+        ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
+        ...(effectiveDraftThinkingOptionId
+          ? { thinkingOptionId: effectiveDraftThinkingOptionId }
+          : {}),
       };
 
       const imagesData = await encodeImages(images);
@@ -186,17 +211,17 @@ export function WorkspaceDraftAgentTab({
       provider: selectedProvider,
       cwd: workspaceId,
       ...(modeOptions.length > 0 && selectedMode !== "" ? { modeId: selectedMode } : {}),
-      ...(selectedModel.trim() ? { model: selectedModel.trim() } : {}),
-      ...(selectedThinkingOptionId.trim()
-        ? { thinkingOptionId: selectedThinkingOptionId.trim() }
+      ...(effectiveDraftModelId ? { model: effectiveDraftModelId } : {}),
+      ...(effectiveDraftThinkingOptionId
+        ? { thinkingOptionId: effectiveDraftThinkingOptionId }
         : {}),
     };
   }, [
+    effectiveDraftModelId,
+    effectiveDraftThinkingOptionId,
     modeOptions.length,
     selectedMode,
-    selectedModel,
     selectedProvider,
-    selectedThinkingOptionId,
     workspaceId,
   ]);
 
@@ -243,6 +268,7 @@ export function WorkspaceDraftAgentTab({
           <AgentInputArea
             agentId={tabId}
             serverId={serverId}
+            isInputActive={isPaneFocused}
             onSubmitMessage={handleCreateFromInput}
             isSubmitLoading={isSubmitting}
             blurOnSubmit={true}
@@ -251,7 +277,7 @@ export function WorkspaceDraftAgentTab({
             images={draftInput.images}
             onChangeImages={draftInput.setImages}
             clearDraft={draftInput.clear}
-            autoFocus={!isSubmitting}
+            autoFocus={shouldAutoFocusWorkspaceDraftComposer({ isPaneFocused, isSubmitting })}
             onAddImages={handleAddImagesCallback}
             commandDraftConfig={draftCommandConfig}
             statusControls={{

packages/app/src/screens/workspace/workspace-draft-pane-focus.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { shouldAutoFocusWorkspaceDraftComposer } from "./workspace-draft-pane-focus";
+
+describe("shouldAutoFocusWorkspaceDraftComposer", () => {
+  it("focuses the draft composer when the pane is focused and idle", () => {
+    expect(
+      shouldAutoFocusWorkspaceDraftComposer({
+        isPaneFocused: true,
+        isSubmitting: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("does not focus the draft composer when the pane is unfocused", () => {
+    expect(
+      shouldAutoFocusWorkspaceDraftComposer({
+        isPaneFocused: false,
+        isSubmitting: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("does not focus the draft composer while the draft is submitting", () => {
+    expect(
+      shouldAutoFocusWorkspaceDraftComposer({
+        isPaneFocused: true,
+        isSubmitting: true,
+      }),
+    ).toBe(false);
+  });
+});

packages/app/src/screens/workspace/workspace-draft-pane-focus.ts

@@ -0,0 +1,6 @@
+export function shouldAutoFocusWorkspaceDraftComposer(input: {
+  isPaneFocused: boolean;
+  isSubmitting: boolean;
+}): boolean {
+  return input.isPaneFocused && !input.isSubmitting;
+}

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

@@ -74,6 +74,7 @@ import type { ListTerminalsResponse } from "@server/shared/messages";
 import { upsertTerminalListEntry } from "@/utils/terminal-list";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { useArchiveAgent } from "@/hooks/use-archive-agent";
+import { useStableEvent } from "@/hooks/use-stable-event";
 import { buildProviderCommand } from "@/utils/provider-command-templates";
 import { generateDraftId } from "@/stores/draft-keys";
 import {
@@ -96,7 +97,9 @@ import { deriveWorkspacePaneState } from "@/screens/workspace/workspace-pane-sta
 import {
   buildWorkspacePaneContentModel,
   WorkspacePaneContent,
+  type WorkspacePaneContentModel,
 } from "@/screens/workspace/workspace-pane-content";
+import { useMountedTabSet } from "@/screens/workspace/use-mounted-tab-set";
 import {
   buildBulkCloseConfirmationMessage,
   classifyBulkClosableTabs,
@@ -437,6 +440,68 @@ const MobileWorkspaceTabSwitcher = memo(function MobileWorkspaceTabSwitcher({
   );
 });
 
+interface MobileMountedTabSlotProps {
+  tabDescriptor: WorkspaceTabDescriptor;
+  isVisible: boolean;
+  isPaneFocused: boolean;
+  paneId: string | null;
+  buildPaneContentModel: (input: {
+    paneId: string | null;
+    isPaneFocused: boolean;
+    tab: WorkspaceTabDescriptor;
+  }) => WorkspacePaneContentModel;
+}
+
+const MobileMountedTabSlot = memo(function MobileMountedTabSlot({
+  tabDescriptor,
+  isVisible,
+  isPaneFocused,
+  paneId,
+  buildPaneContentModel,
+}: MobileMountedTabSlotProps) {
+  const content = useMemo(
+    () =>
+      buildPaneContentModel({
+        paneId,
+        isPaneFocused,
+        tab: tabDescriptor,
+      }),
+    [buildPaneContentModel, isPaneFocused, paneId, tabDescriptor],
+  );
+
+  return (
+    <View style={{ display: isVisible ? "flex" : "none", flex: 1 }}>
+      <WorkspacePaneContent content={content} />
+    </View>
+  );
+});
+
+function useStableTabDescriptorMap(tabDescriptors: WorkspaceTabDescriptor[]) {
+  const cacheRef = useRef(new Map<string, WorkspaceTabDescriptor>());
+  const tabDescriptorMap = useMemo(() => {
+    const next = new Map<string, WorkspaceTabDescriptor>();
+    for (const tabDescriptor of tabDescriptors) {
+      const cachedDescriptor = cacheRef.current.get(tabDescriptor.tabId);
+      if (
+        cachedDescriptor &&
+        cachedDescriptor.key === tabDescriptor.key &&
+        cachedDescriptor.kind === tabDescriptor.kind &&
+        workspaceTabTargetsEqual(cachedDescriptor.target, tabDescriptor.target)
+      ) {
+        next.set(tabDescriptor.tabId, cachedDescriptor);
+        continue;
+      }
+      next.set(tabDescriptor.tabId, tabDescriptor);
+    }
+    return next;
+  }, [tabDescriptors]);
+  useEffect(() => {
+    cacheRef.current = tabDescriptorMap;
+  }, [tabDescriptorMap]);
+
+  return tabDescriptorMap;
+}
+
 export function WorkspaceScreen({ serverId, workspaceId }: WorkspaceScreenProps) {
   const isFocused = useIsFocused();
 
@@ -485,6 +550,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   const mainBackgroundColor = isDarkMode ? theme.colors.surface1 : theme.colors.surface0;
   const toast = useToast();
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const isFocusModeEnabled = usePanelStore((state) => state.desktop.focusModeEnabled);
 
   const normalizedServerId = trimNonEmpty(decodeSegment(serverId)) ?? "";
   const normalizedWorkspaceId =
@@ -609,17 +675,10 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       }));
     });
 
-    const unsubscribeStreamExit = client.on("terminal_stream_exit", (message) => {
-      if (message.type !== "terminal_stream_exit") {
-        return;
-      }
-    });
-
     client.subscribeTerminals({ cwd: normalizedWorkspaceId });
 
     return () => {
       unsubscribeChanged();
-      unsubscribeStreamExit();
       client.unsubscribeTerminals({ cwd: normalizedWorkspaceId });
     };
   }, [client, isConnected, normalizedWorkspaceId, queryClient, terminalsQueryKey]);
@@ -747,6 +806,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
   const splitWorkspacePaneEmpty = useWorkspaceLayoutStore((state) => state.splitPaneEmpty);
   const moveWorkspaceTabToPane = useWorkspaceLayoutStore((state) => state.moveTabToPane);
   const focusWorkspacePane = useWorkspaceLayoutStore((state) => state.focusPane);
+  const paneFocusSuppressedRef = useRef(false);
   const resizeWorkspaceSplit = useWorkspaceLayoutStore((state) => state.resizeSplit);
   const reorderWorkspaceTabsInPane = useWorkspaceLayoutStore((state) => state.reorderTabsInPane);
   const pinnedAgentIds = useWorkspaceLayoutStore((state) =>
@@ -1465,6 +1525,9 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
         case "workspace.tab.new":
           handleCreateDraftTab();
           return true;
+        case "workspace.terminal.new":
+          handleCreateTerminal();
+          return true;
         case "workspace.tab.close-current":
           if (activeTabId) {
             void handleCloseTabById(activeTabId);
@@ -1493,7 +1556,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           return false;
       }
     },
-    [activeTabId, handleCloseTabById, handleCreateDraftTab, navigateToTabId, tabs],
+    [activeTabId, handleCloseTabById, handleCreateDraftTab, handleCreateTerminal, navigateToTabId, tabs],
   );
 
   const handleWorkspacePaneAction = useCallback(
@@ -1560,7 +1623,11 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           const activePaneTabId = focusedPaneTabState.activeTabId;
           const adjacentPaneId = findAdjacentPane(workspaceLayout.root, focusedPane.id, direction);
           if (activePaneTabId && adjacentPaneId) {
+            paneFocusSuppressedRef.current = true;
             moveWorkspaceTabToPane(persistenceKey, activePaneTabId, adjacentPaneId);
+            requestAnimationFrame(() => {
+              paneFocusSuppressedRef.current = false;
+            });
           }
         }
         return true;
@@ -1598,6 +1665,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       "workspace.tab.close-current",
       "workspace.tab.navigate-index",
       "workspace.tab.navigate-relative",
+      "workspace.terminal.new",
     ] as const,
     enabled: Boolean(normalizedServerId && normalizedWorkspaceId),
     priority: 100,
@@ -1723,37 +1791,33 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       retargetWorkspaceTab,
     };
   });
-  const activePaneContent = useMemo(
-    () =>
-      activeTabDescriptor
-        ? buildPaneContentModel({
-            tab: activeTabDescriptor,
-            paneId: focusedPaneTabState.pane?.id ?? null,
-            isPaneFocused: true,
-            focusPaneBeforeOpen: false,
-          })
-        : null,
-    [activeTabDescriptor, buildPaneContentModel, focusedPaneTabState.pane?.id],
+  const focusedPaneId = focusedPaneTabState.pane?.id ?? null;
+  const focusedPaneTabIds = useMemo(() => tabs.map((tab) => tab.tabId), [tabs]);
+  const focusedPaneTabDescriptorMap = useStableTabDescriptorMap(tabs);
+  const { mountedTabIds: mountedFocusedPaneTabIdsSet } = useMountedTabSet({
+    activeTabId: activeTabDescriptor?.tabId ?? null,
+    allTabIds: focusedPaneTabIds,
+    cap: 3,
+  });
+  const mountedFocusedPaneTabIds = useMemo(
+    () => focusedPaneTabIds.filter((tabId) => mountedFocusedPaneTabIdsSet.has(tabId)),
+    [focusedPaneTabIds, mountedFocusedPaneTabIdsSet],
+  );
+  const buildMobilePaneContentModel = useCallback(
+    function buildMobilePaneContentModel(input: {
+      paneId: string | null;
+      tab: WorkspaceTabDescriptor;
+      isPaneFocused: boolean;
+    }) {
+      return buildPaneContentModel({
+        tab: input.tab,
+        paneId: input.paneId,
+        isPaneFocused: input.isPaneFocused,
+        focusPaneBeforeOpen: false,
+      });
+    },
+    [buildPaneContentModel],
   );
-  const prevActivePaneDeps = useRef({
-    activeTabDescriptor,
-    buildPaneContentModel,
-    paneId: focusedPaneTabState.pane?.id,
-  });
-  useEffect(() => {
-    const prev = prevActivePaneDeps.current;
-    if (prev.activeTabDescriptor !== activeTabDescriptor)
-      console.log("[activePaneContent] activeTabDescriptor changed");
-    if (prev.buildPaneContentModel !== buildPaneContentModel)
-      console.log("[activePaneContent] buildPaneContentModel changed");
-    if (prev.paneId !== focusedPaneTabState.pane?.id)
-      console.log("[activePaneContent] paneId changed");
-    prevActivePaneDeps.current = {
-      activeTabDescriptor,
-      buildPaneContentModel,
-      paneId: focusedPaneTabState.pane?.id,
-    };
-  });
   const content = shouldRenderMissingWorkspaceDescriptor({
     workspace: workspaceDescriptor,
     hasHydratedWorkspaces,
@@ -1774,9 +1838,100 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       </View>
     )
   ) : (
-    <WorkspacePaneContent content={activePaneContent!} />
+    mountedFocusedPaneTabIds.map((tabId) => {
+      const tabDescriptor = focusedPaneTabDescriptorMap.get(tabId);
+      if (!tabDescriptor) {
+        return null;
+      }
+
+      return (
+        <MobileMountedTabSlot
+          key={tabId}
+          tabDescriptor={tabDescriptor}
+          isVisible={tabId === activeTabDescriptor.tabId}
+          isPaneFocused={tabId === activeTabDescriptor.tabId}
+          paneId={focusedPaneId}
+          buildPaneContentModel={buildMobilePaneContentModel}
+        />
+      );
+    })
   );
 
+  const buildDesktopPaneContentModel = useCallback(
+    function buildDesktopPaneContentModel(input: {
+      paneId: string;
+      tab: WorkspaceTabDescriptor;
+      isPaneFocused: boolean;
+    }) {
+      return buildPaneContentModel({
+        tab: input.tab,
+        paneId: input.paneId,
+        isPaneFocused: input.isPaneFocused,
+        focusPaneBeforeOpen: true,
+      });
+    },
+    [buildPaneContentModel],
+  );
+
+  const handleFocusPane = useStableEvent(function handleFocusPane(paneId: string) {
+    if (!persistenceKey || paneFocusSuppressedRef.current) {
+      return;
+    }
+    focusWorkspacePane(persistenceKey, paneId);
+  });
+
+  const handleSplitPane = useCallback(
+    function handleSplitPane(input: {
+      tabId: string;
+      targetPaneId: string;
+      position: "left" | "right" | "top" | "bottom";
+    }) {
+      if (!persistenceKey) {
+        return;
+      }
+      splitWorkspacePane(persistenceKey, input);
+    },
+    [persistenceKey, splitWorkspacePane],
+  );
+
+  const handleMoveTabToPane = useCallback(
+    function handleMoveTabToPane(tabId: string, toPaneId: string) {
+      if (!persistenceKey) {
+        return;
+      }
+      moveWorkspaceTabToPane(persistenceKey, tabId, toPaneId);
+    },
+    [moveWorkspaceTabToPane, persistenceKey],
+  );
+
+  const handleResizePaneSplit = useCallback(
+    function handleResizePaneSplit(groupId: string, sizes: number[]) {
+      if (!persistenceKey) {
+        return;
+      }
+      resizeWorkspaceSplit(persistenceKey, groupId, sizes);
+    },
+    [persistenceKey, resizeWorkspaceSplit],
+  );
+
+  const handleReorderTabsInPane = useCallback(
+    function handleReorderTabsInPane(paneId: string, tabIds: string[]) {
+      if (!persistenceKey) {
+        return;
+      }
+      reorderWorkspaceTabsInPane(persistenceKey, paneId, tabIds);
+    },
+    [persistenceKey, reorderWorkspaceTabsInPane],
+  );
+
+  const renderSplitPaneEmptyState = useCallback(function renderSplitPaneEmptyState() {
+    return (
+      <View style={styles.emptyState}>
+        <Text style={styles.emptyStateText}>No tabs in this pane.</Text>
+      </View>
+    );
+  }, []);
+
   return (
     <View style={[styles.container, { backgroundColor: mainBackgroundColor }]}>
       {Platform.OS === "web" && activeTabDescriptor ? (
@@ -1795,6 +1950,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
       ) : null}
       <View style={styles.threePaneRow}>
         <View style={styles.centerColumn}>
+          {(!isFocusModeEnabled || isMobile) && (
           <ScreenHeader
             left={
               <>
@@ -1890,40 +2046,61 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                       serverId={normalizedServerId}
                       cwd={normalizedWorkspaceId}
                     />
-                    <Pressable
-                      testID="workspace-explorer-toggle"
-                      onPress={handleToggleExplorer}
-                      accessibilityRole="button"
-                      accessibilityLabel={isExplorerOpen ? "Close explorer" : "Open explorer"}
-                      accessibilityState={{ expanded: isExplorerOpen }}
-                      style={({ hovered, pressed }) => [
-                        styles.sourceControlButton,
-                        workspaceDescriptor?.diffStat && styles.sourceControlButtonWithStats,
-                        (hovered || pressed || isExplorerOpen) && styles.sourceControlButtonHovered,
-                      ]}
-                    >
-                      {({ hovered, pressed }) => {
-                        const active = isExplorerOpen || hovered || pressed;
-                        const iconColor = active
-                          ? theme.colors.foreground
-                          : theme.colors.foregroundMuted;
-                        return (
-                          <>
-                            <SourceControlPanelIcon size={theme.iconSize.md} color={iconColor} />
-                            {workspaceDescriptor?.diffStat ? (
-                              <View style={styles.diffStatRow}>
-                                <Text style={styles.diffStatAdditions}>
-                                  +{workspaceDescriptor.diffStat.additions}
-                                </Text>
-                                <Text style={styles.diffStatDeletions}>
-                                  -{workspaceDescriptor.diffStat.deletions}
-                                </Text>
-                              </View>
-                            ) : null}
-                          </>
-                        );
-                      }}
-                    </Pressable>
+                    <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+                      <TooltipTrigger asChild>
+                        <Pressable
+                          testID="workspace-explorer-toggle"
+                          onPress={handleToggleExplorer}
+                          accessibilityRole="button"
+                          accessibilityLabel={
+                            isExplorerOpen ? "Close explorer" : "Open explorer"
+                          }
+                          accessibilityState={{ expanded: isExplorerOpen }}
+                          style={({ hovered, pressed }) => [
+                            styles.sourceControlButton,
+                            workspaceDescriptor?.diffStat && styles.sourceControlButtonWithStats,
+                            (hovered || pressed || isExplorerOpen) &&
+                              styles.sourceControlButtonHovered,
+                          ]}
+                        >
+                          {({ hovered, pressed }) => {
+                            const active = isExplorerOpen || hovered || pressed;
+                            const iconColor = active
+                              ? theme.colors.foreground
+                              : theme.colors.foregroundMuted;
+                            return (
+                              <>
+                                <SourceControlPanelIcon
+                                  size={theme.iconSize.md}
+                                  color={iconColor}
+                                />
+                                {workspaceDescriptor?.diffStat ? (
+                                  <View style={styles.diffStatRow}>
+                                    <Text style={styles.diffStatAdditions}>
+                                      +{workspaceDescriptor.diffStat.additions}
+                                    </Text>
+                                    <Text style={styles.diffStatDeletions}>
+                                      -{workspaceDescriptor.diffStat.deletions}
+                                    </Text>
+                                  </View>
+                                ) : null}
+                              </>
+                            );
+                          }}
+                        </Pressable>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        testID="workspace-explorer-toggle-tooltip"
+                        side="left"
+                        align="center"
+                        offset={8}
+                      >
+                        <View style={styles.explorerTooltipRow}>
+                          <Text style={styles.explorerTooltipText}>Toggle explorer</Text>
+                          <Shortcut keys={["mod", "E"]} style={styles.explorerTooltipShortcut} />
+                        </View>
+                      </TooltipContent>
+                    </Tooltip>
                   </>
                 ) : null}
                 {!isMobile && !isGitCheckout ? (
@@ -1981,6 +2158,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
               </View>
             }
           />
+          )}
 
           {isMobile ? (
             <MobileWorkspaceTabSwitcher
@@ -2011,6 +2189,7 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                 {workspaceLayout && persistenceKey ? (
                   <SplitContainer
                     layout={workspaceLayout}
+                    focusModeEnabled={isFocusModeEnabled && !isMobile}
                     workspaceKey={persistenceKey}
                     normalizedServerId={normalizedServerId}
                     normalizedWorkspaceId={normalizedWorkspaceId}
@@ -2028,38 +2207,15 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
                     onCloseOtherTabs={handleCloseOtherTabsInPane}
                     onSelectNewTabOption={handleSelectNewTabOption}
                     newTabAgentOptionId={NEW_TAB_AGENT_OPTION_ID}
-                    buildPaneContentModel={({ paneId, tab, isPaneFocused }) =>
-                      buildPaneContentModel({
-                        tab,
-                        paneId,
-                        isPaneFocused,
-                        focusPaneBeforeOpen: true,
-                      })
-                    }
-                    onFocusPane={(paneId) => {
-                      focusWorkspacePane(persistenceKey, paneId);
-                    }}
+                    buildPaneContentModel={buildDesktopPaneContentModel}
+                    onFocusPane={handleFocusPane}
                     onNewTerminalTab={handleCreateTerminal}
-                    onSplitPane={(input) => {
-                      splitWorkspacePane(persistenceKey, input);
-                    }}
-                    onSplitPaneEmpty={(input) => {
-                      handleCreateDraftSplit(input);
-                    }}
-                    onMoveTabToPane={(tabId, toPaneId) => {
-                      moveWorkspaceTabToPane(persistenceKey, tabId, toPaneId);
-                    }}
-                    onResizeSplit={(groupId, sizes) => {
-                      resizeWorkspaceSplit(persistenceKey, groupId, sizes);
-                    }}
-                    onReorderTabsInPane={(paneId, tabIds) => {
-                      reorderWorkspaceTabsInPane(persistenceKey, paneId, tabIds);
-                    }}
-                    renderPaneEmptyState={() => (
-                      <View style={styles.emptyState}>
-                        <Text style={styles.emptyStateText}>No tabs in this pane.</Text>
-                      </View>
-                    )}
+                    onSplitPane={handleSplitPane}
+                    onSplitPaneEmpty={handleCreateDraftSplit}
+                    onMoveTabToPane={handleMoveTabToPane}
+                    onResizeSplit={handleResizePaneSplit}
+                    onReorderTabsInPane={handleReorderTabsInPane}
+                    renderPaneEmptyState={renderSplitPaneEmptyState}
                   />
                 ) : (
                   content
@@ -2069,13 +2225,15 @@ function WorkspaceScreenContent({ serverId, workspaceId }: WorkspaceScreenProps)
           </View>
         </View>
 
-        <ExplorerSidebar
-          serverId={normalizedServerId}
-          workspaceId={normalizedWorkspaceId}
-          workspaceRoot={normalizedWorkspaceId}
-          isGit={isGitCheckout}
-          onOpenFile={handleOpenFileFromExplorer}
-        />
+        {(!isFocusModeEnabled || isMobile) && (
+          <ExplorerSidebar
+            serverId={normalizedServerId}
+            workspaceId={normalizedWorkspaceId}
+            workspaceRoot={normalizedWorkspaceId}
+            isGit={isGitCheckout}
+            onOpenFile={handleOpenFileFromExplorer}
+          />
+        )}
       </View>
     </View>
   );
@@ -2210,6 +2368,19 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: theme.colors.surface3,
     borderColor: theme.colors.borderAccent,
   },
+  explorerTooltipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  explorerTooltipText: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.popoverForeground,
+  },
+  explorerTooltipShortcut: {
+    backgroundColor: theme.colors.surface3,
+    borderColor: theme.colors.borderAccent,
+  },
   mobileTabsRow: {
     backgroundColor: theme.colors.surface0,
     borderBottomWidth: theme.borderWidth[1],

packages/app/src/stores/keyboard-shortcuts-store.test.ts

@@ -4,7 +4,9 @@ import { useKeyboardShortcutsStore } from "./keyboard-shortcuts-store";
 beforeEach(() => {
   useKeyboardShortcutsStore.setState({
     commandCenterOpen: false,
+    projectPickerOpen: false,
     shortcutsDialogOpen: false,
+    capturingShortcut: false,
     altDown: false,
     cmdOrCtrlDown: false,
     sidebarShortcutWorkspaceTargets: [],
@@ -18,4 +20,10 @@ describe("keyboard-shortcuts-store", () => {
     useKeyboardShortcutsStore.getState().setCommandCenterOpen(true);
     expect(useKeyboardShortcutsStore.getState().commandCenterOpen).toBe(true);
   });
+
+  it("toggles shortcut capture state", () => {
+    expect(useKeyboardShortcutsStore.getState().capturingShortcut).toBe(false);
+    useKeyboardShortcutsStore.getState().setCapturingShortcut(true);
+    expect(useKeyboardShortcutsStore.getState().capturingShortcut).toBe(true);
+  });
 });

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

@@ -5,6 +5,7 @@ interface KeyboardShortcutsState {
   commandCenterOpen: boolean;
   projectPickerOpen: boolean;
   shortcutsDialogOpen: boolean;
+  capturingShortcut: boolean;
   altDown: boolean;
   cmdOrCtrlDown: boolean;
   /** Sidebar-visible workspace targets (up to 9), in top-to-bottom visual order. */
@@ -15,6 +16,7 @@ interface KeyboardShortcutsState {
   setCommandCenterOpen: (open: boolean) => void;
   setProjectPickerOpen: (open: boolean) => void;
   setShortcutsDialogOpen: (open: boolean) => void;
+  setCapturingShortcut: (capturing: boolean) => void;
   setAltDown: (down: boolean) => void;
   setCmdOrCtrlDown: (down: boolean) => void;
   setSidebarShortcutWorkspaceTargets: (targets: SidebarShortcutWorkspaceTarget[]) => void;
@@ -26,6 +28,7 @@ export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>((set) =>
   commandCenterOpen: false,
   projectPickerOpen: false,
   shortcutsDialogOpen: false,
+  capturingShortcut: false,
   altDown: false,
   cmdOrCtrlDown: false,
   sidebarShortcutWorkspaceTargets: [],
@@ -34,6 +37,7 @@ export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>((set) =>
   setCommandCenterOpen: (open) => set({ commandCenterOpen: open }),
   setProjectPickerOpen: (open) => set({ projectPickerOpen: open }),
   setShortcutsDialogOpen: (open) => set({ shortcutsDialogOpen: open }),
+  setCapturingShortcut: (capturing) => set({ capturingShortcut: capturing }),
   setAltDown: (down) => set({ altDown: down }),
   setCmdOrCtrlDown: (down) => set({ cmdOrCtrlDown: down }),
   setSidebarShortcutWorkspaceTargets: (targets) =>

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

@@ -33,6 +33,7 @@ type MobilePanelView = "agent" | "agent-list" | "file-explorer";
 interface DesktopSidebarState {
   agentListOpen: boolean;
   fileExplorerOpen: boolean;
+  focusModeEnabled: boolean;
 }
 
 export type SortOption = "name" | "modified" | "size";
@@ -78,6 +79,8 @@ interface PanelState {
   closeToAgent: () => void;
   toggleAgentList: () => void;
   toggleFileExplorer: () => void;
+  toggleBothSidebars: () => void;
+  toggleFocusMode: () => void;
 
   // File explorer settings actions
   setExplorerTab: (tab: ExplorerTab) => void;
@@ -133,6 +136,7 @@ export const usePanelStore = create<PanelState>()(
       desktop: {
         agentListOpen: DEFAULT_DESKTOP_OPEN,
         fileExplorerOpen: false,
+        focusModeEnabled: false,
       },
 
       // File explorer defaults
@@ -174,6 +178,7 @@ export const usePanelStore = create<PanelState>()(
           // On desktop, closing depends on which panel triggered it
           // This is called when closing via gesture/backdrop, so we close the currently active mobile panel
           desktop: {
+            ...state.desktop,
             agentListOpen: state.mobileView === "agent-list" ? false : state.desktop.agentListOpen,
             fileExplorerOpen:
               state.mobileView === "file-explorer" ? false : state.desktop.fileExplorerOpen,
@@ -216,6 +221,29 @@ export const usePanelStore = create<PanelState>()(
           return nextState;
         }),
 
+      toggleFocusMode: () =>
+        set((state) => ({
+          desktop: { ...state.desktop, focusModeEnabled: !state.desktop.focusModeEnabled },
+        })),
+
+      toggleBothSidebars: () =>
+        set((state) => {
+          // If either sidebar is open, close both. Otherwise, open both.
+          const anyOpen = state.desktop.agentListOpen || state.desktop.fileExplorerOpen;
+          if (anyOpen) {
+            return {
+              mobileView: "agent" as MobilePanelView,
+              desktop: { ...state.desktop, agentListOpen: false, fileExplorerOpen: false },
+            };
+          }
+          const resolvedTab = resolveExplorerTabFromActiveCheckout(state);
+          return {
+            mobileView: "agent" as MobilePanelView,
+            desktop: { ...state.desktop, agentListOpen: true, fileExplorerOpen: true },
+            ...(resolvedTab ? { explorerTab: resolvedTab } : {}),
+          };
+        }),
+
       setExplorerTab: (tab) => set({ explorerTab: tab }),
       setExplorerTabForCheckout: ({ serverId, cwd, isGit, tab }) =>
         set((state) => {
@@ -267,7 +295,7 @@ export const usePanelStore = create<PanelState>()(
     }),
     {
       name: "panel-state",
-      version: 6,
+      version: 8,
       storage: createJSONStorage(() => AsyncStorage),
       migrate: (persistedState, version) => {
         const state = persistedState as Partial<PanelState> & Record<string, unknown>;
@@ -322,6 +350,23 @@ export const usePanelStore = create<PanelState>()(
           state.explorerTabByCheckout = next;
         }
 
+        if (version < 8) {
+          const desktop = state.desktop as Record<string, unknown> | undefined;
+          if (desktop) {
+            if ("zoomed" in desktop) {
+              desktop.focusModeEnabled = desktop.zoomed;
+              delete desktop.zoomed;
+            }
+            if ("focused" in desktop) {
+              desktop.focusModeEnabled = desktop.focused;
+              delete desktop.focused;
+            }
+            if (typeof desktop.focusModeEnabled !== "boolean") {
+              desktop.focusModeEnabled = false;
+            }
+          }
+        }
+
         if (version < 6 || typeof state.sidebarWidth !== "number") {
           state.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
         }

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

@@ -191,7 +191,6 @@ export type DaemonServerInfo = {
 };
 
 export interface AgentTimelineCursorState {
-  epoch: string;
   startSeq: number;
   endSeq: number;
 }

packages/app/src/styles/markdown-styles.test.ts

@@ -37,4 +37,36 @@ describe("createMarkdownStyles", () => {
       overflowWrap: "anywhere",
     });
   });
+
+  it("keeps assistant markdown text selectable on web", () => {
+    const styles = createMarkdownStyles(darkTheme);
+
+    expect(styles.body).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.text).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.heading1).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.link).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.code_inline).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.code_block).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.fence).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.bullet_list_icon).toMatchObject({
+      userSelect: "text",
+    });
+    expect(styles.ordered_list_icon).toMatchObject({
+      userSelect: "text",
+    });
+  });
 });

packages/app/src/styles/markdown-styles.ts

@@ -1,6 +1,9 @@
+import { Platform } from "react-native";
 import type { Theme } from "./theme";
 import { Fonts } from "@/constants/theme";
 
+const webSelectableTextStyle = Platform.OS === "web" ? { userSelect: "text" as const } : {};
+
 /**
  * Creates comprehensive markdown styles for react-native-markdown-display.
  *
@@ -15,6 +18,7 @@ export function createMarkdownStyles(theme: Theme) {
     // =========================================================================
 
     body: {
+      ...webSelectableTextStyle,
       color: theme.colors.foreground,
       fontSize: theme.fontSize.base,
       lineHeight: 22,
@@ -24,6 +28,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     text: {
+      ...webSelectableTextStyle,
       color: theme.colors.foreground,
       flexShrink: 1,
       minWidth: 0,
@@ -47,6 +52,7 @@ export function createMarkdownStyles(theme: Theme) {
     // =========================================================================
 
     heading1: {
+      ...webSelectableTextStyle,
       fontSize: theme.fontSize["3xl"],
       fontWeight: theme.fontWeight.bold,
       color: theme.colors.foreground,
@@ -59,6 +65,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     heading2: {
+      ...webSelectableTextStyle,
       fontSize: theme.fontSize["2xl"],
       fontWeight: theme.fontWeight.bold,
       color: theme.colors.foreground,
@@ -71,6 +78,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     heading3: {
+      ...webSelectableTextStyle,
       fontSize: theme.fontSize.xl,
       fontWeight: theme.fontWeight.semibold,
       color: theme.colors.foreground,
@@ -80,6 +88,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     heading4: {
+      ...webSelectableTextStyle,
       fontSize: theme.fontSize.lg,
       fontWeight: theme.fontWeight.semibold,
       color: theme.colors.foreground,
@@ -89,6 +98,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     heading5: {
+      ...webSelectableTextStyle,
       fontSize: theme.fontSize.base,
       fontWeight: theme.fontWeight.semibold,
       color: theme.colors.foreground,
@@ -98,6 +108,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     heading6: {
+      ...webSelectableTextStyle,
       fontSize: theme.fontSize.base,
       fontWeight: theme.fontWeight.semibold,
       color: theme.colors.foregroundMuted,
@@ -113,19 +124,23 @@ export function createMarkdownStyles(theme: Theme) {
     // =========================================================================
 
     strong: {
+      ...webSelectableTextStyle,
       fontWeight: theme.fontWeight.medium,
     },
 
     em: {
+      ...webSelectableTextStyle,
       fontStyle: "italic" as const,
     },
 
     s: {
+      ...webSelectableTextStyle,
       textDecorationLine: "line-through" as const,
       color: theme.colors.foregroundMuted,
     },
 
     link: {
+      ...webSelectableTextStyle,
       color: theme.colors.accentBright,
       textDecorationLine: "none" as const,
       flexShrink: 1,
@@ -134,6 +149,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     blocklink: {
+      ...webSelectableTextStyle,
       color: theme.colors.accentBright,
       textDecorationLine: "none" as const,
       flexShrink: 1,
@@ -146,6 +162,7 @@ export function createMarkdownStyles(theme: Theme) {
     // =========================================================================
 
     code_inline: {
+      ...webSelectableTextStyle,
       backgroundColor: theme.colors.surface2,
       color: theme.colors.foreground,
       paddingHorizontal: theme.spacing[1],
@@ -157,6 +174,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     code_block: {
+      ...webSelectableTextStyle,
       backgroundColor: theme.colors.surface2,
       color: theme.colors.foreground,
       padding: theme.spacing[3],
@@ -167,6 +185,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     fence: {
+      ...webSelectableTextStyle,
       backgroundColor: theme.colors.surface2,
       color: theme.colors.foreground,
       padding: theme.spacing[3],
@@ -200,6 +219,7 @@ export function createMarkdownStyles(theme: Theme) {
     tbody: {},
 
     th: {
+      ...webSelectableTextStyle,
       padding: theme.spacing[2],
       borderBottomWidth: 1,
       borderRightWidth: 1,
@@ -218,6 +238,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     td: {
+      ...webSelectableTextStyle,
       padding: theme.spacing[2],
       borderRightWidth: 1,
       borderColor: theme.colors.border,
@@ -260,6 +281,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     bullet_list_icon: {
+      ...webSelectableTextStyle,
       color: theme.colors.foregroundMuted,
       marginRight: 4,
       fontSize: theme.fontSize.base,
@@ -267,6 +289,7 @@ export function createMarkdownStyles(theme: Theme) {
     },
 
     ordered_list_icon: {
+      ...webSelectableTextStyle,
       color: theme.colors.foregroundMuted,
       marginRight: 4,
       fontSize: theme.fontSize.base,

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

@@ -5,10 +5,12 @@ import { TerminalEmulatorRuntime } from "./terminal-emulator-runtime";
 type StubTerminal = {
   write: (text: string, callback?: () => void) => void;
   reset: () => void;
+  resize?: (cols: number, rows: number) => void;
   focus: () => void;
   refresh?: (start: number, end: number) => void;
   options?: { theme?: unknown };
   rows?: number;
+  cols?: number;
 };
 
 function createRuntimeWithTerminal(): {
@@ -35,10 +37,12 @@ function createRuntimeWithTerminal(): {
       resetCalls += 1;
       terminal.resetCalls = resetCalls;
     },
+    resize: () => {},
     focus: () => {},
     refresh: () => {},
     options: { theme: undefined },
     rows: 0,
+    cols: 0,
     resetCalls,
   };
 
@@ -188,12 +192,16 @@ describe("terminal-emulator-runtime", () => {
       refresh,
       options: { theme: { background: "before" } },
       rows: 12,
+      cols: 40,
     };
     (runtime as unknown as { terminal: StubTerminal }).terminal = terminal;
 
     runtime.setTheme({ theme: { background: "after" } as never });
 
-    expect(terminal.options?.theme).toEqual({ background: "after" });
+    expect(terminal.options?.theme).toEqual({
+      background: "after",
+      overviewRulerBorder: "after",
+    });
     expect(refresh).toHaveBeenCalledWith(0, 11);
   });
 

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

@@ -1,7 +1,13 @@
+import { ClipboardAddon } from "@xterm/addon-clipboard";
 import { FitAddon } from "@xterm/addon-fit";
+import { ImageAddon } from "@xterm/addon-image";
+import { LigaturesAddon } from "@xterm/addon-ligatures";
+import { SearchAddon } from "@xterm/addon-search";
 import { Unicode11Addon } from "@xterm/addon-unicode11";
+import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal, type ITheme } from "@xterm/xterm";
+import type { TerminalState } from "@server/shared/messages";
 import {
   type PendingTerminalModifiers,
   isTerminalModifierDomKey,
@@ -10,11 +16,12 @@ import {
   normalizeTerminalTransportKey,
   shouldInterceptDomTerminalKey,
 } from "@/utils/terminal-keys";
+import { renderTerminalSnapshotToAnsi } from "./terminal-snapshot";
 
 export type TerminalEmulatorRuntimeMountInput = {
   root: HTMLDivElement;
   host: HTMLDivElement;
-  initialOutputText: string;
+  initialSnapshot: TerminalState | null;
   theme: ITheme;
 };
 
@@ -50,8 +57,10 @@ type TerminalEmulatorRuntimeDisposables = {
 };
 
 type TerminalOutputOperation = {
-  type: "write" | "clear";
+  type: "write" | "clear" | "snapshot";
   text: string;
+  rows?: number;
+  cols?: number;
   suppressInput?: boolean;
   onCommitted?: () => void;
 };
@@ -145,6 +154,9 @@ export class TerminalEmulatorRuntime {
       fontFamily: DEFAULT_TERMINAL_FONT_FAMILY,
       fontSize: 13,
       lineHeight: 1.0,
+      macOptionIsMeta: true,
+      minimumContrastRatio: 1,
+      rescaleOverlappingGlyphs: true,
       overviewRuler: {
         width: 8,
       },
@@ -156,6 +168,14 @@ export class TerminalEmulatorRuntime {
     let webglAddon: WebglAddon | null = null;
     terminal.loadAddon(fitAddon);
     terminal.loadAddon(unicode11Addon);
+    terminal.loadAddon(new WebLinksAddon());
+    terminal.loadAddon(new SearchAddon({ highlightLimit: 20_000 }));
+    terminal.loadAddon(new ClipboardAddon());
+    try {
+      terminal.loadAddon(new LigaturesAddon());
+    } catch {
+      // Ligatures require Font Access API or compatible environment
+    }
     terminal.open(input.host);
     try {
       terminal.unicode.activeVersion = "11";
@@ -189,6 +209,14 @@ export class TerminalEmulatorRuntime {
       }
     });
 
+    terminal.loadAddon(new ImageAddon());
+
+    // Suppress terminal query responses — the server-side headless xterm handles these.
+    // Without this, xterm.js generates DA/CPR responses via onData that feed back
+    // to the PTY as visible text.
+    terminal.parser.registerCsiHandler({ final: "c" }, () => true);
+    terminal.parser.registerCsiHandler({ final: "R" }, () => true);
+
     const restoreDocumentStyles = this.applyDocumentBoundsStyles({
       root: input.root,
     });
@@ -207,6 +235,10 @@ export class TerminalEmulatorRuntime {
         return;
       }
 
+      if (input.root.offsetWidth === 0 || input.root.offsetHeight === 0) {
+        return;
+      }
+
       try {
         currentFitAddon.fit();
       } catch {
@@ -332,8 +364,8 @@ export class TerminalEmulatorRuntime {
       fitAndEmitResize(true);
     }, 0);
 
-    if (input.initialOutputText.length > 0) {
-      this.write({ text: input.initialOutputText, suppressInput: true });
+    if (input.initialSnapshot) {
+      this.renderSnapshot({ state: input.initialSnapshot });
     }
 
     this.processOutputQueue();
@@ -434,6 +466,22 @@ export class TerminalEmulatorRuntime {
     this.processOutputQueue();
   }
 
+  renderSnapshot(input: { state: TerminalState | null; onCommitted?: () => void }): void {
+    if (!input.state) {
+      this.clear(input);
+      return;
+    }
+    this.outputOperations.push({
+      type: "snapshot",
+      text: renderTerminalSnapshotToAnsi(input.state),
+      rows: input.state.rows,
+      cols: input.state.cols,
+      suppressInput: true,
+      ...(input.onCommitted ? { onCommitted: input.onCommitted } : {}),
+    });
+    this.processOutputQueue();
+  }
+
   resize(input?: { force?: boolean }): void {
     this.fitAndEmitResize?.(input?.force ?? false);
   }
@@ -523,6 +571,22 @@ export class TerminalEmulatorRuntime {
       return;
     }
 
+    if (operation.type === "snapshot") {
+      try {
+        if (
+          typeof operation.cols === "number" &&
+          typeof operation.rows === "number" &&
+          (terminal.cols !== operation.cols || terminal.rows !== operation.rows)
+        ) {
+          terminal.resize(operation.cols, operation.rows);
+        }
+        terminal.reset();
+      } catch {
+        finalizeOperation(operation);
+        return;
+      }
+    }
+
     const text = operation.text;
     this.inFlightOutputOperationTimeout = setTimeout(() => {
       finalizeOperation(operation);
@@ -621,7 +685,6 @@ export class TerminalEmulatorRuntime {
 
   private applyViewportTouchStyles(input: { host: HTMLDivElement }): () => void {
     const viewportElement = input.host.querySelector<HTMLElement>(".xterm-viewport");
-    const screenElement = input.host.querySelector<HTMLElement>(".xterm-screen");
 
     const previousViewportOverscroll = viewportElement?.style.overscrollBehavior ?? "";
     const previousViewportTouchAction = viewportElement?.style.touchAction ?? "";
@@ -630,8 +693,6 @@ export class TerminalEmulatorRuntime {
     const previousViewportPointerEvents = viewportElement?.style.pointerEvents ?? "";
     const previousViewportWebkitOverflowScrolling =
       viewportElement?.style.getPropertyValue("-webkit-overflow-scrolling") ?? "";
-    const previousScreenPointerEvents = screenElement?.style.pointerEvents ?? "";
-
     if (viewportElement) {
       viewportElement.style.overscrollBehavior = "none";
       viewportElement.style.touchAction = "pan-y";
@@ -640,9 +701,6 @@ export class TerminalEmulatorRuntime {
       viewportElement.style.pointerEvents = "auto";
       viewportElement.style.setProperty("-webkit-overflow-scrolling", "touch");
     }
-    if (screenElement) {
-      screenElement.style.pointerEvents = "none";
-    }
 
     return () => {
       if (viewportElement) {
@@ -656,9 +714,6 @@ export class TerminalEmulatorRuntime {
           previousViewportWebkitOverflowScrolling,
         );
       }
-      if (screenElement) {
-        screenElement.style.pointerEvents = previousScreenPointerEvents;
-      }
     };
   }
 

packages/app/src/terminal/runtime/terminal-output-delivery-queue.test.ts

@@ -1,141 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-
-import { TerminalOutputDeliveryQueue } from "./terminal-output-delivery-queue";
-
-describe("terminal-output-delivery-queue", () => {
-  it("retries in-flight delivery when consume is missing", () => {
-    vi.useFakeTimers();
-    const delivered: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const queue = new TerminalOutputDeliveryQueue({
-      onDeliver: (chunk) => {
-        delivered.push(chunk);
-      },
-      deliveryTimeoutMs: 100,
-    });
-
-    queue.enqueue({ sequence: 1, text: "a", replay: false });
-    queue.enqueue({ sequence: 2, text: "b", replay: false });
-
-    expect(delivered).toEqual([{ sequence: 1, text: "a", replay: false }]);
-
-    vi.advanceTimersByTime(100);
-    expect(delivered).toEqual([
-      { sequence: 1, text: "a", replay: false },
-      { sequence: 1, text: "a", replay: false },
-    ]);
-
-    queue.consume({ sequence: 1 });
-    expect(delivered).toEqual([
-      { sequence: 1, text: "a", replay: false },
-      { sequence: 1, text: "a", replay: false },
-      { sequence: 2, text: "b", replay: false },
-    ]);
-
-    vi.useRealTimers();
-  });
-
-  it("delivers first chunk immediately and blocks later chunks until consumed", () => {
-    const delivered: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const queue = new TerminalOutputDeliveryQueue({
-      onDeliver: (chunk) => {
-        delivered.push(chunk);
-      },
-    });
-
-    queue.enqueue({ sequence: 1, text: "a", replay: false });
-    queue.enqueue({ sequence: 2, text: "b", replay: false });
-    queue.enqueue({ sequence: 3, text: "c", replay: false });
-
-    expect(delivered).toEqual([{ sequence: 1, text: "a", replay: false }]);
-
-    queue.consume({ sequence: 1 });
-    expect(delivered).toEqual([
-      { sequence: 1, text: "a", replay: false },
-      { sequence: 3, text: "bc", replay: false },
-    ]);
-  });
-
-  it("ignores stale consume acknowledgements", () => {
-    const delivered = vi.fn();
-    const queue = new TerminalOutputDeliveryQueue({ onDeliver: delivered });
-
-    queue.enqueue({ sequence: 1, text: "x", replay: false });
-    queue.consume({ sequence: 99 });
-    queue.enqueue({ sequence: 2, text: "y", replay: false });
-
-    expect(delivered).toHaveBeenCalledTimes(1);
-    expect(delivered).toHaveBeenNthCalledWith(1, { sequence: 1, text: "x", replay: false });
-
-    queue.consume({ sequence: 1 });
-
-    expect(delivered).toHaveBeenCalledTimes(2);
-    expect(delivered).toHaveBeenNthCalledWith(2, { sequence: 2, text: "y", replay: false });
-  });
-
-  it("resets in-flight and pending chunks", () => {
-    const delivered: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const queue = new TerminalOutputDeliveryQueue({
-      onDeliver: (chunk) => {
-        delivered.push(chunk);
-      },
-    });
-
-    queue.enqueue({ sequence: 1, text: "hello", replay: false });
-    queue.enqueue({ sequence: 2, text: " world", replay: false });
-
-    queue.reset();
-    queue.enqueue({ sequence: 3, text: "next", replay: false });
-
-    expect(delivered).toEqual([
-      { sequence: 1, text: "hello", replay: false },
-      { sequence: 3, text: "next", replay: false },
-    ]);
-  });
-
-  it("preserves empty chunk payloads for authoritative clears", () => {
-    const delivered: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const queue = new TerminalOutputDeliveryQueue({
-      onDeliver: (chunk) => {
-        delivered.push(chunk);
-      },
-    });
-
-    queue.enqueue({ sequence: 1, text: "abc", replay: false });
-    queue.consume({ sequence: 1 });
-    queue.enqueue({ sequence: 2, text: "", replay: false });
-
-    expect(delivered).toEqual([
-      { sequence: 1, text: "abc", replay: false },
-      { sequence: 2, text: "", replay: false },
-    ]);
-  });
-
-  it("treats clear chunks as a delivery barrier and drops pending stale text", () => {
-    const delivered: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const queue = new TerminalOutputDeliveryQueue({
-      onDeliver: (chunk) => {
-        delivered.push(chunk);
-      },
-    });
-
-    queue.enqueue({ sequence: 1, text: "a", replay: false });
-    queue.enqueue({ sequence: 2, text: "b", replay: false });
-    queue.enqueue({ sequence: 3, text: "", replay: false });
-    queue.enqueue({ sequence: 4, text: "c", replay: false });
-
-    expect(delivered).toEqual([{ sequence: 1, text: "a", replay: false }]);
-
-    queue.consume({ sequence: 1 });
-    expect(delivered).toEqual([
-      { sequence: 1, text: "a", replay: false },
-      { sequence: 3, text: "", replay: false },
-    ]);
-
-    queue.consume({ sequence: 3 });
-    expect(delivered).toEqual([
-      { sequence: 1, text: "a", replay: false },
-      { sequence: 3, text: "", replay: false },
-      { sequence: 4, text: "c", replay: false },
-    ]);
-  });
-});

packages/app/src/terminal/runtime/terminal-output-delivery-queue.ts

@@ -1,113 +0,0 @@
-export type TerminalOutputDeliveryChunk = {
-  sequence: number;
-  text: string;
-  replay: boolean;
-};
-
-export type TerminalOutputDeliveryQueueOptions = {
-  onDeliver: (chunk: TerminalOutputDeliveryChunk) => void;
-  deliveryTimeoutMs?: number;
-};
-
-const DEFAULT_DELIVERY_TIMEOUT_MS = 8_000;
-
-export class TerminalOutputDeliveryQueue {
-  private readonly pendingChunks: TerminalOutputDeliveryChunk[] = [];
-  private inFlightChunk: TerminalOutputDeliveryChunk | null = null;
-  private inFlightTimeout: ReturnType<typeof setTimeout> | null = null;
-  private lastSeenSequence = 0;
-  private readonly deliveryTimeoutMs: number;
-
-  constructor(private readonly options: TerminalOutputDeliveryQueueOptions) {
-    this.deliveryTimeoutMs = options.deliveryTimeoutMs ?? DEFAULT_DELIVERY_TIMEOUT_MS;
-  }
-
-  enqueue(chunk: TerminalOutputDeliveryChunk): void {
-    if (chunk.sequence <= 0) {
-      return;
-    }
-    if (chunk.sequence <= this.lastSeenSequence) {
-      return;
-    }
-    this.lastSeenSequence = chunk.sequence;
-
-    if (chunk.text.length === 0) {
-      this.pendingChunks.length = 0;
-      this.pendingChunks.push(chunk);
-      this.tryDeliver();
-      return;
-    }
-
-    const lastPendingChunk = this.pendingChunks[this.pendingChunks.length - 1];
-    if (
-      lastPendingChunk &&
-      lastPendingChunk.text.length > 0 &&
-      lastPendingChunk.replay === chunk.replay
-    ) {
-      lastPendingChunk.sequence = chunk.sequence;
-      lastPendingChunk.text += chunk.text;
-    } else {
-      this.pendingChunks.push(chunk);
-    }
-    this.tryDeliver();
-  }
-
-  consume(input: { sequence: number }): void {
-    if (this.inFlightChunk?.sequence !== input.sequence) {
-      return;
-    }
-
-    this.clearInFlightTimeout();
-    this.inFlightChunk = null;
-    this.tryDeliver();
-  }
-
-  reset(): void {
-    this.clearInFlightTimeout();
-    this.pendingChunks.length = 0;
-    this.inFlightChunk = null;
-    this.lastSeenSequence = 0;
-  }
-
-  private tryDeliver(): void {
-    if (this.inFlightChunk) {
-      return;
-    }
-    const nextChunk = this.pendingChunks.shift();
-    if (!nextChunk) {
-      return;
-    }
-
-    this.inFlightChunk = nextChunk;
-    this.deliverInFlightChunk();
-  }
-
-  private deliverInFlightChunk(): void {
-    const chunk = this.inFlightChunk;
-    if (!chunk) {
-      return;
-    }
-
-    this.clearInFlightTimeout();
-    this.inFlightTimeout = setTimeout(() => {
-      if (!this.inFlightChunk) {
-        return;
-      }
-      this.deliverInFlightChunk();
-    }, this.deliveryTimeoutMs);
-
-    this.options.onDeliver({
-      sequence: chunk.sequence,
-      text: chunk.text,
-      replay: chunk.replay,
-    });
-  }
-
-  private clearInFlightTimeout(): void {
-    if (!this.inFlightTimeout) {
-      return;
-    }
-    clearTimeout(this.inFlightTimeout);
-    this.inFlightTimeout = null;
-  }
-}

packages/app/src/terminal/runtime/terminal-output-pump.test.ts

@@ -1,99 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-
-import { TerminalOutputPump } from "./terminal-output-pump";
-
-describe("terminal-output-pump", () => {
-  it("batches selected-terminal chunk bursts into ordered flushes", () => {
-    vi.useFakeTimers();
-    const chunks: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const pump = new TerminalOutputPump({
-      maxOutputChars: 100,
-      onSelectedOutputChunk: (chunk) => {
-        chunks.push(chunk);
-      },
-    });
-
-    pump.setSelectedTerminal({ terminalId: "term-1" });
-    pump.append({ terminalId: "term-1", text: "a", replay: false });
-    pump.append({ terminalId: "term-1", text: "b", replay: false });
-    pump.append({ terminalId: "term-1", text: "c", replay: false });
-
-    expect(chunks).toEqual([]);
-
-    vi.runOnlyPendingTimers();
-
-    expect(chunks).toEqual([{ sequence: 1, text: "abc", replay: false }]);
-
-    vi.useRealTimers();
-  });
-
-  it("keeps per-terminal snapshots and switches selected stream deterministically", () => {
-    vi.useFakeTimers();
-    const chunks: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const pump = new TerminalOutputPump({
-      maxOutputChars: 10,
-      onSelectedOutputChunk: (chunk) => {
-        chunks.push(chunk);
-      },
-    });
-
-    pump.setSelectedTerminal({ terminalId: "term-1" });
-    pump.append({ terminalId: "term-1", text: "hello", replay: false });
-    vi.runOnlyPendingTimers();
-    expect(pump.readSnapshot({ terminalId: "term-1" })).toBe("hello");
-
-    pump.append({ terminalId: "term-2", text: "world", replay: false });
-    vi.runOnlyPendingTimers();
-    expect(pump.readSnapshot({ terminalId: "term-2" })).toBe("world");
-
-    pump.setSelectedTerminal({ terminalId: "term-2" });
-    pump.append({ terminalId: "term-2", text: "!", replay: false });
-    vi.runOnlyPendingTimers();
-
-    expect(chunks).toEqual([
-      { sequence: 1, text: "hello", replay: false },
-      { sequence: 2, text: "!", replay: false },
-    ]);
-
-    vi.useRealTimers();
-  });
-
-  it("resets selected output when clearing selected terminal", () => {
-    vi.useFakeTimers();
-    const chunks: Array<{ sequence: number; text: string; replay: boolean }> = [];
-    const pump = new TerminalOutputPump({
-      maxOutputChars: 10,
-      onSelectedOutputChunk: (chunk) => {
-        chunks.push(chunk);
-      },
-    });
-
-    pump.setSelectedTerminal({ terminalId: "term-1" });
-    pump.append({ terminalId: "term-1", text: "abc", replay: false });
-    vi.runOnlyPendingTimers();
-
-    pump.clearTerminal({ terminalId: "term-1" });
-
-    expect(pump.readSnapshot({ terminalId: "term-1" })).toBe("");
-    expect(chunks).toEqual([
-      { sequence: 1, text: "abc", replay: false },
-      { sequence: 2, text: "", replay: false },
-    ]);
-
-    vi.useRealTimers();
-  });
-
-  it("prunes orphaned terminal buffers", () => {
-    const pump = new TerminalOutputPump({
-      maxOutputChars: 100,
-      onSelectedOutputChunk: () => {},
-    });
-
-    pump.append({ terminalId: "a", text: "one", replay: false });
-    pump.append({ terminalId: "b", text: "two", replay: false });
-    pump.prune({ terminalIds: ["b"] });
-
-    expect(pump.readSnapshot({ terminalId: "a" })).toBe("");
-    expect(pump.readSnapshot({ terminalId: "b" })).toBe("two");
-  });
-});

packages/app/src/terminal/runtime/terminal-output-pump.ts

@@ -1,175 +0,0 @@
-import {
-  appendTerminalOutputBuffer,
-  createTerminalOutputBuffer,
-  readTerminalOutputBuffer,
-  type TerminalOutputBuffer,
-} from "@/utils/terminal-output-buffer";
-
-export type TerminalOutputChunk = {
-  sequence: number;
-  text: string;
-  replay: boolean;
-};
-
-export type TerminalOutputPumpOptions = {
-  maxOutputChars: number;
-  onSelectedOutputChunk: (chunk: TerminalOutputChunk) => void;
-};
-
-export type TerminalOutputPumpSetSelectedInput = {
-  terminalId: string | null;
-};
-
-export type TerminalOutputPumpAppendInput = {
-  terminalId: string;
-  text: string;
-  replay: boolean;
-};
-
-export type TerminalOutputPumpReadInput = {
-  terminalId: string | null;
-};
-
-export type TerminalOutputPumpClearInput = {
-  terminalId: string;
-};
-
-export type TerminalOutputPumpPruneInput = {
-  terminalIds: string[];
-};
-
-export class TerminalOutputPump {
-  private readonly buffersByTerminalId = new Map<string, TerminalOutputBuffer>();
-  private selectedTerminalId: string | null = null;
-  private selectedChunkSequence = 0;
-  private selectedChunkAccumulator = "";
-  private selectedChunkAccumulatorReplay: boolean | null = null;
-  private selectedChunkFlushTimer: ReturnType<typeof setTimeout> | null = null;
-
-  constructor(private readonly options: TerminalOutputPumpOptions) {}
-
-  setSelectedTerminal(input: TerminalOutputPumpSetSelectedInput): void {
-    if (this.selectedTerminalId === input.terminalId) {
-      return;
-    }
-
-    this.clearSelectedChunkFlushTimer();
-    this.selectedChunkAccumulator = "";
-    this.selectedChunkAccumulatorReplay = null;
-    this.selectedTerminalId = input.terminalId;
-  }
-
-  append(input: TerminalOutputPumpAppendInput): void {
-    if (input.text.length === 0) {
-      return;
-    }
-
-    let buffer = this.buffersByTerminalId.get(input.terminalId);
-    if (!buffer) {
-      buffer = createTerminalOutputBuffer();
-      this.buffersByTerminalId.set(input.terminalId, buffer);
-    }
-
-    appendTerminalOutputBuffer({
-      buffer,
-      text: input.text,
-      maxChars: this.options.maxOutputChars,
-    });
-
-    if (this.selectedTerminalId !== input.terminalId) {
-      return;
-    }
-
-    if (
-      this.selectedChunkAccumulator.length > 0 &&
-      typeof this.selectedChunkAccumulatorReplay === "boolean" &&
-      this.selectedChunkAccumulatorReplay !== input.replay
-    ) {
-      this.flushSelectedChunkAccumulator();
-    }
-
-    if (this.selectedChunkAccumulator.length === 0) {
-      this.selectedChunkAccumulatorReplay = input.replay;
-    }
-
-    this.selectedChunkAccumulator += input.text;
-    this.scheduleSelectedChunkFlush();
-  }
-
-  clearTerminal(input: TerminalOutputPumpClearInput): void {
-    this.buffersByTerminalId.delete(input.terminalId);
-    if (this.selectedTerminalId === input.terminalId) {
-      this.clearSelectedChunkFlushTimer();
-      this.selectedChunkAccumulator = "";
-      this.selectedChunkAccumulatorReplay = null;
-      this.emitSelectedChunk({ text: "", replay: false });
-    }
-  }
-
-  prune(input: TerminalOutputPumpPruneInput): void {
-    const terminalIdSet = new Set(input.terminalIds);
-    for (const terminalId of Array.from(this.buffersByTerminalId.keys())) {
-      if (!terminalIdSet.has(terminalId)) {
-        this.buffersByTerminalId.delete(terminalId);
-      }
-    }
-  }
-
-  readSnapshot(input: TerminalOutputPumpReadInput): string {
-    if (!input.terminalId) {
-      return "";
-    }
-    const buffer = this.buffersByTerminalId.get(input.terminalId);
-    if (!buffer) {
-      return "";
-    }
-    return readTerminalOutputBuffer({ buffer });
-  }
-
-  dispose(): void {
-    this.clearSelectedChunkFlushTimer();
-    this.selectedChunkAccumulator = "";
-    this.selectedTerminalId = null;
-    this.buffersByTerminalId.clear();
-  }
-
-  private scheduleSelectedChunkFlush(): void {
-    if (this.selectedChunkFlushTimer) {
-      return;
-    }
-
-    this.selectedChunkFlushTimer = setTimeout(() => {
-      this.selectedChunkFlushTimer = null;
-      this.flushSelectedChunkAccumulator();
-    }, 0);
-  }
-
-  private flushSelectedChunkAccumulator(): void {
-    if (this.selectedChunkAccumulator.length === 0) {
-      return;
-    }
-
-    const text = this.selectedChunkAccumulator;
-    const replay = this.selectedChunkAccumulatorReplay ?? false;
-    this.selectedChunkAccumulator = "";
-    this.selectedChunkAccumulatorReplay = null;
-    this.emitSelectedChunk({ text, replay });
-  }
-
-  private emitSelectedChunk(input: { text: string; replay: boolean }): void {
-    this.selectedChunkSequence += 1;
-    this.options.onSelectedOutputChunk({
-      sequence: this.selectedChunkSequence,
-      text: input.text,
-      replay: input.replay,
-    });
-  }
-
-  private clearSelectedChunkFlushTimer(): void {
-    if (!this.selectedChunkFlushTimer) {
-      return;
-    }
-    clearTimeout(this.selectedChunkFlushTimer);
-    this.selectedChunkFlushTimer = null;
-  }
-}

packages/app/src/terminal/runtime/terminal-output-session.test.ts

@@ -1,97 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import {
-  getTerminalOutputSession,
-  releaseTerminalOutputSession,
-  retainTerminalOutputSession,
-} from "./terminal-output-session";
-
-describe("terminal-output-session", () => {
-  async function flushAsyncWork(): Promise<void> {
-    await Promise.resolve();
-    await new Promise<void>((resolve) => {
-      setTimeout(() => resolve(), 0);
-    });
-    await Promise.resolve();
-  }
-
-  it("returns the same session instance for the same scope key", () => {
-    const a = getTerminalOutputSession({
-      scopeKey: "scope-a",
-      maxOutputChars: 1_000,
-    });
-    const b = getTerminalOutputSession({
-      scopeKey: "scope-a",
-      maxOutputChars: 50,
-    });
-
-    expect(a).toBe(b);
-  });
-
-  it("evicts a scope session when the retain count returns to zero", () => {
-    const scopeKey = "scope-retain-release";
-    const first = getTerminalOutputSession({
-      scopeKey,
-      maxOutputChars: 1_000,
-    });
-
-    retainTerminalOutputSession({ scopeKey });
-    releaseTerminalOutputSession({ scopeKey });
-
-    const second = getTerminalOutputSession({
-      scopeKey,
-      maxOutputChars: 1_000,
-    });
-
-    expect(second).not.toBe(first);
-  });
-
-  it("publishes selected terminal snapshot and chunk state via delivery/consume", async () => {
-    const session = getTerminalOutputSession({
-      scopeKey: "scope-session-state",
-      maxOutputChars: 1_000,
-    });
-
-    session.setSelectedTerminal({ terminalId: null });
-    session.setSelectedTerminal({ terminalId: "term-1" });
-
-    session.append({
-      terminalId: "term-1",
-      text: "abc",
-      replay: false,
-    });
-    await flushAsyncWork();
-
-    const stateAfterAppend = session.getState();
-    expect(stateAfterAppend.selectedTerminalId).toBe("term-1");
-    expect(stateAfterAppend.chunkSequence).toBeGreaterThan(0);
-    expect(stateAfterAppend.chunkText).toBe("abc");
-    expect(stateAfterAppend.snapshotText).toBe("abc");
-    expect(stateAfterAppend.snapshotSequence).toBe(stateAfterAppend.chunkSequence);
-
-    session.consume({ sequence: stateAfterAppend.chunkSequence });
-
-    const stateAfterConsume = session.getState();
-    expect(stateAfterConsume.snapshotText).toBe("abc");
-  });
-
-  it("keeps chunks for non-selected terminals out of selected state", async () => {
-    const session = getTerminalOutputSession({
-      scopeKey: "scope-other-terminal",
-      maxOutputChars: 1_000,
-    });
-
-    session.setSelectedTerminal({ terminalId: "term-1" });
-    session.append({
-      terminalId: "term-2",
-      text: "hidden",
-      replay: false,
-    });
-    await flushAsyncWork();
-
-    const state = session.getState();
-    expect(state.selectedTerminalId).toBe("term-1");
-    expect(state.chunkText).toBe("");
-    expect(state.snapshotText).toBe("");
-  });
-});

packages/app/src/terminal/runtime/terminal-output-session.ts

@@ -1,184 +0,0 @@
-import { TerminalOutputPump, type TerminalOutputChunk } from "./terminal-output-pump";
-import {
-  TerminalOutputDeliveryQueue,
-  type TerminalOutputDeliveryChunk,
-} from "./terminal-output-delivery-queue";
-
-type TerminalOutputState = {
-  selectedTerminalId: string | null;
-  snapshotText: string;
-  snapshotSequence: number;
-  chunkText: string;
-  chunkSequence: number;
-  chunkReplay: boolean;
-};
-
-const EMPTY_STATE: TerminalOutputState = {
-  selectedTerminalId: null,
-  snapshotText: "",
-  snapshotSequence: 0,
-  chunkText: "",
-  chunkSequence: 0,
-  chunkReplay: false,
-};
-
-export type TerminalOutputSessionAppendInput = {
-  terminalId: string;
-  text: string;
-  replay: boolean;
-};
-
-export type TerminalOutputSessionSetSelectedInput = {
-  terminalId: string | null;
-};
-
-export type TerminalOutputSessionPruneInput = {
-  terminalIds: string[];
-};
-
-export type TerminalOutputSessionConsumeInput = {
-  sequence: number;
-};
-
-export type TerminalOutputSessionReadSnapshotInput = {
-  terminalId: string | null;
-};
-
-export class TerminalOutputSession {
-  private readonly listeners = new Set<() => void>();
-  private readonly outputPump: TerminalOutputPump;
-  private readonly deliveryQueue: TerminalOutputDeliveryQueue;
-  private state: TerminalOutputState = EMPTY_STATE;
-
-  constructor(input: { maxOutputChars: number }) {
-    this.outputPump = new TerminalOutputPump({
-      maxOutputChars: input.maxOutputChars,
-      onSelectedOutputChunk: (chunk: TerminalOutputChunk) => {
-        this.deliveryQueue.enqueue(chunk);
-      },
-    });
-
-    this.deliveryQueue = new TerminalOutputDeliveryQueue({
-      onDeliver: (chunk: TerminalOutputDeliveryChunk) => {
-        const snapshotText = this.outputPump.readSnapshot({
-          terminalId: this.state.selectedTerminalId,
-        });
-        this.state = {
-          ...this.state,
-          snapshotText,
-          snapshotSequence: chunk.sequence,
-          chunkText: chunk.text,
-          chunkSequence: chunk.sequence,
-          chunkReplay: chunk.replay,
-        };
-        this.emit();
-      },
-    });
-  }
-
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  getState(): TerminalOutputState {
-    return this.state;
-  }
-
-  setSelectedTerminal(input: TerminalOutputSessionSetSelectedInput): void {
-    if (this.state.selectedTerminalId === input.terminalId) {
-      return;
-    }
-
-    this.deliveryQueue.reset();
-    this.outputPump.setSelectedTerminal({ terminalId: input.terminalId });
-    const snapshotText = this.outputPump.readSnapshot({
-      terminalId: input.terminalId,
-    });
-    this.state = {
-      selectedTerminalId: input.terminalId,
-      snapshotText,
-      snapshotSequence: this.state.snapshotSequence,
-      chunkText: "",
-      chunkSequence: 0,
-      chunkReplay: false,
-    };
-    this.emit();
-  }
-
-  append(input: TerminalOutputSessionAppendInput): void {
-    this.outputPump.append(input);
-  }
-
-  readSnapshot(input: TerminalOutputSessionReadSnapshotInput): string {
-    return this.outputPump.readSnapshot(input);
-  }
-
-  clearTerminal(input: { terminalId: string }): void {
-    this.outputPump.clearTerminal(input);
-    if (this.state.selectedTerminalId !== input.terminalId) {
-      return;
-    }
-
-    this.deliveryQueue.reset();
-    this.state = {
-      ...this.state,
-      snapshotText: "",
-      chunkText: "",
-      chunkSequence: 0,
-      chunkReplay: false,
-    };
-    this.emit();
-  }
-
-  prune(input: TerminalOutputSessionPruneInput): void {
-    this.outputPump.prune(input);
-  }
-
-  consume(input: TerminalOutputSessionConsumeInput): void {
-    this.deliveryQueue.consume(input);
-  }
-
-  private emit(): void {
-    for (const listener of this.listeners) {
-      listener();
-    }
-  }
-}
-
-const sessionsByScopeKey = new Map<string, TerminalOutputSession>();
-const sessionRefCountByScopeKey = new Map<string, number>();
-
-export function getTerminalOutputSession(input: {
-  scopeKey: string;
-  maxOutputChars: number;
-}): TerminalOutputSession {
-  const existing = sessionsByScopeKey.get(input.scopeKey);
-  if (existing) {
-    return existing;
-  }
-
-  const session = new TerminalOutputSession({
-    maxOutputChars: input.maxOutputChars,
-  });
-  sessionsByScopeKey.set(input.scopeKey, session);
-  return session;
-}
-
-export function retainTerminalOutputSession(input: { scopeKey: string }): void {
-  const current = sessionRefCountByScopeKey.get(input.scopeKey) ?? 0;
-  sessionRefCountByScopeKey.set(input.scopeKey, current + 1);
-}
-
-export function releaseTerminalOutputSession(input: { scopeKey: string }): void {
-  const current = sessionRefCountByScopeKey.get(input.scopeKey) ?? 0;
-  if (current <= 1) {
-    sessionRefCountByScopeKey.delete(input.scopeKey);
-    sessionsByScopeKey.delete(input.scopeKey);
-    return;
-  }
-
-  sessionRefCountByScopeKey.set(input.scopeKey, current - 1);
-}

packages/app/src/terminal/runtime/terminal-snapshot.test.ts

@@ -0,0 +1,147 @@
+import { Terminal as HeadlessTerminal } from "@xterm/headless";
+import { Terminal as ClientTerminal } from "@xterm/xterm";
+import { describe, expect, it } from "vitest";
+
+import { renderTerminalSnapshotToAnsi } from "./terminal-snapshot";
+
+type SnapshotCell = {
+  char: string;
+  fg: number | undefined;
+  bg: number | undefined;
+  fgMode?: number;
+  bgMode?: number;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+};
+
+type SnapshotState = {
+  rows: number;
+  cols: number;
+  grid: SnapshotCell[][];
+  scrollback: SnapshotCell[][];
+  cursor: {
+    row: number;
+    col: number;
+    hidden?: boolean;
+    style?: "block" | "underline" | "bar";
+    blink?: boolean;
+  };
+};
+
+async function writeToTerminal(
+  terminal: Pick<ClientTerminal | HeadlessTerminal, "write">,
+  text: string,
+): Promise<void> {
+  await new Promise<void>((resolve) => {
+    terminal.write(text, () => resolve());
+  });
+}
+
+function extractState(terminal: ClientTerminal | HeadlessTerminal): SnapshotState {
+  const grid: SnapshotCell[][] = [];
+  const scrollback: SnapshotCell[][] = [];
+  const buffer = terminal.buffer.active;
+  const baseY = buffer.baseY;
+
+  for (let row = 0; row < baseY; row += 1) {
+    scrollback.push(extractRow(terminal, row));
+  }
+  for (let row = 0; row < terminal.rows; row += 1) {
+    grid.push(extractRow(terminal, baseY + row));
+  }
+
+  return {
+    rows: terminal.rows,
+    cols: terminal.cols,
+    grid,
+    scrollback,
+    cursor: extractCursorState(terminal),
+  };
+}
+
+function extractCursorState(
+  terminal: ClientTerminal | HeadlessTerminal,
+): SnapshotState["cursor"] {
+  const buffer = terminal.buffer.active;
+  const coreService = (terminal as any)._core?.coreService;
+  const cursorStyle = coreService?.decPrivateModes?.cursorStyle;
+  const normalizedCursorStyle =
+    cursorStyle === "block" || cursorStyle === "underline" || cursorStyle === "bar"
+      ? cursorStyle
+      : undefined;
+  const cursorBlink =
+    typeof coreService?.decPrivateModes?.cursorBlink === "boolean"
+      ? coreService.decPrivateModes.cursorBlink
+      : undefined;
+  const hidden = Boolean(coreService?.isCursorHidden);
+
+  return {
+    row: buffer.cursorY,
+    col: buffer.cursorX,
+    ...(hidden ? { hidden: true } : {}),
+    ...(normalizedCursorStyle ? { style: normalizedCursorStyle } : {}),
+    ...(typeof cursorBlink === "boolean" ? { blink: cursorBlink } : {}),
+  };
+}
+
+function extractRow(terminal: ClientTerminal | HeadlessTerminal, row: number): SnapshotCell[] {
+  const cells: SnapshotCell[] = [];
+  const line = terminal.buffer.active.getLine(row);
+
+  for (let col = 0; col < terminal.cols; col += 1) {
+    const cell = line?.getCell(col);
+    if (!cell) {
+      cells.push({ char: " ", fg: undefined, bg: undefined });
+      continue;
+    }
+    const fgModeRaw = cell.getFgColorMode();
+    const bgModeRaw = cell.getBgColorMode();
+    const fgMode = fgModeRaw >> 24;
+    const bgMode = bgModeRaw >> 24;
+    cells.push({
+      char: cell.getChars() || " ",
+      fg: fgMode !== 0 ? cell.getFgColor() : undefined,
+      bg: bgMode !== 0 ? cell.getBgColor() : undefined,
+      fgMode: fgMode !== 0 ? fgMode : undefined,
+      bgMode: bgMode !== 0 ? bgMode : undefined,
+      bold: cell.isBold() !== 0,
+      italic: cell.isItalic() !== 0,
+      underline: cell.isUnderline() !== 0,
+    });
+  }
+
+  return cells;
+}
+
+describe("terminal-snapshot", () => {
+  it("replays extracted terminal state into a client xterm with matching grid, scrollback, and cursor presentation", async () => {
+    const source = new HeadlessTerminal({
+      rows: 4,
+      cols: 12,
+      allowProposedApi: true,
+      scrollback: 100,
+    });
+
+    await writeToTerminal(source, "plain\r\n");
+    await writeToTerminal(source, "\u001b[31mred\u001b[0m\r\n");
+    await writeToTerminal(source, "\u001b[1mbold\u001b[0m\r\n");
+    await writeToTerminal(source, "cursor");
+    await writeToTerminal(source, "\u001b[2D");
+    await writeToTerminal(source, "\u001b[2 q");
+    await writeToTerminal(source, "\u001b[?25l");
+
+    const snapshot = extractState(source);
+
+    const client = new ClientTerminal({
+      rows: snapshot.rows,
+      cols: snapshot.cols,
+      allowProposedApi: true,
+      scrollback: 100,
+    });
+
+    await writeToTerminal(client, renderTerminalSnapshotToAnsi(snapshot));
+
+    expect(extractState(client)).toEqual(snapshot);
+  });
+});

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

@@ -0,0 +1,205 @@
+import type { TerminalCell, TerminalState } from "@server/shared/messages";
+
+type TerminalStyle = {
+  fg: number | undefined;
+  bg: number | undefined;
+  fgMode: number | undefined;
+  bgMode: number | undefined;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  dim: boolean;
+  inverse: boolean;
+  strikethrough: boolean;
+};
+
+const DEFAULT_STYLE: TerminalStyle = {
+  fg: undefined,
+  bg: undefined,
+  fgMode: undefined,
+  bgMode: undefined,
+  bold: false,
+  italic: false,
+  underline: false,
+  dim: false,
+  inverse: false,
+  strikethrough: false,
+};
+
+export function renderTerminalSnapshotToAnsi(state: TerminalState): string {
+  const rows = [...state.scrollback, ...state.grid];
+  const lines: string[] = ["\u001b[?7l"];
+
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+    const row = rows[rowIndex] ?? [];
+    lines.push(renderTerminalRow(row));
+    if (rowIndex < rows.length - 1) {
+      lines.push("\r\n");
+    }
+  }
+
+  lines.push("\u001b[0m");
+  const cursorPresentationAnsi = renderCursorPresentationToAnsi(state.cursor);
+  if (cursorPresentationAnsi) {
+    lines.push(cursorPresentationAnsi);
+  }
+  lines.push(`\u001b[${state.cursor.row + 1};${state.cursor.col + 1}H`);
+  lines.push(state.cursor.hidden ? "\u001b[?25l" : "\u001b[?25h");
+  lines.push("\u001b[?7h");
+  return lines.join("");
+}
+
+function renderCursorPresentationToAnsi(cursor: TerminalState["cursor"]): string | null {
+  if (!cursor.style) {
+    return null;
+  }
+
+  const cursorStyleCode = (() => {
+    if (cursor.style === "block") {
+      return cursor.blink === false ? 2 : 1;
+    }
+    if (cursor.style === "underline") {
+      return cursor.blink === false ? 4 : 3;
+    }
+    return cursor.blink === false ? 6 : 5;
+  })();
+
+  return `\u001b[${cursorStyleCode} q`;
+}
+
+function renderTerminalRow(row: TerminalCell[]): string {
+  const output: string[] = [];
+  const length = getTerminalRowLength(row);
+  let previousStyle = DEFAULT_STYLE;
+
+  for (let index = 0; index < length; index += 1) {
+    const cell = row[index] ?? { char: " " };
+    const nextStyle = getTerminalStyle(cell);
+    if (!terminalStylesEqual(previousStyle, nextStyle)) {
+      output.push(styleToAnsi(nextStyle));
+      previousStyle = nextStyle;
+    }
+    output.push(cell.char || " ");
+  }
+
+  if (!terminalStylesEqual(previousStyle, DEFAULT_STYLE)) {
+    output.push("\u001b[0m");
+  }
+
+  return output.join("");
+}
+
+function getTerminalRowLength(row: TerminalCell[]): number {
+  for (let index = row.length - 1; index >= 0; index -= 1) {
+    const cell = row[index];
+    if (!cell) {
+      continue;
+    }
+    if (cell.char !== " ") {
+      return index + 1;
+    }
+    if (
+      cell.fg !== undefined ||
+      cell.bg !== undefined ||
+      cell.fgMode !== undefined ||
+      cell.bgMode !== undefined ||
+      cell.bold ||
+      cell.italic ||
+      cell.underline ||
+      cell.dim ||
+      cell.inverse ||
+      cell.strikethrough
+    ) {
+      return index + 1;
+    }
+  }
+  return 0;
+}
+
+function getTerminalStyle(cell: TerminalCell): TerminalStyle {
+  return {
+    fg: cell.fg,
+    bg: cell.bg,
+    fgMode: cell.fgMode,
+    bgMode: cell.bgMode,
+    bold: Boolean(cell.bold),
+    italic: Boolean(cell.italic),
+    underline: Boolean(cell.underline),
+    dim: Boolean(cell.dim),
+    inverse: Boolean(cell.inverse),
+    strikethrough: Boolean(cell.strikethrough),
+  };
+}
+
+function terminalStylesEqual(left: TerminalStyle, right: TerminalStyle): boolean {
+  return (
+    left.fg === right.fg &&
+    left.bg === right.bg &&
+    left.fgMode === right.fgMode &&
+    left.bgMode === right.bgMode &&
+    left.bold === right.bold &&
+    left.italic === right.italic &&
+    left.underline === right.underline &&
+    left.dim === right.dim &&
+    left.inverse === right.inverse &&
+    left.strikethrough === right.strikethrough
+  );
+}
+
+function styleToAnsi(style: TerminalStyle): string {
+  const codes = ["0"];
+
+  if (style.bold) {
+    codes.push("1");
+  }
+  if (style.dim) {
+    codes.push("2");
+  }
+  if (style.italic) {
+    codes.push("3");
+  }
+  if (style.underline) {
+    codes.push("4");
+  }
+  if (style.inverse) {
+    codes.push("7");
+  }
+  if (style.strikethrough) {
+    codes.push("9");
+  }
+
+  if (style.fg !== undefined && style.fgMode !== undefined) {
+    codes.push(...colorToSgr(style.fgMode, style.fg, false));
+  }
+
+  if (style.bg !== undefined && style.bgMode !== undefined) {
+    codes.push(...colorToSgr(style.bgMode, style.bg, true));
+  }
+
+  return `\u001b[${codes.join(";")}m`;
+}
+
+function colorToSgr(mode: number, value: number, background: boolean): string[] {
+  if (mode === 1) {
+    if (value >= 8) {
+      return [String((background ? 100 : 90) + (value - 8))];
+    }
+    return [String((background ? 40 : 30) + value)];
+  }
+
+  if (mode === 2) {
+    return [background ? "48" : "38", "5", String(value)];
+  }
+
+  if (mode === 3) {
+    return [
+      background ? "48" : "38",
+      "2",
+      String((value >> 16) & 0xff),
+      String((value >> 8) & 0xff),
+      String(value & 0xff),
+    ];
+  }
+
+  return [];
+}

packages/app/src/terminal/runtime/terminal-stream-controller.test.ts

@@ -2,586 +2,180 @@ import { describe, expect, it } from "vitest";
 
 import {
   TerminalStreamController,
-  type TerminalStreamControllerAttachPayload,
-  type TerminalStreamControllerChunk,
   type TerminalStreamControllerClient,
-  type TerminalStreamControllerResumeOffsets,
   type TerminalStreamControllerStatus,
 } from "./terminal-stream-controller";
 
-type FakeStreamSubscriber = (chunk: TerminalStreamControllerChunk) => void;
+type TerminalSnapshot = {
+  rows: number;
+  cols: number;
+  grid: Array<Array<{ char: string }>>;
+  scrollback: Array<Array<{ char: string }>>;
+  cursor: { row: number; col: number };
+};
+
+type TerminalStreamEvent =
+  | { terminalId: string; type: "output"; data: Uint8Array }
+  | { terminalId: string; type: "snapshot"; state: TerminalSnapshot };
 
 class FakeTerminalStreamClient implements TerminalStreamControllerClient {
-  private readonly streamSubscribers = new Map<number, Set<FakeStreamSubscriber>>();
-  private readonly pendingChunksByStreamId = new Map<number, TerminalStreamControllerChunk[]>();
-  public attachCalls: Array<{
-    terminalId: string;
-    options?: {
-      resumeOffset?: number;
-      rows?: number;
-      cols?: number;
-    };
-  }> = [];
-  public detachCalls: number[] = [];
-  public nextAttachResponses: TerminalStreamControllerAttachPayload[] = [];
+  private readonly listeners = new Set<(event: TerminalStreamEvent) => void>();
+  public subscribeCalls: string[] = [];
+  public unsubscribeCalls: string[] = [];
+  public resizeCalls: Array<{ terminalId: string; rows: number; cols: number }> = [];
+  public nextSubscribeResults: Array<{ terminalId: string; error?: string | null }> = [];
 
-  async attachTerminalStream(
+  async subscribeTerminal(terminalId: string) {
+    this.subscribeCalls.push(terminalId);
+    const result = this.nextSubscribeResults.shift();
+    if (!result) {
+      throw new Error("Missing fake subscribe result");
+    }
+    return result;
+  }
+
+  unsubscribeTerminal(terminalId: string): void {
+    this.unsubscribeCalls.push(terminalId);
+  }
+
+  sendTerminalInput(
     terminalId: string,
-    options?: {
-      resumeOffset?: number;
-      rows?: number;
-      cols?: number;
-    },
-  ): Promise<TerminalStreamControllerAttachPayload> {
-    this.attachCalls.push({ terminalId, options });
-    const response = this.nextAttachResponses.shift();
-    if (!response) {
-      throw new Error("Missing fake attach response");
-    }
-    return response;
+    message: { type: "resize"; rows: number; cols: number },
+  ): void {
+    this.resizeCalls.push({ terminalId, rows: message.rows, cols: message.cols });
   }
 
-  async detachTerminalStream(streamId: number): Promise<void> {
-    this.detachCalls.push(streamId);
-  }
-
-  onTerminalStreamData(
-    streamId: number,
-    handler: (chunk: TerminalStreamControllerChunk) => void,
-  ): () => void {
-    const pendingChunks = this.pendingChunksByStreamId.get(streamId);
-    if (pendingChunks && pendingChunks.length > 0) {
-      for (const chunk of pendingChunks) {
-        handler(chunk);
-      }
-      this.pendingChunksByStreamId.delete(streamId);
-    }
-
-    const subscribers = this.streamSubscribers.get(streamId) ?? new Set();
-    subscribers.add(handler);
-    this.streamSubscribers.set(streamId, subscribers);
+  onTerminalStreamEvent(handler: (event: TerminalStreamEvent) => void): () => void {
+    this.listeners.add(handler);
     return () => {
-      const current = this.streamSubscribers.get(streamId);
-      current?.delete(handler);
-      if (current && current.size === 0) {
-        this.streamSubscribers.delete(streamId);
-      }
+      this.listeners.delete(handler);
     };
   }
 
-  emitChunk(input: {
-    streamId: number;
-    offset?: number;
-    endOffset: number;
-    replay?: boolean;
-    data: string;
-  }): void {
-    const subscribers = this.streamSubscribers.get(input.streamId);
-    if (!subscribers || subscribers.size === 0) {
-      return;
+  emit(event: TerminalStreamEvent): void {
+    for (const listener of this.listeners) {
+      listener(event);
     }
-    const bytes = new TextEncoder().encode(input.data);
-    const chunk: TerminalStreamControllerChunk = {
-      offset: input.offset ?? input.endOffset - bytes.byteLength,
-      endOffset: input.endOffset,
-      replay: input.replay,
-      data: bytes,
-    };
-    for (const subscriber of subscribers) {
-      subscriber(chunk);
-    }
-  }
-
-  bufferChunk(input: {
-    streamId: number;
-    offset?: number;
-    endOffset: number;
-    replay?: boolean;
-    data: string;
-  }): void {
-    const chunks = this.pendingChunksByStreamId.get(input.streamId) ?? [];
-    const bytes = new TextEncoder().encode(input.data);
-    chunks.push({
-      offset: input.offset ?? input.endOffset - bytes.byteLength,
-      endOffset: input.endOffset,
-      replay: input.replay,
-      data: bytes,
-    });
-    this.pendingChunksByStreamId.set(input.streamId, chunks);
   }
 }
 
-function createControllerHarness(input?: {
-  client?: FakeTerminalStreamClient;
-  resumeOffsets?: TerminalStreamControllerResumeOffsets;
-}): {
-  client: FakeTerminalStreamClient;
-  chunks: Array<{ terminalId: string; text: string }>;
-  statuses: TerminalStreamControllerStatus[];
-  resets: string[];
-  controller: TerminalStreamController;
-} {
+function createHarness(input?: { client?: FakeTerminalStreamClient }) {
   const client = input?.client ?? new FakeTerminalStreamClient();
-  const chunks: Array<{ terminalId: string; text: string }> = [];
+  const outputs: Array<{ terminalId: string; text: string }> = [];
+  const snapshots: Array<{ terminalId: string; text: string }> = [];
   const statuses: TerminalStreamControllerStatus[] = [];
-  const resets: string[] = [];
-
   const controller = new TerminalStreamController({
     client,
     getPreferredSize: () => ({ rows: 24, cols: 80 }),
-    resumeOffsets: input?.resumeOffsets,
-    onChunk: (chunk) => {
-      chunks.push({
-        terminalId: chunk.terminalId,
-        text: chunk.text,
+    onOutput: (output) => {
+      outputs.push(output);
+    },
+    onSnapshot: ({ terminalId, state }) => {
+      snapshots.push({
+        terminalId,
+        text: state.grid.map((row) => row.map((cell) => cell.char).join("")).join("\n"),
       });
     },
     onStatusChange: (status) => {
       statuses.push(status);
     },
-    onReset: ({ terminalId }) => {
-      resets.push(terminalId);
-    },
-    waitForDelay: async () => {},
   });
 
-  return {
-    client,
-    chunks,
-    statuses,
-    resets,
-    controller,
-  };
+  return { client, controller, outputs, snapshots, statuses };
 }
 
 async function flushAsyncWork(): Promise<void> {
   await Promise.resolve();
-  await new Promise<void>((resolve) => {
-    setTimeout(() => resolve(), 0);
-  });
   await Promise.resolve();
 }
 
 describe("terminal-stream-controller", () => {
-  it("streams burst chunks in order without dropping intermediate chunks", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 7,
-      currentOffset: 0,
-      reset: false,
-      error: null,
-    });
+  it("subscribes, resizes, and forwards snapshot/output events", async () => {
+    const harness = createHarness();
+    harness.client.nextSubscribeResults.push({ terminalId: "term-1", error: null });
 
     harness.controller.setTerminal({ terminalId: "term-1" });
     await flushAsyncWork();
 
-    harness.client.emitChunk({
-      streamId: 7,
-      endOffset: 1,
-      data: "a",
+    harness.client.emit({
+      terminalId: "term-1",
+      type: "snapshot",
+      state: {
+        rows: 1,
+        cols: 5,
+        grid: [[{ char: "h" }, { char: "e" }, { char: "l" }, { char: "l" }, { char: "o" }]],
+        scrollback: [],
+        cursor: { row: 0, col: 5 },
+      },
     });
-    harness.client.emitChunk({
-      streamId: 7,
-      endOffset: 2,
-      data: "b",
-    });
-    harness.client.emitChunk({
-      streamId: 7,
-      endOffset: 3,
-      data: "c",
+    harness.client.emit({
+      terminalId: "term-1",
+      type: "output",
+      data: new TextEncoder().encode(" world"),
     });
 
-    expect(harness.chunks).toEqual([
-      { terminalId: "term-1", text: "a" },
-      { terminalId: "term-1", text: "b" },
-      { terminalId: "term-1", text: "c" },
-    ]);
+    expect(harness.client.subscribeCalls).toEqual(["term-1"]);
+    expect(harness.client.resizeCalls).toEqual([{ terminalId: "term-1", rows: 24, cols: 80 }]);
+    expect(harness.snapshots).toEqual([{ terminalId: "term-1", text: "hello" }]);
+    expect(harness.outputs).toEqual([{ terminalId: "term-1", text: " world" }]);
+    expect(harness.statuses.at(-1)).toEqual({
+      terminalId: "term-1",
+      isAttaching: false,
+      error: null,
+    });
   });
 
-  it("retries retryable attach failures and then attaches", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: null,
-      currentOffset: 0,
-      reset: false,
+  it("surfaces subscribe failures without retrying", async () => {
+    const harness = createHarness();
+    harness.client.nextSubscribeResults.push({
+      terminalId: "term-1",
       error: "network disconnected",
     });
-    harness.client.nextAttachResponses.push({
-      streamId: 9,
-      currentOffset: 5,
-      reset: false,
-      error: null,
-    });
 
     harness.controller.setTerminal({ terminalId: "term-1" });
     await flushAsyncWork();
 
-    expect(harness.client.attachCalls.length).toBe(2);
-    expect(harness.client.attachCalls[1]?.options).toEqual({
-      resumeOffset: 0,
-      rows: 24,
-      cols: 80,
-    });
-    expect(harness.controller.getActiveStreamId()).toBe(9);
+    expect(harness.client.subscribeCalls).toEqual(["term-1"]);
     expect(harness.statuses.at(-1)).toEqual({
       terminalId: "term-1",
-      streamId: 9,
       isAttaching: false,
-      error: null,
+      error: "network disconnected",
     });
   });
 
-  it("handles stream exit by reconnecting on the same terminal", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 3,
-      currentOffset: 0,
-      reset: false,
-      error: null,
-    });
-    harness.client.nextAttachResponses.push({
-      streamId: 4,
-      currentOffset: 2,
-      reset: false,
-      error: null,
-    });
+  it("treats terminal exit as final and does not reconnect", async () => {
+    const harness = createHarness();
+    harness.client.nextSubscribeResults.push({ terminalId: "term-1", error: null });
 
     harness.controller.setTerminal({ terminalId: "term-1" });
     await flushAsyncWork();
-
-    harness.client.emitChunk({
-      streamId: 3,
-      endOffset: 2,
-      data: "hi",
-    });
-    harness.controller.handleStreamExit({
-      terminalId: "term-1",
-      streamId: 3,
-    });
+    harness.controller.handleTerminalExit({ terminalId: "term-1" });
     await flushAsyncWork();
 
-    expect(harness.client.attachCalls.length).toBe(2);
-    expect(harness.client.attachCalls[1]?.options).toEqual({
-      resumeOffset: 2,
-      rows: 24,
-      cols: 80,
-    });
-    expect(harness.controller.getActiveStreamId()).toBe(4);
+    expect(harness.client.subscribeCalls).toEqual(["term-1"]);
     expect(harness.statuses.at(-1)).toEqual({
       terminalId: "term-1",
-      streamId: 4,
+      isAttaching: false,
+      error: "Terminal exited",
+    });
+  });
+
+  it("unsubscribes when switching terminals and on dispose", async () => {
+    const harness = createHarness();
+    harness.client.nextSubscribeResults.push({ terminalId: "term-1", error: null });
+    harness.client.nextSubscribeResults.push({ terminalId: "term-2", error: null });
+
+    harness.controller.setTerminal({ terminalId: "term-1" });
+    await flushAsyncWork();
+    harness.controller.setTerminal({ terminalId: "term-2" });
+    await flushAsyncWork();
+    harness.controller.dispose();
+
+    expect(harness.client.unsubscribeCalls).toEqual(["term-1", "term-2"]);
+    expect(harness.statuses.at(-1)).toEqual({
+      terminalId: null,
       isAttaching: false,
       error: null,
     });
   });
-
-  it("recovers when stream exits before initial attach completes", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 1,
-      currentOffset: 1200,
-      reset: false,
-      error: null,
-    });
-    harness.client.nextAttachResponses.push({
-      streamId: 2,
-      currentOffset: 1200,
-      reset: false,
-      error: null,
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-attach-exit" });
-    harness.controller.handleStreamExit({
-      terminalId: "term-attach-exit",
-      streamId: 1,
-    });
-    await flushAsyncWork();
-
-    expect(harness.client.attachCalls).toHaveLength(2);
-    expect(harness.client.attachCalls[1]?.options).toEqual({
-      resumeOffset: 1200,
-      rows: 24,
-      cols: 80,
-    });
-    expect(harness.client.detachCalls).toContain(1);
-    expect(harness.controller.getActiveStreamId()).toBe(2);
-  });
-
-  it("emits reset callback when attach indicates output reset", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 12,
-      currentOffset: 0,
-      reset: true,
-      error: null,
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-reset" });
-    await flushAsyncWork();
-
-    expect(harness.resets).toEqual(["term-reset"]);
-    expect(harness.controller.getActiveStreamId()).toBe(12);
-  });
-
-  it("delivers buffered replay chunks flushed synchronously during subscribe", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 17,
-      replayedFrom: 0,
-      currentOffset: 10,
-      reset: false,
-      error: null,
-    });
-    harness.client.bufferChunk({
-      streamId: 17,
-      offset: 0,
-      endOffset: 10,
-      replay: true,
-      data: "buffered-replay",
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-buffered" });
-    await flushAsyncWork();
-
-    expect(harness.chunks).toEqual([{ terminalId: "term-buffered", text: "buffered-replay" }]);
-  });
-
-  it("clears stale selected output when bootstrap replay starts before current offset", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 61,
-      replayedFrom: 0,
-      currentOffset: 20,
-      reset: false,
-      error: null,
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-bootstrap-reset" });
-    await flushAsyncWork();
-
-    expect(harness.resets).toEqual(["term-bootstrap-reset"]);
-  });
-
-  it("reattaches and replays from last contiguous offset when chunk offsets gap", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 31,
-      currentOffset: 0,
-      reset: false,
-      error: null,
-    });
-    harness.client.nextAttachResponses.push({
-      streamId: 32,
-      currentOffset: 8,
-      reset: false,
-      error: null,
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-gap" });
-    await flushAsyncWork();
-
-    harness.client.emitChunk({
-      streamId: 31,
-      offset: 0,
-      endOffset: 2,
-      data: "ok",
-    });
-    harness.client.emitChunk({
-      streamId: 31,
-      offset: 4,
-      endOffset: 8,
-      data: "miss",
-    });
-    await flushAsyncWork();
-
-    expect(harness.chunks).toEqual([{ terminalId: "term-gap", text: "ok" }]);
-    expect(harness.client.detachCalls).toContain(31);
-    expect(harness.client.attachCalls.length).toBe(2);
-    expect(harness.client.attachCalls[1]?.options).toEqual({
-      resumeOffset: 2,
-      rows: 24,
-      cols: 80,
-    });
-    expect(harness.controller.getActiveStreamId()).toBe(32);
-  });
-
-  it("does not treat replay range before currentOffset as a live gap", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 41,
-      replayedFrom: 50,
-      currentOffset: 100,
-      reset: false,
-      error: null,
-    });
-    harness.client.bufferChunk({
-      streamId: 41,
-      offset: 80,
-      endOffset: 100,
-      data: "replay-tail",
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-replay" });
-    await flushAsyncWork();
-
-    harness.client.emitChunk({
-      streamId: 41,
-      offset: 100,
-      endOffset: 102,
-      data: "ok",
-    });
-
-    expect(harness.client.detachCalls).toEqual([]);
-    expect(harness.client.attachCalls).toHaveLength(1);
-    expect(harness.controller.getActiveStreamId()).toBe(41);
-    expect(harness.chunks).toEqual([
-      { terminalId: "term-replay", text: "replay-tail" },
-      { terminalId: "term-replay", text: "ok" },
-    ]);
-  });
-
-  it("accepts clamped replay start after reconnect without entering a reconnect loop", async () => {
-    const harness = createControllerHarness();
-    harness.client.nextAttachResponses.push({
-      streamId: 71,
-      replayedFrom: 205,
-      currentOffset: 205,
-      reset: false,
-      error: null,
-    });
-    harness.client.nextAttachResponses.push({
-      streamId: 72,
-      replayedFrom: 396,
-      currentOffset: 978,
-      reset: true,
-      error: null,
-    });
-
-    harness.controller.setTerminal({ terminalId: "term-clamped-replay" });
-    await flushAsyncWork();
-
-    harness.client.emitChunk({
-      streamId: 71,
-      offset: 205,
-      endOffset: 299,
-      data: "first",
-    });
-    harness.client.emitChunk({
-      streamId: 71,
-      offset: 396,
-      endOffset: 493,
-      data: "gap",
-    });
-    await flushAsyncWork();
-
-    expect(harness.client.attachCalls).toHaveLength(2);
-    expect(harness.client.attachCalls[1]?.options).toEqual({
-      resumeOffset: 299,
-      rows: 24,
-      cols: 80,
-    });
-    expect(harness.controller.getActiveStreamId()).toBe(72);
-
-    harness.client.emitChunk({
-      streamId: 72,
-      replay: true,
-      offset: 396,
-      endOffset: 493,
-      data: "replay-1",
-    });
-    harness.client.emitChunk({
-      streamId: 72,
-      replay: true,
-      offset: 493,
-      endOffset: 590,
-      data: "replay-2",
-    });
-    harness.client.emitChunk({
-      streamId: 72,
-      replay: true,
-      offset: 687,
-      endOffset: 784,
-      data: "replay-3",
-    });
-    harness.client.emitChunk({
-      streamId: 72,
-      replay: false,
-      offset: 978,
-      endOffset: 1075,
-      data: "live",
-    });
-    await flushAsyncWork();
-
-    expect(harness.client.attachCalls).toHaveLength(2);
-    expect(harness.client.detachCalls.filter((streamId) => streamId === 71)).toHaveLength(1);
-    expect(harness.chunks.at(-1)).toEqual({
-      terminalId: "term-clamped-replay",
-      text: "live",
-    });
-  });
-
-  it("reuses external resume offsets across controller recreation", async () => {
-    const client = new FakeTerminalStreamClient();
-    const resumeOffsetByTerminalId = new Map<string, number>();
-    const resumeOffsets: TerminalStreamControllerResumeOffsets = {
-      get: ({ terminalId }) => resumeOffsetByTerminalId.get(terminalId),
-      set: ({ terminalId, offset }) => {
-        resumeOffsetByTerminalId.set(terminalId, offset);
-      },
-      clear: ({ terminalId }) => {
-        resumeOffsetByTerminalId.delete(terminalId);
-      },
-      prune: ({ terminalIds }) => {
-        const terminalIdSet = new Set(terminalIds);
-        for (const terminalId of Array.from(resumeOffsetByTerminalId.keys())) {
-          if (!terminalIdSet.has(terminalId)) {
-            resumeOffsetByTerminalId.delete(terminalId);
-          }
-        }
-      },
-    };
-
-    client.nextAttachResponses.push({
-      streamId: 81,
-      currentOffset: 0,
-      reset: false,
-      error: null,
-    });
-
-    const firstHarness = createControllerHarness({
-      client,
-      resumeOffsets,
-    });
-    firstHarness.controller.setTerminal({ terminalId: "term-shared-resume" });
-    await flushAsyncWork();
-
-    client.emitChunk({
-      streamId: 81,
-      offset: 0,
-      endOffset: 2,
-      data: "ok",
-    });
-    await flushAsyncWork();
-    firstHarness.controller.dispose();
-
-    client.nextAttachResponses.push({
-      streamId: 82,
-      currentOffset: 2,
-      reset: false,
-      error: null,
-    });
-
-    const secondHarness = createControllerHarness({
-      client,
-      resumeOffsets,
-    });
-    secondHarness.controller.setTerminal({ terminalId: "term-shared-resume" });
-    await flushAsyncWork();
-
-    expect(client.attachCalls.at(-1)?.options).toEqual({
-      resumeOffset: 2,
-      rows: 24,
-      cols: 80,
-    });
-  });
 });

packages/app/src/terminal/runtime/terminal-stream-controller.ts

@@ -1,41 +1,21 @@
-import {
-  getTerminalAttachRetryDelayMs,
-  getTerminalResumeOffset,
-  isTerminalAttachRetryableError,
-  type TerminalResumeOffsetStore,
-  updateTerminalResumeOffset,
-  waitForDuration,
-  withPromiseTimeout,
-} from "@/utils/terminal-attach";
-
-export type TerminalStreamControllerAttachPayload = {
-  streamId: number | null;
-  replayedFrom?: number;
-  currentOffset: number;
-  reset: boolean;
-  error?: string | null;
-};
-
-export type TerminalStreamControllerChunk = {
-  offset: number;
-  endOffset: number;
-  replay?: boolean;
-  data: Uint8Array;
-};
+import type { TerminalState } from "@server/shared/messages";
 
 export type TerminalStreamControllerClient = {
-  attachTerminalStream: (
+  subscribeTerminal: (terminalId: string) => Promise<{
+    terminalId: string;
+    error?: string | null;
+  }>;
+  unsubscribeTerminal: (terminalId: string) => void;
+  sendTerminalInput: (
     terminalId: string,
-    options?: {
-      resumeOffset?: number;
-      rows?: number;
-      cols?: number;
-    },
-  ) => Promise<TerminalStreamControllerAttachPayload>;
-  detachTerminalStream: (streamId: number) => Promise<unknown>;
-  onTerminalStreamData: (
-    streamId: number,
-    handler: (chunk: TerminalStreamControllerChunk) => void,
+    message: { type: "resize"; rows: number; cols: number },
+  ) => void;
+  onTerminalStreamEvent: (
+    handler: (
+      event:
+        | { terminalId: string; type: "output"; data: Uint8Array }
+        | { terminalId: string; type: "snapshot"; state: TerminalState },
+    ) => void,
   ) => () => void;
 };
 
@@ -46,519 +26,126 @@ export type TerminalStreamControllerSize = {
 
 export type TerminalStreamControllerStatus = {
   terminalId: string | null;
-  streamId: number | null;
   isAttaching: boolean;
   error: string | null;
 };
 
-export type TerminalStreamControllerResumeOffsets = TerminalResumeOffsetStore & {
-  clear: (input: { terminalId: string }) => void;
-  prune: (input: { terminalIds: string[] }) => void;
-};
-
 export type TerminalStreamControllerOptions = {
   client: TerminalStreamControllerClient;
   getPreferredSize: () => TerminalStreamControllerSize | null;
-  resumeOffsets?: TerminalStreamControllerResumeOffsets;
-  onChunk: (input: { terminalId: string; text: string; replay: boolean }) => void;
-  onReset?: (input: { terminalId: string }) => void;
+  onOutput: (input: { terminalId: string; text: string }) => void;
+  onSnapshot: (input: { terminalId: string; state: TerminalState }) => void;
   onStatusChange?: (status: TerminalStreamControllerStatus) => void;
-  maxAttachAttempts?: number;
-  attachTimeoutMs?: number;
-  reconnectErrorMessage?: string;
-  withTimeout?: <T>(input: {
-    promise: Promise<T>;
-    timeoutMs: number;
-    timeoutMessage: string;
-  }) => Promise<T>;
-  waitForDelay?: (input: { durationMs: number }) => Promise<void>;
-  isRetryableError?: (input: { message: string }) => boolean;
-  getRetryDelayMs?: (input: { attempt: number }) => number;
 };
 
-type TerminalStreamControllerActiveStream = {
-  terminalId: string;
-  streamId: number;
-  decoder: TextDecoder;
-  nextExpectedOffset: number | null;
-  catchUpEndOffset: number | null;
-  unsubscribe: () => void;
-};
-
-const DEFAULT_ATTACH_MAX_ATTEMPTS = 4;
-const DEFAULT_ATTACH_TIMEOUT_MS = 12_000;
-const DEFAULT_RECONNECT_ERROR_MESSAGE = "Terminal stream ended. Reconnecting…";
+const TERMINAL_EXITED_ERROR = "Terminal exited";
 
 export class TerminalStreamController {
-  private readonly exitedStreamsWhileAttaching = new Set<number>();
-  private readonly internalResumeOffsetByTerminalId = new Map<string, number>();
-  private selectedTerminalId: string | null = null;
-  private activeStream: TerminalStreamControllerActiveStream | null = null;
-  private attachGeneration = 0;
-  private isDisposed = false;
-  private status: TerminalStreamControllerStatus = {
-    terminalId: null,
-    streamId: null,
-    isAttaching: false,
-    error: null,
-  };
+  private readonly decoder = new TextDecoder();
+  private readonly unsubscribeStreamEvents: () => void;
+  private terminalId: string | null = null;
+  private disposed = false;
 
-  constructor(private readonly options: TerminalStreamControllerOptions) {}
-
-  getActiveStreamId(): number | null {
-    return this.activeStream?.streamId ?? null;
+  constructor(private readonly options: TerminalStreamControllerOptions) {
+    this.unsubscribeStreamEvents = this.options.client.onTerminalStreamEvent((event) => {
+      if (this.disposed || event.terminalId !== this.terminalId) {
+        return;
+      }
+      if (event.type === "snapshot") {
+        this.decoder.decode();
+        this.options.onSnapshot({ terminalId: event.terminalId, state: event.state });
+        return;
+      }
+      const text = this.decoder.decode(event.data, { stream: true });
+      if (text.length > 0) {
+        this.options.onOutput({ terminalId: event.terminalId, text });
+      }
+    });
   }
 
   setTerminal(input: { terminalId: string | null }): void {
-    if (this.isDisposed) {
+    if (this.disposed || input.terminalId === this.terminalId) {
       return;
     }
-
     const nextTerminalId = input.terminalId;
-    const previousTerminalId = this.selectedTerminalId;
-    const isSameTerminal = previousTerminalId === nextTerminalId;
-    const hasActiveStreamForSelection =
-      isSameTerminal &&
-      this.activeStream?.terminalId === nextTerminalId &&
-      typeof this.activeStream.streamId === "number";
-    if (hasActiveStreamForSelection) {
-      return;
+    const previousTerminalId = this.terminalId;
+    this.terminalId = nextTerminalId;
+    this.decoder.decode();
+    if (previousTerminalId) {
+      this.options.client.unsubscribeTerminal(previousTerminalId);
     }
-
-    this.selectedTerminalId = nextTerminalId;
-    this.attachGeneration += 1;
-    const generation = this.attachGeneration;
-
-    void this.detachActiveStream({ shouldDetach: true });
-
     if (!nextTerminalId) {
-      this.updateStatus({
-        terminalId: null,
-        streamId: null,
-        isAttaching: false,
-        error: null,
-      });
+      this.options.onStatusChange?.({ terminalId: null, isAttaching: false, error: null });
       return;
     }
-
-    this.updateStatus({
-      terminalId: nextTerminalId,
-      streamId: null,
-      isAttaching: true,
-      error: null,
-    });
-    void this.attachTerminal({
-      terminalId: nextTerminalId,
-      generation,
-    });
-  }
-
-  handleStreamExit(input: { terminalId: string; streamId: number }): void {
-    if (this.isDisposed) {
-      return;
-    }
-
-    if (this.selectedTerminalId !== input.terminalId) {
-      return;
-    }
-
-    const activeStream = this.activeStream;
-    const activeMatches =
-      Boolean(activeStream) &&
-      activeStream!.terminalId === input.terminalId &&
-      activeStream!.streamId === input.streamId;
-    if (activeMatches) {
-      this.attachGeneration += 1;
-      const generation = this.attachGeneration;
-      void this.detachActiveStream({ shouldDetach: false });
-      this.updateStatus({
-        terminalId: input.terminalId,
-        streamId: null,
-        isAttaching: true,
-        error: this.options.reconnectErrorMessage ?? DEFAULT_RECONNECT_ERROR_MESSAGE,
-      });
-      void this.attachTerminal({
-        terminalId: input.terminalId,
-        generation,
-      });
-      return;
-    }
-
-    if (this.status.isAttaching && this.status.terminalId === input.terminalId) {
-      this.exitedStreamsWhileAttaching.add(input.streamId);
-    }
-  }
-
-  pruneResumeOffsets(input: { terminalIds: string[] }): void {
-    if (this.options.resumeOffsets) {
-      this.options.resumeOffsets.prune(input);
-      return;
-    }
-    const terminalIdSet = new Set(input.terminalIds);
-    for (const terminalId of Array.from(this.internalResumeOffsetByTerminalId.keys())) {
-      if (!terminalIdSet.has(terminalId)) {
-        this.internalResumeOffsetByTerminalId.delete(terminalId);
-      }
-    }
-  }
-
-  dispose(): void {
-    if (this.isDisposed) {
-      return;
-    }
-    this.isDisposed = true;
-    this.attachGeneration += 1;
-    this.selectedTerminalId = null;
-    void this.detachActiveStream({ shouldDetach: true });
-    this.internalResumeOffsetByTerminalId.clear();
-    this.updateStatus({
-      terminalId: null,
-      streamId: null,
-      isAttaching: false,
-      error: null,
-    });
-  }
-
-  private async attachTerminal(input: { terminalId: string; generation: number }): Promise<void> {
-    const {
-      maxAttachAttempts = DEFAULT_ATTACH_MAX_ATTEMPTS,
-      attachTimeoutMs = DEFAULT_ATTACH_TIMEOUT_MS,
-      withTimeout = withPromiseTimeout,
-      waitForDelay = waitForDuration,
-      isRetryableError = isTerminalAttachRetryableError,
-      getRetryDelayMs = getTerminalAttachRetryDelayMs,
-    } = this.options;
-
-    let lastErrorMessage = "Unable to attach terminal stream";
-
-    for (let attempt = 0; attempt < maxAttachAttempts; attempt += 1) {
-      if (
-        !this.isAttachGenerationCurrent({
-          generation: input.generation,
-          terminalId: input.terminalId,
-        })
-      ) {
-        return;
-      }
-
-      try {
-        const preferredSize = this.options.getPreferredSize();
-        const resumeOffset = getTerminalResumeOffset({
-          terminalId: input.terminalId,
-          resumeOffsetStore: this.getResumeOffsetStore(),
-        });
-        const attachPayload = await withTimeout({
-          promise: this.options.client.attachTerminalStream(input.terminalId, {
-            ...(resumeOffset !== undefined ? { resumeOffset } : {}),
-            ...(preferredSize ? { rows: preferredSize.rows, cols: preferredSize.cols } : {}),
-          }),
-          timeoutMs: attachTimeoutMs,
-          timeoutMessage: "Timed out attaching terminal stream",
-        });
-
-        updateTerminalResumeOffset({
-          terminalId: input.terminalId,
-          offset: attachPayload.currentOffset,
-          resumeOffsetStore: this.getResumeOffsetStore(),
-        });
-
-        if (
-          !this.isAttachGenerationCurrent({
-            generation: input.generation,
-            terminalId: input.terminalId,
-          })
-        ) {
-          if (typeof attachPayload.streamId === "number") {
-            void this.options.client.detachTerminalStream(attachPayload.streamId).catch(() => {});
-          }
+    this.options.onStatusChange?.({ terminalId: nextTerminalId, isAttaching: true, error: null });
+    void this.options.client
+      .subscribeTerminal(nextTerminalId)
+      .then((payload) => {
+        if (this.disposed || this.terminalId !== nextTerminalId) {
           return;
         }
-
-        if (attachPayload.error || typeof attachPayload.streamId !== "number") {
-          lastErrorMessage = attachPayload.error ?? "Unable to attach terminal stream";
-          const hasRemainingAttempts = attempt < maxAttachAttempts - 1;
-          if (hasRemainingAttempts && isRetryableError({ message: lastErrorMessage })) {
-            await waitForDelay({ durationMs: getRetryDelayMs({ attempt }) });
-            continue;
-          }
-
-          this.updateStatus({
-            terminalId: input.terminalId,
-            streamId: null,
+        if (payload.error) {
+          this.terminalId = null;
+          this.options.onStatusChange?.({
+            terminalId: nextTerminalId,
             isAttaching: false,
-            error: lastErrorMessage,
+            error: payload.error,
           });
           return;
         }
-
-        if (this.exitedStreamsWhileAttaching.has(attachPayload.streamId)) {
-          this.exitedStreamsWhileAttaching.delete(attachPayload.streamId);
-          void this.options.client.detachTerminalStream(attachPayload.streamId).catch(() => {});
-          this.attachGeneration += 1;
-          void this.attachTerminal({
-            terminalId: input.terminalId,
-            generation: this.attachGeneration,
+        const preferredSize = this.options.getPreferredSize();
+        if (preferredSize) {
+          this.options.client.sendTerminalInput(nextTerminalId, {
+            type: "resize",
+            rows: preferredSize.rows,
+            cols: preferredSize.cols,
           });
-          return;
         }
-
-        if (attachPayload.reset) {
-          this.options.resumeOffsets?.clear({ terminalId: input.terminalId });
-          this.options.onReset?.({ terminalId: input.terminalId });
-        }
-
-        const decoder = new TextDecoder();
-        const streamId = attachPayload.streamId;
-        const replayedFromOffset =
-          typeof attachPayload.replayedFrom === "number"
-            ? Math.max(0, Math.floor(attachPayload.replayedFrom))
-            : null;
-        const currentOffset = Math.max(0, Math.floor(attachPayload.currentOffset));
-        const shouldResetForReplayBootstrap =
-          typeof resumeOffset !== "number" &&
-          typeof replayedFromOffset === "number" &&
-          replayedFromOffset < currentOffset;
-        if (shouldResetForReplayBootstrap) {
-          this.options.onReset?.({ terminalId: input.terminalId });
-        }
-        const startExpectedOffset =
-          replayedFromOffset ??
-          (typeof resumeOffset === "number"
-            ? Math.max(0, Math.floor(resumeOffset))
-            : currentOffset);
-        const catchUpEndOffset = currentOffset;
-
-        const activeStream: TerminalStreamControllerActiveStream = {
-          terminalId: input.terminalId,
-          streamId,
-          decoder,
-          nextExpectedOffset: startExpectedOffset,
-          catchUpEndOffset,
-          unsubscribe: () => {},
-        };
-        this.activeStream = activeStream;
-        const unsubscribe = this.options.client.onTerminalStreamData(streamId, (chunk) => {
-          this.handleChunk({
-            terminalId: input.terminalId,
-            streamId,
-            chunk,
-            decoder,
-          });
-        });
-        if (this.activeStream === activeStream) {
-          activeStream.unsubscribe = unsubscribe;
-        } else {
-          unsubscribe();
-        }
-        this.updateStatus({
-          terminalId: input.terminalId,
-          streamId,
+        this.options.onStatusChange?.({
+          terminalId: nextTerminalId,
           isAttaching: false,
           error: null,
         });
-        return;
-      } catch (error) {
-        lastErrorMessage =
-          error instanceof Error ? error.message : "Unable to attach terminal stream";
-        const hasRemainingAttempts = attempt < maxAttachAttempts - 1;
-        if (hasRemainingAttempts && isRetryableError({ message: lastErrorMessage })) {
-          await waitForDelay({ durationMs: getRetryDelayMs({ attempt }) });
-          continue;
-        }
-
-        this.updateStatus({
-          terminalId: input.terminalId,
-          streamId: null,
-          isAttaching: false,
-          error: lastErrorMessage,
-        });
-        return;
-      }
-    }
-
-    this.updateStatus({
-      terminalId: input.terminalId,
-      streamId: null,
-      isAttaching: false,
-      error: lastErrorMessage,
-    });
-  }
-
-  private handleChunk(input: {
-    terminalId: string;
-    streamId: number;
-    chunk: TerminalStreamControllerChunk;
-    decoder: TextDecoder;
-  }): void {
-    const activeStream = this.activeStream;
-    if (!activeStream) {
-      return;
-    }
-    if (activeStream.streamId !== input.streamId || activeStream.terminalId !== input.terminalId) {
-      return;
-    }
-
-    const chunkOffset = Number.isFinite(input.chunk.offset)
-      ? Math.max(0, Math.floor(input.chunk.offset))
-      : 0;
-    const chunkEndOffset = Number.isFinite(input.chunk.endOffset)
-      ? Math.max(0, Math.floor(input.chunk.endOffset))
-      : chunkOffset;
-    if (chunkEndOffset < chunkOffset) {
-      return;
-    }
-
-    const expectedOffset = activeStream.nextExpectedOffset;
-    if (typeof expectedOffset === "number") {
-      if (chunkEndOffset <= expectedOffset) {
-        return;
-      }
-      if (chunkOffset !== expectedOffset) {
-        const catchUpEndOffset = activeStream.catchUpEndOffset;
-        const canSkipReplayGap =
-          chunkOffset > expectedOffset &&
-          typeof catchUpEndOffset === "number" &&
-          expectedOffset < catchUpEndOffset &&
-          chunkOffset <= catchUpEndOffset;
-
-        if (canSkipReplayGap) {
-          activeStream.nextExpectedOffset = chunkOffset;
-        } else {
-          this.recoverFromStreamGap({
-            terminalId: input.terminalId,
-            streamId: input.streamId,
-            expectedOffset,
-            observedOffset: chunkOffset,
-          });
+      })
+      .catch((error: unknown) => {
+        if (this.disposed || this.terminalId !== nextTerminalId) {
           return;
         }
-      }
-    }
-
-    if (
-      typeof activeStream.catchUpEndOffset === "number" &&
-      chunkEndOffset >= activeStream.catchUpEndOffset
-    ) {
-      activeStream.catchUpEndOffset = null;
-    }
-
-    activeStream.nextExpectedOffset = chunkEndOffset;
-    updateTerminalResumeOffset({
-      terminalId: input.terminalId,
-      offset: chunkEndOffset,
-      resumeOffsetStore: this.getResumeOffsetStore(),
-    });
-
-    const text = input.decoder.decode(input.chunk.data, { stream: true });
-    if (text.length === 0) {
-      return;
-    }
-    this.options.onChunk({
-      terminalId: input.terminalId,
-      text,
-      replay: Boolean(input.chunk.replay),
-    });
-  }
-
-  private recoverFromStreamGap(input: {
-    terminalId: string;
-    streamId: number;
-    expectedOffset: number;
-    observedOffset: number;
-  }): void {
-    const activeStream = this.activeStream;
-    if (!activeStream) {
-      return;
-    }
-    if (activeStream.streamId !== input.streamId || activeStream.terminalId !== input.terminalId) {
-      return;
-    }
-    if (this.selectedTerminalId !== input.terminalId) {
-      return;
-    }
-
-    updateTerminalResumeOffset({
-      terminalId: input.terminalId,
-      offset: input.expectedOffset,
-      resumeOffsetStore: this.getResumeOffsetStore(),
-    });
-
-    this.attachGeneration += 1;
-    const generation = this.attachGeneration;
-
-    void this.detachActiveStream({ shouldDetach: true });
-    this.updateStatus({
-      terminalId: input.terminalId,
-      streamId: null,
-      isAttaching: true,
-      error: this.options.reconnectErrorMessage ?? DEFAULT_RECONNECT_ERROR_MESSAGE,
-    });
-    void this.attachTerminal({
-      terminalId: input.terminalId,
-      generation,
-    });
-  }
-
-  private async detachActiveStream(input: { shouldDetach: boolean }): Promise<void> {
-    const activeStream = this.activeStream;
-    if (!activeStream) {
-      return;
-    }
-    this.activeStream = null;
-
-    try {
-      const tail = activeStream.decoder.decode();
-      if (tail.length > 0) {
-        this.options.onChunk({
-          terminalId: activeStream.terminalId,
-          text: tail,
-          replay: false,
+        this.terminalId = null;
+        this.options.onStatusChange?.({
+          terminalId: nextTerminalId,
+          isAttaching: false,
+          error: error instanceof Error ? error.message : "Unable to subscribe to terminal",
         });
-      }
-    } catch {
-      // no-op
-    }
+      });
+  }
 
-    try {
-      activeStream.unsubscribe();
-    } catch {
-      // no-op
-    }
-
-    if (!input.shouldDetach) {
+  handleTerminalExit(input: { terminalId: string }): void {
+    if (this.disposed || input.terminalId !== this.terminalId) {
       return;
     }
-
-    try {
-      await this.options.client.detachTerminalStream(activeStream.streamId);
-    } catch {
-      // no-op
-    }
+    this.decoder.decode();
+    this.terminalId = null;
+    this.options.onStatusChange?.({
+      terminalId: input.terminalId,
+      isAttaching: false,
+      error: TERMINAL_EXITED_ERROR,
+    });
   }
 
-  private isAttachGenerationCurrent(input: { generation: number; terminalId: string }): boolean {
-    if (this.isDisposed) {
-      return false;
+  dispose(): void {
+    if (this.disposed) {
+      return;
     }
-    return (
-      this.attachGeneration === input.generation && this.selectedTerminalId === input.terminalId
-    );
-  }
-
-  private updateStatus(status: TerminalStreamControllerStatus): void {
-    this.status = status;
-    this.options.onStatusChange?.(status);
-  }
-
-  private getResumeOffsetStore(): TerminalResumeOffsetStore {
-    if (this.options.resumeOffsets) {
-      return this.options.resumeOffsets;
+    this.disposed = true;
+    this.decoder.decode();
+    const terminalId = this.terminalId;
+    this.terminalId = null;
+    if (terminalId) {
+      this.options.client.unsubscribeTerminal(terminalId);
     }
-    return {
-      get: ({ terminalId }) => this.internalResumeOffsetByTerminalId.get(terminalId),
-      set: ({ terminalId, offset }) => {
-        this.internalResumeOffsetByTerminalId.set(terminalId, offset);
-      },
-    };
+    this.unsubscribeStreamEvents();
+    this.options.onStatusChange?.({ terminalId: null, isAttaching: false, error: null });
   }
 }

packages/app/src/terminal/runtime/workspace-terminal-session.test.ts

@@ -10,43 +10,56 @@ describe("workspace-terminal-session", () => {
   it("returns the same workspace session instance for the same scope", () => {
     const first = getWorkspaceTerminalSession({
       scopeKey: "workspace-a",
-      maxOutputChars: 1_000,
     });
     const second = getWorkspaceTerminalSession({
       scopeKey: "workspace-a",
-      maxOutputChars: 50,
     });
 
     expect(second).toBe(first);
   });
 
-  it("preserves resume offsets across repeated lookups", () => {
+  it("preserves snapshots across repeated lookups", () => {
     const first = getWorkspaceTerminalSession({
-      scopeKey: "workspace-resume",
-      maxOutputChars: 1_000,
+      scopeKey: "workspace-snapshots",
     });
-    first.resumeOffsets.set({
+    first.snapshots.set({
       terminalId: "term-1",
-      offset: 42,
+      state: {
+        rows: 1,
+        cols: 1,
+        grid: [[{ char: "A" }]],
+        scrollback: [],
+        cursor: { row: 0, col: 0 },
+      },
     });
 
     const second = getWorkspaceTerminalSession({
-      scopeKey: "workspace-resume",
-      maxOutputChars: 1_000,
+      scopeKey: "workspace-snapshots",
     });
 
-    expect(second.resumeOffsets.get({ terminalId: "term-1" })).toBe(42);
+    expect(second.snapshots.get({ terminalId: "term-1" })).toEqual({
+      rows: 1,
+      cols: 1,
+      grid: [[{ char: "A" }]],
+      scrollback: [],
+      cursor: { row: 0, col: 0 },
+    });
   });
 
-  it("evicts workspace terminal session state when the workspace retain count returns to zero", () => {
+  it("evicts workspace terminal session state when the retain count returns to zero", () => {
     const scopeKey = "workspace-release";
     const first = getWorkspaceTerminalSession({
       scopeKey,
-      maxOutputChars: 1_000,
     });
-    first.resumeOffsets.set({
+    first.snapshots.set({
       terminalId: "term-1",
-      offset: 128,
+      state: {
+        rows: 1,
+        cols: 1,
+        grid: [[{ char: "A" }]],
+        scrollback: [],
+        cursor: { row: 0, col: 0 },
+      },
     });
 
     retainWorkspaceTerminalSession({ scopeKey });
@@ -54,10 +67,9 @@ describe("workspace-terminal-session", () => {
 
     const second = getWorkspaceTerminalSession({
       scopeKey,
-      maxOutputChars: 1_000,
     });
 
     expect(second).not.toBe(first);
-    expect(second.resumeOffsets.get({ terminalId: "term-1" })).toBeUndefined();
+    expect(second.snapshots.get({ terminalId: "term-1" })).toBeNull();
   });
 });

packages/app/src/terminal/runtime/workspace-terminal-session.ts

@@ -1,85 +1,63 @@
-import {
-  getTerminalOutputSession,
-  releaseTerminalOutputSession,
-  retainTerminalOutputSession,
-  type TerminalOutputSession,
-} from "./terminal-output-session";
+import type { TerminalState } from "@server/shared/messages";
 
-export type WorkspaceTerminalResumeOffsets = {
-  get: (input: { terminalId: string }) => number | undefined;
-  set: (input: { terminalId: string; offset: number }) => void;
+export type WorkspaceTerminalSnapshots = {
+  get: (input: { terminalId: string }) => TerminalState | null;
+  set: (input: { terminalId: string; state: TerminalState }) => void;
   clear: (input: { terminalId: string }) => void;
   prune: (input: { terminalIds: string[] }) => void;
 };
 
 export type WorkspaceTerminalSession = {
   scopeKey: string;
-  outputSession: TerminalOutputSession;
-  resumeOffsets: WorkspaceTerminalResumeOffsets;
+  snapshots: WorkspaceTerminalSnapshots;
 };
 
 type WorkspaceTerminalSessionRecord = {
-  resumeOffsetByTerminalId: Map<string, number>;
+  snapshotByTerminalId: Map<string, TerminalState>;
   session: WorkspaceTerminalSession;
 };
 
 const sessionsByScopeKey = new Map<string, WorkspaceTerminalSessionRecord>();
 const refCountByScopeKey = new Map<string, number>();
 
-function createResumeOffsets(input: {
-  resumeOffsetByTerminalId: Map<string, number>;
-}): WorkspaceTerminalResumeOffsets {
+function createSnapshots(input: {
+  snapshotByTerminalId: Map<string, TerminalState>;
+}): WorkspaceTerminalSnapshots {
   return {
-    get: ({ terminalId }) => {
-      const offset = input.resumeOffsetByTerminalId.get(terminalId);
-      if (typeof offset !== "number" || !Number.isFinite(offset)) {
-        return undefined;
-      }
-      return Math.max(0, Math.floor(offset));
-    },
-    set: ({ terminalId, offset }) => {
-      if (!Number.isFinite(offset)) {
-        return;
-      }
-      input.resumeOffsetByTerminalId.set(terminalId, Math.max(0, Math.floor(offset)));
+    get: ({ terminalId }) => input.snapshotByTerminalId.get(terminalId) ?? null,
+    set: ({ terminalId, state }) => {
+      input.snapshotByTerminalId.set(terminalId, state);
     },
     clear: ({ terminalId }) => {
-      input.resumeOffsetByTerminalId.delete(terminalId);
+      input.snapshotByTerminalId.delete(terminalId);
     },
     prune: ({ terminalIds }) => {
       const terminalIdSet = new Set(terminalIds);
-      for (const terminalId of Array.from(input.resumeOffsetByTerminalId.keys())) {
+      for (const terminalId of Array.from(input.snapshotByTerminalId.keys())) {
         if (!terminalIdSet.has(terminalId)) {
-          input.resumeOffsetByTerminalId.delete(terminalId);
+          input.snapshotByTerminalId.delete(terminalId);
         }
       }
     },
   };
 }
 
-export function getWorkspaceTerminalSession(input: {
-  scopeKey: string;
-  maxOutputChars: number;
-}): WorkspaceTerminalSession {
+export function getWorkspaceTerminalSession(input: { scopeKey: string }): WorkspaceTerminalSession {
   const existing = sessionsByScopeKey.get(input.scopeKey);
   if (existing) {
     return existing.session;
   }
 
-  const resumeOffsetByTerminalId = new Map<string, number>();
+  const snapshotByTerminalId = new Map<string, TerminalState>();
   const session: WorkspaceTerminalSession = {
     scopeKey: input.scopeKey,
-    outputSession: getTerminalOutputSession({
-      scopeKey: input.scopeKey,
-      maxOutputChars: input.maxOutputChars,
-    }),
-    resumeOffsets: createResumeOffsets({
-      resumeOffsetByTerminalId,
+    snapshots: createSnapshots({
+      snapshotByTerminalId,
     }),
   };
 
   sessionsByScopeKey.set(input.scopeKey, {
-    resumeOffsetByTerminalId,
+    snapshotByTerminalId,
     session,
   });
   return session;
@@ -88,11 +66,9 @@ export function getWorkspaceTerminalSession(input: {
 export function retainWorkspaceTerminalSession(input: { scopeKey: string }): void {
   const current = refCountByScopeKey.get(input.scopeKey) ?? 0;
   refCountByScopeKey.set(input.scopeKey, current + 1);
-  retainTerminalOutputSession(input);
 }
 
 export function releaseWorkspaceTerminalSession(input: { scopeKey: string }): void {
-  releaseTerminalOutputSession(input);
   const current = refCountByScopeKey.get(input.scopeKey) ?? 0;
   if (current > 1) {
     refCountByScopeKey.set(input.scopeKey, current - 1);

packages/app/src/utils/extract-agent-model.test.ts

@@ -20,12 +20,12 @@ describe("extractAgentModel", () => {
     expect(extractAgentModel(agent)).toBe("gpt-5.1-codex");
   });
 
-  it("treats legacy 'default' model ids as unset", () => {
+  it("preserves 'default' as a valid model id", () => {
     const agent = {
       model: "default",
       runtimeInfo: { model: "default" },
     } as Partial<Agent> as Agent;
 
-    expect(extractAgentModel(agent)).toBeNull();
+    expect(extractAgentModel(agent)).toBe("default");
   });
 });

packages/app/src/utils/extract-agent-model.ts

@@ -6,13 +6,13 @@ export function extractAgentModel(agent?: Agent | null): string | null {
   const fallbackModel = agent.model;
   if (typeof runtimeModel === "string") {
     const normalized = runtimeModel.trim();
-    if (normalized.length > 0 && normalized.toLowerCase() !== "default") {
+    if (normalized.length > 0) {
       return normalized;
     }
   }
   if (typeof fallbackModel === "string") {
     const normalized = fallbackModel.trim();
-    if (normalized.length > 0 && normalized.toLowerCase() !== "default") {
+    if (normalized.length > 0) {
       return normalized;
     }
   }