fix(app): render mixed HTML headings without literal tags

Keep a matched heading together before splitting its image and text contents. Splitting first stranded the opening heading tag in a text slice without its closing tag.

.gitignore

@@ -93,3 +93,6 @@ app.json
 
 # Heap snapshots dumped by --heapsnapshot-near-heap-limit; keep them for debugging.
 *.heapsnapshot
+
+# Project-local Serena configuration and memories.
+.serena/

CLAUDE.md

@@ -54,7 +54,7 @@ At the start of non-trivial work, list `docs/` and skim anything relevant to the
 | [docs/qa.md](docs/qa.md)                                             | QA evidence bar for pull requests — platform matrix, version drift, performance, UI proof                                      |
 | [docs/mobile-testing.md](docs/mobile-testing.md)                     | Maestro and mobile test workflows                                                                                              |
 | [docs/mobile-panels.md](docs/mobile-panels.md)                       | Compact left/center/right panel ownership, worklet motion, gesture revisions, and Fabric constraints                           |
-| [docs/explorer-sidebar.md](docs/explorer-sidebar.md)                 | Explorer sidebar and ordinary side-pane host contracts, lifecycle, placement, and routing preferences                          |
+| [docs/explorer-sidebar.md](docs/explorer-sidebar.md)                 | Explorer sidebar, side-pane, and compact workspace sheet host contracts, lifecycle, placement, routing preferences             |
 | [docs/ad-hoc-daemon-testing.md](docs/ad-hoc-daemon-testing.md)       | Isolated in-process daemon test harness                                                                                        |
 | [docs/browser-capture-harness.md](docs/browser-capture-harness.md)   | Real-Electron browser screenshot harness and compositor-surface gotcha                                                         |
 | [docs/android.md](docs/android.md)                                   | App variants, local/cloud builds, EAS workflows, version codes, F-Droid source builds and store metadata                       |

docs/agent-lifecycle.md

@@ -151,11 +151,12 @@ lifecycle queue. Resume chooses its history or interactive purpose from the dura
 entering that queue. Shutdown must finish before the manager releases runtime ownership; a failed
 close retains the runtime for cleanup and blocks replacement through that close operation.
 
-Authoritative timeline catch-up can use a runtime-only `history` resume purpose. For Codex, that
-purpose initializes a temporary app-server, reads the persisted thread and child histories, and
-releases the process before returning. It never loads, resumes, or unarchives a native thread,
-including legacy records whose native archive failed. The retained history session contains only
-the read results. Interactive resume remains responsible for repairing a provider session archived
+Authoritative timeline catch-up can use a runtime-only `history` resume purpose. The retained
+history session contains only the read results and must release its provider process once replay
+finishes. Codex reads the persisted thread and child histories on a temporary app-server and never
+loads, resumes, or unarchives a native thread, including legacy records whose native archive failed.
+ACP providers spawn the CLI, replay the session through `session/load`, and terminate the process
+before returning. Interactive resume remains responsible for repairing a provider session archived
 outside Paseo while its Paseo agent is active.
 
 Provider session connection owns every process it spawns until the session is registered with
@@ -211,7 +212,7 @@ parentAgentId === thisAgent.id  AND  !archivedAt
 
 - **Provider subagents** are child executions owned by Claude, Codex, or OpenCode. They are not inserted into `AgentManager` as managed agents. Providers emit a separate descriptor and timeline stream through `agent.provider_subagents.*`; the client keeps that state outside the normal agent store and merges only the presentation rows into the track. A descriptor's optional `parentSubagentId` identifies its direct provider-subagent parent; an absent value identifies a direct child of the managed agent.
 
-Clicking either kind opens a workspace tab. A Paseo subagent tab is a normal interactive agent pane. A provider subagent tab is a read-only timeline pane with no composer, archive, detach, rewind, or fork actions. It shows its own direct children in a subagents track. Both panes use `AgentStreamView`, so message, reasoning, tool-call, and layout rendering stay identical.
+Clicking either kind opens a workspace tab. On compact layouts it opens in the [workspace sheet](explorer-sidebar.md#workspace-sheet) instead; the sheet hides the composer, and a Paseo subagent's sheet offers **Open as tab** to get it back. A Paseo subagent tab is a normal interactive agent pane. A provider subagent tab is a read-only timeline pane with no composer, archive, detach, rewind, or fork actions. It shows its own direct children in a subagents track. Both panes use `AgentStreamView`, so message, reasoning, tool-call, and layout rendering stay identical.
 
 Provider timelines use the same structural timeline item format but deliberately have a separate lifecycle and transport. A provider thread/session identifier is not a Paseo agent identifier, and closing its tab is always layout-only.
 

docs/development.md

@@ -311,6 +311,22 @@ frames non-stop, pinning ProMotion displays at 120Hz forever and draining the
 battery while the app is idle — so do not re-add it. The probe's visibility
 guards already prevent throttling from causing a false stall.
 
+### Desktop Linux hidden-window fallback
+
+On Wayland (seen on ChromeOS Linux) a window created with `show: false` can sit
+forever without a single compositor frame: the renderer loads and runs, but
+`ready-to-show` never fires, so the window is never shown and the app looks like
+it did not start while every process is alive. `showWindowWhenReady`
+(`packages/desktop/src/window/show-when-ready.ts`) shows the main window when
+the document finishes loading if the event has not arrived. The fallback is
+Linux-only; macOS and Windows keep waiting for `ready-to-show`.
+
+Run the startup regression on Linux with an isolated display:
+
+```bash
+xvfb-run -a npm run test:e2e:window-startup --workspace=@getpaseo/desktop
+```
+
 ### Daemon logs
 
 Check `$PASEO_HOME/daemon.log` for daemon logs. The default level is `info`; set

docs/explorer-sidebar.md

@@ -7,6 +7,7 @@ contracts.
 | ---------------- | ---------------------------- | ------------------------------------------ |
 | Explorer sidebar | Files and Changes navigation | Cmd+E shows or hides the dedicated dock    |
 | Side pane        | Ordinary workspace content   | Created and closed like any workspace pane |
+| Workspace sheet  | Compact look-ups             | Holds one tab; closes or becomes a tab     |
 
 ## Panel host contract
 
@@ -22,6 +23,24 @@ can move between Explorer and main panes.
 Keep panel implementations independent of either shell. `WorkspacePanelHost` owns mounting and
 retention, while each shell owns its tabs, focus, dragging, resizing, and shortcuts.
 
+## Workspace sheet
+
+On compact layouts, files and subagents open in a closable sheet over the workspace, so the tab
+switcher keeps only agents and terminals. A panel kind opts in with `compactSheet` in its manifest
+(`packages/app/src/panels/panel-manifest.ts`), and the layout store's `openTab` decides between
+sheet and tab, so callers open targets the same way on every layout. The sheet holds one ordinary
+`WorkspaceTab`, which is not persisted.
+
+The sheet is modal and covers the whole compact column, header included. It renders in the
+workspace tree rather than through `IsolatedBottomSheetModal`: its panel needs the navigator and
+every workspace provider an ordinary pane has, and a portal drops them
+([floating-panels.md Gotcha 7](floating-panels.md#gotcha-7--a-sheet-cannot-read-context-from-its-call-site)).
+
+A sheet holding unsaved work is never implicitly displaced; only its guarded close removes it.
+Moving its tab to another host remounts the panel, and the file editor keeps unsaved text in the
+mounted view, so the move would drop it. Widening the layout is the known exception: it still moves
+the sheet's tab into a pane, and edits the autosave has not started writing are lost.
+
 ## Explorer sidebar
 
 `packages/app/src/workspace-tabs/explorer-sidebar.ts` owns show, hide, toggle, and view selection.
@@ -62,7 +81,9 @@ lifecycle.
 
 `packages/app/src/workspace-tabs/open-beside.ts` owns content opened beside the user's work. The
 layout store remembers one ordinary pane per workspace. The first side open creates a full-height
-right split around the workspace root; later side opens reuse it.
+right split around the workspace root; later side opens reuse it. Only the `split-panes` layout
+mode opens beside. Compact and single-pane layouts (touch tablets) open the same target in the main
+pane, so callers never check whether splits render.
 
 Removing a pane clears its remembered id; a later side open creates a new pane. The last visible
 ordinary pane stays when its final tab closes and shows the New launcher. An empty workspace does

docs/floating-panels.md

@@ -304,7 +304,9 @@ track phase.
 
 All sheets use the app-wide Gorhom modal provider through `IsolatedBottomSheetModal`. This
 includes native centered dialogs: separate React Native Modals cannot present a root-owned
-sibling dialog over an existing iOS presenter.
+sibling dialog over an existing iOS presenter. The one exception is the
+[workspace sheet](explorer-sidebar.md#workspace-sheet), an in-tree Gorhom `BottomSheet` that hosts a
+whole workspace panel.
 
 The wrapper must give Gorhom an object ref. Gorhom accepts a callback ref at the React boundary
 but stores it in the modal queue and later reads `.current`; provider dismissal, replacement,

docs/glossary.md

@@ -21,6 +21,7 @@ Authoritative terminology. UI label wins. Don't invent synonyms; use what's here
 - **Repository / Remote** — Internal Git observations. They may produce mutable kind, branch, and project-grouping metadata but never the host-local project ID, root, display name, or workspace membership. No UI label.
 - **Sidebar items** — The configurable entries of the app sidebar, in two sections. Header: the rows at the head of the sidebar — New workspace, History, Search, Schedules, and plugin header items. Footer: the full-width rows between Add project and the footer icon row — Usage and plugin footer items. Add project and the icon row (Hosts, Help and support, Settings) are fixed and are not sidebar items. A plugin item may render several rows, such as one per bot; it is still one item that moves and hides as a block. Each section's order and visibility is one per-device preference (`AppSettings.sidebarNavItems`, `AppSettings.sidebarFooterItems`); every item may be off. UI: the Header and Footer cards on the Sidebar settings page. Code: `packages/app/src/sidebar-nav/model.ts` resolves a section, and the sidebar (`components/sidebar/sidebar-nav-rows.tsx`, the footer in `components/left-sidebar.tsx`) and the settings page (`screens/settings/sidebar/sidebar-nav-section.tsx`) read it through `useSidebarNavItems(section)`. Never hardcode one of these entries or add a second place that decides which ones show. Don't confuse with **Explorer sidebar**.
 - **Explorer sidebar** — The dedicated navigation dock containing the Files and Changes trees. UI: "Explorer sidebar". Code: `packages/app/src/workspace-tabs/explorer-sidebar.ts`; persisted pane identifiers retain the `explorer` spelling. See [explorer-sidebar.md](explorer-sidebar.md).
+- **Workspace sheet** — The compact sheet that holds one file or subagent tab over the workspace without adding it to the tab switcher. UI action: "Open as tab". Code: `sheetByWorkspace` in `packages/app/src/stores/workspace-layout-store.ts`, `WorkspaceSheetHost` (`packages/app/src/screens/workspace/workspace-sheet-host.tsx`). See [explorer-sidebar.md](explorer-sidebar.md#workspace-sheet).
 - **Side pane** — An ordinary right-side workspace pane used for content opened beside the user's work. It closes and participates in workspace splits like every other main-host pane. See [explorer-sidebar.md](explorer-sidebar.md#side-pane). Forbidden: "Side panel".
 - **Directory-backed surface** — A right-sidebar surface whose content is determined by the workspace's `cwd`, so two workspaces on the same directory see identical content: git diff/status, forge change-request info, file preview/explorer contents. Keyed by `(serverId, cwd)`, never `workspaceId`. See [architecture.md](architecture.md#right-sidebar-boundary-directory-backed-vs-workspace-owned).
 - **Workspace-owned state** — Per-workspace state that never leaks to a same-`cwd` sibling: tabs, agents, terminals, panes, title, plus review drafts, diff-mode overrides, composer attachments, and file-explorer open/expand state. Keyed by `workspaceId` (`cwd` only as a fallback for old payloads). See [architecture.md](architecture.md#right-sidebar-boundary-directory-backed-vs-workspace-owned).

docs/service-proxy.md

@@ -4,7 +4,7 @@ Paseo proxies HTTP traffic to services running inside your workspaces. Localhost
 
 ## How it works
 
-When a `paseo.json` script of `"type": "service"` starts, Paseo assigns it a local port and registers a route in the service proxy. Incoming requests whose `Host` header matches the script's generated hostname are forwarded to that port.
+When a `paseo.json` script of `"type": "service"` starts, Paseo assigns it a local port and registers a route in the service proxy. Incoming requests whose `Host` header matches the script's generated hostname are forwarded to that port. HTTP requests, WebSocket upgrades, and service health checks select the reachable IPv4 or IPv6 loopback address. Services can bind to `127.0.0.1` or `::1` without changing their proxy URL.
 
 The generated hostname is built from the script name, branch, and project:
 

packages/app/e2e/browser/add-project-flow.spec.ts

@@ -223,6 +223,7 @@ test.describe("Add Project command-center flow", () => {
 
     await page.keyboard.press("Enter");
     await expectAddProjectPage(page, "directory-search");
+    await expect(addProjectFlowInput(page)).toBeFocused();
     await page.keyboard.type(projectPickerFixture.fuzzyQuery);
     await expect(addProjectFlow(page)).toContainText(projectPickerFixture.projectName, {
       timeout: 30_000,

packages/app/e2e/browser/changes-first-edit.spec.ts

@@ -0,0 +1,122 @@
+import { appendFile } from "node:fs/promises";
+import path from "node:path";
+import type { Page } from "@playwright/test";
+import { test, expect } from "../support/fixtures";
+import { openChangesTreePanel } from "../support/helpers/workspace-tabs";
+
+function changesTree(page: Page) {
+  return page.getByTestId("changes-tree-panel").filter({ visible: true });
+}
+
+async function expectEmptyChanges(page: Page) {
+  await expect(changesTree(page).getByText("No changes to display", { exact: true })).toBeVisible();
+}
+
+async function editReadme(repoPath: string, text: string) {
+  await appendFile(path.join(repoPath, "README.md"), text);
+}
+
+async function expectReadmeChanges(page: Page, additions: number) {
+  await expect(changesTree(page).getByText("README.md", { exact: true })).toBeVisible({
+    timeout: 30_000,
+  });
+  await expect(changesTree(page)).toContainText(`+${additions}`);
+}
+
+async function openEmptyDiff(page: Page) {
+  await changesTree(page).getByTestId("changes-options-menu").click();
+  await page.getByTestId("changes-open-tab").click();
+  await expect(
+    page
+      .getByTestId("working-diff-panel")
+      .filter({ visible: true })
+      .getByText("No changes to display", { exact: true }),
+  ).toBeVisible();
+}
+
+async function expectReadmeDiff(page: Page, additions: number) {
+  await expect(
+    page.getByTestId("working-diff-panel").filter({ visible: true }).getByTestId("diff-file-0"),
+  ).toHaveAccessibleName(`README.md, +${additions}, -0`, { timeout: 30_000 });
+}
+
+async function openDiffFromNewTabMenu(page: Page) {
+  await page.getByTestId("workspace-new-tab-button").filter({ visible: true }).first().click();
+  await page.getByTestId("workspace-new-tab-menu-diff").filter({ visible: true }).first().click();
+  await expect(
+    page
+      .getByTestId("working-diff-panel")
+      .filter({ visible: true })
+      .getByText("No changes to display", { exact: true }),
+  ).toBeVisible();
+}
+
+async function refreshDiff(page: Page) {
+  await page
+    .getByTestId("working-diff-panel")
+    .filter({ visible: true })
+    .getByTestId("changes-refresh")
+    .click();
+}
+
+async function reloadWorkspace(page: Page) {
+  await page.reload();
+}
+
+test("Changes follows the first edit to a clean workspace without reloading", async ({
+  page,
+  withWorkspace,
+}) => {
+  const workspace = await withWorkspace();
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await workspace.navigateTo();
+  await openChangesTreePanel(page);
+  await expectEmptyChanges(page);
+
+  await editReadme(workspace.repoPath, "first edit\n");
+  await expectReadmeChanges(page, 1);
+
+  await editReadme(workspace.repoPath, "second edit\n");
+  await expectReadmeChanges(page, 2);
+});
+
+test("the full diff follows the first edit to a clean workspace without reloading", async ({
+  page,
+  withWorkspace,
+}) => {
+  const workspace = await withWorkspace();
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await workspace.navigateTo();
+  await openChangesTreePanel(page);
+  await expectEmptyChanges(page);
+  await openEmptyDiff(page);
+
+  await editReadme(workspace.repoPath, "first edit\n");
+  await expectReadmeDiff(page, 1);
+
+  await editReadme(workspace.repoPath, "second edit\n");
+  await expectReadmeDiff(page, 2);
+});
+
+test("a directly opened Diff tab follows the first edit without an active Changes tree", async ({
+  page,
+  withWorkspace,
+}) => {
+  const workspace = await withWorkspace();
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await workspace.navigateTo();
+  await openDiffFromNewTabMenu(page);
+
+  await editReadme(workspace.repoPath, "first edit\n");
+  await expectReadmeDiff(page, 1);
+
+  await editReadme(workspace.repoPath, "second edit\n");
+  await expectReadmeDiff(page, 2);
+
+  await refreshDiff(page);
+  await expectReadmeDiff(page, 2);
+  await reloadWorkspace(page);
+  await expectReadmeDiff(page, 2);
+  await editReadme(workspace.repoPath, "third edit\n");
+  await expectReadmeDiff(page, 3);
+});

packages/app/e2e/browser/chat-outline.spec.ts

@@ -25,6 +25,12 @@ import {
   expectReadingStreamedMarkdown,
 } from "../support/helpers/chat-outline";
 import { createCreationScenario } from "../support/helpers/creation";
+import {
+  attachPromptTimelineEvidence,
+  expectPromptsDrawnByPlugin,
+  expectVirtualizedPluginPromptVisible,
+  withPromptTimelinePlugin,
+} from "../support/helpers/plugin-timeline";
 import {
   expectTimelineAtMaximumScrollWithPromptVisible,
   expectTimelinePromptNotMounted,
@@ -105,6 +111,60 @@ test.describe("desktop chat outline", () => {
     }
   });
 
+  test("jumps to prompts a timeline plugin draws", async ({ page }) => {
+    test.setTimeout(180_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    try {
+      await withPromptTimelinePlugin(async () => {
+        await page.setViewportSize(WIDE_VIEWPORT);
+        await openAgentTimeline(page, agent);
+        await expectChatOutlinePrompts(page, 80);
+        await expectPromptsDrawnByPlugin(page);
+        await expectTimelinePromptNotMounted(page, agent.prompts[39]);
+
+        // Unloaded, then loaded, then near the newest edge.
+        await clickChatOutlineRowEdge(page, 40);
+        await expectTimelinePromptLandedBelowTop(page, agent.prompts[39]);
+        await attachPromptTimelineEvidence(page, test.info());
+        await clickChatOutlineRowEdge(page, 45);
+        await expectTimelinePromptLandedBelowTop(page, agent.prompts[44]);
+        await clickChatOutlineRowEdge(page, 78);
+        await expectTimelineAtMaximumScrollWithPromptVisible(page, agent.prompts[77]);
+        await expectPromptsDrawnByPlugin(page);
+      });
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
+  test("jumps to a loaded virtualized prompt a timeline plugin draws without fetching", async ({
+    page,
+  }) => {
+    test.setTimeout(180_000);
+    const agent = await seedLongMockAgentTimeline({ turns: 80 });
+    const prompt = agent.prompts[29]!;
+    try {
+      await withPromptTimelinePlugin(async () => {
+        const history = await holdOlderHistoryPages(page, agent);
+        await page.setViewportSize(WIDE_VIEWPORT);
+        await openAgentTimeline(page, agent);
+        await expectChatOutlinePrompts(page, 80);
+        await scrollThroughOlderHistoryPages(page, 2, history);
+        await scrollTimelineToNewestLoadedEdge(page);
+        await expectTimelinePromptNotMounted(page, prompt);
+        const requestsBeforeJump = history.requestCount();
+
+        await clickChatOutlineRowEdge(page, 30);
+        await expectTimelinePromptLandedBelowTop(page, prompt);
+        await expectVirtualizedPluginPromptVisible(page, prompt);
+        await attachPromptTimelineEvidence(page, test.info());
+        expect(history.requestCount()).toBe(requestsBeforeJump);
+      }, [prompt]);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+
   test.describe("with the whole conversation loaded", () => {
     let agent: LongTimelineAgent;
 

packages/app/e2e/browser/compact-workspace-sheet.spec.ts

@@ -0,0 +1,106 @@
+import { readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { expect, test } from "../support/fixtures";
+import { expectComposerVisible } from "../support/helpers/composer";
+import { installDaemonWebSocketGate } from "../support/helpers/daemon-websocket-gate";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+import { openSubagentFromCompactTrack, seedSubagent } from "../support/helpers/subagents";
+import {
+  closeWorkspaceSheet,
+  expectOpenTabCount,
+  openWorkspaceSheetAsTab,
+  expectDeclinedDiscardPrompt,
+  expectWorkspaceSheetAtSnap,
+  replaceWorkspaceSheetFileText,
+  selectTabFromSwitcher,
+  tapWorkspaceSheetBackdrop,
+  workspaceSheet,
+} from "../support/helpers/workspace-sheet";
+
+const FILE_LINK = "linked.ts:3";
+
+function promptMentioning(target: string): string {
+  return [
+    "Generate a title and a git branch name for a coding agent from the user prompt and attachments.",
+    "Return JSON only with fields 'title' and 'branch'.",
+    "",
+    "<user-prompt>",
+    `Open \`${target}\` now`,
+    "</user-prompt>",
+  ].join("\n");
+}
+
+test("compact opens files and subagents in a sheet, leaving the tabs for agents", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  const workspace = await seedMockAgentWorkspace({
+    repoPrefix: "compact-workspace-sheet-",
+    title: "Sheet parent",
+    initialPrompt: promptMentioning(FILE_LINK),
+  });
+  try {
+    const gate = await installDaemonWebSocketGate(page);
+    const linkedPath = path.join(workspace.cwd, "linked.ts");
+    await writeFile(linkedPath, "one\ntwo\nthree\n", "utf8");
+    const child = await seedSubagent(
+      { client: workspace.client, repoPath: workspace.cwd, workspaceId: workspace.workspaceId },
+      { parentId: workspace.agentId, title: "Sheet child" },
+    );
+    await openAgentRoute(page, { workspaceId: workspace.workspaceId, agentId: workspace.agentId });
+    await expectOpenTabCount(page, 1);
+
+    await test.step("a chat file link opens the file in a sheet", async () => {
+      const fileLink = page.getByText(FILE_LINK, { exact: true });
+      await expect(fileLink).toBeVisible({ timeout: 15_000 });
+      await fileLink.click();
+
+      const sheet = workspaceSheet(page, "linked.ts");
+      await expect(sheet).toBeVisible();
+      await expect(sheet.getByText("three")).toBeVisible();
+      await expectWorkspaceSheetAtSnap(page, "linked.ts");
+      await expect(sheet.getByRole("button", { name: "Open as tab" })).toHaveCount(0);
+      await expectOpenTabCount(page, 1);
+      await closeWorkspaceSheet(page, "linked.ts");
+    });
+
+    await test.step("a subagent opens in a sheet without its composer", async () => {
+      await openSubagentFromCompactTrack(page, child.id);
+
+      const sheet = workspaceSheet(page, child.title);
+      await expect(sheet).toBeVisible();
+      await expectWorkspaceSheetAtSnap(page, child.title);
+      await expect(sheet.getByRole("textbox", { name: "Message agent..." })).toHaveCount(0);
+      await expectOpenTabCount(page, 1);
+    });
+
+    await test.step("Open as tab promotes the subagent to a full tab", async () => {
+      await openWorkspaceSheetAsTab(page, child.title);
+      await expectOpenTabCount(page, 2);
+      await expectComposerVisible(page);
+    });
+
+    await test.step("a sheet with unsaved edits closes only through the guarded close", async () => {
+      await selectTabFromSwitcher(page, "Sheet parent");
+      await page.getByText(FILE_LINK, { exact: true }).click();
+      const sheet = workspaceSheet(page, "linked.ts");
+      await expect(sheet).toBeVisible();
+      // Hold the autosave so the edit stays unsaved.
+      gate.holdNextClientRequest("fs.file.write.request");
+      await replaceWorkspaceSheetFileText(page, "linked.ts", "edited in the sheet");
+      await gate.waitForHeldClientRequest();
+
+      await expectDeclinedDiscardPrompt(page, () => tapWorkspaceSheetBackdrop(page));
+      await expect(sheet.locator(".cm-content")).toHaveText("edited in the sheet");
+      await expectDeclinedDiscardPrompt(page, () =>
+        sheet.getByRole("button", { name: "Close" }).click(),
+      );
+      await expect(sheet.locator(".cm-content")).toHaveText("edited in the sheet");
+
+      gate.releaseHeldClientRequest();
+      await expect.poll(() => readFile(linkedPath, "utf8")).toBe("edited in the sheet");
+    });
+  } finally {
+    await workspace.cleanup();
+  }
+});

packages/app/e2e/browser/composer-email-mentions.spec.ts

@@ -4,6 +4,10 @@ import {
   expectComposerDraft,
   expectComposerVisible,
   fillComposerDraft,
+  enterComposerFullscreen,
+  exitComposerFullscreen,
+  resizeComposerViewport,
+  selectComposerDraftRange,
 } from "../support/helpers/composer";
 import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
 
@@ -53,3 +57,48 @@ for (const email of [
     }
   });
 }
+
+test("fullscreen mention keys edit the draft while inline keys still complete files", async ({
+  page,
+}) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-fullscreen-mention-",
+    title: "Fullscreen mention keys",
+  });
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    const draft = "First line\nSecond line\n@README";
+    await fillComposerDraft(page, draft);
+    await expect(fileSuggestions(page).getByText("README.md", { exact: true })).toBeVisible();
+    await enterComposerFullscreen(page);
+    await expect(fileSuggestions(page)).not.toBeVisible();
+    await selectComposerDraftRange(page, draft.length, draft.length);
+    await composerLocator(page).press("ArrowUp");
+    await expect
+      .poll(() =>
+        composerLocator(page).evaluate((element) => {
+          const input = element as HTMLTextAreaElement;
+          return input.selectionStart === input.selectionEnd && input.selectionStart < 23;
+        }),
+      )
+      .toBe(true);
+    await selectComposerDraftRange(page, draft.length, draft.length);
+    await composerLocator(page).press("Enter");
+    await expectComposerDraft(page, `${draft}\n`);
+    await exitComposerFullscreen(page);
+    await selectReadmeMention(page);
+    const commandDraft = "/cl\nSecond line\nThird line";
+    await fillComposerDraft(page, commandDraft);
+    await selectComposerDraftRange(page, 2, 2);
+    await composerLocator(page).press("ArrowRight");
+    await expect(fileSuggestions(page).getByText("/clear", { exact: true }).first()).toBeVisible();
+    await enterComposerFullscreen(page);
+    await expect(fileSuggestions(page)).not.toBeVisible();
+    await composerLocator(page).press("Enter");
+    await expectComposerDraft(page, "/cl\n\nSecond line\nThird line");
+  } finally {
+    await agent.cleanup();
+  }
+});

packages/app/e2e/browser/composer-whitespace.spec.ts

@@ -1,3 +1,5 @@
+import { createMockIdleAgent, openWorkspaceWithAgents } from "../support/helpers/archive-tab";
+import { seedWorkspace } from "../support/helpers/seed-client";
 import { expect, test, type Page } from "../support/fixtures";
 import {
   expectNearBottom,
@@ -5,7 +7,27 @@ import {
   waitForScrollableChat,
 } from "../support/helpers/agent-bottom-anchor";
 import { awaitAssistantMessage } from "../support/helpers/agent-stream";
-import { composerLocator, expectComposerVisible } from "../support/helpers/composer";
+import {
+  attachComposerTestImage,
+  pasteComposerTestImage,
+  enterComposerFullscreen,
+  exitComposerFullscreen,
+  resizeComposerViewport,
+  selectComposerDraftRange,
+  expectComposerDraftSelection,
+  expectComposerFullscreenControls,
+  sendComposerWithButton,
+  queueComposerWithButton,
+  configureComposerQueueSend,
+  activateRetainedComposerTab,
+  recordVisibleComposerGeometry,
+  expectNoCollapsedVisibleComposer,
+  expectAttachmentPill,
+  expectQueuedMessageButton,
+  startRunningMockAgent,
+  composerLocator,
+  expectComposerVisible,
+} from "../support/helpers/composer";
 import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
 
 async function composerHeight(page: Page): Promise<number> {
@@ -133,3 +155,300 @@ test("composer growth keeps a bottom-pinned chat at the bottom", async ({ page }
     await agent.cleanup();
   }
 });
+
+async function writeCompactDraft(page: Page, text: string): Promise<void> {
+  await composerLocator(page).fill(text);
+  await expect(composerLocator(page)).toHaveValue(text);
+}
+
+test("compact long drafts stop growing before the header", async ({ page }) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-cap-",
+    title: "Composer cap",
+  });
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    await writeCompactDraft(page, "A long draft line\n".repeat(40));
+    await expect.poll(() => composerHeight(page)).toBeLessThanOrEqual(160);
+  } finally {
+    await agent.cleanup();
+  }
+});
+
+test("compact fullscreen editing preserves the live draft and selection and stays open after send", async ({
+  page,
+}) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-fullscreen-",
+    title: "Fullscreen composer",
+  });
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    await attachComposerTestImage(page);
+    await expectAttachmentPill(page, "composer-image-attachment-pill");
+    await writeCompactDraft(page, "First line\nSecond line");
+    await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toHaveCount(0);
+    await writeCompactDraft(page, "First line\nSecond line\nThird line");
+    await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toBeVisible();
+    await writeCompactDraft(
+      page,
+      "A sentence with enough words to wrap across several rendered lines in a narrow input. ".repeat(
+        4,
+      ),
+    );
+    await expect(page.getByRole("button", { name: "Fullscreen", exact: true })).toBeVisible();
+    await selectComposerDraftRange(page, 4, 17);
+    await enterComposerFullscreen(page);
+    await expectComposerFullscreenControls(page);
+    await expectComposerDraftSelection(page, 4, 17);
+    await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(0);
+    await writeCompactDraft(page, "Edited fullscreen draft\nSecond line\nThird line");
+    await selectComposerDraftRange(page, 3, 12);
+    await exitComposerFullscreen(page);
+    await expect(composerLocator(page)).toHaveValue(
+      "Edited fullscreen draft\nSecond line\nThird line",
+    );
+    await expectComposerDraftSelection(page, 3, 12);
+    await expectAttachmentPill(page, "composer-image-attachment-pill");
+    await expect(composerLocator(page)).toBeFocused();
+    await enterComposerFullscreen(page);
+    await writeCompactDraft(page, "Short draft");
+    await expectComposerFullscreenControls(page);
+    await selectComposerDraftRange(page, 0, 5);
+    await resizeComposerViewport(page, "landscape");
+    await expectComposerFullscreenControls(page);
+    await expectComposerDraftSelection(page, 0, 5);
+    await expect(composerLocator(page)).toHaveValue("Short draft");
+    await expect(composerLocator(page)).toBeFocused();
+    await resizeComposerViewport(page, "portrait");
+    await sendComposerWithButton(page);
+    await expect(composerLocator(page)).toHaveValue("");
+    await expectComposerFullscreenControls(page);
+    await expect(page.getByRole("button", { name: "Send message", exact: true })).toBeDisabled();
+  } finally {
+    await agent.cleanup();
+  }
+});
+
+test("fullscreen submit rejection retains the editable draft and supports retry", async ({
+  page,
+}) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-fullscreen-retry-",
+    title: "Fullscreen retry",
+    featureValues: { mockPromptRejections: 1 },
+  });
+  const draft = "First line\nSecond line\nThird line";
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    await writeCompactDraft(page, draft);
+    await enterComposerFullscreen(page);
+    await sendComposerWithButton(page);
+    await expect(page.getByTestId("composer-fullscreen").getByRole("alert")).toHaveText(
+      "Requested mock prompt rejection",
+    );
+    await expect(composerLocator(page)).toHaveValue(draft);
+    await expect(composerLocator(page)).toBeEditable();
+    await expect(page.getByRole("button", { name: "Send message", exact: true })).toBeEnabled();
+    await sendComposerWithButton(page);
+    await expect(composerLocator(page)).toHaveValue("");
+    await expectComposerFullscreenControls(page);
+  } finally {
+    await agent.cleanup();
+  }
+});
+
+test("fullscreen Send keeps the configured queue behavior while an agent runs", async ({
+  page,
+}) => {
+  await configureComposerQueueSend(page);
+  await resizeComposerViewport(page, "portrait");
+  const agent = await startRunningMockAgent(page, {
+    prefix: "composer-fullscreen-queue-",
+    model: "one-minute-stream",
+    prompt: "Stay running for fullscreen queue test.",
+  });
+  try {
+    await writeCompactDraft(page, "Queued first line\nSecond line\nThird line");
+    await enterComposerFullscreen(page);
+    await expectComposerFullscreenControls(page);
+    await queueComposerWithButton(page);
+    await expect(composerLocator(page)).toHaveValue("");
+    await expectComposerFullscreenControls(page);
+    await exitComposerFullscreen(page);
+    await expectQueuedMessageButton(page);
+  } finally {
+    await agent.cleanup();
+  }
+});
+
+test("image paste stays attached to the active editor across fullscreen entry and exit", async ({
+  page,
+}) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-paste-remount-",
+    title: "Composer paste",
+  });
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    await writeCompactDraft(page, "First line\nSecond line\nThird line");
+    expect(await pasteComposerTestImage(page)).toBe(true);
+    await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(1);
+    await enterComposerFullscreen(page);
+    expect(await pasteComposerTestImage(page)).toBe(true);
+    await exitComposerFullscreen(page);
+    await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(2);
+    expect(await pasteComposerTestImage(page)).toBe(true);
+    await expect(page.getByTestId("composer-image-attachment-pill")).toHaveCount(3);
+  } finally {
+    await agent.cleanup();
+  }
+});
+
+test("retained agent tabs preserve fullscreen editing and paste when switched away and back", async ({
+  page,
+}) => {
+  const workspace = await seedWorkspace({ repoPrefix: "composer-retained-fullscreen-" });
+  try {
+    const first = await createMockIdleAgent(workspace.client, {
+      cwd: workspace.repoPath,
+      workspaceId: workspace.workspaceId,
+      title: "First retained chat",
+    });
+    const second = await createMockIdleAgent(workspace.client, {
+      cwd: workspace.repoPath,
+      workspaceId: workspace.workspaceId,
+      title: "Second retained chat",
+    });
+    await openWorkspaceWithAgents(page, [first, second]);
+    await resizeComposerViewport(page, "portrait");
+    const draft = "Live first line\nLive second line\nLive third line";
+    await writeCompactDraft(page, draft);
+    await enterComposerFullscreen(page);
+    await selectComposerDraftRange(page, 4, 17);
+    await activateRetainedComposerTab(page, first.title);
+    await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toHaveCount(0);
+    await writeCompactDraft(page, "Other tab draft");
+    await shrinkVisibleViewport(page);
+    await activateRetainedComposerTab(page, second.title);
+    await expectComposerFullscreenControls(page);
+    await expect(composerLocator(page)).toHaveValue(draft);
+    await expectFullscreenInsideVisibleViewport(page);
+    await expectComposerDraftSelection(page, 4, 17);
+    await expect(composerLocator(page)).toBeFocused();
+    expect(await pasteComposerTestImage(page)).toBe(true);
+    await exitComposerFullscreen(page);
+    await expectAttachmentPill(page, "composer-image-attachment-pill");
+  } finally {
+    await workspace.cleanup();
+  }
+});
+
+test("retained inline composers keep usable capacity through hidden tab geometry", async ({
+  page,
+}) => {
+  const workspace = await seedWorkspace({ repoPrefix: "composer-retained-capacity-" });
+  try {
+    const first = await createMockIdleAgent(workspace.client, {
+      cwd: workspace.repoPath,
+      workspaceId: workspace.workspaceId,
+      title: "First capacity chat",
+    });
+    const second = await createMockIdleAgent(workspace.client, {
+      cwd: workspace.repoPath,
+      workspaceId: workspace.workspaceId,
+      title: "Second capacity chat",
+    });
+    await openWorkspaceWithAgents(page, [first, second]);
+    await resizeComposerViewport(page, "portrait");
+    const draft = "Retained long line\n".repeat(40);
+    await writeCompactDraft(page, draft);
+    await recordVisibleComposerGeometry(page);
+    await activateRetainedComposerTab(page, first.title);
+    await writeCompactDraft(page, "Other visible draft");
+    await activateRetainedComposerTab(page, second.title);
+    await expect(composerLocator(page)).toHaveValue(draft);
+    await expect.poll(() => composerHeight(page)).toBeLessThanOrEqual(160);
+    await expect(page.getByRole("button", { name: "Send message", exact: true })).toBeVisible();
+    await expectNoCollapsedVisibleComposer(page);
+  } finally {
+    await workspace.cleanup();
+  }
+});
+
+async function shrinkVisibleViewport(page: Page): Promise<void> {
+  const cdp = await page.context().newCDPSession(page);
+  await cdp.send("Emulation.setPageScaleFactor", { pageScaleFactor: 2 });
+  await expect.poll(() => page.evaluate(() => window.visualViewport!.height)).toBe(422);
+  await cdp.detach();
+}
+
+async function panVisibleViewport(page: Page): Promise<void> {
+  const cdp = await page.context().newCDPSession(page);
+  await cdp.send("Input.dispatchTouchEvent", {
+    type: "touchStart",
+    touchPoints: [{ x: 4, y: 300 }],
+  });
+  for (let y = 290; y >= 100; y -= 10) {
+    await cdp.send("Input.dispatchTouchEvent", {
+      type: "touchMove",
+      touchPoints: [{ x: 4, y }],
+    });
+  }
+  await cdp.send("Input.dispatchTouchEvent", { type: "touchEnd", touchPoints: [] });
+  await expect.poll(() => page.evaluate(() => window.visualViewport!.offsetTop)).toBeGreaterThan(0);
+  await cdp.detach();
+}
+
+async function expectFullscreenInsideVisibleViewport(page: Page): Promise<void> {
+  await expect
+    .poll(() =>
+      page.getByTestId("composer-fullscreen").evaluate((element) => {
+        const viewport = window.visualViewport!;
+        const frame = element.getBoundingClientRect();
+        const send = element.querySelector('[aria-label="Send message"]')!.getBoundingClientRect();
+        return {
+          frameFits:
+            Math.abs(frame.top - viewport.offsetTop) < 1 &&
+            Math.abs(frame.left - viewport.offsetLeft) < 1 &&
+            Math.abs(frame.height - viewport.height) < 1 &&
+            Math.abs(frame.width - viewport.width) < 1,
+          sendFits:
+            send.top >= viewport.offsetTop &&
+            send.bottom <= viewport.offsetTop + viewport.height &&
+            send.left >= viewport.offsetLeft &&
+            send.right <= viewport.offsetLeft + viewport.width,
+        };
+      }),
+    )
+    .toEqual({ frameFits: true, sendFits: true });
+}
+
+test("fullscreen Send follows the visible viewport when it shrinks and pans", async ({ page }) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "composer-visible-viewport-",
+    title: "Visible viewport composer",
+  });
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    await writeCompactDraft(page, "First line\nSecond line\nThird line");
+    await enterComposerFullscreen(page);
+    await expectFullscreenInsideVisibleViewport(page);
+    await shrinkVisibleViewport(page);
+    await expectFullscreenInsideVisibleViewport(page);
+    await panVisibleViewport(page);
+    await expectFullscreenInsideVisibleViewport(page);
+  } finally {
+    await agent.cleanup();
+  }
+});

packages/app/e2e/browser/creation-old-daemon.spec.ts

@@ -116,6 +116,7 @@ for (const version of ["0.2.5", "0.7.2", "0.8.0"]) {
       );
       expect(workspaces).toHaveLength(1);
       gate.release();
+      await gate.waitForCreated();
       await expect.poll(async () => (await client.fetchAgents()).entries.length).toBe(1);
       const first = (await client.fetchAgents()).entries[0]!.agent;
       await client.waitForFinish(first.id, 20_000);
@@ -128,6 +129,7 @@ for (const version of ["0.2.5", "0.7.2", "0.8.0"]) {
       const secondPrompt = "Create another agent: emit 1 coalesced agent stream updates";
       await fillComposerDraft(page, secondPrompt);
       await pressSubmitBeforeTheNextRender(page, "Send message");
+      await gate.waitForCreated();
       await expect.poll(async () => (await client.fetchAgents()).entries.length).toBe(2);
       const second = (await client.fetchAgents()).entries.find(
         ({ agent }) => agent.id !== first.id,
@@ -206,21 +208,40 @@ for (const version of ["0.2.5", "0.7.2", "0.8.0"]) {
 async function holdLegacyAgentCreation(page: Page, port: number) {
   const readers = await loadSessionMessageReaders();
   const arrived = Promise.withResolvers<void>();
+  let created = Promise.withResolvers<void>();
+  let createRequestId: string | undefined;
   let release = () => {};
   let holding = true;
   await page.routeWebSocket(new RegExp(`:${port}/ws`), (browser) => {
     const server = browser.connectToServer();
     browser.onMessage((frame) => {
-      if (holding && readers.client(frame)?.type === "create_agent_request") {
+      const message = readers.client(frame);
+      if (message?.type === "create_agent_request") createRequestId = message.requestId;
+      if (holding && message?.type === "create_agent_request") {
         holding = false;
         release = () => server.send(frame);
         arrived.resolve();
       } else server.send(frame);
     });
-    server.onMessage((frame) => browser.send(frame));
+    server.onMessage((frame) => {
+      const message = readers.server(frame);
+      if (
+        message?.type === "status" &&
+        message.payload.status === "agent_created" &&
+        message.payload.requestId === createRequestId
+      ) {
+        created.resolve();
+      }
+      browser.send(frame);
+    });
   });
   return {
     waitForRequest: () => arrived.promise,
+    async waitForCreated() {
+      // Agent-list membership includes initialization, before the initial prompt starts.
+      await created.promise;
+      created = Promise.withResolvers<void>();
+    },
     release() {
       const send = release;
       release = () => {};

packages/app/e2e/browser/custom-model-removal.spec.ts

@@ -0,0 +1,29 @@
+import { test } from "../support/fixtures";
+import {
+  addCustomModel,
+  expectCustomModelRetained,
+  openCustomModels,
+  removeCustomModel,
+} from "../support/helpers/custom-models";
+
+const longModelId = "custom-model-with-a-long-name-".repeat(6);
+const shortModelId = "custom-short";
+
+for (const width of [1200, 390]) {
+  test(`removes a long custom model at ${width}px without removing another model`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width: 1200, height: 1000 });
+    await openCustomModels(page);
+    await addCustomModel(page, shortModelId);
+    await addCustomModel(page, longModelId);
+
+    await test.step("remove the long model at the target width", async () => {
+      await page.setViewportSize({ width, height: 1000 });
+      await removeCustomModel(page, longModelId);
+      await expectCustomModelRetained(page, shortModelId);
+    });
+
+    await removeCustomModel(page, shortModelId);
+  });
+}

packages/app/e2e/browser/file-editing.spec.ts

@@ -2,6 +2,7 @@ import { mkdir, readFile, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { expect, test, type Page } from "../support/fixtures";
 import {
+  expandFolder,
   openFileExplorer,
   openFileFromExplorer,
   expectFileTabOpen,
@@ -70,6 +71,14 @@ async function selectFileView(page: Page, view: "Preview" | "Source"): Promise<v
   await expect(option).toHaveAttribute("aria-selected", "true");
 }
 
+async function expectMarkdownImageLoaded(page: Page, name: string): Promise<void> {
+  const image = page.getByRole("img", { name, exact: true });
+  await expect(image).toBeVisible();
+  await expect
+    .poll(() => image.locator("img").evaluate((element: HTMLImageElement) => element.naturalWidth))
+    .toBeGreaterThan(0);
+}
+
 function watchRequestsTo(page: Page, origin: string): string[] {
   const requests: string[] = [];
   page.on("request", (request) => {
@@ -684,6 +693,40 @@ test.describe("CodeMirror workspace file editing", () => {
     await expect.poll(() => image.getAttribute("src")).not.toBe(initialSource);
   });
 
+  test("renders local relative images inside Markdown preview", async ({ page, withWorkspace }) => {
+    test.setTimeout(90_000);
+    const workspace = await withWorkspace({ prefix: "file-md-relative-image-" });
+    await mkdir(path.join(workspace.repoPath, "docs"), { recursive: true });
+    await mkdir(path.join(workspace.repoPath, "data", "cache"), { recursive: true });
+    await writeFile(path.join(workspace.repoPath, "docs", "sibling.png"), RED_PIXEL);
+    await writeFile(path.join(workspace.repoPath, "data", "cache", "hero.png"), RED_PIXEL);
+    await writeFile(
+      path.join(workspace.repoPath, "docs", "guide.md"),
+      [
+        "# Guide",
+        "",
+        "![sibling](./sibling.png)",
+        "",
+        "![hero](../data/cache/hero.png?v=2#preview)",
+        "",
+      ].join("\n"),
+      "utf8",
+    );
+    await workspace.navigateTo();
+    await openFileExplorer(page);
+    await expandFolder(page, "docs");
+    await openFileFromExplorer(page, "guide.md");
+    await expectFileTabOpen(page, "docs/guide.md");
+
+    const visibleFilePane = page.getByTestId("workspace-file-pane").filter({ visible: true });
+    await expect(visibleFilePane.getByText("Guide", { exact: true })).toBeVisible();
+    await expectMarkdownImageLoaded(page, "sibling");
+    await expectMarkdownImageLoaded(page, "hero");
+    await visibleFilePane.screenshot({
+      path: test.info().outputPath("markdown-relative-images.png"),
+    });
+  });
+
   test("previews and refreshes an HTML plan while preserving source access", async ({
     page,
     withWorkspace,

packages/app/e2e/browser/new-workspace-dictation-submit.spec.ts

@@ -6,6 +6,15 @@ import {
   selectWorkspaceIsolation,
 } from "../support/helpers/new-workspace";
 import { seedWorkspace } from "../support/helpers/seed-client";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+import {
+  composerLocator,
+  expectComposerVisible,
+  fillComposerDraft,
+  enterComposerFullscreen,
+  resizeComposerViewport,
+  expectComposerFullscreenControls,
+} from "../support/helpers/composer";
 import { waitForSidebarHydration } from "../support/helpers/workspace-ui";
 
 type WebSocketMessage = string | Buffer;
@@ -196,3 +205,52 @@ test.describe("New Workspace dictation submit", () => {
     }
   });
 });
+
+async function startDictationWithShortcut(page: Page): Promise<void> {
+  await composerLocator(page).press("Control+d");
+}
+
+test("dictation shortcut leaves retained fullscreen and exposes recording controls", async ({
+  page,
+}) => {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "fullscreen-dictation-",
+    title: "Fullscreen dictation shortcut",
+  });
+  await installSyntheticMicrophone(page);
+  const harness = await installDictationFailureHarness(page);
+  const draft = "First line\nSecond line\nThird line";
+  try {
+    await resizeComposerViewport(page, "portrait");
+    await openAgentRoute(page, agent);
+    await expectComposerVisible(page);
+    await fillComposerDraft(page, draft);
+    await enterComposerFullscreen(page);
+    await resizeComposerViewport(page, "landscape");
+    await expectComposerFullscreenControls(page);
+    await startDictationWithShortcut(page);
+    await harness.waitForAudio();
+    await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toHaveCount(0);
+    await expect(page.getByRole("button", { name: "Cancel dictation", exact: true })).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Insert transcription", exact: true }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("button", { name: "Insert transcription and send", exact: true }),
+    ).toBeVisible();
+    await page.getByRole("button", { name: "Cancel dictation", exact: true }).click();
+    await expect(composerLocator(page)).toBeEditable();
+    await expect(composerLocator(page)).toHaveValue(draft);
+    await resizeComposerViewport(page, "portrait");
+    await enterComposerFullscreen(page);
+    await resizeComposerViewport(page, "landscape");
+    await composerLocator(page).press("Control+Shift+d");
+    await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toHaveCount(0);
+    await expect(
+      page.getByText("Realtime voice is disabled in this test.", { exact: true }),
+    ).toBeVisible();
+    await expect(composerLocator(page)).toHaveValue(draft);
+  } finally {
+    await agent.cleanup();
+  }
+});

packages/app/e2e/browser/new-workspace-launch-terminal.spec.ts

@@ -9,13 +9,12 @@ import {
   expectTerminalPreviewCommand,
   expectWorkspaceOpensWithTerminalTab,
   fillTerminalPrompt,
-  seedTerminalProfiles,
+  launchTrigger,
   selectLaunchOption,
   submitTerminalLaunch,
   terminalLaunchSubmit,
   terminalPromptInput,
   type TerminalProfile,
-  type TerminalProfileSeed,
 } from "../support/helpers/new-workspace-launch";
 
 // Someone who wants a terminal agent instead of a chat: they pick a profile
@@ -42,17 +41,18 @@ const BARE_PROFILE: TerminalProfile = {
   args: ["-c", "echo bare-launch-static-line; exec cat"],
 };
 
+test.use({
+  e2eDaemonConfig: { version: 1, daemon: { terminalProfiles: [PROMPT_PROFILE, BARE_PROFILE] } },
+});
+
 test.describe("New workspace: launching a terminal", () => {
   let workspace: SeededWorkspace;
-  let profileSeed: TerminalProfileSeed;
 
   test.beforeEach(async () => {
     workspace = await seedWorkspace({ repoPrefix: "launch-terminal-" });
-    profileSeed = await seedTerminalProfiles([PROMPT_PROFILE, BARE_PROFILE]);
   });
 
   test.afterEach(async () => {
-    await profileSeed.restore();
     await workspace?.cleanup();
   });
 
@@ -97,4 +97,51 @@ test.describe("New workspace: launching a terminal", () => {
       await expectTerminalOutputContains(page, "bare-launch-static-line");
     });
   });
+
+  test("switching terminal profiles restores the prompt and its fullscreen affordance", async ({
+    page,
+  }) => {
+    await gotoAppShell(page);
+    await waitForSidebarHydration(page);
+    await openNewWorkspaceComposer(page, {
+      projectKey: workspace.projectKey,
+      projectDisplayName: workspace.projectDisplayName,
+    });
+    await page.setViewportSize({ width: 390, height: 844 });
+    const prompt = "First replacement line\nSecond replacement line\nThird replacement line";
+    const selectProfile = async (profile: TerminalProfile) => {
+      await launchTrigger(page).click();
+      const option = page.getByRole("menuitem").filter({ hasText: profile.name });
+      await option.click();
+      await expect(option).not.toBeVisible();
+    };
+    const fullscreen = page.getByRole("button", { name: "Fullscreen", exact: true });
+
+    await test.step("restore a multiline prompt after a read-only profile", async () => {
+      await selectProfile(PROMPT_PROFILE);
+      await fillTerminalPrompt(page, prompt);
+      await expect(fullscreen).toBeVisible();
+      await selectProfile(BARE_PROFILE);
+      await expect(terminalPromptInput(page)).toHaveCount(0);
+      await selectProfile(PROMPT_PROFILE);
+      await expect(terminalPromptInput(page)).toHaveValue(prompt);
+      await expect(fullscreen).toBeVisible();
+    });
+
+    await test.step("restore the locally edited prompt and measure subsequent typing", async () => {
+      await fillTerminalPrompt(page, "Short draft");
+      await expect(fullscreen).toHaveCount(0);
+      await selectProfile(BARE_PROFILE);
+      await selectProfile(PROMPT_PROFILE);
+      await expect(terminalPromptInput(page)).toHaveValue("Short draft");
+      await expect(fullscreen).toHaveCount(0);
+      await terminalPromptInput(page).press("End");
+      await terminalPromptInput(page).press("Shift+Enter");
+      await terminalPromptInput(page).pressSequentially("Second");
+      await terminalPromptInput(page).press("Shift+Enter");
+      await terminalPromptInput(page).pressSequentially("Third");
+      await expect(terminalPromptInput(page)).toHaveValue("Short draft\nSecond\nThird");
+      await expect(fullscreen).toBeVisible();
+    });
+  });
 });

packages/app/e2e/browser/pair-device-relay.spec.ts

@@ -1,6 +1,8 @@
 import { test } from "../support/fixtures";
 import { startIsolatedHostDaemon } from "../support/helpers/isolated-host-daemon";
 import {
+  expectPairingOffer,
+  expectCompletePairingQr,
   expectRelayConsent,
   openPairDeviceModal,
   preparePairingHost,
@@ -18,3 +20,20 @@ test("opens relay consent in browser web", async ({ page }) => {
     await daemon.close();
   }
 });
+
+test("keeps the pairing QR code inside its compact tile", async ({ page }, testInfo) => {
+  const daemon = await startIsolatedHostDaemon("pair-device-browser-compact", {
+    mutableRelay: { enabled: true },
+  });
+  try {
+    await preparePairingHost(page, daemon);
+    await page.setViewportSize({ width: 320, height: 568 });
+    await openPairDeviceModal(page);
+    await expectPairingOffer(page);
+
+    await expectCompletePairingQr(page);
+    await page.screenshot({ path: testInfo.outputPath("pairing-compact.png") });
+  } finally {
+    await daemon.close();
+  }
+});

packages/app/e2e/browser/project-path-spaces.spec.ts

@@ -0,0 +1,64 @@
+import { execFileSync } from "node:child_process";
+import { mkdtemp, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { expect, test as base } from "../support/fixtures";
+import { gotoWorkspace } from "../support/helpers/launcher";
+import { openChangesTreePanel } from "../support/helpers/workspace-tabs";
+
+const test = base.extend<{ projectWithTrailingSpace: string }>({
+  projectWithTrailingSpace: async ({ e2eWorkerClient: client }, provide) => {
+    const root = await mkdtemp(path.join(tmpdir(), "paseo-project-path-spaces-"));
+    try {
+      const repoPath = path.join(root, "repo ");
+      execFileSync("git", ["init", "-b", "main", repoPath], { stdio: "pipe" });
+      execFileSync(
+        "git",
+        [
+          "-c",
+          "user.name=Paseo Test",
+          "-c",
+          "user.email=test@getpaseo.local",
+          "-c",
+          "commit.gpgsign=false",
+          "commit",
+          "--allow-empty",
+          "-m",
+          "initial",
+        ],
+        { cwd: repoPath, stdio: "pipe" },
+      );
+      await writeFile(path.join(repoPath, "visible-change.txt"), "a change\n");
+      const added = await client.addProject(repoPath);
+      expect(added.error).toBeNull();
+      const projectId = added.project!.projectId;
+      try {
+        const created = await client.createWorkspace({
+          source: { kind: "directory", path: repoPath, projectId },
+        });
+        expect(created.error).toBeNull();
+        await provide(created.workspace!.id);
+      } finally {
+        await client.removeProject(projectId);
+      }
+    } finally {
+      await rm(root, { recursive: true, force: true });
+    }
+  },
+});
+
+test.skip(
+  process.platform === "win32",
+  "Windows does not preserve trailing spaces in folder names",
+);
+
+test("Changes shows files in a project whose folder ends in a space", async ({
+  page,
+  projectWithTrailingSpace,
+}, testInfo) => {
+  await gotoWorkspace(page, projectWithTrailingSpace);
+  await openChangesTreePanel(page);
+  await expect(page.getByText("visible-change.txt", { exact: true }).first()).toBeVisible();
+  await expect(page.getByText("Not a git repository", { exact: true })).toHaveCount(0);
+  await page.screenshot({ path: testInfo.outputPath("changes.png") });
+});

packages/app/e2e/browser/provider-removal.spec.ts

@@ -10,16 +10,29 @@ import {
   openSettingsHost,
   openSettingsHostSection,
 } from "../support/helpers/settings";
+import { copyPluginExample } from "../support/helpers/plugin-fixture";
 
 const CUSTOM_PROVIDER = {
   id: "junie",
   name: "Junie",
 } as const;
 
+const PLUGIN_PROVIDER = {
+  id: "direct-example",
+  name: "Direct provider example",
+  pluginId: "provider-direct-example",
+} as const;
+
 interface ProviderRemovalDaemonClient {
   connect(): Promise<void>;
   close(): Promise<void>;
-  patchDaemonConfig(config: { removeProviders?: string[] }): Promise<unknown>;
+  getDaemonConfig(): Promise<{ config: { pluginsEnabled?: boolean } }>;
+  patchDaemonConfig(config: {
+    removeProviders?: string[];
+    pluginsEnabled?: boolean;
+  }): Promise<unknown>;
+  installDirectoryPlugin(path: string): Promise<unknown>;
+  removePlugin(pluginId: string): Promise<void>;
   getProvidersSnapshot(): Promise<{
     entries: Array<{ provider: string; source?: "builtin" | "custom" }>;
   }>;
@@ -93,4 +106,45 @@ test.describe("provider removal", () => {
       await client.close().catch(() => undefined);
     }
   });
+
+  test("does not offer Remove for a plugin-registered provider", async ({ page }) => {
+    test.setTimeout(120_000);
+    const client = await connectDaemonClient<ProviderRemovalDaemonClient>({
+      clientIdPrefix: "provider-removal-e2e",
+    });
+
+    const plugin = await copyPluginExample("provider-direct");
+    try {
+      const previous = await client.getDaemonConfig();
+      try {
+        await client.patchDaemonConfig({ pluginsEnabled: true });
+        await client.installDirectoryPlugin(plugin.directory);
+
+        await gotoAppShell(page);
+        await openSettings(page);
+        await openSettingsHost(page, getServerId());
+        await openSettingsHostSection(page, getServerId(), "providers");
+
+        const pluginProviderRow = page.getByRole("button", {
+          name: `${PLUGIN_PROVIDER.name} provider details`,
+          exact: true,
+        });
+        await expect(pluginProviderRow).toBeVisible();
+        await expect(page.getByTestId(`provider-actions-${PLUGIN_PROVIDER.id}`)).toHaveCount(0);
+
+        // The provider survives a removeProviders patch pointed at it: the
+        // plugin, not config.json, owns the definition.
+        await client.patchDaemonConfig({ removeProviders: [PLUGIN_PROVIDER.id] });
+        await expect(pluginProviderRow).toBeVisible();
+      } finally {
+        await client.removePlugin(PLUGIN_PROVIDER.pluginId).catch(() => undefined);
+        await client
+          .patchDaemonConfig({ pluginsEnabled: previous.config.pluginsEnabled })
+          .catch(() => undefined);
+      }
+    } finally {
+      await client.close().catch(() => undefined);
+      await plugin.cleanup();
+    }
+  });
 });

packages/app/e2e/browser/question-prompt-pagination.spec.ts

@@ -7,6 +7,7 @@ import {
   expectQuestionDismissEnabled,
   expectQuestionHidden,
   expectQuestionNavigationEnabled,
+  expectQuestionOptionPreview,
   expectQuestionOptionSelected,
   expectQuestionPrimaryActionDisabled,
   expectQuestionPrimaryActionEnabled,
@@ -61,6 +62,10 @@ test.describe("Question prompt pagination", () => {
       await expectQuestionOptionSelected(page, "App");
 
       await openQuestion(page, { index: 2, total: TOTAL_QUESTIONS });
+      await expectQuestionOptionPreview(page, {
+        option: "Behind feature flag",
+        preview: 'flags.enabled("new-surface")',
+      });
       await chooseQuestionOption(page, "Behind feature flag");
       await expectCurrentQuestion(page, {
         index: 3,

packages/app/e2e/mobile/agent-device/native-question-option-preview-preconditions.md

@@ -0,0 +1,7 @@
+# Native question option preview
+
+`native-question-option-preview.android.ad` checks that every line of a long option preview is reachable on Android. Before replay, open a mock agent prompted with `emit synthetic questions` so its question card shows the first question, on a phone-sized emulator (validated on a 1080×1920 API 35 AVD). The flow opens the `rollout` question, drags slowly up from inside the "Behind feature flag" preview, and asserts the preview's last line is visible.
+
+```sh
+agent-device replay packages/app/e2e/mobile/agent-device/native-question-option-preview.android.ad --platform android --serial emulator-5554
+```

packages/app/e2e/mobile/agent-device/native-question-option-preview.android.ad

@@ -0,0 +1,10 @@
+context platform=android timeout=60000 retries=0
+env APP_ID=sh.paseo.debug
+
+open "${APP_ID}"
+wait "label=\"rollout\"" 20000
+press "label=\"rollout\""
+wait "id=\"question-form-option-preview\"" 10000
+gesture pan 570 1120 0 -440 600
+is visible "text=\"// LAST PREVIEW LINE\""
+close

packages/app/e2e/mobile/pair-device/android.mjs

@@ -0,0 +1,43 @@
+// Start on Settings > Host > Pair device with relay enabled in the Android app.
+// node packages/app/e2e/mobile/pair-device/android.mjs <agent-device-session>
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+
+const [, , session] = process.argv;
+assert(session, "Pass the agent-device session for the connected Android app");
+
+function ad(...args) {
+  return execFileSync("agent-device", [...args, "--session", session], {
+    encoding: "utf8",
+    timeout: 60_000,
+  });
+}
+
+ad(
+  "press",
+  'label="Pair a device, Scan a QR code or copy a link to connect your phone to this host"',
+  "--settle",
+);
+ad("wait", "text", "Pairing QR code", "10000");
+const { data } = JSON.parse(ad("snapshot", "-i", "--json"));
+const sheet = data.nodes.find((node) => node.label === "Bottom Sheet");
+const qr = data.nodes.find((node) => node.label === "Pairing QR code");
+assert(sheet?.rect, "Pairing sheet must be visible");
+assert(qr?.rect, "Pairing QR code must be visible");
+assert(qr.rect.x > sheet.rect.x, "QR must have an unclipped left margin inside the sheet");
+assert(
+  qr.rect.x + qr.rect.width < sheet.rect.x + sheet.rect.width,
+  "QR must have an unclipped right margin inside the sheet",
+);
+assert(Math.abs(qr.rect.width - qr.rect.height) <= 1, "Complete QR must remain square");
+assert(qr.rect.y >= sheet.rect.y, "QR top must be visible inside the sheet");
+assert(
+  qr.rect.y + qr.rect.height <= sheet.rect.y + sheet.rect.height,
+  "QR bottom must be visible inside the sheet",
+);
+assert(
+  data.nodes.some((node) => node.label === "Copy" && node.enabled),
+  "Copy must remain available",
+);
+console.log("PASS: complete square QR fits inside the pairing sheet", qr.rect);
+ad("press", 'label="Close"', "--settle");

packages/app/e2e/mobile/system-bars/android.mjs

@@ -0,0 +1,62 @@
+// Open Settings > Appearance in a native Android app loaded from this checkout.
+// AGENT_DEVICE_STATE_DIR=<state-dir> node packages/app/e2e/mobile/system-bars/android.mjs <session> <adb-serial> <app-id>
+// Requires English UI and a dedicated emulator. Leaves System theme and light OS appearance.
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { setTimeout as delay } from "node:timers/promises";
+
+const [, , session, serial, appId] = process.argv;
+assert(session && serial && appId, "Pass the agent-device session, adb serial, and app ID");
+
+function ad(...args) {
+  return execFileSync("agent-device", [...args, "--session", session], {
+    encoding: "utf8",
+    timeout: 60_000,
+  });
+}
+
+function windowState() {
+  const state = execFileSync("adb", ["-s", serial, "shell", "dumpsys", "window"], {
+    encoding: "utf8",
+    timeout: 10_000,
+  });
+  assert(state.match(/mCurrentFocus=.*\n/)?.[0].includes(`${appId}/`), "App must be focused");
+  const regions = state.match(/mLastStatusBarAppearanceRegions=\s*\n([^\n]+)/)?.[1];
+  assert(regions, "Android must report the status-bar appearance region");
+  return regions.includes("LIGHT_STATUS_BARS");
+}
+
+async function expectDarkIcons(expected, context) {
+  const deadline = Date.now() + 5_000;
+  do {
+    if (windowState() === expected) {
+      console.log(`PASS: ${context}`);
+      return;
+    }
+    await delay(100);
+  } while (Date.now() < deadline);
+  assert.equal(windowState(), expected, context);
+}
+
+function selectTheme(theme) {
+  const current = ad("snapshot", "-i").match(/"Theme: ([^"]+)"/)?.[1];
+  assert(current, "Start on Settings > Appearance");
+  ad("press", `label="Theme: ${current}"`, "--settle");
+  ad("press", `label="${theme}"`, "--settle");
+  ad("wait", "text", `Theme: ${theme}`, "5000");
+}
+
+ad("settings", "appearance", "light");
+selectTheme("Light");
+await expectDarkIcons(true, "Light app theme uses dark status icons");
+selectTheme("Dark");
+await expectDarkIcons(false, "Dark app theme uses light status icons");
+selectTheme("System");
+await expectDarkIcons(true, "System theme starts with dark icons on light OS appearance");
+ad("settings", "appearance", "dark");
+await expectDarkIcons(
+  false,
+  "System theme follows an OS change to dark without reopening settings",
+);
+ad("settings", "appearance", "light");
+await expectDarkIcons(true, "System theme follows an OS change back to light");

packages/app/e2e/support/helpers/composer.ts

@@ -316,3 +316,133 @@ export async function openGithubWorkspace(
     },
   };
 }
+
+const COMPOSER_TEST_IMAGE_BASE64 =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+
+export async function attachComposerTestImage(page: Page): Promise<void> {
+  await attachImageFromMenu(page, {
+    name: "fullscreen.png",
+    mimeType: "image/png",
+    buffer: Buffer.from(COMPOSER_TEST_IMAGE_BASE64, "base64"),
+  });
+}
+
+export async function pasteComposerTestImage(page: Page): Promise<boolean> {
+  return composerInput(page).evaluate((input, base64) => {
+    const bytes = Uint8Array.from(atob(base64), (character) => character.charCodeAt(0));
+    const clipboardData = new DataTransfer();
+    clipboardData.items.add(new File([bytes], "pasted.png", { type: "image/png" }));
+    const event = new ClipboardEvent("paste", { clipboardData, bubbles: true, cancelable: true });
+    input.dispatchEvent(event);
+    return event.defaultPrevented;
+  }, COMPOSER_TEST_IMAGE_BASE64);
+}
+
+export async function enterComposerFullscreen(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Fullscreen", exact: true }).click();
+}
+export async function exitComposerFullscreen(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Exit fullscreen", exact: true }).click();
+}
+export async function resizeComposerViewport(
+  page: Page,
+  orientation: "portrait" | "landscape" | "short",
+): Promise<void> {
+  const sizes = {
+    portrait: { width: 390, height: 844 },
+    landscape: { width: 844, height: 390 },
+    short: { width: 390, height: 390 },
+  };
+  await page.setViewportSize(sizes[orientation]);
+}
+export async function selectComposerDraftRange(
+  page: Page,
+  start: number,
+  end: number,
+): Promise<void> {
+  await composerInput(page).focus();
+  await composerInput(page).evaluate(
+    (element, selection) => {
+      const input = element as HTMLTextAreaElement;
+      input.setSelectionRange(selection.start, selection.end);
+      input.dispatchEvent(new Event("select", { bubbles: true }));
+    },
+    { start, end },
+  );
+}
+export async function expectComposerDraftSelection(
+  page: Page,
+  start: number,
+  end: number,
+): Promise<void> {
+  await expect
+    .poll(() =>
+      composerInput(page).evaluate((element) => {
+        const input = element as HTMLTextAreaElement;
+        return [input.selectionStart, input.selectionEnd];
+      }),
+    )
+    .toEqual([start, end]);
+}
+export async function expectComposerFullscreenControls(page: Page): Promise<void> {
+  await expect(page.getByRole("button", { name: "Exit fullscreen", exact: true })).toBeVisible();
+  await expect(page.getByTestId("composer-fullscreen").getByRole("button")).toHaveCount(2);
+  await expect(composerInput(page)).toHaveCount(1);
+}
+export async function sendComposerWithButton(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Send message", exact: true }).click();
+}
+export async function queueComposerWithButton(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Queue message", exact: true }).click();
+}
+export async function configureComposerQueueSend(page: Page): Promise<void> {
+  await page.addInitScript(() =>
+    localStorage.setItem("@paseo:app-settings", JSON.stringify({ sendBehavior: "queue" })),
+  );
+}
+
+/** Drive the real tab chooser's commands even when fullscreen covers its pointer surface.
+ * This exercises retained activity changes, not a claim that covered chrome is clickable.
+ */
+export async function activateRetainedComposerTab(page: Page, title: string): Promise<void> {
+  await page
+    .getByTestId("workspace-tab-switcher-trigger")
+    .evaluate((element) => (element as HTMLElement).click());
+  const option = page.getByText(title, { exact: true }).filter({ visible: true }).last();
+  await expect(option).toBeVisible();
+  await option.evaluate((element) => (element as HTMLElement).click());
+}
+
+export async function recordVisibleComposerGeometry(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const frames: { input: number; root: number }[] = [];
+    Reflect.set(window, "__composerGeometryFrames", frames);
+    let running = true;
+    const tick = () => {
+      if (!running) return;
+      for (const root of document.querySelectorAll('[data-testid="message-input-root"]')) {
+        if (root.getClientRects().length === 0) continue;
+        const input = root.querySelector("textarea");
+        if (input)
+          frames.push({
+            input: input.getBoundingClientRect().height,
+            root: root.getBoundingClientRect().height,
+          });
+      }
+      requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+    Reflect.set(window, "__stopComposerGeometry", () => {
+      running = false;
+    });
+  });
+}
+export async function expectNoCollapsedVisibleComposer(page: Page): Promise<void> {
+  const frames = await page.evaluate(() => {
+    Reflect.get(window, "__stopComposerGeometry")?.();
+    return Reflect.get(window, "__composerGeometryFrames") as { input: number; root: number }[];
+  });
+  expect(frames.length).toBeGreaterThan(0);
+  expect(frames.filter((frame) => frame.root < 42 || frame.input < 42)).toEqual([]);
+}

packages/app/e2e/support/helpers/custom-models.ts

@@ -0,0 +1,37 @@
+import { expect, type Page } from "@playwright/test";
+import { gotoAppShell, openSettings } from "./app";
+import { openSettingsHostSection } from "./settings";
+import { getServerId } from "./server-id";
+
+export async function openCustomModels(page: Page): Promise<void> {
+  await gotoAppShell(page);
+  await openSettings(page);
+  await openSettingsHostSection(page, getServerId(), "providers");
+  await page.getByRole("button", { name: "Claude provider details", exact: true }).click();
+  await expect(page.getByRole("textbox", { name: "Search models" })).toBeVisible();
+}
+
+export async function addCustomModel(page: Page, id: string): Promise<void> {
+  await page.getByRole("button", { name: "Add model", exact: true }).click();
+  await page.getByPlaceholder("e.g. openai/gpt-5").fill(id);
+  await page
+    .getByTestId("add-custom-model-sheet")
+    .getByRole("button", { name: "Add", exact: true })
+    .click();
+  await expect(page.getByRole("button", { name: `Remove ${id}`, exact: true })).toHaveCount(1);
+}
+
+export async function removeCustomModel(page: Page, id: string): Promise<void> {
+  await page.getByRole("textbox", { name: "Search models" }).fill(id);
+  const remove = page.getByRole("button", { name: `Remove ${id}`, exact: true });
+  await expect(remove).toBeInViewport({ ratio: 1 });
+  await remove.click();
+  await expect(remove).toHaveCount(0);
+}
+
+export async function expectCustomModelRetained(page: Page, id: string): Promise<void> {
+  await page.getByRole("textbox", { name: "Search models" }).fill(id);
+  await expect(page.getByRole("button", { name: `Remove ${id}`, exact: true })).toBeInViewport({
+    ratio: 1,
+  });
+}

packages/app/e2e/support/helpers/pair-device.ts

@@ -220,3 +220,24 @@ export function expectDaemonPidUnchanged(
   expect(before).toBeDefined();
   expect(after).toBe(before);
 }
+
+export async function expectCompletePairingQr(page: Page): Promise<void> {
+  const qr = page.getByRole("img", { name: "Pairing QR code" });
+  await qr.scrollIntoViewIfNeeded();
+  // IntersectionObserver rounds fractional sheet/scroll coordinates.
+  await expect(qr).toBeInViewport({ ratio: 0.999 });
+  const bounds = await qr.evaluate((element) => {
+    const tile = element.parentElement;
+    if (!tile) throw new Error("Pairing QR tile is missing");
+    const qrRect = element.getBoundingClientRect();
+    const tileRect = tile.getBoundingClientRect();
+    return {
+      qr: { x: qrRect.x, y: qrRect.y, right: qrRect.right, bottom: qrRect.bottom },
+      tile: { x: tileRect.x, y: tileRect.y, right: tileRect.right, bottom: tileRect.bottom },
+    };
+  });
+  expect(bounds.qr.x).toBeGreaterThanOrEqual(bounds.tile.x);
+  expect(bounds.qr.y).toBeGreaterThanOrEqual(bounds.tile.y);
+  expect(bounds.qr.right).toBeLessThanOrEqual(bounds.tile.right);
+  expect(bounds.qr.bottom).toBeLessThanOrEqual(bounds.tile.bottom);
+}

packages/app/e2e/support/helpers/plugin-timeline.ts

@@ -47,6 +47,65 @@ export default function contribute(client) {
   return () => {};
 }`;
 
+const PROMPT_PLUGIN_ID = "timeline-prompt-e2e";
+
+function promptClientSource(prompts?: readonly string[]): string {
+  return `import React from "react";
+import { Text, View } from "react-native";
+import { z } from "zod";
+
+const selectedPrompts = ${JSON.stringify(prompts ?? null)};
+
+function PromptCard({ item }) {
+  return <View testID="plugin-prompt"><Text>{item.data.text}</Text></View>;
+}
+
+export default function contribute(client) {
+  client.addTimelineTransformer({
+    id: "prompt",
+    query: { itemType: "user_message" },
+    transform({ item }) {
+      if (selectedPrompts && !selectedPrompts.includes(item.text)) return undefined;
+      return { items: [{ type: "plugin", kind: "prompt", version: 1, data: { text: item.text } }] };
+    },
+  });
+  client.addTimelineRenderer({
+    kind: "prompt", version: 1,
+    schema: z.object({ text: z.string() }),
+    Component: PromptCard,
+  });
+  return () => {};
+}`;
+}
+
+async function withDirectoryPlugin(options: {
+  pluginId: string;
+  source: string;
+  run: () => Promise<void>;
+}): Promise<void> {
+  const { pluginId, source, run } = options;
+  const directory = await mkdtemp(path.join(tmpdir(), "paseo-timeline-plugin-"));
+  const pluginClient = await connectNewWorkspaceDaemonClient({ ownProjects: false });
+  const previous = await pluginClient.getDaemonConfig();
+  try {
+    await writeFile(
+      path.join(directory, "paseo-plugin.json"),
+      JSON.stringify({ id: pluginId, requirements: pluginRequirements }),
+    );
+    await writeFile(path.join(directory, "index.client.tsx"), source);
+    await pluginClient.patchDaemonConfig({ pluginsEnabled: true });
+    await pluginClient.installDirectoryPlugin(directory);
+    await run();
+  } finally {
+    await pluginClient.removePlugin(pluginId);
+    await pluginClient.patchDaemonConfig({
+      pluginsEnabled: previous.config.pluginsEnabled ?? false,
+    });
+    await pluginClient.close();
+    await rm(directory, { recursive: true, force: true });
+  }
+}
+
 export async function withTimelinePlugin(
   page: Page,
   info: TestInfo,
@@ -60,7 +119,6 @@ export async function withTimelinePlugin(
       JSON.stringify({ toolCallDetailLevel: "overview" }),
     );
   });
-  const directory = await mkdtemp(path.join(tmpdir(), "paseo-timeline-plugin-"));
   const agent = await seedMockAgentWorkspace({
     repoPrefix: "timeline-plugin-",
     title: "Timeline plugin regression",
@@ -73,40 +131,53 @@ export async function withTimelinePlugin(
           }
         : {},
   });
-  const pluginClient = await connectNewWorkspaceDaemonClient({ ownProjects: false });
-  const previous = await pluginClient.getDaemonConfig();
   try {
-    await writeFile(
-      path.join(directory, "paseo-plugin.json"),
-      JSON.stringify({ id: PLUGIN_ID, requirements: pluginRequirements }),
-    );
-    await writeFile(path.join(directory, "index.client.tsx"), CLIENT_SOURCE);
-    await pluginClient.patchDaemonConfig({ pluginsEnabled: true });
-    await pluginClient.installDirectoryPlugin(directory);
-    await openAgentRoute(page, agent);
-    await expect(page.getByRole("textbox", { name: "Message agent..." }).first()).toBeVisible();
-    await run(agent);
-    await info.attach("timeline-plugin", {
-      body: await page.screenshot({ path: info.outputPath("timeline-plugin.png") }),
-      contentType: "image/png",
+    await withDirectoryPlugin({
+      pluginId: PLUGIN_ID,
+      source: CLIENT_SOURCE,
+      run: async () => {
+        try {
+          await openAgentRoute(page, agent);
+          await expect(
+            page.getByRole("textbox", { name: "Message agent..." }).first(),
+          ).toBeVisible();
+          await run(agent);
+          await info.attach("timeline-plugin", {
+            body: await page.screenshot({ path: info.outputPath("timeline-plugin.png") }),
+            contentType: "image/png",
+          });
+        } catch (error) {
+          await info.attach("timeline-before-cleanup", {
+            body: await page.screenshot({ path: info.outputPath("timeline-before-cleanup.png") }),
+            contentType: "image/png",
+          });
+          throw error;
+        }
+      },
     });
-  } catch (error) {
-    await info.attach("timeline-before-cleanup", {
-      body: await page.screenshot({ path: info.outputPath("timeline-before-cleanup.png") }),
-      contentType: "image/png",
-    });
-    throw error;
   } finally {
-    await pluginClient.removePlugin(PLUGIN_ID);
-    await pluginClient.patchDaemonConfig({
-      pluginsEnabled: previous.config.pluginsEnabled ?? false,
-    });
-    await pluginClient.close();
     await agent.cleanup();
-    await rm(directory, { recursive: true, force: true });
   }
 }
 
+/** Draws all prompts, or only the selected prompts, as plugin cards. */
+export async function withPromptTimelinePlugin(
+  run: () => Promise<void>,
+  prompts?: readonly string[],
+): Promise<void> {
+  await withDirectoryPlugin({
+    pluginId: PROMPT_PLUGIN_ID,
+    source: promptClientSource(prompts),
+    run,
+  });
+}
+
+export async function expectPromptsDrawnByPlugin(page: Page): Promise<void> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await expect(timeline.getByTestId("plugin-prompt").first()).toBeVisible({ timeout: 30_000 });
+  await expect(timeline.getByTestId("user-message")).toHaveCount(0);
+}
+
 export async function requestPluginTimeline(agent: MockAgentWorkspace): Promise<void> {
   await agent.client.sendAgentMessage(agent.agentId, "Exercise timeline transforms.");
 }
@@ -142,3 +213,21 @@ export async function expectBothConsecutiveTools(page: Page): Promise<void> {
   await grep.scrollIntoViewIfNeeded();
   await expect(grep).toBeVisible();
 }
+
+/** The row belongs to the virtualized history, not the always-mounted recent window. */
+export async function expectVirtualizedPluginPromptVisible(
+  page: Page,
+  prompt: string,
+): Promise<void> {
+  const timeline = page.locator('[data-testid="agent-chat-scroll"]:visible').first();
+  await expect(
+    timeline.locator("[data-index]").getByTestId("plugin-prompt").filter({ hasText: prompt }),
+  ).toBeVisible();
+}
+
+export async function attachPromptTimelineEvidence(page: Page, info: TestInfo): Promise<void> {
+  await info.attach("plugin-outline-jump", {
+    body: await page.screenshot({ path: info.outputPath("plugin-outline-jump.png") }),
+    contentType: "image/png",
+  });
+}

packages/app/e2e/support/helpers/questions.ts

@@ -43,6 +43,15 @@ export async function expectQuestionOptionSelected(page: Page, option: string):
   await expect(questionOption(page, option)).toHaveAttribute("aria-checked", "true");
 }
 
+export async function expectQuestionOptionPreview(
+  page: Page,
+  input: { option: string; preview: string },
+): Promise<void> {
+  await expect(
+    questionOption(page, input.option).getByTestId("question-form-option-preview"),
+  ).toContainText(input.preview);
+}
+
 export async function openQuestion(
   page: Page,
   input: { index: number; total: number },

packages/app/e2e/support/helpers/subagents.ts

@@ -49,31 +49,37 @@ export async function seedParentWithSubagent(
     modeId: "load-test",
     model: "ten-second-stream",
   });
-  const child = await workspace.client.createAgent({
-    provider: "mock",
-    cwd: workspace.repoPath,
-    workspaceId: workspace.workspaceId,
-    title: input.childTitle,
-    modeId: "load-test",
-    model: "ten-second-stream",
-    labels: {
-      [PARENT_AGENT_ID_LABEL]: parent.id,
-    },
-  });
+  const child = await seedSubagent(workspace, { parentId: parent.id, title: input.childTitle });
 
   return {
     parent: {
       id: parent.id,
       title: input.parentTitle,
     },
-    child: {
-      id: child.id,
-      title: input.childTitle,
-    },
+    child,
     workspaceId: workspace.workspaceId,
   };
 }
 
+/** Seeds an idle Paseo subagent of an existing agent in the same workspace. */
+export async function seedSubagent(
+  workspace: Pick<SeededWorkspace, "client" | "repoPath" | "workspaceId">,
+  input: { parentId: string; title: string },
+): Promise<{ id: string; title: string }> {
+  const child = await workspace.client.createAgent({
+    provider: "mock",
+    cwd: workspace.repoPath,
+    workspaceId: workspace.workspaceId,
+    title: input.title,
+    modeId: "load-test",
+    model: "ten-second-stream",
+    labels: {
+      [PARENT_AGENT_ID_LABEL]: input.parentId,
+    },
+  });
+  return { id: child.id, title: input.title };
+}
+
 export async function seedParentWithCrossWorkspaceSubagent(
   workspace: Pick<SeededWorkspace, "client" | "repoPath" | "workspaceId" | "projectId">,
   input: { parentTitle: string; childTitle: string },
@@ -141,6 +147,12 @@ export async function openSubagentsTrack(page: Page): Promise<void> {
   await expect(panel).toBeVisible({ timeout: 30_000 });
 }
 
+/** On compact the track opens as a sheet, which closes once a row is chosen. */
+export async function openSubagentFromCompactTrack(page: Page, childId: string): Promise<void> {
+  await page.getByTestId("subagents-track-header").click();
+  await page.getByTestId(`subagents-track-row-${childId}`).click();
+}
+
 export async function expectSubagentRowVisible(page: Page, childId: string): Promise<void> {
   await expect(page.getByTestId(`subagents-track-row-${childId}`)).toBeVisible({
     timeout: 30_000,

packages/app/e2e/support/helpers/workspace-sheet.ts

@@ -0,0 +1,94 @@
+import { expect, type Locator, type Page } from "@playwright/test";
+
+/** The compact workspace sheet, named after the tab it hosts. */
+export function workspaceSheet(page: Page, label: string): Locator {
+  return page.getByRole("dialog", { name: label });
+}
+
+/** Sheet height as a fraction of the viewport; mirrors the host's 92% snap point. */
+const SHEET_SNAP_FRACTION = 0.92;
+/** The dialog starts below the sheet's drag handle. */
+const SHEET_HANDLE_MAX_HEIGHT = 32;
+
+/**
+ * The sheet rests at its snap point, docked to the bottom edge. A sheet pushed up past it
+ * covers the workspace header; a sheet sunk below it hides content.
+ */
+export async function expectWorkspaceSheetAtSnap(page: Page, label: string): Promise<void> {
+  const viewportHeight = page.viewportSize()?.height ?? 0;
+  const snapTop = Math.round(viewportHeight * (1 - SHEET_SNAP_FRACTION));
+  const sheet = workspaceSheet(page, label);
+  await expect
+    .poll(async () => {
+      const box = await sheet.boundingBox();
+      if (!box) return null;
+      const top = Math.round(box.y);
+      return {
+        dockedToBottom: Math.round(box.y + box.height) === viewportHeight,
+        topAtSnap: top >= snapTop && top <= snapTop + SHEET_HANDLE_MAX_HEIGHT,
+      };
+    })
+    .toEqual({ dockedToBottom: true, topAtSnap: true });
+}
+
+export async function expectOpenTabCount(page: Page, count: number): Promise<void> {
+  await expect(
+    page.getByRole("button", { name: `Switch tabs (${count} open)` }).filter({ visible: true }),
+  ).toBeVisible();
+}
+
+export async function closeWorkspaceSheet(page: Page, label: string): Promise<void> {
+  const sheet = workspaceSheet(page, label);
+  await sheet.getByRole("button", { name: "Close" }).click();
+  await expect(sheet).toHaveCount(0);
+}
+
+export async function openWorkspaceSheetAsTab(page: Page, label: string): Promise<void> {
+  const sheet = workspaceSheet(page, label);
+  await sheet.getByRole("button", { name: "Open as tab" }).click();
+  await expect(sheet).toHaveCount(0);
+}
+
+export async function replaceWorkspaceSheetFileText(
+  page: Page,
+  label: string,
+  content: string,
+): Promise<void> {
+  const editor = workspaceSheet(page, label)
+    .getByTestId("file-source-editor")
+    .locator(".cm-content");
+  await editor.click();
+  await editor.press("ControlOrMeta+A");
+  await editor.pressSequentially(content);
+}
+
+export async function selectTabFromSwitcher(page: Page, label: string): Promise<void> {
+  await page
+    .getByRole("button", { name: /Switch tabs/ })
+    .filter({ visible: true })
+    .click();
+  const option = page.getByText(label, { exact: true }).filter({ visible: true }).last();
+  await expect(option).toBeVisible();
+  await option.click();
+  await expect(page.getByRole("button", { name: "Bottom sheet backdrop" })).toHaveCount(0);
+}
+
+export async function tapWorkspaceSheetBackdrop(page: Page): Promise<void> {
+  await page
+    .getByRole("button", { name: "Bottom sheet backdrop" })
+    .click({ position: { x: 10, y: 10 } });
+}
+
+/** Runs a close that hits the unsaved-changes guard, and declines the discard. */
+export async function expectDeclinedDiscardPrompt(
+  page: Page,
+  close: () => Promise<void>,
+): Promise<void> {
+  const prompt = page.waitForEvent("dialog").then(async (dialog) => {
+    const message = dialog.message();
+    await dialog.dismiss();
+    return message;
+  });
+  await close();
+  expect(await prompt).toContain("discard the draft");
+}

packages/app/index.ts

@@ -1,10 +1,6 @@
-// Polyfill crypto.randomUUID for React Native before any other imports
-import { polyfillCrypto } from "./src/polyfills/crypto";
-polyfillCrypto();
-
-// Polyfill screen.orientation for WebKitGTK desktop runtimes that lack the API.
-import { polyfillScreenOrientation } from "./src/polyfills/screen-orientation";
-polyfillScreenOrientation();
+// Install runtime polyfills before any other module evaluates. Keep this the first import.
+// oxlint-disable-next-line import/no-unassigned-import -- Polyfills install on import.
+import "./src/polyfills/install-early";
 
 // Configure Unistyles before Expo Router pulls in any components using StyleSheet.
 import "./src/styles/unistyles";

packages/app/src/agent-controls/labels.test.ts

@@ -29,4 +29,15 @@ describe("formatThinkingOptionLabel", () => {
     expect(formatThinkingOptionLabel({ id: "think-hard", label: "think-hard" })).toBe("Think hard");
     expect(formatThinkingOptionLabel({ id: "xhigh", label: "XHigh" })).toBe("Extra high");
   });
+
+  it("preserves provider-supplied xhigh labels with extra detail", () => {
+    expect(formatThinkingOptionLabel({ id: "xhigh", label: "XHigh (56 | 8m)" })).toBe(
+      "X high (56 | 8m)",
+    );
+    expect(formatThinkingOptionLabel({ id: "xhigh", label: "XHigh (45 | 6m)" })).toBe(
+      "X high (45 | 6m)",
+    );
+    expect(formatThinkingOptionLabel({ id: "xhigh" })).toBe("Extra high");
+    expect(formatThinkingOptionLabel({ id: "xhigh", label: "Extra high" })).toBe("Extra high");
+  });
 });

packages/app/src/agent-controls/labels.ts

@@ -34,10 +34,9 @@ export function formatAgentModeLabel(mode: ControlLabelInput): string {
 
 export function formatThinkingOptionLabel(option: ControlLabelInput): string {
   const rawLabel = (option.label ?? option.id).trim();
-  const compactId = option.id.replace(/[\s_-]+/g, "").toLowerCase();
   const compactLabel = rawLabel.replace(/[\s_-]+/g, "").toLowerCase();
 
-  if (compactId === "xhigh" || compactLabel === "xhigh") {
+  if (compactLabel === "xhigh" || compactLabel === "extrahigh") {
     return i18n.t("agentControls.thinking.extraHigh");
   }
 

packages/app/src/agent-stream/presentation.test.ts

@@ -11,7 +11,7 @@ import {
   type UserMessageItem,
 } from "@/types/stream";
 import { transformTimelineItem, type TimelineItemTransform } from "@/plugins/timeline/model";
-import { createStreamPresentation } from "./presentation";
+import { createStreamPresentation, getStreamItemMessageId } from "./presentation";
 import { buildAgentStreamRenderModel } from "./model";
 
 const runtime = {
@@ -29,7 +29,7 @@ const runtime = {
 } as unknown as PluginClientRuntime;
 
 function installProbe(
-  itemType: "assistant_message" | "tool_call" | "reasoning",
+  itemType: "user_message" | "assistant_message" | "tool_call" | "reasoning",
   condition = "true",
 ): InstalledPlugin {
   const clientBundle = `(function() {
@@ -160,6 +160,23 @@ describe("stream presentation through installed plugins", () => {
     },
   );
 
+  it("addresses a prompt a plugin replaced by the prompt's own id", () => {
+    const harness = streamHarness(installedTransform(installProbe("user_message")));
+    const rendered = rows(
+      harness.send({
+        type: "timeline",
+        provider: "claude",
+        item: { type: "user_message", messageId: "prompt-1", text: "Earlier prompt" },
+      }),
+    );
+    const source = rows(harness.source());
+
+    expect(source).toMatchObject([{ kind: "user_message", id: "prompt-1" }]);
+    expect(rendered).toMatchObject([{ kind: "plugin", id: "probe-plugin/prompt-1/0" }]);
+    // The chat outline jumps to the source id; the row it lands on is the plugin's.
+    expect(rendered.map(getStreamItemMessageId)).toEqual(["prompt-1"]);
+  });
+
   it("finishes one message before streaming a different message ID", () => {
     const harness = streamHarness(installedTransform(installProbe("assistant_message")));
     harness.send(assistant("First\n\nBody", "first"));

packages/app/src/agent-stream/presentation.ts

@@ -26,10 +26,14 @@ function retainItems(previous: StreamItem[], next: StreamItem[]): StreamItem[] {
 /**
  * The source message a display row belongs to. Every assistant message is split into
  * Markdown blocks, so an assistant row id never equals its message id; anything that
- * addresses a message — find, scroll-to-message, history reveal — asks for this.
+ * addresses a message — find, scroll-to-message, history reveal — asks for this. A
+ * plugin row a timeline transformer projected answers for the item it replaced, whose
+ * id is what the chat outline and find hold.
  */
 export function getStreamItemMessageId(item: StreamItem): string {
-  return item.kind === "assistant_message" ? (item.blockGroupId ?? item.id) : item.id;
+  if (item.kind === "assistant_message") return item.blockGroupId ?? item.id;
+  if (item.kind === "plugin") return item.sourceId ?? item.id;
+  return item.id;
 }
 
 /**

packages/app/src/app/_layout.tsx

@@ -1,3 +1,4 @@
+import { ComposerEditingSessionsProvider } from "@/composer/editing-session";
 import "@/styles/unistyles";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { PortalProvider } from "@gorhom/portal";
@@ -102,7 +103,6 @@ import {
   useKeyboardActionDispatcher,
 } from "@/keyboard/keyboard-action-dispatcher-context";
 import { polyfillCrypto } from "@/polyfills/crypto";
-import { polyfillNavigator } from "@/polyfills/navigator";
 import {
   getHostRuntimeStore,
   hasConfiguredLocalDaemonOverride,
@@ -116,6 +116,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { flushDraftPersistStorage } from "@/stores/draft-store";
 import { getNextThemePreference, ICON_STROKE_WIDTH } from "@/styles/theme";
 import { useSessionStore } from "@/stores/session-store";
+import { WorkspaceLayoutModePublisher } from "@/workspace-tabs/layout-mode-publisher";
 import { installWebScrollbarStyles } from "@/styles/install-web-scrollbar-styles";
 import type { HostProfile } from "@/types/host-connection";
 import {
@@ -138,7 +139,6 @@ import {
   type WebNotificationClickDetail,
 } from "@/utils/os-notifications";
 
-polyfillNavigator();
 polyfillCrypto();
 
 export interface HostRuntimeBootstrapState {
@@ -550,6 +550,7 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
   }
   const workspaceChrome = (
     <View style={rowStyle}>
+      <WorkspaceLayoutModePublisher />
       {!isCompactLayout ? (
         <WindowChromeRegion corners={appChromeLayout.sidebarCorners}>
           {themedSidebarChrome}
@@ -625,7 +626,11 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
     surface
   );
 
-  return <CommandCenterProvider>{content}</CommandCenterProvider>;
+  return (
+    <ComposerEditingSessionsProvider>
+      <CommandCenterProvider>{content}</CommandCenterProvider>
+    </ComposerEditingSessionsProvider>
+  );
 }
 
 function SidebarChrome({

packages/app/src/appearance/provider.tsx

@@ -21,6 +21,7 @@ import {
 } from "@/plugins/themes";
 import { PLUGIN_THEME_NAMES, PLUGIN_THEME_PREFERENCE, THEME_TO_UNISTYLES } from "@/styles/theme";
 import { applyAppearance } from "./apply";
+import { AppearanceSystemBars } from "./system-bars";
 
 interface ContributedThemes {
   options: PluginThemeOption[];
@@ -107,7 +108,10 @@ export function AppearanceProvider({ children }: { children: ReactNode }) {
   if (!hasAppliedAppearance) return null;
 
   return (
-    <ContributedThemesContext.Provider value={value}>{children}</ContributedThemesContext.Provider>
+    <ContributedThemesContext.Provider value={value}>
+      <AppearanceSystemBars />
+      {children}
+    </ContributedThemesContext.Provider>
   );
 }
 

packages/app/src/appearance/system-bars.android.tsx

@@ -0,0 +1,11 @@
+import { SystemBars } from "react-native-edge-to-edge";
+import { withUnistyles } from "react-native-unistyles";
+import type { Theme } from "@/styles/theme";
+
+function ThemeSystemBars({ colorScheme }: Pick<Theme, "colorScheme">) {
+  return <SystemBars style={colorScheme === "light" ? "dark" : "light"} />;
+}
+
+export const AppearanceSystemBars = withUnistyles(ThemeSystemBars, (theme) => ({
+  colorScheme: theme.colorScheme,
+}));

packages/app/src/appearance/system-bars.tsx

@@ -0,0 +1,3 @@
+export function AppearanceSystemBars() {
+  return null;
+}

packages/app/src/components/markdown/html-ish.test.ts

@@ -3,6 +3,71 @@ import { describe, expect, it } from "vitest";
 import { normalizeHtmlishMarkdown, splitHtmlishMarkdown } from "./html-ish";
 
 describe("splitHtmlishMarkdown", () => {
+  it("renders heading text beside a linked picture without literal heading tags", () => {
+    const source =
+      '<h2><a href="https://example.com/r"><picture><source srcset="https://example.com/d.svg"><img alt="Retrigger" src="https://example.com/l.svg"></picture></a>Confidence Score: 5/5</h2>';
+
+    expect(splitHtmlishMarkdown(source)).toEqual([
+      {
+        kind: "inlineImage",
+        alt: "Retrigger",
+        src: "https://example.com/l.svg",
+        href: "https://example.com/r",
+        flowsWithText: true,
+      },
+      { kind: "markdown", text: "Confidence Score: 5/5" },
+    ]);
+  });
+
+  it.each(["h1", "h2", "h3", "h4", "h5", "h6"])(
+    "keeps a mixed %s heading together after preceding markdown",
+    (heading) => {
+      const source = `Intro\n\n<${heading}><img alt="Icon" src="https://example.com/icon.svg">Caption</${heading}>\n\nOutro`;
+
+      expect(splitHtmlishMarkdown(source)).toEqual([
+        { kind: "markdown", text: "Intro\n\n" },
+        {
+          kind: "inlineImage",
+          alt: "Icon",
+          src: "https://example.com/icon.svg",
+          flowsWithText: true,
+        },
+        { kind: "markdown", text: "Caption\n\nOutro" },
+      ]);
+    },
+  );
+
+  it("preserves formatted text before and after images in a details heading", () => {
+    const source =
+      '<details><summary>More</summary><h2><strong>Before</strong><img alt="Icon" src="https://example.com/icon.svg"><em>After</em></h2></details>';
+
+    expect(splitHtmlishMarkdown(source)).toEqual([
+      {
+        kind: "details",
+        summary: "More",
+        body: "**Before***After*",
+        bodyParts: [
+          { kind: "markdown", text: "**Before**" },
+          { kind: "inlineImage", alt: "Icon", src: "https://example.com/icon.svg" },
+          { kind: "markdown", text: "*After*" },
+        ],
+      },
+    ]);
+  });
+
+  it("keeps mixed HTML headings literal in code examples", () => {
+    const heading = '<h2><img src="https://example.com/icon.svg">Caption</h2>';
+    const source = `Use \`${heading}\`\n\n\`\`\`html\n${heading}\n\`\`\``;
+
+    expect(splitHtmlishMarkdown(source)).toEqual([{ kind: "markdown", text: source }]);
+  });
+
+  it("preserves unknown wrappers around text-only headings", () => {
+    expect(splitHtmlishMarkdown("<section><h2>Heading</h2></section>")).toEqual([
+      { kind: "markdown", text: "<section>Heading</section>" },
+    ]);
+  });
+
   const inlineImageBody = [
     '<a href="#"><img alt="Priority" src="https://example.com/assets/priority.svg?v=9" align="top"></a> Spoofed browser User-Agent allows access control bypass',
     "",

packages/app/src/components/markdown/html-ish.ts

@@ -125,9 +125,20 @@ function splitHtmlishTokens(tokens: HtmlToken[]): MarkdownDisplayPart[] {
       continue;
     }
 
-    const nextDetailsIndex = findNextOpenTag(tokens, cursor + 1, "details");
-    const nextInlineImageIndex = findNextInlineImageIndex(tokens, cursor + 1);
-    const end = Math.min(nextDetailsIndex ?? tokens.length, nextInlineImageIndex ?? tokens.length);
+    if (isHeadingTag(token)) {
+      const closeIndex = findMixedHeadingClose(tokens, cursor);
+      if (closeIndex !== null) {
+        // Headings render as their contents. Split those contents together so an
+        // embedded image cannot strand the opening heading tag in a text slice.
+        for (const part of splitHtmlishTokens(tokens.slice(cursor + 1, closeIndex))) {
+          appendDisplayPart(parts, part);
+        }
+        cursor = closeIndex + 1;
+        continue;
+      }
+    }
+
+    const end = findNextDisplayPartIndex(tokens, cursor + 1) ?? tokens.length;
     appendMarkdownPart(parts, renderInlineTokens(tokens.slice(cursor, end)));
     cursor = end;
   }
@@ -259,15 +270,44 @@ function flowsWithFollowingText(tokens: HtmlToken[], start: number, end: number)
   return false;
 }
 
-function findNextInlineImageIndex(tokens: HtmlToken[], start: number): number | null {
+function findNextDisplayPartIndex(tokens: HtmlToken[], start: number): number | null {
   for (let index = start; index < tokens.length; index += 1) {
-    if (parseInlineImageAt(tokens, index)) {
+    if (
+      isOpenTag(tokens[index], "details") ||
+      findMixedHeadingClose(tokens, index) !== null ||
+      parseInlineImageAt(tokens, index)
+    ) {
       return index;
     }
   }
   return null;
 }
 
+function findMixedHeadingClose(tokens: HtmlToken[], start: number): number | null {
+  const token = tokens[start];
+  if (!isHeadingTag(token)) {
+    return null;
+  }
+  const closeIndex = findMatchingClose(tokens, start, token.name);
+  if (closeIndex === null) {
+    return null;
+  }
+  for (let index = start + 1; index < closeIndex; index += 1) {
+    if (parseInlineImageAt(tokens, index)) {
+      return closeIndex;
+    }
+  }
+  return null;
+}
+
+function appendDisplayPart(parts: MarkdownDisplayPart[], part: MarkdownDisplayPart): void {
+  if (part.kind === "markdown") {
+    appendMarkdownPart(parts, part.text);
+  } else {
+    parts.push(part);
+  }
+}
+
 function appendMarkdownPart(parts: MarkdownDisplayPart[], text: string): void {
   if (!text) {
     return;

packages/app/src/components/provider-diagnostic-sheet.tsx

@@ -95,11 +95,11 @@ function CustomModelRow({
 
   return (
     <View style={sheetStyles.modelRow}>
-      <Text style={sheetStyles.modelTitle} numberOfLines={1}>
+      <Text style={[sheetStyles.modelTitle, sheetStyles.customModelText]} numberOfLines={1}>
         {model.label}
       </Text>
       <Text
-        style={sheetStyles.monoHint}
+        style={[sheetStyles.monoHint, sheetStyles.customModelText]}
         numberOfLines={1}
         selectable
         dataSet={CODE_SURFACE_DATASET}
@@ -762,6 +762,7 @@ const sheetStyles = StyleSheet.create((theme) => ({
   iconButton: {
     width: 28,
     height: 28,
+    flexShrink: 0,
     borderRadius: theme.borderRadius.full,
     alignItems: "center",
     justifyContent: "center",
@@ -807,6 +808,10 @@ const sheetStyles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.base,
     flexShrink: 0,
   },
+  customModelText: {
+    flexShrink: 1,
+    minWidth: 0,
+  },
   modelRowFiller: {
     flex: 1,
   },

packages/app/src/components/question-form-card-core.test.ts

@@ -147,4 +147,29 @@ describe("question form card core", () => {
       Response: "custom",
     });
   });
+
+  test("keeps option previews so options can be compared", () => {
+    const questions = parseQuestionFormQuestions({
+      questions: [
+        {
+          question: "Which layout?",
+          header: "Layout",
+          options: [
+            {
+              label: "Tabs",
+              description: "One tab per section",
+              preview: "<Tabs>\n  <Tab />\n</Tabs>",
+            },
+            { label: "Single page" },
+          ],
+          multiSelect: false,
+        },
+      ],
+    });
+
+    expect(questions?.[0]?.options).toEqual([
+      { label: "Tabs", description: "One tab per section", preview: "<Tabs>\n  <Tab />\n</Tabs>" },
+      { label: "Single page", description: undefined, preview: undefined },
+    ]);
+  });
 });

packages/app/src/components/question-form-card-core.ts

@@ -1,6 +1,7 @@
 export interface QuestionOption {
   label: string;
   description?: string;
+  preview?: string;
 }
 
 export interface QuestionFormQuestion {
@@ -46,6 +47,7 @@ export function parseQuestionFormQuestions(input: unknown): QuestionFormQuestion
       options.push({
         label: o.label,
         description: typeof o.description === "string" ? o.description : undefined,
+        preview: readOptionalString(o, "preview"),
       });
     }
     questions.push({

packages/app/src/components/question-form-card.tsx

@@ -10,6 +10,7 @@ import type { AgentPermissionResponse } from "@getpaseo/protocol/agent-types";
 import { isWeb } from "@/constants/platform";
 import { EditingTextInput as TextInput } from "@/components/ui/text-input";
 import type { EditingTextInputHandle } from "@/components/ui/text-input/types";
+import { ScrollableCodeSurface } from "@/components/ui/scrollable-code-surface";
 import {
   areQuestionsAnswered,
   buildQuestionFormAnswers,
@@ -29,6 +30,9 @@ interface QuestionFormCardProps {
 }
 
 const IS_WEB = isWeb;
+// Native previews are uncapped: inside the option's Pressable, Android never hands a
+// drag to the preview's nested scroll, so lines past a cap would be unreachable.
+const OPTION_PREVIEW_MAX_HEIGHT = IS_WEB ? 240 : undefined;
 
 function getQuestionInputPlaceholder({
   question,
@@ -133,6 +137,20 @@ function QuestionOptionRow({
           {option.description ? (
             <Text style={optionDescriptionStyle}>{option.description}</Text>
           ) : null}
+          {option.preview ? (
+            // Shown for every option at once so they can be compared before picking.
+            // Long lines wrap, as in Claude Code, since most previews are prose.
+            <ScrollableCodeSurface
+              tone="surface0"
+              maxHeight={OPTION_PREVIEW_MAX_HEIGHT}
+              horizontal={false}
+              selectable={false}
+              textStyle={styles.optionPreviewText}
+              testID="question-form-option-preview"
+            >
+              {option.preview}
+            </ScrollableCodeSurface>
+          ) : null}
         </View>
       </View>
     </Pressable>
@@ -704,6 +722,10 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.base,
     lineHeight: 20,
   },
+  optionPreviewText: {
+    lineHeight: 20,
+    ...(isWeb ? { whiteSpace: "pre-wrap", overflowWrap: "break-word" } : null),
+  },
   selectionControl: {
     width: 18,
     height: 18,

packages/app/src/components/ui/text-input/text-input.native.test.tsx

@@ -56,6 +56,16 @@ afterEach(() => {
 
 function noop() {}
 
+function createHandleRecorder() {
+  const handleRef = createRef<EditingTextInputHandle>();
+  const received: (EditingTextInputHandle | null)[] = [];
+  function assignHandle(handle: EditingTextInputHandle | null) {
+    received.push(handle);
+    handleRef.current = handle;
+  }
+  return { handleRef, received, assignHandle };
+}
+
 describe("EditingTextInputNative", () => {
   it("uses the bottom-sheet input only inside a bottom sheet", () => {
     act(() => {
@@ -76,6 +86,32 @@ describe("EditingTextInputNative", () => {
     expect(bottomSheetTextInputRender.mock.calls[0]?.[0]).toMatchObject({ testID: "inside" });
   });
 
+  it("keeps its editing handle and selection when native editing rerenders the leaf", () => {
+    const { handleRef, received, assignHandle } = createHandleRecorder();
+    act(() =>
+      root?.render(<EditingTextInput ref={assignHandle} initialValue="initial" multiline />),
+    );
+    const input = container?.querySelector("textarea");
+    if (!input) throw new Error("Expected native editing surface");
+    const handle = handleRef.current;
+    act(() => {
+      handle?.focus();
+      const setValue = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+      if (!setValue) throw new Error("Expected input value setter");
+      setValue.call(input, "native edit");
+      input.setSelectionRange(2, 5);
+      input.dispatchEvent(new InputEvent("input", { bubbles: true, data: "native edit" }));
+    });
+    expect(handleRef.current).toBe(handle);
+    expect(received).toEqual([handle]);
+    expect(handle?.getText()).toBe("native edit");
+    expect([input.selectionStart, input.selectionEnd]).toEqual([2, 5]);
+    expect(document.activeElement).toBe(input);
+    act(() => root?.unmount());
+    root = null;
+    expect(received).toEqual([handle, null]);
+  });
+
   it("clears text via clear() when replaceText receives an empty string", () => {
     const handleRef = createRef<EditingTextInputHandle>();
 
@@ -105,12 +141,14 @@ describe("EditingTextInputNative", () => {
       );
     });
     const grownInput = container?.querySelector("input");
+    const handle = handleRef.current;
 
     act(() => {
       handleRef.current?.reset();
     });
 
     expect(container?.querySelector("input")).not.toBe(grownInput);
+    expect(handleRef.current).toBe(handle);
   });
 
   it("restores focus after replacing a reset native input", () => {

packages/app/src/components/ui/text-input/text-input.native.tsx

@@ -69,52 +69,56 @@ export const EditingTextInput = forwardRef<EditingTextInputHandle, EditingTextIn
       setReplacement((current) => ({ ...current, autoFocus }));
     }, []);
 
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        if (isAwaitingReplacementRef.current) {
-          setReplacementFocus(true);
-          return;
-        }
-        inputRef.current?.focus();
-      },
-      blur: () => {
-        if (isAwaitingReplacementRef.current) {
-          setReplacementFocus(false);
-          return;
-        }
-        inputRef.current?.blur();
-      },
-      isFocused: () => inputRef.current?.isFocused?.() ?? false,
-      getText: () => textRef.current,
-      replaceText: (nextText, selection) => {
-        textRef.current = nextText;
-        if (inputRef.current?.replaceText) {
-          inputRef.current.replaceText(nextText, selection);
-          return;
-        }
-        if (nextText === "") {
-          inputRef.current?.clear?.();
-          return;
-        }
-        inputRef.current?.setNativeProps?.({
-          text: nextText,
-          ...(selection ? { selection } : {}),
-        });
-        if (selection) inputRef.current?.setSelection?.(selection.start, selection.end);
-      },
-      reset: () => {
-        textRef.current = "";
-        const autoFocus = inputRef.current?.isFocused?.() ?? false;
-        if (inputRef.current?.replaceText) {
-          inputRef.current.replaceText("");
-        } else {
-          inputRef.current?.clear?.();
-        }
-        isAwaitingReplacementRef.current = true;
-        setReplacement((current) => ({ revision: current.revision + 1, autoFocus }));
-      },
-      getNativeRef: () => inputRef.current?.getNativeRef?.() ?? inputRef.current,
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => {
+          if (isAwaitingReplacementRef.current) {
+            setReplacementFocus(true);
+            return;
+          }
+          inputRef.current?.focus();
+        },
+        blur: () => {
+          if (isAwaitingReplacementRef.current) {
+            setReplacementFocus(false);
+            return;
+          }
+          inputRef.current?.blur();
+        },
+        isFocused: () => inputRef.current?.isFocused?.() ?? false,
+        getText: () => textRef.current,
+        replaceText: (nextText, selection) => {
+          textRef.current = nextText;
+          if (inputRef.current?.replaceText) {
+            inputRef.current.replaceText(nextText, selection);
+            return;
+          }
+          if (nextText === "") {
+            inputRef.current?.clear?.();
+            return;
+          }
+          inputRef.current?.setNativeProps?.({
+            text: nextText,
+            ...(selection ? { selection } : {}),
+          });
+          if (selection) inputRef.current?.setSelection?.(selection.start, selection.end);
+        },
+        reset: () => {
+          textRef.current = "";
+          const autoFocus = inputRef.current?.isFocused?.() ?? false;
+          if (inputRef.current?.replaceText) {
+            inputRef.current.replaceText("");
+          } else {
+            inputRef.current?.clear?.();
+          }
+          isAwaitingReplacementRef.current = true;
+          setReplacement((current) => ({ revision: current.revision + 1, autoFocus }));
+        },
+        getNativeRef: () => inputRef.current?.getNativeRef?.() ?? inputRef.current,
+      }),
+      [setReplacementFocus],
+    );
 
     const handleChangeText = useCallback(
       (nextText: string) => {

packages/app/src/components/ui/text-input/text-input.web.tsx

@@ -57,31 +57,35 @@ export const EditingTextInput = forwardRef<EditingTextInputHandle, EditingTextIn
       onChangeTextRef.current?.(nextText);
     }, []);
 
-    useImperativeHandle(ref, () => ({
-      focus: () => inputRef.current?.focus(),
-      blur: () => inputRef.current?.blur(),
-      isFocused: () => document.activeElement === inputRef.current,
-      getText: () => {
-        const input = inputRef.current as WebTextInputElement | null;
-        const nextText = input?.value ?? textRef.current;
-        textRef.current = nextText;
-        return nextText;
-      },
-      replaceText: (nextText, selection) => {
-        textRef.current = nextText;
-        const input = inputRef.current as WebTextInputElement | null;
-        if (input && "value" in input) input.value = nextText;
-        if (selection && typeof input?.setSelectionRange === "function") {
-          input.setSelectionRange(selection.start, selection.end);
-        }
-      },
-      reset: () => {
-        textRef.current = "";
-        const input = inputRef.current as WebTextInputElement | null;
-        if (input && "value" in input) input.value = "";
-      },
-      getNativeRef: () => inputRef.current,
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        isFocused: () => document.activeElement === inputRef.current,
+        getText: () => {
+          const input = inputRef.current as WebTextInputElement | null;
+          const nextText = input?.value ?? textRef.current;
+          textRef.current = nextText;
+          return nextText;
+        },
+        replaceText: (nextText, selection) => {
+          textRef.current = nextText;
+          const input = inputRef.current as WebTextInputElement | null;
+          if (input && "value" in input) input.value = nextText;
+          if (selection && typeof input?.setSelectionRange === "function") {
+            input.setSelectionRange(selection.start, selection.end);
+          }
+        },
+        reset: () => {
+          textRef.current = "";
+          const input = inputRef.current as WebTextInputElement | null;
+          if (input && "value" in input) input.value = "";
+        },
+        getNativeRef: () => inputRef.current,
+      }),
+      [],
+    );
 
     return (
       <TextInput

packages/app/src/components/ui/text-input/types.ts

@@ -1,6 +1,7 @@
 import type { TextInputProps } from "react-native";
 import type { NativePastedFile } from "@/composer/native-pasted-image";
 
+/** Stable for the mounted editor lifetime; reset() owns any inner input replacement. */
 export interface EditingTextInputHandle {
   focus(): void;
   blur(): void;

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

@@ -125,8 +125,7 @@ function buildCreateAgentOptions({
   provider,
 }: {
   composerState: {
-    modeOptions: { id: string }[];
-    selectedMode: string;
+    effectiveModeId: string;
     effectiveModelId: string | null;
     effectiveThinkingOptionId: string | null;
   };
@@ -137,20 +136,11 @@ function buildCreateAgentOptions({
   workspaceId: string;
   provider: CreateAgentRequestOptions["provider"];
 }): CreateAgentRequestOptions {
-  // Reconcile the selected mode against the discovered modes. The mode picker
-  // shows modeOptions[0] when the stored mode isn't in the list (e.g. a stale
-  // globally-remembered mode this workspace's provider config no longer
-  // defines), so the submitted mode must match that display rather than send a
-  // stale mode the provider would reject.
-  const modeOptionIds = composerState.modeOptions.map((mode) => mode.id);
-  const reconciledMode = modeOptionIds.includes(composerState.selectedMode)
-    ? composerState.selectedMode
-    : (modeOptionIds[0] ?? "");
   return {
     provider,
     cwd: workspaceDirectory,
     workspaceId,
-    ...(reconciledMode !== "" ? { modeId: reconciledMode } : {}),
+    ...(composerState.effectiveModeId ? { modeId: composerState.effectiveModeId } : {}),
     ...(composerState.effectiveModelId ? { model: composerState.effectiveModelId } : {}),
     ...(composerState.effectiveThinkingOptionId
       ? { thinkingOptionId: composerState.effectiveThinkingOptionId }

packages/app/src/composer/dock/index.native.tsx

@@ -2,6 +2,7 @@ import { ComposerDockBackground } from "./internal/background";
 export { ComposerDockBackground } from "./internal/background";
 import { ScrollView } from "@/components/ui/scroll-view";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 import { resolveContentMaxWidth, useAppSettings } from "@/hooks/use-settings";
 import { KeyboardTranslateView } from "@/keyboard/shift";
@@ -17,6 +18,7 @@ import Animated, {
 import { useKeyboardShift } from "@/keyboard/shift";
 import {
   resolveCenteredClearance,
+  resolveInlineComposerCapacity,
   updateComposerCapacity,
   type ComposerCapacity,
 } from "./internal/capacity";
@@ -71,12 +73,13 @@ function ComposerViewport({
 
 /** Bound the complete composer (including its controls), not just the text input. */
 function ComposerViewportContent({ style, ...props }: ViewProps) {
+  const compact = useIsCompactFormFactor();
   const capacity = useContext(ViewportCapacity);
   if (!capacity) throw new Error("ComposerViewportContent requires ComposerViewport");
   const constraint = useAnimatedStyle(() => ({
     // Only viewport changes and keyboard start/end events trigger layout. Motion
     // stays in KeyboardTranslateView and never changes this constraint per frame.
-    maxHeight: capacity.value,
+    maxHeight: resolveInlineComposerCapacity(capacity.value, compact),
   }));
 
   return (

packages/app/src/composer/dock/index.tsx

@@ -1,8 +1,10 @@
 export { ComposerDockBackground } from "./internal/background";
 import { ScrollView } from "@/components/ui/scroll-view";
-import type { ReactNode } from "react";
+import { useState, useCallback, useMemo, type ReactNode } from "react";
 import { View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
+import { resolveInlineComposerCapacity } from "./internal/capacity";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { HEADER_INNER_HEIGHT } from "@/constants/layout";
 
 interface ComposerDockProps {
@@ -14,23 +16,33 @@ export function ComposerDock({
   children: [content, composer, overlay],
   centered = false,
 }: ComposerDockProps) {
+  const compact = useIsCompactFormFactor();
+  const [availableHeight, setAvailableHeight] = useState<number>();
+  const constraint = useMemo(
+    () => ({ maxHeight: resolveInlineComposerCapacity(availableHeight, compact) }),
+    [availableHeight, compact],
+  );
+  const measureViewport = useCallback((event: import("react-native").LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    if (height > 0) setAvailableHeight(height);
+  }, []);
   if (centered) {
     return (
-      <View style={styles.centered}>
+      <View style={styles.centered} onLayout={measureViewport}>
         <View style={styles.form}>
           <ScrollView style={styles.setup} keyboardShouldPersistTaps="handled">
             {content}
           </ScrollView>
-          <View style={styles.centeredComposer}>{composer}</View>
+          <View style={[styles.centeredComposer, constraint]}>{composer}</View>
           {overlay}
         </View>
       </View>
     );
   }
   return (
-    <View style={styles.surface}>
+    <View style={styles.surface} onLayout={measureViewport}>
       <View style={styles.content}>{content}</View>
-      <View style={styles.composer}>{composer}</View>
+      <View style={[styles.composer, constraint]}>{composer}</View>
       {overlay}
     </View>
   );

packages/app/src/composer/dock/internal/capacity.test.ts

@@ -1,11 +1,24 @@
 import { describe, expect, it } from "vitest";
 import {
   resolveCenteredClearance,
+  resolveInlineComposerCapacity,
   resolveComposerCapacity,
   updateComposerCapacity,
 } from "./capacity";
 
 describe("composer viewport", () => {
+  it("caps the complete compact composer at sixty percent of keyboard-reserved space", () => {
+    const open = updateComposerCapacity(undefined, {
+      height: 582,
+      bottomInset: 24,
+      safeAreaBottom: 0,
+      centered: false,
+      keyboardShift: 308,
+    });
+    expect(resolveInlineComposerCapacity(open.capacity, true)).toBe(147);
+    expect(resolveInlineComposerCapacity(open.capacity, false)).toBe(245);
+    expect(resolveInlineComposerCapacity(undefined, true)).toBeUndefined();
+  });
   it("preserves the editing capacity when the keyboard closes", () => {
     const viewport = { height: 582, bottomInset: 24, safeAreaBottom: 0, centered: false };
     const open = updateComposerCapacity(undefined, { ...viewport, keyboardShift: 308 });

packages/app/src/composer/dock/internal/capacity.ts

@@ -50,3 +50,13 @@ export function updateComposerCapacity(
     capacity: resolveComposerCapacity({ ...input, keyboardShift: keyboardReserve }),
   };
 }
+
+/** Compact editing leaves conversation space above the complete composer. */
+export function resolveInlineComposerCapacity(
+  capacity: number | undefined,
+  compact: boolean,
+): number | undefined {
+  "worklet";
+  if (capacity === undefined) return undefined;
+  return compact ? capacity * 0.6 : capacity;
+}

packages/app/src/composer/draft/input-draft.ts

@@ -17,6 +17,7 @@ import {
 } from "@/composer/draft/input-draft-core";
 import {
   buildDraftCommandTarget,
+  resolveEffectiveComposerModeId,
   resolveEffectiveComposerModelId,
   resolveEffectiveComposerThinkingOptionId,
   type ProviderSelectionState,
@@ -46,6 +47,7 @@ interface UseAgentInputDraftInput {
 
 type DraftComposerState = UseAgentFormStateResult & {
   workingDir: string;
+  effectiveModeId: string;
   effectiveModelId: string;
   effectiveThinkingOptionId: string;
   featureValues: Record<string, unknown> | undefined;
@@ -115,6 +117,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
   const isHydrated = hydratedDraftKey === draftKey;
   const textReplacementRevisionRef = useRef(0);
   const [textReplacement, setTextReplacement] = useState<TextReplacement>(() => ({
+    kind: "initial",
     key: `${draftKey}:0`,
     text: textSource.getSnapshot(),
   }));
@@ -123,6 +126,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
     (nextText: string) => {
       textReplacementRevisionRef.current += 1;
       setTextReplacement({
+        kind: "replace",
         key: `${draftKey}:${textReplacementRevisionRef.current}`,
         text: nextText,
       });
@@ -254,6 +258,11 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
     ],
   );
 
+  const effectiveModeId = useMemo(
+    () => resolveEffectiveComposerModeId(providerSelection, formState.isModelLoading),
+    [formState.isModelLoading, providerSelection],
+  );
+
   const effectiveModelId = useMemo(
     () => resolveEffectiveComposerModelId(providerSelection),
     [providerSelection],
@@ -313,6 +322,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
     return {
       ...formState,
       workingDir,
+      effectiveModeId,
       effectiveModelId,
       effectiveThinkingOptionId,
       featureValues: draftFeatureValues,
@@ -327,6 +337,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
   }, [
     commandDraft,
     composerOptions,
+    effectiveModeId,
     effectiveModelId,
     effectiveThinkingOptionId,
     draftFeatures,
@@ -353,6 +364,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
 
 export const __private__ = {
   resolveDraftKey,
+  resolveEffectiveComposerModeId,
   resolveEffectiveComposerModelId,
   resolveEffectiveComposerThinkingOptionId,
   buildDraftCommandTarget,

packages/app/src/composer/draft/workspace-tab.tsx

@@ -86,46 +86,30 @@ function resolveAutoSubmitConfig(
   };
 }
 
-// Reconcile the form's selected mode against the currently discovered modes.
-// The mode picker displays modeOptions[0] when the stored mode isn't in the
-// list (e.g. a globally-remembered "plan" that this workspace's OpenCode config
-// no longer defines), so the submitted mode must match that display — otherwise
-// we'd send a stale mode the provider rejects while the UI showed a valid one.
-function reconcileSelectedMode(modeOptionIds: readonly string[], selectedMode: string): string {
-  if (modeOptionIds.length === 0) {
-    return "";
-  }
-  return modeOptionIds.includes(selectedMode) ? selectedMode : (modeOptionIds[0] ?? "");
-}
-
 function resolveDraftModeIdOverride(input: {
   autoSubmitConfig: AutoSubmitConfig | null;
-  modeOptionIds: readonly string[];
-  selectedMode: string;
+  effectiveModeId: string;
 }): { modeId: string } | Record<string, never> {
-  const { autoSubmitConfig, modeOptionIds, selectedMode } = input;
+  const { autoSubmitConfig, effectiveModeId } = input;
   if (autoSubmitConfig?.modeId) {
     return { modeId: autoSubmitConfig.modeId };
   }
-  const reconciled = reconcileSelectedMode(modeOptionIds, selectedMode);
-  if (reconciled !== "") {
-    return { modeId: reconciled };
+  if (effectiveModeId !== "") {
+    return { modeId: effectiveModeId };
   }
   return {};
 }
 
 function resolveDraftModeId(input: {
   autoSubmitConfig: AutoSubmitConfig | null;
-  modeOptionIds: readonly string[];
-  selectedMode: string;
+  effectiveModeId: string;
 }): string | null {
-  const { autoSubmitConfig, modeOptionIds, selectedMode } = input;
+  const { autoSubmitConfig, effectiveModeId } = input;
   if (autoSubmitConfig?.modeId !== undefined) {
     return autoSubmitConfig.modeId;
   }
-  const reconciled = reconcileSelectedMode(modeOptionIds, selectedMode);
-  if (reconciled !== "") {
-    return reconciled;
+  if (effectiveModeId !== "") {
+    return effectiveModeId;
   }
   return null;
 }
@@ -143,8 +127,7 @@ async function submitDraftCreateRequest(input: {
   autoSubmitConfig: AutoSubmitConfig | null;
   composerState: {
     selectedProvider: string | null;
-    selectedMode: string;
-    modeOptions: readonly { id: string }[];
+    effectiveModeId: string;
     effectiveModelId: string | null;
     effectiveThinkingOptionId: string | null;
     featureValues: Record<string, unknown> | undefined;
@@ -177,8 +160,7 @@ async function submitDraftCreateRequest(input: {
   }
   const modeIdOverride = resolveDraftModeIdOverride({
     autoSubmitConfig,
-    modeOptionIds: composerState.modeOptions.map((mode) => mode.id),
-    selectedMode: composerState.selectedMode,
+    effectiveModeId: composerState.effectiveModeId,
   });
   const config = buildWorkspaceDraftAgentConfig({
     provider,
@@ -219,8 +201,7 @@ function buildDraftAgentSnapshot(input: {
   composerState: {
     effectiveModelId: string | null;
     effectiveThinkingOptionId: string | null;
-    modeOptions: readonly { id: string }[];
-    selectedMode: string;
+    effectiveModeId: string;
     selectedProvider: string | null;
     agentControls: { features?: Agent["features"] };
   };
@@ -234,8 +215,7 @@ function buildDraftAgentSnapshot(input: {
     autoSubmitConfig?.thinkingOptionId ?? (composerState.effectiveThinkingOptionId || null);
   const modeId = resolveDraftModeId({
     autoSubmitConfig,
-    modeOptionIds: composerState.modeOptions.map((mode) => mode.id),
-    selectedMode: composerState.selectedMode,
+    effectiveModeId: composerState.effectiveModeId,
   });
   const provider = autoSubmitConfig?.provider ?? composerState.selectedProvider;
   if (!provider) {

packages/app/src/composer/editing-session/index.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { ComposerEditingSession } from "./index";
+
+function leaveLiveDraft(session: ComposerEditingSession) {
+  session.captureForRemount({
+    snapshot: { text: "Unpublished live draft", selection: { start: 4, end: 17 } },
+    focused: true,
+    replacementKey: "draft:applied",
+  });
+}
+
+describe("composer editing remount handoff", () => {
+  it("keeps live text and selection when remounting from an initial draft publication", () => {
+    const session = new ComposerEditingSession();
+    leaveLiveDraft(session);
+    const handoff = session.takeHandoff({ kind: "initial", key: "draft:initial", text: "stale" });
+    expect(handoff?.snapshot).toEqual({
+      text: "Unpublished live draft",
+      selection: { start: 4, end: 17 },
+    });
+    expect(handoff?.focused).toBe(true);
+  });
+
+  it("keeps local edits when the last applied replacement is still current", () => {
+    const session = new ComposerEditingSession();
+    leaveLiveDraft(session);
+    const handoff = session.takeHandoff({
+      kind: "replace",
+      key: "draft:applied",
+      text: "old replacement",
+    });
+    expect(handoff?.snapshot).toEqual({
+      text: "Unpublished live draft",
+      selection: { start: 4, end: 17 },
+    });
+  });
+
+  it.each(["New explicit draft", ""])(
+    "honors an explicit replacement made while the editor is absent: %j",
+    (text) => {
+      const session = new ComposerEditingSession();
+      leaveLiveDraft(session);
+      const handoff = session.takeHandoff({ kind: "replace", key: "draft:new", text });
+      expect(handoff?.snapshot).toEqual({
+        text,
+        selection: { start: text.length, end: text.length },
+      });
+      expect(handoff?.focused).toBe(true);
+      expect(session.takeHandoff({ kind: "replace", key: "draft:new", text })).toBeNull();
+    },
+  );
+});

packages/app/src/composer/editing-session/index.tsx

@@ -0,0 +1,142 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
+import type { TextReplacement } from "@/composer/types";
+import type { ComposerInputMode } from "@/composer/input-mode";
+
+export interface ComposerEditingHandoff {
+  snapshot: { text: string; selection: { start: number; end: number } };
+  focused: boolean;
+  replacementKey: string;
+}
+
+/** Editing metadata outlives a layout's input; draft text still belongs to its draft owner. */
+export class ComposerEditingSession {
+  private fullscreen = false;
+  private handoff: ComposerEditingHandoff | null = null;
+  private listeners = new Set<() => void>();
+  getFullscreen = () => this.fullscreen;
+  subscribe = (listener: () => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+  changePresentation(fullscreen: boolean, handoff: ComposerEditingHandoff) {
+    this.captureForRemount(handoff);
+    if (fullscreen === this.fullscreen) return;
+    this.fullscreen = fullscreen;
+    for (const listener of this.listeners) listener();
+  }
+  captureForRemount(handoff: ComposerEditingHandoff) {
+    this.handoff = handoff;
+  }
+  peekHandoff(replacement: TextReplacement): ComposerEditingHandoff | null {
+    const handoff = this.handoff;
+    if (!handoff || replacement.kind === "initial" || replacement.key === handoff.replacementKey)
+      return handoff;
+    // A replacement command issued since capture supersedes the old editor's live buffer.
+    return {
+      snapshot: {
+        text: replacement.text,
+        selection: { start: replacement.text.length, end: replacement.text.length },
+      },
+      focused: handoff.focused,
+      replacementKey: replacement.key,
+    };
+  }
+  takeHandoff(replacement: TextReplacement) {
+    const handoff = this.peekHandoff(replacement);
+    this.handoff = null;
+    return handoff;
+  }
+}
+
+class ComposerEditingSessions {
+  private workspaces = new Map<
+    string,
+    Map<string, { targetKey: string; sessions: Map<ComposerInputMode, ComposerEditingSession> }>
+  >();
+  get(workspaceKey: string, tabId: string, targetKey: string, purpose: ComposerInputMode) {
+    let workspace = this.workspaces.get(workspaceKey);
+    if (!workspace) {
+      workspace = new Map();
+      this.workspaces.set(workspaceKey, workspace);
+    }
+    let tab = workspace.get(tabId);
+    if (!tab || tab.targetKey !== targetKey) {
+      tab = { targetKey, sessions: new Map() };
+      workspace.set(tabId, tab);
+    }
+    let session = tab.sessions.get(purpose);
+    if (!session) {
+      session = new ComposerEditingSession();
+      tab.sessions.set(purpose, session);
+    }
+    return session;
+  }
+  retain(workspaceKey: string, tabIds: readonly string[]) {
+    const workspace = this.workspaces.get(workspaceKey);
+    if (!workspace) return;
+    const retained = new Set(tabIds);
+    for (const tabId of workspace.keys()) if (!retained.has(tabId)) workspace.delete(tabId);
+    if (workspace.size === 0) this.workspaces.delete(workspaceKey);
+  }
+}
+
+const SessionsContext = createContext<ComposerEditingSessions | null>(null);
+const WorkspaceContext = createContext<string | null>(null);
+const ScopeContext = createContext<{ tabId: string; targetKey: string } | null>(null);
+
+/** App-container ownership survives replacement of both the gesture shell and tab layout. */
+export function ComposerEditingSessionsProvider({ children }: { children: ReactNode }) {
+  const [sessions] = useState(() => new ComposerEditingSessions());
+  return <SessionsContext.Provider value={sessions}>{children}</SessionsContext.Provider>;
+}
+export function WorkspaceComposerEditingSessionsProvider({
+  workspaceKey,
+  tabIds,
+  children,
+}: {
+  workspaceKey: string;
+  tabIds: readonly string[];
+  children: ReactNode;
+}) {
+  const sessions = useContext(SessionsContext);
+  useEffect(() => sessions?.retain(workspaceKey, tabIds), [sessions, workspaceKey, tabIds]);
+  return <WorkspaceContext.Provider value={workspaceKey}>{children}</WorkspaceContext.Provider>;
+}
+export function ComposerEditingScope({
+  tabId,
+  targetKey,
+  children,
+}: {
+  tabId: string;
+  targetKey: string;
+  children: ReactNode;
+}) {
+  const scope = useMemo(() => ({ tabId, targetKey }), [tabId, targetKey]);
+  return <ScopeContext.Provider value={scope}>{children}</ScopeContext.Provider>;
+}
+export function useComposerEditingSession(
+  purpose: ComposerInputMode,
+  provided?: ComposerEditingSession,
+): ComposerEditingSession {
+  const sessions = useContext(SessionsContext);
+  const scope = useContext(ScopeContext);
+  const workspaceKey = useContext(WorkspaceContext);
+  const [local] = useState(() => provided ?? new ComposerEditingSession());
+  if (provided) return provided;
+  return sessions && scope && workspaceKey
+    ? sessions.get(workspaceKey, scope.tabId, scope.targetKey, purpose)
+    : local;
+}
+export function useComposerFullscreen(session: ComposerEditingSession): boolean {
+  return useSyncExternalStore(session.subscribe, session.getFullscreen, session.getFullscreen);
+}

packages/app/src/composer/index.tsx

@@ -1,3 +1,4 @@
+import { useComposerEditingSession, useComposerFullscreen } from "./editing-session";
 import type { ComposerTextSource } from "./text-source";
 import { createStore, type StoreApi } from "zustand/vanilla";
 import { useStore } from "zustand";
@@ -1003,8 +1004,10 @@ function ComposerAutocompleteBinding({
     cursorIndex: Math.min(cursorIndex, userInput.length),
     onAutocompleteApplied: () => inputRef.current?.focus(),
   });
-  useImperativeHandle(ref, () => ({ onKeyPress: autocomplete.onKeyPress }), [
-    autocomplete.onKeyPress,
+  const handleKeyPress = autocomplete.onKeyPress;
+  useImperativeHandle(ref, () => ({ onKeyPress: (event) => show && handleKeyPress(event) }), [
+    show,
+    handleKeyPress,
   ]);
   const selectOption = autocomplete.onSelectOption;
   const onSelect = useCallback(
@@ -1336,6 +1339,8 @@ function ComposerContentImpl({
   const nextPendingFileId = useRef(0);
   const isUploadingFile = pendingFiles.length > 0;
   const [pendingNativeImagePastes, setPendingNativeImagePastes] = useState(0);
+  const editingSession = useComposerEditingSession(inputMode);
+  const isFullscreen = useComposerFullscreen(editingSession);
   const [sendError, setSendError] = useState<string | null>(null);
   const [isMessageInputFocused, setIsMessageInputFocused] = useState(false);
   const [isGithubPickerOpen, setIsGithubPickerOpen] = useState(false);
@@ -2364,7 +2369,7 @@ function ComposerContentImpl({
         <View style={inputAreaContainerStyle}>
           <View style={styles.inputAreaContent}>
             {queueList}
-            {sendErrorNode}
+            {!isFullscreen && sendErrorNode}
 
             <View ref={messageInputContainerRef} style={styles.messageInputContainer}>
               <ComposerAutocompleteBinding
@@ -2372,7 +2377,7 @@ function ComposerContentImpl({
                 cursor={cursor}
                 inputRef={messageInputRef}
                 anchorRef={messageInputContainerRef}
-                show={mode.showAutocomplete}
+                show={mode.showAutocomplete && !isFullscreen}
                 ref={autocompleteRef}
                 configuration={autocompleteConfiguration}
               />
@@ -2387,6 +2392,8 @@ function ComposerContentImpl({
               <RenderProfile id="MessageInput">
                 <StableMessageInput
                   ref={messageInputRef}
+                  editingSession={editingSession}
+                  submissionError={sendErrorNode}
                   value={textSource.getSnapshot()}
                   onChangeText={setUserInput}
                   onSubmit={handleSubmit}

packages/app/src/composer/input/fullscreen-host.native.tsx

@@ -0,0 +1,57 @@
+import { useEffect, type ReactNode } from "react";
+import { Portal } from "@gorhom/portal";
+import { BackHandler, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { StyleSheet } from "react-native-unistyles";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { DEFAULT_FLOATING_PANEL_PORTAL_HOST } from "@/components/ui/floating-panel-portal";
+import { useKeyboardShift } from "@/keyboard/shift";
+
+/** Same-window host keeps the IME attached while escaping the dock's clipping. */
+export function ComposerFullscreenHost({
+  children,
+  onExit,
+  active,
+}: {
+  children: ReactNode;
+  onExit: () => void;
+  active: boolean;
+}) {
+  useEffect(() => {
+    if (!active) return;
+    const handler = BackHandler.addEventListener("hardwareBackPress", () => {
+      onExit();
+      return true;
+    });
+    return () => handler.remove();
+  }, [active, onExit]);
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const { layoutShift } = useKeyboardShift();
+  const frame = useAnimatedStyle(() => ({
+    height: Math.max(0, height - layoutShift.value),
+    paddingTop: insets.top,
+    paddingBottom: insets.bottom,
+    paddingLeft: insets.left,
+    paddingRight: insets.right,
+  }));
+  return (
+    <Portal hostName={DEFAULT_FLOATING_PANEL_PORTAL_HOST}>
+      <View style={[styles.background, !active && styles.hidden]}>
+        <Animated.View style={[{ width: "100%" }, frame]}>{children}</Animated.View>
+      </View>
+    </Portal>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  hidden: { display: "none" },
+  background: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: theme.colors.surface1,
+  },
+}));

packages/app/src/composer/input/fullscreen-host.tsx

@@ -0,0 +1,77 @@
+import { useMemo, useLayoutEffect, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { View } from "react-native";
+import {
+  getOverlayRoot,
+  useOverlayLayer,
+  OverlayLayerProvider,
+  useWebOverlayRegistration,
+} from "@/lib/overlay-root";
+
+export function ComposerFullscreenHost({
+  children,
+  onExit,
+  active,
+}: {
+  children: ReactNode;
+  onExit: () => void;
+  active: boolean;
+}) {
+  const layer = useOverlayLayer("modal");
+  const registration = useWebOverlayRegistration({
+    active,
+    layer,
+    onKeyDown: (event) => {
+      if (event.key !== "Escape") return false;
+      event.preventDefault();
+      onExit();
+      return true;
+    },
+  });
+  const [viewport, setViewport] = useState(readVisibleViewport);
+  useLayoutEffect(() => {
+    if (!active) return;
+    const update = () => setViewport(readVisibleViewport());
+    const visualViewport = window.visualViewport;
+    update();
+    visualViewport?.addEventListener("resize", update);
+    visualViewport?.addEventListener("scroll", update);
+    window.addEventListener("resize", update);
+    return () => {
+      visualViewport?.removeEventListener("resize", update);
+      visualViewport?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [active]);
+  const frameStyle = useMemo(
+    () => ({
+      display: active ? ("flex" as const) : ("none" as const),
+      position: "absolute" as const,
+      top: viewport.top,
+      left: viewport.left,
+      width: viewport.width,
+      zIndex: layer,
+      pointerEvents: "auto" as const,
+      height: viewport.height,
+    }),
+    [active, layer, viewport],
+  );
+  return createPortal(
+    <OverlayLayerProvider layer={layer}>
+      <View ref={registration} style={frameStyle}>
+        {children}
+      </View>
+    </OverlayLayerProvider>,
+    getOverlayRoot(),
+  );
+}
+
+function readVisibleViewport() {
+  const viewport = window.visualViewport;
+  return {
+    top: viewport?.offsetTop ?? 0,
+    left: viewport?.offsetLeft ?? 0,
+    width: viewport?.width ?? window.innerWidth,
+    height: viewport?.height ?? window.innerHeight,
+  };
+}

packages/app/src/composer/input/height.native.ts

@@ -7,6 +7,8 @@ interface ComposerHeightArgs {
   textareaRef: RefObject<unknown>;
   minHeight: number;
   maxHeight: number;
+  onRenderedLinesChange?: (lines: number) => void;
+  presentationKey?: boolean;
 }
 
 export function useComposerHeight({

packages/app/src/composer/input/height.web.ts

@@ -7,6 +7,8 @@ interface ComposerHeightArgs {
   textareaRef: RefObject<HTMLElement | null>;
   minHeight: number;
   maxHeight: number;
+  onRenderedLinesChange?: (lines: number) => void;
+  presentationKey?: boolean;
 }
 
 const COPIED_STYLES = [
@@ -36,11 +38,13 @@ export function useComposerHeight({
   textareaRef,
   minHeight,
   maxHeight,
+  onRenderedLinesChange,
+  presentationKey,
 }: ComposerHeightArgs): ComposerHeightResult {
   const [height, setHeight] = useState(minHeight);
   const heightRef = useRef(minHeight);
-  const paramsRef = useRef({ getText, minHeight, maxHeight });
-  paramsRef.current = { getText, minHeight, maxHeight };
+  const paramsRef = useRef({ getText, minHeight, maxHeight, onRenderedLinesChange });
+  paramsRef.current = { getText, minHeight, maxHeight, onRenderedLinesChange };
   const mirrorRef = useRef<HTMLTextAreaElement | null>(null);
 
   const setBoundedHeight = useCallback((nextHeight: number) => {
@@ -65,6 +69,13 @@ export function useComposerHeight({
       }
       mirror.style.width = `${sourceWidth}px`;
       mirror.value = text.endsWith("\n") ? `${text} ` : text;
+      const padding =
+        parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
+      const lineHeight = parseFloat(computedStyle.lineHeight);
+      if (lineHeight > 0)
+        paramsRef.current.onRenderedLinesChange?.(
+          Math.round((mirror.scrollHeight - padding) / lineHeight),
+        );
       setBoundedHeight(mirror.scrollHeight);
     },
     [setBoundedHeight, textareaRef],
@@ -101,7 +112,7 @@ export function useComposerHeight({
 
   useLayoutEffect(() => {
     measure(getText());
-  }, [maxHeight, minHeight, getText, measure]);
+  }, [maxHeight, minHeight, getText, measure, presentationKey]);
 
   useEffect(() => {
     const source = textareaRef.current;
@@ -115,7 +126,7 @@ export function useComposerHeight({
     });
     observer.observe(source);
     return () => observer.disconnect();
-  }, [measure, textareaRef]);
+  }, [measure, textareaRef, presentationKey]);
 
   const onTextChange = useCallback(
     (_previousText: string, nextText: string) => measure(nextText),

packages/app/src/composer/input/input.tsx

@@ -1,3 +1,8 @@
+import {
+  useComposerEditingSession,
+  useComposerFullscreen,
+  type ComposerEditingSession,
+} from "@/composer/editing-session";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import {
   View,
@@ -56,6 +61,7 @@ import { useIsCompactFormFactor } from "@/constants/layout";
 import { useComposerKeyboardScope } from "@/composer/keyboard-scope";
 import { RenderProfile } from "@/utils/render-profiler";
 import { useComposerHeight } from "./height";
+import { ComposerInputPresentation } from "./presentation";
 import { resolveComposerInputMode, type ComposerInputMode } from "@/composer/input-mode";
 import type { NativePastedFile } from "@/composer/native-pasted-image";
 import {
@@ -77,6 +83,7 @@ import {
   applyDictationTranscript,
   computeCanStartDictation,
   resolveComposerSurfacePresentation,
+  resolveComposerSurfaceText,
   runAlternateSendAction,
   runDefaultSendAction,
   runMessageInputKeyboardAction,
@@ -106,6 +113,8 @@ export interface ComposerKeyPressEvent {
 }
 
 export interface MessageInputProps {
+  editingSession?: ComposerEditingSession;
+  submissionError?: React.ReactNode;
   value: string;
   onChangeText: (text: string) => void;
   onSubmit: (payload: MessagePayload) => void;
@@ -206,6 +215,7 @@ type WebTextInputKeyPressEvent = NativeSyntheticEvent<
 >;
 
 interface TextAreaHandle {
+  value?: string;
   scrollHeight?: number;
   clientHeight?: number;
   offsetHeight?: number;
@@ -215,7 +225,7 @@ interface TextAreaHandle {
   style?: {
     height?: string;
     overflowY?: string;
-  } & Record<string, unknown>;
+  };
 }
 
 function AttachButtonIcon({
@@ -433,7 +443,7 @@ function getTextInputNativeElement(current: ComposerTextInputHandle | null): HTM
 }
 
 interface PasteImagesEffectArgs {
-  getWebTextArea: () => TextAreaHandle | null;
+  textarea: HTMLElement | null;
   isConnected: boolean;
   disabled: boolean;
   isDictating: boolean;
@@ -443,7 +453,7 @@ interface PasteImagesEffectArgs {
 
 function usePasteImagesEffect(args: PasteImagesEffectArgs): void {
   const {
-    getWebTextArea,
+    textarea,
     isConnected,
     disabled,
     isDictating,
@@ -454,19 +464,7 @@ function usePasteImagesEffect(args: PasteImagesEffectArgs): void {
   useEffect(() => {
     if (!isWeb || !onAddImages) return;
 
-    const textarea = getWebTextArea() as
-      | (TextAreaHandle & {
-          addEventListener?: (type: string, listener: (e: ClipboardEvent) => void) => void;
-          removeEventListener?: (type: string, listener: (e: ClipboardEvent) => void) => void;
-        })
-      | null;
-    if (
-      !textarea ||
-      typeof textarea.addEventListener !== "function" ||
-      typeof textarea.removeEventListener !== "function"
-    ) {
-      return;
-    }
+    if (!textarea) return;
 
     let disposed = false;
     const handlePaste = (event: ClipboardEvent) => {
@@ -493,14 +491,7 @@ function usePasteImagesEffect(args: PasteImagesEffectArgs): void {
       disposed = true;
       textarea.removeEventListener?.("paste", handlePaste);
     };
-  }, [
-    disabled,
-    getWebTextArea,
-    isConnected,
-    isDictating,
-    isRealtimeVoiceForCurrentAgent,
-    onAddImages,
-  ]);
+  }, [disabled, textarea, isConnected, isDictating, isRealtimeVoiceForCurrentAgent, onAddImages]);
 }
 
 function useAutoFocusOnWebEffect(
@@ -628,6 +619,7 @@ function FocusHint({
 interface ComposerTextSurfaceProps {
   readOnly: boolean;
   value: string;
+  textReplacementKey: string;
   textInputRef: React.Ref<ComposerTextInputHandle>;
   textInputStyle: EditingTextInputProps["style"];
   readOnlyTextStyle: React.ComponentProps<typeof Text>["style"];
@@ -643,6 +635,9 @@ interface ComposerTextSurfaceProps {
   onSelectionChange: (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
   onPasteImages: ((files: readonly NativePastedFile[]) => void) | undefined;
   onPasteError: (message: string) => void;
+  fullscreen: boolean;
+  compact: boolean;
+  onRenderedLinesChange: (lines: number) => void;
   focusHintVisible: boolean;
   focusInputKeys: ShortcutChord | null | undefined;
   focusHintLabel: string;
@@ -654,6 +649,23 @@ interface ComposerTextSurfaceProps {
  * state of this composer rather than a second one.
  */
 function ComposerTextSurface(props: ComposerTextSurfaceProps): React.ReactElement {
+  const { onChangeText, onRenderedLinesChange } = props;
+  const [measurementText, setMeasurementText] = useState(props.value);
+  useEffect(() => {
+    if (!isWeb) setMeasurementText(props.value);
+  }, [props.value, props.textReplacementKey]);
+  const handleTextChange = useCallback(
+    (text: string) => {
+      if (!isWeb) setMeasurementText(text);
+      onChangeText(text);
+    },
+    [onChangeText, setMeasurementText],
+  );
+  const measureLines = useCallback(
+    (event: import("react-native").TextLayoutEvent) =>
+      onRenderedLinesChange(event.nativeEvent.lines.length),
+    [onRenderedLinesChange],
+  );
   if (props.readOnly) {
     return (
       <View style={styles.textInputScrollWrapper}>
@@ -664,12 +676,28 @@ function ComposerTextSurface(props: ComposerTextSurfaceProps): React.ReactElemen
     );
   }
   return (
-    <View style={styles.textInputScrollWrapper}>
+    <View
+      style={[
+        styles.textInputScrollWrapper,
+        props.fullscreen && styles.fullscreenTextSurface,
+        props.compact && !props.fullscreen && styles.compactTextSurface,
+      ]}
+    >
+      {!isWeb && props.compact && !props.fullscreen ? (
+        <Text
+          accessible={false}
+          pointerEvents="none"
+          style={[props.textInputStyle, styles.lineMeasurement]}
+          onTextLayout={measureLines}
+        >
+          {`${measurementText}\u200b`}
+        </Text>
+      ) : null}
       <ComposerTextInput
         ref={props.textInputRef}
         dataSet={COMPOSER_INPUT_DATASET}
         initialValue={props.value}
-        onChangeText={props.onChangeText}
+        onChangeText={handleTextChange}
         placeholder={props.placeholder}
         accessibilityLabel={props.accessibilityLabel}
         onFocus={props.onFocus}
@@ -843,6 +871,7 @@ interface ToggleRealtimeVoiceContext {
   handleStopRealtimeVoice: () => Promise<unknown> | void;
   toast: { error: (msg: string) => void };
   interruptBeforeVoiceMessage: string;
+  exitFullscreen: () => void;
 }
 
 function toggleRealtimeVoiceImpl(ctx: ToggleRealtimeVoiceContext): void {
@@ -858,6 +887,7 @@ function toggleRealtimeVoiceImpl(ctx: ToggleRealtimeVoiceContext): void {
     ctx.toast.error(ctx.interruptBeforeVoiceMessage);
     return;
   }
+  ctx.exitFullscreen();
   void ctx.voice.startVoice(ctx.voiceServerId, ctx.voiceAgentId).catch((error) => {
     console.error("[MessageInput] Failed to start realtime voice", error);
     const message = extractErrorMessage(error);
@@ -872,6 +902,7 @@ interface StartDictationContext {
   canStartDictation: () => boolean;
   toast: { error: (msg: string) => void };
   startDictation: () => Promise<void>;
+  exitFullscreen: () => void;
 }
 
 async function startDictationIfAvailableImpl(ctx: StartDictationContext): Promise<void> {
@@ -882,6 +913,7 @@ async function startDictationIfAvailableImpl(ctx: StartDictationContext): Promis
   if (!ctx.canStartDictation()) {
     return;
   }
+  ctx.exitFullscreen();
   await ctx.startDictation();
 }
 
@@ -983,7 +1015,8 @@ function computeIsDictationStartEnabled(
   return (isReadyForDictation ?? isConnected) && !disabled;
 }
 
-function resolveMaxInputHeight(windowHeight: number): number {
+function resolveMaxInputHeight(windowHeight: number, compact: boolean): number {
+  if (compact) return DEFAULT_MAX_INPUT_HEIGHT;
   if (!Number.isFinite(windowHeight) || windowHeight <= 0) return DEFAULT_MAX_INPUT_HEIGHT;
   return Math.max(DEFAULT_MAX_INPUT_HEIGHT, Math.floor(windowHeight * MAX_INPUT_VIEWPORT_RATIO));
 }
@@ -1007,9 +1040,12 @@ function getComposerInputSnapshot(
   current: ComposerTextInputHandle | null,
   fallbackText: string,
   fallbackSelection: ComposerInputSnapshot["selection"],
+  mountedTextArea?: TextAreaHandle | null,
 ): ComposerInputSnapshot {
-  const text = current?.getText() ?? fallbackText;
-  const textArea = getWebTextAreaImpl(current);
+  // The inner DOM ref can detach before the outer editing handle. Keep the mounted
+  // element available until this owner's ref callback captures the remount handoff.
+  const textArea = mountedTextArea ?? getWebTextAreaImpl(current);
+  const text = textArea?.value ?? current?.getText() ?? fallbackText;
   const start = textArea?.selectionStart ?? fallbackSelection.start;
   const end = textArea?.selectionEnd ?? fallbackSelection.end;
   return { text, selection: { start, end } };
@@ -1139,6 +1175,28 @@ function extractErrorMessage(error: unknown): string | null {
   return null;
 }
 
+function resolvePresentationSendDisabled(input: {
+  fullscreen: boolean;
+  disabled: boolean;
+  hasText: boolean;
+  attachments: ComposerAttachment[];
+  hasExternalContent: boolean;
+  allowEmpty: boolean;
+}): boolean {
+  return (
+    input.disabled || (input.fullscreen && !input.allowEmpty && !hasSendableComposerContent(input))
+  );
+}
+
+function shouldShowFullscreenControl(
+  compact: boolean,
+  readOnly: boolean,
+  overlayVisible: boolean,
+  renderedLines: number,
+) {
+  return compact && !readOnly && !overlayVisible && renderedLines > 2;
+}
+
 export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
   function MessageInput(props, ref) {
     const {
@@ -1186,11 +1244,15 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
       textReplacement,
       submitLabel,
     } = resolveMessageInputProps(props);
+    const { isActiveComposer } = useComposerKeyboardScope();
     const mode = resolveComposerInputMode(inputMode);
     const { t } = useTranslation();
     const isCompact = useIsCompactFormFactor();
     const { height: windowHeight } = useWindowDimensions();
-    const maxInputHeight = resolveMaxInputHeight(windowHeight);
+    const editingSession = useComposerEditingSession(inputMode, props.editingSession);
+    const isFullscreen = useComposerFullscreen(editingSession);
+    const [renderedLines, setRenderedLines] = useState(1);
+    const maxInputHeight = resolveMaxInputHeight(windowHeight, isCompact);
     const buttonIconSize = isWeb ? ICON_SIZE.md : ICON_SIZE.lg;
     const toast = useToast();
     const voice = useVoiceOptional();
@@ -1207,27 +1269,19 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
     const inputWrapperRef = useRef<View | null>(null);
     const textInputRef = useRef<ComposerTextInputHandle | null>(null);
     const isInputFocusedRef = useRef(false);
-    const valueRef = useRef(value);
-    const selectionRef = useRef({ start: value.length, end: value.length });
-    const appliedTextReplacementKeyRef = useRef(textReplacement.key);
-    const webTextareaRef = useRef<HTMLElement | null>(null);
-    const getLiveText = useCallback(() => valueRef.current, []);
-    const composerHeight = useComposerHeight({
-      getText: getLiveText,
-      textareaRef: webTextareaRef,
-      minHeight: MIN_INPUT_HEIGHT,
-      maxHeight: maxInputHeight,
-    });
-    const { style: composerHeightStyle, scrollEnabled: isComposerScrollEnabled } = composerHeight;
-    const measuredComposerHeight = composerHeight.mode === "measured" ? composerHeight : undefined;
-    const updateComposerHeightForText = measuredComposerHeight?.onTextChange;
-    const resetComposerHeight = measuredComposerHeight?.reset;
-
-    const handleComposerLayout = useCallback(
-      (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height),
-      [onHeightChange],
+    const handoff = editingSession.peekHandoff(textReplacement);
+    const focusIntentRef = useRef(Boolean(handoff?.focused));
+    const valueRef = useRef(handoff?.snapshot.text ?? value);
+    const selectionRef = useRef(
+      handoff?.snapshot.selection ?? { start: value.length, end: value.length },
     );
-
+    const activeComposerRef = useRef(isActiveComposer);
+    activeComposerRef.current = isActiveComposer;
+    const [webTextArea, setWebTextArea] = useState<HTMLElement | null>(null);
+    const appliedTextReplacementKeyRef = useRef(textReplacement.key);
+    const textReplacementRef = useRef(textReplacement);
+    textReplacementRef.current = textReplacement;
+    const webTextareaRef = useRef<HTMLElement | null>(null);
     const updateLiveTextPresence = useCallback((text: string) => {
       const nextHasLiveText = text.trim().length > 0;
       if (hasLiveTextRef.current === nextHasLiveText) return;
@@ -1235,6 +1289,82 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
       setHasLiveText(nextHasLiveText);
     }, []);
 
+    const assignTextInput = useCallback(
+      (input: ComposerTextInputHandle | null) => {
+        const previous = textInputRef.current;
+        if (!input && previous) {
+          editingSession.captureForRemount({
+            snapshot: getComposerInputSnapshot(
+              previous,
+              valueRef.current,
+              selectionRef.current,
+              webTextareaRef.current,
+            ),
+            focused: previous.isFocused() || isInputFocusedRef.current,
+            replacementKey: appliedTextReplacementKeyRef.current,
+          });
+        }
+        textInputRef.current = input;
+        if (isWeb) {
+          const element = getWebTextAreaImpl(input) as HTMLElement | null;
+          webTextareaRef.current = element;
+          setWebTextArea(element);
+        }
+        if (!input) return;
+        const transfer = editingSession.takeHandoff(textReplacementRef.current);
+        if (transfer) {
+          appliedTextReplacementKeyRef.current = textReplacementRef.current.key;
+          valueRef.current = transfer.snapshot.text;
+          updateLiveTextPresence(transfer.snapshot.text);
+          selectionRef.current = transfer.snapshot.selection;
+          input.replaceText(transfer.snapshot.text, transfer.snapshot.selection);
+          if (transfer.focused && activeComposerRef.current) input.focus();
+        }
+      },
+      [editingSession, updateLiveTextPresence],
+    );
+    useLayoutEffect(() => {
+      if (isActiveComposer && focusIntentRef.current) textInputRef.current?.focus();
+    }, [isActiveComposer]);
+    const getLiveText = useCallback(() => valueRef.current, []);
+    const composerHeight = useComposerHeight({
+      getText: getLiveText,
+      textareaRef: webTextareaRef,
+      minHeight: MIN_INPUT_HEIGHT,
+      maxHeight: maxInputHeight,
+      onRenderedLinesChange: setRenderedLines,
+      presentationKey: isFullscreen,
+    });
+    const { style: composerHeightStyle, scrollEnabled: isComposerScrollEnabled } = composerHeight;
+    const measuredComposerHeight = composerHeight.mode === "measured" ? composerHeight : undefined;
+    const updateComposerHeightForText = measuredComposerHeight?.onTextChange;
+    const resetComposerHeight = measuredComposerHeight?.reset;
+
+    const changePresentation = useCallback(
+      (fullscreen: boolean) => {
+        if (editingSession.getFullscreen() === fullscreen) return;
+        const snapshot = getComposerInputSnapshot(
+          textInputRef.current,
+          valueRef.current,
+          selectionRef.current,
+        );
+        editingSession.changePresentation(fullscreen, {
+          snapshot,
+          focused: textInputRef.current?.isFocused() ?? isInputFocusedRef.current,
+          replacementKey: appliedTextReplacementKeyRef.current,
+        });
+        valueRef.current = snapshot.text;
+        selectionRef.current = snapshot.selection;
+      },
+      [editingSession],
+    );
+    const exitFullscreen = useCallback(() => changePresentation(false), [changePresentation]);
+
+    const handleComposerLayout = useCallback(
+      (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height),
+      [onHeightChange],
+    );
+
     const replaceText = useCallback(
       (nextText: string, selection?: { start: number; end: number }) => {
         updateComposerHeightForText?.(valueRef.current, nextText);
@@ -1412,8 +1542,9 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
           canStartDictation,
           toast,
           startDictation,
+          exitFullscreen,
         }),
-      [canStartDictation, dictationUnavailableMessage, startDictation, toast],
+      [canStartDictation, dictationUnavailableMessage, startDictation, toast, exitFullscreen],
     );
 
     const handleVoicePress = useCallback(
@@ -1485,10 +1616,12 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
         handleStopRealtimeVoice,
         toast,
         interruptBeforeVoiceMessage: t("composer.voice.interruptBeforeVoice"),
+        exitFullscreen,
       });
     }, [
       disabled,
       handleStopRealtimeVoice,
+      exitFullscreen,
       isAgentRunning,
       isConnected,
       t,
@@ -1572,10 +1705,10 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
       if (isWeb) {
         webTextareaRef.current = getWebTextArea() as HTMLElement | null;
       }
-    }, [getWebTextArea]);
+    }, [getWebTextArea, isFullscreen]);
 
     usePasteImagesEffect({
-      getWebTextArea,
+      textarea: webTextArea,
       isConnected,
       disabled,
       isDictating,
@@ -1596,16 +1729,30 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
     const shouldHandleWebKeyPress = isWeb;
     const shouldSubmitOnEnter = isWeb && !isCompact;
 
-    function handleDesktopKeyPress(event: WebTextInputKeyPressEvent) {
-      if (!shouldHandleWebKeyPress) return;
-      handleDesktopKeyPressImpl(event, {
+    const handleDesktopKeyPress = useCallback(
+      (event: WebTextInputKeyPressEvent) => {
+        if (!shouldHandleWebKeyPress) return;
+        handleDesktopKeyPressImpl(event, {
+          onKeyPressCallback,
+          input: getComposerInputSnapshot(
+            textInputRef.current,
+            valueRef.current,
+            selectionRef.current,
+          ),
+          submitOnEnter: shouldSubmitOnEnter,
+          isAgentRunning,
+          onQueue,
+          isSubmitDisabled,
+          isSubmitLoading,
+          disabled,
+          handleAlternateSendAction,
+          handleDefaultSendAction,
+        });
+      },
+      [
+        shouldHandleWebKeyPress,
         onKeyPressCallback,
-        input: getComposerInputSnapshot(
-          textInputRef.current,
-          valueRef.current,
-          selectionRef.current,
-        ),
-        submitOnEnter: shouldSubmitOnEnter,
+        shouldSubmitOnEnter,
         isAgentRunning,
         onQueue,
         isSubmitDisabled,
@@ -1613,8 +1760,8 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
         disabled,
         handleAlternateSendAction,
         handleDefaultSendAction,
-      });
-    }
+      ],
+    );
 
     const primaryActionKind = resolvePrimaryActionKind({
       hasSendableContent: hasSendableComposerContent({
@@ -1678,16 +1825,18 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
     );
 
     const handleInputFocus = useCallback(() => {
+      focusIntentRef.current = true;
       isInputFocusedRef.current = true;
       setIsInputFocused(true);
       onFocusChange?.(true);
     }, [onFocusChange]);
 
     const handleInputBlur = useCallback(() => {
+      if (activeComposerRef.current && !isFullscreen) focusIntentRef.current = false;
       isInputFocusedRef.current = false;
       setIsInputFocused(false);
       onFocusChange?.(false);
-    }, [onFocusChange]);
+    }, [isFullscreen, onFocusChange]);
 
     const handlePasteError = useCallback(
       (message: string) => {
@@ -1735,8 +1884,12 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
     // `fontFamily` here is silently dropped while every other property lands.
     // An inline style outranks both classes. See docs/unistyles.md.
     const textInputStyle = useMemo(
-      () => [styles.textInput, mode.isMonospace && styles.textInputMonospace, composerHeightStyle],
-      [composerHeightStyle, mode.isMonospace],
+      () => [
+        styles.textInput,
+        mode.isMonospace && styles.textInputMonospace,
+        isFullscreen ? styles.fullscreenTextInput : composerHeightStyle,
+      ],
+      [composerHeightStyle, mode.isMonospace, isFullscreen],
     );
     // Static content has no textarea to mirror, so it grows with its own text
     // instead of the measured input height.
@@ -1780,107 +1933,192 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
       [isDictating, isRealtimeVoiceForCurrentAgent, voice?.isMuted, buttonIconSize],
     );
 
-    return (
-      <View
-        ref={rootRef}
-        style={styles.container}
-        testID="message-input-root"
-        onLayout={handleComposerLayout}
-      >
-        <MessageInputAutoFocus
-          enabled={autoFocus}
-          autoFocusKey={autoFocusKey}
-          textInputRef={textInputRef}
+    const sendButton = useMemo(
+      () => (
+        <PrimaryAction
+          kind={isFullscreen ? "send" : primaryActionKind}
+          activeActionContent={activeActionContent}
+          shouldShow
+          canPressLoadingButton={canPressLoadingButton}
+          onSubmitLoadingPress={onSubmitLoadingPress}
+          onDefaultSendAction={handleDefaultSendAction}
+          isSendButtonDisabled={resolvePresentationSendDisabled({
+            fullscreen: isFullscreen,
+            disabled: isSendButtonDisabled,
+            hasText: hasLiveText,
+            attachments,
+            hasExternalContent,
+            allowEmpty: allowEmptySubmit,
+          })}
+          submitAccessibilityLabel={submitAccessibilityLabel}
+          sendButtonCombinedStyle={sendButtonCombinedStyle}
+          isSubmitLoading={isSubmitLoading}
+          submitIcon={submitIcon}
+          submitLabel={submitLabel}
+          submitButtonTestID={submitButtonTestID}
+          buttonIconSize={buttonIconSize}
+          sendKeys={DEFAULT_SEND_KEYS}
+          sendTooltipLabel={sendTooltipLabel}
         />
-        {/* Regular input */}
-        <View
-          ref={inputWrapperRef}
-          style={inputWrapperCombinedStyle}
-          pointerEvents={surfacePresentation.input.pointerEvents}
-        >
-          {attachmentSlot}
-          {/* Text input */}
-          <RenderProfile id="ComposerTextSurface">
-            <ComposerTextSurface
-              readOnly={readOnly}
-              value={value}
-              textInputRef={textInputRef}
-              textInputStyle={textInputStyle}
-              readOnlyTextStyle={readOnlyTextStyle}
-              placeholder={placeholder ?? t("composer.placeholders.fallback")}
-              accessibilityLabel={t(mode.accessibilityLabelKey)}
-              onChangeText={handleInputChange}
-              onFocus={handleInputFocus}
-              onBlur={handleInputBlur}
-              editable={!isDictating && !isRealtimeVoiceForCurrentAgent && !disabled}
-              scrollEnabled={isComposerScrollEnabled}
-              autoFocus={false}
-              onKeyPress={shouldHandleWebKeyPress ? handleDesktopKeyPress : undefined}
-              onSelectionChange={handleSelectionChange}
-              onPasteImages={onPasteImages}
-              onPasteError={handlePasteError}
-              focusHintVisible={isWeb && !isInputFocused && !value}
-              focusInputKeys={focusInputKeys}
-              focusHintLabel={t("composer.input.focusHint", {
-                shortcut: focusInputKeys ? formatShortcut(focusInputKeys[0], getShortcutOs()) : "",
-              })}
+      ),
+      [
+        isFullscreen,
+        primaryActionKind,
+        activeActionContent,
+        canPressLoadingButton,
+        onSubmitLoadingPress,
+        handleDefaultSendAction,
+        isSendButtonDisabled,
+        hasLiveText,
+        attachments,
+        hasExternalContent,
+        allowEmptySubmit,
+        submitAccessibilityLabel,
+        sendButtonCombinedStyle,
+        isSubmitLoading,
+        submitIcon,
+        submitLabel,
+        submitButtonTestID,
+        buttonIconSize,
+        sendTooltipLabel,
+      ],
+    );
+    const textSurface = useMemo(
+      () => (
+        <RenderProfile id="ComposerTextSurface">
+          <ComposerTextSurface
+            readOnly={readOnly}
+            value={
+              readOnly
+                ? value
+                : resolveComposerSurfaceText(
+                    valueRef.current,
+                    textReplacement,
+                    appliedTextReplacementKeyRef.current,
+                  )
+            }
+            textReplacementKey={textReplacement.key}
+            textInputRef={assignTextInput}
+            textInputStyle={textInputStyle}
+            readOnlyTextStyle={readOnlyTextStyle}
+            placeholder={placeholder ?? t("composer.placeholders.fallback")}
+            accessibilityLabel={t(mode.accessibilityLabelKey)}
+            onChangeText={handleInputChange}
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            editable={!isDictating && !isRealtimeVoiceForCurrentAgent && !disabled}
+            scrollEnabled={isComposerScrollEnabled}
+            autoFocus={
+              Boolean(editingSession.peekHandoff(textReplacement)?.focused) && isActiveComposer
+            }
+            onKeyPress={shouldHandleWebKeyPress ? handleDesktopKeyPress : undefined}
+            onSelectionChange={handleSelectionChange}
+            onPasteImages={onPasteImages}
+            onPasteError={handlePasteError}
+            fullscreen={isFullscreen}
+            compact={isCompact}
+            onRenderedLinesChange={setRenderedLines}
+            focusHintVisible={!isFullscreen && isWeb && !isInputFocused && !value}
+            focusInputKeys={focusInputKeys}
+            focusHintLabel={t("composer.input.focusHint", {
+              shortcut: focusInputKeys ? formatShortcut(focusInputKeys[0], getShortcutOs()) : "",
+            })}
+          />
+        </RenderProfile>
+      ),
+      [
+        readOnly,
+        textReplacement,
+        editingSession,
+        isActiveComposer,
+        assignTextInput,
+        textInputStyle,
+        readOnlyTextStyle,
+        placeholder,
+        t,
+        mode.accessibilityLabelKey,
+        handleInputChange,
+        handleInputFocus,
+        handleInputBlur,
+        isDictating,
+        isRealtimeVoiceForCurrentAgent,
+        disabled,
+        isComposerScrollEnabled,
+        shouldHandleWebKeyPress,
+        handleDesktopKeyPress,
+        handleSelectionChange,
+        onPasteImages,
+        handlePasteError,
+        isFullscreen,
+        isCompact,
+        isInputFocused,
+        value,
+        focusInputKeys,
+      ],
+    );
+    const toolbar = useMemo(
+      () => (
+        <View style={styles.buttonRow}>
+          {/* Toolbar left: attachment button + agent controls */}
+          <View style={styles.leftButtonGroup}>
+            <AttachmentDropdown
+              visible={mode.showAttachments}
+              isConnected={isConnected}
+              disabled={disabled}
+              attachButtonStyle={attachButtonStyle}
+              renderAttachButtonIcon={renderAttachButtonIcon}
+              attachmentMenuItems={attachmentMenuItems}
+              addAttachmentLabel={t("composer.input.addAttachment")}
             />
-          </RenderProfile>
+            {leftContent}
+          </View>
 
-          {/* Button row */}
-          <View style={styles.buttonRow}>
-            {/* Toolbar left: attachment button + agent controls */}
-            <View style={styles.leftButtonGroup}>
-              <AttachmentDropdown
-                visible={mode.showAttachments}
-                isConnected={isConnected}
-                disabled={disabled}
-                attachButtonStyle={attachButtonStyle}
-                renderAttachButtonIcon={renderAttachButtonIcon}
-                attachmentMenuItems={attachmentMenuItems}
-                addAttachmentLabel={t("composer.input.addAttachment")}
-              />
-              {leftContent}
-            </View>
-
-            {/* Right: voice button, contextual button (realtime/send/cancel) */}
-            <View style={styles.rightButtonGroup}>
-              {beforeVoiceContent}
-              <VoiceButtonTooltip
-                visible={mode.showVoice}
-                onVoicePress={handleVoicePress}
-                isDictationStartEnabled={isDictationStartEnabled}
-                voiceButtonAccessibilityLabel={voiceButtonAccessibilityLabel}
-                voiceButtonStyle={voiceButtonStyle}
-                renderVoiceButtonIcon={renderVoiceButtonIcon}
-                voiceTooltipText={voiceTooltipText}
-                isRealtimeVoiceForCurrentAgent={isRealtimeVoiceForCurrentAgent}
-                voiceMuteToggleKeys={voiceMuteToggleKeys}
-                dictationToggleKeys={dictationToggleKeys}
-              />
-              {rightContent}
-              <PrimaryAction
-                kind={primaryActionKind}
-                activeActionContent={activeActionContent}
-                shouldShow
-                canPressLoadingButton={canPressLoadingButton}
-                onSubmitLoadingPress={onSubmitLoadingPress}
-                onDefaultSendAction={handleDefaultSendAction}
-                isSendButtonDisabled={isSendButtonDisabled}
-                submitAccessibilityLabel={submitAccessibilityLabel}
-                sendButtonCombinedStyle={sendButtonCombinedStyle}
-                isSubmitLoading={isSubmitLoading}
-                submitIcon={submitIcon}
-                submitLabel={submitLabel}
-                submitButtonTestID={submitButtonTestID}
-                buttonIconSize={buttonIconSize}
-                sendKeys={DEFAULT_SEND_KEYS}
-                sendTooltipLabel={sendTooltipLabel}
-              />
-            </View>
+          {/* Right: voice button, contextual button (realtime/send/cancel) */}
+          <View style={styles.rightButtonGroup}>
+            {beforeVoiceContent}
+            <VoiceButtonTooltip
+              visible={mode.showVoice}
+              onVoicePress={handleVoicePress}
+              isDictationStartEnabled={isDictationStartEnabled}
+              voiceButtonAccessibilityLabel={voiceButtonAccessibilityLabel}
+              voiceButtonStyle={voiceButtonStyle}
+              renderVoiceButtonIcon={renderVoiceButtonIcon}
+              voiceTooltipText={voiceTooltipText}
+              isRealtimeVoiceForCurrentAgent={isRealtimeVoiceForCurrentAgent}
+              voiceMuteToggleKeys={voiceMuteToggleKeys}
+              dictationToggleKeys={dictationToggleKeys}
+            />
+            {rightContent}
+            {sendButton}
           </View>
         </View>
-
+      ),
+      [
+        mode.showAttachments,
+        isConnected,
+        disabled,
+        attachButtonStyle,
+        renderAttachButtonIcon,
+        attachmentMenuItems,
+        t,
+        leftContent,
+        beforeVoiceContent,
+        mode.showVoice,
+        handleVoicePress,
+        isDictationStartEnabled,
+        voiceButtonAccessibilityLabel,
+        voiceButtonStyle,
+        renderVoiceButtonIcon,
+        voiceTooltipText,
+        isRealtimeVoiceForCurrentAgent,
+        voiceMuteToggleKeys,
+        dictationToggleKeys,
+        rightContent,
+        sendButton,
+      ],
+    );
+    const voiceOverlay = useMemo(
+      () => (
         <View
           style={overlayContainerStyle}
           pointerEvents={surfacePresentation.overlay.pointerEvents}
@@ -1903,6 +2141,62 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(
             onRealtimeVoiceStop={handleRealtimeVoiceStop}
           />
         </View>
+      ),
+      [
+        overlayContainerStyle,
+        surfacePresentation.overlay.pointerEvents,
+        showDictationOverlay,
+        showRealtimeOverlay,
+        voice,
+        dictationVolume,
+        dictationDuration,
+        isDictating,
+        isDictationProcessing,
+        dictationStatus,
+        dictationError,
+        handleCancelRecording,
+        handleAcceptRecording,
+        handleAcceptAndSendRecording,
+        handleRetryFailedRecording,
+        handleDiscardFailedRecording,
+        handleRealtimeVoiceStop,
+      ],
+    );
+    const enterFullscreen = useCallback(() => changePresentation(true), [changePresentation]);
+    return (
+      <View
+        ref={rootRef}
+        style={styles.container}
+        testID="message-input-root"
+        onLayout={handleComposerLayout}
+      >
+        <MessageInputAutoFocus
+          enabled={autoFocus}
+          autoFocusKey={autoFocusKey}
+          textInputRef={textInputRef}
+        />
+        <ComposerInputPresentation
+          fullscreen={isFullscreen}
+          iconSize={buttonIconSize}
+          active={isActiveComposer}
+          surface={textSurface}
+          toolbar={toolbar}
+          send={sendButton}
+          error={props.submissionError}
+          onExit={exitFullscreen}
+          inputWrapperRef={inputWrapperRef}
+          inputWrapperStyle={inputWrapperCombinedStyle}
+          inputPointerEvents={surfacePresentation.input.pointerEvents}
+          attachmentSlot={attachmentSlot}
+          showFullscreenButton={shouldShowFullscreenControl(
+            isCompact,
+            readOnly,
+            showOverlay,
+            renderedLines,
+          )}
+          onEnter={enterFullscreen}
+          overlay={voiceOverlay}
+        />
       </View>
     );
   },
@@ -1947,6 +2241,19 @@ const styles = StyleSheet.create((theme: Theme) => ({
   inputWrapperReadOnly: {
     borderStyle: "dotted",
   },
+  compactTextSurface: { paddingRight: 36 },
+  fullscreenTextSurface: { flex: 1, minHeight: 0 },
+  fullscreenTextInput: { flex: 1, height: "100%", textAlignVertical: "top" },
+  lineMeasurement: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 36,
+    opacity: 0,
+    maxHeight: undefined,
+    minHeight: undefined,
+    height: undefined,
+  },
   textInputScrollWrapper: {
     flexShrink: 1,
     position: "relative",

packages/app/src/composer/input/presentation.tsx

@@ -0,0 +1,146 @@
+import { useCallback, useMemo, type ReactNode, type Ref } from "react";
+import { View, type ViewProps } from "react-native";
+import { Maximize2, Minimize2 } from "lucide-react-native";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { isWeb } from "@/constants/platform";
+import { StyleSheet } from "react-native-unistyles";
+import { ComposerFullscreenHost } from "./fullscreen-host";
+
+function keepEditorFocused(event: import("react-native").PointerEvent) {
+  if (isWeb) event.preventDefault();
+}
+
+/** Both presentations receive the same editing surface and send capability. */
+export function ComposerInputPresentation({
+  fullscreen,
+  iconSize,
+  active,
+  surface,
+  toolbar,
+  send,
+  error,
+  onExit,
+  inputWrapperRef,
+  inputWrapperStyle,
+  inputPointerEvents,
+  attachmentSlot,
+  showFullscreenButton,
+  onEnter,
+  overlay,
+}: {
+  fullscreen: boolean;
+  iconSize: number;
+  active: boolean;
+  surface: ReactNode;
+  toolbar: ReactNode;
+  send: ReactNode;
+  error: ReactNode;
+  onExit: () => void;
+  inputWrapperRef: Ref<View>;
+  inputWrapperStyle: ViewProps["style"];
+  inputPointerEvents: ViewProps["pointerEvents"];
+  attachmentSlot: ReactNode;
+  showFullscreenButton: boolean;
+  onEnter: () => void;
+  overlay: ReactNode;
+}) {
+  const { t } = useTranslation();
+  // ArrowUp ends at x19; the fullscreen glyphs end at x21 in Lucide's 24px viewBox.
+  // Compensate for that difference to align visible ink with Send, not just boxes.
+  const railAdjustment = iconSize / 12;
+  const maximizeIcon = useCallback(
+    (color: string) => <Maximize2 color={color} size={iconSize} />,
+    [iconSize],
+  );
+  const minimizeIcon = useCallback(
+    (color: string) => <Minimize2 color={color} size={iconSize} />,
+    [iconSize],
+  );
+  const enterStyle = useMemo(
+    () => [styles.fullscreenButton, { right: -6 + railAdjustment }],
+    [railAdjustment],
+  );
+  const exitStyle = useMemo(
+    () => [styles.iconButton, { marginRight: railAdjustment }],
+    [railAdjustment],
+  );
+  if (!fullscreen)
+    return (
+      <>
+        <View ref={inputWrapperRef} style={inputWrapperStyle} pointerEvents={inputPointerEvents}>
+          {attachmentSlot}
+          <View style={styles.inlineTextSurface}>
+            {surface}
+            {showFullscreenButton ? (
+              <Button
+                variant="ghost"
+                size="xs"
+                accessibilityLabel={t("composer.input.fullscreen")}
+                leftIcon={maximizeIcon}
+                onPointerDown={keepEditorFocused}
+                onPress={onEnter}
+                style={enterStyle}
+                hitSlop={8}
+              >
+                {null}
+              </Button>
+            ) : null}
+          </View>
+          {toolbar}
+        </View>
+        {overlay}
+      </>
+    );
+  return (
+    <ComposerFullscreenHost onExit={onExit} active={active}>
+      <View style={styles.fullscreen} testID="composer-fullscreen">
+        <View style={styles.exitRow}>
+          <Button
+            variant="ghost"
+            size="xs"
+            accessibilityLabel={t("composer.input.exitFullscreen")}
+            onPointerDown={keepEditorFocused}
+            onPress={onExit}
+            style={exitStyle}
+            leftIcon={minimizeIcon}
+            hitSlop={8}
+          >
+            {null}
+          </Button>
+        </View>
+        {surface}
+        {error}
+        <View style={styles.sendRow}>{send}</View>
+      </View>
+    </ComposerFullscreenHost>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  inlineTextSurface: { flexShrink: 1, position: "relative" },
+  iconButton: {
+    width: 28,
+    height: 28,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: theme.borderRadius.full,
+  },
+  fullscreenButton: {
+    position: "absolute",
+    top: 0,
+    width: 28,
+    height: 28,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: theme.borderRadius.full,
+  },
+  fullscreen: {
+    flex: 1,
+    backgroundColor: theme.colors.surface1,
+    padding: theme.spacing[4],
+    gap: theme.spacing[3],
+  },
+  exitRow: { alignItems: "flex-end", flexShrink: 0 },
+  sendRow: { flexShrink: 0, alignItems: "flex-end" },
+}));

packages/app/src/composer/input/state.test.ts

@@ -4,6 +4,7 @@ import {
   computeCanStartDictation,
   resolveActiveSendBehavior,
   resolveComposerSurfacePresentation,
+  resolveComposerSurfaceText,
   runAlternateSendAction,
   runDefaultSendAction,
   runMessageInputKeyboardAction,
@@ -316,3 +317,26 @@ describe("stopRealtimeVoice", () => {
     expect(calls).toEqual(["cancel agent", "stop voice"]);
   });
 });
+
+describe("composer surface text", () => {
+  it("measures a new nonempty replacement before it reaches the editing handle", () => {
+    const replacement = { kind: "replace" as const, key: "draft:2", text: "First\nSecond\nThird" };
+    expect(resolveComposerSurfaceText("Short draft", replacement, "draft:1")).toBe(
+      replacement.text,
+    );
+  });
+
+  it("keeps live typing once the replacement is applied", () => {
+    const replacement = { kind: "replace" as const, key: "draft:2", text: "First\nSecond\nThird" };
+    expect(resolveComposerSurfaceText("Edited live draft", replacement, "draft:2")).toBe(
+      "Edited live draft",
+    );
+  });
+
+  it("uses the live handoff when its replacement has already been applied", () => {
+    const replacement = { kind: "initial" as const, key: "draft:0", text: "Stale publication" };
+    expect(resolveComposerSurfaceText("Live remount handoff", replacement, "draft:0")).toBe(
+      "Live remount handoff",
+    );
+  });
+});

packages/app/src/composer/input/state.ts

@@ -1,6 +1,6 @@
 import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import type { ActiveTurnBehavior } from "@getpaseo/protocol/messages";
-import type { MessagePayload } from "@/composer/types";
+import type { MessagePayload, TextReplacement } from "@/composer/types";
 import type { MessageInputKeyboardActionKind } from "@/keyboard/actions";
 
 export type SendBehavior = ActiveTurnBehavior | "queue";
@@ -192,3 +192,11 @@ export async function stopRealtimeVoice(ctx: StopRealtimeVoiceContext): Promise<
 
   await ctx.voice.stopVoice();
 }
+
+export function resolveComposerSurfaceText(
+  liveText: string,
+  replacement: TextReplacement,
+  appliedReplacementKey: string,
+): string {
+  return replacement.key === appliedReplacementKey ? liveText : replacement.text;
+}

packages/app/src/composer/input/text-input.web.browser.test.tsx

@@ -96,6 +96,35 @@ describe("ComposerTextInput web IME composition", () => {
     expect(document.activeElement).toBe(mounted.textarea);
   });
 
+  it("keeps its editing handle and selection across a rerender during composition", () => {
+    const recorder = createTextRecorder();
+    const mounted = mountInput(recorder.onChangeText);
+    const handle = mounted.inputRef.current;
+    act(() => {
+      handle?.focus();
+      dispatchComposition(mounted.textarea, "compositionstart");
+      typeFromIme(mounted.textarea, "你好");
+      mounted.textarea.setSelectionRange(1, 2);
+      mounted.root.render(
+        <ComposerTextInput
+          ref={mounted.inputRef}
+          initialValue="stale publication"
+          multiline
+          onChangeText={recorder.onChangeText}
+          placeholder="updated presentation"
+        />,
+      );
+    });
+    expect(mounted.inputRef.current).toBe(handle);
+    expect(handle?.getNativeRef()).toBe(mounted.textarea);
+    expect([mounted.textarea.selectionStart, mounted.textarea.selectionEnd]).toEqual([1, 2]);
+    expect(document.activeElement).toBe(mounted.textarea);
+    expect(recorder.changes).toEqual([]);
+    act(() => dispatchComposition(mounted.textarea, "compositionend"));
+    expect(recorder.changes).toEqual(["你好"]);
+    expect(handle?.getText()).toBe("你好");
+  });
+
   it("keeps locally typed text when its parent rerenders with a stale value", () => {
     const recorder = createTextRecorder();
     const mounted = mountInput(recorder.onChangeText);

packages/app/src/composer/types.ts

@@ -10,6 +10,7 @@ export interface MessagePayload {
 }
 
 export interface TextReplacement {
+  kind: "initial" | "replace";
   key: string;
   text: string;
 }

packages/app/src/data/push-router.test.ts

@@ -199,6 +199,71 @@ function providerUpdate(generatedAt: string): ProvidersSnapshotUpdateMessage {
 }
 
 describe("server data push router", () => {
+  it("keeps a visible diff subscribed when a hidden panel switches to the same comparison", () => {
+    const queryClient = new QueryClient();
+    const fake = createFakeClient();
+    const serverId = "server-1";
+    const cwd = "/repo";
+    const options = (mode: "base" | "uncommitted", enabled: boolean) => {
+      const queryKey = checkoutDiffQueryKey(
+        serverId,
+        cwd,
+        mode,
+        mode === "base" ? "main" : undefined,
+      );
+      return {
+        queryKey,
+        queryFn: skipToken as typeof skipToken,
+        gcTime: Infinity,
+        meta: checkoutDiffPushRoute({
+          enabled,
+          serverId,
+          cwd,
+          subscriptionId: `checkoutDiff:${JSON.stringify(queryKey)}`,
+          compare: { mode, ...(mode === "base" ? { baseRef: "main" } : {}) },
+        }),
+      };
+    };
+    const visible = new QueryObserver(queryClient, options("base", true));
+    const hidden = new QueryObserver(queryClient, options("base", false));
+    const unsubscribeVisible = visible.subscribe(() => {});
+    const unsubscribeHidden = hidden.subscribe(() => {});
+    const unmount = mountServerDataPushRouter({ queryClient, client: fake.client, serverId });
+    try {
+      visible.setOptions(options("uncommitted", true));
+      hidden.setOptions(options("uncommitted", false));
+      const subscription = fake.subscribeCheckoutDiffCalls.findLast(
+        (call) => call.compare.mode === "uncommitted",
+      )!;
+      const files = [
+        {
+          path: "README.md",
+          isNew: false,
+          isDeleted: false,
+          additions: 1,
+          deletions: 0,
+          hunks: [],
+        },
+      ];
+      fake.emit({
+        type: "checkout_diff_update",
+        payload: { subscriptionId: subscription.subscriptionId, cwd, files, error: null },
+      });
+      expect(queryClient.getQueryData(options("uncommitted", true).queryKey)).toMatchObject({
+        files,
+      });
+      expect(fake.unsubscribeCheckoutDiffCalls).not.toContain(subscription.subscriptionId);
+
+      unsubscribeVisible();
+      expect(fake.unsubscribeCheckoutDiffCalls).toContain(subscription.subscriptionId);
+    } finally {
+      unsubscribeVisible();
+      unsubscribeHidden();
+      unmount();
+      queryClient.clear();
+    }
+  });
+
   it("retains equal diff files without reconstructing changed file bodies", () => {
     const queryClient = new QueryClient();
     const fake = createFakeClient();

packages/app/src/data/push-router.ts

@@ -494,6 +494,14 @@ function getActiveServerDataRoute(
   if (query.getObserversCount() === 0) {
     return null;
   }
+  // Query metadata belongs to the last observer that updated its options. A
+  // retained hidden panel must not cancel demand from another visible panel.
+  const observerRoutes = query.observers
+    .map((observer) => getServerDataRoute({ meta: observer.options.meta }))
+    .filter((route): route is ServerDataRoute => route !== null);
+  if (observerRoutes.length > 0) {
+    return observerRoutes.find((route) => route.enabled && route.serverId === serverId) ?? null;
+  }
   const route = getServerDataRoute(query);
   if (route) {
     return route.enabled && route.serverId === serverId ? route : null;
@@ -590,7 +598,7 @@ function canEventChangeDesiredSubscriptions(type: QueryCacheNotifyEvent["type"])
   );
 }
 
-function getServerDataRoute(query: Query): ServerDataRoute | null {
+function getServerDataRoute(query: Pick<Query, "meta">): ServerDataRoute | null {
   const meta = query.meta;
   if (!isRecord(meta) || !isRecord(meta.serverData)) {
     return null;

packages/app/src/desktop/components/pair-device-section.tsx

@@ -80,7 +80,6 @@ export function PairDeviceSection({ serverId, onClose }: PairDeviceSectionProps)
         type: "svg",
         errorCorrectionLevel: "M",
         margin: 1,
-        width: 480,
       }),
     enabled: Boolean(pairingQuery.data?.url),
     dataShape: "value",
@@ -275,7 +274,8 @@ function PairingQr({ svg, isError }: { svg: string | null; isError: boolean }) {
     return (
       <SvgXml
         xml={svg}
-        style={styles.qrImage}
+        width="100%"
+        height="100%"
         accessibilityRole="image"
         accessibilityLabel={t("pairing.device.qrAccessibility")}
       />
@@ -365,10 +365,6 @@ const styles = StyleSheet.create((theme) => ({
     borderColor: theme.colors.border,
     backgroundColor: theme.colors.palette.white,
   },
-  qrImage: {
-    width: "100%",
-    height: "100%",
-  },
   linkRow: {
     flexDirection: "row",
     alignItems: "center",

packages/app/src/file-pane/editor/view.web.tsx

@@ -165,4 +165,7 @@ const FRAME_STYLE = {
   minHeight: 0,
   minWidth: 0,
 } as const;
-const HOST_STYLE = { flex: 1, minHeight: 0, overflow: "hidden" } as const;
+// CodeMirror's scrollIntoView scrolls every overflowing ancestor and stops at a fixed or sticky
+// one. Sticky (with no offsets it lays out like relative) keeps line reveals inside the editor, so
+// they don't shift the host around it, such as the compact workspace sheet.
+const HOST_STYLE = { flex: 1, minHeight: 0, overflow: "hidden", position: "sticky" } as const;

packages/app/src/file-pane/markdown-preview/image-source.test.ts

@@ -0,0 +1,165 @@
+import { describe, expect, it } from "vitest";
+
+import { resolveMarkdownFileDirectory, resolveMarkdownPreviewImageSource } from "./image-source";
+
+describe("resolveMarkdownFileDirectory", () => {
+  it("uses the parent of an absolute markdown path", () => {
+    expect(
+      resolveMarkdownFileDirectory({
+        markdownPath: "/Users/test/project/docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("/Users/test/project/docs");
+  });
+
+  it("joins a workspace-relative markdown path to the workspace root", () => {
+    expect(
+      resolveMarkdownFileDirectory({
+        markdownPath: "docs/星谷云/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("/Users/test/project/docs/星谷云");
+  });
+
+  it("preserves the host home directory for home-relative markdown paths", () => {
+    expect(
+      resolveMarkdownFileDirectory({
+        markdownPath: "~/.paseo/plans/note.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("~/.paseo/plans");
+  });
+});
+
+describe("resolveMarkdownPreviewImageSource", () => {
+  it("passes through remote and data URIs", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "https://example.com/image.png",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("https://example.com/image.png");
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "data:image/png;base64,abc",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("data:image/png;base64,abc");
+  });
+
+  it("resolves a sibling image against the markdown file", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "./images/hero.png",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("/Users/test/project/docs/images/hero.png");
+  });
+
+  it("ignores local URL query strings and fragments", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "./images/hero.png?v=2#preview",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/workspace",
+      }),
+    ).toBe("/workspace/docs/images/hero.png");
+  });
+
+  it("preserves encoded filename characters when stripping URL suffixes", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "./hero%23draft%3Fv.png?v=2#preview",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/workspace",
+      }),
+    ).toBe("/workspace/docs/hero#draft?v.png");
+  });
+
+  it("preserves remote URL query strings and fragments", () => {
+    const source = "https://example.com/hero.png?v=2#preview";
+    expect(resolveMarkdownPreviewImageSource({ source, markdownPath: "docs/guide.md" })).toBe(
+      source,
+    );
+  });
+
+  it("resolves parent-relative images that stay inside the workspace", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "../../data/cache/xinggu_docs/12-linkedin/token.png",
+        markdownPath: "docs/星谷云/12-LinkedIn.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("/Users/test/project/data/cache/xinggu_docs/12-linkedin/token.png");
+  });
+
+  it("keeps absolute and home-relative image paths", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "/tmp/screenshot.png",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("/tmp/screenshot.png");
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "~/.paseo/screenshots/output.png",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("~/.paseo/screenshots/output.png");
+  });
+
+  it("normalizes file URIs into host paths", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "file:///tmp/paseo-preview.png",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("/tmp/paseo-preview.png");
+  });
+
+  it("resolves images beside a home-relative document without using the workspace root", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "screenshots/output.png",
+        markdownPath: "~/.paseo/plans/note.md",
+        workspaceRoot: "/Users/test/project",
+      }),
+    ).toBe("~/.paseo/plans/screenshots/output.png");
+  });
+
+  it("decodes a file URI exactly once", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "file:///tmp/hero%2520image.png",
+        markdownPath: "docs/guide.md",
+        workspaceRoot: "/workspace",
+      }),
+    ).toBe("/tmp/hero%20image.png");
+  });
+
+  it("resolves parent segments from a home-relative document", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "../images/hero.png",
+        markdownPath: "~/docs/guide.md",
+        workspaceRoot: "/workspace",
+      }),
+    ).toBe("~/images/hero.png");
+  });
+
+  it("resolves Windows relative images against a drive-rooted markdown file", () => {
+    expect(
+      resolveMarkdownPreviewImageSource({
+        source: "..\\images\\hero.png",
+        markdownPath: "C:\\Users\\test\\repo\\docs\\guide.md",
+        workspaceRoot: "C:\\Users\\test\\repo",
+      }),
+    ).toBe("C:/Users/test/repo/images/hero.png");
+  });
+});

packages/app/src/file-pane/markdown-preview/image-source.ts

@@ -0,0 +1,150 @@
+import { localFileSourceToPath } from "@/attachments/utils";
+import { isAbsolutePath } from "@/utils/path";
+
+function trimTrailingSeparators(value: string): string {
+  if (value === "/" || /^[A-Za-z]:[\\/]?$/.test(value)) {
+    return value.replace(/\\/g, "/");
+  }
+  return value.replace(/[\\/]+$/, "");
+}
+
+function normalizePathSegments(value: string): string {
+  const segments: string[] = [];
+  for (const segment of value.split("/")) {
+    if (!segment || segment === ".") {
+      continue;
+    }
+    if (segment === "..") {
+      if (segments.length > 0) {
+        segments.pop();
+      }
+      continue;
+    }
+    segments.push(segment);
+  }
+  return segments.join("/");
+}
+
+function normalizeAbsolutePath(value: string): string | null {
+  const normalizedInput = trimTrailingSeparators(value.replace(/\\/g, "/"));
+  if (isHomeRelativePath(normalizedInput)) {
+    return `~/${normalizePathSegments(normalizedInput.slice(2))}`;
+  }
+  if (!isAbsolutePath(normalizedInput)) {
+    return null;
+  }
+
+  const drivePath = /^([A-Za-z]:)\/(.*)$/.exec(normalizedInput);
+  if (drivePath) {
+    return trimTrailingSeparators(`${drivePath[1]}/${normalizePathSegments(drivePath[2])}`);
+  }
+
+  const prefix = normalizedInput.startsWith("//") ? "//" : "/";
+  return trimTrailingSeparators(
+    `${prefix}${normalizePathSegments(normalizedInput.replace(/^\/+/, ""))}`,
+  );
+}
+
+function parentDirectory(path: string): string | null {
+  const normalized = trimTrailingSeparators(path.replace(/\\/g, "/"));
+  if (!normalized) {
+    return null;
+  }
+  if (normalized === "/" || /^[A-Za-z]:\/?$/.test(normalized)) {
+    return normalized.endsWith("/") ? normalized : `${normalized}/`;
+  }
+
+  const index = normalized.lastIndexOf("/");
+  if (index < 0) {
+    return null;
+  }
+  if (index === 0) {
+    return "/";
+  }
+  const parent = normalized.slice(0, index);
+  if (/^[A-Za-z]:$/.test(parent)) {
+    return `${parent}/`;
+  }
+  return parent;
+}
+
+function joinAbsolute(baseDirectory: string, relativePath: string): string | null {
+  const directory = trimTrailingSeparators(baseDirectory.replace(/\\/g, "/"));
+  const relative = relativePath.replace(/\\/g, "/").replace(/^\/+/, "");
+  if (!directory) {
+    return null;
+  }
+  return normalizeAbsolutePath(`${directory}/${relative}`);
+}
+
+function isHomeRelativePath(value: string): boolean {
+  return value === "~" || value.startsWith("~/") || value.startsWith("~\\");
+}
+
+function decodeRelativeSource(source: string): string {
+  try {
+    return decodeURIComponent(source);
+  } catch {
+    return source;
+  }
+}
+
+export function resolveMarkdownFileDirectory(input: {
+  markdownPath: string;
+  workspaceRoot?: string;
+}): string | null {
+  const markdownPath = input.markdownPath.trim().replace(/\\/g, "/");
+  if (!markdownPath) {
+    return null;
+  }
+
+  if (isAbsolutePath(markdownPath) || isHomeRelativePath(markdownPath)) {
+    const absolute = normalizeAbsolutePath(markdownPath);
+    return absolute ? parentDirectory(absolute) : null;
+  }
+
+  const workspaceRoot = input.workspaceRoot?.trim();
+  if (!workspaceRoot || !isAbsolutePath(workspaceRoot)) {
+    return null;
+  }
+
+  const absoluteMarkdown = joinAbsolute(workspaceRoot, markdownPath);
+  return absoluteMarkdown ? parentDirectory(absoluteMarkdown) : null;
+}
+
+export function resolveMarkdownPreviewImageSource(input: {
+  source: string;
+  markdownPath: string;
+  workspaceRoot?: string;
+}): string | null {
+  const source = input.source.trim();
+  if (!source) {
+    return null;
+  }
+
+  if (/^(https?:|data:|blob:)/i.test(source)) {
+    return source;
+  }
+
+  const pathSource = source.replace(/[?#].*$/, "");
+  const path = localFileSourceToPath(
+    pathSource.startsWith("file://") ? pathSource : decodeRelativeSource(pathSource),
+  );
+  if (!path) {
+    return null;
+  }
+
+  if (isHomeRelativePath(path) || isAbsolutePath(path)) {
+    return path;
+  }
+
+  const directory = resolveMarkdownFileDirectory({
+    markdownPath: input.markdownPath,
+    workspaceRoot: input.workspaceRoot,
+  });
+  if (!directory) {
+    return path;
+  }
+
+  return joinAbsolute(directory, path);
+}

packages/app/src/file-pane/markdown-preview/index.tsx

@@ -1,11 +1,59 @@
 import { useMemo } from "react";
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import type { ASTNode, RenderRules } from "react-native-markdown-display";
 import { Text, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
-import { MarkdownRenderer } from "@/components/markdown/renderer";
+import {
+  createSharedMarkdownRules,
+  MarkdownRenderer,
+  type MarkdownStyles,
+} from "@/components/markdown/renderer";
 import { parseMarkdownPreviewDocument } from "./document";
+import { resolveMarkdownPreviewImageSource } from "./image-source";
+import { FileMarkdownPreviewImage } from "./preview-image";
 
-export function FileMarkdownPreview({ source }: { source: string }) {
+export function FileMarkdownPreview({
+  source,
+  filePath,
+  workspaceRoot,
+  client,
+  serverId,
+}: {
+  source: string;
+  filePath: string;
+  workspaceRoot?: string;
+  client?: DaemonClient | null;
+  serverId?: string;
+}) {
   const document = useMemo(() => parseMarkdownPreviewDocument(source), [source]);
+  const rules = useMemo<RenderRules>(
+    () => ({
+      ...createSharedMarkdownRules(),
+      image: (node: ASTNode, _children, _parent: ASTNode[], _styles: MarkdownStyles) => {
+        const resolved = resolveMarkdownPreviewImageSource({
+          source: String(node.attributes?.src ?? ""),
+          markdownPath: filePath,
+          workspaceRoot,
+        });
+        if (!resolved) {
+          return null;
+        }
+
+        return (
+          <FileMarkdownPreviewImage
+            key={node.key}
+            source={resolved}
+            occurrenceKey={`${filePath}:${node.key}`}
+            alt={typeof node.attributes?.alt === "string" ? node.attributes.alt : undefined}
+            client={client}
+            workspaceRoot={workspaceRoot}
+            serverId={serverId}
+          />
+        );
+      },
+    }),
+    [client, filePath, serverId, workspaceRoot],
+  );
 
   return (
     <View style={styles.outerGutter}>
@@ -31,7 +79,7 @@ export function FileMarkdownPreview({ source }: { source: string }) {
             ))}
           </View>
         ) : null}
-        <MarkdownRenderer text={document.body} />
+        <MarkdownRenderer text={document.body} rules={rules} />
       </View>
     </View>
   );

packages/app/src/file-pane/markdown-preview/preview-image.tsx

@@ -0,0 +1,151 @@
+import { useCallback, useMemo, useState } from "react";
+import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
+import { useTranslation } from "react-i18next";
+import { Image, Pressable, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { useAssistantImage } from "@/assistant-image/use-assistant-image";
+import { AttachmentLightbox, type ImageLightboxSource } from "@/components/attachment-lightbox";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import type { Theme } from "@/styles/theme";
+
+const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
+const foregroundMutedColorMapping = (theme: Theme) => ({
+  color: theme.colors.foregroundMuted,
+});
+
+const PREVIEW_IMAGE_MIN_HEIGHT = 160;
+
+export function FileMarkdownPreviewImage({
+  source,
+  occurrenceKey,
+  alt,
+  client,
+  workspaceRoot,
+  serverId,
+}: {
+  source: string;
+  occurrenceKey: string;
+  alt?: string;
+  client?: DaemonClient | null;
+  workspaceRoot?: string;
+  serverId?: string;
+}) {
+  const { t } = useTranslation();
+  const [viewerOpen, setViewerOpen] = useState(false);
+  const openViewer = useCallback(() => setViewerOpen(true), []);
+  const closeViewer = useCallback(() => setViewerOpen(false), []);
+  const image = useAssistantImage({
+    source,
+    occurrenceKey,
+    client,
+    workspaceRoot,
+    serverId,
+  });
+  const binding = image.status === "failed" ? null : image.binding;
+  const aspectRatio = image.status === "failed" ? null : image.aspectRatio;
+  const imageUri = binding?.uri ?? "";
+  const imageSource = useMemo(() => ({ uri: imageUri }), [imageUri]);
+  const imageSizeStyle = useMemo<ViewStyle>(() => {
+    if (aspectRatio) {
+      return { aspectRatio };
+    }
+    return { height: PREVIEW_IMAGE_MIN_HEIGHT };
+  }, [aspectRatio]);
+  const surfaceStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [styles.surface, 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]);
+
+  if (image.status === "failed") {
+    return (
+      <View style={[styles.frame, styles.state]} testID="markdown-preview-image-failed">
+        <Text style={styles.errorText}>{image.message}</Text>
+      </View>
+    );
+  }
+
+  if (!binding) {
+    return (
+      <View style={[styles.frame, styles.state]} testID="markdown-preview-image-loading">
+        <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.frame} testID="markdown-preview-image">
+      <Pressable
+        accessibilityLabel={t("composer.attachments.openImage")}
+        accessibilityRole="button"
+        disabled={image.status !== "loaded"}
+        onPress={openViewer}
+        style={surfaceStyle}
+      >
+        <View style={styles.image} accessibilityRole="image" accessibilityLabel={alt}>
+          <Image
+            ref={binding.onRef}
+            source={imageSource}
+            style={styles.image}
+            resizeMode="contain"
+            onLoad={binding.onLoad}
+            onError={binding.onError}
+          />
+          {image.status === "loading" ? (
+            <View pointerEvents="none" style={styles.loadingOverlay}>
+              <ThemedLoadingSpinner size="small" uniProps={foregroundMutedColorMapping} />
+            </View>
+          ) : null}
+        </View>
+      </Pressable>
+      <AttachmentLightbox source={lightboxSource} onClose={closeViewer} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  frame: {
+    width: "100%",
+    marginBottom: theme.spacing[4],
+  },
+  surface: {
+    width: "100%",
+    overflow: "hidden",
+    borderRadius: theme.borderRadius.md,
+    backgroundColor: theme.colors.surface2,
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  state: {
+    minHeight: PREVIEW_IMAGE_MIN_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: theme.spacing[6],
+    backgroundColor: theme.colors.surface2,
+    borderRadius: theme.borderRadius.md,
+  },
+  loadingOverlay: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  errorText: {
+    color: theme.colors.foregroundMuted,
+    fontSize: theme.fontSize.base,
+    textAlign: "center",
+  },
+}));

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

@@ -54,6 +54,9 @@ interface FilePreviewBodyProps {
   location: WorkspaceFileLocation;
   navigationRevision: number;
   imagePreviewUri: string | null;
+  workspaceRoot: string;
+  client: DaemonClient | null;
+  serverId: string;
 }
 
 type TextExplorerFile = ExplorerFile & { kind: "text" };
@@ -135,6 +138,9 @@ function FilePreviewBody({
   location,
   navigationRevision,
   imagePreviewUri,
+  workspaceRoot,
+  client,
+  serverId,
 }: FilePreviewBodyProps) {
   const { t } = useTranslation();
   const filePath = location.path;
@@ -182,7 +188,13 @@ function FilePreviewBody({
             style={styles.previewContent}
             showsVerticalScrollIndicator
           >
-            <FileMarkdownPreview source={preview.content ?? ""} />
+            <FileMarkdownPreview
+              source={preview.content ?? ""}
+              filePath={filePath}
+              workspaceRoot={workspaceRoot}
+              client={client}
+              serverId={serverId}
+            />
           </RNScrollView>
         </View>
       );
@@ -297,6 +309,7 @@ export function FilePane({
   return (
     <FilePanePresentation
       serverId={serverId}
+      workspaceRoot={normalizedWorkspaceRoot}
       client={client}
       readTarget={readTarget}
       preview={preview}
@@ -338,6 +351,7 @@ function isEditableTextFile(input: {
 
 function FilePanePresentation({
   serverId,
+  workspaceRoot,
   client,
   readTarget,
   preview,
@@ -359,6 +373,7 @@ function FilePanePresentation({
   imagePreviewUri,
 }: {
   serverId: string;
+  workspaceRoot: string;
   client: DaemonClient | null;
   readTarget: { cwd: string; path: string } | null;
   preview: ExplorerFile | null;
@@ -393,6 +408,8 @@ function FilePanePresentation({
     return (
       <EditableFilePane
         key={`${serverId}:${readTarget.cwd}:${readTarget.path}`}
+        serverId={serverId}
+        workspaceRoot={workspaceRoot}
         client={client}
         cwd={readTarget.cwd}
         path={readTarget.path}
@@ -449,12 +466,17 @@ function FilePanePresentation({
         location={location}
         navigationRevision={navigationRevision}
         imagePreviewUri={imagePreviewUri}
+        workspaceRoot={workspaceRoot}
+        client={client}
+        serverId={serverId}
       />
     </View>
   );
 }
 
 function EditableFilePane({
+  serverId,
+  workspaceRoot,
   client,
   cwd,
   path,
@@ -470,6 +492,8 @@ function EditableFilePane({
   location,
   navigationRevision,
 }: {
+  serverId: string;
+  workspaceRoot: string;
   client: DaemonClient;
   cwd: string;
   path: string;
@@ -622,6 +646,9 @@ function EditableFilePane({
           location={location}
           navigationRevision={navigationRevision}
           imagePreviewUri={null}
+          workspaceRoot={workspaceRoot}
+          client={client}
+          serverId={serverId}
         />
       )}
     </View>

packages/app/src/i18n/resources/ar.ts

@@ -124,6 +124,8 @@ export const ar: TranslationResources = {
     input: {
       accessibilityLabel: "وكيل الرسائل...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "ملء الشاشة",
+      exitFullscreen: "الخروج من ملء الشاشة",
       focusHint: "{{shortcut}}للتركيز",
       addAttachment: "إضافة مرفق",
       interruptAgent: "عامل المقاطعة",
@@ -611,6 +613,9 @@ export const ar: TranslationResources = {
       updateHost: "حدّث المضيف لاستخدام عارض الطرفية الأصلي.",
       unableToSubscribe: "غير قادر على الاشتراك في المحطة",
     },
+    sheet: {
+      openAsTab: "فتح كعلامة تبويب",
+    },
     tabs: {
       loading: "تحميل...",
       modified: "تغييرات غير محفوظة",

packages/app/src/i18n/resources/en.ts

@@ -120,6 +120,8 @@ export const en = {
     input: {
       accessibilityLabel: "Message agent...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "Fullscreen",
+      exitFullscreen: "Exit fullscreen",
       focusHint: "{{shortcut}} to focus",
       addAttachment: "Add attachment",
       interruptAgent: "Interrupt agent",
@@ -608,6 +610,9 @@ export const en = {
       updateHost: "Update the host to use the native terminal renderer.",
       unableToSubscribe: "Unable to subscribe to terminal",
     },
+    sheet: {
+      openAsTab: "Open as tab",
+    },
     tabs: {
       loading: "Loading...",
       modified: "Unsaved changes",

packages/app/src/i18n/resources/es.ts

@@ -125,6 +125,8 @@ export const es: TranslationResources = {
     input: {
       accessibilityLabel: "Agente de mensajes...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "Pantalla completa",
+      exitFullscreen: "Salir de pantalla completa",
       focusHint: "{{shortcut}}para enfocar",
       addAttachment: "Agregar archivo adjunto",
       interruptAgent: "agente de interrupción",
@@ -617,6 +619,9 @@ export const es: TranslationResources = {
       updateHost: "Actualiza el host para usar el renderizador de terminal nativo.",
       unableToSubscribe: "No se puede suscribir al terminal",
     },
+    sheet: {
+      openAsTab: "Abrir como pestaña",
+    },
     tabs: {
       loading: "Cargando...",
       modified: "Cambios sin guardar",

packages/app/src/i18n/resources/fr.ts

@@ -126,6 +126,8 @@ export const fr: TranslationResources = {
     input: {
       accessibilityLabel: "Écrire à l’agent…",
       terminalAccessibilityLabel: "Prompt du terminal",
+      fullscreen: "Plein écran",
+      exitFullscreen: "Quitter le plein écran",
       focusHint: "{{shortcut}} pour saisir",
       addAttachment: "Ajouter une pièce jointe",
       interruptAgent: "Interrompre l’agent",
@@ -616,6 +618,9 @@ export const fr: TranslationResources = {
       updateHost: "Mettez à jour l’hôte pour utiliser le rendu natif du terminal.",
       unableToSubscribe: "Impossible de s’abonner au terminal",
     },
+    sheet: {
+      openAsTab: "Ouvrir dans un onglet",
+    },
     tabs: {
       loading: "Chargement…",
       modified: "Modifications non enregistrées",

packages/app/src/i18n/resources/ja.ts

@@ -125,6 +125,8 @@ export const ja: TranslationResources = {
     input: {
       accessibilityLabel: "エージェントにメッセージ...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "全画面表示",
+      exitFullscreen: "全画面表示を終了",
       focusHint: "{{shortcut}}でフォーカス",
       addAttachment: "添付ファイルを追加",
       interruptAgent: "エージェントを中断",
@@ -617,6 +619,9 @@ export const ja: TranslationResources = {
       updateHost: "ネイティブターミナルを使用するにはホストを更新してください。",
       unableToSubscribe: "ターミナルに接続できません",
     },
+    sheet: {
+      openAsTab: "タブで開く",
+    },
     tabs: {
       loading: "読み込み中...",
       modified: "未保存の変更",

packages/app/src/i18n/resources/ko.ts

@@ -124,6 +124,8 @@ export const ko: TranslationResources = {
     input: {
       accessibilityLabel: "에이전트에게 메시지...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "전체 화면",
+      exitFullscreen: "전체 화면 종료",
       focusHint: "{{shortcut}}로 포커스",
       addAttachment: "첨부 추가",
       interruptAgent: "에이전트 중단",
@@ -612,6 +614,9 @@ export const ko: TranslationResources = {
       updateHost: "기본 터미널 렌더러를 사용하도록 호스트를 업데이트합니다.",
       unableToSubscribe: "터미널을 구독할 수 없습니다",
     },
+    sheet: {
+      openAsTab: "탭으로 열기",
+    },
     tabs: {
       loading: "불러오는 중...",
       modified: "저장되지 않은 변경사항",

packages/app/src/i18n/resources/pt-BR.ts

@@ -125,6 +125,8 @@ export const ptBR: TranslationResources = {
     input: {
       accessibilityLabel: "Enviar mensagem ao agente...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "Tela cheia",
+      exitFullscreen: "Sair da tela cheia",
       focusHint: "{{shortcut}} para focar",
       addAttachment: "Adicionar anexo",
       interruptAgent: "Interromper agente",
@@ -616,6 +618,9 @@ export const ptBR: TranslationResources = {
       updateHost: "Atualize o host para usar o renderizador de terminal nativo.",
       unableToSubscribe: "Não foi possível assinar o terminal",
     },
+    sheet: {
+      openAsTab: "Abrir como aba",
+    },
     tabs: {
       loading: "Carregando...",
       modified: "Alterações não salvas",

packages/app/src/i18n/resources/ru.ts

@@ -125,6 +125,8 @@ export const ru: TranslationResources = {
     input: {
       accessibilityLabel: "Написать агенту...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "Полный экран",
+      exitFullscreen: "Выйти из полноэкранного режима",
       focusHint: "{{shortcut}}, для фокуса",
       addAttachment: "Добавить вложение",
       interruptAgent: "Прервать агента",
@@ -618,6 +620,9 @@ export const ru: TranslationResources = {
       updateHost: "Обновите хост, чтобы использовать нативный рендерер терминала.",
       unableToSubscribe: "Не удалось подключиться к терминалу",
     },
+    sheet: {
+      openAsTab: "Открыть во вкладке",
+    },
     tabs: {
       loading: "Загрузка...",
       modified: "Несохранённые изменения",

packages/app/src/i18n/resources/zh-CN.ts

@@ -124,6 +124,8 @@ export const zhCN: TranslationResources = {
     input: {
       accessibilityLabel: "给 Agent 发消息...",
       terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "全屏",
+      exitFullscreen: "退出全屏",
       focusHint: "{{shortcut}} 聚焦",
       addAttachment: "添加附件",
       interruptAgent: "中断 Agent",
@@ -611,6 +613,9 @@ export const zhCN: TranslationResources = {
       updateHost: "请更新主机以使用原生终端渲染器。",
       unableToSubscribe: "无法订阅 Terminal",
     },
+    sheet: {
+      openAsTab: "作为标签页打开",
+    },
     tabs: {
       loading: "正在加载...",
       modified: "未保存的更改",

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

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import { formatShortcut } from "@/utils/format-shortcut";
+import { keyboardEventToComboString } from "./shortcut-string";
 import {
   buildKeyboardShortcutHelpSections,
   buildEffectiveBindings,
@@ -1026,6 +1027,90 @@ describe("unassigned shortcuts", () => {
   });
 
   describe("matching", () => {
+    it("dispatches a captured Russian letter shortcut on the same key", () => {
+      const event = keyboardInput({ key: "и", code: "KeyB", ctrlKey: true });
+      const combo = keyboardEventToComboString(event as KeyboardEvent);
+      expect(combo).toBe("Ctrl+B");
+      const bindings = buildEffectiveBindings({
+        "sidebar-toggle-left-ctrl-period-non-mac": combo!,
+      });
+
+      expect(resolveShortcut({ event, context: desktopNonMac, bindings }).match?.action).toBe(
+        "sidebar.toggle.left",
+      );
+    });
+
+    it("dispatches a recorded dotted-uppercase letter with Shift held", () => {
+      const event = keyboardInput({ key: "İ", code: "KeyS", ctrlKey: true, shiftKey: true });
+      const combo = keyboardEventToComboString(event as KeyboardEvent);
+      expect(combo).toBe("Ctrl+Shift+S");
+      const bindings = buildEffectiveBindings({
+        "sidebar-toggle-left-ctrl-period-non-mac": combo!,
+      });
+      expect(resolveShortcut({ event, context: desktopNonMac, bindings }).match?.action).toBe(
+        "sidebar.toggle.left",
+      );
+    });
+
+    it.each(["и", "И", "β", "ش", "ב", "é"])(
+      "matches default and recorded letter bindings for unsupported letter %s",
+      (key) => {
+        const event = keyboardInput({ key, code: "KeyB", ctrlKey: true });
+        expectShortcutResolution({
+          event,
+          context: desktopNonMac,
+          action: "sidebar.toggle.left",
+        });
+        const combo = keyboardEventToComboString(event as KeyboardEvent);
+        expect(combo).toBe("Ctrl+B");
+        expect(
+          resolveShortcut({
+            event,
+            context: desktopNonMac,
+            bindings: buildEffectiveBindings({
+              "sidebar-toggle-left-ctrl-period-non-mac": combo!,
+            }),
+          }).match?.action,
+        ).toBe("sidebar.toggle.left");
+      },
+    );
+
+    it.each(["v", "†", "Dead", "Unidentified", ""])(
+      "does not match an unrelated character or named key %s by physical letter",
+      (key) => {
+        expectNoShortcutResolution({
+          event: { key, code: "KeyB", ctrlKey: true },
+          context: desktopNonMac,
+        });
+      },
+    );
+
+    it("does not match non-letter bindings by physical key for unsupported letters", () => {
+      expectNoShortcutResolution({
+        event: { key: "ю", code: "Period", ctrlKey: true },
+        context: desktopNonMac,
+      });
+    });
+
+    it("dispatches a captured Dvorak binding on the same logical key", () => {
+      const event = keyboardInput({ key: "b", code: "KeyN", metaKey: true });
+      const combo = keyboardEventToComboString(event as KeyboardEvent);
+      expect(combo).toBe("Cmd+B");
+      const bindings = buildEffectiveBindings({ "sidebar-toggle-left-mac-cmd-b": combo! });
+
+      expect(
+        resolveShortcut({ event, context: { isMac: true, isDesktop: true }, bindings }).match
+          ?.action,
+      ).toBe("sidebar.toggle.left");
+      expect(
+        resolveShortcut({
+          event: { key: "x", code: "KeyB", metaKey: true },
+          context: { isMac: true, isDesktop: true },
+          bindings,
+        }).match,
+      ).toBeNull();
+    });
+
     it("stops matching a shortcut the user unassigned", () => {
       const bindings = buildEffectiveBindings({ [TAB_NEW_BINDING]: UNASSIGNED_COMBO });
 

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

@@ -1285,6 +1285,12 @@ function matchesKeyOrCode(combo: KeyCombo, event: KeyboardShortcutInput): boolea
   if (combo.shift === true && combo.shiftedKey !== undefined && eventKey === combo.shiftedKey) {
     return true;
   }
+  // Recording an unsupported letter (for example Cyrillic и on KeyB)
+  // stores its physical A-Z key. Dispatch must accept that same key without
+  // giving Latin layouts such as Dvorak a second physical-key binding.
+  if (/^[a-z]$/.test(combo.key) && /^\p{Letter}$/u.test(event.key) && !/^[a-z]$/.test(eventKey)) {
+    return event.code === combo.code;
+  }
   // macOS rewrites event.key when Option is held (Option+T -> "†",
   // Option+[ -> "“"), so Alt-bound letter / bracket bindings can only
   // match by event.code. Stay key-first for non-Alt bindings so Dvorak

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

@@ -22,6 +22,45 @@ function keyboardEvent(overrides: Partial<KeyboardEvent>): KeyboardEvent {
 }
 
 describe("keyboardEventToComboString", () => {
+  it("captures the Dvorak character rather than its QWERTY position", () => {
+    expect(
+      keyboardEventToComboString(keyboardEvent({ key: "b", code: "KeyN", metaKey: true })),
+    ).toBe("Cmd+B");
+  });
+
+  it("captures shifted Dvorak letters and punctuation at other physical positions", () => {
+    expect(
+      keyboardEventToComboString(
+        keyboardEvent({ key: "T", code: "KeyK", metaKey: true, shiftKey: true }),
+      ),
+    ).toBe("Shift+Cmd+T");
+    expect(
+      keyboardEventToComboString(keyboardEvent({ key: ";", code: "KeyZ", ctrlKey: true })),
+    ).toBe("Ctrl+;");
+    expect(
+      keyboardEventToComboString(
+        keyboardEvent({ key: "?", code: "BracketLeft", ctrlKey: true, shiftKey: true }),
+      ),
+    ).toBe("Ctrl+Shift+/");
+  });
+
+  it("keeps named keys and rewritten Option characters capturable", () => {
+    expect(keyboardEventToComboString(keyboardEvent({ key: "ArrowLeft", code: "ArrowLeft" }))).toBe(
+      "ArrowLeft",
+    );
+    expect(
+      keyboardEventToComboString(keyboardEvent({ key: "†", code: "KeyT", altKey: true })),
+    ).toBe("Alt+T");
+  });
+
+  it("does not record a named key that dispatch does not support", () => {
+    expect(
+      keyboardEventToComboString(
+        keyboardEvent({ key: "Enter", code: "NumpadEnter", ctrlKey: true }),
+      ),
+    ).toBeNull();
+  });
+
   it("captures the minus key (regression: previously returned null)", () => {
     expect(keyboardEventToComboString(keyboardEvent({ key: "-", code: "Minus" }))).toBe("-");
   });

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

@@ -266,7 +266,16 @@ export function keyboardEventToComboString(event: KeyboardEvent): string | null
   if (event.shiftKey) parts.push("Shift");
   if (event.metaKey) parts.push("Cmd");
 
-  const humanKey = CODE_TO_KEY[event.code];
+  // Capture the same logical character that dispatch matches. Keep the code
+  // fallback for named keys and Option combinations whose key is rewritten.
+  const eventKey = event.key.toLowerCase();
+  const logicalKey = Object.entries(KEY_MAP).find(
+    ([, mapping]) =>
+      mapping.key?.length === 1 &&
+      (mapping.key.toLowerCase() === eventKey ||
+        (event.shiftKey && mapping.shiftedKey === event.key)),
+  )?.[0];
+  const humanKey = logicalKey ?? CODE_TO_KEY[event.code];
   if (humanKey) {
     parts.push(humanKey);
   } else {

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

@@ -1153,6 +1153,8 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
   onOpenWorkspaceFile?: (request: WorkspaceFileOpenRequest) => void;
 }) {
   const { t } = useTranslation();
+  // The workspace sheet is for looking; Open as tab brings the agent back with its composer.
+  const showsComposer = usePaneContext().host !== "sheet";
   const subagentRows = useSubagentsForParent({ serverId, parentAgentId: agentId });
   const tasks = useSessionStore((state): TodoEntry[] | undefined =>
     state.sessions[serverId]?.agentTasks.get(agentId),
@@ -1216,7 +1218,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
       composerState,
     ],
   );
-  const composerSection = (
+  const composerSection = showsComposer ? (
     <RenderProfile id={`AgentComposerSection:${agentId}`}>
       <AgentComposerSection
         agentId={agentId}
@@ -1233,7 +1235,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
         onMessageSent={handleMessageSent}
       />
     </RenderProfile>
-  );
+  ) : null;
   const streamContent = (
     <View style={animatedStaticStyles.content}>
       <RenderProfile id={`AgentStreamSection:${agentId}`}>

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

@@ -3,7 +3,7 @@ import { WorkspaceDiffStatPill } from "@/composer/diff-stat-pill";
 import { useWorkspaceHasDiffStat } from "@/composer/workspace-diff-stat";
 import { AgentTaskList } from "@/composer/task-list";
 import { ComposerTrackBar } from "@/composer/tracks";
-import { supportsDesktopPaneSplits, useIsCompactFormFactor } from "@/constants/layout";
+import { useIsCompactFormFactor } from "@/constants/layout";
 import { usePaneContext } from "@/panels/pane-context";
 import { useSettings } from "@/hooks/use-settings";
 import { PluginComposerPills } from "@/plugins";
@@ -17,7 +17,7 @@ import {
 import { SubagentsTrack } from "@/subagents/track";
 import type { TodoEntry } from "@/types/stream";
 import { navigateToAgent } from "@/utils/navigate-to-agent";
-import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
+import { buildWorkspaceTabPersistenceKey, type WorkspaceTabTarget } from "@/workspace-tabs/model";
 import { openPreferredWorkspaceTarget } from "@/workspace-tabs/open-beside";
 import { openComposerChanges } from "@/workspace-tabs/open-supporting-view";
 
@@ -49,10 +49,9 @@ export const AgentTracks = memo(function AgentTracks({
   onArchiveFinished: () => void;
   hasPluginComposerPills: boolean;
 }): ReactElement | null {
-  const { tabId, openTab } = usePaneContext();
+  const { tabId } = usePaneContext();
   const hasWorkspaceDiffStat = useWorkspaceHasDiffStat(serverId, workspaceId);
   const isCompact = useIsCompactFormFactor();
-  const canSplit = supportsDesktopPaneSplits() && !isCompact;
   const openInSidePane = useSettings((settings) => settings.openInSidePane);
   const workspaceKey = buildWorkspaceTabPersistenceKey({ serverId, workspaceId });
   const canDetachSubagents = useSessionStore(
@@ -60,45 +59,36 @@ export const AgentTracks = memo(function AgentTracks({
   );
   const archiveSubagent = useArchiveSubagent({ serverId });
   const detachSubagent = useDetachSubagent({ serverId });
+  const openSubagentTarget = useCallback(
+    (target: WorkspaceTabTarget) => {
+      openPreferredWorkspaceTarget({
+        workspaceKey,
+        target,
+        source: "subagents",
+        preferences: openInSidePane,
+        parentTabId: tabId,
+      });
+    },
+    [openInSidePane, tabId, workspaceKey],
+  );
   const handleOpenSubagent = useCallback(
     (subagentId: string) => {
       const session = useSessionStore.getState().sessions[serverId];
       const agent = session?.agents.get(subagentId) ?? session?.agentDetails.get(subagentId);
+      // A subagent in another workspace lives in that workspace's tabs.
       if (agent?.workspaceId && agent.workspaceId !== workspaceId) {
         navigateToAgent({ serverId, agentId: subagentId });
         return;
       }
-      if (canSplit && workspaceKey) {
-        openPreferredWorkspaceTarget({
-          isCompact,
-          workspaceKey,
-          target: { kind: "agent", agentId: subagentId },
-          source: "subagents",
-          preferences: openInSidePane,
-          parentTabId: tabId,
-        });
-        return;
-      }
-      navigateToAgent({ serverId, agentId: subagentId });
+      openSubagentTarget({ kind: "agent", agentId: subagentId });
     },
-    [canSplit, isCompact, openInSidePane, serverId, tabId, workspaceId, workspaceKey],
+    [openSubagentTarget, serverId, workspaceId],
   );
   const handleOpenProviderSubagent = useCallback(
     (parentAgentId: string, subagentId: string) => {
-      if (canSplit && workspaceKey) {
-        openPreferredWorkspaceTarget({
-          isCompact,
-          workspaceKey,
-          target: { kind: "provider_subagent", parentAgentId, subagentId },
-          source: "subagents",
-          preferences: openInSidePane,
-          parentTabId: tabId,
-        });
-        return;
-      }
-      openTab({ kind: "provider_subagent", parentAgentId, subagentId });
+      openSubagentTarget({ kind: "provider_subagent", parentAgentId, subagentId });
     },
-    [canSplit, isCompact, openInSidePane, openTab, tabId, workspaceKey],
+    [openSubagentTarget],
   );
   const handleOpenChanges = useCallback(() => {
     if (!workspaceKey) {

packages/app/src/panels/panel-instance-attributes.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
 import { usePaneContext } from "@/panels/pane-context";
+import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
 
 export interface PanelInstanceIdentity {
   serverId: string;
@@ -18,8 +19,20 @@ const listenersByPanel = new Map<string, Set<() => void>>();
 const allListeners = new Set<() => void>();
 let attributesRevision = 0;
 
+function buildWorkspacePanelKey(workspaceKey: string, tabId: string): string {
+  return `${workspaceKey}:${tabId}`;
+}
+
 export function buildPanelInstanceKey(identity: PanelInstanceIdentity): string {
-  return `${identity.serverId}:${identity.workspaceId}:${identity.tabId}`;
+  return buildWorkspacePanelKey(buildWorkspaceTabPersistenceKey(identity) ?? "", identity.tabId);
+}
+
+/** Looks a panel up by the workspace key the layout store uses. */
+export function getWorkspacePanelAttributes(
+  workspaceKey: string,
+  tabId: string,
+): PanelInstanceAttributes {
+  return attributesByPanel.get(buildWorkspacePanelKey(workspaceKey, tabId)) ?? DEFAULT_ATTRIBUTES;
 }
 
 export function getPanelInstanceAttributes(

packages/app/src/panels/panel-manifest.test.ts

@@ -18,6 +18,14 @@ describe("panel manifest", () => {
     expect(panelSupportsHost("setup", "explorer")).toBe(false);
   });
 
+  it("supports the sheet exactly for kinds with a compact sheet rule", () => {
+    expect(panelSupportsHost("file", "sheet")).toBe(true);
+    expect(panelSupportsHost("agent", "sheet")).toBe(true);
+    expect(panelSupportsHost("provider_subagent", "sheet")).toBe(true);
+    expect(panelSupportsHost("terminal", "sheet")).toBe(false);
+    expect(panelSupportsHost("plugin", "sheet")).toBe(false);
+  });
+
   it("lets navigation tabs hide their close button without losing their close action", () => {
     expect(getPanelManifest("files").showCloseButton).toBe(false);
     expect(getPanelManifest("changes_tree").showCloseButton).toBe(false);

packages/app/src/panels/panel-manifest.ts

@@ -1,12 +1,38 @@
 import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
 
-export type PaneHost = "main" | "explorer";
+/** Where a tab renders: a split pane, the Explorer dock, or the compact workspace sheet. */
+export type PaneHost = "main" | "explorer" | "sheet";
+
+/** How a target behaves while it is shown in the compact workspace sheet. */
+export interface CompactSheetPolicy {
+  /** The sheet offers Open as tab, which moves the same tab into the focused pane. */
+  openAsTab: boolean;
+}
+
+/** Facts about a target that live outside the layout, resolved lazily by the workspace. */
+export interface PanelTargetFacts {
+  isWorkspaceRootAgent(agentId: string): boolean;
+}
+
+type CompactSheetRule<K extends WorkspaceTabTarget["kind"]> =
+  | CompactSheetPolicy
+  | null
+  | ((
+      target: Extract<WorkspaceTabTarget, { kind: K }>,
+      facts: PanelTargetFacts,
+    ) => CompactSheetPolicy | null);
 
 export interface PanelManifest<K extends WorkspaceTabTarget["kind"] = WorkspaceTabTarget["kind"]> {
   kind: K;
-  supportedHosts: readonly PaneHost[];
+  /** The sheet is never listed: a kind renders there exactly when it has a `compactSheet` rule. */
+  supportedHosts: readonly Exclude<PaneHost, "sheet">[];
   showCloseButton: boolean;
   singleton: boolean;
+  /**
+   * On compact layouts, revealing this target opens it in the workspace sheet over the current
+   * tab instead of adding a tab. `null` keeps it in the tab strip.
+   */
+  compactSheet: CompactSheetRule<K>;
   resourceKey(target: Extract<WorkspaceTabTarget, { kind: K }>): string;
 }
 
@@ -20,6 +46,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: () => "new_tab",
   },
   draft: {
@@ -27,6 +54,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: (target) => target.draftId,
   },
   agent: {
@@ -34,6 +62,8 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: (target, facts) =>
+      facts.isWorkspaceRootAgent(target.agentId) ? null : { openAsTab: true },
     resourceKey: (target) => target.agentId,
   },
   provider_subagent: {
@@ -41,6 +71,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: { openAsTab: false },
     resourceKey: (target) => `${target.parentAgentId}:${target.subagentId}`,
   },
   terminal: {
@@ -48,6 +79,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: (target) => target.terminalId,
   },
   browser: {
@@ -55,6 +87,7 @@ const manifests = {
     supportedHosts: ["main"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: (target) => target.browserId,
   },
   changes_tree: {
@@ -62,6 +95,7 @@ const manifests = {
     supportedHosts: ["explorer"],
     showCloseButton: false,
     singleton: true,
+    compactSheet: null,
     resourceKey: () => "changes_tree",
   },
   files: {
@@ -69,6 +103,7 @@ const manifests = {
     supportedHosts: ["explorer"],
     showCloseButton: false,
     singleton: true,
+    compactSheet: null,
     resourceKey: () => "files",
   },
   pull_request: {
@@ -76,6 +111,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: () => "pull_request",
   },
   file: {
@@ -83,6 +119,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: { openAsTab: false },
     resourceKey: (target) => target.path,
   },
   working_diff: {
@@ -90,6 +127,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: () => "working_diff",
   },
   plugin: {
@@ -98,6 +136,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: (target) =>
       target.context === "agent"
         ? `${target.pluginId}:${target.panelId}:agent:${target.agentId}`
@@ -108,6 +147,7 @@ const manifests = {
     supportedHosts: ["main"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: (target) => target.workspaceId,
   },
   commit_diff: {
@@ -115,6 +155,7 @@ const manifests = {
     supportedHosts: ["main", "explorer"],
     showCloseButton: true,
     singleton: false,
+    compactSheet: null,
     resourceKey: (target) => target.sha,
   },
 } satisfies PanelManifestByKind;
@@ -124,7 +165,17 @@ export function getPanelManifest<K extends WorkspaceTabTarget["kind"]>(kind: K):
 }
 
 export function panelSupportsHost(kind: WorkspaceTabTarget["kind"], host: PaneHost): boolean {
-  return getPanelManifest(kind).supportedHosts.includes(host);
+  const manifest = getPanelManifest(kind);
+  if (host === "sheet") return manifest.compactSheet !== null;
+  return manifest.supportedHosts.includes(host);
+}
+
+export function panelCompactSheetPolicy(
+  target: WorkspaceTabTarget,
+  facts: PanelTargetFacts,
+): CompactSheetPolicy | null {
+  const rule = getPanelManifest(target.kind).compactSheet as CompactSheetRule<typeof target.kind>;
+  return typeof rule === "function" ? rule(target as never, facts) : rule;
 }
 
 export function panelCanLaunchInPane(