Keep long mobile drafts readable with fullscreen editing (#6531)

* feat(app): add fullscreen editing to the compact composer * fix(app): preserve read-only terminal command previews Static command previews must render their published source; the live editor buffer is updated after render and has no mounted input to repaint read-only content. * fix(app): import React for composer editing scope rendering Workspace pane unit tests use the classic JSX transform, so the editing-scope provider needs React in scope when mounted. * fix(app): preserve fullscreen composer controls and editing Keep the fullscreen frame inside the visual viewport, gate hidden autocomplete keys, apply replacement commands to local line measurement, and return to inline before starting voice so its controls stay accessible. * test(app): cover draft replacement through the production composer Replace the measurement-hook fixture with profile switching and typing through the real composer. Keep measurement state inside its production surface; Android manual red/green evidence covers the native replacement flow.
2026-10-14 13:22:37 +00:00 · 2026-10-12 16:26:01 +07:00
parent 9246813fd2
commit 750cb82fbb
40 changed files with 1852 additions and 261 deletions
@@ -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();
+  }
+});
@@ -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();
+  }
+});
@@ -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();
+  }
+});
@@ -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();
+    });
+  });
 });
@@ -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([]);
+}
@@ -1,3 +1,4 @@
+import { ComposerEditingSessionsProvider } from "@/composer/editing-session";
 import "@/styles/unistyles";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import { PortalProvider } from "@gorhom/portal";
@@ -625,7 +626,11 @@ function AppContainer({ children, chromeEnabled: chromeEnabledOverride }: AppCon
    surface
  );

-  return <CommandCenterProvider>{content}</CommandCenterProvider>;
+  return (
+    <ComposerEditingSessionsProvider>
+      <CommandCenterProvider>{content}</CommandCenterProvider>
+    </ComposerEditingSessionsProvider>
+  );
 }

 function SidebarChrome({
@@ -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", () => {
@@ -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) => {
@@ -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
@@ -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;
@@ -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 (
@@ -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>
  );
@@ -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 });
@@ -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;
+}
@@ -115,6 +115,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 +124,7 @@ export function useAgentInputDraft(input: UseAgentInputDraftInput): AgentInputDr
    (nextText: string) => {
      textReplacementRevisionRef.current += 1;
      setTextReplacement({
+        kind: "replace",
        key: `${draftKey}:${textReplacementRevisionRef.current}`,
        text: nextText,
      });
@@ -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();
+    },
+  );
+});
@@ -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);
+}
@@ -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}
@@ -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,
+  },
+}));
@@ -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,
+  };
+}
@@ -7,6 +7,8 @@ interface ComposerHeightArgs {
  textareaRef: RefObject<unknown>;
  minHeight: number;
  maxHeight: number;
+  onRenderedLinesChange?: (lines: number) => void;
+  presentationKey?: boolean;
 }

 export function useComposerHeight({
@@ -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),
@@ -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",
@@ -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" },
+}));
@@ -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",
+    );
+  });
+});
@@ -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;
+}
@@ -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);
@@ -10,6 +10,7 @@ export interface MessagePayload {
 }

 export interface TextReplacement {
+  kind: "initial" | "replace";
  key: string;
  text: string;
 }
@@ -124,6 +124,8 @@ export const ar: TranslationResources = {
    input: {
      accessibilityLabel: "وكيل الرسائل...",
      terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "ملء الشاشة",
+      exitFullscreen: "الخروج من ملء الشاشة",
      focusHint: "{{shortcut}}للتركيز",
      addAttachment: "إضافة مرفق",
      interruptAgent: "عامل المقاطعة",
@@ -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",
@@ -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",
@@ -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",
@@ -125,6 +125,8 @@ export const ja: TranslationResources = {
    input: {
      accessibilityLabel: "エージェントにメッセージ...",
      terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "全画面表示",
+      exitFullscreen: "全画面表示を終了",
      focusHint: "{{shortcut}}でフォーカス",
      addAttachment: "添付ファイルを追加",
      interruptAgent: "エージェントを中断",
@@ -124,6 +124,8 @@ export const ko: TranslationResources = {
    input: {
      accessibilityLabel: "에이전트에게 메시지...",
      terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "전체 화면",
+      exitFullscreen: "전체 화면 종료",
      focusHint: "{{shortcut}}로 포커스",
      addAttachment: "첨부 추가",
      interruptAgent: "에이전트 중단",
@@ -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",
@@ -125,6 +125,8 @@ export const ru: TranslationResources = {
    input: {
      accessibilityLabel: "Написать агенту...",
      terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "Полный экран",
+      exitFullscreen: "Выйти из полноэкранного режима",
      focusHint: "{{shortcut}}, для фокуса",
      addAttachment: "Добавить вложение",
      interruptAgent: "Прервать агента",
@@ -124,6 +124,8 @@ export const zhCN: TranslationResources = {
    input: {
      accessibilityLabel: "给 Agent 发消息...",
      terminalAccessibilityLabel: "Terminal prompt",
+      fullscreen: "全屏",
+      exitFullscreen: "退出全屏",
      focusHint: "{{shortcut}} 聚焦",
      addAttachment: "添加附件",
      interruptAgent: "中断 Agent",
@@ -1723,7 +1723,7 @@ export function NewWorkspaceScreen({
    [terminalComposerValue],
  );
  const terminalTextReplacement = useMemo(
-    () => ({ key: launchFocusKey, text: terminalComposerValue }),
+    () => ({ kind: "replace" as const, key: launchFocusKey, text: terminalComposerValue }),
    [launchFocusKey, terminalComposerValue],
  );

@@ -1,3 +1,4 @@
+import { ComposerEditingScope } from "@/composer/editing-session";
 import React, { useMemo, type ComponentType } from "react";
 import invariant from "tiny-invariant";
 import {
@@ -156,7 +157,12 @@ export function WorkspacePaneContent({
    >
      <PaneProvider value={stablePaneContextValue}>
        <PaneFocusProvider value={paneFocusValue}>
-          <Component key={key} />
+          <ComposerEditingScope
+            tabId={paneContextValue.tabId}
+            targetKey={JSON.stringify(paneContextValue.target)}
+          >
+            <Component key={key} />
+          </ComposerEditingScope>
        </PaneFocusProvider>
      </PaneProvider>
    </RenderProfile>
@@ -1,3 +1,4 @@
+import { WorkspaceComposerEditingSessionsProvider } from "@/composer/editing-session";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import type { JsonValue } from "@getpaseo/protocol/agent-types";
 import { getOpenAgentTabLabel } from "@getpaseo/protocol/agent-labels";
@@ -753,14 +754,20 @@ function WorkspaceContentProviders({
 function WorkspacePanelContent({
  launcher,
  content,
+  tabIds,
+  workspaceKey,
 }: {
+  workspaceKey: string;
  launcher: NewTabLauncher;
  content: ReactNode;
+  tabIds: readonly string[];
 }) {
  return (
-    <NewTabLauncherProvider value={launcher}>
-      <View style={styles.content}>{content}</View>
-    </NewTabLauncherProvider>
+    <WorkspaceComposerEditingSessionsProvider workspaceKey={workspaceKey} tabIds={tabIds}>
+      <NewTabLauncherProvider value={launcher}>
+        <View style={styles.content}>{content}</View>
+      </NewTabLauncherProvider>
+    </WorkspaceComposerEditingSessionsProvider>
  );
 }

@@ -3491,6 +3498,8 @@ function WorkspaceScreenContent({
  const workspacePanelContent = (
    <WorkspacePanelContent
      launcher={newTabLauncher}
+      workspaceKey={`${normalizedServerId}:${normalizedWorkspaceId}`}
+      tabIds={uiTabs.map((tab) => tab.tabId)}
      content={isMobile ? content : desktopContent}
    />
  );