chore(release): cut 0.7.0

docs: prepare v0.7.0 changelog
fix(opencode): show child session prompts (#4055 )
2026-10-21 08:42:39 +00:00 · 2026-08-31 19:25:32 +02:00 · 2026-08-31 19:20:58 +02:00 · 2026-08-31 18:35:28 +02:00 · 2026-08-31 15:35:34 +02:00 · 2026-08-31 12:10:40 +02:00
253 changed files with 12962 additions and 2640 deletions
@@ -1,30 +1,64 @@
 # Changelog

-## 0.7.0-beta.1 - 2026-08-27
+## 0.7.0 - 2026-08-31

 ### Changed

 - Changed the project license to Apache-2.0 ([#3944](https://github.com/getpaseo/paseo/pull/3944))
 - Changed Cmd/Ctrl+E to toggle Explorer visibility without selecting a view ([#3896](https://github.com/getpaseo/paseo/pull/3896))
+- Changed the default mobile content text size from 15px to 16px ([#4111](https://github.com/getpaseo/paseo/pull/4111))

 ### Added

 - Added plugin installation and updates directly from Git repositories ([#3920](https://github.com/getpaseo/paseo/pull/3920))
 - Added plugin-defined timeline transformations and rendering ([#3940](https://github.com/getpaseo/paseo/pull/3940))
+- Added SSH connections to existing remote daemons from Desktop and CLI ([#3989](https://github.com/getpaseo/paseo/pull/3989) by [@reidlevesque](https://github.com/reidlevesque))
+- Added workspace management and layout actions to the Command Center ([#3013](https://github.com/getpaseo/paseo/pull/3013) by [@cleiter](https://github.com/cleiter))
+- Added contextual composer-pill contributions for plugins ([#3956](https://github.com/getpaseo/paseo/pull/3956))
+- Added host UI primitives for client plugins ([#3967](https://github.com/getpaseo/paseo/pull/3967))
+- Added readable prompts, details, and results for Paseo tool calls ([#4066](https://github.com/getpaseo/paseo/pull/4066))
+- Added zoom and pan to workspace images and assistant timeline previews ([#4032](https://github.com/getpaseo/paseo/pull/4032), [#4049](https://github.com/getpaseo/paseo/pull/4049), [#4064](https://github.com/getpaseo/paseo/pull/4064))
 - Added opening child folders directly in the preferred desktop editor ([#3615](https://github.com/getpaseo/paseo/pull/3615) by [@caikovsky](https://github.com/caikovsky))
+- Added host navigation from plugin surfaces to agents and workspaces ([#3901](https://github.com/getpaseo/paseo/pull/3901) by [@omercnet](https://github.com/omercnet))
 - Added host-rendered icons to plugin client surfaces ([#3903](https://github.com/getpaseo/paseo/pull/3903) by [@omercnet](https://github.com/omercnet))
 - Added semantic surface, border, success, and warning colors to plugin themes ([#3898](https://github.com/getpaseo/paseo/pull/3898) by [@omercnet](https://github.com/omercnet))
 - Added registered project listing to the public plugin SDK ([#3899](https://github.com/getpaseo/paseo/pull/3899) by [@omercnet](https://github.com/omercnet))
+- Added PR and MR number search to the Command Center ([#3008](https://github.com/getpaseo/paseo/pull/3008) by [@cleiter](https://github.com/cleiter))
+- Added session commands to agent SDK handles ([#3719](https://github.com/getpaseo/paseo/pull/3719) by [@gpambrozio](https://github.com/gpambrozio), [@marvin-ambrozio](https://github.com/marvin-ambrozio))
 - Added F-Droid release metadata and stable changelog generation ([#2501](https://github.com/getpaseo/paseo/pull/2501) by [@antonok-edm](https://github.com/antonok-edm))
+- Added Astro syntax highlighting to files, the editor, and diffs ([#3997](https://github.com/getpaseo/paseo/pull/3997))

 ### Improved

 - Streamed assistant text at a steady visual rate instead of in arrival lumps ([#3612](https://github.com/getpaseo/paseo/pull/3612) by [@Tommypop2](https://github.com/Tommypop2))
 - Painted cached conversations before unrelated cache restoration and network loading ([#3907](https://github.com/getpaseo/paseo/pull/3907))
+- Reused one OpenCode helper across ordinary agent sessions instead of spawning one per agent ([#4009](https://github.com/getpaseo/paseo/pull/4009))
+- Batched GitHub pull request polling within the reserved API budget ([#3825](https://github.com/getpaseo/paseo/pull/3825) by [@dezchai](https://github.com/dezchai))
 - Added manual, action-required, and warning states to GitLab and Gitea checks ([#2337](https://github.com/getpaseo/paseo/pull/2337) by [@nllptrx](https://github.com/nllptrx))
+- Kept cold-start pull request status checks on the shared GitHub batch path ([#4025](https://github.com/getpaseo/paseo/pull/4025))

 ### Fixed

+- Fixed the daemon crashing when a Claude or OMP JSONL process closes during a write ([#4048](https://github.com/getpaseo/paseo/pull/4048))
+- Fixed Android first-message submissions crashing when the keyboard restarted during composer teardown ([#4044](https://github.com/getpaseo/paseo/pull/4044))
+- Fixed long mobile drafts hiding composer controls behind the keyboard ([#4051](https://github.com/getpaseo/paseo/pull/4051))
+- Fixed Android timelines shifting when tapping selectable text ([#4090](https://github.com/getpaseo/paseo/pull/4090))
+- Fixed web and Electron composers losing focus after submission ([#4067](https://github.com/getpaseo/paseo/pull/4067))
+- Fixed Android dictation leaving Bluetooth audio in call-quality routing after capture stopped ([#4069](https://github.com/getpaseo/paseo/pull/4069))
+- Fixed dictation retries timing out after an abandoned partial transcript ([#4065](https://github.com/getpaseo/paseo/pull/4065))
+- Fixed immediate dictation submissions omitting the newest speech segment ([#3968](https://github.com/getpaseo/paseo/pull/3968))
+- Fixed the model selector crashing in iPad desktop layouts ([#3992](https://github.com/getpaseo/paseo/pull/3992) by [@yzim](https://github.com/yzim))
+- Fixed OpenCode child-session prompts missing from provider subagent timelines ([#4055](https://github.com/getpaseo/paseo/pull/4055) by [@mcowger](https://github.com/mcowger))
+- Fixed archived agents disappearing when opened from History ([#4033](https://github.com/getpaseo/paseo/pull/4033))
+- Fixed restored workspace tabs entering reconciliation loops ([#3987](https://github.com/getpaseo/paseo/pull/3987))
+- Fixed archived workspaces returning from durable cache ([#3975](https://github.com/getpaseo/paseo/pull/3975))
+- Fixed Grok unified-billing accounts showing zero credits instead of weekly usage ([#4029](https://github.com/getpaseo/paseo/pull/4029) by [@Lite-G](https://github.com/Lite-G), [@claude](https://github.com/claude))
+- Fixed daemon reconnects stalling while Git processes were queued ([#3945](https://github.com/getpaseo/paseo/pull/3945))
+- Fixed slow Pi and OMP startup requests timing out after 30 seconds ([#4008](https://github.com/getpaseo/paseo/pull/4008))
+- Fixed commits and squash merges bypassing configured Git signing ([#3976](https://github.com/getpaseo/paseo/pull/3976))
+- Fixed Android system navigation covering the Commits controls ([#4005](https://github.com/getpaseo/paseo/pull/4005))
+- Fixed new agent work appearing as reopened tasks ([#4068](https://github.com/getpaseo/paseo/pull/4068))
+- Fixed Markdown literal characters being replaced by typographic symbols ([#3253](https://github.com/getpaseo/paseo/pull/3253) by [@cleiter](https://github.com/cleiter))
 - Fixed rewinding long conversations replaying the complete rebuilt timeline ([#3642](https://github.com/getpaseo/paseo/pull/3642))
 - Fixed rewound prompts remaining blank in the mounted iOS composer ([#3946](https://github.com/getpaseo/paseo/pull/3946))
 - Fixed native plugin setup and async client callbacks failing on iOS ([#3942](https://github.com/getpaseo/paseo/pull/3942))
@@ -46,6 +46,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
 | [docs/rpc-namespacing.md](docs/rpc-namespacing.md)                   | WebSocket RPC naming convention — dotted namespaces and `.request`/`.response` pairs                                           |
 | [docs/protocol-compatibility.md](docs/protocol-compatibility.md)     | Why app/daemon versions drift, protocol vs feature contract, capability gating, COMPAT tagging                                 |
 | [docs/protocol-validation.md](docs/protocol-validation.md)           | zod-aot generated inbound WebSocket validation, patched compiler regressions, schema-purity rules                              |
+| [docs/permissions.md](docs/permissions.md)                           | Semantic daemon permissions, principals, credentials, pairing invitations, and Hub authority                                   |
 | [docs/terminal-performance.md](docs/terminal-performance.md)         | Terminal latency pipeline, coalescing/backpressure invariants, benchmark + perf spec usage                                     |
 | [docs/agent-stream-performance.md](docs/agent-stream-performance.md) | Assistant text pipeline — coalescing window, paced reveal, why arrival lumps are smoothed at render                            |
 | [docs/file-observation.md](docs/file-observation.md)                 | Recursive watcher ownership, Linux constraints, teardown invariants, and Parcel comparison                                     |
@@ -393,6 +393,7 @@ Custom OMP profiles should extend `omp`. They inherit the OMP adapter's `rpc-ui`
        },
        "params": {
          "sessionDir": "~/.local/state/omp-work/omp/agent/sessions",
+          "rpcTimeoutMs": 60000,
          "smolModel": "openai/gpt-5-mini",
          "slowModel": "anthropic/claude-opus-4-1",
          "planModel": "openai/o3"
@@ -403,7 +404,7 @@ Custom OMP profiles should extend `omp`. They inherit the OMP adapter's `rpc-ui`
 }
 ```

-`params.sessionDir` is used only for importing sessions that were started outside Paseo. If `command` or XDG env vars move OMP's state directory, set `params.sessionDir` to the resulting OMP JSONL session directory; launching and resuming still go through the configured command.
+`params.sessionDir` is used only for importing sessions that were started outside Paseo. If `command` or XDG env vars move OMP's state directory, set `params.sessionDir` to the resulting OMP JSONL session directory; launching and resuming still go through the configured command. `params.rpcTimeoutMs` overrides the 60-second OMP control-plane RPC deadline.

 For other providers that keep Pi's `--mode rpc` API but write sessions somewhere else, extend `pi`, replace the command, and provide the JSONL session directory:

@@ -416,7 +417,8 @@ For other providers that keep Pi's `--mode rpc` API but write sessions somewhere
        "label": "My Pi Fork",
        "command": ["my-pi-fork"],
        "params": {
-          "sessionDir": "~/.my-pi-fork/sessions"
+          "sessionDir": "~/.my-pi-fork/sessions",
+          "rpcTimeoutMs": 60000
        }
      }
    }
@@ -424,7 +426,7 @@ For other providers that keep Pi's `--mode rpc` API but write sessions somewhere
 }
 ```

-This session directory is also import-only. Launching and resuming still go through the configured command, so this example resumes with `my-pi-fork --mode rpc --session <session-file>`.
+This session directory is also import-only. Launching and resuming still go through the configured command, so this example resumes with `my-pi-fork --mode rpc --session <session-file>`. `params.rpcTimeoutMs` overrides the 60-second Pi control-plane RPC deadline.

 ---

@@ -30,7 +30,7 @@ Before adding a new component, read `components/ui/`. The primitive usually exis

 Hierarchy is conveyed through weight and color, not size. Most interface text is `fontSize.base`; compact metadata and hints use `fontSize.sm`. The distinction between a row's primary line and its secondary line is `foreground` versus `foregroundMuted`.

-The authored interface ramp uses a 14px base. New native installs default to 15px; web and desktop default to 14px. The Appearance **Interface size** setting is the rendered `fontSize.base` value and scales the rest of the UI ramp proportionally. Primary readable content has its own `fontSize.content`, which defaults to 15px on every platform. It owns message bodies, composer input, Markdown, and PR prose. Controls, navigation, metadata, tool chrome, code, diffs, editors, and terminals stay on their interface or code tokens. **Code size** remains independent.
+The authored interface ramp uses a 14px base. New native installs default to 15px; web and desktop default to 14px. The Appearance **Interface size** setting is the rendered `fontSize.base` value and scales the rest of the UI ramp proportionally. Primary readable content has its own `fontSize.content`, which defaults to 16px on native and 15px on web and desktop. It owns message bodies, composer input, Markdown, and PR prose. Controls, navigation, metadata, tool chrome, code, diffs, editors, and terminals stay on their interface or code tokens. **Code size** remains independent.

 Weight has three tiers, applied by role:

@@ -132,30 +132,21 @@ quietly relying on:

 The fix for transforms is Gotcha 3. The fix for context is Gotcha 7.

-## Gotcha 3 — Reanimated transforms vs `measureInWindow`
+## Gotcha 3 — Keyboard layout and portal anchors

-`measureInWindow` returns the view's _current_ screen position. In theory that
-includes Reanimated-applied transforms (Reanimated updates native view
-properties, and Android's `getLocationInWindow` reads transformed coords). In
-practice it's racy — the measurement may snapshot mid-animation, and on Android
-with Reanimated worklets the result is not always stable.
+Move the chat surface with worklet-driven bottom padding from
+`KeyboardShiftProvider`. Padding keeps the stream, composer, visual position,
+and native hit testing in the same layout. Do not translate the stream and
+composer independently.

-If the panel cannot stay inside the transformed ancestor, do not try to track
-the keyboard by re-measuring on every frame. Instead,
-**slave the popover's transform to the same `KeyboardShiftProvider` SharedValue
-the composer uses**:
+Do not use the controller's raw keyboard progress for the padding. It can retain
+a nonzero value after the keyboard closes. The shared provider normalizes that
+state and reconciles native animation-end events.

-1. Snapshot `openShift = shift.value` at the moment you measure the anchor.
-2. Apply `useAnimatedStyle(() => ({ transform: [{ translateY: openShift.value - shift.value }] }))`
-   to the popover wrapper.
-
-When `shift` equals `openShift`, the translate is 0 and the popover sits at
-the measured position. When the keyboard moves afterward, the delta translates
-the popover by exactly the amount the composer translates. They move in
-lockstep, no re-measurement needed. Do not call
-`useReanimatedKeyboardAnimation()` directly for app UI offset policy; Android
-can briefly report a stale nonzero height with closed progress, and the shared
-provider is where that is normalized.
+`measureInWindow` already includes the dock's current padding layout. When a
+portal opens, snapshot the current shift and apply only the subsequent shift
+delta to its animated `bottom`. Adding the full shift moves the portal twice and
+can place it over the composer controls.

 The provider also reconciles iOS from the controller's native `onEnd` event.
 The controller's stock iOS shared values update at move start and during an
@@ -4,7 +4,7 @@ Paseo Hub is an explicit opt-in connection from one Paseo daemon to one Hub. Run
 not register it with a Hub. The relationship begins only when a user runs
 `paseo hub connect [url]` from the daemon machine with an explicit API key or matching stored CLI login.

-The human CLI login and daemon relationship are separate identities. `paseo hub login [url]` stores a durable organization-scoped CLI credential keyed by normalized Hub origin under `PASEO_HOME`. Origin resolution uses explicit command input, `PASEO_HUB_URL`, active login, then `https://hub.paseo.sh`. Connect uses exact-origin authority to request a one-time enrollment token, then passes only that token to the daemon. The daemon generates and persists its own relationship credential.
+The human CLI login and daemon relationship are separate identities. `paseo hub login [url]` stores a durable organization-scoped CLI credential keyed by normalized Hub origin under `PASEO_HOME`. Interactive login optionally connects the local daemon, then points to the Hub UI for trigger configuration; it does not scaffold or deploy configuration. `paseo hub init` remains the explicit triggers-as-code scaffold. `paseo hub export [directory]` writes the active organization's current triggers as one self-contained YAML file per trigger, using the active login unless another Hub or API key is selected. Origin resolution uses explicit command input, `PASEO_HUB_URL`, active login, then `https://hub.paseo.sh`. Connect uses exact-origin authority to request a one-time enrollment token, then passes only that token to the daemon. The daemon generates and persists its own relationship credential.

 ## Connection and authority

@@ -17,17 +17,21 @@ The daemon persists a relationship ID and private connection credential before e
 relationship is independent of its current transport, so a future transport can replace the direct
 WebSocket without pairing again. The current foundation supports one Hub relationship per daemon.

-Normal authenticated daemon sessions may run the `hub.management.daemon.connect`,
-`hub.management.daemon.get_status`, and `hub.management.daemon.disconnect` RPCs. Hub connections
-receive only `hub.execution.*` authority, so execution credentials cannot manage the relationship.
+Normal authenticated daemon sessions may manage the daemon's Hub relationship and permissions.
+Hub connections have no daemon permissions by default. Connecting gives Hub machine identity and
+presence but no execution authority. The `hub.execute` permission lets workflows triggered from
+GitHub, Slack, Discord, Linear, and other integrations create workspaces and run agents. Grant it
+during interactive login or later with `paseo hub permissions grant hub.execute`. Relationships
+created before this split migrate their legacy execution scope to `hub.execute`. Hub sessions cannot
+manage their own relationship or permissions.

 ## Session grants and execution ownership

 Trusted clients and the Hub use the same `Session` implementation. The connection boundary supplies
-grants: trusted clients receive `*`, while an enrolled Hub connection receives its persisted
-`hub.execution.*` grant. One matcher handles exact RPC names and trailing namespace wildcards for
-both inbound requests and outbound messages. A denied request returns the ordinary `rpc_error`
-shape.
+semantic permissions: trusted clients receive the owner permission set, while an enrolled Hub
+connection receives its persisted permissions. Legacy relationship files carrying
+`hub.execution.*` migrate once to `hub.execute` at the persistence boundary. A denied request returns
+the ordinary `rpc_error` shape. See [permissions.md](permissions.md).

 The Hub connection still has a narrow lifecycle boundary: it has no trusted-client hello/resume,
 browser, binary, retained-session, or broadcast state. Its outbound execution events include only
@@ -259,7 +259,9 @@ background music stays paused. On iOS this is not just a "while recording" probl
 `.playAndRecord`/`.voiceChat` category is non-mixing and survives backgrounding, and iOS re-asserts
 it every time the app returns to the foreground — so one dictation turn kills music for the life of
 the process, on every open, until the app is force-quit. Android holds
-`AUDIOFOCUS_GAIN_TRANSIENT_EXCLUSIVE` with the same effect.
+`AUDIOFOCUS_GAIN_TRANSIENT_EXCLUSIVE` with the same effect. It must also reset
+`MODE_IN_COMMUNICATION` and clear the selected communication device; abandoning focus alone can
+leave Bluetooth earbuds on their narrow-band call route without an active microphone indicator.

 `createAudioEngine` (`packages/app/src/voice/audio-engine.native.ts`) calls
 `releaseAudioSession()` whenever capture stops and the playback queue drains, and the iOS module
@@ -267,9 +269,9 @@ also releases on `OnAppEntersBackground`. The native side re-guards on `isRecord
 `speechPlayer.isPlaying`, because the native engine is a singleton shared by multiple JS engine
 wrappers (voice provider + dictation) and only it knows the true state.

-This cannot be validated by a JS test — verify on a device: play music, open Paseo, use dictation
-once, stop, and confirm the music resumes; then background/foreground the app and confirm it keeps
-playing.
+This cannot be validated by a JS test — verify on a device: play music through Bluetooth earbuds,
+open Paseo, use dictation once, stop, and confirm the music resumes at full quality; then
+background/foreground the app and confirm it keeps playing at full quality.

 ## Unistyles + Reanimated

@@ -0,0 +1,59 @@
+# Daemon permissions
+
+The daemon authorizes principals with semantic permissions. RPC names and protocol namespaces are not authority.
+
+## Model
+
+```text
+principal -> grants
+    |
+    +-- authenticated by a device or service credential
+    `-- opens a session with equal or narrower authority
+```
+
+A principal is the durable identity the daemon authorizes. A credential proves that a device or service represents it. Keep them separate so you can rotate credentials, attach more than one device, and revoke a Hub user without inventing daemon user accounts.
+
+A pairing invitation is neither. It is an expiring, single-use exchange that creates a principal and credential with the permissions selected by its issuer.
+
+## Permissions
+
+| Permission          | Authority                                                                  |
+| ------------------- | -------------------------------------------------------------------------- |
+| `daemon.read`       | Daemon status, diagnostics, configuration, and provider information        |
+| `daemon.manage`     | Restart, update, configuration changes, providers, skills, and plugins     |
+| `tunnel.manage`     | Relay, Hub, service tunnel, and public endpoint relationships              |
+| `access.manage`     | Pairing invitations, principals, credentials, grants, and revocation       |
+| `workspace.read`    | Projects, workspaces, agents, timelines, files, diffs, and terminal output |
+| `workspace.write`   | Prompts, agent control, files, terminals, git operations, and scripts      |
+| `workspace.manage`  | Create, rename, archive, and remove projects and workspaces                |
+| `automation.manage` | Schedules, heartbeats, and loops                                           |
+| `hub.execute`       | The Hub-owned execution lifecycle                                          |
+
+Agents and terminals use workspace authority. Both can execute code and mutate the workspace, so separate write permissions would claim an isolation boundary the daemon cannot enforce.
+
+Owner, operator, and viewer are UI presets expanded into explicit permissions. Do not persist them as roles. Adding a permission must not silently widen an existing principal.
+
+Permissions are additive allows. Missing authority denies the operation. Do not add deny precedence.
+
+## Resources
+
+Permissions are daemon-wide today. Future grants may select workspaces or agents, but operation classification remains inside the authorization module:
+
+```ts
+type Grant = {
+  permission: Permission;
+  resource: { kind: "daemon" } | { kind: "workspace"; ids: string[] };
+};
+```
+
+A delegating principal can grant only authority it already possesses. A session may attenuate its principal's grants but cannot widen them.
+
+Workspace-scoped grants require every resource-bearing operation and outbound observation to enforce the same workspace boundary. File preview currently accepts any daemon-readable regular file, so it must gain resource enforcement before workspace-specific access ships.
+
+## Hub
+
+The Hub authenticates as a service principal. Its locally selected grants decide whether it may execute agents, manage the daemon, manage tunnels, or manage access.
+
+Hub user and role identifiers remain opaque external subjects. The Hub may create and revoke linked daemon principals when granted `access.manage`; the daemon does not interpret accounts, organizations, or roles.
+
+Hub enrollment and permission updates exchange these semantic permissions directly. Legacy persisted Hub relationships that contain `hub.execution.*` migrate once to `hub.execute` when the daemon loads them; new relationships never persist or emit transport scopes as authority.
@@ -201,9 +201,10 @@ when moved between hosts. Explorer configuration can create workspace-context pa
 existing agent-context instances, but it cannot create an agent panel without an agent-aware command.

 Command Center callbacks use the selected host's existing `PaseoApi` for normal Paseo operations.
-They use typed plugin RPC only for plugin-specific backend work. Navigation is limited to the
-plugin's registered global surfaces and workspace panels; plugins do not receive Expo Router or
-workspace-layout store access.
+They use typed plugin RPC only for plugin-specific backend work. Surface and panel props expose
+optional client-owned agent and workspace navigation; its absence is the compatibility gate for
+older clients. Other navigation remains limited to registered global surfaces and workspace panels.
+Plugins do not receive Expo Router or workspace-layout store access.

 ## Contribute composer pills

@@ -67,6 +67,8 @@ Pi model records expose input capabilities through `model.input`. Only send raw

 Pi MCP support depends on the open-source `pi-mcp-adapter` extension being loaded for the agent cwd. Probe with Pi RPC `get_commands`; the adapter registers an extension command named `mcp` (often with `sourceInfo.source` containing `pi-mcp-adapter`). When Paseo injects MCP servers into Pi, write a per-agent MCP config and pass it with `--mcp-config` instead of modifying user or project MCP files. Because that flag replaces the Pi global config layer, preserve the existing `<Pi agent dir>/mcp.json` in the generated file before overlaying injected servers. For local HTTP servers such as Paseo's own `/mcp/agents` endpoint, explicitly disable adapter OAuth (`auth: false`, `oauth: false`) in the generated config.

+Pi and OMP control-plane RPCs wait 60 seconds by default. Override the provider's `params.rpcTimeoutMs` when extension or MCP startup on a slow host needs a different deadline. Timeout errors name the pending RPC phase and report both elapsed time and the configured deadline. This setting does not govern long-running Pi compaction or Pi extension UI results.
+
 Pi import discovery reads Pi's persisted JSONL session files because Pi RPC does not expose a recent-session listing command. Resume and full history hydration still go through `pi --mode rpc` using the session file as `nativeHandle`.

 OMP is a first-class built-in provider, disabled by default. Its launch contract, typed runtime, agent/session behavior, history, permissions, imports, and test fake live under `providers/omp/`; only the provider-neutral JSONL child-process transport is shared with Pi. It launches `omp --mode rpc-ui`, uses OMP's `get_available_commands` RPC for slash-command discovery, bridges OMP `rpc-ui` approval dialogs into Paseo permissions, and imports terminal-started sessions from `~/.omp/agent/sessions` when enabled.
@@ -75,7 +77,9 @@ OMP supports native Paseo host tools. The adapter registers the full caller-scop

 Pi RPC extension UI dialog requests (`select`, `input`, `editor`, `confirm`) are bridged into Paseo question permissions and answered with `extension_ui_response`. Pi extensions such as `ask_user` may chain dialogs: for example, a `select` can be followed by an optional-comment `input`. When an `ask_user` tool call declares `allowComment: true`, Paseo presents the selection and optional comment as one question permission, answers Pi's initial `select` immediately, then auto-answers the follow-up optional `input` with the comment the user already supplied (or an empty string). Preserve placeholders and optional/skip semantics for standalone optional inputs so the app can still distinguish "skip this optional input" from "cancel the whole dialog." Fire-and-forget extension UI requests such as notifications are intentionally ignored by the provider adapter unless Paseo grows first-class UI for them.

-OpenCode MCP injection is dynamic and session-scoped. Call OpenCode's `mcp.add` endpoint with the MCP server config and do not follow it with `mcp.connect`; `connect` only toggles MCP servers already present in OpenCode's own config. New OpenCode versions return `McpServerNotFoundError`/404 for `connect` after a dynamic add because the server is not config-backed, while older versions silently swallowed the same missing-config path.
+OpenCode 1 keeps MCP and process environment outside the session boundary. Paseo shares one OpenCode server for ordinary agents and installs a daemon-owned plugin through `OPENCODE_CONFIG_CONTENT`. The plugin reads the exact agent environment and caller-scoped Paseo tool catalog from the daemon's private loopback bridge for each OpenCode session. Bridge context lives only in daemon memory and is removed when the Paseo session closes. The content-addressed plugin artifact contains no session data or secrets.
+
+An agent with custom environment variables or user-configured MCP servers gets a dedicated OpenCode server. Keep that isolation until OpenCode exposes those values as session-owned configuration. Configure custom MCP with `mcp.add`; do not follow it with `mcp.connect`, which only toggles config-backed servers.

 OpenCode owns user message IDs. Do not pass Paseo-generated IDs to OpenCode prompt APIs; let OpenCode create `msg*` IDs and record the user timeline item from the `message.updated` event.

@@ -0,0 +1,11 @@
+Changed
+- Changed the project license to Apache-2.0
+- Changed Cmd/Ctrl+E to toggle Explorer visibility without selecting a view
+- Changed the default mobile content text size from 15px to 16px
+
+Added
+- Added plugin installation and updates directly from Git repositories
+- Added plugin-defined timeline transformations and rendering
+- Added SSH connections to existing remote daemons from Desktop and CLI
+
+Full notes: https://paseo.sh/changelog
@@ -0,0 +1,11 @@
+Changed
+- Changed the project license to Apache-2.0
+- Changed Cmd/Ctrl+E to toggle Explorer visibility without selecting a view
+- Changed the default mobile content text size from 15px to 16px
+
+Added
+- Added plugin installation and updates directly from Git repositories
+- Added plugin-defined timeline transformations and rendering
+- Added SSH connections to existing remote daemons from Desktop and CLI
+
+Full notes: https://paseo.sh/changelog
@@ -0,0 +1,11 @@
+Changed
+- Changed the project license to Apache-2.0
+- Changed Cmd/Ctrl+E to toggle Explorer visibility without selecting a view
+- Changed the default mobile content text size from 15px to 16px
+
+Added
+- Added plugin installation and updates directly from Git repositories
+- Added plugin-defined timeline transformations and rendering
+- Added SSH connections to existing remote daemons from Desktop and CLI
+
+Full notes: https://paseo.sh/changelog
@@ -0,0 +1,11 @@
+Changed
+- Changed the project license to Apache-2.0
+- Changed Cmd/Ctrl+E to toggle Explorer visibility without selecting a view
+- Changed the default mobile content text size from 15px to 16px
+
+Added
+- Added plugin installation and updates directly from Git repositories
+- Added plugin-defined timeline transformations and rendering
+- Added SSH connections to existing remote daemons from Desktop and CLI
+
+Full notes: https://paseo.sh/changelog
@@ -1 +1 @@
-sha256-zn0UJm7RPR5mlCvKTddcq0bIugrp6VcRBPdwJX8kJIg=
+sha256-YiXz9rVJxzhtKdvYsg5UhVXTaetvH0sdJ/8dyfvSGQQ=
@@ -1,12 +1,12 @@
 {
  "name": "paseo",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "paseo",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "hasInstallScript": true,
      "license": "Apache-2.0",
      "workspaces": [
@@ -36298,7 +36298,7 @@
    },
    "packages/app": {
      "name": "@getpaseo/app",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "@codemirror/commands": "6.10.4",
        "@codemirror/language": "6.12.4",
@@ -37363,12 +37363,12 @@
    },
    "packages/cli": {
      "name": "@getpaseo/cli",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "@clack/prompts": "^1.0.0",
-        "@getpaseo/client": "0.7.0-beta.1",
-        "@getpaseo/protocol": "0.7.0-beta.1",
-        "@getpaseo/server": "0.7.0-beta.1",
+        "@getpaseo/client": "0.7.0",
+        "@getpaseo/protocol": "0.7.0",
+        "@getpaseo/server": "0.7.0",
        "chalk": "^5.3.0",
        "commander": "^12.0.0",
        "mime-types": "^2.1.35",
@@ -37615,10 +37615,10 @@
    },
    "packages/client": {
      "name": "@getpaseo/client",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
-        "@getpaseo/protocol": "0.7.0-beta.1",
-        "@getpaseo/relay": "0.7.0-beta.1",
+        "@getpaseo/protocol": "0.7.0",
+        "@getpaseo/relay": "0.7.0",
        "zod": "^4.4.3"
      },
      "devDependencies": {
@@ -37629,7 +37629,7 @@
    },
    "packages/desktop": {
      "name": "@getpaseo/desktop",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "license": "Apache-2.0",
      "dependencies": {
        "@getpaseo/cli": "*",
@@ -37872,7 +37872,7 @@
    },
    "packages/expo-two-way-audio": {
      "name": "@getpaseo/expo-two-way-audio",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "license": "MIT",
      "devDependencies": {
        "@types/jest": "^29.5.14",
@@ -38768,7 +38768,7 @@
    },
    "packages/highlight": {
      "name": "@getpaseo/highlight",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "@codemirror/language": "6.12.4",
        "@codemirror/legacy-modes": "^6.5.3",
@@ -38797,13 +38797,13 @@
    },
    "packages/plugin": {
      "name": "@getpaseo/plugin",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "use-sync-external-store": "^1.6.0"
      },
      "devDependencies": {
-        "@getpaseo/client": "0.7.0-beta.1",
-        "@getpaseo/protocol": "0.7.0-beta.1",
+        "@getpaseo/client": "0.7.0",
+        "@getpaseo/protocol": "0.7.0",
        "@types/node": "^20.9.0",
        "@types/react": "~19.2.0",
        "react": "19.1.0",
@@ -38812,15 +38812,15 @@
        "zod": "^4.4.3"
      },
      "peerDependencies": {
-        "@getpaseo/client": "0.7.0-beta.1",
-        "@getpaseo/protocol": "0.7.0-beta.1",
+        "@getpaseo/client": "0.7.0",
+        "@getpaseo/protocol": "0.7.0",
        "react": "19.1.0",
        "zod": "^4.4.3"
      }
    },
    "packages/protocol": {
      "name": "@getpaseo/protocol",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "zod": "^4.4.3"
      },
@@ -38833,7 +38833,7 @@
    },
    "packages/relay": {
      "name": "@getpaseo/relay",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "base64-js": "^1.5.1",
        "tweetnacl": "^1.0.3",
@@ -39051,17 +39051,17 @@
    },
    "packages/server": {
      "name": "@getpaseo/server",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "@agentclientprotocol/sdk": "^0.17.1",
        "@anthropic-ai/claude-agent-sdk": "0.3.246",
        "@anthropic-ai/sdk": "^0.104.2",
        "@babel/parser": "^7.29.8",
-        "@getpaseo/client": "0.7.0-beta.1",
-        "@getpaseo/highlight": "0.7.0-beta.1",
-        "@getpaseo/plugin": "0.7.0-beta.1",
-        "@getpaseo/protocol": "0.7.0-beta.1",
-        "@getpaseo/relay": "0.7.0-beta.1",
+        "@getpaseo/client": "0.7.0",
+        "@getpaseo/highlight": "0.7.0",
+        "@getpaseo/plugin": "0.7.0",
+        "@getpaseo/protocol": "0.7.0",
+        "@getpaseo/relay": "0.7.0",
        "@isaacs/ttlcache": "^2.1.4",
        "@modelcontextprotocol/sdk": "1.29.0",
        "@opencode-ai/sdk": "1.14.46",
@@ -39985,7 +39985,7 @@
    },
    "packages/website": {
      "name": "@getpaseo/website",
-      "version": "0.7.0-beta.1",
+      "version": "0.7.0",
      "dependencies": {
        "@cloudflare/vite-plugin": "^1.29.1",
        "@cloudflare/workers-types": "^4.20260317.1",
@@ -1,6 +1,6 @@
 {
  "name": "paseo",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0",
  "private": true,
  "description": "Paseo: voice-controlled development environment for local AI coding agents",
  "keywords": [
@@ -41,6 +41,7 @@
    "dev:server:raw": "npm run dev --workspace=@getpaseo/server",
    "dev:app": "cross-env PASEO_LISTEN=127.0.0.1:6768 EXPO_PORT=8081 ./scripts/dev-app.sh",
    "test:e2e:mobile": "./scripts/test-mobile-agent-device.sh",
+    "test:e2e:composer-keyboard:android": "./packages/app/e2e/mobile/composer-keyboard/android.sh",
    "dev:website": "npm run dev --workspace=@getpaseo/website",
    "postinstall": "node scripts/postinstall-patches.mjs",
    "prepare": "lefthook install --force",
@@ -23,7 +23,7 @@ async function completeSubmittedTurn(

  const finish = await agent.client.waitForFinish(agent.agentId, 30_000);
  expect(finish.status).toBe("idle");
-  await expect(page.getByText("(end of synthetic stream)", { exact: true })).toBeVisible();
+  await expect(page.getByText("(end of synthetic stream)", { exact: true }).last()).toBeVisible();
  await expect(userMessage).toHaveAttribute("aria-busy", "false");
  return userMessage;
 }
@@ -40,7 +40,7 @@ async function expectTurnCompletesNormally(
 ): Promise<void> {
  const finish = await agent.client.waitForFinish(agent.agentId, 30_000);
  expect(finish.status).toBe("idle");
-  await expect(page.getByText("(end of synthetic stream)", { exact: true })).toBeVisible();
+  await expect(page.getByText("(end of synthetic stream)", { exact: true }).last()).toBeVisible();
  await expectAgentIdle(page);
 }

@@ -45,6 +45,49 @@ test("switching between settled agent tabs keeps a real assistant PNG rendered",
  await switchAwayAndBackWithoutImageInstability(page, { image, imageAgent, otherAgent });
 });

+test("opens a timeline image in a zoomable lightbox", async ({
+  imageWorkspace: workspace,
+  page,
+}) => {
+  test.setTimeout(120_000);
+  const image = await createSmallAssistantPng(workspace, {
+    alt: "Zoomable timeline image",
+    fileName: "zoomable-timeline-image.png",
+  });
+  const imageAgent = await createSettledMockAgent(workspace, "Zoomable image timeline");
+  await emitSettledAssistantImage(workspace.client, imageAgent, image);
+  await openAssistantImageTimeline(page, imageAgent);
+  await expectAssistantImageRendered(page, image);
+
+  await page.getByRole("button", { name: "Open image attachment" }).click();
+  const lightboxImage = page.getByTestId("attachment-lightbox-image");
+  const canvas = page.getByTestId("attachment-lightbox-canvas");
+  await expect(lightboxImage).toBeVisible();
+  await canvas.hover();
+  const transformedContent = canvas.locator(":scope > div").first();
+  const initialBox = await transformedContent.boundingBox();
+  const canvasBox = await canvas.boundingBox();
+  expect(initialBox).not.toBeNull();
+  expect(canvasBox).not.toBeNull();
+  expect(initialBox!.width).toBeLessThan(canvasBox!.width);
+  const zoomIn = page.getByRole("button", { name: "Zoom in", exact: true });
+  await zoomIn.click();
+  await zoomIn.click();
+  await zoomIn.click();
+  await zoomIn.click();
+  await expect
+    .poll(async () => (await transformedContent.boundingBox())?.width ?? 0)
+    .toBeGreaterThan(canvasBox!.width);
+
+  await canvas.dblclick({ position: { x: canvasBox!.width / 2, y: canvasBox!.height / 2 } });
+  await expect
+    .poll(async () => Math.round((await transformedContent.boundingBox())?.width ?? 0))
+    .toBe(Math.round(initialBox!.width));
+
+  await canvas.click({ position: { x: 4, y: 4 } });
+  await expect(lightboxImage).toHaveCount(0);
+});
+
 test("reloading a timeline anchors near-tail assistant image growth", async ({
  imageWorkspace: workspace,
  page,
@@ -10,6 +10,7 @@ import {
  archiveAgentFromSessions,
  clickSessionRow,
  createIdleAgent,
+  expectArchivedAgentFocused,
  expectSessionRowArchived,
  expectSessionRowVisible,
  expectWorkspaceArchiveOutcome,
@@ -21,6 +22,7 @@ import {
  resetSeededPageState,
  reloadWorkspace,
 } from "../support/helpers/archive-tab";
+import { expectAgentTabActive } from "../support/helpers/launcher";

 test.describe("Archive tab reconciliation", () => {
  let client: Awaited<ReturnType<typeof connectSeedClient>>;
@@ -144,6 +146,8 @@ test.describe("Archive tab reconciliation", () => {

    await clickSessionRow(page, archived.title);

+    await expectArchivedAgentFocused(page, archived.id);
+    await expectAgentTabActive(page, archived.id);
    expect(await fetchAgentArchivedAt(client, archived.id)).toBe(archivedAt);

    await expect(page).toHaveURL(buildHostWorkspaceRoute(getServerId(), archived.workspaceId), {
@@ -0,0 +1,29 @@
+import { test } from "../support/fixtures";
+import {
+  expectComposerDraft,
+  expectComposerFocused,
+  expectComposerVisible,
+  submitMessage,
+  typeIntoFocusedComposer,
+} from "../support/helpers/composer";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+
+test("submitting a message leaves the composer ready for the next message", async ({ page }) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-focus-",
+    title: "Composer focus",
+  });
+
+  try {
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+
+    await submitMessage(page, "First message");
+    await expectComposerFocused(page);
+
+    await typeIntoFocusedComposer(page, "Second message");
+    await expectComposerDraft(page, "Second message");
+  } finally {
+    await agent.cleanup();
+  }
+});
@@ -538,6 +538,16 @@ test.describe("CodeMirror workspace file editing", () => {
    await openWorkspaceFile(page, "pixel.png");
    const image = visibleFilePane.locator("img");
    await expect(image).toBeVisible();
+    const imageCanvas = page.getByTestId("image-file-preview-canvas");
+    await expect(imageCanvas).toBeVisible();
+    await imageCanvas.hover();
+    const transformedContent = imageCanvas.locator(":scope > div").first();
+    const fittedImageBox = await transformedContent.boundingBox();
+    expect(fittedImageBox).not.toBeNull();
+    await page.getByRole("button", { name: "Zoom in", exact: true }).click();
+    await expect
+      .poll(async () => (await transformedContent.boundingBox())?.width ?? 0)
+      .toBeGreaterThan(fittedImageBox!.width * 1.2);
    const initialSource = await image.getAttribute("src");
    await writeFile(imagePath, BLUE_PIXEL);
    await expect.poll(() => image.getAttribute("src")).not.toBe(initialSource);
@@ -0,0 +1,124 @@
+import { mkdirSync, mkdtempSync, realpathSync } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import type { Locator, Page, TestInfo } from "@playwright/test";
+import { expect, test } from "../support/fixtures";
+import {
+  cleanupRewindFlow,
+  launchAgent,
+  sendMessage,
+  type AgentHandle,
+} from "../support/helpers/rewind-flow";
+
+const GREETING = "Say hello back.";
+
+test.use({ e2eInjectPaseoTools: true });
+
+function verificationPrompt(workspacePath: string): string {
+  return [
+    "Use Paseo tools to perform this exact UI verification.",
+    "Do not edit files or run shell commands. Every prompt below is intentionally non-actionable.",
+    `1. Create a local workspace at ${workspacePath} titled "Presentation QA workspace".`,
+    `2. In that workspace, create a codex/gpt-5.4-mini agent titled "Greeting child" with the initial prompt "${GREETING}".`,
+    `3. Create a schedule named "Greeting schedule" with prompt "${GREETING}", cron "0 0 1 1 *", timezone "Europe/Berlin", provider "codex/gpt-5.4-mini", cwd ${workspacePath}, maxRuns 1, and expiresIn "1h". Delete that schedule using its returned id.`,
+    `4. Create a heartbeat named "Greeting heartbeat" with prompt "${GREETING}", cron "0 0 1 1 *", timezone "Europe/Berlin", maxRuns 1, and expiresIn "1h". Delete that heartbeat using its returned id.`,
+    `5. After the child agent finishes, send it the follow-up prompt "${GREETING}" synchronously.`,
+    "6. Archive the workspace from step 1.",
+    "7. Reply with exactly TOOL_CALL_QA_DONE.",
+    "Use each named Paseo tool exactly once except for the matching schedule and heartbeat deletion tools.",
+  ].join(" ");
+}
+
+async function expandedToolCall(page: Page, label: string): Promise<Locator> {
+  const badge = page.getByTestId("tool-call-badge").filter({ hasText: label }).last();
+  await expect(badge).toBeVisible({ timeout: 30_000 });
+  await badge.scrollIntoViewIfNeeded();
+  await badge.click();
+  return badge;
+}
+
+async function captureToolCall(
+  page: Page,
+  testInfo: TestInfo,
+  input: { label: string; artifact: string; expectedText: Array<string | RegExp> },
+): Promise<void> {
+  const badge = await expandedToolCall(page, input.label);
+  for (const text of input.expectedText) {
+    await expect(badge).toContainText(text);
+  }
+  const screenshot = testInfo.outputPath(`${input.artifact}.png`);
+  await badge.screenshot({ path: screenshot });
+  await testInfo.attach(input.artifact, { path: screenshot, contentType: "image/png" });
+  await badge.click();
+}
+
+async function runPresentationJourney(handle: AgentHandle, workspacePath: string): Promise<void> {
+  await sendMessage(handle, verificationPrompt(workspacePath));
+  await expect(
+    handle.page.getByTestId("assistant-message").filter({ hasText: "TOOL_CALL_QA_DONE" }).last(),
+  ).toBeVisible({ timeout: 30_000 });
+}
+
+test.describe("real Codex Paseo tool-call presentation", () => {
+  test.setTimeout(600_000);
+
+  test("renders owned tool inputs and results as readable text", async ({ page }, testInfo) => {
+    const cwd = realpathSync(mkdtempSync(path.join(tmpdir(), "paseo-tool-call-presentation-")));
+    const childWorkspacePath = path.join(cwd, "presentation-workspace");
+    mkdirSync(childWorkspacePath);
+    let handle: AgentHandle | undefined;
+
+    try {
+      handle = await launchAgent({ page, provider: "codex", cwd, mode: "full-access" });
+      await runPresentationJourney(handle, childWorkspacePath);
+      await page.setViewportSize({ width: 1280, height: 1600 });
+
+      await captureToolCall(page, testInfo, {
+        label: "Create workspace",
+        artifact: "create-workspace-presentation",
+        expectedText: ["Details", "Presentation QA workspace", childWorkspacePath, "local"],
+      });
+      await captureToolCall(page, testInfo, {
+        label: "Create agent",
+        artifact: "create-agent-prompt-presentation",
+        expectedText: ["Prompt", GREETING, "Greeting child", "codex/gpt-5.4-mini", "Result"],
+      });
+      await captureToolCall(page, testInfo, {
+        label: "Send agent prompt",
+        artifact: "send-prompt-presentation",
+        expectedText: ["Prompt", GREETING, "Agent", "Result"],
+      });
+      await captureToolCall(page, testInfo, {
+        label: "Create schedule",
+        artifact: "schedule-presentation",
+        expectedText: [
+          "Prompt",
+          GREETING,
+          "0 0 1 1 *",
+          "Europe/Berlin",
+          "Greeting schedule",
+          "Result",
+        ],
+      });
+      await captureToolCall(page, testInfo, {
+        label: "Create heartbeat",
+        artifact: "heartbeat-presentation",
+        expectedText: [
+          "Prompt",
+          GREETING,
+          "0 0 1 1 *",
+          "Europe/Berlin",
+          "Greeting heartbeat",
+          "Result",
+        ],
+      });
+      await captureToolCall(page, testInfo, {
+        label: "Archive workspace",
+        artifact: "archive-workspace-presentation",
+        expectedText: ["Details", "Workspace", "Result", "Removed directory"],
+      });
+    } finally {
+      await cleanupRewindFlow({ handle, cwd });
+    }
+  });
+});
@@ -29,9 +29,9 @@ function isSettledWorkspaceUrl(url: URL): boolean {
  return url.pathname.includes("/workspace/") && !url.searchParams.has("open");
 }

-function pluginSource(): string {
+function pluginSource(input: { workspaceId: string; agentId: string }): string {
  return `import React, { useRef } from "react";
-import { Text, View } from "react-native";
+import { Pressable, Text, View } from "react-native";
 import { Icon, useAgent, useWorkspace } from "@getpaseo/plugin";
 import { defineRpc } from "@getpaseo/plugin/server";
 import { z } from "zod";
@@ -55,8 +55,14 @@ function AgentPanel({ workspaceId, agentId, host, layout }) {
  return <View><Text>Agent bridge {agent?.id}</Text><Text>Workspace {workspace?.id}</Text><Text>Host {host.id}</Text><Text>Layout {layout.compact ? "compact" : "wide"}</Text></View>;
 }

-function DirectCollisionSurface() {
-  return <View><Text>Direct collision surface</Text></View>;
+function DirectCollisionSurface({ navigation }) {
+  return <View>
+    <Text>Direct collision surface</Text>
+    {navigation ? <>
+      <Pressable accessibilityRole="button" onPress={() => navigation.openWorkspace({ workspaceId: ${JSON.stringify(input.workspaceId)} })}><Text>Open workspace from plugin</Text></Pressable>
+      <Pressable accessibilityRole="button" onPress={() => navigation.openAgent({ agentId: ${JSON.stringify(input.agentId)} })}><Text>Open agent from plugin</Text></Pressable>
+    </> : null}
+  </View>;
 }

 function SidebarCollisionSurface() {
@@ -178,7 +184,10 @@ test.describe("plugin workspace panels and Command Center", () => {
      port: secondaryDaemon.port,
    });
    await writeFile(path.join(directory, "paseo-plugin.json"), JSON.stringify({ id: PLUGIN_ID }));
-    await writeFile(path.join(directory, "index.tsx"), pluginSource());
+    await writeFile(
+      path.join(directory, "index.tsx"),
+      pluginSource({ workspaceId: primary.workspaceId, agentId: "missing-agent" }),
+    );

    try {
      await primaryClient.patchDaemonConfig({ pluginsEnabled: true });
@@ -239,6 +248,38 @@ test.describe("plugin workspace panels and Command Center", () => {
        await page.getByTestId("plugin-surface-close").click();
      });

+      await test.step("surface navigation opens host-owned workspace and agent routes", async () => {
+        await runCommand(page, "Open direct collision surface");
+        await page.getByRole("button", { name: "Open workspace from plugin", exact: true }).click();
+        await page.waitForURL(isSettledWorkspaceUrl);
+        await expect(page.getByTestId("workspace-header-title")).toBeVisible();
+
+        const agent = await primary.client.createAgent({
+          provider: "mock",
+          cwd: primary.repoPath,
+          workspaceId: primary.workspaceId,
+          title: "Plugin navigation agent",
+          model: "ten-second-stream",
+          modeId: "load-test",
+        });
+        const navigationAgentId = agent.id;
+        await writeFile(
+          path.join(directory, "index.tsx"),
+          pluginSource({ workspaceId: primary.workspaceId, agentId: navigationAgentId }),
+        );
+        await primaryClient.reloadPlugin(PLUGIN_ID);
+
+        await runCommand(page, "Open direct collision surface");
+        await page.getByRole("button", { name: "Open agent from plugin", exact: true }).click();
+        await page.waitForURL(isSettledWorkspaceUrl);
+        await expect(
+          page
+            .getByTestId(`workspace-tab-agent_${navigationAgentId}`)
+            .filter({ visible: true })
+            .first(),
+        ).toBeVisible();
+      });
+
      await test.step("switching hosts removes commands from an uninstalled host", async () => {
        await switchWorkspaceViaSidebar({
          page,
@@ -3,8 +3,8 @@ import {
  openPrPane,
  expectPrPaneTitle,
  expectPrPaneState,
-  expectPrPaneCheckSummary,
-  expectPrPaneActivityCount,
+  expectPrPaneChecks,
+  expectPrPaneActivity,
 } from "../support/helpers/pr-pane";
 import { gotoWorkspace } from "../support/helpers/launcher";
 import {
@@ -50,7 +50,6 @@ test.describe("PR pane", () => {
          ],
        },
        { title: "PR with reviews", state: "open", commentCount: 3 },
-        { title: "PR with no checks", state: "open" },
      ],
    });

@@ -102,25 +101,21 @@ test.describe("PR pane", () => {
    await expectPrPaneTitle(page, "Work in progress");
  });

-  test("renders check pills with correct success/failure/pending counts", async ({ page }) => {
+  test("renders seeded checks in their success, failure, and pending groups", async ({ page }) => {
    await gotoWorkspace(page, workspaceByTitle.get("PR with mixed checks")!);
    await openPrPane(page);

-    await expectPrPaneCheckSummary(page, { success: 2, failure: 1, pending: 1 });
+    await expectPrPaneChecks(page, {
+      success: ["build-1", "build-2"],
+      failure: ["deploy"],
+      pending: ["security"],
+    });
  });

-  test("renders activity rows with correct count", async ({ page }) => {
+  test("renders every seeded activity comment", async ({ page }) => {
    await gotoWorkspace(page, workspaceByTitle.get("PR with reviews")!);
    await openPrPane(page);

-    await expectPrPaneActivityCount(page, 3);
-  });
-
-  test("renders gracefully with zero checks", async ({ page }) => {
-    await gotoWorkspace(page, workspaceByTitle.get("PR with no checks")!);
-    await openPrPane(page);
-
-    await expectPrPaneCheckSummary(page, { success: 0, failure: 0, pending: 0 });
-    await expectPrPaneTitle(page, "PR with no checks");
+    await expectPrPaneActivity(page, ["Test comment 1", "Test comment 2", "Test comment 3"]);
  });
 });
@@ -43,7 +43,6 @@ const cases: ProviderSubagentCase[] = [
    sentinel: "OPENCODE_CHILD_SENTINEL",
    expectedName: "Verify OpenCode descriptor",
    expectedSubtitle: /explore · gpt-5\.4(?: · [^\n·]+)? · \d+(?:\.\d+)?k? tokens/i,
-    expectsUserMessage: false,
    providerConfig: { model: "openai/gpt-5.4" },
    prompt:
      'Use the task tool exactly once with description "Verify OpenCode descriptor" and the explore subagent. Ask it to reply with exactly OPENCODE_CHILD_SENTINEL and do nothing else. Wait for it, then reply ROOT_DONE.',
@@ -0,0 +1,340 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/../../../../.." && pwd)"
+STATE_DIR="${PASEO_COMPOSER_KEYBOARD_STATE_DIR:-${REPO_ROOT}/.dev/agent-device-composer-keyboard}"
+ARTIFACTS_DIR="${REPO_ROOT}/.dev/agent-device-artifacts/composer-keyboard-android"
+SESSION="${PASEO_COMPOSER_KEYBOARD_SESSION:-composer-keyboard-android}"
+APP_ID="${PASEO_COMPOSER_KEYBOARD_APP_ID:-sh.paseo.debug}"
+DEVICE="${PASEO_COMPOSER_KEYBOARD_DEVICE:-paseo-api35}"
+HELPER_IME="com.callstack.agentdevice.imehelper/.TestInputMethodService"
+GBOARD_IME="com.google.android.inputmethod.latin/com.android.inputmethod.latin.LatinIME"
+ASSERT="${REPO_ROOT}/packages/app/e2e/mobile/composer-keyboard/assert-composer-keyboard.mjs"
+STALL_HERMES="${REPO_ROOT}/packages/app/e2e/mobile/composer-keyboard/stall-hermes.mjs"
+METRO_PORT="${PASEO_MOBILE_E2E_METRO_PORT:-8082}"
+DAEMON_HOST="${PASEO_COMPOSER_KEYBOARD_DAEMON_HOST:-127.0.0.1:6770}"
+DAEMON_HOME="${PASEO_COMPOSER_KEYBOARD_DAEMON_HOME:-${REPO_ROOT}/.dev/composer-e2e-home}"
+SERVER_ID="${PASEO_COMPOSER_KEYBOARD_SERVER_ID:-}"
+MESSAGE=$'keyboard invariant line one\nline two\nline three\nline four'
+LONG_MESSAGE="$(node -e 'process.stdout.write(Array.from({ length: 180 }, (_, index) => `line${index + 1}`).join(" "))')"
+AGENT_TITLE="Keyboard dismiss QA $(date +%s)"
+
+if [[ -z "${SERVER_ID}" ]]; then
+  if [[ ! -f "${DAEMON_HOME}/server-id" ]]; then
+    echo "Missing ${DAEMON_HOME}/server-id; set PASEO_COMPOSER_KEYBOARD_SERVER_ID" >&2
+    exit 1
+  fi
+  SERVER_ID="$(<"${DAEMON_HOME}/server-id")"
+fi
+
+ad() {
+  AGENT_DEVICE_STATE_DIR="${STATE_DIR}" agent-device "$@" --session "${SESSION}"
+}
+
+capture_screen() {
+  local output_path="$1"
+  ad screenshot "${output_path}" >/dev/null
+}
+
+snapshot_json() {
+  local output_path="$1"
+  ad snapshot -i --json >"${output_path}"
+}
+
+capture_ui_xml() {
+  local output_path="$1"
+  local device_path="/sdcard/paseo-composer-keyboard-window.xml"
+  # Android exposes one UI Automation connection at a time. Release the
+  # persistent agent-device snapshot helper before asking uiautomator for the
+  # app and IME windows; agent-device reconnects it on the next interaction.
+  adb shell am force-stop com.callstack.agentdevice.snapshothelper
+  sleep 0.2
+  adb shell uiautomator dump "${device_path}" >/dev/null
+  adb pull "${device_path}" "${output_path}" >/dev/null
+}
+
+clear_input() {
+  ad fill 'editable=true' "x" --settle
+  adb shell input keycombination 113 29
+  adb shell input keyevent 67
+}
+
+clear_focused_input_with_adb() {
+  adb shell input keycombination 113 29
+  adb shell input keyevent 67
+}
+
+wait_for_ime() {
+  local expected="$1"
+  local previous_top=""
+  local stable_count=0
+  for _ in $(seq 1 30); do
+    local window_state
+    window_state="$(adb shell dumpsys window)"
+    if [[ "${expected}" == "true" ]]; then
+      local ime_top
+      ime_top="$(printf '%s' "${window_state}" | sed -n 's/.*type=ime frame=\[0,\([0-9][0-9]*\)\].*visible=true.*/\1/p' | head -1)"
+      if [[ -n "${ime_top}" && "${ime_top}" -gt 0 ]]; then
+        if [[ "${ime_top}" == "${previous_top}" ]]; then
+          stable_count="$((stable_count + 1))"
+        else
+          stable_count=0
+          previous_top="${ime_top}"
+        fi
+        if [[ "${stable_count}" -ge 2 ]]; then
+          return
+        fi
+      fi
+    elif ! printf '%s' "${window_state}" | rg -q "type=ime .*visible=true"; then
+      return
+    fi
+    sleep 0.1
+  done
+  echo "IME did not become visible=${expected}" >&2
+  exit 1
+}
+
+ime_is_visible() {
+  adb shell dumpsys window | rg -q "type=ime .*visible=true"
+}
+
+open_gboard() {
+  local x="$1"
+  local y="$2"
+  adb shell ime set "${GBOARD_IME}" >/dev/null
+  if ime_is_visible; then
+    adb shell input keyevent BACK
+    wait_for_ime false
+  fi
+  adb shell input tap "${x}" "${y}"
+  wait_for_ime true
+  local keyboard_shift
+  keyboard_shift="$(read_keyboard_shift)"
+  adb shell input tap "${x}" "$((y - keyboard_shift))"
+}
+
+read_keyboard_shift() {
+  local ime_top
+  local navigation_top
+  ime_top="$(adb shell dumpsys window | sed -n 's/.*type=ime frame=\[0,\([0-9][0-9]*\)\].*visible=true.*/\1/p' | head -1)"
+  navigation_top="$(adb shell dumpsys window | sed -n 's/.*type=navigationBars frame=\[0,\([0-9][0-9]*\)\].*/\1/p' | head -1)"
+  printf '%s\n' "$((navigation_top - ime_top))"
+}
+
+read_ime_top() {
+  adb shell dumpsys window | sed -n \
+    's/.*type=ime frame=\[0,\([0-9][0-9]*\)\].*visible=true.*/\1/p' | head -1
+}
+
+cleanup() {
+  adb shell ime set "${HELPER_IME}" >/dev/null 2>&1 || true
+  AGENT_DEVICE_STATE_DIR="${STATE_DIR}" agent-device daemon stop --clean >/dev/null 2>&1 || true
+}
+
+trap cleanup EXIT INT TERM
+cleanup
+mkdir -p "${STATE_DIR}" "${ARTIFACTS_DIR}"
+
+workspaces_json="$(env -u PASEO_CALLER_AGENT_ID -u PASEO_AGENT_ID -u PASEO_WORKSPACE_ID \
+  npm run --silent cli -- workspace ls --json --host "${DAEMON_HOST}")"
+workspace_id="$(node -e '
+  const workspaces = JSON.parse(require("node:fs").readFileSync(0, "utf8"));
+  const cwd = process.argv[1];
+  const workspace = workspaces.find((candidate) => candidate.cwd === cwd);
+  if (!workspace) process.exit(1);
+  process.stdout.write(workspace.workspaceId);
+' "${REPO_ROOT}" <<<"${workspaces_json}")"
+
+AGENT_DEVICE_STATE_DIR="${STATE_DIR}" agent-device open "${APP_ID}" \
+  --platform android \
+  --device "${DEVICE}" \
+  --session "${SESSION}"
+adb shell am force-stop "${APP_ID}"
+adb shell am start \
+  -a android.intent.action.VIEW \
+  -d "exp+voice-mobile://expo-development-client/?url=http%3A%2F%2F10.0.2.2%3A${METRO_PORT}" \
+  "${APP_ID}" >/dev/null
+sleep 3
+
+# Create the fixture while the client is connected so its directory replica observes the insert.
+run_json="$(env -u PASEO_CALLER_AGENT_ID -u PASEO_AGENT_ID -u PASEO_WORKSPACE_ID \
+  npm run --silent cli -- run "Exercise the composer keyboard invariant flow" \
+  --background \
+  --title "${AGENT_TITLE}" \
+  --provider mock \
+  --model e2e-fast-stream \
+  --workspace "${workspace_id}" \
+  --cwd "${REPO_ROOT}" \
+  --host "${DAEMON_HOST}" \
+  --json)"
+agent_id="$(node -e '
+  const result = JSON.parse(require("node:fs").readFileSync(0, "utf8"));
+  process.stdout.write(result.agentId);
+' <<<"${run_json}")"
+sleep 3
+
+adb shell am start \
+  -a android.intent.action.VIEW \
+  -d "paseo://h/${SERVER_ID}/agent/${agent_id}" \
+  "${APP_ID}" >/dev/null
+sleep 5
+# The development-client bootstrap can consume the first link while Expo Router is mounting.
+# Deliver the target again after the root navigator is live.
+adb shell am start \
+  -a android.intent.action.VIEW \
+  -d "paseo://h/${SERVER_ID}/agent/${agent_id}" \
+  "${APP_ID}" >/dev/null
+ad wait "text=\"${AGENT_TITLE}\"" 45000
+ad wait 'editable=true' 10000
+clear_input
+ad keyboard dismiss || true
+ad wait 'label="Message, @files, /commands"' 10000
+
+snapshot_json "${ARTIFACTS_DIR}/baseline.json"
+capture_screen "${ARTIFACTS_DIR}/baseline.png"
+read -r input_x input_y baseline_input_height < <(
+  node "${ASSERT}" rect "${ARTIFACTS_DIR}/baseline.json" "Message, @files, /commands"
+)
+read -r model_x model_y _ < <(
+  node "${ASSERT}" rect "${ARTIFACTS_DIR}/baseline.json" "combined-model-selector"
+)
+read -r attach_x attach_y _ < <(
+  node "${ASSERT}" rect "${ARTIFACTS_DIR}/baseline.json" "message-input-attach-button"
+)
+read -r _ header_y _ < <(
+  node "${ASSERT}" rect "${ARTIFACTS_DIR}/baseline.json" "workspace-tab-switcher-trigger"
+)
+
+adb shell input keyevent HOME
+adb shell am start -n "${APP_ID}/.MainActivity" >/dev/null
+sleep 1
+open_gboard "${input_x}" "${input_y}"
+clear_focused_input_with_adb
+keyboard_shift="$(read_keyboard_shift)"
+adb shell input keyevent 76
+sleep 1
+capture_screen "${ARTIFACTS_DIR}/command-popover.png"
+ad wait 'id="composer-autocomplete-popover"' 10000
+ad wait 'text="/exit"' 10000
+model_open_y="$((model_y - keyboard_shift))"
+adb shell input tap "${model_x}" "${model_open_y}"
+sleep 1
+capture_screen "${ARTIFACTS_DIR}/model-selector-open.png"
+adb shell ime set "${HELPER_IME}" >/dev/null
+ad wait 'id="compact-provider-list"' 10000
+ad press 'label="Close"' --settle
+adb shell input tap "${input_x}" "${input_y}"
+clear_focused_input_with_adb
+ad wait 'editable=true' 10000
+
+adb shell input keyevent HOME
+adb shell am start -n "${APP_ID}/.MainActivity" >/dev/null
+sleep 1
+open_gboard "${input_x}" "${input_y}"
+clear_focused_input_with_adb
+adb shell input keyevent 76
+sleep 1
+adb shell ime set "${HELPER_IME}" >/dev/null
+ad wait 'id="composer-autocomplete-popover"' 10000
+ad wait 'text="/exit"' 10000
+snapshot_json "${ARTIFACTS_DIR}/command-popover.json"
+node "${ASSERT}" above-y \
+  "${ARTIFACTS_DIR}/command-popover.json" \
+  "/exit, Archive the current agent" \
+  "$((input_y - baseline_input_height / 2))"
+adb shell input keyevent 67
+ad wait 'label="Message, @files, /commands"' 10000
+
+ad fill 'label="Message, @files, /commands"' "${MESSAGE}" --settle
+snapshot_json "${ARTIFACTS_DIR}/multiline-first.json"
+ad fill 'editable=true focused=true' "${MESSAGE}" --settle
+snapshot_json "${ARTIFACTS_DIR}/multiline-second.json"
+node "${ASSERT}" same-input-height \
+  "${ARTIFACTS_DIR}/multiline-first.json" \
+  "${ARTIFACTS_DIR}/multiline-second.json"
+
+adb shell input keyevent HOME
+adb shell am start -n "${APP_ID}/.MainActivity" >/dev/null
+sleep 1
+open_gboard "${input_x}" "${input_y}"
+
+keyboard_shift="$(read_keyboard_shift)"
+capture_screen "${ARTIFACTS_DIR}/keyboard-open.png"
+
+node "${ASSERT}" same-header \
+  "${ARTIFACTS_DIR}/baseline.png" \
+  "${ARTIFACTS_DIR}/keyboard-open.png" \
+  "$((header_y + 48))"
+
+adb shell ime set "${HELPER_IME}" >/dev/null
+ad fill 'editable=true focused=true' "${LONG_MESSAGE}" --settle
+open_gboard "${input_x}" "${input_y}"
+capture_ui_xml "${ARTIFACTS_DIR}/long-draft-keyboard-open.xml"
+capture_screen "${ARTIFACTS_DIR}/long-draft-keyboard-open.png"
+node "${ASSERT}" xml-above-y \
+  "${ARTIFACTS_DIR}/long-draft-keyboard-open.xml" \
+  "Add attachment" \
+  "$(read_ime_top)"
+adb shell ime set "${HELPER_IME}" >/dev/null
+ad fill 'editable=true' "${MESSAGE}" --settle
+open_gboard "${input_x}" "${input_y}"
+keyboard_shift="$(read_keyboard_shift)"
+
+read -r changes_x changes_y _ < <(
+  node "${ASSERT}" rect "${ARTIFACTS_DIR}/multiline-second.json" "Open Changes tab"
+)
+adb shell input tap "${changes_x}" "$((changes_y - keyboard_shift))"
+ad wait 'id="changes-header"' 10000
+capture_screen "${ARTIFACTS_DIR}/changes-control-open.png"
+ad press 'label="Close Explorer sidebar"' --settle
+ad wait "text=\"${AGENT_TITLE}\"" 10000
+ad wait 'editable=true' 10000
+
+open_gboard "${input_x}" "${input_y}"
+keyboard_shift="$(read_keyboard_shift)"
+adb shell input tap "${attach_x}" "$((attach_y - keyboard_shift))"
+sleep 1
+adb shell ime set "${HELPER_IME}" >/dev/null
+ad wait 'id="message-input-attachment-menu-content"' 10000
+ad press 540 600 --settle
+
+open_gboard "${input_x}" "${input_y}"
+keyboard_shift="$(read_keyboard_shift)"
+adb shell input tap 983 "$((attach_y - keyboard_shift))"
+wait_for_ime false
+adb shell ime set "${HELPER_IME}" >/dev/null
+ad wait text "keyboard invariant line one" 10000
+snapshot_json "${ARTIFACTS_DIR}/after-submit.json"
+node "${ASSERT}" has-exact-text "${ARTIFACTS_DIR}/after-submit.json" "${MESSAGE}"
+node "${ASSERT}" same-input-height \
+  "${ARTIFACTS_DIR}/baseline.json" \
+  "${ARTIFACTS_DIR}/after-submit.json"
+
+open_gboard "${input_x}" "${input_y}"
+adb shell input keyevent BACK
+wait_for_ime false
+sleep 0.5
+capture_screen "${ARTIFACTS_DIR}/hidden-focused-baseline.png"
+
+open_gboard "${input_x}" "${input_y}"
+node "${STALL_HERMES}" "${METRO_PORT}" 3000 "${APP_ID}" &
+stall_pid="$!"
+sleep 0.25
+adb shell input keyevent BACK
+wait_for_ime false
+sleep 0.5
+capture_screen "${ARTIFACTS_DIR}/hidden-during-js-stall.png"
+wait "${stall_pid}"
+capture_screen "${ARTIFACTS_DIR}/hidden-after-js-stall.png"
+node "${ASSERT}" same-region \
+  "${ARTIFACTS_DIR}/hidden-focused-baseline.png" \
+  "${ARTIFACTS_DIR}/hidden-during-js-stall.png" \
+  1400 \
+  430
+node "${ASSERT}" same-region \
+  "${ARTIFACTS_DIR}/hidden-focused-baseline.png" \
+  "${ARTIFACTS_DIR}/hidden-after-js-stall.png" \
+  1400 \
+  430
+
+echo "Composer keyboard invariants passed"
@@ -0,0 +1,106 @@
+import fs from "node:fs/promises";
+import process from "node:process";
+import sharp from "sharp";
+
+const [, , command, ...args] = process.argv;
+
+if (command === "rect") {
+  const [snapshotPath, identifier] = args;
+  const snapshot = JSON.parse(await fs.readFile(snapshotPath, "utf8"));
+  const node = snapshot.data.nodes.find(
+    (candidate) => candidate.identifier === identifier || candidate.label === identifier,
+  );
+  if (!node) throw new Error(`Missing node: ${identifier}`);
+  const { x, y, width, height } = node.rect;
+  process.stdout.write(`${Math.round(x + width / 2)} ${Math.round(y + height / 2)} ${height}\n`);
+} else if (command === "above-y") {
+  const [snapshotPath, upperIdentifier, lowerYArgument] = args;
+  const snapshot = JSON.parse(await fs.readFile(snapshotPath, "utf8"));
+  const upper = snapshot.data.nodes.find(
+    (candidate) => candidate.identifier === upperIdentifier || candidate.label === upperIdentifier,
+  );
+  if (!upper) throw new Error(`Missing node: ${upperIdentifier}`);
+  const upperBottom = upper.rect.y + upper.rect.height;
+  const lowerY = Number(lowerYArgument);
+  if (upperBottom > lowerY) {
+    throw new Error(
+      `${upperIdentifier} extends below the composer top: ${upperBottom} > ${lowerY}`,
+    );
+  }
+} else if (command === "xml-above-y") {
+  const [snapshotPath, contentDescription, lowerYArgument] = args;
+  const snapshot = await fs.readFile(snapshotPath, "utf8");
+  const escapedDescription = contentDescription.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = snapshot.match(
+    new RegExp(
+      `<node[^>]*content-desc="${escapedDescription}"[^>]*bounds="\\[(\\d+),(\\d+)\\]\\[(\\d+),(\\d+)\\]"`,
+    ),
+  );
+  if (!match) throw new Error(`Missing node: ${contentDescription}`);
+  const upperBottom = Number(match[4]);
+  const lowerY = Number(lowerYArgument);
+  if (upperBottom > lowerY) {
+    throw new Error(`${contentDescription} extends below the keyboard: ${upperBottom} > ${lowerY}`);
+  }
+} else if (command === "same-header") {
+  const [baselinePath, keyboardPath, headerBottomArgument] = args;
+  const headerBottom = Number(headerBottomArgument);
+  const crop = { left: 0, top: 64, width: 1080, height: headerBottom - 64 };
+  const [baseline, keyboard] = await Promise.all([
+    sharp(baselinePath).extract(crop).removeAlpha().raw().toBuffer(),
+    sharp(keyboardPath).extract(crop).removeAlpha().raw().toBuffer(),
+  ]);
+  let changed = 0;
+  for (let index = 0; index < baseline.length; index += 1) {
+    if (Math.abs(baseline[index] - keyboard[index]) > 8) changed += 1;
+  }
+  const changedRatio = changed / baseline.length;
+  if (changedRatio > 0.01) {
+    throw new Error(`Header changed while the keyboard opened (${changedRatio.toFixed(3)})`);
+  }
+} else if (command === "same-input-height") {
+  const [firstPath, secondPath] = args;
+  const readInputHeight = async (snapshotPath) => {
+    const snapshot = JSON.parse(await fs.readFile(snapshotPath, "utf8"));
+    const input = snapshot.data.nodes.find((candidate) => candidate.type.endsWith("EditText"));
+    if (!input) throw new Error(`Missing composer input in ${snapshotPath}`);
+    return input.rect.height;
+  };
+  const [firstHeight, secondHeight] = await Promise.all([
+    readInputHeight(firstPath),
+    readInputHeight(secondPath),
+  ]);
+  if (firstHeight !== secondHeight) {
+    throw new Error(`Composer height drifted from ${firstHeight} to ${secondHeight}`);
+  }
+} else if (command === "has-exact-text") {
+  const [snapshotPath, expected] = args;
+  const snapshot = JSON.parse(await fs.readFile(snapshotPath, "utf8"));
+  if (!snapshot.data.nodes.some((candidate) => candidate.label === expected)) {
+    throw new Error(`Missing exact text in ${snapshotPath}: ${expected}`);
+  }
+} else if (command === "same-region") {
+  const [firstPath, secondPath, topArgument, heightArgument, failureMessage] = args;
+  const crop = {
+    left: 0,
+    top: Number(topArgument),
+    width: 1080,
+    height: Number(heightArgument),
+  };
+  const [first, second] = await Promise.all([
+    sharp(firstPath).extract(crop).removeAlpha().raw().toBuffer(),
+    sharp(secondPath).extract(crop).removeAlpha().raw().toBuffer(),
+  ]);
+  let changed = 0;
+  for (let index = 0; index < first.length; index += 1) {
+    if (Math.abs(first[index] - second[index]) > 8) changed += 1;
+  }
+  const changedRatio = changed / first.length;
+  if (changedRatio > 0.02) {
+    throw new Error(
+      `${failureMessage ?? "Composer region changed during the JS stall"} (${changedRatio.toFixed(3)})`,
+    );
+  }
+} else {
+  throw new Error(`Unknown command: ${command}`);
+}
@@ -0,0 +1,35 @@
+import process from "node:process";
+import { WebSocket } from "ws";
+
+const [, , metroPortArgument, durationArgument, appId] = process.argv;
+const metroPort = Number(metroPortArgument);
+const duration = Number(durationArgument);
+const targets = await fetch(`http://127.0.0.1:${metroPort}/json/list`).then((response) =>
+  response.json(),
+);
+const target = targets.find((candidate) => candidate.appId === appId);
+if (!target) throw new Error(`Missing Hermes target for ${appId}`);
+
+await new Promise((resolve, reject) => {
+  const socket = new WebSocket(target.webSocketDebuggerUrl);
+  const timeout = setTimeout(() => reject(new Error("Hermes stall timed out")), duration + 5000);
+  socket.on("open", () => {
+    socket.send(
+      JSON.stringify({
+        id: 1,
+        method: "Runtime.evaluate",
+        params: {
+          expression: `(() => { const deadline = Date.now() + ${duration}; while (Date.now() < deadline) {} })()`,
+        },
+      }),
+    );
+  });
+  socket.on("message", (message) => {
+    const response = JSON.parse(message.toString());
+    if (response.id !== 1) return;
+    clearTimeout(timeout);
+    socket.close();
+    resolve();
+  });
+  socket.on("error", reject);
+});
@@ -34,13 +34,20 @@ const metroTest = base.extend({

 const daemonTest = metroTest.extend<
  { projectOwnership: void },
-  { e2eForkProviders: string[]; e2eWorker: void; e2eWorkerClient: SeedDaemonClient }
+  {
+    e2eForkProviders: string[];
+    e2eInjectPaseoTools: boolean;
+    e2eWorker: void;
+    e2eWorkerClient: SeedDaemonClient;
+  }
 >({
  e2eForkProviders: [[], { scope: "worker", option: true }],
+  e2eInjectPaseoTools: [false, { scope: "worker", option: true }],
  e2eWorker: [
-    async ({ e2eForkProviders }, provide, workerInfo) => {
+    async ({ e2eForkProviders, e2eInjectPaseoTools }, provide, workerInfo) => {
      const worker = await startE2EWorker(workerInfo.workerIndex, {
        forkProviders: e2eForkProviders,
+        injectPaseoTools: e2eInjectPaseoTools,
      });
      try {
        await provide();
@@ -38,6 +38,10 @@ export async function expectComposerEditable(page: Page): Promise<void> {
  await expect(composerInput(page)).toBeEditable({ timeout: 15_000 });
 }

+export async function expectComposerFocused(page: Page): Promise<void> {
+  await expect(composerInput(page)).toBeFocused();
+}
+
 export async function submitMessage(page: Page, text: string): Promise<void> {
  const input = composerInput(page);
  await expect(input).toBeEditable({ timeout: 30_000 });
@@ -49,6 +53,10 @@ export async function fillComposerDraft(page: Page, text: string): Promise<void>
  await composerInput(page).fill(text);
 }

+export async function typeIntoFocusedComposer(page: Page, text: string): Promise<void> {
+  await page.keyboard.type(text);
+}
+
 export async function sendDraftToQueue(page: Page): Promise<void> {
  await composerInput(page).press("Control+Enter");
 }
@@ -1,4 +1,5 @@
 import { execFileSync } from "node:child_process";
+import { existsSync } from "node:fs";
 import { chmod, mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import path from "node:path";
@@ -155,7 +156,7 @@ async function applyMetadataFork(targetHome: string, providerIds: string[]): Pro

 export async function startE2EWorker(
  workerIndex: number,
-  options: { forkProviders?: string[] } = {},
+  options: { forkProviders?: string[]; injectPaseoTools?: boolean } = {},
 ): Promise<E2EWorker> {
  const requestedRoot = resolveOptionalHome(process.env.E2E_PASEO_HOME);
  const paseoHome = requestedRoot
@@ -168,6 +169,9 @@ export async function startE2EWorker(

  try {
    await applyMetadataFork(paseoHome, options.forkProviders ?? []);
+    if (options.injectPaseoTools) {
+      await enablePaseoTools(paseoHome);
+    }
    const daemon = await startIsolatedHostDaemon(serverId, {
      paseoHome,
      preserveHome,
@@ -201,3 +205,28 @@ export async function startE2EWorker(
    throw error;
  }
 }
+
+async function enablePaseoTools(paseoHome: string): Promise<void> {
+  const configPath = path.join(paseoHome, "config.json");
+  const existing = existsSync(configPath)
+    ? JSON.parse(await readFile(configPath, "utf8"))
+    : { version: 1 };
+  await writeFile(
+    configPath,
+    `${JSON.stringify(
+      {
+        ...existing,
+        daemon: {
+          ...existing.daemon,
+          mcp: {
+            ...existing.daemon?.mcp,
+            enabled: true,
+            injectIntoAgents: true,
+          },
+        },
+      },
+      null,
+      2,
+    )}\n`,
+  );
+}
@@ -1,5 +1,4 @@
 import { expect, type Page } from "@playwright/test";
-import type { CheckPresentationCounts } from "@/git/check-presentation";
 import { getStateLabel } from "@/git/pull-request-panel/data";
 import { openPullRequestPanel } from "./workspace-tabs";

@@ -20,23 +19,31 @@ export async function expectPrPaneState(
  });
 }

-async function assertCheckPill(page: Page, testId: string, count: number): Promise<void> {
-  const locator = page.getByTestId(testId);
-  await expect(locator).toHaveCount(count > 0 ? 1 : 0, { timeout: 15_000 });
-  if (count > 0) {
-    await expect(locator).toContainText(String(count));
+export async function expectPrPaneChecks(
+  page: Page,
+  checks: { success: string[]; failure: string[]; pending: string[] },
+): Promise<void> {
+  const section = page.getByTestId("pr-pane-checks");
+  const groups = [
+    { status: "failure", label: /failing checks?$/, names: checks.failure },
+    { status: "pending", label: /in progress checks?$/, names: checks.pending },
+    { status: "success", label: /successful checks?$/, names: checks.success },
+  ];
+
+  for (const group of groups) {
+    const groupSection = section.getByTestId(`pr-pane-check-group-${group.status}`);
+    await expect(groupSection.getByRole("button", { name: group.label })).toBeVisible({
+      timeout: 15_000,
+    });
+    for (const name of group.names) {
+      await expect(groupSection.getByText(name, { exact: true })).toHaveCount(1);
+    }
  }
 }

-export async function expectPrPaneCheckSummary(
-  page: Page,
-  counts: Pick<CheckPresentationCounts, "success" | "failure" | "pending">,
-): Promise<void> {
-  await assertCheckPill(page, "pr-pane-check-success", counts.success);
-  await assertCheckPill(page, "pr-pane-check-failure", counts.failure);
-  await assertCheckPill(page, "pr-pane-check-pending", counts.pending);
-}
-
-export async function expectPrPaneActivityCount(page: Page, count: number): Promise<void> {
-  await expect(page.getByTestId("pr-pane-activity-row")).toHaveCount(count, { timeout: 15_000 });
+export async function expectPrPaneActivity(page: Page, bodies: string[]): Promise<void> {
+  const activity = page.getByTestId("pr-pane-activity-row");
+  for (const body of bodies) {
+    await expect(activity.getByText(body, { exact: true })).toBeVisible({ timeout: 15_000 });
+  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@getpaseo/app",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0",
  "private": true,
  "main": "index.ts",
  "scripts": {
@@ -4,7 +4,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { JSDOM } from "jsdom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { AttachmentMetadata } from "@/attachments/types";
-import { AttachmentLightbox } from "./attachment-lightbox";
+import { AttachmentLightbox, type ImageLightboxSource } from "./attachment-lightbox";

 const { theme, imageMetadata, useAttachmentPreviewUrlMock } = vi.hoisted(() => {
  const hoistedTheme = {
@@ -42,6 +42,11 @@ const { theme, imageMetadata, useAttachmentPreviewUrlMock } = vi.hoisted(() => {
    ),
  };
 });
+const attachmentSource: ImageLightboxSource = { type: "attachment", metadata: imageMetadata };
+const assistantImageSource: ImageLightboxSource = {
+  type: "uri",
+  uri: "blob:assistant-image",
+};

 vi.mock("react-native-unistyles", () => ({
  StyleSheet: {
@@ -70,6 +75,11 @@ vi.mock("react-native-safe-area-context", () => ({
  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
 }));

+vi.mock("react-native-gesture-handler", () => ({
+  GestureHandlerRootView: ({ children }: { children?: React.ReactNode }) =>
+    React.createElement("div", { "data-testid": "gesture-handler-root" }, children),
+}));
+
 vi.mock("lucide-react-native", () => {
  const createIcon = (name: string) => (props: Record<string, unknown>) =>
    React.createElement("span", { ...props, "data-icon": name });
@@ -78,16 +88,34 @@ vi.mock("lucide-react-native", () => {
  };
 });

-vi.mock("expo-image", () => ({
-  Image: (props: Record<string, unknown>) => {
-    const source = props.source as { uri?: string } | string | undefined;
-    const uri = typeof source === "string" ? source : source?.uri;
-    return React.createElement("div", {
-      "data-testid": props.testID,
-      "data-source": uri,
-      "data-style": JSON.stringify(props.style ?? null),
-      role: "img",
-    });
+vi.mock("@/components/zoomable-viewport/image", () => ({
+  ZoomableImage: (props: Record<string, unknown>) => {
+    const actions = props.actions as Array<{
+      label: string;
+      onPress: () => void;
+      testID?: string;
+    }>;
+    return React.createElement(
+      "div",
+      {
+        "data-testid": `${String(props.testID)}-image`,
+        "data-source": props.uri,
+        role: "img",
+      },
+      actions.map((action) =>
+        React.createElement(
+          "button",
+          {
+            "aria-label": action.label,
+            "data-testid": action.testID,
+            key: action.label,
+            onClick: action.onPress,
+            type: "button",
+          },
+          action.label,
+        ),
+      ),
+    );
  },
 }));

@@ -150,42 +178,32 @@ function queryByTestId(testID: string): HTMLElement | null {
 }

 describe("AttachmentLightbox", () => {
-  it("renders nothing when metadata is null", () => {
-    render(<AttachmentLightbox metadata={null} onClose={vi.fn()} />);
+  it("renders nothing when the source is null", () => {
+    render(<AttachmentLightbox source={null} onClose={vi.fn()} />);

    expect(queryByTestId("attachment-lightbox-backdrop")).toBeNull();
    expect(queryByTestId("attachment-lightbox-image")).toBeNull();
  });

  it("renders the image when metadata is provided", () => {
-    render(<AttachmentLightbox metadata={imageMetadata} onClose={vi.fn()} />);
+    render(<AttachmentLightbox source={attachmentSource} onClose={vi.fn()} />);

    const image = queryByTestId("attachment-lightbox-image");
    expect(image).not.toBeNull();
    expect(image?.getAttribute("data-source")).toBe("blob:preview");
  });

-  it("fills its parent via absolute positioning so expo-image does not collapse to 0px", () => {
-    render(<AttachmentLightbox metadata={imageMetadata} onClose={vi.fn()} />);
+  it("renders a direct timeline image without resolving attachment storage", () => {
+    render(<AttachmentLightbox source={assistantImageSource} onClose={vi.fn()} />);

    const image = queryByTestId("attachment-lightbox-image");
-    const style = JSON.parse(image?.getAttribute("data-style") ?? "null") as {
-      position?: string;
-      top?: number;
-      left?: number;
-      right?: number;
-      bottom?: number;
-    } | null;
-    expect(style?.position).toBe("absolute");
-    expect(style?.top).toBe(0);
-    expect(style?.left).toBe(0);
-    expect(style?.right).toBe(0);
-    expect(style?.bottom).toBe(0);
+    expect(image?.getAttribute("data-source")).toBe("blob:assistant-image");
+    expect(useAttachmentPreviewUrlMock).toHaveBeenLastCalledWith(null);
  });

  it("calls onClose when the backdrop is pressed", () => {
    const onClose = vi.fn();
-    render(<AttachmentLightbox metadata={imageMetadata} onClose={onClose} />);
+    render(<AttachmentLightbox source={attachmentSource} onClose={onClose} />);

    const backdrop = queryByTestId("attachment-lightbox-backdrop");
    expect(backdrop).not.toBeNull();
@@ -196,7 +214,7 @@ describe("AttachmentLightbox", () => {

  it("calls onClose when the close button is pressed", () => {
    const onClose = vi.fn();
-    render(<AttachmentLightbox metadata={imageMetadata} onClose={onClose} />);
+    render(<AttachmentLightbox source={attachmentSource} onClose={onClose} />);

    const closeButton = document.querySelector(
      '[aria-label="Close image"][data-testid="attachment-lightbox-close"]',
@@ -209,7 +227,7 @@ describe("AttachmentLightbox", () => {

  it("shows error text when the preview URL resolves to null", () => {
    useAttachmentPreviewUrlMock.mockReturnValue(null);
-    render(<AttachmentLightbox metadata={imageMetadata} onClose={vi.fn()} />);
+    render(<AttachmentLightbox source={attachmentSource} onClose={vi.fn()} />);

    expect(queryByTestId("attachment-lightbox-image")).toBeNull();
    expect(document.body.textContent ?? "").toContain("Couldn't load image");
@@ -217,7 +235,7 @@ describe("AttachmentLightbox", () => {

  it("closes on Escape key on web", () => {
    const onClose = vi.fn();
-    render(<AttachmentLightbox metadata={imageMetadata} onClose={onClose} />);
+    render(<AttachmentLightbox source={attachmentSource} onClose={onClose} />);

    act(() => {
      window.dispatchEvent(new window.KeyboardEvent("keydown", { key: "Escape" }));
@@ -1,33 +1,45 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Modal, Pressable, Text, View } from "react-native";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { StyleSheet } from "react-native-unistyles";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Image as ExpoImage } from "expo-image";
 import { X } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
 import type { AttachmentMetadata } from "@/attachments/types";
 import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
-import { isWeb } from "@/constants/platform";
-import { WindowChromeRootRegion, WindowChromeSafeArea } from "@/utils/desktop-window";
+import { isNative, isWeb } from "@/constants/platform";
+import { SPACING } from "@/styles/theme";
+import { WindowChromeRootRegion } from "@/utils/desktop-window";
+import { ZoomableImage } from "@/components/zoomable-viewport/image";
+import type { ViewportSize } from "@/components/zoomable-viewport/geometry";
+
+export type ImageLightboxSource =
+  | { type: "attachment"; metadata: AttachmentMetadata }
+  | { type: "uri"; uri: string; contentSize?: ViewportSize };

 interface AttachmentLightboxProps {
-  metadata: AttachmentMetadata | null;
+  source: ImageLightboxSource | null;
  onClose: () => void;
 }

-export function AttachmentLightbox({ metadata, onClose }: AttachmentLightboxProps) {
-  const { theme } = useUnistyles();
+const ModalRoot = isNative ? GestureHandlerRootView : View;
+const LIGHTBOX_FIT = { padding: SPACING[4], maxWidth: 960, maxHeight: 640 };
+
+export function AttachmentLightbox({ source, onClose }: AttachmentLightboxProps) {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
-  const url = useAttachmentPreviewUrl(metadata);
+  const metadata = source?.type === "attachment" ? source.metadata : null;
+  const attachmentUrl = useAttachmentPreviewUrl(metadata);
+  const url = source?.type === "uri" ? source.uri : attachmentUrl;
+  const contentSize = source?.type === "uri" ? source.contentSize : undefined;
  const [errored, setErrored] = useState(false);

  useEffect(() => {
    setErrored(false);
-  }, [metadata?.id]);
+  }, [metadata?.id, url]);

  useEffect(() => {
-    if (!isWeb || !metadata) return;
+    if (!isWeb || !source) return;
    function handleKeydown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        onClose();
@@ -37,27 +49,35 @@ export function AttachmentLightbox({ metadata, onClose }: AttachmentLightboxProp
    return () => {
      window.removeEventListener("keydown", handleKeydown);
    };
-  }, [metadata, onClose]);
+  }, [onClose, source]);

-  const closeButtonRowStyle = useMemo(
+  const contentLayerStyle = useMemo(
    () => [
-      styles.closeButtonRow,
+      styles.contentLayer,
      {
-        top: insets.top + theme.spacing[3],
+        paddingTop: insets.top,
+        paddingRight: insets.right,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
      },
    ],
-    [insets.top, theme.spacing],
+    [insets.bottom, insets.left, insets.right, insets.top],
  );
-  const closeButtonStyle = useMemo(
-    () => [styles.closeButton, { marginRight: insets.right + theme.spacing[3] }],
-    [insets.right, theme.spacing],
+  const actions = useMemo(
+    () => [
+      {
+        icon: X,
+        label: t("message.attachments.closeImage"),
+        onPress: onClose,
+        testID: "attachment-lightbox-close",
+      },
+    ],
+    [onClose, t],
  );

  const handleImageError = useCallback(() => setErrored(true), []);
-  const noopPress = useCallback(() => {}, []);
-  const imageSource = useMemo(() => ({ uri: url ?? "" }), [url]);

-  if (!metadata) {
+  if (!source) {
    return null;
  }

@@ -65,61 +85,47 @@ export function AttachmentLightbox({ metadata, onClose }: AttachmentLightboxProp

  return (
    <Modal transparent animationType="fade" statusBarTranslucent visible onRequestClose={onClose}>
-      <WindowChromeRootRegion corners="both">
-        <View style={styles.root}>
-          <Pressable
-            testID="attachment-lightbox-backdrop"
-            accessibilityRole="button"
-            accessibilityLabel={t("message.attachments.dismissImage")}
-            onPress={onClose}
-            style={styles.backdrop}
-          />
-          <View style={styles.contentLayer}>
-            <View style={styles.imageArea}>
-              {hasError ? (
-                <Text style={styles.errorText}>{t("message.attachments.imageLoadFailed")}</Text>
-              ) : (
-                <Pressable onPress={noopPress} style={styles.imagePressable}>
-                  <ExpoImage
-                    testID="attachment-lightbox-image"
-                    source={imageSource}
-                    contentFit="contain"
+      <ModalRoot style={styles.root}>
+        <WindowChromeRootRegion corners="both">
+          <View style={styles.root}>
+            <Pressable
+              testID="attachment-lightbox-backdrop"
+              accessibilityRole="button"
+              accessibilityLabel={t("message.attachments.dismissImage")}
+              onPress={onClose}
+              style={styles.backdrop}
+            />
+            <View pointerEvents="box-none" style={contentLayerStyle}>
+              <View pointerEvents="box-none" style={styles.imageArea}>
+                {hasError ? (
+                  <Text style={styles.errorText}>{t("message.attachments.imageLoadFailed")}</Text>
+                ) : (
+                  <ZoomableImage
+                    accessibilityLabel={t("composer.attachments.openImage")}
+                    actions={actions}
+                    contentSize={contentSize}
+                    fit={LIGHTBOX_FIT}
                    onError={handleImageError}
-                    style={imageFillStyle}
+                    onPressOutsideContent={onClose}
+                    style={styles.imageViewport}
+                    testID="attachment-lightbox"
+                    uri={url}
                  />
-                </Pressable>
-              )}
+                )}
+              </View>
            </View>
-            <WindowChromeSafeArea placement="inline" style={closeButtonRowStyle}>
-              <Pressable
-                testID="attachment-lightbox-close"
-                accessibilityRole="button"
-                accessibilityLabel={t("message.attachments.closeImage")}
-                hitSlop={8}
-                onPress={onClose}
-                style={closeButtonStyle}
-              >
-                <X size={16} color={theme.colors.foregroundMuted} />
-              </Pressable>
-            </WindowChromeSafeArea>
          </View>
-        </View>
-      </WindowChromeRootRegion>
+        </WindowChromeRootRegion>
+      </ModalRoot>
    </Modal>
  );
 }

-const imageFillStyle = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-} as const;
-
 const styles = StyleSheet.create((theme) => ({
  root: {
    flex: 1,
+    minHeight: 0,
+    minWidth: 0,
  },
  backdrop: {
    position: "absolute",
@@ -135,42 +141,19 @@ const styles = StyleSheet.create((theme) => ({
    left: 0,
    right: 0,
    bottom: 0,
-    pointerEvents: "box-none",
-  },
-  closeButtonRow: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    alignItems: "flex-end",
-    pointerEvents: "box-none",
  },
  imageArea: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
-    padding: theme.spacing[4],
-    pointerEvents: "box-none",
  },
-  imagePressable: {
+  imageViewport: {
    flex: 1,
    width: "100%",
    alignSelf: "center",
-    maxWidth: 960,
-    maxHeight: 640,
  },
  errorText: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.base,
  },
-  closeButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: theme.colors.surface2,
-    borderWidth: theme.borderWidth[1],
-    borderColor: theme.colors.border,
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1,
-  },
 }));
@@ -8,6 +8,8 @@ import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { Combobox, type ComboboxOption, type ComboboxProps } from "@/components/ui/combobox";
 import { ModelBrowser, ModelProviderGlyph, useModelBrowser } from "@/components/model-browser";
+import { resolveModelBrowserScrolling } from "@/components/model-browser-view";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { isNative, isWeb } from "@/constants/platform";
 import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";
 import { ICON_SIZE, type Theme } from "@/styles/theme";
@@ -87,6 +89,8 @@ export function CombinedModelSelector({
  toolbar,
 }: CombinedModelSelectorProps) {
  const { t } = useTranslation();
+  const isCompact = useIsCompactFormFactor();
+  const modelBrowserScrolling = resolveModelBrowserScrolling({ isNative, isCompact });
  const anchorRef = useRef<View>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [isContentReady, setIsContentReady] = useState(isWeb);
@@ -198,7 +202,7 @@ export function CombinedModelSelector({
      onEditProfile={onEditProfile ? handleEditProfile : undefined}
      onRetryProvider={onRetryProvider}
      isRetryingProvider={isRetryingProvider}
-      scrolling={isWeb ? "independent" : "sheet"}
+      scrolling={modelBrowserScrolling}
    />
  ) : (
    <View style={styles.sheetLoadingState}>
@@ -0,0 +1 @@
+export * from "./keyboard-dock.native";
@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { ViewProps } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useKeyboardShift } from "@/hooks/keyboard-shift-context";
+
+interface KeyboardDockProps extends ViewProps {
+  children: ReactNode;
+}
+
+export function KeyboardDock({ children, style, ...props }: KeyboardDockProps) {
+  const { shift } = useKeyboardShift();
+  const keyboardPaddingStyle = useAnimatedStyle(() => ({
+    paddingBottom: shift.value,
+  }));
+
+  return (
+    <Animated.View style={[style, keyboardPaddingStyle]} {...props}>
+      {children}
+    </Animated.View>
+  );
+}
@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+interface KeyboardDockProps extends ViewProps {
+  children: ReactNode;
+}
+
+export function KeyboardDock(props: KeyboardDockProps) {
+  return <View {...props} />;
+}
@@ -1,17 +1,10 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ComponentType,
-} from "react";
-import { Pressable, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, View, type TextStyle, type ViewStyle } from "react-native";
+import { Code, Workflow } from "lucide-react-native";
 import { useTranslation } from "react-i18next";
-import { Code, Scan, Workflow, ZoomIn, ZoomOut } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { HighlightedCodeBlock } from "@/components/highlighted-code-block";
-import { useIsCompactFormFactor } from "@/constants/layout";
+import { ZoomableViewport } from "@/components/zoomable-viewport";
 import type { Theme } from "@/styles/theme";
 import type { MarkdownFenceRendererProps } from "../types";
 import type { MermaidRenderRequest } from "./render-model";
@@ -21,13 +14,9 @@ import { MermaidRuntimeRequestDriver } from "./runtime/request-driver";
 import { useMermaidRenderModel } from "./use-render-model";
 import { getDiagramBoxStyle } from "./presentation";

-interface MermaidFenceHostImplProps extends MarkdownFenceRendererProps {
-  colorScheme?: "light" | "dark";
-}
-
 interface MermaidIframeRuntimeProps {
  request: MermaidRenderRequest | null;
-  height: number;
+  height: React.CSSProperties["height"];
  onRendered: (message: {
    revision: number;
    source: string;
@@ -61,9 +50,7 @@ function MermaidIframeRuntime({

  const sendRequest = useCallback((current: MermaidRenderRequest | null) => {
    const target = iframeRef.current?.contentWindow;
-    if (!current || !target) {
-      return;
-    }
+    if (!current || !target) return;
    const message: MermaidRuntimeRenderMessage = {
      type: "render",
      revision: current.revision,
@@ -80,13 +67,9 @@ function MermaidIframeRuntime({

  useEffect(() => {
    function receiveMessage(event: MessageEvent): void {
-      if (event.source !== iframeRef.current?.contentWindow) {
-        return;
-      }
+      if (event.source !== iframeRef.current?.contentWindow) return;
      const message = parseMermaidRuntimeMessage(event.data);
-      if (!message) {
-        return;
-      }
+      if (!message) return;
      if (message.type === "bridgeReady") {
        sendRequest(driverRef.current?.ready() ?? null);
        return;
@@ -116,8 +99,9 @@ function MermaidIframeRuntime({
  );
 }

-const MIN_SCALE = 0.25;
-const MAX_SCALE = 8;
+interface MermaidFenceHostImplProps extends MarkdownFenceRendererProps {
+  colorScheme?: "light" | "dark";
+}

 function MermaidFenceHostImpl({
  code,
@@ -133,6 +117,9 @@ function MermaidFenceHostImpl({
    colorScheme,
  });
  const [hasRuntimeContent, setHasRuntimeContent] = useState(false);
+  const [showSource, setShowSource] = useState(false);
+  const showSourcePress = useCallback(() => setShowSource(true), []);
+  const showDiagramPress = useCallback(() => setShowSource(false), []);
  const handleRendered = useCallback(
    (message: {
      revision: number;
@@ -153,152 +140,18 @@ function MermaidFenceHostImpl({
  );
  const visible = state.visible;
  const canShowDiagram = visible !== null && hasRuntimeContent;
+  const diagramVisible = canShowDiagram && !showSource;
  const runtimeHeight = Math.max(visible?.height ?? 240, 1);
-
-  const viewportRef = useRef<HTMLDivElement | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const controlsRegionRef = useRef<HTMLDivElement | null>(null);
-  const transformRef = useRef({ x: 0, y: 0, scale: 1 });
-  const dragRef = useRef<{
-    pointerId: number;
-    startX: number;
-    startY: number;
-    originX: number;
-    originY: number;
-  } | null>(null);
-
-  const applyTransformToElement = useCallback(
-    (element: HTMLDivElement, transform: { x: number; y: number; scale: number }) => {
-      const { x, y, scale } = transform;
-      element.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
-    },
-    [],
+  const actions = useMemo(
+    () => [
+      {
+        icon: Code,
+        label: t("message.diagram.viewSource"),
+        onPress: showSourcePress,
+      },
+    ],
+    [showSourcePress, t],
  );
-  const applyTransform = useCallback(() => {
-    if (contentRef.current) {
-      applyTransformToElement(contentRef.current, transformRef.current);
-    }
-  }, [applyTransformToElement]);
-  const setContentRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      contentRef.current = node;
-      if (node) {
-        applyTransformToElement(node, transformRef.current);
-      }
-    },
-    [applyTransformToElement],
-  );
-  const setControlsRegionRef = useCallback((node: unknown) => {
-    controlsRegionRef.current = node instanceof HTMLDivElement ? node : null;
-  }, []);
-  const hasFocusedControls = useCallback(() => {
-    const region = controlsRegionRef.current;
-    const active = document.activeElement;
-    return Boolean(region && active instanceof Node && region.contains(active));
-  }, []);
-  const [isFocusWithin, setIsFocusWithin] = useState(false);
-  const handleFocusWithin = useCallback(() => setIsFocusWithin(true), []);
-  const handleBlurWithin = useCallback(() => {
-    window.requestAnimationFrame(() => setIsFocusWithin(hasFocusedControls()));
-  }, [hasFocusedControls]);
-
-  useEffect(() => {
-    const viewport = viewportRef.current;
-    if (!viewport || !visible) {
-      return;
-    }
-    const activeViewport = viewport;
-    function zoomWithWheel(event: WheelEvent): void {
-      if (!event.ctrlKey && !event.metaKey) {
-        return;
-      }
-      event.preventDefault();
-      const transform = transformRef.current;
-      const factor = Math.min(1.25, Math.max(0.8, Math.exp(-event.deltaY * 0.01)));
-      const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, transform.scale * factor));
-      const rect = activeViewport.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      const y = event.clientY - rect.top;
-      transform.x = x - ((x - transform.x) / transform.scale) * scale;
-      transform.y = y - ((y - transform.y) / transform.scale) * scale;
-      transform.scale = scale;
-      applyTransform();
-    }
-    viewport.addEventListener("wheel", zoomWithWheel, { passive: false });
-    return () => viewport.removeEventListener("wheel", zoomWithWheel);
-  }, [applyTransform, visible]);
-
-  const onPointerDown = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
-    if (event.button !== 0 || event.pointerType !== "mouse") {
-      return;
-    }
-    const transform = transformRef.current;
-    dragRef.current = {
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startY: event.clientY,
-      originX: transform.x,
-      originY: transform.y,
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-  }, []);
-  const onPointerMove = useCallback(
-    (event: React.PointerEvent<HTMLDivElement>) => {
-      const drag = dragRef.current;
-      if (!drag || event.pointerId !== drag.pointerId) {
-        return;
-      }
-      transformRef.current.x = drag.originX + event.clientX - drag.startX;
-      transformRef.current.y = drag.originY + event.clientY - drag.startY;
-      applyTransform();
-    },
-    [applyTransform],
-  );
-  const onPointerUp = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
-    if (dragRef.current?.pointerId === event.pointerId) {
-      dragRef.current = null;
-    }
-  }, []);
-  const resetTransform = useCallback(() => {
-    transformRef.current = { x: 0, y: 0, scale: 1 };
-    applyTransform();
-  }, [applyTransform]);
-  const zoomBy = useCallback(
-    (factor: number) => {
-      const viewport = viewportRef.current;
-      if (!viewport) {
-        return;
-      }
-      const rect = viewport.getBoundingClientRect();
-      const x = rect.width / 2;
-      const y = rect.height / 2;
-      const transform = transformRef.current;
-      const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, transform.scale * factor));
-      transform.x = x - ((x - transform.x) / transform.scale) * scale;
-      transform.y = y - ((y - transform.y) / transform.scale) * scale;
-      transform.scale = scale;
-      applyTransform();
-    },
-    [applyTransform],
-  );
-  const zoomInPress = useCallback(() => zoomBy(1.25), [zoomBy]);
-  const zoomOutPress = useCallback(() => zoomBy(0.8), [zoomBy]);
-
-  const [showSource, setShowSource] = useState(false);
-  const showSourcePress = useCallback(() => setShowSource(true), []);
-  const showDiagramPress = useCallback(() => setShowSource(false), []);
-  const [isHovered, setIsHovered] = useState(false);
-  const handlePointerEnter = useCallback(() => setIsHovered(true), []);
-  const handlePointerLeave = useCallback(() => setIsHovered(false), []);
-  const isCompact = useIsCompactFormFactor();
-  const controlsVisible = isHovered || isCompact || isFocusWithin;
-
-  useEffect(() => {
-    if (!showSource && contentRef.current) {
-      applyTransformToElement(contentRef.current, transformRef.current);
-    }
-  }, [applyTransformToElement, showSource]);
-
  const sourceView = useMemo(() => {
    const { marginTop, marginBottom, marginVertical, ...sourceTextStyle } = textStyle;
    const margins: ViewStyle = {
@@ -306,182 +159,90 @@ function MermaidFenceHostImpl({
      marginBottom: marginBottom ?? marginVertical,
    };
    const text: TextStyle = sourceTextStyle;
-    return {
-      container: [margins, sourceContainerStyle],
-      text,
-    };
+    return { container: [margins, sourceContainerStyle], text };
  }, [textStyle]);
-  const diagramBoxStyle = getDiagramBoxStyle(textStyle);
-
-  const diagramVisible = canShowDiagram && !showSource;
-  const sourceVisible = !canShowDiagram || showSource;
-  let rootStyle: StyleProp<ViewStyle> = sourceContainerStyle;
-  if (diagramVisible) {
-    rootStyle = [diagramBoxStyle, containerStyle];
-  } else if (showSource) {
-    rootStyle = sourceView.container;
-  }
+  const diagramStyle = useMemo(
+    () => [getDiagramBoxStyle(textStyle), containerStyle, { height: runtimeHeight }],
+    [runtimeHeight, textStyle],
+  );
+  const diagramSize = useMemo(
+    () => (visible ? { width: visible.width, height: visible.height } : MEASURING_SIZE),
+    [visible],
+  );
+  const sourceVisible = !diagramVisible;
+  const sourceContainer = showSource ? sourceView.container : sourceContainerStyle;
  const sourceTextStyle = showSource ? sourceView.text : textStyle;
+  const viewportStyle = diagramVisible ? diagramStyle : measuringStyle;

-  const runtime = (
-    <MermaidIframeRuntime
-      request={request}
-      height={runtimeHeight}
-      onRendered={handleRendered}
-      onRenderFailed={renderFailed}
-    />
-  );
  return (
-    <View
-      ref={setControlsRegionRef}
-      style={rootStyle}
-      onPointerEnter={handlePointerEnter}
-      onPointerLeave={handlePointerLeave}
-      onFocus={handleFocusWithin}
-      onBlur={handleBlurWithin}
-    >
+    <>
      {sourceVisible ? (
-        <HighlightedCodeBlock
-          code={code}
-          language="mermaid"
-          inheritedStyles={inheritedStyles}
-          textStyle={sourceTextStyle}
-        />
+        <View style={sourceContainer}>
+          <HighlightedCodeBlock
+            code={code}
+            language="mermaid"
+            inheritedStyles={inheritedStyles}
+            textStyle={sourceTextStyle}
+          />
+          {showSource && canShowDiagram ? (
+            <Pressable
+              accessibilityLabel={t("message.diagram.viewDiagram")}
+              accessibilityRole="button"
+              hitSlop={4}
+              onPress={showDiagramPress}
+              style={controlStyles.sourceButton}
+            >
+              {({ hovered }) => (
+                <Workflow
+                  size={14}
+                  color={hovered ? controlStyles.iconHovered.color : controlStyles.icon.color}
+                />
+              )}
+            </Pressable>
+          ) : null}
+        </View>
      ) : null}
-      <div
-        ref={viewportRef}
-        role={diagramVisible ? "img" : undefined}
-        aria-label={diagramVisible ? t("message.diagram.diagram") : undefined}
-        aria-hidden={!diagramVisible}
-        style={diagramVisible ? viewportDomStyle : measuringRuntimeStyle}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        onPointerCancel={onPointerUp}
-        onDoubleClick={resetTransform}
+      <ZoomableViewport
+        accessibilityLabel={t("message.diagram.diagram")}
+        actions={actions}
+        contentSize={diagramSize}
+        style={viewportStyle}
+        testID="mermaid-viewport"
+        wheelActivation="modifier"
      >
-        <div ref={setContentRef} style={contentDomStyle}>
-          {runtime}
-        </div>
-      </div>
-      {diagramVisible ? (
-        <View style={controlStyles.cluster}>
-          <DiagramControlButton
-            icon={ZoomIn}
-            label={t("message.diagram.zoomIn")}
-            onPress={zoomInPress}
-            visible={controlsVisible}
-          />
-          <DiagramControlButton
-            icon={ZoomOut}
-            label={t("message.diagram.zoomOut")}
-            onPress={zoomOutPress}
-            visible={controlsVisible}
-          />
-          <DiagramControlButton
-            icon={Scan}
-            label={t("message.diagram.resetZoom")}
-            onPress={resetTransform}
-            visible={controlsVisible}
-          />
-          <DiagramControlButton
-            icon={Code}
-            label={t("message.diagram.viewSource")}
-            onPress={showSourcePress}
-            visible={controlsVisible}
-          />
-        </View>
-      ) : null}
-      {showSource && canShowDiagram ? (
-        <View style={[controlStyles.cluster, controlStyles.clusterSourceOffset]}>
-          <DiagramControlButton
-            icon={Workflow}
-            label={t("message.diagram.viewDiagram")}
-            onPress={showDiagramPress}
-            visible={controlsVisible}
-            plain
-          />
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-interface DiagramControlButtonProps {
-  icon: ComponentType<{ size?: number; color?: string }>;
-  label: string;
-  onPress: () => void;
-  visible: boolean;
-  plain?: boolean;
-}
-
-const DiagramControlButton = React.memo(function DiagramControlButton({
-  icon: Icon,
-  label,
-  onPress,
-  visible,
-  plain = false,
-}: DiagramControlButtonProps) {
-  const pillStyle = visible ? controlStyles.button : controlStyles.buttonHidden;
-  const plainStyle = visible ? controlStyles.plainButton : controlStyles.plainButtonHidden;
-  return (
-    <Pressable
-      onPress={onPress}
-      style={plain ? plainStyle : pillStyle}
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      hitSlop={4}
-    >
-      {({ hovered }) => (
-        <Icon
-          size={14}
-          color={hovered ? controlStyles.iconHovered.color : controlStyles.icon.color}
+        <MermaidIframeRuntime
+          request={request}
+          height="100%"
+          onRendered={handleRendered}
+          onRenderFailed={renderFailed}
        />
-      )}
-    </Pressable>
+      </ZoomableViewport>
+    </>
  );
-});
+}

+const MEASURING_SIZE = { width: 240, height: 240 };
+const sourceContainerStyle: ViewStyle = { position: "relative" };
+const containerStyle: ViewStyle = { overflow: "hidden", position: "relative" };
+const measuringStyle: ViewStyle = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  top: 0,
+  height: 240,
+  opacity: 0,
+  pointerEvents: "none",
+};
 const controlStyles = StyleSheet.create((theme) => ({
-  cluster: {
+  sourceButton: {
    position: "absolute",
    top: theme.spacing[2],
    right: theme.spacing[2],
-    flexDirection: "row",
-    gap: theme.spacing[1],
-  },
-  clusterSourceOffset: { right: 40 },
-  button: {
    padding: theme.spacing[1],
-    borderRadius: theme.borderRadius.md,
-    backgroundColor: theme.colors.surface2,
-    opacity: 1,
-    pointerEvents: "auto",
  },
-  buttonHidden: {
-    padding: theme.spacing[1],
-    borderRadius: theme.borderRadius.md,
-    backgroundColor: theme.colors.surface2,
-    opacity: 0,
-    pointerEvents: "none",
-  },
-  plainButton: { padding: theme.spacing[1], opacity: 1, pointerEvents: "auto" },
-  plainButtonHidden: { padding: theme.spacing[1], opacity: 0, pointerEvents: "none" },
  icon: { color: theme.colors.foregroundMuted },
  iconHovered: { color: theme.colors.foreground },
 }));
-
-const sourceContainerStyle: ViewStyle = { position: "relative" };
-const containerStyle: ViewStyle = { overflow: "hidden", position: "relative" };
-const viewportDomStyle: React.CSSProperties = { cursor: "grab", userSelect: "none" };
-const contentDomStyle: React.CSSProperties = { transformOrigin: "0 0" };
-const measuringRuntimeStyle: React.CSSProperties = {
-  position: "absolute",
-  inset: 0,
-  opacity: 0,
-  pointerEvents: "none",
-  overflow: "hidden",
-};
 const mapColorScheme = (theme: Theme) => ({ colorScheme: theme.colorScheme });
 const ThemedMermaidFenceHost = withUnistyles(MermaidFenceHostImpl);

@@ -42,7 +42,6 @@ import {
  CircleDot,
  Copy,
  Plus,
-  RotateCcw,
  TriangleAlertIcon,
  Scissors,
  MicVocal,
@@ -103,7 +102,7 @@ import {
  AttachmentLabel,
  AttachmentThumbnail,
 } from "@/components/attachment-pill";
-import { AttachmentLightbox } from "@/components/attachment-lightbox";
+import { AttachmentLightbox, type ImageLightboxSource } from "@/components/attachment-lightbox";
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import { isWeb, isNative } from "@/constants/platform";
 import type { AgentCapabilityFlags } from "@getpaseo/protocol/agent-types";
@@ -441,6 +440,10 @@ export const UserMessage = memo(function UserMessage({
  const [isHovered, setIsHovered] = useState(false);
  const [lightboxMetadata, setLightboxMetadata] = useState<UserMessageImageAttachment | null>(null);
  const handleLightboxClose = useCallback(() => setLightboxMetadata(null), []);
+  const lightboxSource = useMemo<ImageLightboxSource | null>(
+    () => (lightboxMetadata ? { type: "attachment", metadata: lightboxMetadata } : null),
+    [lightboxMetadata],
+  );
  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
  const hasText = message.trim().length > 0;
  const hasImages = images.length > 0;
@@ -566,7 +569,7 @@ export const UserMessage = memo(function UserMessage({
          </View>
        ) : null}
      </View>
-      <AttachmentLightbox metadata={lightboxMetadata} onClose={handleLightboxClose} />
+      <AttachmentLightbox source={lightboxSource} onClose={handleLightboxClose} />
    </View>
  );
 });
@@ -816,6 +819,10 @@ function AssistantMarkdownImage({
  workspaceRoot?: string;
  serverId?: string;
 }) {
+  const { t } = useTranslation();
+  const [viewerOpen, setViewerOpen] = useState(false);
+  const openViewer = useCallback(() => setViewerOpen(true), []);
+  const closeViewer = useCallback(() => setViewerOpen(false), []);
  const containerStyle = useMemo<StyleProp<ViewStyle>>(
    () => ({
      marginTop: hasLeadingContent ? 16 : 0,
@@ -848,6 +855,14 @@ function AssistantMarkdownImage({
    () => [assistantMessageStylesheet.imageSurface, imageSizeStyle],
    [imageSizeStyle],
  );
+  const lightboxSource = useMemo<ImageLightboxSource | null>(() => {
+    if (!viewerOpen || !imageUri) return null;
+    return {
+      type: "uri",
+      uri: imageUri,
+      contentSize: aspectRatio ? { width: aspectRatio, height: 1 } : undefined,
+    };
+  }, [aspectRatio, imageUri, viewerOpen]);

  const stateFrameStyle = useMemo<StyleProp<ViewStyle>>(
    () => [
@@ -877,21 +892,34 @@ function AssistantMarkdownImage({

  return (
    <View style={frameStyle}>
-      <View style={surfaceStyle} accessibilityRole="image" accessibilityLabel={alt}>
-        <Image
-          ref={binding.onRef}
-          source={imageSource}
+      <Pressable
+        accessibilityLabel={t("composer.attachments.openImage")}
+        accessibilityRole="button"
+        disabled={image.status !== "loaded"}
+        onPress={openViewer}
+        style={surfaceStyle}
+      >
+        <View
          style={assistantMessageStylesheet.image}
-          resizeMode="contain"
-          onLoad={binding.onLoad}
-          onError={binding.onError}
-        />
-        {image.status === "loading" ? (
-          <View pointerEvents="none" style={assistantMessageStylesheet.imageLoadingOverlay}>
-            <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
-          </View>
-        ) : null}
-      </View>
+          accessibilityRole="image"
+          accessibilityLabel={alt}
+        >
+          <Image
+            ref={binding.onRef}
+            source={imageSource}
+            style={assistantMessageStylesheet.image}
+            resizeMode="contain"
+            onLoad={binding.onLoad}
+            onError={binding.onError}
+          />
+          {image.status === "loading" ? (
+            <View pointerEvents="none" style={assistantMessageStylesheet.imageLoadingOverlay}>
+              <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+            </View>
+          ) : null}
+        </View>
+      </Pressable>
+      <AttachmentLightbox source={lightboxSource} onClose={closeViewer} />
    </View>
  );
 }
@@ -2261,8 +2289,6 @@ function taskActivityIcon(activity: TaskActivity) {
      return CircleDot;
    case "completed":
      return Check;
-    case "reopened":
-      return RotateCcw;
    default:
      return CheckSquare;
  }
@@ -3120,6 +3146,7 @@ export const ToolCall = memo(function ToolCall({
  const handleToggle = useCallback(() => {
    if (!shouldRenderInline) {
      openToolCall({
+        toolName,
        displayName: presentation.displayName,
        summary: presentation.summary,
        detail: effectiveDetail,
@@ -3133,6 +3160,7 @@ export const ToolCall = memo(function ToolCall({
  }, [
    shouldRenderInline,
    openToolCall,
+    toolName,
    presentation.displayName,
    presentation.summary,
    presentation.errorText,
@@ -3173,6 +3201,7 @@ export const ToolCall = memo(function ToolCall({
    if (!shouldRenderInline) return null;
    return (
      <ToolCallDetailsContent
+        toolName={toolName}
        detail={effectiveDetail}
        errorText={presentation.errorText}
        maxHeight={maxDetailHeight}
@@ -3181,6 +3210,7 @@ export const ToolCall = memo(function ToolCall({
    );
  }, [
    shouldRenderInline,
+    toolName,
    effectiveDetail,
    presentation.errorText,
    presentation.isLoadingDetails,
@@ -7,6 +7,7 @@ import {
  resolveInitialModelBrowserView,
  resolveModelBrowserAllView,
  groupProfilesByProviderModel,
+  resolveModelBrowserScrolling,
 } from "./model-browser-view";

 function provider(
@@ -37,6 +38,20 @@ function modelRow(
  };
 }

+describe("model browser scrolling", () => {
+  it("participates in native compact bottom-sheet scrolling", () => {
+    expect(resolveModelBrowserScrolling({ isNative: true, isCompact: true })).toBe("sheet");
+  });
+
+  it.each([
+    { platform: "native wide", isNative: true, isCompact: false },
+    { platform: "compact web", isNative: false, isCompact: true },
+    { platform: "wide web", isNative: false, isCompact: false },
+  ])("owns scrolling on $platform surfaces", ({ isNative, isCompact }) => {
+    expect(resolveModelBrowserScrolling({ isNative, isCompact })).toBe("independent");
+  });
+});
+
 describe("model browser initial view", () => {
  const codex = provider("codex", "Codex");
  const pi = provider("pi", "Pi");
@@ -9,6 +9,16 @@ export type ModelBrowserView =
  | { kind: "all" }
  | { kind: "provider"; providerId: string; providerLabel: string };

+export function resolveModelBrowserScrolling({
+  isNative,
+  isCompact,
+}: {
+  isNative: boolean;
+  isCompact: boolean;
+}): "sheet" | "independent" {
+  return isNative && isCompact ? "sheet" : "independent";
+}
+
 /** A profile's model reference; used to match profiles back to model rows. */
 export interface ModelProfileRef {
  provider: string;
@@ -11,6 +11,10 @@ import { StyleSheet } from "react-native-unistyles";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import type { ToolCallDetail } from "@getpaseo/protocol/agent-types";
+import {
+  buildPaseoToolDetailSections,
+  type PaseoToolDetailSection,
+} from "@getpaseo/protocol/paseo-tool-call-detail";
 import { buildLineDiff, parseUnifiedDiff, type DiffLine } from "@/utils/tool-call-parsers";
 import { highlightDiffLines } from "@/utils/diff-highlight";
 import { hasMeaningfulToolCallDetail } from "@/utils/tool-call-detail-state";
@@ -27,6 +31,7 @@ const ScrollView = isWeb ? RNScrollView : GHScrollView;
 // ---- Content Component ----

 interface ToolCallDetailsContentProps {
+  toolName?: string;
  detail?: ToolCallDetail;
  errorText?: string;
  maxHeight?: number;
@@ -626,7 +631,42 @@ function buildUnknownSections(detail: UnknownDetail, ds: DetailStyles, t: TFunct
  return out;
 }

+function PaseoDetailSection({ section }: { section: PaseoToolDetailSection }) {
+  return (
+    <View style={styles.paseoSection}>
+      <Text style={styles.paseoSectionTitle}>{section.title}</Text>
+      {section.kind === "prose" ? (
+        <Text selectable style={styles.paseoProse}>
+          {section.text}
+        </Text>
+      ) : (
+        <View style={styles.paseoFields}>
+          {section.fields.map((field) => (
+            <View key={field.label} style={styles.paseoFieldRow}>
+              <Text style={styles.paseoFieldLabel}>{field.label}</Text>
+              <Text selectable style={styles.paseoFieldValue}>
+                {field.value}
+              </Text>
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+}
+
+function buildPaseoUnknownSections(
+  toolName: string | undefined,
+  detail: UnknownDetail,
+): ReactNode[] | null {
+  if (!toolName) return null;
+  const sections = buildPaseoToolDetailSections(toolName, detail.input, detail.output);
+  if (!sections) return null;
+  return sections.map((section) => <PaseoDetailSection key={section.title} section={section} />);
+}
+
 function buildDetailSections(
+  toolName: string | undefined,
  detail: ToolCallDetail | undefined,
  diffLines: DiffLine[] | undefined,
  ds: DetailStyles,
@@ -701,7 +741,7 @@ function buildDetailSections(
    return [<ScrollablePlainTextSection key="plain-text" text={detail.text} ds={ds} />];
  }
  if (detail.type === "unknown") {
-    return buildUnknownSections(detail, ds, t);
+    return buildPaseoUnknownSections(toolName, detail) ?? buildUnknownSections(detail, ds, t);
  }
  return [];
 }
@@ -741,6 +781,7 @@ function LoadingSkeleton({ containerStyle }: { containerStyle: StyleProp<ViewSty
 }

 export function ToolCallDetailsContent({
+  toolName,
  detail,
  errorText,
  maxHeight,
@@ -752,7 +793,7 @@ export function ToolCallDetailsContent({
  const ds = useDetailStyles(detail, resolvedMaxHeight, fillAvailableHeight);
  const diffLines = useDiffLines(detail);

-  const sections: ReactNode[] = buildDetailSections(detail, diffLines, ds, t);
+  const sections: ReactNode[] = buildDetailSections(toolName, detail, diffLines, ds, t);

  if (errorText) {
    sections.push(<ErrorSection key="error" errorText={errorText} ds={ds} />);
@@ -796,6 +837,46 @@ const styles = StyleSheet.create((theme) => {
      fontSize: theme.fontSize.base,
      fontWeight: theme.fontWeight.normal,
    },
+    paseoSection: {
+      gap: theme.spacing[3],
+      paddingHorizontal: theme.spacing[4],
+      paddingVertical: theme.spacing[4],
+      borderBottomWidth: theme.borderWidth[1],
+      borderBottomColor: theme.colors.border,
+    },
+    paseoSectionTitle: {
+      color: theme.colors.foreground,
+      fontSize: theme.fontSize.base,
+      fontWeight: theme.fontWeight.medium,
+    },
+    paseoProse: {
+      color: theme.colors.foreground,
+      fontSize: theme.fontSize.content,
+      lineHeight: Math.round(theme.fontSize.content * 1.5),
+      overflowWrap: "anywhere",
+    },
+    paseoFields: {
+      gap: theme.spacing[3],
+    },
+    paseoFieldRow: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      gap: theme.spacing[4],
+    },
+    paseoFieldLabel: {
+      width: 120,
+      color: theme.colors.foregroundMuted,
+      fontSize: theme.fontSize.sm,
+      lineHeight: Math.round(theme.fontSize.base * 1.5),
+    },
+    paseoFieldValue: {
+      flex: 1,
+      minWidth: 0,
+      color: theme.colors.foreground,
+      fontSize: theme.fontSize.base,
+      lineHeight: Math.round(theme.fontSize.base * 1.5),
+      overflowWrap: "anywhere",
+    },
    section: {
      gap: theme.spacing[2],
    },
@@ -17,6 +17,7 @@ import { ToolCallDetailsContent } from "./tool-call-details";
 // ----- Types -----

 export interface ToolCallSheetData {
+  toolName: string;
  displayName: string;
  summary?: string;
  detail?: ToolCallDetail;
@@ -155,7 +156,14 @@ interface ToolCallSheetContentProps {

 function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
  const { t } = useTranslation();
-  const { displayName, detail, errorText, icon: IconComponent, showLoadingSkeleton } = data;
+  const {
+    toolName,
+    displayName,
+    detail,
+    errorText,
+    icon: IconComponent,
+    showLoadingSkeleton,
+  } = data;

  return (
    <View style={styles.container}>
@@ -181,6 +189,7 @@ function ToolCallSheetContent({ data, onClose }: ToolCallSheetContentProps) {
      {/* Content */}
      <BottomSheetScrollView style={styles.content} contentContainerStyle={styles.contentContainer}>
        <ToolCallDetailsContent
+          toolName={toolName}
          detail={detail}
          errorText={errorText}
          fillAvailableHeight
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState, type ReactElement, type RefObject } from
 import { Keyboard, View, useWindowDimensions } from "react-native";
 import { Portal } from "@gorhom/portal";
 import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet } from "react-native-unistyles";
 import { Autocomplete, type AutocompleteOption } from "@/components/ui/autocomplete";
 import {
@@ -63,9 +64,10 @@ export function AutocompletePopover({
  // React Compiler memoizes effect captures by reading SharedValue.value during render.
  const [relativeAnchorRect, setRelativeAnchorRect] = useState<RelativeAnchorRect | null>(null);
  const windowDimensions = useWindowDimensions();
+  const safeAreaInsets = useSafeAreaInsets();
  const portalHostName = useFloatingPanelPortalHostName();
  const { shift } = useKeyboardShift();
-  const openShift = useSharedValue(0);
+  const measuredShift = useSharedValue(0);

  useEffect(() => {
    if (!visible || (options.length > 0 && selectedIndex < 0)) {
@@ -88,7 +90,7 @@ export function AutocompletePopover({
          width: anchorRect.width,
          hostHeight: hostRect.height,
        });
-        openShift.value = shift.value;
+        measuredShift.value = shift.value;
        return undefined;
      });
    };
@@ -110,7 +112,7 @@ export function AutocompletePopover({
    selectedIndex,
    anchorRef,
    portalHostName,
-    openShift,
+    measuredShift,
    shift,
    windowDimensions.width,
    windowDimensions.height,
@@ -120,20 +122,22 @@ export function AutocompletePopover({
    if (!relativeAnchorRect) return null;
    return inlineUnistylesStyle({
      position: "absolute" as const,
-      bottom: relativeAnchorRect.hostHeight - relativeAnchorRect.y + OFFSET_FROM_ANCHOR,
      left: relativeAnchorRect.x,
      width: relativeAnchorRect.width,
    });
  }, [relativeAnchorRect]);

-  const animatedTransformStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: openShift.value - shift.value }],
-  }));
-
-  const composedStyle = useMemo(
-    () => [baseStyle, animatedTransformStyle],
-    [baseStyle, animatedTransformStyle],
-  );
+  const anchorY = relativeAnchorRect?.y ?? 0;
+  const baseBottom = relativeAnchorRect
+    ? relativeAnchorRect.hostHeight - relativeAnchorRect.y + OFFSET_FROM_ANCHOR
+    : 0;
+  const keyboardLayoutStyle = useAnimatedStyle(() => {
+    const shiftDelta = shift.value - measuredShift.value;
+    return {
+      bottom: baseBottom + shiftDelta,
+      maxHeight: Math.max(0, anchorY - shiftDelta - safeAreaInsets.top - OFFSET_FROM_ANCHOR * 2),
+    };
+  }, [anchorY, baseBottom, safeAreaInsets.top]);

  if (!visible || !relativeAnchorRect || !baseStyle) return null;
  if (options.length > 0 && selectedIndex < 0) return null;
@@ -141,7 +145,10 @@ export function AutocompletePopover({
  return (
    <Portal hostName={portalHostName}>
      <View style={styles.overlay} pointerEvents="box-none">
-        <Animated.View testID="composer-autocomplete-popover" style={composedStyle}>
+        <Animated.View
+          testID="composer-autocomplete-popover"
+          style={[baseStyle, keyboardLayoutStyle]}
+        >
          <Autocomplete
            options={options}
            selectedIndex={selectedIndex}
@@ -288,6 +288,8 @@ export function Autocomplete({

 const styles = StyleSheet.create((theme: Theme) => ({
  outerWrapper: {
+    flexShrink: 1,
+    minHeight: 0,
    gap: theme.spacing[1],
  },
  detailCard: {
@@ -315,6 +317,8 @@ const styles = StyleSheet.create((theme: Theme) => ({
    marginTop: theme.spacing[1],
  },
  container: {
+    flexShrink: 1,
+    minHeight: 0,
    backgroundColor: theme.colors.surface1,
    borderWidth: theme.borderWidth[1],
    borderColor: theme.colors.borderAccent,
@@ -92,6 +92,45 @@ describe("EditingTextInputNative", () => {
    expect(handleRef.current?.getText()).toBe("");
  });

+  it("replaces the native input when clearing text", () => {
+    const handleRef = createRef<EditingTextInputHandle>();
+
+    act(() => {
+      root?.render(
+        <EditingTextInput
+          ref={handleRef}
+          initialValue="line one\nline two\nline three"
+          onChangeText={noop}
+        />,
+      );
+    });
+    const grownInput = container?.querySelector("input");
+
+    act(() => {
+      handleRef.current?.replaceText("");
+    });
+
+    expect(container?.querySelector("input")).not.toBe(grownInput);
+  });
+
+  it("restores focus after replacing a cleared native input", () => {
+    const handleRef = createRef<EditingTextInputHandle>();
+
+    act(() => {
+      root?.render(<EditingTextInput ref={handleRef} initialValue="message" />);
+    });
+    const originalInput = container?.querySelector("input");
+    if (!originalInput) throw new Error("Expected native input");
+    Object.assign(originalInput, { isFocused: () => true });
+    originalInput.focus();
+
+    act(() => {
+      handleRef.current?.replaceText("");
+    });
+
+    expect(document.activeElement).toBe(container?.querySelector("input"));
+  });
+
  it("updates textRef and text when replaceText receives non-empty text", () => {
    const handleRef = createRef<EditingTextInputHandle>();

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { TextInput } from "react-native";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import PasteInput, {
@@ -11,7 +11,7 @@ import type { EditingTextInputHandle, EditingTextInputProps } from "./types";
 type NativeInput = (TextInput | PasteTextInputInstance) & {
  blur(): void;
  focus(): void;
-  isFocused(): boolean;
+  isFocused?(): boolean;
  clear?(): void;
  replaceText?(text: string, selection?: { start: number; end: number }): void;
  setNativeProps?(props: { text?: string; selection?: { start: number; end: number } }): void;
@@ -35,26 +35,41 @@ export const EditingTextInput = forwardRef<EditingTextInputHandle, EditingTextIn
    const inputRef = useRef<NativeInput | null>(null);
    const initialTextRef = useRef(initialValue);
    const textRef = useRef(initialTextRef.current);
+    const restoreFocusAfterResetRef = useRef(false);
+    const [nativeInputRevision, setNativeInputRevision] = useState(0);
+
+    const assignInputRef = useCallback((input: NativeInput | null) => {
+      inputRef.current = input;
+      if (!input || !restoreFocusAfterResetRef.current) return;
+      restoreFocusAfterResetRef.current = false;
+      input.focus();
+    }, []);

    useImperativeHandle(ref, () => ({
      focus: () => inputRef.current?.focus(),
      blur: () => inputRef.current?.blur(),
-      isFocused: () => inputRef.current?.isFocused() ?? false,
+      isFocused: () => inputRef.current?.isFocused?.() ?? false,
      getText: () => textRef.current,
      replaceText: (nextText, selection) => {
        textRef.current = nextText;
+        if (nextText === "") {
+          restoreFocusAfterResetRef.current = inputRef.current?.isFocused?.() ?? false;
+          if (inputRef.current?.replaceText) {
+            inputRef.current.replaceText(nextText, selection);
+          } else {
+            inputRef.current?.clear?.();
+          }
+          setNativeInputRevision((revision) => revision + 1);
+          return;
+        }
        if (inputRef.current?.replaceText) {
          inputRef.current.replaceText(nextText, selection);
          return;
        }
-        if (nextText === "") {
-          inputRef.current?.clear?.();
-        } else {
-          inputRef.current?.setNativeProps?.({
-            text: nextText,
-            ...(selection ? { selection } : {}),
-          });
-        }
+        inputRef.current?.setNativeProps?.({
+          text: nextText,
+          ...(selection ? { selection } : {}),
+        });
        if (selection) inputRef.current?.setSelection?.(selection.start, selection.end);
      },
      getNativeRef: () => inputRef.current?.getNativeRef?.() ?? inputRef.current,
@@ -82,8 +97,9 @@ export const EditingTextInput = forwardRef<EditingTextInputHandle, EditingTextIn
      return (
        <PasteInput
          {...props}
-          ref={inputRef as React.Ref<PasteTextInputInstance>}
-          defaultValue={initialTextRef.current}
+          key={nativeInputRevision}
+          ref={assignInputRef as React.Ref<PasteTextInputInstance>}
+          defaultValue={textRef.current}
          onChangeText={handleChangeText}
          onPaste={handlePaste}
        />
@@ -93,8 +109,9 @@ export const EditingTextInput = forwardRef<EditingTextInputHandle, EditingTextIn
      return (
        <BottomSheetTextInput
          {...props}
-          ref={inputRef as unknown as React.Ref<never>}
-          defaultValue={initialTextRef.current}
+          key={nativeInputRevision}
+          ref={assignInputRef as unknown as React.Ref<never>}
+          defaultValue={textRef.current}
          onChangeText={handleChangeText}
        />
      );
@@ -102,8 +119,9 @@ export const EditingTextInput = forwardRef<EditingTextInputHandle, EditingTextIn
    return (
      <TextInput
        {...props}
-        ref={inputRef as React.Ref<TextInput>}
-        defaultValue={initialTextRef.current}
+        key={nativeInputRevision}
+        ref={assignInputRef as React.Ref<TextInput>}
+        defaultValue={textRef.current}
        onChangeText={handleChangeText}
      />
    );
@@ -0,0 +1,108 @@
+import { describe, expect, it } from "vitest";
+import {
+  FIT_TRANSFORM,
+  clampTransform,
+  fitContentSize,
+  isActivePinchUpdate,
+  isPointInsideTransformedContent,
+  panContent,
+  zoomContentAtPoint,
+} from "./geometry";
+
+const viewport = { width: 800, height: 600 };
+const fittedContent = { width: 800, height: 400 };
+
+describe("zoomable viewport geometry", () => {
+  it("rejects Android's terminal pinch update after a touch has lifted", () => {
+    expect(isActivePinchUpdate(1, 2)).toBe(false);
+    expect(isActivePinchUpdate(2, 2)).toBe(true);
+  });
+
+  it("fits content inside the viewport without changing its aspect ratio", () => {
+    expect(fitContentSize({ width: 1600, height: 800 }, viewport)).toEqual(fittedContent);
+    expect(fitContentSize({ width: 400, height: 800 }, viewport)).toEqual({
+      width: 300,
+      height: 600,
+    });
+  });
+
+  it("fits within presentation padding and caps without shrinking the zoom viewport", () => {
+    expect(
+      fitContentSize({ width: 1600, height: 800 }, viewport, {
+        padding: 20,
+        maxWidth: 600,
+        maxHeight: 500,
+      }),
+    ).toEqual({ width: 600, height: 300 });
+  });
+
+  it("distinguishes backdrop taps from taps on transformed content", () => {
+    expect(
+      isPointInsideTransformedContent({
+        point: { x: 400, y: 300 },
+        transform: FIT_TRANSFORM,
+        fittedContent,
+        viewport,
+      }),
+    ).toBe(true);
+    expect(
+      isPointInsideTransformedContent({
+        point: { x: 400, y: 50 },
+        transform: FIT_TRANSFORM,
+        fittedContent,
+        viewport,
+      }),
+    ).toBe(false);
+    expect(
+      isPointInsideTransformedContent({
+        point: { x: 10, y: 10 },
+        transform: { scale: 2, x: 0, y: 0 },
+        fittedContent,
+        viewport,
+      }),
+    ).toBe(true);
+  });
+
+  it("returns to the centered fit transform at the minimum scale", () => {
+    expect(
+      clampTransform({ scale: 0.5, x: 200, y: -200 }, fittedContent, viewport, {
+        minScale: 1,
+        maxScale: 8,
+      }),
+    ).toEqual(FIT_TRANSFORM);
+  });
+
+  it("keeps the focal content point under the cursor while zooming", () => {
+    expect(
+      zoomContentAtPoint({
+        transform: FIT_TRANSFORM,
+        scale: 2,
+        focalPoint: { x: 600, y: 300 },
+        fittedContent,
+        viewport,
+        limits: { minScale: 1, maxScale: 8 },
+      }),
+    ).toEqual({ scale: 2, x: -200, y: 0 });
+  });
+
+  it("clamps panning to the scaled content edges", () => {
+    expect(
+      panContent({
+        transform: { scale: 2, x: 0, y: 0 },
+        delta: { x: 900, y: -900 },
+        fittedContent,
+        viewport,
+        limits: { minScale: 1, maxScale: 8 },
+      }),
+    ).toEqual({ scale: 2, x: 400, y: -100 });
+  });
+
+  it("allows Mermaid consumers to zoom below fit without inventing translation", () => {
+    expect(
+      clampTransform({ scale: 0.25, x: 100, y: 100 }, fittedContent, viewport, {
+        minScale: 0.25,
+        maxScale: 8,
+      }),
+    ).toEqual({ scale: 0.25, x: 0, y: 0 });
+  });
+});
@@ -0,0 +1,148 @@
+export interface ViewportSize {
+  width: number;
+  height: number;
+}
+
+export interface ViewportPoint {
+  x: number;
+  y: number;
+}
+
+export interface ViewportTransform {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+export interface ViewportScaleLimits {
+  minScale: number;
+  maxScale: number;
+}
+
+export interface ViewportFitOptions {
+  padding?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+}
+
+export const FIT_TRANSFORM: ViewportTransform = { scale: 1, x: 0, y: 0 };
+
+export function isActivePinchUpdate(activeTouches: number, reportedPointers: number): boolean {
+  "worklet";
+  return activeTouches >= 2 && reportedPointers >= 2;
+}
+
+export function isPointInsideTransformedContent(input: {
+  point: ViewportPoint;
+  transform: ViewportTransform;
+  fittedContent: ViewportSize;
+  viewport: ViewportSize;
+}): boolean {
+  "worklet";
+  const centerX = input.viewport.width / 2 + input.transform.x;
+  const centerY = input.viewport.height / 2 + input.transform.y;
+  const halfWidth = (input.fittedContent.width * input.transform.scale) / 2;
+  const halfHeight = (input.fittedContent.height * input.transform.scale) / 2;
+  return (
+    input.point.x >= centerX - halfWidth &&
+    input.point.x <= centerX + halfWidth &&
+    input.point.y >= centerY - halfHeight &&
+    input.point.y <= centerY + halfHeight
+  );
+}
+
+export function fitContentSize(
+  content: ViewportSize,
+  viewport: ViewportSize,
+  options: ViewportFitOptions = {},
+): ViewportSize {
+  const padding = options.padding ?? 0;
+  const availableWidth = Math.max(
+    0,
+    Math.min(viewport.width - padding * 2, options.maxWidth ?? Number.POSITIVE_INFINITY),
+  );
+  const availableHeight = Math.max(
+    0,
+    Math.min(viewport.height - padding * 2, options.maxHeight ?? Number.POSITIVE_INFINITY),
+  );
+  const fitScale = Math.min(availableWidth / content.width, availableHeight / content.height);
+  return {
+    width: content.width * fitScale,
+    height: content.height * fitScale,
+  };
+}
+
+function clampScale(scale: number, limits: ViewportScaleLimits): number {
+  return Math.min(limits.maxScale, Math.max(limits.minScale, scale));
+}
+
+function clampOffset(offset: number, maximum: number): number {
+  if (maximum === 0) {
+    return 0;
+  }
+  return Math.min(maximum, Math.max(-maximum, offset));
+}
+
+export function clampTransform(
+  transform: ViewportTransform,
+  fittedContent: ViewportSize,
+  viewport: ViewportSize,
+  limits: ViewportScaleLimits,
+): ViewportTransform {
+  const scale = clampScale(transform.scale, limits);
+  const maxX = Math.max(0, (fittedContent.width * scale - viewport.width) / 2);
+  const maxY = Math.max(0, (fittedContent.height * scale - viewport.height) / 2);
+  return {
+    scale,
+    x: clampOffset(transform.x, maxX),
+    y: clampOffset(transform.y, maxY),
+  };
+}
+
+export function zoomContentAtPoint(input: {
+  transform: ViewportTransform;
+  scale: number;
+  focalPoint: ViewportPoint;
+  fittedContent: ViewportSize;
+  viewport: ViewportSize;
+  limits: ViewportScaleLimits;
+}): ViewportTransform {
+  const scale = clampScale(input.scale, input.limits);
+  const viewportCenter = {
+    x: input.viewport.width / 2,
+    y: input.viewport.height / 2,
+  };
+  const contentPoint = {
+    x: (input.focalPoint.x - viewportCenter.x - input.transform.x) / input.transform.scale,
+    y: (input.focalPoint.y - viewportCenter.y - input.transform.y) / input.transform.scale,
+  };
+  return clampTransform(
+    {
+      scale,
+      x: input.focalPoint.x - viewportCenter.x - contentPoint.x * scale,
+      y: input.focalPoint.y - viewportCenter.y - contentPoint.y * scale,
+    },
+    input.fittedContent,
+    input.viewport,
+    input.limits,
+  );
+}
+
+export function panContent(input: {
+  transform: ViewportTransform;
+  delta: ViewportPoint;
+  fittedContent: ViewportSize;
+  viewport: ViewportSize;
+  limits: ViewportScaleLimits;
+}): ViewportTransform {
+  return clampTransform(
+    {
+      ...input.transform,
+      x: input.transform.x + input.delta.x,
+      y: input.transform.y + input.delta.y,
+    },
+    input.fittedContent,
+    input.viewport,
+    input.limits,
+  );
+}
@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } from "react";
+import { Image, View, type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import type { ViewportFitOptions, ViewportSize } from "./geometry";
+import { ZoomableViewport } from "./index";
+import type { ZoomableViewportAction } from "./types";
+
+interface ZoomableImageProps {
+  uri: string;
+  accessibilityLabel?: string;
+  actions?: ZoomableViewportAction[];
+  contentSize?: ViewportSize;
+  fit?: ViewportFitOptions;
+  maxScale?: number;
+  minScale?: number;
+  onError?: () => void;
+  onPressOutsideContent?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  wheelActivation?: "always" | "modifier";
+}
+
+export function ZoomableImage({
+  uri,
+  accessibilityLabel,
+  actions,
+  contentSize,
+  fit,
+  maxScale,
+  minScale = 1,
+  onError,
+  onPressOutsideContent,
+  style,
+  testID = "zoomable-image",
+  wheelActivation = "always",
+}: ZoomableImageProps) {
+  const [loadedSize, setLoadedSize] = useState<ViewportSize | null>(null);
+  const resolvedSize = contentSize ?? loadedSize;
+  const source = useMemo(() => ({ uri }), [uri]);
+
+  useEffect(() => {
+    if (contentSize) return;
+    let active = true;
+    setLoadedSize(null);
+    Image.getSize(
+      uri,
+      (width, height) => {
+        if (active && width > 0 && height > 0) setLoadedSize({ width, height });
+      },
+      () => {
+        if (active) onError?.();
+      },
+    );
+    return () => {
+      active = false;
+    };
+  }, [contentSize, onError, uri]);
+
+  if (!resolvedSize) {
+    return (
+      <View style={[styles.root, style]} testID={testID}>
+        <Image
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="image"
+          onError={onError}
+          resizeMode="contain"
+          source={source}
+          style={styles.image}
+          testID={`${testID}-image`}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <ZoomableViewport
+      accessibilityLabel={accessibilityLabel}
+      actions={actions}
+      contentSize={resolvedSize}
+      fit={fit}
+      maxScale={maxScale}
+      minScale={minScale}
+      onPressOutsideContent={onPressOutsideContent}
+      style={style}
+      testID={testID}
+      wheelActivation={wheelActivation}
+    >
+      <Image
+        onError={onError}
+        resizeMode="contain"
+        source={source}
+        style={styles.image}
+        testID={`${testID}-image`}
+      />
+    </ZoomableViewport>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  root: { flex: 1, minHeight: 0 },
+  image: { width: "100%", height: "100%" },
+}));
@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { View, type LayoutChangeEvent } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+import {
+  FIT_TRANSFORM,
+  fitContentSize,
+  isActivePinchUpdate,
+  isPointInsideTransformedContent,
+  zoomContentAtPoint,
+  type ViewportSize,
+} from "./geometry";
+import { ViewportToolbar } from "./toolbar";
+import type { ZoomableViewportProps } from "./types";
+
+const DEFAULT_MAX_SCALE = 8;
+const DEFAULT_MIN_SCALE = 0.25;
+
+export function ZoomableViewport({
+  contentSize,
+  children,
+  actions = [],
+  accessibilityLabel,
+  fit,
+  maxScale = DEFAULT_MAX_SCALE,
+  minScale = DEFAULT_MIN_SCALE,
+  onPressOutsideContent,
+  style,
+  testID,
+}: ZoomableViewportProps) {
+  const [viewport, setViewport] = useState<ViewportSize | null>(null);
+  const [toolbarScale, setToolbarScale] = useState(1);
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const startScale = useSharedValue(1);
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const pinchFocalX = useSharedValue(0);
+  const pinchFocalY = useSharedValue(0);
+  const pinchReady = useSharedValue(false);
+  const pinchTouchCount = useSharedValue(0);
+  const fittedContent = useMemo(
+    () => (viewport ? fitContentSize(contentSize, viewport, fit) : null),
+    [contentSize, fit, viewport],
+  );
+
+  const reset = useCallback(() => {
+    scale.value = FIT_TRANSFORM.scale;
+    translateX.value = FIT_TRANSFORM.x;
+    translateY.value = FIT_TRANSFORM.y;
+    setToolbarScale(FIT_TRANSFORM.scale);
+  }, [scale, translateX, translateY]);
+
+  useEffect(() => reset(), [contentSize.height, contentSize.width, reset, viewport]);
+
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .maxPointers(1)
+        .onBegin(() => {
+          startX.value = translateX.value;
+          startY.value = translateY.value;
+        })
+        .onUpdate((event) => {
+          if (!fittedContent || !viewport || scale.value <= minScale) return;
+          const maxX = Math.max(0, (fittedContent.width * scale.value - viewport.width) / 2);
+          const maxY = Math.max(0, (fittedContent.height * scale.value - viewport.height) / 2);
+          translateX.value = Math.min(maxX, Math.max(-maxX, startX.value + event.translationX));
+          translateY.value = Math.min(maxY, Math.max(-maxY, startY.value + event.translationY));
+        }),
+    [fittedContent, minScale, scale, startX, startY, translateX, translateY, viewport],
+  );
+
+  const pinchGesture = useMemo(
+    () =>
+      Gesture.Pinch()
+        .onTouchesDown((event) => {
+          pinchTouchCount.value = event.numberOfTouches;
+        })
+        .onTouchesUp((event) => {
+          pinchTouchCount.value = event.numberOfTouches;
+        })
+        .onBegin((event) => {
+          pinchTouchCount.value = event.numberOfPointers;
+          startScale.value = scale.value;
+          startX.value = translateX.value;
+          startY.value = translateY.value;
+          pinchReady.value = false;
+        })
+        .onUpdate((event) => {
+          if (!fittedContent || !viewport) return;
+          // Android emits one final pinch update after a finger lifts. Its focal point belongs to
+          // the remaining pointer, so applying it makes the content jump as the gesture ends.
+          if (!isActivePinchUpdate(pinchTouchCount.value, event.numberOfPointers)) return;
+          if (!pinchReady.value) {
+            pinchFocalX.value = event.focalX;
+            pinchFocalY.value = event.focalY;
+            pinchReady.value = true;
+          }
+          const nextScale = Math.min(maxScale, Math.max(minScale, startScale.value * event.scale));
+          const centerX = viewport.width / 2;
+          const centerY = viewport.height / 2;
+          const contentPointX = (pinchFocalX.value - centerX - startX.value) / startScale.value;
+          const contentPointY = (pinchFocalY.value - centerY - startY.value) / startScale.value;
+          const nextX = event.focalX - centerX - contentPointX * nextScale;
+          const nextY = event.focalY - centerY - contentPointY * nextScale;
+          const maxX = Math.max(0, (fittedContent.width * nextScale - viewport.width) / 2);
+          const maxY = Math.max(0, (fittedContent.height * nextScale - viewport.height) / 2);
+          scale.value = nextScale;
+          translateX.value = Math.min(maxX, Math.max(-maxX, nextX));
+          translateY.value = Math.min(maxY, Math.max(-maxY, nextY));
+        })
+        .onFinalize(() => {
+          pinchTouchCount.value = 0;
+          runOnJS(setToolbarScale)(scale.value);
+        }),
+    [
+      fittedContent,
+      maxScale,
+      minScale,
+      pinchFocalX,
+      pinchFocalY,
+      pinchReady,
+      pinchTouchCount,
+      scale,
+      startScale,
+      startX,
+      startY,
+      translateX,
+      translateY,
+      viewport,
+    ],
+  );
+  const doubleTapGesture = useMemo(
+    () =>
+      Gesture.Tap()
+        .numberOfTaps(2)
+        .onEnd((_event, success) => {
+          if (success) runOnJS(reset)();
+        }),
+    [reset],
+  );
+  const backdropTapGesture = useMemo(
+    () =>
+      Gesture.Tap()
+        .numberOfTaps(1)
+        .onEnd((event, success) => {
+          if (!success || !fittedContent || !viewport || !onPressOutsideContent) return;
+          const isInside = isPointInsideTransformedContent({
+            point: { x: event.x, y: event.y },
+            transform: { scale: scale.value, x: translateX.value, y: translateY.value },
+            fittedContent,
+            viewport,
+          });
+          if (!isInside) runOnJS(onPressOutsideContent)();
+        }),
+    [fittedContent, onPressOutsideContent, scale, translateX, translateY, viewport],
+  );
+  const tapGesture = useMemo(
+    () => Gesture.Exclusive(doubleTapGesture, backdropTapGesture),
+    [backdropTapGesture, doubleTapGesture],
+  );
+  const transformGesture = useMemo(
+    () => Gesture.Simultaneous(panGesture, pinchGesture),
+    [panGesture, pinchGesture],
+  );
+  const gesture = useMemo(
+    () => Gesture.Exclusive(transformGesture, tapGesture),
+    [tapGesture, transformGesture],
+  );
+
+  const zoomFromCenter = useCallback(
+    (factor: number) => {
+      if (!fittedContent || !viewport) return;
+      const next = zoomContentAtPoint({
+        transform: { scale: scale.value, x: translateX.value, y: translateY.value },
+        scale: scale.value * factor,
+        focalPoint: { x: viewport.width / 2, y: viewport.height / 2 },
+        fittedContent,
+        viewport,
+        limits: { minScale, maxScale },
+      });
+      scale.value = next.scale;
+      translateX.value = next.x;
+      translateY.value = next.y;
+      setToolbarScale(next.scale);
+    },
+    [fittedContent, maxScale, minScale, scale, translateX, translateY, viewport],
+  );
+  const zoomIn = useCallback(() => zoomFromCenter(1.25), [zoomFromCenter]);
+  const zoomOut = useCallback(() => zoomFromCenter(0.8), [zoomFromCenter]);
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) setViewport({ width, height });
+  }, []);
+
+  const translationStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translateX.value }, { translateY: translateY.value }],
+  }));
+  const scaleStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  const frameStyle = useMemo(
+    () => [
+      styles.contentFrame,
+      { width: fittedContent?.width ?? 0, height: fittedContent?.height ?? 0 },
+      translationStyle,
+    ],
+    [fittedContent, translationStyle],
+  );
+
+  return (
+    <View onLayout={handleLayout} style={[styles.root, style]} testID={testID}>
+      <GestureDetector gesture={gesture}>
+        <View
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole={accessibilityLabel ? "image" : undefined}
+          style={styles.canvas}
+          testID={testID ? `${testID}-canvas` : undefined}
+        >
+          {fittedContent ? (
+            <Animated.View style={frameStyle}>
+              <Animated.View style={[styles.content, scaleStyle]}>{children}</Animated.View>
+            </Animated.View>
+          ) : null}
+        </View>
+      </GestureDetector>
+      <ViewportToolbar
+        actions={actions}
+        maxScale={maxScale}
+        minScale={minScale}
+        onReset={reset}
+        onZoomIn={zoomIn}
+        onZoomOut={zoomOut}
+        scale={toolbarScale}
+        visible
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  root: { flex: 1, minHeight: 0, overflow: "hidden", position: "relative" },
+  canvas: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  contentFrame: { flexShrink: 0 },
+  content: { width: "100%", height: "100%" },
+}));
@@ -0,0 +1,350 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import {
+  FIT_TRANSFORM,
+  fitContentSize,
+  isPointInsideTransformedContent,
+  panContent,
+  zoomContentAtPoint,
+  type ViewportPoint,
+  type ViewportSize,
+  type ViewportTransform,
+} from "./geometry";
+import { ViewportToolbar } from "./toolbar";
+import type { ZoomableViewportProps } from "./types";
+
+const DEFAULT_MAX_SCALE = 8;
+const DEFAULT_MIN_SCALE = 0.25;
+
+interface DragGesture {
+  type: "drag";
+  pointerId: number;
+  startPoint: ViewportPoint;
+  startTransform: ViewportTransform;
+}
+
+interface PinchGesture {
+  type: "pinch";
+  distance: number;
+  midpoint: ViewportPoint;
+}
+
+type ActiveGesture = DragGesture | PinchGesture;
+
+function midpoint(points: ViewportPoint[]): ViewportPoint {
+  return {
+    x: (points[0].x + points[1].x) / 2,
+    y: (points[0].y + points[1].y) / 2,
+  };
+}
+
+function distance(points: ViewportPoint[]): number {
+  return Math.hypot(points[0].x - points[1].x, points[0].y - points[1].y);
+}
+
+export function ZoomableViewport({
+  contentSize,
+  children,
+  actions = [],
+  accessibilityLabel,
+  fit,
+  maxScale = DEFAULT_MAX_SCALE,
+  minScale = DEFAULT_MIN_SCALE,
+  onPressOutsideContent,
+  style,
+  testID,
+  wheelActivation = "modifier",
+}: ZoomableViewportProps) {
+  const canvasRef = useRef<HTMLDivElement | null>(null);
+  const pointersRef = useRef(new Map<number, ViewportPoint>());
+  const gestureRef = useRef<ActiveGesture | null>(null);
+  const suppressClickRef = useRef(false);
+  const transformRef = useRef<ViewportTransform>(FIT_TRANSFORM);
+  const [viewport, setViewport] = useState<ViewportSize | null>(null);
+  const [transform, setTransform] = useState<ViewportTransform>(FIT_TRANSFORM);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocusWithin, setIsFocusWithin] = useState(false);
+  const [hasTouchInput, setHasTouchInput] = useState(false);
+  const fittedContent = useMemo(
+    () => (viewport ? fitContentSize(contentSize, viewport, fit) : null),
+    [contentSize, fit, viewport],
+  );
+  const limits = useMemo(() => ({ minScale, maxScale }), [maxScale, minScale]);
+
+  const commitTransform = useCallback((next: ViewportTransform) => {
+    transformRef.current = next;
+    setTransform(next);
+  }, []);
+  const reset = useCallback(() => commitTransform(FIT_TRANSFORM), [commitTransform]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry || entry.contentRect.width <= 0 || entry.contentRect.height <= 0) return;
+      setViewport({ width: entry.contentRect.width, height: entry.contentRect.height });
+    });
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => reset(), [contentSize.height, contentSize.width, reset, viewport]);
+
+  const zoomAt = useCallback(
+    (scale: number, focalPoint: ViewportPoint) => {
+      if (!fittedContent || !viewport) return;
+      commitTransform(
+        zoomContentAtPoint({
+          transform: transformRef.current,
+          scale,
+          focalPoint,
+          fittedContent,
+          viewport,
+          limits,
+        }),
+      );
+    },
+    [commitTransform, fittedContent, limits, viewport],
+  );
+  const zoomFromCenter = useCallback(
+    (factor: number) => {
+      if (!viewport) return;
+      zoomAt(transformRef.current.scale * factor, {
+        x: viewport.width / 2,
+        y: viewport.height / 2,
+      });
+    },
+    [viewport, zoomAt],
+  );
+  const zoomIn = useCallback(() => zoomFromCenter(1.25), [zoomFromCenter]);
+  const zoomOut = useCallback(() => zoomFromCenter(0.8), [zoomFromCenter]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const activeCanvas = canvas;
+    function zoomWithWheel(event: WheelEvent) {
+      const hasModifier = event.ctrlKey || event.metaKey;
+      if (wheelActivation === "modifier" && !hasModifier) return;
+      event.preventDefault();
+      const bounds = activeCanvas.getBoundingClientRect();
+      const factor = Math.min(1.25, Math.max(0.8, Math.exp(-event.deltaY * 0.01)));
+      zoomAt(transformRef.current.scale * factor, {
+        x: event.clientX - bounds.left,
+        y: event.clientY - bounds.top,
+      });
+    }
+    activeCanvas.addEventListener("wheel", zoomWithWheel, { passive: false });
+    return () => activeCanvas.removeEventListener("wheel", zoomWithWheel);
+  }, [wheelActivation, zoomAt]);
+
+  const beginPointer = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    if (event.pointerType !== "mouse") setHasTouchInput(true);
+    if (pointersRef.current.size === 0) suppressClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const points = Array.from(pointersRef.current.values());
+    if (points.length >= 2) {
+      gestureRef.current = {
+        type: "pinch",
+        distance: distance(points),
+        midpoint: midpoint(points),
+      };
+      setIsDragging(true);
+      return;
+    }
+    gestureRef.current = {
+      type: "drag",
+      pointerId: event.pointerId,
+      startPoint: points[0],
+      startTransform: transformRef.current,
+    };
+    setIsDragging(transformRef.current.scale > 1);
+  }, []);
+
+  const movePointer = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!pointersRef.current.has(event.pointerId) || !fittedContent || !viewport) return;
+      pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      const gesture = gestureRef.current;
+      const points = Array.from(pointersRef.current.values());
+      if (gesture?.type === "pinch" && points.length >= 2) {
+        suppressClickRef.current = true;
+        const nextMidpoint = midpoint(points);
+        const nextDistance = distance(points);
+        const panned = panContent({
+          transform: transformRef.current,
+          delta: {
+            x: nextMidpoint.x - gesture.midpoint.x,
+            y: nextMidpoint.y - gesture.midpoint.y,
+          },
+          fittedContent,
+          viewport,
+          limits,
+        });
+        const next = zoomContentAtPoint({
+          transform: panned,
+          scale: panned.scale * (nextDistance / gesture.distance),
+          focalPoint: nextMidpoint,
+          fittedContent,
+          viewport,
+          limits,
+        });
+        gestureRef.current = { type: "pinch", distance: nextDistance, midpoint: nextMidpoint };
+        commitTransform(next);
+        return;
+      }
+      if (gesture?.type !== "drag" || gesture.pointerId !== event.pointerId) return;
+      if (
+        Math.hypot(event.clientX - gesture.startPoint.x, event.clientY - gesture.startPoint.y) > 3
+      ) {
+        suppressClickRef.current = true;
+      }
+      commitTransform(
+        panContent({
+          transform: gesture.startTransform,
+          delta: {
+            x: event.clientX - gesture.startPoint.x,
+            y: event.clientY - gesture.startPoint.y,
+          },
+          fittedContent,
+          viewport,
+          limits,
+        }),
+      );
+    },
+    [commitTransform, fittedContent, limits, viewport],
+  );
+
+  const endPointer = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    pointersRef.current.delete(event.pointerId);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    const remaining = Array.from(pointersRef.current.entries());
+    if (remaining.length === 1) {
+      const [pointerId, point] = remaining[0];
+      gestureRef.current = {
+        type: "drag",
+        pointerId,
+        startPoint: point,
+        startTransform: transformRef.current,
+      };
+      setIsDragging(transformRef.current.scale > 1);
+      return;
+    }
+    gestureRef.current = null;
+    setIsDragging(false);
+  }, []);
+
+  const handleCanvasClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (suppressClickRef.current) {
+        suppressClickRef.current = false;
+        return;
+      }
+      if (!fittedContent || !viewport || !onPressOutsideContent) return;
+      const bounds = event.currentTarget.getBoundingClientRect();
+      const isInside = isPointInsideTransformedContent({
+        point: { x: event.clientX - bounds.left, y: event.clientY - bounds.top },
+        transform: transformRef.current,
+        fittedContent,
+        viewport,
+      });
+      if (!isInside) onPressOutsideContent();
+    },
+    [fittedContent, onPressOutsideContent, viewport],
+  );
+
+  const renderedCanvasStyle = useMemo<React.CSSProperties>(() => {
+    let cursor: React.CSSProperties["cursor"] = "default";
+    if (transform.scale > 1) cursor = isDragging ? "grabbing" : "grab";
+    return { ...canvasDomStyle, cursor };
+  }, [isDragging, transform.scale]);
+  const renderedContentStyle = useMemo<React.CSSProperties>(
+    () => ({
+      ...contentDomStyle,
+      width: fittedContent?.width ?? 0,
+      height: fittedContent?.height ?? 0,
+      transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale(${transform.scale})`,
+    }),
+    [fittedContent, transform],
+  );
+  const controlsVisible = isHovered || isFocusWithin || hasTouchInput;
+  const handleFocus = useCallback(() => setIsFocusWithin(true), []);
+  const handleBlur = useCallback(() => setIsFocusWithin(false), []);
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  return (
+    <View style={[styles.root, style]} testID={testID}>
+      <div
+        aria-label={accessibilityLabel}
+        data-testid={testID ? `${testID}-canvas` : undefined}
+        onClick={handleCanvasClick}
+        onDoubleClick={reset}
+        onFocusCapture={handleFocus}
+        onBlurCapture={handleBlur}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onPointerCancel={endPointer}
+        onPointerDown={beginPointer}
+        onPointerMove={movePointer}
+        onPointerUp={endPointer}
+        ref={canvasRef}
+        role={accessibilityLabel ? "img" : undefined}
+        style={renderedCanvasStyle}
+      >
+        <div style={renderedContentStyle}>{children}</div>
+      </div>
+      <div
+        onBlurCapture={handleBlur}
+        onFocusCapture={handleFocus}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={toolbarDomStyle}
+      >
+        <ViewportToolbar
+          actions={actions}
+          maxScale={maxScale}
+          minScale={minScale}
+          onReset={reset}
+          onZoomIn={zoomIn}
+          onZoomOut={zoomOut}
+          scale={transform.scale}
+          visible={controlsVisible}
+        />
+      </div>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create(() => ({
+  root: { flex: 1, minHeight: 0, overflow: "hidden", position: "relative" },
+}));
+
+const canvasDomStyle: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "hidden",
+  touchAction: "none",
+  userSelect: "none",
+};
+const contentDomStyle: React.CSSProperties = {
+  flexShrink: 0,
+  transformOrigin: "center center",
+};
+const toolbarDomStyle: React.CSSProperties = {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  width: 200,
+  height: 48,
+  zIndex: 1,
+};
@@ -0,0 +1,137 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { Scan, ZoomIn, ZoomOut } from "lucide-react-native";
+import { useTranslation } from "react-i18next";
+import { StyleSheet } from "react-native-unistyles";
+import { useIsCompactFormFactor } from "@/constants/layout";
+import {
+  iconButtonChromeGlyphSize,
+  iconButtonChromeStyle,
+} from "@/components/ui/icon-button-chrome";
+import type { ZoomableViewportAction } from "./types";
+
+interface ViewportToolbarProps {
+  actions: ZoomableViewportAction[];
+  maxScale: number;
+  minScale: number;
+  onReset: () => void;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  scale: number;
+  visible: boolean;
+}
+
+interface ResolvedViewportAction extends ZoomableViewportAction {
+  disabled: boolean;
+}
+
+export const ViewportToolbar = React.memo(function ViewportToolbar({
+  actions,
+  maxScale,
+  minScale,
+  onReset,
+  onZoomIn,
+  onZoomOut,
+  scale,
+  visible,
+}: ViewportToolbarProps) {
+  const { t } = useTranslation();
+  const viewportActions: ResolvedViewportAction[] = [
+    {
+      icon: ZoomIn,
+      label: t("message.diagram.zoomIn"),
+      onPress: onZoomIn,
+      disabled: scale >= maxScale,
+    },
+    {
+      icon: ZoomOut,
+      label: t("message.diagram.zoomOut"),
+      onPress: onZoomOut,
+      disabled: scale <= minScale,
+    },
+    {
+      icon: Scan,
+      label: t("message.diagram.resetZoom"),
+      onPress: onReset,
+      disabled: scale === 1,
+    },
+    ...actions.map((action) => ({ ...action, disabled: false })),
+  ];
+
+  return (
+    <View style={styles.cluster} testID="zoomable-viewport-toolbar">
+      {viewportActions.map((action) => (
+        <ViewportToolbarButton
+          key={action.label}
+          action={action}
+          disabled={action.disabled}
+          visible={visible}
+        />
+      ))}
+    </View>
+  );
+});
+
+function ViewportToolbarButton({
+  action,
+  disabled,
+  visible,
+}: {
+  action: ZoomableViewportAction;
+  disabled: boolean;
+  visible: boolean;
+}) {
+  const Icon = action.icon;
+  const isCompact = useIsCompactFormFactor();
+  const iconSize = iconButtonChromeGlyphSize("small", isCompact);
+  const buttonStyle = React.useCallback(
+    ({ hovered, pressed }: { hovered?: boolean; pressed: boolean }) =>
+      iconButtonChromeStyle({
+        size: "small",
+        compact: isCompact,
+        state: { hovered, pressed },
+        disabled,
+        style: visible ? styles.button : styles.buttonHidden,
+      }),
+    [disabled, isCompact, visible],
+  );
+  return (
+    <Pressable
+      accessibilityLabel={action.label}
+      accessibilityRole="button"
+      disabled={disabled}
+      hitSlop={isCompact ? 6 : 4}
+      onPress={action.onPress}
+      style={buttonStyle}
+      testID={action.testID}
+    >
+      {({ hovered }) => (
+        <Icon size={iconSize} color={hovered ? styles.iconHovered.color : styles.icon.color} />
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  cluster: {
+    position: "absolute",
+    top: theme.spacing[2],
+    right: theme.spacing[2],
+    zIndex: 1,
+    flexDirection: "row",
+    gap: theme.spacing[1],
+    pointerEvents: "box-none",
+  },
+  button: {
+    backgroundColor: theme.colors.surface2,
+    opacity: 1,
+    pointerEvents: "auto",
+  },
+  buttonHidden: {
+    backgroundColor: theme.colors.surface2,
+    opacity: 0,
+    pointerEvents: "none",
+  },
+  icon: { color: theme.colors.foregroundMuted },
+  iconHovered: { color: theme.colors.foreground },
+}));
@@ -0,0 +1,24 @@
+import type { ComponentType, ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ViewportFitOptions, ViewportSize } from "./geometry";
+
+export interface ZoomableViewportAction {
+  icon: ComponentType<{ size?: number; color?: string }>;
+  label: string;
+  onPress: () => void;
+  testID?: string;
+}
+
+export interface ZoomableViewportProps {
+  contentSize: ViewportSize;
+  children: ReactNode;
+  actions?: ZoomableViewportAction[];
+  accessibilityLabel?: string;
+  fit?: ViewportFitOptions;
+  maxScale?: number;
+  minScale?: number;
+  onPressOutsideContent?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  wheelActivation?: "always" | "modifier";
+}
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";
-import { resolveModelBrowserScrolling, resolveModelSheetOpening } from "./model-sheet-flow";
+import { resolveModelSheetOpening } from "./model-sheet-flow";

 function provider(id: string, label: string): ProviderSelectorProvider {
  return { id, label, modelSelection: { kind: "models", rows: [] } };
@@ -40,13 +40,3 @@ describe("model sheet opening", () => {
    ).toEqual({ kind: "provider", providerId: "codex", providerLabel: "Codex" });
  });
 });
-
-describe("model sheet gesture ownership", () => {
-  it("uses the sheet-aware model browser inside compact bottom sheets", () => {
-    expect(resolveModelBrowserScrolling(true)).toBe("sheet");
-  });
-
-  it("keeps independent scrolling in the desktop split viewport", () => {
-    expect(resolveModelBrowserScrolling(false)).toBe("independent");
-  });
-});
@@ -1,10 +1,6 @@
 import type { ModelBrowserView } from "@/components/model-browser-view";
 import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";

-export function resolveModelBrowserScrolling(usesBottomSheet: boolean): "sheet" | "independent" {
-  return usesBottomSheet ? "sheet" : "independent";
-}
-
 export function resolveModelSheetOpening({
  canSwitchProvider,
  providers,
@@ -9,15 +9,13 @@ import { AdaptiveModalSheet } from "@/components/adaptive-modal-sheet";
 import { ComboboxTrigger } from "@/components/ui/combobox-trigger";
 import { getProviderIcon } from "@/components/provider-icons";
 import { ModelBrowser, useModelBrowser } from "@/components/model-browser";
+import { resolveModelBrowserScrolling } from "@/components/model-browser-view";
 import { AgentControlTrigger } from "@/composer/agent-controls/control";
 import { ComposerToolbarGlyph } from "@/composer/agent-controls/glyph";
-import {
-  resolveModelBrowserScrolling,
-  resolveModelSheetOpening,
-} from "@/composer/agent-controls/model-sheet-flow";
+import { resolveModelSheetOpening } from "@/composer/agent-controls/model-sheet-flow";
 import type { ProviderSelectorProvider } from "@/provider-selection/provider-selection";
 import { useIsCompactFormFactor } from "@/constants/layout";
-import { isWeb } from "@/constants/platform";
+import { isNative, isWeb } from "@/constants/platform";

 const SNAP_POINTS = ["80%", "90%"];
 const MODEL_LIST_TOP_INSET = 4;
@@ -102,7 +100,10 @@ export function CompactModelSheet({
 }: CompactModelSheetProps) {
  const { t } = useTranslation();
  const usesBottomSheet = useIsCompactFormFactor();
-  const modelBrowserScrolling = resolveModelBrowserScrolling(usesBottomSheet);
+  const modelBrowserScrolling = resolveModelBrowserScrolling({
+    isNative,
+    isCompact: usesBottomSheet,
+  });
  const [isOpen, setIsOpen] = useState(false);
  const [isModelBrowserOpen, setIsModelBrowserOpen] = useState(false);
  const availableProviders = useMemo(() => {
@@ -124,7 +124,7 @@ import { droppedItemsToPickedFiles } from "@/composer/attachments/drop";
 import { getFileTypeLabel } from "@/attachments/file-types";
 import { Combobox, ComboboxItem, type ComboboxOption } from "@/components/ui/combobox";
 import { AttachmentLabel, AttachmentPill, AttachmentThumbnail } from "@/components/attachment-pill";
-import { AttachmentLightbox } from "@/components/attachment-lightbox";
+import { AttachmentLightbox, type ImageLightboxSource } from "@/components/attachment-lightbox";
 import { openExternalUrl } from "@/utils/open-external-url";
 import { useIsDictationReady } from "@/hooks/use-is-dictation-ready";
 import { useForgeSearchQuery } from "@/git/use-forge-search-query";
@@ -2141,6 +2141,10 @@ function ComposerContentImpl({
  const handleLightboxClose = useCallback(() => {
    setLightboxMetadata(null);
  }, []);
+  const lightboxSource = useMemo<ImageLightboxSource | null>(
+    () => (lightboxMetadata ? { type: "attachment", metadata: lightboxMetadata } : null),
+    [lightboxMetadata],
+  );

  const handleGithubPickerOpenChange = useCallback(
    (open: boolean) => {
@@ -2263,7 +2267,7 @@ function ComposerContentImpl({
        isMessageInputFocused={isMessageInputFocused}
      />
      <Animated.View style={composerContainerStyle}>
-        <AttachmentLightbox metadata={lightboxMetadata} onClose={handleLightboxClose} />
+        <AttachmentLightbox source={lightboxSource} onClose={handleLightboxClose} />
        {/* Input area */}
        <View style={inputAreaContainerStyle}>
          <View style={styles.inputAreaContent}>
@@ -2364,6 +2368,9 @@ function ComposerContentImpl({
 const animatedStaticStyles = RNStyleSheet.create({
  container: {
    flexDirection: "column",
+    // KeyboardDock reduces the available column height with bottom padding.
+    // Keep the composer's constraint chain shrinkable down to its scrolling input.
+    flexShrink: 1,
    position: "relative",
  },
 });
@@ -2374,6 +2381,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
    backgroundColor: theme.colors.border,
  },
  inputAreaContainer: {
+    flexShrink: 1,
    position: "relative",
    minHeight: FOOTER_HEIGHT,
    marginHorizontal: "auto",
@@ -2387,11 +2395,13 @@ const styles = StyleSheet.create((theme: Theme) => ({
    opacity: 0.6,
  },
  inputAreaContent: {
+    flexShrink: 1,
    width: "100%",
    maxWidth: MAX_CONTENT_WIDTH,
    gap: theme.spacing[3],
  },
  messageInputContainer: {
+    flexShrink: 1,
    position: "relative",
    width: "100%",
    gap: theme.spacing[3],
@@ -1901,9 +1901,11 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(

 const styles = StyleSheet.create((theme: Theme) => ({
  container: {
+    flexShrink: 1,
    position: "relative",
  },
  inputWrapper: {
+    flexShrink: 1,
    flexDirection: "column",
    gap: theme.spacing[3],
    backgroundColor: theme.colors.surface1,
@@ -1932,6 +1934,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
    borderStyle: "dotted",
  },
  textInputScrollWrapper: {
+    flexShrink: 1,
    position: "relative",
  },
  focusHintText: {
@@ -1943,6 +1946,8 @@ const styles = StyleSheet.create((theme: Theme) => ({
    opacity: 0.5,
  },
  textInput: {
+    // Preserve the controls when an ancestor constrains an overlong draft.
+    flexShrink: 1,
    width: "100%",
    color: theme.colors.foreground,
    fontSize: theme.fontSize.content,
@@ -1964,6 +1969,7 @@ const styles = StyleSheet.create((theme: Theme) => ({
    color: theme.colors.foregroundMuted,
  },
  buttonRow: {
+    flexShrink: 0,
    flexDirection: "row",
    alignItems: "flex-end",
    justifyContent: "space-between",
@@ -9,7 +9,7 @@ import React, {
  useSyncExternalStore,
 } from "react";
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
-import { Image as RNImage, ScrollView as RNScrollView, Text, View } from "react-native";
+import { ScrollView as RNScrollView, Text, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, withUnistyles } from "react-native-unistyles";
 import { useTranslation } from "react-i18next";
 import { useIsCompactFormFactor } from "@/constants/layout";
@@ -39,6 +39,7 @@ import type { LiveFileModel } from "./live-file/model";
 import { confirmDialog } from "@/utils/confirm-dialog";
 import { usePublishPanelInstanceAttributes } from "@/panels/panel-instance-attributes";
 import type { Theme } from "@/styles/theme";
+import { ZoomableImage } from "@/components/zoomable-viewport/image";

 const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
 const foregroundMutedColorMapping = (theme: Theme) => ({
@@ -146,11 +147,6 @@ function FilePreviewBody({

  const previewScrollRef = useRef<RNScrollView>(null);

-  const imageSource = useMemo(
-    () => (imagePreviewUri ? { uri: imagePreviewUri } : null),
-    [imagePreviewUri],
-  );
-
  if (isLoading && !preview) {
    return (
      <View style={styles.centerState} testID="file-preview-loading">
@@ -212,22 +208,7 @@ function FilePreviewBody({
      );
    }

-    return (
-      <View style={styles.previewScrollContainer}>
-        <RNScrollView
-          ref={previewScrollRef}
-          style={styles.previewContent}
-          contentContainerStyle={styles.previewImageScrollContent}
-          showsVerticalScrollIndicator
-        >
-          <RNImage
-            source={imageSource ?? undefined}
-            style={styles.previewImage}
-            resizeMode="contain"
-          />
-        </RNScrollView>
-      </View>
-    );
+    return <ZoomableImage uri={imagePreviewUri} testID="image-file-preview" />;
  }

  return (
@@ -711,14 +692,4 @@ const styles = StyleSheet.create((theme) => ({
  previewCodeScrollContent: {
    padding: theme.spacing[4],
  },
-  previewImageScrollContent: {
-    flexGrow: 1,
-    padding: theme.spacing[4],
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  previewImage: {
-    width: "100%",
-    height: 420,
-  },
 }));
@@ -0,0 +1,83 @@
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { JSDOM } from "jsdom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CommitsSection } from "./commits-section";
+
+vi.mock("react-native-unistyles", () => ({
+  StyleSheet: {
+    create: (factory: unknown) =>
+      typeof factory === "function"
+        ? factory({
+            borderRadius: { full: 9999, sm: 4 },
+            borderWidth: { 1: 1 },
+            colors: {
+              border: "#333",
+              foreground: "#fff",
+              foregroundMuted: "#aaa",
+              statusDanger: "#c33",
+              surface2: "#222",
+            },
+            fontSize: { base: 15, sm: 13 },
+            spacing: [0, 4, 8, 12],
+          })
+        : factory,
+  },
+}));
+
+vi.mock("react-native-safe-area-context", () => ({
+  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 34, left: 0 }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock("@/git/use-commits-query", () => ({
+  useCheckoutCommitsQuery: () => ({ status: "idle" }),
+}));
+
+vi.mock("@/git/themed-chevron", () => ({
+  ThemedChevron: () => null,
+  chevronColorMapping: () => ({}),
+}));
+
+vi.mock("./commit-row", () => ({
+  CommitRow: () => null,
+}));
+
+let root: Root | null = null;
+
+beforeEach(() => {
+  const dom = new JSDOM("<!doctype html><html><body></body></html>");
+  vi.stubGlobal("React", React);
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.stubGlobal("window", dom.window);
+  vi.stubGlobal("document", dom.window.document);
+  vi.stubGlobal("HTMLElement", dom.window.HTMLElement);
+  vi.stubGlobal("Node", dom.window.Node);
+  vi.stubGlobal("navigator", dom.window.navigator);
+
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  vi.unstubAllGlobals();
+});
+
+describe("CommitsSection", () => {
+  it("keeps its bottom edge above the device safe area", () => {
+    act(() => {
+      root?.render(
+        <CommitsSection serverId="server" cwd="/repo" onCommitPress={vi.fn()} collapsed />,
+      );
+    });
+
+    const header = document.querySelector('[data-testid="commits-section-header"]');
+    expect(header?.parentElement?.getAttribute("style")).toContain("padding-bottom: 34px");
+  });
+});
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable, Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "react-i18next";
 import { useRetainedPanelActive } from "@/components/retained-panel";
 import { useCheckoutCommitsQuery, type CheckoutCommitsQueryResult } from "@/git/use-commits-query";
@@ -91,6 +92,7 @@ export function CommitsSection({
  onCollapsedChange,
 }: CommitsSectionProps) {
  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
  const isPanelActive = useRetainedPanelActive();
  const [now, setNow] = useState(() => new Date());
  const displayNow = useMemo(() => (isPanelActive ? new Date() : now), [isPanelActive, now]);
@@ -119,6 +121,10 @@ export function CommitsSection({
    () => [styles.headerChevron, !collapsed && styles.headerChevronExpanded],
    [collapsed],
  );
+  const containerStyle = useMemo(
+    () => [styles.container, { paddingBottom: insets.bottom }],
+    [insets.bottom],
+  );

  if (query.status === "unsupported") {
    return null;
@@ -129,7 +135,7 @@ export function CommitsSection({
      : null;

  return (
-    <View style={styles.container}>
+    <View style={containerStyle}>
      <Pressable
        accessibilityRole="button"
        testID="commits-section-header"
@@ -148,7 +148,7 @@ function CheckGroup({
 }) {
  const handlePress = useCallback(() => onToggle(group.status), [group.status, onToggle]);
  return (
-    <View>
+    <View testID={`pr-pane-check-group-${group.status}`}>
      <Pressable onPress={handlePress} style={styles.groupHeader} accessibilityRole="button">
        <Text style={styles.groupLabel}>{group.label}</Text>
        {collapsed ? (
@@ -20,6 +20,11 @@ function storedSendBehavior(storage: Storage): SendBehavior | undefined {
  return raw === undefined ? undefined : JSON.parse(raw).sendBehavior;
 }

+function storedContentFontSize(storage: Storage): number | undefined {
+  const raw = storage.entries.get(APP_SETTINGS_KEY);
+  return raw === undefined ? undefined : JSON.parse(raw).contentFontSize;
+}
+
 /** An in-memory storage whose write to `failingKey` always throws, as a full disk would. */
 function createFailingWriteStorage(failingKey: string): Storage {
  const storage = createInMemoryKeyValueStorage();
@@ -81,6 +86,47 @@ describe("migrateAppSettings", () => {
    expect(appliedIds(storage)).toEqual(["some-later-migration", "steer-default"]);
  });

+  it("migrates every mobile 15px content preference to 16px", async () => {
+    const storage = createInMemoryKeyValueStorage();
+    const settings = { ...settingsWith("steer"), contentFontSize: 15 };
+
+    const result = await migrateAppSettings(settings, storage, undefined, { native: true });
+
+    expect(result.contentFontSize).toBe(16);
+    expect(storedContentFontSize(storage)).toBe(16);
+    expect(appliedIds(storage)).toEqual(["steer-default", "mobile-content-16"]);
+  });
+
+  it("leaves a 15px web content preference unchanged", async () => {
+    const storage = createInMemoryKeyValueStorage();
+    const settings = { ...settingsWith("steer"), contentFontSize: 15 };
+
+    const result = await migrateAppSettings(settings, storage, undefined, { native: false });
+
+    expect(result.contentFontSize).toBe(15);
+    expect(storedContentFontSize(storage)).toBeUndefined();
+    expect(appliedIds(storage)).toEqual(["steer-default"]);
+  });
+
+  it("lets a mobile user choose 15px after the default migration ran", async () => {
+    const storage = createInMemoryKeyValueStorage();
+    await migrateAppSettings(
+      { ...settingsWith("steer"), contentFontSize: 15 },
+      storage,
+      undefined,
+      { native: true },
+    );
+
+    const result = await migrateAppSettings(
+      { ...settingsWith("steer"), contentFontSize: 15 },
+      storage,
+      undefined,
+      { native: true },
+    );
+
+    expect(result.contentFontSize).toBe(15);
+  });
+
  it("stays unmarked when the settings write fails, so a later launch retries", async () => {
    const storage = createFailingWriteStorage(APP_SETTINGS_KEY);

@@ -13,6 +13,9 @@ const AppliedMigrationsSchema = z.strictObject({ applied: z.array(z.string()) })
 */
 const STEER_DEFAULT_MIGRATION = "steer-default";

+/** Existing mobile installs materialized the old 15px content default in storage. */
+const MOBILE_CONTENT_16_MIGRATION = "mobile-content-16";
+
 /**
 * Brings stored settings up to date, returning what the caller should use. Owns both writes so
 * the marker can only ever be written after the settings it describes: a failed marker write
@@ -23,6 +26,7 @@ export async function migrateAppSettings(
  settings: AppSettings,
  storage: KeyValueStorage,
  stored?: PersistedAppSettings,
+  options: { native?: boolean } = {},
 ): Promise<AppSettings> {
  const migrationMarker = await readValidatedJson(
    storage,
@@ -30,12 +34,26 @@ export async function migrateAppSettings(
    AppliedMigrationsSchema,
  );
  const applied = new Set(migrationMarker?.applied ?? []);
-  if (applied.has(STEER_DEFAULT_MIGRATION)) {
+  let addedMigration = false;
+
+  let migrated = settings;
+  if (!applied.has(STEER_DEFAULT_MIGRATION)) {
+    migrated =
+      migrated.sendBehavior === "interrupt" ? { ...migrated, sendBehavior: "steer" } : migrated;
+    applied.add(STEER_DEFAULT_MIGRATION);
+    addedMigration = true;
+  }
+
+  if (options.native && !applied.has(MOBILE_CONTENT_16_MIGRATION)) {
+    migrated = migrated.contentFontSize === 15 ? { ...migrated, contentFontSize: 16 } : migrated;
+    applied.add(MOBILE_CONTENT_16_MIGRATION);
+    addedMigration = true;
+  }
+
+  if (!addedMigration) {
    return settings;
  }

-  const migrated: AppSettings =
-    settings.sendBehavior === "interrupt" ? { ...settings, sendBehavior: "steer" } : settings;
  if (migrated !== settings) {
    const storedSidebarRowItems = stored?.sidebarRowItems ?? {};
    await storage.setItem(
@@ -48,7 +66,6 @@ export async function migrateAppSettings(
    );
  }

-  applied.add(STEER_DEFAULT_MIGRATION);
  await storage.setItem(SETTINGS_MIGRATIONS_KEY, JSON.stringify({ applied: [...applied] }));
  return migrated;
 }
@@ -659,8 +659,8 @@ describe("appearance settings", () => {
    expect(defaultUiBaseFontSize(false)).toBe(14);
  });

-  it("uses a 15px content default on mobile and web", () => {
-    expect(defaultContentFontSize(true)).toBe(15);
+  it("uses a 16px content default on mobile and a 15px default on web", () => {
+    expect(defaultContentFontSize(true)).toBe(16);
    expect(defaultContentFontSize(false)).toBe(15);
    expect(DEFAULT_CONTENT_FONT_SIZE).toBe(defaultContentFontSize(false));
  });
@@ -52,7 +52,7 @@ export const DEFAULT_UI_BASE_FONT_SIZE = defaultUiBaseFontSize(isNative);
 export const MIN_UI_BASE_FONT_SIZE = 10;
 export const MAX_UI_BASE_FONT_SIZE = 21;
 export function defaultContentFontSize(native: boolean): number {
-  return native ? 15 : FONT_SIZE.content;
+  return native ? 16 : FONT_SIZE.content;
 }

 export const DEFAULT_CONTENT_FONT_SIZE = defaultContentFontSize(isNative);
@@ -75,7 +75,7 @@ export interface AppSettings {
  uiFontFamily: string; // "" = platform default UI stack
  monoFontFamily: string; // "" = platform default mono stack
  uiBaseFontSize: number; // clamped px, platform default 14 or 15
-  contentFontSize: number; // clamped px, default 15
+  contentFontSize: number; // clamped px, platform default 15 or 16
  codeFontSize: number; // clamped px, default 12
  syntaxTheme: SyntaxThemeId; // default "one"
  workspaceTitleSource: WorkspaceTitleSource;
@@ -343,7 +343,7 @@ export async function loadAppSettingsFromStorage(deps: SettingsDeps): Promise<Ap
      await writeAppSettings(deps.storage, read.stored, read.settings);
    }
    const { needsWrite: _needsWrite, ...stored } = read.stored;
-    return await migrateAppSettings(read.settings, deps.storage, stored);
+    return await migrateAppSettings(read.settings, deps.storage, stored, { native: isNative });
  } catch (error) {
    console.error("[AppSettings] Failed to load settings:", error);
    throw error;
@@ -422,7 +422,6 @@ describe("translation resources", () => {
      added: "Added",
      started: "Started",
      completed: "Completed",
-      reopened: "Reopened",
    });
  });

@@ -345,7 +345,6 @@ export const ar: TranslationResources = {
        added: "أُضيفت",
        started: "بدأت",
        completed: "اكتملت",
-        reopened: "أُعيد فتحها",
      },
    },
    compaction: {
@@ -343,7 +343,6 @@ export const en = {
        added: "Added",
        started: "Started",
        completed: "Completed",
-        reopened: "Reopened",
      },
    },
    compaction: {
@@ -348,7 +348,6 @@ export const es: TranslationResources = {
        added: "Añadida",
        started: "Iniciada",
        completed: "Completada",
-        reopened: "Reabierta",
      },
    },
    compaction: {
@@ -349,7 +349,6 @@ export const fr: TranslationResources = {
        added: "Ajoutée",
        started: "Commencée",
        completed: "Terminée",
-        reopened: "Rouverte",
      },
    },
    compaction: {
@@ -348,7 +348,6 @@ export const ja: TranslationResources = {
        added: "追加",
        started: "開始",
        completed: "完了",
-        reopened: "再開",
      },
    },
    compaction: {
@@ -346,7 +346,6 @@ export const ko: TranslationResources = {
        added: "추가됨",
        started: "시작됨",
        completed: "완료됨",
-        reopened: "다시 열림",
      },
    },
    compaction: {
@@ -348,7 +348,6 @@ export const ptBR: TranslationResources = {
        added: "Adicionada",
        started: "Iniciada",
        completed: "Concluída",
-        reopened: "Reaberta",
      },
    },
    compaction: {
@@ -347,7 +347,6 @@ export const ru: TranslationResources = {
        added: "Добавлена",
        started: "Начата",
        completed: "Завершена",
-        reopened: "Возобновлена",
      },
    },
    compaction: {
@@ -345,7 +345,6 @@ export const zhCN: TranslationResources = {
        added: "已添加",
        started: "已开始",
        completed: "已完成",
-        reopened: "已重新打开",
      },
    },
    compaction: {
@@ -5,6 +5,7 @@ import type { TFunction } from "i18next";
 import { SquarePen } from "lucide-react-native";
 import React, {
  memo,
+  type ReactNode,
  useCallback,
  useEffect,
  useMemo,
@@ -14,7 +15,6 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet as RNStyleSheet, Text, View } from "react-native";
-import ReanimatedAnimated from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import invariant from "tiny-invariant";
@@ -22,6 +22,7 @@ import { shallow, useShallow } from "zustand/shallow";
 import { useStoreWithEqualityFn } from "zustand/traditional";
 import { AgentStreamView, type AgentStreamViewHandle } from "@/agent-stream/view";
 import { ArchivedAgentCallout } from "@/components/archived-agent-callout";
+import { KeyboardDock } from "@/components/keyboard-dock";
 import { FileDropZone } from "@/components/file-drop/file-drop-zone";
 import { useRetainedPanelActive } from "@/components/retained-panel";
 import { Composer } from "@/composer";
@@ -46,7 +47,7 @@ import {
  MAX_CONTENT_WIDTH,
  useIsCompactFormFactor,
 } from "@/constants/layout";
-import { isWeb } from "@/constants/platform";
+import { isNative, isWeb } from "@/constants/platform";
 import { useAgentAttentionClear } from "@/hooks/use-agent-attention-clear";
 import { useAgentInputDraft, type AgentInputDraft } from "@/composer/draft/input-draft";
 import {
@@ -57,7 +58,6 @@ import {
  useAgentScreenStateMachine,
 } from "@/hooks/use-agent-screen-state-machine";
 import { useArchiveAgent } from "@/hooks/use-archive-agent";
-import { useKeyboardShiftStyle } from "@/hooks/use-keyboard-shift-style";
 import { useContainerWidthBelow } from "@/hooks/use-container-width";
 import { reconcileMissingAgentStateWithPresentAgent } from "@/panels/agent-panel-load-state";
 import {
@@ -885,9 +885,6 @@ function ChatAgentContent({
    clearOnAgentBlurRef.current = attentionController.clearOnAgentBlur;
  }, [attentionController.clearOnAgentBlur]);

-  const { style: animatedKeyboardStyle } = useKeyboardShiftStyle({
-    mode: "translate",
-  });
  const shouldPresentReconnectToast =
    isPaneVisible && connectionStatus !== "online" && connectionStatus !== "idle";

@@ -1169,11 +1166,6 @@ function ChatAgentContent({
    visibilityCatchUpStatus,
  ]);

-  const animatedContentStyle = useMemo(
-    () => [animatedStaticStyles.content, animatedKeyboardStyle],
-    [animatedKeyboardStyle],
-  );
-
  const nonReadyView = renderChatAgentNonReadyView({
    viewState,
    effectiveAgent,
@@ -1210,7 +1202,6 @@ function ChatAgentContent({
      toast={toastState}
      dismiss={dismissToast}
      streamViewRef={streamViewRef}
-      animatedContentStyle={animatedContentStyle}
      handleComposerHeightChange={handleComposerHeightChange}
      handleMessageSent={handleMessageSent}
      handleRewindComplete={handleRewindComplete}
@@ -1240,7 +1231,6 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
  toast,
  dismiss,
  streamViewRef,
-  animatedContentStyle,
  handleComposerHeightChange,
  handleMessageSent,
  handleRewindComplete,
@@ -1266,7 +1256,6 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
  toast: ToastState | null;
  dismiss: () => void;
  streamViewRef: React.RefObject<AgentStreamViewHandle | null>;
-  animatedContentStyle: object[];
  handleComposerHeightChange: (height: number) => void;
  handleMessageSent: () => void;
  handleRewindComplete: () => void;
@@ -1362,7 +1351,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
    </RenderProfile>
  );
  const streamContent = (
-    <ReanimatedAnimated.View style={animatedContentStyle}>
+    <View style={animatedStaticStyles.content}>
      <RenderProfile id={`AgentStreamSection:${agentId}`}>
        <AgentStreamSection
          streamViewRef={streamViewRef}
@@ -1391,7 +1380,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
          hasPluginComposerPills={hasPluginComposerPills}
        />
      ) : null}
-    </ReanimatedAnimated.View>
+    </View>
  );
  const contentContainer = <View style={styles.contentContainer}>{streamContent}</View>;

@@ -1402,7 +1391,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
      onRewindComplete={handleRewindComplete}
    >
      <View style={styles.root}>
-        <FileDropZone style={styles.container} disabled={isArchivingCurrentAgent}>
+        <DockedChatSurface disabled={isArchivingCurrentAgent}>
          {contentContainer}

          {showHistorySyncError ? (
@@ -1437,7 +1426,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
          ) : null}

          <ToastViewport toast={toast} onDismiss={dismiss} placement="panel" />
-        </FileDropZone>
+        </DockedChatSurface>

        {isArchivingCurrentAgent ? (
          <View style={styles.archivingOverlay} testID="agent-archiving-overlay">
@@ -1451,6 +1440,16 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
  );
 });

+function DockedChatSurface({ children, disabled }: { children: ReactNode; disabled: boolean }) {
+  return (
+    <KeyboardDock style={styles.container}>
+      <FileDropZone style={styles.container} disabled={disabled}>
+        {children}
+      </FileDropZone>
+    </KeyboardDock>
+  );
+}
+
 const AgentStreamSection = memo(function AgentStreamSection({
  streamViewRef,
  serverId,
@@ -1702,26 +1701,19 @@ function ActiveAgentComposer({
    ],
  );

-  const { style: composerKeyboardStyle } = useKeyboardShiftStyle({
-    mode: "translate",
-  });
-
  const inputAreaStyle = useMemo(
-    () => [
-      animatedStaticStyles.inputAreaWrapper,
-      { paddingBottom: insets.bottom },
-      composerKeyboardStyle,
-    ],
-    [insets.bottom, composerKeyboardStyle],
+    () => [animatedStaticStyles.inputAreaWrapper, { paddingBottom: insets.bottom }],
+    [insets.bottom],
  );

  return (
-    <ReanimatedAnimated.View style={inputAreaStyle} onLayout={onInputAreaLayout}>
+    <View style={inputAreaStyle} onLayout={onInputAreaLayout}>
      <Composer
        agentId={agentId}
        serverId={serverId}
        workspaceId={workspaceId}
        externalKeyboardShift
+        blurOnSubmit={isNative}
        isPaneFocused={isPaneFocused}
        value={agentInputDraft.text}
        onChangeText={agentInputDraft.editText}
@@ -1742,7 +1734,7 @@ function ActiveAgentComposer({
        onClientSlashCommand={handleClientSlashCommand}
        isCompactLayout={isCompactComposerLayout}
      />
-    </ReanimatedAnimated.View>
+    </View>
  );
 }

@@ -1823,6 +1815,7 @@ const animatedStaticStyles = RNStyleSheet.create({
  },
  inputAreaWrapper: {
    width: "100%",
+    flexShrink: 1,
  },
 });

@@ -0,0 +1,59 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
+import { navigateToAgent } from "@/utils/navigate-to-agent";
+import { usePluginHostNavigation } from "./host-navigation";
+
+vi.mock("@/utils/navigate-to-agent", () => ({
+  navigateToAgent: vi.fn(),
+}));
+vi.mock("@/stores/navigation-active-workspace-store", () => ({
+  navigateToWorkspace: vi.fn(),
+}));
+
+const navigateToAgentMock = vi.mocked(navigateToAgent);
+const navigateToWorkspaceMock = vi.mocked(navigateToWorkspace);
+
+describe("usePluginHostNavigation", () => {
+  beforeEach(() => {
+    navigateToAgentMock.mockReset();
+    navigateToWorkspaceMock.mockReset();
+  });
+
+  it("opens agents and workspaces on the rendering host", () => {
+    const { result } = renderHook(() => usePluginHostNavigation("host-1"));
+
+    act(() => result.current.openAgent({ agentId: "agent-1" }));
+    act(() => result.current.openWorkspace({ workspaceId: "workspace-1" }));
+
+    expect(navigateToAgentMock).toHaveBeenCalledWith({ serverId: "host-1", agentId: "agent-1" });
+    expect(navigateToWorkspaceMock).toHaveBeenCalledWith({
+      serverId: "host-1",
+      workspaceId: "workspace-1",
+    });
+  });
+
+  it("keeps the capability stable until the rendering host changes", () => {
+    const { result, rerender } = renderHook(({ serverId }) => usePluginHostNavigation(serverId), {
+      initialProps: { serverId: "host-1" },
+    });
+    const initialNavigation = result.current;
+
+    rerender({ serverId: "host-1" });
+    expect(result.current).toBe(initialNavigation);
+
+    rerender({ serverId: "host-2" });
+    expect(result.current).not.toBe(initialNavigation);
+
+    act(() => result.current.openAgent({ agentId: "agent-2" }));
+    act(() => result.current.openWorkspace({ workspaceId: "workspace-2" }));
+    expect(navigateToAgentMock).toHaveBeenCalledWith({ serverId: "host-2", agentId: "agent-2" });
+    expect(navigateToWorkspaceMock).toHaveBeenCalledWith({
+      serverId: "host-2",
+      workspaceId: "workspace-2",
+    });
+  });
+});
@@ -0,0 +1,16 @@
+import type { PluginSurfaceProps } from "@getpaseo/plugin";
+import { useMemo } from "react";
+import { navigateToWorkspace } from "@/stores/navigation-active-workspace-store";
+import { navigateToAgent } from "@/utils/navigate-to-agent";
+
+export function usePluginHostNavigation(
+  serverId: string,
+): NonNullable<PluginSurfaceProps["navigation"]> {
+  return useMemo(
+    () => ({
+      openAgent: ({ agentId }) => navigateToAgent({ serverId, agentId }),
+      openWorkspace: ({ workspaceId }) => navigateToWorkspace({ serverId, workspaceId }),
+    }),
+    [serverId],
+  );
+}
@@ -0,0 +1,23 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { renderHook } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+
+vi.mock("./evaluate", () => ({
+  evaluatePluginClientBundle: vi.fn(),
+}));
+vi.mock("./composer-pills/lifecycle", () => ({
+  startPluginClientSide: vi.fn(),
+}));
+
+import { usePluginInstallations } from "./registry";
+
+it("keeps plugin installation selections stable while the registry is unchanged", () => {
+  const { result, rerender } = renderHook(() => usePluginInstallations("missing-plugin"));
+  const initialInstallations = result.current;
+
+  rerender();
+
+  expect(result.current).toBe(initialInstallations);
+});
@@ -1,4 +1,4 @@
-import { useSyncExternalStore } from "react";
+import { useMemo, useSyncExternalStore } from "react";
 import { QueryClient } from "@tanstack/react-query";
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import { startPluginClientSide } from "./composer-pills/lifecycle";
@@ -166,5 +166,6 @@ export function useInstalledPlugin(serverId: string, pluginId: string): Installe
 }

 export function usePluginInstallations(pluginId: string): InstalledPlugin[] {
-  return useInstalledPlugins().filter((plugin) => plugin.id === pluginId);
+  const installed = useInstalledPlugins();
+  return useMemo(() => installed.filter((plugin) => plugin.id === pluginId), [installed, pluginId]);
 }
@@ -13,6 +13,7 @@ import { useIsCompactFormFactor } from "@/constants/layout";
 import { useHostRuntimeClient, useHosts } from "@/runtime/host-runtime";
 import type { Theme } from "@/styles/theme";
 import type { ShortcutKey } from "@/utils/format-shortcut";
+import { usePluginHostNavigation } from "./host-navigation";
 import { resolvePluginIcon } from "./icons";
 import { toPluginTheme } from "./theme";
 import { useInstalledPlugin, usePluginInstallations } from "./registry";
@@ -66,9 +67,10 @@ function SurfaceRenderer({
  host: PluginSurfaceProps["host"];
  theme: PluginTheme;
 }) {
+  const navigation = usePluginHostNavigation(host.id);
  return (
    <PluginRuntimeBoundary plugin={plugin} runtime={runtime}>
-      <Surface theme={theme} host={host} layout={layout} />
+      <Surface theme={theme} host={host} layout={layout} navigation={navigation} />
    </PluginRuntimeBoundary>
  );
 }
@@ -18,6 +18,7 @@ import { useSessionStore } from "@/stores/session-store";
 import { useWorkspaceExists } from "@/stores/session-store-hooks";
 import type { Theme } from "@/styles/theme";
 import { normalizeWorkspaceOpaqueId } from "@/utils/workspace-identity";
+import { usePluginHostNavigation } from "../host-navigation";
 import { createPluginClientStateSource } from "../client-state/source";
 import { toPluginTheme } from "../theme";
 import { resolvePluginIcon } from "../icons";
@@ -63,6 +64,7 @@ function PluginPanelBody({ theme }: { theme: PluginTheme }) {
  const host = useMemo(() => ({ id: serverId, label: hostLabel }), [hostLabel, serverId]);
  const layout = useMemo(() => ({ compact, platform: resolvePlatform() }), [compact]);
  const stateSource = useMemo(() => createPluginClientStateSource(serverId), [serverId]);
+  const navigation = usePluginHostNavigation(serverId);

  if (!plugin || !contribution || !workspaceExists) {
    return <PluginPanelUnavailable />;
@@ -79,6 +81,7 @@ function PluginPanelBody({ theme }: { theme: PluginTheme }) {
      theme,
      host,
      layout,
+      navigation,
      workspaceId,
    };
    const Component = contribution.Component;
@@ -90,6 +93,7 @@ function PluginPanelBody({ theme }: { theme: PluginTheme }) {
      theme,
      host,
      layout,
+      navigation,
      workspaceId,
      agentId: target.agentId,
    };
@@ -508,6 +508,21 @@ describe("ReplicaCache", () => {
    ]);
  });

+  it("retries a timeline read invalidated by a concurrent directory commit", async () => {
+    const storage = new MemoryStorage();
+    const cache = createCache(storage);
+    cache.commitTimeline(SERVER_ID, "agent-1", timeline("Persisted timeline"));
+    await cache.flush();
+    storage.onRead = () => {
+      storage.onRead = null;
+      cache.commitDirectory(SERVER_ID, directory());
+    };
+
+    expect((await cache.readTimeline(SERVER_ID, "agent-1"))?.items).toEqual([
+      timelineItem("Persisted timeline"),
+    ]);
+  });
+
  it("rebuilds every directory row before restoring its checkpoint after eviction", async () => {
    const storage = new MemoryStorage();
    const cache = new ReplicaCache(storage, { ...noLegacyCleanup, maxBytes: 2_500 });
@@ -69,7 +69,7 @@ const TodoEntrySchema = z.strictObject({
 const TaskActivitySchema = z.discriminatedUnion("type", [
  z.strictObject({ type: z.literal("created"), count: z.number().int().nonnegative() }),
  z.strictObject({
-    type: z.enum(["added", "started", "completed", "reopened"]),
+    type: z.enum(["added", "started", "completed"]),
    task: z.string(),
  }),
 ]);
@@ -898,13 +898,15 @@ export class ReplicaCache {
    ids?: readonly string[],
  ): Promise<ReplicaRow[]> {
    if (!this.activeServerIds.has(serverId)) return [];
-    const revision = this.hostRevisions.get(serverId) ?? 0;
    try {
      await this.prepareStore();
-      await this.flush();
-      if (!this.canReadHostRevision(serverId, revision)) return [];
-      const rows = await this.rowStore.read(serverId, kinds, ids);
-      return this.canReadHostRevision(serverId, revision) ? rows : [];
+      while (this.activeServerIds.has(serverId)) {
+        await this.flush();
+        const revision = this.hostRevisions.get(serverId) ?? 0;
+        const rows = await this.rowStore.read(serverId, kinds, ids);
+        if (this.canReadHostRevision(serverId, revision)) return rows;
+      }
+      return [];
    } catch {
      return [];
    }
@@ -37,9 +37,8 @@ function navigateDeps(): NavigateToWorkspaceDeps {
    getSessionWorkspaces: (serverId) => useSessionStore.getState().sessions[serverId]?.workspaces,
    getSessionAgents: (serverId) =>
      useSessionStore.getState().sessions[serverId]?.agents.values() ?? [],
+    isWorkspaceLayoutHydrated: () => useWorkspaceLayoutStore.persist.hasHydrated(),
    openTab: (input) => useWorkspaceLayoutStore.getState().openTab(input),
-    pinAgent: (workspaceKey, agentId) =>
-      useWorkspaceLayoutStore.getState().pinAgent(workspaceKey, agentId),
    rememberLastWorkspace: (selection) => lastWorkspaceSelectionStore.remember(selection),
    navigateToRoute: (route) => {
      navigateToHostWorkspaceRoute(route);
@@ -14,6 +14,7 @@ import type { Agent, WorkspaceDescriptor } from "@/stores/session-store";
 interface RecordedTab {
  workspaceKey: string;
  target: WorkspaceTabTarget;
+  pin: boolean;
 }

 function createFakeDeps(overrides: Partial<NavigateToWorkspaceDeps> = {}) {
@@ -23,11 +24,11 @@ function createFakeDeps(overrides: Partial<NavigateToWorkspaceDeps> = {}) {
  const deps: NavigateToWorkspaceDeps = {
    getSessionWorkspaces: () => null,
    getSessionAgents: () => [] as Agent[],
-    openTab: ({ workspaceKey, target }) => {
-      openedTabs.push({ workspaceKey, target });
+    isWorkspaceLayoutHydrated: () => true,
+    openTab: ({ workspaceKey, target, pin = false }) => {
+      openedTabs.push({ workspaceKey, target, pin });
      return target.kind === "agent" ? target.agentId : null;
    },
-    pinAgent: () => undefined,
    rememberLastWorkspace: (selection) => remembered.push(selection),
    navigateToRoute: (route) => navigations.push(route),
    ...overrides,
@@ -97,6 +98,7 @@ describe("workspace navigation", () => {
      {
        workspaceKey: "server-1:workspace-a",
        target: { kind: "agent", agentId: "agent-1" },
+        pin: false,
      },
    ]);
  });
@@ -131,6 +133,7 @@ describe("workspace navigation", () => {
      {
        workspaceKey: "server-1:workspace-a",
        target: { kind: "draft", draftId: "draft-1" },
+        pin: false,
      },
    ]);
  });
@@ -153,6 +156,30 @@ describe("workspace navigation", () => {
    expect(navigations).toEqual(["/h/server-1/workspace/workspace-a?open=agent%3Aagent-1"]);
  });

+  it("defers an agent tab until persisted workspace layout has hydrated", () => {
+    const workspace = {
+      id: "workspace-a",
+      workspaceDirectory: "/repo/workspace-a",
+    } as WorkspaceDescriptor;
+    const { deps, navigations, openedTabs } = createFakeDeps({
+      getSessionWorkspaces: () => new Map([[workspace.id, workspace]]),
+      isWorkspaceLayoutHydrated: () => false,
+    });
+
+    navigateToWorkspace(
+      {
+        serverId: "server-1",
+        workspaceId: "workspace-a",
+        target: { kind: "agent", agentId: "agent-1" },
+        pin: true,
+      },
+      deps,
+    );
+
+    expect(openedTabs).toEqual([]);
+    expect(navigations).toEqual(["/h/server-1/workspace/workspace-a?open=agent%3Aagent-1"]);
+  });
+
  it("reads the active workspace from the current route", () => {
    const selection = parseActiveWorkspaceSelection({
      pathname: "/h/server-1/workspace/workspace-a",
@@ -34,6 +34,7 @@ export interface NavigateToWorkspaceInput {
 export interface NavigateToWorkspaceDeps extends PrepareWorkspaceTabDeps {
  getSessionWorkspaces: (serverId: string) => Map<string, WorkspaceDescriptor> | null | undefined;
  getSessionAgents: (serverId: string) => Iterable<Agent>;
+  isWorkspaceLayoutHydrated: () => boolean;
  rememberLastWorkspace: (selection: ActiveWorkspaceSelection) => void;
  navigateToRoute: (route: string) => void;
 }
@@ -90,8 +91,11 @@ export function navigateToWorkspace(
    workspaces,
    workspaceId: input.workspaceId,
  });
+  const shouldDeferAgentOpen = Boolean(
+    input.target?.kind === "agent" && (!resolvedWorkspaceId || !deps.isWorkspaceLayoutHydrated()),
+  );
  if (input.target) {
-    if (resolvedWorkspaceId || input.target.kind !== "agent") {
+    if (!shouldDeferAgentOpen) {
      prepareWorkspaceTab({ ...input, target: input.target }, deps);
    }
  } else {
@@ -111,7 +115,7 @@ export function navigateToWorkspace(
  }

  const route =
-    input.target?.kind === "agent" && !resolvedWorkspaceId
+    input.target?.kind === "agent" && shouldDeferAgentOpen
      ? buildHostWorkspaceOpenRoute(
          input.serverId,
          input.workspaceId,
@@ -3092,7 +3092,7 @@ describe("workspace-layout-store actions", () => {
    expect(findPaneById(layout.root, "explorer")?.hidden).toBe(true);
  });

-  it("keeps pinned archived agents in memory per workspace without persisting them", () => {
+  it("keeps explicitly opened pinned agents in memory per workspace without persisting them", () => {
    const workspaceKey = createWorkspaceKey();
    const otherWorkspaceKey = buildWorkspaceTabPersistenceKey({
      serverId: SERVER_ID,
@@ -3102,9 +3102,18 @@ describe("workspace-layout-store actions", () => {
    expect(otherWorkspaceKey).toBeTruthy();

    const store = workspaceLayoutStore.getState();
-    store.pinAgent(workspaceKey, "agent-1");
-    store.pinAgent(workspaceKey, "agent-1");
-    store.pinAgent(otherWorkspaceKey as string, "agent-2");
+    store.openTab({
+      workspaceKey,
+      target: { kind: "agent", agentId: "agent-1" },
+      intent: "reveal",
+      pin: true,
+    });
+    store.openTab({
+      workspaceKey: otherWorkspaceKey as string,
+      target: { kind: "agent", agentId: "agent-2" },
+      intent: "reveal",
+      pin: true,
+    });

    let state = workspaceLayoutStore.getState();
    expect(Array.from(state.pinnedAgentIdsByWorkspace[workspaceKey] ?? [])).toEqual(["agent-1"]);
@@ -3122,13 +3131,7 @@ describe("workspace-layout-store actions", () => {

    const partialize = workspaceLayoutStore.persist.getOptions().partialize;
    expect(partialize).toBeTypeOf("function");
-    expect(partialize?.(state)).toEqual({
-      layoutByWorkspace: {},
-      splitSizesByWorkspace: {},
-      explorerSidebarWidthByWorkspace: {},
-      explorerPaneIdByWorkspace: {},
-      sidePaneIdByWorkspace: {},
-    });
+    expect(partialize?.(state)).not.toHaveProperty("pinnedAgentIdsByWorkspace");
  });

  it("keeps hidden agent intents in memory per workspace without persisting them", () => {
@@ -3653,14 +3656,19 @@ describe("workspace-layout-store actions", () => {
    ]);
  });

-  it("pinning an agent clears hidden intent", () => {
+  it("opening a pinned agent clears hidden intent", () => {
    const workspaceKey = createWorkspaceKey();
    const store = workspaceLayoutStore.getState();

    store.hideAgent(workspaceKey, "agent-1");
    expect(workspaceLayoutStore.getState().hiddenAgentIdsByWorkspace[workspaceKey]).toBeDefined();

-    store.pinAgent(workspaceKey, "agent-1");
+    store.openTab({
+      workspaceKey,
+      target: { kind: "agent", agentId: "agent-1" },
+      intent: "reveal",
+      pin: true,
+    });

    const state = workspaceLayoutStore.getState();
    expect(state.hiddenAgentIdsByWorkspace[workspaceKey]).toBeUndefined();
@@ -3675,8 +3683,8 @@ describe("workspace-layout-store actions", () => {
      workspaceKey: workspaceKey,
      target: { kind: "agent", agentId: "archived-agent" },
      intent: "reveal",
+      pin: true,
    });
-    store.pinAgent(workspaceKey, "archived-agent");
    store.reconcileTabs(workspaceKey, {
      agentsHydrated: true,
      terminalsHydrated: true,
@@ -3730,8 +3738,8 @@ describe("workspace-layout-store actions", () => {
      workspaceKey: workspaceKey,
      target: { kind: "agent", agentId: "archived-agent" },
      intent: "reveal",
+      pin: true,
    });
-    store.pinAgent(workspaceKey, "archived-agent");
    store.reconcileTabs(workspaceKey, {
      agentsHydrated: true,
      terminalsHydrated: true,
@@ -3749,6 +3757,48 @@ describe("workspace-layout-store actions", () => {
    ).toEqual(["agent_archived-agent"]);
  });

+  it("atomically reveals, focuses, and pins an archived agent against reconciliation", () => {
+    const workspaceKey = createWorkspaceKey();
+    const store = workspaceLayoutStore.getState();
+    store.openTab({
+      workspaceKey,
+      target: { kind: "agent", agentId: "first-agent" },
+      intent: "reveal",
+    });
+    store.openTab({
+      workspaceKey,
+      target: { kind: "agent", agentId: "second-agent" },
+      intent: "reveal",
+    });
+    store.hideAgent(workspaceKey, "archived-agent");
+
+    const archivedTabId = store.openTab({
+      workspaceKey,
+      target: { kind: "agent", agentId: "archived-agent" },
+      intent: "reveal",
+      pin: true,
+    });
+    store.reconcileTabs(workspaceKey, {
+      agentsHydrated: true,
+      terminalsHydrated: true,
+      activeAgentIds: ["first-agent", "second-agent"],
+      autoOpenAgentIds: ["first-agent", "second-agent"],
+      knownAgentIds: ["first-agent", "second-agent"],
+      standaloneTerminalIds: [],
+    });
+
+    const state = workspaceLayoutStore.getState();
+    const layout = state.layoutByWorkspace[workspaceKey];
+    expect(contentTabs(state.getWorkspaceTabs(workspaceKey)).map((tab) => tab.tabId)).toContain(
+      archivedTabId,
+    );
+    expect(findPaneById(layout.root, layout.focusedPaneId)?.focusedTabId).toBe(archivedTabId);
+    expect(Array.from(state.pinnedAgentIdsByWorkspace[workspaceKey] ?? [])).toContain(
+      "archived-agent",
+    );
+    expect(state.hiddenAgentIdsByWorkspace[workspaceKey]).toBeUndefined();
+  });
+
  it("retargeting a tab to an agent clears hidden intent", () => {
    const workspaceKey = createWorkspaceKey();
    const store = workspaceLayoutStore.getState();
@@ -95,6 +95,8 @@ export interface OpenWorkspaceTabInput {
  workspaceKey: string;
  target: WorkspaceTabTarget;
  intent: WorkspaceTabOpenIntent;
+  /** Keeps an explicitly opened agent visible even when it is archived. */
+  pin?: boolean;
  placement?: WorkspaceTabPlacement;
  parentTabId?: string;
  state?: JsonValue;
@@ -159,7 +161,6 @@ interface WorkspaceLayoutStore {
  resizeSplit: (workspaceKey: string, groupId: string, sizes: number[]) => void;
  resizeExplorerSidebar: (workspaceKey: string, width: number) => void;
  reorderTabsInPane: (workspaceKey: string, paneId: string, tabIds: string[]) => void;
-  pinAgent: (workspaceKey: string, agentId: string) => void;
  unpinAgent: (workspaceKey: string, agentId: string) => void;
  hideAgent: (workspaceKey: string, agentId: string) => void;
  unhideAgent: (workspaceKey: string, agentId: string) => void;
@@ -811,6 +812,7 @@ export function createWorkspaceLayoutStore(
            placement.explorerSidebarPaneId,
            placement.layout.focusedPaneId,
          );
+          const shouldPinAgent = input.pin === true && normalizedTarget.kind === "agent";
          set((state) => ({
            ...withoutFocusRestoration(state, normalizedWorkspaceKey),
            hiddenAgentIdsByWorkspace:
@@ -821,6 +823,20 @@ export function createWorkspaceLayoutStore(
                    normalizedWorkspaceKey,
                    normalizedTarget.agentId,
                  ),
+            pinnedAgentIdsByWorkspace: shouldPinAgent
+              ? addAgentIdToWorkspaceSet(
+                  state.pinnedAgentIdsByWorkspace,
+                  normalizedWorkspaceKey,
+                  normalizedTarget.agentId,
+                )
+              : state.pinnedAgentIdsByWorkspace,
+            pendingAgentIdsByWorkspace: shouldPinAgent
+              ? addAgentIdToWorkspaceSet(
+                  state.pendingAgentIdsByWorkspace,
+                  normalizedWorkspaceKey,
+                  normalizedTarget.agentId,
+                )
+              : state.pendingAgentIdsByWorkspace,
            layoutByWorkspace: {
              ...state.layoutByWorkspace,
              [normalizedWorkspaceKey]: input.parentTabId
@@ -1639,46 +1655,6 @@ export function createWorkspaceLayoutStore(
            };
          });
        },
-        pinAgent: (workspaceKey, agentId) => {
-          const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
-          const normalizedAgentId = trimNonEmpty(agentId);
-          if (!normalizedWorkspaceKey || !normalizedAgentId) {
-            return;
-          }
-
-          set((state) => {
-            const currentPinnedAgentIds =
-              state.pinnedAgentIdsByWorkspace[normalizedWorkspaceKey] ?? null;
-            const currentPendingAgentIds =
-              state.pendingAgentIdsByWorkspace[normalizedWorkspaceKey] ?? null;
-            if (
-              currentPinnedAgentIds?.has(normalizedAgentId) &&
-              currentPendingAgentIds?.has(normalizedAgentId)
-            ) {
-              return state;
-            }
-
-            const nextPinnedAgentIds = new Set(currentPinnedAgentIds ?? []);
-            nextPinnedAgentIds.add(normalizedAgentId);
-
-            return {
-              hiddenAgentIdsByWorkspace: removeAgentIdFromWorkspaceSet(
-                state.hiddenAgentIdsByWorkspace,
-                normalizedWorkspaceKey,
-                normalizedAgentId,
-              ),
-              pinnedAgentIdsByWorkspace: {
-                ...state.pinnedAgentIdsByWorkspace,
-                [normalizedWorkspaceKey]: nextPinnedAgentIds,
-              },
-              pendingAgentIdsByWorkspace: addAgentIdToWorkspaceSet(
-                state.pendingAgentIdsByWorkspace,
-                normalizedWorkspaceKey,
-                normalizedAgentId,
-              ),
-            };
-          });
-        },
        unpinAgent: (workspaceKey, agentId) => {
          const normalizedWorkspaceKey = trimNonEmpty(workspaceKey);
          const normalizedAgentId = trimNonEmpty(agentId);
@@ -138,6 +138,103 @@ describe("viewed timeline persistence", () => {
    owner.dispose();
  });

+  it("paints cached rows without replacing a live head that arrives during preparation", async () => {
+    useSessionStore.getState().initializeSession(SERVER_ID, null);
+    let release!: (value: CachedTimeline) => void;
+    const read = new Promise<CachedTimeline>((resolve) => {
+      release = resolve;
+    });
+    const replica = createTimelineReplica({
+      serverId: SERVER_ID,
+      storage: {
+        readTimeline: () => read,
+        commitTimeline: () => undefined,
+      },
+      prepareAgent: async () => undefined,
+    });
+
+    const preparation = replica.prepare(AGENT_ID);
+    useSessionStore.getState().setAgentStreamState(SERVER_ID, AGENT_ID, {
+      head: [item("live", "live", 5)],
+    });
+    release(cachedTimeline());
+    await preparation;
+
+    expect(replica.readCursor(AGENT_ID)).toEqual({ epoch: "epoch-1", endSeq: 4 });
+    expect(
+      selectAgentTimelineState(useSessionStore.getState().sessions[SERVER_ID], AGENT_ID),
+    ).toEqual({ status: "painted", items: cachedTimeline().items });
+    expect(useSessionStore.getState().sessions[SERVER_ID]?.agentStreamHead.get(AGENT_ID)).toEqual([
+      item("live", "live", 5),
+    ]);
+  });
+
+  it("reconciles a live head that overlaps the cached canonical timeline", async () => {
+    useSessionStore.getState().initializeSession(SERVER_ID, null);
+    let release!: (value: CachedTimeline) => void;
+    const read = new Promise<CachedTimeline>((resolve) => {
+      release = resolve;
+    });
+    const replica = createTimelineReplica({
+      serverId: SERVER_ID,
+      storage: {
+        readTimeline: () => read,
+        commitTimeline: () => undefined,
+      },
+      prepareAgent: async () => undefined,
+    });
+
+    const preparation = replica.prepare(AGENT_ID);
+    useSessionStore.getState().setAgentStreamState(SERVER_ID, AGENT_ID, {
+      head: [item("cached", "cached", 4), item("live", "live", 5)],
+    });
+    release(cachedTimeline());
+    await preparation;
+
+    const session = useSessionStore.getState().sessions[SERVER_ID];
+    expect([
+      ...(session?.agentStreamTail.get(AGENT_ID) ?? []),
+      ...(session?.agentStreamHead.get(AGENT_ID) ?? []),
+    ]).toEqual([item("cached", "cached", 4), item("live", "live", 5)]);
+    expect(replica.readCursor(AGENT_ID)).toEqual({ epoch: "epoch-1", endSeq: 4 });
+  });
+
+  it("reconciles cached rows with a non-authoritative timeline painted during preparation", async () => {
+    useSessionStore.getState().initializeSession(SERVER_ID, null);
+    let release!: (value: CachedTimeline) => void;
+    const read = new Promise<CachedTimeline>((resolve) => {
+      release = resolve;
+    });
+    const replica = createTimelineReplica({
+      serverId: SERVER_ID,
+      storage: {
+        readTimeline: () => read,
+        commitTimeline: () => undefined,
+      },
+      prepareAgent: async () => undefined,
+    });
+
+    const preparation = replica.prepare(AGENT_ID);
+    useSessionStore.getState().applyAgentTimelineResponseState(SERVER_ID, AGENT_ID, {
+      items: [item("live", "live", 5)],
+      head: [],
+      range: null,
+      older: "none",
+      newer: false,
+      synchronized: false,
+      acknowledgedClientMessageIds: [],
+    });
+    release(cachedTimeline());
+    await preparation;
+
+    const session = useSessionStore.getState().sessions[SERVER_ID];
+    expect([
+      ...(session?.agentStreamTail.get(AGENT_ID) ?? []),
+      ...(session?.agentStreamHead.get(AGENT_ID) ?? []),
+    ]).toEqual([item("cached", "cached", 4), item("live", "live", 5)]);
+    expect(replica.readCursor(AGENT_ID)).toEqual({ epoch: "epoch-1", endSeq: 4 });
+  });
+
  it("persists accepted live stream commits through the owner", () => {
    useSessionStore.getState().initializeSession(SERVER_ID, null);
    applySynced(AGENT_ID, 8);
@@ -27,6 +27,7 @@ import {
 } from "./session-stream-reducers";
 import { isTimelineResumeSnapshotAuthoritative } from "./timeline-sync-plan";
 import { createInstalledTimelineTransform, type TimelineItemTransform } from "@/plugins/timeline";
+import { replaceWithCanonicalStream } from "@/types/stream";

 const PLUGIN_TIMELINE_REPROJECTION_DELAY_MS = 50;

@@ -50,21 +51,41 @@ async function prepareCachedTimeline(input: {
  if (!stored) return undefined;
  const session = useSessionStore.getState().sessions[input.serverId];
  const currentTimeline = selectAgentTimelineState(session, input.agentId);
-  if (session?.agentStreamHead.get(input.agentId) !== beforeHead) return undefined;
-  if (beforeTimeline.status === "painted") {
-    return currentTimeline.status === "painted" && currentTimeline.items === beforeTimeline.items
-      ? stored
-      : undefined;
+  const currentHead = session?.agentStreamHead.get(input.agentId);
+  if (currentTimeline.status === "synced") return undefined;
+  if (!stored.range) {
+    if (currentHead !== beforeHead) return undefined;
+    if (beforeTimeline.status === "painted") {
+      return currentTimeline.status === "painted" && currentTimeline.items === beforeTimeline.items
+        ? stored
+        : undefined;
+    }
+    if (currentTimeline.status !== "cold") return undefined;
  }
-  if (currentTimeline.status !== "cold") return undefined;
+  const liveItems =
+    currentTimeline.status === "painted"
+      ? [...currentTimeline.items, ...(currentHead ?? [])]
+      : (currentHead ?? []);
+  const replacement = stored.range
+    ? replaceWithCanonicalStream({
+        canonical: stored.items,
+        previousTail: [],
+        previousHead: liveItems,
+        sendingClientMessageIds: getSendingClientMessageIds(
+          session?.messageSubmissions.get(input.agentId),
+        ),
+        preserveContinuity: true,
+        canonicalCoverage: stored.range,
+      })
+    : { tail: stored.items, head: liveItems, acknowledgedClientMessageIds: [] };
  useSessionStore.getState().applyAgentTimelineResponseState(input.serverId, input.agentId, {
-    items: stored.items,
-    head: [],
+    items: replacement.tail,
+    head: replacement.head,
    range: stored.range,
    older: stored.hasOlder ? "available" : "none",
    newer: false,
    synchronized: false,
-    acknowledgedClientMessageIds: [],
+    acknowledgedClientMessageIds: replacement.acknowledgedClientMessageIds,
  });
  return stored;
 }
@@ -66,7 +66,7 @@ describe("tool-call presentation", () => {
    });

    expect(presentation).toMatchObject({
-      displayName: "Exec Command",
+      displayName: "Exec command",
      icon: fakeIcons.wrench,
      isLoadingDetails: true,
      hasDetails: false,
@@ -924,7 +924,7 @@ describe("stream reducer canonical tool calls", () => {
      detail: tool.payload.data.detail,
    });
    assert.strictEqual(display.summary, undefined);
-    assert.strictEqual(display.displayName, "Exec Command");
+    assert.strictEqual(display.displayName, "Exec command");
  });

  it("preserves early input when later updates contain null input", () => {
@@ -1094,6 +1094,30 @@ describe("stream reducer canonical tool calls", () => {
    ]);
  });

+  it("reports new work after completed tasks without reopening anything", () => {
+    const state = hydrateStreamState([
+      {
+        event: todoTimeline([
+          { id: "0", text: "Finish old work", completed: true, status: "completed" },
+          { id: "1", text: "Verify old work", completed: true, status: "completed" },
+        ]),
+        timestamp: new Date("2025-01-01T10:50:00Z"),
+      },
+      {
+        event: todoTimeline([
+          { id: "0", text: "Investigate unrelated bug", completed: false, status: "in_progress" },
+          { id: "1", text: "Write unrelated test", completed: false, status: "pending" },
+        ]),
+        timestamp: new Date("2025-01-01T10:51:00Z"),
+      },
+    ]);
+
+    expect(state.flatMap((item) => (item.kind === "todo_list" ? [item.activity] : []))).toEqual([
+      { type: "created", count: 2 },
+      { type: "started", task: "Investigate unrelated bug" },
+    ]);
+  });
+
  it("groups consecutive initial Claude TaskCreate snapshots", () => {
    const state = hydrateStreamState([
      {
@@ -799,7 +799,7 @@ export interface TodoEntry {

 export type TaskActivity =
  | { type: "created"; count: number }
-  | { type: "added" | "started" | "completed" | "reopened"; task: string };
+  | { type: "added" | "started" | "completed"; task: string };

 export interface TodoListItem {
  kind: "todo_list";
@@ -1307,8 +1307,6 @@ function deriveTaskActivities(
    if (before === after) continue;
    if (after === "completed") {
      activities.push({ type: "completed", task: task.text });
-    } else if (before === "completed") {
-      activities.push({ type: "reopened", task: task.text });
    } else if (after === "in_progress") {
      activities.push({ type: "started", task: task.text });
    }
@@ -15,9 +15,9 @@ export interface PrepareWorkspaceTabDeps {
    workspaceKey: string;
    target: WorkspaceTabTarget;
    intent: "reveal";
+    pin?: boolean;
    placement?: WorkspaceTabPlacement;
  }) => string | null;
-  pinAgent: (workspaceKey: string, agentId: string) => void;
 }

 function getPreparedTarget(target: WorkspaceTabTarget): WorkspaceTabTarget {
@@ -38,9 +38,11 @@ export function prepareWorkspaceTab(
      workspaceId: input.workspaceId,
    }) ?? "";

-  deps.openTab({ workspaceKey: key, target, intent: "reveal", placement: input.placement });
-
-  if (input.pin && target.kind === "agent") {
-    deps.pinAgent(key, target.agentId);
-  }
+  deps.openTab({
+    workspaceKey: key,
+    target,
+    intent: "reveal",
+    pin: input.pin === true && target.kind === "agent",
+    placement: input.placement,
+  });
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mohamed Boudra	c56638ea8c	chore(release): cut 0.7.0	2026-08-31 19:25:32 +02:00
Mohamed Boudra	185ab3f300	docs: prepare v0.7.0 changelog	2026-08-31 19:20:58 +02:00
Matt Cowger	1694828275	fix(opencode): show child session prompts (#4055 ) Show OpenCode child-session user prompts even when the text part has no completion timestamp.	2026-08-31 18:35:28 +02:00
ElliotWu Claude Sonnet 5 Mohamed Boudra	74a377ff6a	fix(server): keep daemon alive when JSONL RPC stdin hits EPIPE (#4048 ) * fix(server): keep daemon alive when JSONL RPC stdin hits EPIPE A dead Claude/OMP child currently turns stdin.write() EPIPE into uncaughtException and kills the daemon. Catch the write, listen for stdin errors, and close that transport instead. Closes #4047 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> * test(server): reproduce JSONL RPC stdin EPIPE * test(server): gate native EPIPE fixture on POSIX --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>	2026-08-31 15:35:34 +02:00
Mohamed Boudra	63923fdd07	Keep Android timeline still when tapping text (#4090 ) * fix(android): keep timeline still when tapping text Selectable Android text takes touch focus. React Native then scrolls focused children using untransformed coordinates, which moves inverted timelines even though the user did not scroll.\n\nSkip that auto-scroll only for touch-focused, selectable, non-editable text in inverted vertical scroll views, preserving normal focus navigation and editable inputs. * test(e2e): isolate PR pane fixtures from bots	2026-08-31 12:10:40 +02:00
Mohamed Boudra	11e76f6655	fix(server): resume agents cleanly after failed turns Track each foreground run start as pending, started, or failed so a previous turn error cannot reject a newly accepted prompt. Includes a regression for resuming after a failed turn.	2026-08-31 12:10:34 +02:00
Mohamed Boudra	4a3e6dea63	Increase mobile content text to 16px (#4111 ) Keep mobile interface chrome at 15px while defaulting readable content to 16px. Migrate existing mobile 15px content preferences once while preserving later explicit choices.	2026-08-31 11:58:42 +02:00
paseo-ai[bot]	f35d860725	fix: update lockfile signatures and Nix hash [skip ci]	2026-08-31 08:17:46 +00:00
Mohamed Boudra	95f4eb7577	chore(release): cut 0.7.0-beta.3	2026-08-31 09:52:59 +02:00
Mohamed Boudra	fcd81f591e	chore(release): carry forward 0.7.0-beta.2 version	2026-08-31 09:46:56 +02:00
Mohamed Boudra	b0fe4efc8c	docs: add v0.7.0-beta.3 changelog	2026-08-31 09:45:26 +02:00
Mohamed Boudra	f2f93087ed	docs(website): refresh product comparisons Reframe the pages around verified product differences while emphasizing local ownership, privacy, extensibility, and deployment flexibility.	2026-08-30 23:48:54 +02:00
Mohamed Boudra	73a5e6c63e	feat(website): expand homepage product story	2026-08-30 23:48:54 +02:00
Mohamed Boudra	fa53ba8f93	feat(website): refine responsive product mockups Keep desktop and mobile scenes visually consistent while improving phone depth, diff realism, alignment, and interaction polish.	2026-08-30 23:48:54 +02:00
Mohamed Boudra	375e9b3e53	feat(website): rebuild homepage product mockups Replace static captures with live, responsive scenes that demonstrate building, reviewing, shipping, and extending work across desktop and mobile.	2026-08-30 23:48:54 +02:00
Mohamed Boudra	adf80a9fe0	Keep Hub daemon access explicit (#4088 ) * feat(hub): make daemon authority explicit Connecting a daemon establishes presence without granting execution. Hub authority now uses semantic session permissions, with workflow execution granted explicitly and inspectable through the normal session protocol. Attention frames remain part of the existing agent and terminal subscriptions, keeping session output solicited. * test(server): match sentence-case tool labels	2026-08-30 22:46:24 +02:00
Mohamed Boudra	8533c5c06f	fix(app): keep expanded composer above keyboard (#4051 ) Allow the composer constraint chain to shrink inside KeyboardDock so overlong drafts scroll internally without hiding controls behind the IME. Extend the Android keyboard invariant to cover the maximum-height case.	2026-08-30 18:19:52 +02:00
Mohamed Boudra	b1050d9bed	feat(cli): simplify Hub login and export triggers (#4050 )	2026-08-30 14:11:19 +02:00
Mohamed Boudra	5e561f8a23	fix(android): release communication route after dictation (#4069 ) Stopping capture abandoned audio focus but left Android's communication mode and selected device owned by Paseo, which could keep Bluetooth audio on its narrow-band call route without an active microphone. Release and reacquire the complete route with the audio session, and prevent idle device callbacks from restoring it.	2026-08-30 11:42:29 +02:00
Mohamed Boudra	ce335de1cd	Make Paseo tool calls readable (#4066 ) Present Paseo-owned prompts, inputs, and results as readable provider-neutral sections with sentence-case labels, backed by focused tests and real-provider UI verification.	2026-08-30 11:02:29 +02:00
Mohamed Boudra	6688c92bc6	fix(app): stop calling new agent work reopened (#4068 ) Task snapshots reuse identities after completed work, so backward status transitions do not prove that an old task resumed. Report active work as started and keep pending work in the current task snapshot instead of inventing a reopened event.	2026-08-30 10:55:19 +02:00
Mohamed Boudra	8cf5942a5f	fix(app): keep web composer focused after submit (#4067 ) The keyboard-sync change needed submission blur to dismiss the native keyboard, but applying it to every platform interrupted consecutive keyboard-driven messages on web and desktop. Keep submission blur native-only.	2026-08-30 10:50:20 +02:00
Mohamed Boudra	9113542c5a	fix(dictation): finalize recordings with abandoned partials (#4065 ) Mid-stream silence clearing can leave a non-final partial whose segment will never commit. Treat those partials as UI-only once all requested commits settle so retries of the same recording can complete instead of timing out forever.	2026-08-30 10:29:25 +02:00
Mohamed Boudra	2618686677	fix(app): stabilize image lightbox gestures (#4064 ) Android reports one terminal pinch update with a stale two-pointer count after a finger has lifted. Track the real touch lifecycle so that shifted focal point cannot move the image on release.\n\nKeep initial presentation padding separate from the full zoom canvas, and make double-tap reset and outside-image dismissal consistent across native and web.	2026-08-30 09:15:20 +02:00
Mohamed Boudra	86ef468003	fix(app): make image lightbox gestures work on Android (#4049 ) Chat image previews render in a native Modal outside the app gesture root, so their controls worked while pinch gestures never activated. Give native lightboxes their own gesture root, keep the web modal on a normal view root, and ignore Android's terminal one-pointer pinch update to prevent release jumps.	2026-08-29 23:46:20 +02:00
yz	0dad1d7a61	fix(app): use popout scrolling on iPad desktop (#3992 ) Fix native wide-layout model selectors mounting bottom-sheet scrolling outside a bottom sheet. Keep the scrolling policy with the model browser and cover native compact, native wide, and web surfaces.	2026-08-29 23:10:47 +02:00
Mohamed Boudra	63587a9c03	feat(server): establish semantic session permissions (#3981 ) Keep trusted-client and Hub behavior stable while replacing RPC-name grants with a semantic authorization boundary. This establishes the operation inventory needed for future principal, pairing, and resource-scoped access work.	2026-08-29 22:40:20 +02:00
LiteandClaude Fable 5	a88aa49f4c	fix(quota): show Grok unified-billing usage as a weekly window (#4029 ) xAI moved Grok accounts to unified billing. The plain /v1/billing response now returns a zeroed legacy monthly shape (monthlyLimit.val 0), which rendered as "0 credits left" with no bar in Settings -> Usage. Fetch /v1/billing?format=credits — the same query the Grok CLI /usage command uses — and map creditUsagePercent + currentPeriod onto a usage window, matching the Claude/Codex weekly window convention. The legacy monthly-credits balance path is unchanged; unified-billing responses omit monthlyLimit/used, so it naturally yields no balance. Co-authored-by: Claude Fable 5 <noreply@anthropic.com>	2026-08-29 22:20:20 +02:00
Mohamed Boudra	eef9be8863	feat(app): add zoomable image previews (#4032 ) Image files now zoom in place, while timeline images open the existing lightbox. A shared viewport extracted from Mermaid keeps fit, focal zoom, pan bounds, and consumer toolbar actions consistent across content types.	2026-08-29 22:08:17 +02:00
Mohamed Boudra	650f3ca7f6	Reuse OpenCode helpers across ordinary agent sessions (#4009 ) * fix(opencode): reuse servers across agent sessions Paseo's always-present per-agent environment forced every OpenCode session onto a dedicated helper, multiplying cold starts and memory use. Route ordinary sessions through one shared helper while a daemon-owned session bridge preserves exact environment and caller-scoped tools; keep custom process environment and MCP configuration isolated. * fix(build): bundle the agent bridge from existing dependencies The helper package duplicated Zod and changed the fixed-output desktop dependency graph even though its tool wrapper was identity-only. Use the server's existing Zod runtime directly so packaged daemons can materialize the bridge without extra traced dependencies. * refactor(server): isolate provider runtime composition Keep provider-specific lifecycle and tool-catalog wiring behind an agent-owned runtime boundary so the generic daemon bootstrap remains provider-agnostic. The runtime now owns bridge startup, snapshot injection, and idempotent cleanup. * fix(desktop): prebundle the agent bridge plugin Packaged daemons run from an application archive where esbuild cannot spawn its binary. Produce the self-contained plugin during the server build and make compiled runtimes read that artifact; source-mode tests retain a gated compiler fallback.	2026-08-29 22:08:03 +02:00
Mohamed Boudra	b6bfdedf58	Fix archived agent navigation and recovery (#4033 ) * fix(app): preserve archived agent navigation Make explicit archived-agent opens one atomic layout command and defer them until persisted layout hydration. Use the provider's numeric active-session sentinel so recovery can complete. * fix(app): preserve timeline resume during hydration Paint persisted canonical rows with the current live head and retain their resume cursor. This prevents tail replay without dropping stream updates that arrive while replica storage loads. * fix(app): serialize replica reads with cache writes	2026-08-29 22:07:26 +02:00
Omer Cohenandpaseo-bot[bot]	1d4c3a2722	feat(plugin): add host navigation capabilities for plugin surfaces (#3901 ) * feat(plugin): add optional agent navigation capability * feat(plugin): extend host navigation capability * fix(plugin): preserve navigation tests after sdk rebase * fix(plugin): scope host navigation contracts --------- Co-authored-by: paseo-bot[bot] <266920839+paseo-bot[bot]@users.noreply.github.com>	2026-08-29 21:33:09 +02:00
Mohamed Boudra	6c813d1a91	fix(app): keep chat synchronized with keyboard (#4044 ) * fix(app): keep chat synchronized with keyboard Dock the complete chat surface with worklet-driven layout padding so visual and native touch geometry move together. Reset cleared multiline native inputs and keep autocomplete portals anchored to the docked composer. * fix(android): tolerate detached composer inputs Return the nullable base input connection during IME restart instead of force-unwrapping it after the composer has blurred or unmounted.	2026-08-29 21:27:41 +02:00
Mohamed Boudra	aeb240be98	fix(server): batch cold-start PR status polls (#4025 ) The initial retained poll could run before repository identity discovery settled, routing every workspace through the legacy per-target path. Defer each unresolved target independently and rejoin the shared polling grid once its identity is ready.	2026-08-29 12:23:47 +02:00
Mohamed Boudra	7080648e17	docs(website): publish terms and privacy policies (#4030 ) Separate the open-source app, optional relay, and hosted Hub so each service's obligations and data boundary are explicit.	2026-08-29 11:35:17 +02:00
Mohamed Boudra	463415ae84	fix(providers): tolerate slow Pi and OMP RPC startup (#4008 ) MCP and extension initialization can keep provider control-plane requests pending beyond 30 seconds even when the response will arrive. Use a configurable 60-second provider default and include the active RPC phase in timeout errors.	2026-08-29 00:00:41 +02:00
Mohamed Boudra	693280d996	fix(app): keep commits above the safe area (#4005 ) The bottom-anchored commits section did not consume the device inset, so Android system navigation covered its disclosure row. Keep the inset with the section that owns that edge.	2026-08-28 23:05:21 +02:00
Mohamed Boudra	3c6e4e39ec	feat(highlight): support Astro source files (#3997 ) Use one pure mixed-language parser for editor, source, and diff highlighting without pulling browser-only CodeMirror modules into the daemon.	2026-08-28 19:30:02 +02:00