diff --git a/apps/app/bundle-budget.json b/apps/app/bundle-budget.json
index 7032e9dcae..187f98be08 100644
--- a/apps/app/bundle-budget.json
+++ b/apps/app/bundle-budget.json
@@ -39,10 +39,11 @@
     "painted' and 'route content painted'. SplitWorkspaceRoute is every thread,",
     "compose and plugin-panel page, so its closure is the second number that",
     "decides how slow bb feels on a phone. Same 10% ratchet; its forbiddenPackages",
-    "are the diff engine, math, file tree and terminal code that only a user",
-    "action needs.",
-    "The composer (tiptap/prosemirror) is visible on every thread page and is",
-    "allowed until it moves behind a first-focus handoff. Run",
+    "are the diff engine, math, file tree, terminal and editor code that only a",
+    "user action needs.",
+    "The composer (tiptap/prosemirror) loads behind PromptBox's first-focus",
+    "handoff: the shell chrome is eager, the editor graph is gated on",
+    "PromptBoxInternal (see onDemandPackages). Run",
     "`node scripts/why-eager.mjs --from=views/SplitWorkspaceRoute.tsx <package>`",
     "to print the static chain that pulled a package into the closure."
   ],
@@ -72,13 +73,45 @@
   ],
   "onDemandPackages": {
     "@pierre/trees": "src/components/secondary-panel/ThreadStorageFileTree.tsx",
+    "@tiptap/core": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-blockquote": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-bold": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-code": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-code-block": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-document": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-hard-break": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-heading": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-horizontal-rule": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-italic": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-link": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-list": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-mention": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-paragraph": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-placeholder": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-strike": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-text": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extension-underline": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/extensions": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/react": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/starter-kit": "src/components/promptbox/PromptBoxInternal.tsx",
+    "@tiptap/suggestion": "src/components/promptbox/PromptBoxInternal.tsx",
     "katex": "src/components/ui/markdown-katex.ts",
+    "prosemirror-commands": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-dropcursor": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-gapcursor": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-history": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-keymap": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-model": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-schema-list": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-state": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-transform": "src/components/promptbox/PromptBoxInternal.tsx",
+    "prosemirror-view": "src/components/promptbox/PromptBoxInternal.tsx",
     "rehype-katex": "src/components/ui/markdown-katex.ts"
   },
   "routeClosures": {
     "SplitWorkspaceRoute": {
-      "maxBytes": 2268430,
-      "maxBrotliBytes": 605332,
+      "maxBytes": 1765479,
+      "maxBrotliBytes": 489779,
       "forbiddenPackages": [
         "@pierre/diffs",
         "@pierre/theming",
@@ -88,10 +121,17 @@
         "@shikijs/engine-oniguruma",
         "@shikijs/langs",
         "@shikijs/vscode-textmate",
+        "@tiptap/core",
+        "@tiptap/pm",
+        "@tiptap/react",
+        "@tiptap/starter-kit",
         "@xterm/xterm",
         "katex",
         "mermaid",
         "oniguruma-to-es",
+        "prosemirror-model",
+        "prosemirror-state",
+        "prosemirror-view",
         "rehype-katex",
         "shiki"
       ]
diff --git a/apps/app/src/components/promptbox/FollowUpPromptBox.test.tsx b/apps/app/src/components/promptbox/FollowUpPromptBox.test.tsx
index b2ec85bebe..10ff42a2db 100644
--- a/apps/app/src/components/promptbox/FollowUpPromptBox.test.tsx
+++ b/apps/app/src/components/promptbox/FollowUpPromptBox.test.tsx
@@ -51,8 +51,8 @@ vi.mock("@bb/shared-ui/hooks/use-pointer-coarse", () => ({
   usePointerCoarse: () => mocks.isPointerCoarse,
 }));
 
-vi.mock("@/components/promptbox/PromptBoxInternal", () => ({
-  PromptBoxInternal: ({
+vi.mock("@/components/promptbox/PromptBox", () => ({
+  PromptBox: ({
     footerStart,
     compact,
     onSubmit,
diff --git a/apps/app/src/components/promptbox/FollowUpPromptBox.tsx b/apps/app/src/components/promptbox/FollowUpPromptBox.tsx
index 7bd8871707..246db1f6c5 100644
--- a/apps/app/src/components/promptbox/FollowUpPromptBox.tsx
+++ b/apps/app/src/components/promptbox/FollowUpPromptBox.tsx
@@ -33,13 +33,13 @@ import {
   useComposerExtensionController,
 } from "@/components/plugin/ComposerExtensionHost";
 import {
-  PromptBoxInternal,
+  PromptBox,
   type AttachmentsConfig,
   type HistoryConfig,
   type PromptBoxAction,
   type PromptBoxHandle,
   type TypeaheadConfig,
-} from "@/components/promptbox/PromptBoxInternal";
+} from "@/components/promptbox/PromptBox";
 import { usePromptVoice } from "@/components/promptbox/usePromptVoice";
 import { PermissionModePicker } from "@/components/pickers/PermissionModePicker";
 import {
@@ -61,9 +61,7 @@ import {
   shouldDisablePermissionPickerForActivePromptMode,
 } from "@bb/client-core";
 
-type PromptBoxWithScrollAnchorProps = ComponentProps<
-  typeof PromptBoxInternal
-> & {
+type PromptBoxWithScrollAnchorProps = ComponentProps<typeof PromptBox> & {
   scrollToBottomOnModifierSubmit?: boolean;
   scrollToBottomOnSubmit?: boolean;
 };
@@ -101,7 +99,7 @@ function PromptBoxWithScrollAnchor({
             : {}),
         };
   return (
-    <PromptBoxInternal
+    <PromptBox
       {...promptBoxProps}
       onSubmit={handleSubmit}
       submission={anchoredSubmission}
diff --git a/apps/app/src/components/promptbox/NewThreadPromptBox.tsx b/apps/app/src/components/promptbox/NewThreadPromptBox.tsx
index b8ece5a4c4..b3360d969b 100644
--- a/apps/app/src/components/promptbox/NewThreadPromptBox.tsx
+++ b/apps/app/src/components/promptbox/NewThreadPromptBox.tsx
@@ -27,13 +27,13 @@ import {
   type ExecutionPermissionConfig,
 } from "@/components/promptbox/ExecutionControls";
 import {
-  PromptBoxInternal,
+  PromptBox,
   type AttachmentsConfig,
   type HistoryConfig,
   type PromptBoxAction,
   type PromptBoxHandle,
   type TypeaheadConfig,
-} from "@/components/promptbox/PromptBoxInternal";
+} from "@/components/promptbox/PromptBox";
 import { usePromptVoice } from "@/components/promptbox/usePromptVoice";
 import { useOptionalPaneContext } from "@/views/thread-detail/PaneContext";
 import {
@@ -164,7 +164,7 @@ export interface NewThreadModeConfig {
 }
 
 interface NewThreadPromptBoxUIProps {
-  /** id forwarded to the underlying PromptBoxInternal (used for autofocus targeting). */
+  /** id forwarded to the underlying PromptBox (used for autofocus targeting). */
   id?: string;
 
   // PromptBox passthrough
@@ -390,7 +390,7 @@ const DefaultNewThreadComposer = memo(function DefaultNewThreadComposer({
           {modeConfig.banner}
         </ComposerBannersSlot>
       </div>
-      <PromptBoxInternal
+      <PromptBox
         id={id}
         promptBoxRef={promptBoxRef}
         value={value}
diff --git a/apps/app/src/components/promptbox/PromptBox.test.tsx b/apps/app/src/components/promptbox/PromptBox.test.tsx
new file mode 100644
index 0000000000..a8ac5604f1
--- /dev/null
+++ b/apps/app/src/components/promptbox/PromptBox.test.tsx
@@ -0,0 +1,223 @@
+// @vitest-environment jsdom
+
+import type { PromptTextMention } from "@bb/domain";
+import { createRef, useState, type RefObject } from "react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PromptBox } from "./PromptBox";
+import {
+  INERT_TYPEAHEAD_COMMAND_CONFIG,
+  type PromptBoxHandle,
+  type TypeaheadConfig,
+} from "./PromptBoxInternal";
+
+/**
+ * First-focus handoff coverage (plan 008): the shell renders without the
+ * tiptap editor; the first tap/paste/focus request realizes the editor and
+ * every byte of input captured before the mount survives into it.
+ */
+
+function makeTypeahead(): TypeaheadConfig {
+  return {
+    mention: {
+      suggestions: [],
+      isLoading: false,
+      isError: false,
+      onQueryChange: vi.fn(),
+    },
+    command: INERT_TYPEAHEAD_COMMAND_CONFIG,
+  };
+}
+
+interface HarnessProps {
+  initialValue?: string;
+  autoFocus?: boolean;
+  focusEndKey?: string | number;
+  onSubmit?: () => void;
+  onChangeSpy?: (value: string, mentions: PromptTextMention[]) => void;
+  onAttachFiles?: (files: File[]) => void;
+  promptBoxRef?: RefObject<PromptBoxHandle | null>;
+}
+
+function ControlledPromptBox({
+  initialValue = "",
+  autoFocus = false,
+  focusEndKey,
+  onSubmit = () => {},
+  onChangeSpy,
+  onAttachFiles,
+  promptBoxRef,
+}: HarnessProps) {
+  const [draft, setDraft] = useState<{
+    value: string;
+    mentions: PromptTextMention[];
+  }>({ value: initialValue, mentions: [] });
+  return (
+    <PromptBox
+      value={draft.value}
+      mentionRanges={draft.mentions}
+      onChange={(value, mentions) => {
+        onChangeSpy?.(value, mentions);
+        setDraft({ value, mentions });
+      }}
+      onSubmit={onSubmit}
+      autoFocus={autoFocus}
+      mentionMenuPlacement="bottom"
+      typeahead={makeTypeahead()}
+      {...(onAttachFiles ? { attachments: { items: [], onAttachFiles } } : {})}
+      {...(promptBoxRef ? { promptBoxRef } : {})}
+      {...(focusEndKey !== undefined ? { focusEndKey } : {})}
+    />
+  );
+}
+
+function queryMountedEditor(): HTMLElement | null {
+  // The shell's preview is a contenteditable="false" .ProseMirror stand-in;
+  // only the real tiptap editor is contenteditable="true".
+  return document.querySelector<HTMLElement>(
+    '.ProseMirror[contenteditable="true"]',
+  );
+}
+
+function getInterimInput(): HTMLTextAreaElement {
+  const interim = document.querySelector<HTMLTextAreaElement>(
+    "[data-promptbox-interim-input]",
+  );
+  if (!interim) throw new Error("interim input not rendered");
+  return interim;
+}
+
+async function waitForMountedEditor(): Promise<HTMLElement> {
+  await waitFor(() => {
+    expect(queryMountedEditor()).not.toBeNull();
+  });
+  const editor = queryMountedEditor();
+  if (!editor) throw new Error("editor did not mount");
+  return editor;
+}
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("PromptBox first-focus handoff", () => {
+  it("parks the composer as a shell and mounts the editor on first tap with the draft intact", async () => {
+    render(<ControlledPromptBox initialValue="Saved draft" />);
+
+    // Shell state: the saved draft is visible immediately, no editor mounted.
+    const preview = document.querySelector("[data-promptbox-shell-preview]");
+    expect(preview).not.toBeNull();
+    expect(preview?.textContent).toContain("Saved draft");
+    expect(queryMountedEditor()).toBeNull();
+
+    fireEvent.focus(getInterimInput());
+
+    const editor = await waitForMountedEditor();
+    expect(editor.textContent).toContain("Saved draft");
+    expect(
+      document.querySelector("[data-promptbox-shell-preview]"),
+    ).toBeNull();
+  });
+
+  it("streams keystrokes typed before the mount into the draft and the editor", async () => {
+    const onChangeSpy = vi.fn();
+    render(<ControlledPromptBox onChangeSpy={onChangeSpy} />);
+
+    const interim = getInterimInput();
+    fireEvent.focus(interim);
+    fireEvent.input(interim, { target: { value: "hi there" } });
+
+    // The buffer flushes into the controlled draft on every input event.
+    expect(onChangeSpy).toHaveBeenLastCalledWith("hi there", []);
+
+    const editor = await waitForMountedEditor();
+    expect(editor.textContent).toContain("hi there");
+  });
+
+  it("lands a text paste made before the mount in the editor after the mount", async () => {
+    const onChangeSpy = vi.fn();
+    render(<ControlledPromptBox onChangeSpy={onChangeSpy} />);
+
+    const interim = getInterimInput();
+    fireEvent.focus(interim);
+    fireEvent.paste(interim, {
+      clipboardData: {
+        items: [],
+        getData: (type: string) =>
+          type === "text/plain" ? "pasted\r\nbefore mount" : "",
+      },
+    });
+
+    expect(onChangeSpy).toHaveBeenLastCalledWith("pasted\nbefore mount", []);
+
+    const editor = await waitForMountedEditor();
+    expect(editor.textContent).toContain("pasted");
+    expect(editor.textContent).toContain("before mount");
+  });
+
+  it("routes a file paste made before the mount to the attachments handler", () => {
+    const onAttachFiles = vi.fn();
+    render(<ControlledPromptBox onAttachFiles={onAttachFiles} />);
+
+    const file = new File(["png-bytes"], "shot.png", { type: "image/png" });
+    const interim = getInterimInput();
+    fireEvent.focus(interim);
+    fireEvent.paste(interim, {
+      clipboardData: {
+        items: [{ kind: "file", getAsFile: () => file }],
+        getData: () => "",
+      },
+    });
+
+    expect(onAttachFiles).toHaveBeenCalledWith([file]);
+  });
+
+  it("realizes the editor and moves focus into it for a programmatic focus request", async () => {
+    const promptBoxRef = createRef<PromptBoxHandle | null>();
+    render(<ControlledPromptBox promptBoxRef={promptBoxRef} />);
+    expect(queryMountedEditor()).toBeNull();
+
+    act(() => {
+      promptBoxRef.current?.focusEnd();
+    });
+
+    const editor = await waitForMountedEditor();
+    await waitFor(() => {
+      expect(document.activeElement).toBe(editor);
+    });
+  });
+
+  it("realizes the editor when focusEndKey changes (the thread view's focus bus)", async () => {
+    const { rerender } = render(<ControlledPromptBox focusEndKey={0} />);
+    expect(queryMountedEditor()).toBeNull();
+
+    rerender(<ControlledPromptBox focusEndKey={1} />);
+
+    await waitForMountedEditor();
+  });
+
+  it("realizes the editor on mount when autoFocus applies (fine pointer)", async () => {
+    render(<ControlledPromptBox autoFocus />);
+
+    await waitForMountedEditor();
+  });
+
+  it("submits on Enter from the interim surface before the editor exists", () => {
+    const onSubmit = vi.fn();
+    render(<ControlledPromptBox onSubmit={onSubmit} />);
+
+    const interim = getInterimInput();
+    fireEvent.focus(interim);
+    fireEvent.input(interim, { target: { value: "ship it" } });
+    fireEvent.keyDown(interim, { key: "Enter" });
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/apps/app/src/components/promptbox/PromptBox.tsx b/apps/app/src/components/promptbox/PromptBox.tsx
new file mode 100644
index 0000000000..c514f41ba9
--- /dev/null
+++ b/apps/app/src/components/promptbox/PromptBox.tsx
@@ -0,0 +1,566 @@
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ClipboardEvent as ReactClipboardEvent,
+  type FocusEvent as ReactFocusEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
+import { COARSE_POINTER_TEXT_BASE_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
+import { usePointerCoarse } from "@bb/shared-ui/hooks/use-pointer-coarse";
+import { cn } from "@bb/shared-ui/lib/utils";
+import { usePluginComposerHost } from "@/components/plugin/plugin-composer-host";
+import { useComposerInputLock } from "@/lib/plugin-sdk-hooks";
+import type {
+  PromptBoxHandle,
+  PromptBoxInternalProps,
+} from "./PromptBoxInternal";
+import {
+  DEFAULT_PROMPTBOX_PLACEHOLDER,
+  isPromptBoxChromeTarget,
+  PromptBoxShell,
+} from "./PromptBoxShell";
+import { appendPromptActionToDraft } from "./prompt-action-draft";
+import type { PromptBoxAction } from "./PromptBoxActionsMenu";
+
+// Callers import the composer contract from this module so the tiptap editor
+// stays out of their static closure. The type re-exports are erased at build
+// time; the only runtime edge to PromptBoxInternal is the dynamic import gate
+// below (named in bundle-budget.json's onDemandPackages).
+export type {
+  AttachmentsConfig,
+  HistoryConfig,
+  PromptBoxHandle,
+  PromptBoxSubmissionConfig,
+  PromptVoiceConfig,
+  TypeaheadCommandConfig,
+  TypeaheadConfig,
+  TypeaheadMentionConfig,
+} from "./PromptBoxInternal";
+export type { PromptBoxAction } from "./PromptBoxActionsMenu";
+
+/** Public composer props: the internal editor's, minus the handoff-only prop. */
+export type PromptBoxProps = Omit<PromptBoxInternalProps, "takeFocusOnCreate">;
+
+type PromptBoxInternalModule = typeof import("./PromptBoxInternal");
+
+let loadedInternalModule: PromptBoxInternalModule | null = null;
+let internalModulePromise: Promise<PromptBoxInternalModule> | null = null;
+
+function loadPromptBoxInternalModule(): Promise<PromptBoxInternalModule> {
+  internalModulePromise ??= import("./PromptBoxInternal").then((module) => {
+    loadedInternalModule = module;
+    return module;
+  });
+  return internalModulePromise;
+}
+
+const INTERNAL_PREFETCH_IDLE_TIMEOUT_MS = 2_500;
+
+/**
+ * Warms the editor chunk off the route's critical path so the first tap's
+ * handoff is usually a mount, not a fetch. Prefers an idle callback (the
+ * route chunk has been fetched and evaluated by then); browsers without
+ * `requestIdleCallback` get a plain timeout. Returns a cancel function.
+ */
+function schedulePromptBoxInternalPrefetch(): () => void {
+  if (loadedInternalModule !== null || typeof window === "undefined") {
+    return () => {};
+  }
+  let idleHandle: number | null = null;
+  let timeoutHandle: number | null = null;
+  const run = () => {
+    idleHandle = null;
+    timeoutHandle = null;
+    void loadPromptBoxInternalModule();
+  };
+  if (typeof window.requestIdleCallback === "function") {
+    idleHandle = window.requestIdleCallback(run, {
+      timeout: INTERNAL_PREFETCH_IDLE_TIMEOUT_MS,
+    });
+  } else {
+    timeoutHandle = window.setTimeout(run, INTERNAL_PREFETCH_IDLE_TIMEOUT_MS);
+  }
+  return () => {
+    if (idleHandle !== null) window.cancelIdleCallback(idleHandle);
+    if (timeoutHandle !== null) window.clearTimeout(timeoutHandle);
+  };
+}
+
+/**
+ * The composer behind a first-focus handoff.
+ *
+ * Renders the dumb PromptBoxShell (closed-state chrome, draft preview, action
+ * row — zero tiptap) until the first compose intent: a tap/focus on the text
+ * region, a paste or drop, a prompt action, or a programmatic focus request
+ * (`promptBoxRef.focusEnd()` / a `focusEndKey` change / desktop `autoFocus`).
+ * Intent starts the dynamic import of PromptBoxInternal and mounts it when it
+ * resolves; once realized it stays mounted for the life of this component.
+ *
+ * While the chunk loads, an invisible interim `<textarea>` overlaid on the
+ * text region owns the focus. It is what the tap natively focuses — so the
+ * soft keyboard opens inside the user's gesture — and every keystroke or
+ * paste it receives is flushed straight into the controlled draft, which the
+ * shell preview echoes. The swap is deferred while an IME composition is in
+ * progress so no composition is cut mid-way; at swap time the editor mounts
+ * with the full draft and, when the interim surface held focus, takes it over
+ * (`takeFocusOnCreate`) with the caret at the end.
+ */
+export function PromptBox(props: PromptBoxProps) {
+  const {
+    autoFocus = true,
+    focusEndKey,
+    history,
+    onChange,
+    onEscape,
+    onSubmit,
+    placeholder = DEFAULT_PROMPTBOX_PLACEHOLDER,
+    promptBoxRef,
+    submission = {},
+    value,
+    mentionRanges,
+    attachments: attachmentConfig = {},
+    voice,
+    blurOnPointerSubmit = false,
+    compact,
+  } = props;
+  const {
+    isSubmitting = false,
+    disabled: submitDisabled = false,
+    onModifierSubmit,
+  } = submission;
+  const isPointerCoarse = usePointerCoarse();
+  const pluginComposerHost = usePluginComposerHost();
+  const composerInputLocked = useComposerInputLock(
+    pluginComposerHost?.textEffectKey ?? null,
+  );
+
+  const [internalModule, setInternalModule] = useState(loadedInternalModule);
+  const [isRealized, setIsRealized] = useState(false);
+  const [isInterimFocused, setIsInterimFocused] = useState(false);
+  const [interimStartedEmpty, setInterimStartedEmpty] = useState(false);
+
+  const isMountedRef = useRef(true);
+  const realizeRequestedRef = useRef(false);
+  const pendingSwapForCompositionRef = useRef(false);
+  const handoffFocusRef = useRef(false);
+  const composingRef = useRef(false);
+  const interimRef = useRef<HTMLTextAreaElement>(null);
+  const internalHandleRef = useRef<PromptBoxHandle | null>(null);
+  const flushedBufferRef = useRef("");
+  const valueRef = useRef(value);
+  const mentionRangesRef = useRef(mentionRanges);
+  const onChangeRef = useRef(onChange);
+  valueRef.current = value;
+  mentionRangesRef.current = mentionRanges;
+  onChangeRef.current = onChange;
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const isVoiceBusy =
+    voice?.state === "recording" || voice?.state === "transcribing";
+  const interimReadOnly = composerInputLocked || isVoiceBusy;
+
+  /**
+   * Streams the interim textarea's buffer into the controlled draft. The
+   * draft's tail is replaced with the current buffer, so backspacing and
+   * caret moves inside the buffered region survive, while text and mention
+   * ranges that existed before the interim session stay untouched.
+   */
+  const flushInterimBuffer = useCallback(() => {
+    const interim = interimRef.current;
+    if (!interim) return;
+    const buffer = interim.value;
+    const previous = flushedBufferRef.current;
+    if (buffer === previous) return;
+    flushedBufferRef.current = buffer;
+    const currentText = valueRef.current;
+    const base =
+      previous.length > 0 && currentText.endsWith(previous)
+        ? currentText.slice(0, currentText.length - previous.length)
+        : currentText;
+    const nextText = base + buffer;
+    valueRef.current = nextText;
+    onChangeRef.current(nextText, [...mentionRangesRef.current]);
+  }, []);
+
+  const resetInterimBuffer = useCallback(() => {
+    const interim = interimRef.current;
+    if (interim) interim.value = "";
+    flushedBufferRef.current = "";
+    setInterimStartedEmpty(false);
+  }, []);
+
+  const attemptSwap = useCallback(() => {
+    if (!isMountedRef.current) return;
+    if (composingRef.current) {
+      // Never cut an IME composition: the swap waits for compositionend so
+      // the composed text commits into the interim buffer and flushes first.
+      pendingSwapForCompositionRef.current = true;
+      return;
+    }
+    flushInterimBuffer();
+    const interim = interimRef.current;
+    handoffFocusRef.current =
+      interim !== null && interim.ownerDocument.activeElement === interim;
+    setIsRealized(true);
+  }, [flushInterimBuffer]);
+
+  const requestRealize = useCallback(() => {
+    if (realizeRequestedRef.current) return;
+    realizeRequestedRef.current = true;
+    void loadPromptBoxInternalModule().then((module) => {
+      if (!isMountedRef.current) return;
+      setInternalModule(module);
+      attemptSwap();
+    });
+  }, [attemptSwap]);
+
+  const preloadInternal = useCallback(() => {
+    void loadPromptBoxInternalModule();
+  }, []);
+
+  // Warm the chunk once the shell has painted so the first tap's handoff is
+  // CPU-bound, not network-bound. Realization still waits for intent.
+  useEffect(() => {
+    if (isRealized) return;
+    return schedulePromptBoxInternalPrefetch();
+  }, [isRealized]);
+
+  // Desktop parity with the editor's passive autofocus: the mounted composer
+  // takes focus on mount / history-scope change on fine pointers, so realize
+  // immediately and park the focus (and any early keystrokes) in the interim
+  // surface until the editor exists. Coarse pointers never autofocus.
+  const focusScopeKey = history?.resetKey;
+  useEffect(() => {
+    if (!autoFocus || isPointerCoarse || isRealized) return;
+    requestRealize();
+    interimRef.current?.focus();
+  }, [autoFocus, focusScopeKey, isPointerCoarse, isRealized, requestRealize]);
+
+  // A focusEndKey change before the editor exists is a programmatic focus
+  // request (e.g. editing a queued message): realize, and mirror the editor's
+  // behavior of taking focus only on fine pointers.
+  const lastFocusEndKeyRef = useRef(focusEndKey);
+  useEffect(() => {
+    if (focusEndKey === undefined) return;
+    if (focusEndKey === lastFocusEndKeyRef.current) return;
+    lastFocusEndKeyRef.current = focusEndKey;
+    if (isRealized) return;
+    requestRealize();
+    if (!isPointerCoarse) {
+      const interim = interimRef.current;
+      interim?.focus();
+      interim?.setSelectionRange(interim.value.length, interim.value.length);
+    }
+  }, [focusEndKey, isPointerCoarse, isRealized, requestRealize]);
+
+  useImperativeHandle(
+    promptBoxRef,
+    () => ({
+      focusEnd: () => {
+        const handle = internalHandleRef.current;
+        if (handle) {
+          handle.focusEnd();
+          return;
+        }
+        requestRealize();
+        if (isPointerCoarse) return;
+        const interim = interimRef.current;
+        interim?.focus();
+        interim?.setSelectionRange(interim.value.length, interim.value.length);
+      },
+      captureHeightForLayoutChange: () => {
+        // Pre-handoff there is no editor-owned height animation to seed; the
+        // first post-handoff layout change simply skips the tween.
+        internalHandleRef.current?.captureHeightForLayoutChange();
+      },
+      insertTextAtCursor: (text: string) => {
+        const handle = internalHandleRef.current;
+        if (handle) {
+          handle.insertTextAtCursor(text);
+          return;
+        }
+        // Editorless fallback, mirroring PromptBoxInternal's: normalize and
+        // append with smart spacing, then realize so follow-up typing is live.
+        flushInterimBuffer();
+        const normalizedText = text.replace(/\s+/g, " ").trim();
+        if (normalizedText.length === 0) return;
+        const currentValue = valueRef.current;
+        const nextValue =
+          currentValue.length === 0 || /\s$/.test(currentValue)
+            ? `${currentValue}${normalizedText}`
+            : `${currentValue} ${normalizedText}`;
+        valueRef.current = nextValue;
+        onChangeRef.current(nextValue, [...mentionRangesRef.current]);
+        requestRealize();
+      },
+      getTextBeforeCursor: () => {
+        const handle = internalHandleRef.current;
+        if (handle) return handle.getTextBeforeCursor();
+        flushInterimBuffer();
+        const trimmed = valueRef.current.trim();
+        return trimmed.length > 0 ? trimmed : undefined;
+      },
+      playVoiceCompletionTransition: () =>
+        internalHandleRef.current?.playVoiceCompletionTransition() ??
+        Promise.resolve(),
+    }),
+    [flushInterimBuffer, isPointerCoarse, requestRealize],
+  );
+
+  const attachments = attachmentConfig.items ?? [];
+  const canSubmitFromInterim = useCallback(() => {
+    const hasSubmittableInput =
+      valueRef.current.trim().length > 0 || attachments.length > 0;
+    return (
+      hasSubmittableInput && !isSubmitting && !submitDisabled && !isVoiceBusy
+    );
+  }, [attachments.length, isSubmitting, isVoiceBusy, submitDisabled]);
+
+  const submitFromShell = useCallback(() => {
+    flushInterimBuffer();
+    if (!canSubmitFromInterim()) return;
+    onSubmit();
+    resetInterimBuffer();
+    if (blurOnPointerSubmit) interimRef.current?.blur();
+  }, [
+    blurOnPointerSubmit,
+    canSubmitFromInterim,
+    flushInterimBuffer,
+    onSubmit,
+    resetInterimBuffer,
+  ]);
+
+  const handleInterimFocus = useCallback(
+    (event: ReactFocusEvent<HTMLTextAreaElement>) => {
+      setIsInterimFocused(true);
+      if (event.currentTarget.value.length === 0) {
+        setInterimStartedEmpty(valueRef.current.length === 0);
+      }
+      requestRealize();
+    },
+    [requestRealize],
+  );
+
+  const handleInterimBlur = useCallback(() => {
+    setIsInterimFocused(false);
+    flushInterimBuffer();
+    // The flushed text lives in the draft now; drop the buffer so a later
+    // interim session (or an external draft write) starts from a clean tail.
+    resetInterimBuffer();
+  }, [flushInterimBuffer, resetInterimBuffer]);
+
+  const handleInterimKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.nativeEvent.isComposing) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        if (onEscape) {
+          onEscape();
+        } else {
+          event.currentTarget.blur();
+        }
+        return;
+      }
+      if (event.key !== "Enter") return;
+      const isModifierSubmitKey =
+        event.metaKey && !event.shiftKey && !event.altKey && !event.ctrlKey;
+      if (isModifierSubmitKey && onModifierSubmit) {
+        event.preventDefault();
+        flushInterimBuffer();
+        if (!isSubmitting && !submitDisabled && !isVoiceBusy) {
+          onModifierSubmit();
+          resetInterimBuffer();
+        }
+        return;
+      }
+      // Coarse pointers keep Enter as a newline, like the mounted editor.
+      if (isPointerCoarse) return;
+      if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+        return;
+      }
+      event.preventDefault();
+      submitFromShell();
+    },
+    [
+      flushInterimBuffer,
+      isPointerCoarse,
+      isSubmitting,
+      isVoiceBusy,
+      onEscape,
+      onModifierSubmit,
+      resetInterimBuffer,
+      submitDisabled,
+      submitFromShell,
+    ],
+  );
+
+  const handleInterimPaste = useCallback(
+    (event: ReactClipboardEvent<HTMLTextAreaElement>) => {
+      const clipboardData = event.clipboardData;
+      const onAttachFiles = attachmentConfig.onAttachFiles;
+      const pastedFiles = Array.from(clipboardData?.items ?? [])
+        .filter((item) => item.kind === "file")
+        .map((item) => item.getAsFile())
+        .filter((file): file is File => file !== null);
+      if (onAttachFiles && pastedFiles.length > 0) {
+        event.preventDefault();
+        void onAttachFiles(pastedFiles);
+        return;
+      }
+      const text = clipboardData?.getData("text/plain") ?? "";
+      if (text.length === 0) return;
+      // Insert explicitly instead of relying on the browser default so the
+      // newline normalization matches the editor's paste path and the flush
+      // happens in the same task as the paste.
+      event.preventDefault();
+      const normalized = text.replace(/\r\n?/gu, "\n");
+      const interim = event.currentTarget;
+      interim.setRangeText(
+        normalized,
+        interim.selectionStart ?? interim.value.length,
+        interim.selectionEnd ?? interim.value.length,
+        "end",
+      );
+      flushInterimBuffer();
+    },
+    [attachmentConfig.onAttachFiles, flushInterimBuffer],
+  );
+
+  const handleInterimCompositionStart = useCallback(() => {
+    composingRef.current = true;
+  }, []);
+
+  const handleInterimCompositionEnd = useCallback(() => {
+    composingRef.current = false;
+    flushInterimBuffer();
+    if (pendingSwapForCompositionRef.current) {
+      pendingSwapForCompositionRef.current = false;
+      attemptSwap();
+    }
+  }, [attemptSwap, flushInterimBuffer]);
+
+  const handleChromeMouseDown = useCallback(
+    (event: ReactMouseEvent<HTMLFormElement>) => {
+      if (!isPromptBoxChromeTarget(event.target)) return;
+      const interim = interimRef.current;
+      if (!interim || interimReadOnly) return;
+      event.preventDefault();
+      interim.focus();
+      interim.setSelectionRange(interim.value.length, interim.value.length);
+      requestRealize();
+    },
+    [interimReadOnly, requestRealize],
+  );
+
+  const handlePromptAction = useCallback(
+    (action: PromptBoxAction) => {
+      flushInterimBuffer();
+      const appended = appendPromptActionToDraft({
+        action,
+        text: valueRef.current,
+        mentions: mentionRangesRef.current,
+      });
+      if (appended !== null) {
+        valueRef.current = appended.text;
+        onChangeRef.current(appended.text, appended.mentions);
+      }
+      requestRealize();
+    },
+    [flushInterimBuffer, requestRealize],
+  );
+
+  const handleComposeIntent = useCallback(() => {
+    requestRealize();
+  }, [requestRealize]);
+
+  if (isRealized && internalModule) {
+    return (
+      <internalModule.PromptBoxInternal
+        {...props}
+        promptBoxRef={internalHandleRef}
+        takeFocusOnCreate={handoffFocusRef.current}
+      />
+    );
+  }
+
+  const showCompactLayout = compact?.isCompact === true && !isVoiceBusy;
+  const effectivePlaceholder = showCompactLayout
+    ? (compact.placeholder ?? placeholder)
+    : placeholder;
+
+  const interimSurface = (
+    <textarea
+      ref={interimRef}
+      data-promptbox-interim-input=""
+      {...(props.id ? { id: props.id } : {})}
+      aria-label={effectivePlaceholder}
+      autoComplete="off"
+      enterKeyHint={isPointerCoarse ? "enter" : "send"}
+      readOnly={interimReadOnly}
+      aria-readonly={interimReadOnly || undefined}
+      tabIndex={interimReadOnly ? -1 : 0}
+      onFocus={handleInterimFocus}
+      onBlur={handleInterimBlur}
+      onInput={flushInterimBuffer}
+      onKeyDown={handleInterimKeyDown}
+      onPaste={handleInterimPaste}
+      onCompositionStart={handleInterimCompositionStart}
+      onCompositionEnd={handleInterimCompositionEnd}
+      className={cn(
+        "absolute inset-0 z-10 h-full w-full resize-none overflow-hidden bg-transparent px-4 pb-1 pr-14 pt-3 outline-none",
+        COARSE_POINTER_TEXT_BASE_CLASS,
+        "leading-relaxed",
+        showCompactLayout && "pb-0 pt-3",
+        // Empty-draft sessions render their own text natively (with the native
+        // caret and IME preview); sessions continuing an existing draft stay
+        // invisible and let the preview echo the flushed keystrokes instead.
+        interimStartedEmpty
+          ? "text-foreground caret-foreground"
+          : "text-transparent caret-transparent",
+      )}
+    />
+  );
+
+  return (
+    <PromptBoxShell
+      id={props.id}
+      value={value}
+      mentionRanges={mentionRanges}
+      placeholder={placeholder}
+      className={props.className}
+      header={props.header}
+      footerStart={props.footerStart}
+      submission={props.submission}
+      minHeight={props.minHeight}
+      attachments={props.attachments}
+      promptActions={props.promptActions}
+      suppressPluginComposerCustomizations={
+        props.suppressPluginComposerCustomizations
+      }
+      editorLayout={props.editorLayout}
+      onCollapse={props.onCollapse}
+      compact={compact}
+      containerCompactPlaceholder={props.containerCompactPlaceholder}
+      voice={voice}
+      onComposerLayoutChange={props.onComposerLayoutChange}
+      interimSurface={interimSurface}
+      showInterimCaret={isInterimFocused && !interimStartedEmpty}
+      suppressPreviewText={interimStartedEmpty && value.length > 0}
+      onChromeMouseDown={handleChromeMouseDown}
+      onSubmitIntent={submitFromShell}
+      onPromptAction={handlePromptAction}
+      onPreload={preloadInternal}
+      onComposeIntent={handleComposeIntent}
+    />
+  );
+}
diff --git a/apps/app/src/components/promptbox/PromptBoxInternal.tsx b/apps/app/src/components/promptbox/PromptBoxInternal.tsx
index 6f05f7de03..235de16515 100644
--- a/apps/app/src/components/promptbox/PromptBoxInternal.tsx
+++ b/apps/app/src/components/promptbox/PromptBoxInternal.tsx
@@ -43,12 +43,6 @@ import {
 import { canLoadMoreCommandResults } from "@/components/promptbox/mentions/mention-menu-scroll";
 import { Button } from "@bb/shared-ui/button";
 import { Icon } from "@bb/shared-ui/icon";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@bb/shared-ui/tooltip";
 import { ComposerActionsSlot } from "@/components/plugin/PluginComposerActions";
 import { useResolvedComposerEditor } from "@/components/plugin/composer-slot-hooks";
 import {
@@ -118,11 +112,24 @@ import { MentionMenu, type TypeaheadSuggestion } from "./mentions/MentionMenu";
 import { parsePromptMentionClipboardElement } from "./mentions/prompt-mention-clipboard";
 import { ComposerEditorSlot } from "./ComposerEditorSlot";
 import { QueuedEditorTypeaheadLayoutContext } from "./queued-editor-typeahead-layout";
+import {
+  COLLAPSING_GRID_CLASS,
+  COMPACT_PROMPT_ACTION_BUTTON_CLASS,
+  DEFAULT_PROMPTBOX_PLACEHOLDER,
+  isPromptBoxChromeTarget,
+  PROMPTBOX_MIN_HEIGHT,
+  PromptSubmitButton,
+  type PromptBoxCompactConfig,
+  type PromptBoxEditorLayout,
+} from "./PromptBoxShell";
+import {
+  appendPromptActionToDraft,
+  promptActionCommandFromAction,
+  promptActionCommandSerializedText,
+  type PromptActionCommand,
+} from "./prompt-action-draft";
 
-const PROMPTBOX_MIN_HEIGHT = 68;
 const PROMPTBOX_SELECTION_REVEAL_MARGIN = 12;
-const COMPACT_PROMPT_ACTION_BUTTON_CLASS =
-  "size-8 p-0 transition-all [&_svg]:size-4";
 const RICH_PASTE_BLOCK_TAGS = new Set([
   "ADDRESS",
   "ARTICLE",
@@ -180,10 +187,6 @@ function hasWhitespaceAfterPosition(
   return nextNode.type.name === "hardBreak";
 }
 
-type PromptBoxEditorLayout = "thread" | "root-compose";
-
-const COLLAPSING_GRID_CLASS =
-  "grid transition-[grid-template-rows] duration-[180ms] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none";
 const VOICE_ACTION_TRANSITION_MS = 180;
 type VoiceActionTransition = "entering" | "active" | "exiting";
 
@@ -213,66 +216,6 @@ export interface PromptBoxSubmissionConfig {
   onModifierSubmit?: () => void;
 }
 
-interface PromptSubmitButtonProps {
-  canSubmit: boolean;
-  className: string;
-  disabledReason: string | undefined;
-  isCompact: boolean;
-  isSubmitting: boolean;
-  onClick: (event: ReactMouseEvent<HTMLButtonElement>) => void;
-  onPointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void;
-  title: string;
-}
-
-function PromptSubmitButton({
-  canSubmit,
-  className,
-  disabledReason,
-  isCompact,
-  isSubmitting,
-  onClick,
-  onPointerDown,
-  title,
-}: PromptSubmitButtonProps) {
-  const button = (
-    <Button
-      data-promptbox-submit-action=""
-      type="submit"
-      size={isCompact ? "icon" : "sm"}
-      variant="default"
-      aria-label={title}
-      disabled={!canSubmit}
-      onPointerDown={onPointerDown}
-      onClick={onClick}
-      className={className}
-    >
-      {isSubmitting ? (
-        <Icon name="Spinner" className="size-4 animate-spin" />
-      ) : (
-        <Icon name="CornerDownLeft" className="size-4" />
-      )}
-    </Button>
-  );
-
-  if (!disabledReason) return button;
-
-  return (
-    <TooltipProvider delayDuration={300}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span
-            data-promptbox-submit-disabled-reason=""
-            className="inline-flex shrink-0"
-          >
-            {button}
-          </span>
-        </TooltipTrigger>
-        <TooltipContent side="top">{disabledReason}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}
-
 /**
  * The `@`-mention half of {@link TypeaheadConfig}. Unchanged from the prior
  * `MentionsConfig` surface other than living under `typeahead.mention`.
@@ -360,11 +303,6 @@ export interface AttachmentsConfig {
   projectId?: string;
 }
 
-interface PromptBoxCompactConfig {
-  isCompact: boolean;
-  placeholder?: string;
-}
-
 export interface HistoryConfig {
   currentDraft: PromptDraftState;
   entries: readonly PromptDraftState[];
@@ -400,7 +338,7 @@ export type { PromptBoxAction } from "./PromptBoxActionsMenu";
 
 type MentionMenuPlacement = "top" | "bottom";
 
-interface PromptBoxInternalProps {
+export interface PromptBoxInternalProps {
   id?: string;
   value: string;
   mentionRanges: readonly PromptTextMention[];
@@ -475,6 +413,13 @@ interface PromptBoxInternalProps {
    * since it follows a deliberate click.
    */
   focusEndKey?: string | number;
+  /**
+   * Set by PromptBox when the shell's interim surface held the user's focus
+   * at handoff time. Focus the editor at the end as soon as it exists, on any
+   * pointer type: the user's tap already opened the soft keyboard, so this is
+   * a focus transfer from an already-focused input, not a keyboard summon.
+   */
+  takeFocusOnCreate?: boolean;
 }
 
 interface DismissedTriggerRange {
@@ -509,27 +454,6 @@ interface PromptActionInsertionRange {
   to: number;
 }
 
-interface PromptActionCommand {
-  serializedText: string;
-  trailingText: string;
-  trigger: PromptMentionCommandTrigger;
-  suggestion: ProviderCommandSuggestion;
-}
-
-const PROMPTBOX_INTERACTIVE_TARGET_SELECTOR = [
-  "a[href]",
-  "button",
-  "input",
-  "select",
-  "textarea",
-  "[contenteditable='true']",
-  "[data-prompt-mention='true']",
-  "[role='button']",
-  "[role='link']",
-  "[role='menuitem']",
-  "[role='option']",
-].join(",");
-
 /**
  * Structural equality between the last value synced into the editor and the
  * incoming controlled value. This used to be a JSON.stringify key compare,
@@ -905,12 +829,6 @@ function revealPromptEditorSelection({
   }
 }
 
-function isPromptBoxChromeTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof Element)) return false;
-
-  return target.closest(PROMPTBOX_INTERACTIVE_TARGET_SELECTOR) === null;
-}
-
 function promptActionTextImmediatelyBeforeCursor(
   editor: Editor,
   actionText: string,
@@ -928,13 +846,6 @@ function promptActionTextImmediatelyBeforeCursor(
   return before.endsWith(actionText);
 }
 
-function promptActionCommandSerializedText(action: PromptBoxAction): string {
-  if (!action.command) {
-    return action.text;
-  }
-  return `${action.command.trigger}${action.command.name}`;
-}
-
 function isPromptActionCommandMention(
   node: ProseMirrorNode,
   actions: readonly PromptBoxAction[],
@@ -1084,30 +995,6 @@ function getPromptActionInsertionRange({
   return { from: selection.from, to: selection.to };
 }
 
-function promptActionCommandFromAction(
-  action: PromptBoxAction,
-): PromptActionCommand | null {
-  if (action.kind === "skills" || !action.command) {
-    return null;
-  }
-
-  const { trigger, name, trailingText } = action.command;
-  const serializedText = `${trigger}${name}`;
-  return {
-    serializedText,
-    trailingText,
-    trigger,
-    suggestion: {
-      kind: "command",
-      name,
-      source: "command",
-      origin: "user",
-      description: null,
-      argumentHint: null,
-    },
-  };
-}
-
 function promptActionTriggers(
   triggers: readonly TypeaheadTrigger[],
   commandAction: PromptActionCommand | null,
@@ -1193,7 +1080,7 @@ export function PromptBoxInternal({
   onSubmit,
   onEscape,
   blurOnPointerSubmit = false,
-  placeholder = "Ask anything. @ to mention files, folders, or sections",
+  placeholder = DEFAULT_PROMPTBOX_PLACEHOLDER,
   autoFocus = true,
   className,
   textEffects,
@@ -1216,6 +1103,7 @@ export function PromptBoxInternal({
   voice,
   promptBoxRef,
   focusEndKey,
+  takeFocusOnCreate = false,
 }: PromptBoxInternalProps) {
   const focusComposerShortcut = useAppCommandShortcut("composer.focus");
   const {
@@ -1989,6 +1877,19 @@ export function PromptBoxInternal({
     shouldAvoidSoftKeyboardAutofocus,
   ]);
 
+  // Handoff focus transfer (see the `takeFocusOnCreate` prop doc). Runs once
+  // per mount even if the editor is later rebuilt (rich-text toggle), and on
+  // coarse pointers too — the shell's interim surface already opened the soft
+  // keyboard, so skipping here would close it.
+  const tookHandoffFocusRef = useRef(false);
+  useEffect(() => {
+    if (!takeFocusOnCreate || tookHandoffFocusRef.current) return;
+    if (!editor || editor.isDestroyed) return;
+    tookHandoffFocusRef.current = true;
+    focusEditorAtEnd(editor);
+    scheduleRevealEditorSelection();
+  }, [editor, scheduleRevealEditorSelection, takeFocusOnCreate]);
+
   useEffect(() => {
     mentionRangesRef.current = mentionRanges;
   }, [mentionRanges]);
@@ -2523,26 +2424,13 @@ export function PromptBoxInternal({
 
       const currentEditor = editorRef.current;
       if (!currentEditor || currentEditor.isDestroyed) {
-        const currentValue = valueRef.current;
-        if (currentValue.endsWith(action.text)) return;
-        if (commandAction) {
-          const start = currentValue.length;
-          const nextValue = `${currentValue}${commandAction.serializedText}${commandAction.trailingText}`;
-          onChangeRef.current(nextValue, [
-            ...mentionRangesRef.current,
-            {
-              start,
-              end: start + commandAction.serializedText.length,
-              resource: promptCommandResourceFromSuggestion({
-                suggestion: commandAction.suggestion,
-                trigger: commandAction.trigger,
-              }),
-            },
-          ]);
-        } else {
-          onChangeRef.current(`${currentValue}${action.text}`, [
-            ...mentionRangesRef.current,
-          ]);
+        const appended = appendPromptActionToDraft({
+          action,
+          text: valueRef.current,
+          mentions: mentionRangesRef.current,
+        });
+        if (appended !== null) {
+          onChangeRef.current(appended.text, appended.mentions);
         }
         return;
       }
diff --git a/apps/app/src/components/promptbox/PromptBoxShell.stories.tsx b/apps/app/src/components/promptbox/PromptBoxShell.stories.tsx
new file mode 100644
index 0000000000..1f55146d2e
--- /dev/null
+++ b/apps/app/src/components/promptbox/PromptBoxShell.stories.tsx
@@ -0,0 +1,178 @@
+import { useMemo } from "react";
+import type { PromptTextMention } from "@bb/domain";
+import { ExecutionControls } from "@/components/promptbox/ExecutionControls";
+import { PromptBoxInternal } from "@/components/promptbox/PromptBoxInternal";
+import { PromptBoxShell } from "@/components/promptbox/PromptBoxShell";
+import { StoryCard, StoryRow } from "../../../.ladle/story-card";
+import {
+  makeAttachmentsConfig,
+  makeExecutionControlsProps,
+  makeTypeaheadConfig,
+} from "../../../.ladle/story-fixtures";
+
+export default {
+  title: "promptbox/Prompt Box Shell",
+};
+
+const noop = () => {};
+
+const SAVED_DRAFT = "Refactor the settings page to use the new form primitives";
+const SAVED_DRAFT_WITH_MENTION = "Look at @src/components/settings.tsx first";
+const SAVED_DRAFT_MENTIONS: readonly PromptTextMention[] = [
+  {
+    start: 8,
+    end: 36,
+    resource: {
+      kind: "path",
+      source: "workspace",
+      entryKind: "file",
+      path: "src/components/settings.tsx",
+      label: "settings.tsx",
+    },
+  },
+];
+
+function useSharedProps() {
+  const typeahead = useMemo(() => makeTypeaheadConfig(), []);
+  const attachments = useMemo(() => makeAttachmentsConfig(), []);
+  const execution = useMemo(() => makeExecutionControlsProps(), []);
+  return { typeahead, attachments, execution };
+}
+
+/**
+ * The shell must be indistinguishable from the real composer at rest: same
+ * frame, placeholder, action row, and send button. Each row pairs the shell
+ * (top) with the mounted editor (bottom, autoFocus off so it stays closed).
+ */
+export function ShellVersusMountedEditor() {
+  const { typeahead, attachments, execution } = useSharedProps();
+  const footerStart = <ExecutionControls {...execution} />;
+
+  return (
+    <StoryCard labelWidth="140px">
+      <StoryRow label="Shell, empty draft">
+        <div className="w-[640px]">
+          <PromptBoxShell
+            value=""
+            mentionRanges={[]}
+            placeholder="Ask anything. @ to mention files, folders, or sections"
+            attachments={attachments}
+            footerStart={footerStart}
+            onSubmitIntent={noop}
+            onPromptAction={noop}
+          />
+        </div>
+      </StoryRow>
+      <StoryRow label="Editor, empty draft">
+        <div className="w-[640px]">
+          <PromptBoxInternal
+            value=""
+            mentionRanges={[]}
+            onChange={noop}
+            onSubmit={noop}
+            autoFocus={false}
+            typeahead={typeahead}
+            mentionMenuPlacement="bottom"
+            attachments={attachments}
+            footerStart={footerStart}
+          />
+        </div>
+      </StoryRow>
+      <StoryRow label="Shell, saved draft">
+        <div className="w-[640px]">
+          <PromptBoxShell
+            value={SAVED_DRAFT}
+            mentionRanges={[]}
+            placeholder="Ask anything. @ to mention files, folders, or sections"
+            attachments={attachments}
+            footerStart={footerStart}
+            onSubmitIntent={noop}
+            onPromptAction={noop}
+          />
+        </div>
+      </StoryRow>
+      <StoryRow label="Editor, saved draft">
+        <div className="w-[640px]">
+          <PromptBoxInternal
+            value={SAVED_DRAFT}
+            mentionRanges={[]}
+            onChange={noop}
+            onSubmit={noop}
+            autoFocus={false}
+            typeahead={typeahead}
+            mentionMenuPlacement="bottom"
+            attachments={attachments}
+            footerStart={footerStart}
+          />
+        </div>
+      </StoryRow>
+      <StoryRow label="Shell, mention pill">
+        <div className="w-[640px]">
+          <PromptBoxShell
+            value={SAVED_DRAFT_WITH_MENTION}
+            mentionRanges={SAVED_DRAFT_MENTIONS}
+            placeholder="Ask anything. @ to mention files, folders, or sections"
+            attachments={attachments}
+            footerStart={footerStart}
+            onSubmitIntent={noop}
+            onPromptAction={noop}
+          />
+        </div>
+      </StoryRow>
+      <StoryRow label="Editor, mention pill">
+        <div className="w-[640px]">
+          <PromptBoxInternal
+            value={SAVED_DRAFT_WITH_MENTION}
+            mentionRanges={SAVED_DRAFT_MENTIONS}
+            onChange={noop}
+            onSubmit={noop}
+            autoFocus={false}
+            typeahead={typeahead}
+            mentionMenuPlacement="bottom"
+            attachments={attachments}
+            footerStart={footerStart}
+          />
+        </div>
+      </StoryRow>
+    </StoryCard>
+  );
+}
+
+/** One-line mobile presentation parity: 48px row, actions pinned right. */
+export function CompactShellVersusMountedEditor() {
+  const { typeahead, attachments } = useSharedProps();
+
+  return (
+    <StoryCard labelWidth="140px">
+      <StoryRow label="Shell, compact">
+        <div className="w-[360px]">
+          <PromptBoxShell
+            value=""
+            mentionRanges={[]}
+            placeholder="Ask for a follow-up"
+            compact={{ isCompact: true, placeholder: "Ask a follow-up" }}
+            attachments={attachments}
+            onSubmitIntent={noop}
+            onPromptAction={noop}
+          />
+        </div>
+      </StoryRow>
+      <StoryRow label="Editor, compact">
+        <div className="w-[360px]">
+          <PromptBoxInternal
+            value=""
+            mentionRanges={[]}
+            onChange={noop}
+            onSubmit={noop}
+            autoFocus={false}
+            placeholder="Ask for a follow-up"
+            compact={{ isCompact: true, placeholder: "Ask a follow-up" }}
+            typeahead={typeahead}
+            mentionMenuPlacement="bottom"
+            attachments={attachments}
+          />
+        </div>
+      </StoryRow>
+    </StoryCard>
+  );
+}
diff --git a/apps/app/src/components/promptbox/PromptBoxShell.tsx b/apps/app/src/components/promptbox/PromptBoxShell.tsx
new file mode 100644
index 0000000000..9385868d09
--- /dev/null
+++ b/apps/app/src/components/promptbox/PromptBoxShell.tsx
@@ -0,0 +1,773 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  type DragEvent as ReactDragEvent,
+  type ChangeEvent,
+  type FormEvent,
+  type MouseEvent as ReactMouseEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+import type { PromptTextMention } from "@bb/domain";
+import { AppCommandShortcutHint } from "@/components/commands/AppCommandShortcutHint";
+import { useAppCommandShortcut } from "@/components/commands/AppCommandProvider";
+import { Button } from "@bb/shared-ui/button";
+import { Icon } from "@bb/shared-ui/icon";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@bb/shared-ui/tooltip";
+import {
+  COARSE_POINTER_PROMPT_ACTION_BUTTON_CLASS,
+  COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS,
+  COARSE_POINTER_TEXT_BASE_CLASS,
+} from "@bb/shared-ui/coarse-pointer-sizing";
+import { usePointerCoarse } from "@bb/shared-ui/hooks/use-pointer-coarse";
+import { cn } from "@bb/shared-ui/lib/utils";
+import { ComposerActionsSlot } from "@/components/plugin/PluginComposerActions";
+import {
+  PluginComposerViewProvider,
+  useOptionalPluginComposerView,
+  usePluginComposerHost,
+  usePluginComposerViewModel,
+} from "@/components/plugin/plugin-composer-host";
+import type { ComposerView } from "@get-bb/plugin-sdk";
+import { AttachmentPreview } from "./AttachmentPreview";
+import { VoiceRecordingBar } from "./VoiceRecordingBar";
+import {
+  ComposerPlusMenuSlot,
+  type PromptBoxAction,
+} from "./PromptBoxActionsMenu";
+import { PROMPT_MENTION_PILL_CLASS } from "./mentions/prompt-mention-display";
+import { PromptMentionIcon } from "./mentions/PromptMentionIcon";
+import type {
+  AttachmentsConfig,
+  PromptBoxSubmissionConfig,
+  PromptVoiceConfig,
+} from "./PromptBoxInternal";
+
+/**
+ * The composer's closed-state chrome with zero tiptap imports.
+ *
+ * PromptBox renders this shell until the user's first focus/tap/paste/drop
+ * (or a programmatic focus request) hands off to the lazily loaded
+ * PromptBoxInternal editor. The shell must look exactly like the mounted
+ * composer at rest, so its frame, editor region, and action row reuse the
+ * internal editor's class strings and data attributes — including a
+ * `.ProseMirror`-shaped `contenteditable="false"` preview surface so the
+ * placeholder and compact-truncation CSS in app.css applies unchanged.
+ *
+ * Dependency direction is one-way on purpose: PromptBoxInternal imports
+ * shared chrome from this module, never the reverse (type-only imports
+ * excepted — they are erased at build time). Future composer features land
+ * in the internal module, not here.
+ */
+
+export const PROMPTBOX_MIN_HEIGHT = 68;
+export const DEFAULT_PROMPTBOX_PLACEHOLDER =
+  "Ask anything. @ to mention files, folders, or sections";
+export const COMPACT_PROMPT_ACTION_BUTTON_CLASS =
+  "size-8 p-0 transition-all [&_svg]:size-4";
+export const COLLAPSING_GRID_CLASS =
+  "grid transition-[grid-template-rows] duration-[180ms] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none";
+
+export type PromptBoxEditorLayout = "thread" | "root-compose";
+
+export interface PromptBoxCompactConfig {
+  isCompact: boolean;
+  placeholder?: string;
+}
+
+// Reserve the fixed action row and border so the standard prompt box does
+// not grow beyond its intended viewport-relative cap. Shared with
+// ComposerEditorSlot so the shell and the mounted editor cap identically.
+export const COMPOSER_EDITOR_MAX_HEIGHT_BY_LAYOUT: Record<
+  PromptBoxEditorLayout,
+  string
+> = {
+  thread: "calc(50dvh - 3rem)",
+  "root-compose": "calc(70dvh - 3rem)",
+};
+
+export const PROMPTBOX_INTERACTIVE_TARGET_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[contenteditable='true']",
+  "[data-prompt-mention='true']",
+  "[role='button']",
+  "[role='link']",
+  "[role='menuitem']",
+  "[role='option']",
+].join(",");
+
+export function isPromptBoxChromeTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) return false;
+
+  return target.closest(PROMPTBOX_INTERACTIVE_TARGET_SELECTOR) === null;
+}
+
+export interface PromptSubmitButtonProps {
+  canSubmit: boolean;
+  className: string;
+  disabledReason: string | undefined;
+  isCompact: boolean;
+  isSubmitting: boolean;
+  onClick: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+  onPointerDown: (event: ReactPointerEvent<HTMLButtonElement>) => void;
+  title: string;
+}
+
+export function PromptSubmitButton({
+  canSubmit,
+  className,
+  disabledReason,
+  isCompact,
+  isSubmitting,
+  onClick,
+  onPointerDown,
+  title,
+}: PromptSubmitButtonProps) {
+  const button = (
+    <Button
+      data-promptbox-submit-action=""
+      type="submit"
+      size={isCompact ? "icon" : "sm"}
+      variant="default"
+      aria-label={title}
+      disabled={!canSubmit}
+      onPointerDown={onPointerDown}
+      onClick={onClick}
+      className={className}
+    >
+      {isSubmitting ? (
+        <Icon name="Spinner" className="size-4 animate-spin" />
+      ) : (
+        <Icon name="CornerDownLeft" className="size-4" />
+      )}
+    </Button>
+  );
+
+  if (!disabledReason) return button;
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            data-promptbox-submit-disabled-reason=""
+            className="inline-flex shrink-0"
+          >
+            {button}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{disabledReason}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+interface PromptBoxShellPreviewSegment {
+  key: string;
+  mention: PromptTextMention | null;
+  text: string;
+}
+
+function promptBoxShellPreviewSegments(
+  value: string,
+  mentionRanges: readonly PromptTextMention[],
+): PromptBoxShellPreviewSegment[] {
+  const sortedMentions = [...mentionRanges].sort(
+    (left, right) => left.start - right.start || left.end - right.end,
+  );
+  const segments: PromptBoxShellPreviewSegment[] = [];
+  let cursor = 0;
+  for (const mention of sortedMentions) {
+    if (mention.start < cursor || mention.end > value.length) continue;
+    if (mention.start > cursor) {
+      segments.push({
+        key: `text-${cursor}`,
+        mention: null,
+        text: value.slice(cursor, mention.start),
+      });
+    }
+    segments.push({
+      key: `mention-${mention.start}`,
+      mention,
+      text: value.slice(mention.start, mention.end),
+    });
+    cursor = mention.end;
+  }
+  if (cursor < value.length) {
+    segments.push({
+      key: `text-${cursor}`,
+      mention: null,
+      text: value.slice(cursor),
+    });
+  }
+  return segments;
+}
+
+export interface PromptBoxShellProps {
+  id?: string;
+  value: string;
+  mentionRanges: readonly PromptTextMention[];
+  /** Raw placeholder; the shell applies the compact override like the editor. */
+  placeholder: string;
+  className?: string;
+  header?: ReactNode;
+  footerStart?: ReactNode;
+  submission?: PromptBoxSubmissionConfig;
+  minHeight?: number;
+  attachments?: AttachmentsConfig;
+  promptActions?: readonly PromptBoxAction[];
+  suppressPluginComposerCustomizations?: boolean;
+  editorLayout?: PromptBoxEditorLayout;
+  onCollapse?: () => void;
+  compact?: PromptBoxCompactConfig;
+  containerCompactPlaceholder?: string;
+  voice?: PromptVoiceConfig;
+  onComposerLayoutChange?: (layout: ComposerView["layout"]) => void;
+  /**
+   * The buffered-input surface PromptBox overlays on the editor region while
+   * the editor chunk loads: an invisible textarea that captures the tap,
+   * opens the soft keyboard, and streams keystrokes into the draft.
+   */
+  interimSurface?: ReactNode;
+  /** True while the interim surface is focused: paints the caret affordance. */
+  showInterimCaret?: boolean;
+  /**
+   * The interim surface renders its own text natively (empty-draft handoff),
+   * so the preview must not echo the draft underneath it.
+   */
+  suppressPreviewText?: boolean;
+  /** Chrome mousedown outside interactive targets — mirror of the editor's focus-on-chrome-click. */
+  onChromeMouseDown?: (event: ReactMouseEvent<HTMLFormElement>) => void;
+  /** Submit from the form or the submit button (Enter in the interim surface routes here too). */
+  onSubmitIntent: () => void;
+  /** A prompt action picked from the plus menu before the editor exists. */
+  onPromptAction: (action: PromptBoxAction) => void;
+  /** Warm the editor chunk (pointerenter/focus). */
+  onPreload?: () => void;
+  /** Compose intent that must realize the editor without stealing focus (drop, voice, action). */
+  onComposeIntent?: () => void;
+}
+
+export function PromptBoxShell({
+  id,
+  value,
+  mentionRanges,
+  placeholder,
+  className,
+  header,
+  footerStart,
+  submission = {},
+  minHeight = PROMPTBOX_MIN_HEIGHT,
+  attachments: attachmentConfig = {},
+  promptActions,
+  suppressPluginComposerCustomizations = false,
+  editorLayout = "thread",
+  onCollapse,
+  compact,
+  containerCompactPlaceholder,
+  voice,
+  onComposerLayoutChange,
+  interimSurface,
+  showInterimCaret = false,
+  suppressPreviewText = false,
+  onChromeMouseDown,
+  onSubmitIntent,
+  onPromptAction,
+  onPreload,
+  onComposeIntent,
+}: PromptBoxShellProps) {
+  const focusComposerShortcut = useAppCommandShortcut("composer.focus");
+  const {
+    isSubmitting = false,
+    disabled: submitDisabled = false,
+    disabledReason: submitDisabledReason,
+    title: submitTitle = "Submit (Enter)",
+    isRunning = false,
+    onStop,
+  } = submission;
+  const {
+    items: attachments = [],
+    isAttaching = false,
+    error: attachmentError = null,
+    onAttachFiles,
+    onRemove: onRemoveAttachment,
+    projectId: attachmentProjectId,
+  } = attachmentConfig;
+  const isPointerCoarse = usePointerCoarse();
+  const formRef = useRef<HTMLFormElement>(null);
+  const attachmentInputRef = useRef<HTMLInputElement>(null);
+
+  const isVoiceRecording = voice?.state === "recording";
+  const isVoiceProcessing = voice?.state === "transcribing";
+  const showVoiceActionGroup = isVoiceRecording || isVoiceProcessing;
+  const isVoiceBusy = showVoiceActionGroup;
+  const showCompactLayout = compact?.isCompact === true && !showVoiceActionGroup;
+  const effectivePlaceholder = showCompactLayout
+    ? (compact.placeholder ?? placeholder)
+    : placeholder;
+
+  useLayoutEffect(() => {
+    const formElement = formRef.current;
+    if (!formElement) return;
+    if (containerCompactPlaceholder === undefined) {
+      formElement.style.removeProperty(
+        "--promptbox-container-compact-placeholder",
+      );
+      return;
+    }
+    formElement.style.setProperty(
+      "--promptbox-container-compact-placeholder",
+      JSON.stringify(containerCompactPlaceholder),
+    );
+  }, [containerCompactPlaceholder]);
+
+  const pluginComposerHost = usePluginComposerHost();
+  const composerLayout: ComposerView["layout"] = showCompactLayout
+    ? "compact"
+    : "expanded";
+  const localComposerView = usePluginComposerViewModel({
+    scope: pluginComposerHost?.scope ?? {
+      kind: "new-thread",
+      projectId: null,
+    },
+    layout: composerLayout,
+    text: value,
+    attachmentCount: attachments.length,
+    isRunning,
+    isSubmitting,
+  });
+  const composerView = useOptionalPluginComposerView() ?? localComposerView;
+  useEffect(() => {
+    onComposerLayoutChange?.(composerLayout);
+  }, [composerLayout, onComposerLayoutChange]);
+
+  const trimmedValue = value.trim();
+  const hasAttachments = attachments.length > 0;
+  const hasSubmittableInput = trimmedValue.length > 0 || hasAttachments;
+  const canSubmit =
+    hasSubmittableInput && !isSubmitting && !submitDisabled && !isVoiceBusy;
+  const showStop = Boolean(isRunning && onStop && !canSubmit && !isVoiceBusy);
+  const canStartVoiceInput =
+    voice !== undefined && voice.isSupported && !isSubmitting;
+  const showVoiceAsPrimaryAction =
+    isPointerCoarse && !hasSubmittableInput && canStartVoiceInput;
+  const effectiveSubmitTitle =
+    !canSubmit && submitDisabledReason ? submitDisabledReason : submitTitle;
+
+  const handleVoicePointerDown = (
+    event: ReactPointerEvent<HTMLButtonElement>,
+  ) => {
+    if (!isPointerCoarse || event.button !== 0) return;
+    // Keep mobile voice activation from focusing the button and expanding
+    // the follow-up composer before click can start recording.
+    event.preventDefault();
+  };
+  const startVoiceInput = () => {
+    onComposeIntent?.();
+    void voice?.start();
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canSubmit) return;
+    onSubmitIntent();
+  };
+
+  const handleAttachmentInputChange = (
+    event: ChangeEvent<HTMLInputElement>,
+  ) => {
+    const fileList = event.target.files;
+    if (!onAttachFiles || !fileList || fileList.length === 0) return;
+    void onAttachFiles(Array.from(fileList));
+    event.target.value = "";
+  };
+
+  const handleDrop = (event: ReactDragEvent<HTMLFormElement>) => {
+    if (!onAttachFiles) return;
+    event.preventDefault();
+    if (!event.dataTransfer?.files || event.dataTransfer.files.length === 0)
+      return;
+    void onAttachFiles(Array.from(event.dataTransfer.files));
+    onComposeIntent?.();
+  };
+
+  const isPreviewEmpty = value.length === 0;
+  const previewSegments =
+    isPreviewEmpty || suppressPreviewText
+      ? []
+      : promptBoxShellPreviewSegments(value, mentionRanges);
+
+  return (
+    <form
+      ref={formRef}
+      data-promptbox=""
+      data-promptbox-compact={showCompactLayout ? "" : undefined}
+      data-promptbox-voice-active={showVoiceActionGroup ? "" : undefined}
+      onSubmit={handleSubmit}
+      onMouseDown={onChromeMouseDown}
+      onPointerEnter={onPreload}
+      onFocusCapture={onPreload}
+      onDragOver={(event) => {
+        if (!onAttachFiles) return;
+        event.preventDefault();
+      }}
+      onDrop={handleDrop}
+      className={cn(
+        "group/promptbox relative w-full rounded-xl border border-border bg-background shadow-lift",
+        showCompactLayout && "overflow-hidden",
+        className,
+      )}
+    >
+      <input
+        ref={attachmentInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={handleAttachmentInputChange}
+      />
+      <div
+        data-promptbox-layout=""
+        className={COLLAPSING_GRID_CLASS}
+        style={{ gridTemplateRows: "1fr" }}
+      >
+        <div
+          data-promptbox-main=""
+          className={cn(
+            "min-h-0 overflow-hidden transition-opacity duration-[180ms] motion-reduce:transition-none",
+            showCompactLayout && "relative h-12",
+            showVoiceActionGroup && "pointer-events-none",
+          )}
+        >
+          {header && !showCompactLayout ? (
+            <div
+              data-promptbox-expanded-only=""
+              inert={showVoiceActionGroup ? true : undefined}
+              className="pl-4 pr-14 pt-3"
+            >
+              {header}
+            </div>
+          ) : null}
+          <div data-promptbox-input-region="" className="relative">
+            {!showCompactLayout ? (
+              <>
+                <div data-promptbox-expanded-only="">
+                  <AppCommandShortcutHint
+                    shortcut={focusComposerShortcut}
+                    className={cn(
+                      "absolute top-2 z-20 group-focus-within/promptbox:hidden",
+                      onCollapse ? "right-10" : "right-2",
+                    )}
+                  />
+                </div>
+                {onCollapse ? (
+                  <div
+                    data-promptbox-expanded-only=""
+                    data-promptbox-standard-actions=""
+                    inert={showVoiceActionGroup ? true : undefined}
+                    className="absolute right-2 top-2 z-20 flex items-center"
+                  >
+                    <Button
+                      type="button"
+                      size="icon"
+                      variant="ghost"
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                      }}
+                      onClick={onCollapse}
+                      aria-label="Collapse prompt box"
+                      className={cn(
+                        "text-subtle-foreground hover:text-muted-foreground",
+                        COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS,
+                      )}
+                    >
+                      <Icon name="ChevronDown" className="size-3" />
+                    </Button>
+                  </div>
+                ) : null}
+              </>
+            ) : null}
+            <div
+              data-promptbox-editor-scroll=""
+              className={cn(
+                "w-full overflow-y-auto bg-transparent px-4 pb-1 pr-14 pt-3 outline-none",
+                COARSE_POINTER_TEXT_BASE_CLASS,
+                "leading-relaxed",
+                showCompactLayout && "h-12 overflow-hidden pb-0 pr-14 pt-0",
+              )}
+              style={{
+                minHeight: showCompactLayout ? "48px" : `${minHeight}px`,
+                height: showCompactLayout ? "48px" : undefined,
+                maxHeight: showCompactLayout
+                  ? "48px"
+                  : COMPOSER_EDITOR_MAX_HEIGHT_BY_LAYOUT[editorLayout],
+              }}
+            >
+              <div
+                data-promptbox-editor-content=""
+                data-promptbox-compact-content={
+                  showCompactLayout ? "" : undefined
+                }
+                className={cn(
+                  "h-full min-h-full",
+                  showCompactLayout && "flex items-center",
+                  "[&_.ProseMirror]:min-h-full [&_.ProseMirror]:leading-[1.7] [&_.ProseMirror]:outline-none",
+                  "[&_.ProseMirror_p]:m-0",
+                  "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none",
+                  "[&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left",
+                  "[&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0",
+                  "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-subtle-foreground",
+                  "[&_.ProseMirror_p.is-editor-empty:first-child::before]:font-light",
+                  "[&_.ProseMirror_p.is-editor-empty:first-child::before]:opacity-70",
+                )}
+              >
+                {/* Non-editable stand-in for the ProseMirror root. It keeps the
+                    editor's classes and [contenteditable] attribute shape so the
+                    placeholder and compact-preview CSS in app.css style it
+                    exactly like the resting editor. */}
+                <div
+                  data-promptbox-shell-preview=""
+                  className="ProseMirror min-h-full whitespace-pre-wrap break-words outline-none"
+                  contentEditable={false}
+                  aria-hidden={interimSurface ? true : undefined}
+                  {...(id && !interimSurface ? { id } : {})}
+                >
+                  {isPreviewEmpty && !suppressPreviewText ? (
+                    <p
+                      className="is-editor-empty"
+                      data-placeholder={effectivePlaceholder}
+                    >
+                      <br />
+                    </p>
+                  ) : (
+                    <p>
+                      {previewSegments.map((segment) =>
+                        segment.mention ? (
+                          <span
+                            key={segment.key}
+                            className={PROMPT_MENTION_PILL_CLASS}
+                            data-prompt-mention="true"
+                          >
+                            <PromptMentionIcon
+                              resource={segment.mention.resource}
+                              className="-ml-px size-4 shrink-0 self-center"
+                            />
+                            <span className="truncate">
+                              {segment.mention.resource.label}
+                            </span>
+                          </span>
+                        ) : (
+                          <span key={segment.key}>{segment.text}</span>
+                        ),
+                      )}
+                      {showInterimCaret ? (
+                        <span
+                          data-promptbox-shell-caret=""
+                          className="ml-px inline-block h-[1.1em] w-px translate-y-[0.18em] animate-caret-blink bg-foreground duration-1000 motion-reduce:animate-none"
+                        />
+                      ) : null}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+            {interimSurface}
+          </div>
+
+          {!showCompactLayout ? (
+            <div
+              data-promptbox-expanded-only=""
+              inert={showVoiceActionGroup ? true : undefined}
+            >
+              <AttachmentPreview
+                attachments={attachments}
+                attachmentProjectId={attachmentProjectId}
+                expandedImageIndex={null}
+                onExpandedImageIndexChange={() => {}}
+                onRemoveAttachment={onRemoveAttachment}
+              />
+
+              {attachmentError ? (
+                <div className="mx-3 mb-1 mt-1 text-xs text-destructive">
+                  {attachmentError}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+
+          <PluginComposerViewProvider value={composerView}>
+            <div
+              data-promptbox-action-row=""
+              className={cn(
+                "relative flex shrink-0 select-none flex-row items-center gap-3 pb-2 pl-3.5 pr-2 pt-1.5",
+                // z-20 keeps the compact action buttons above the interim
+                // input overlay (z-10) that spans the h-12 input region.
+                showCompactLayout && "absolute inset-y-0 right-2 z-20 gap-0 p-0",
+              )}
+            >
+              {voice && showVoiceActionGroup ? (
+                <div
+                  data-promptbox-voice-controls=""
+                  data-voice-transition="active"
+                  className="pointer-events-auto absolute inset-0 z-10 min-w-0"
+                >
+                  <VoiceRecordingBar
+                    state={isVoiceProcessing ? "transcribing" : "recording"}
+                    stream={voice.stream}
+                    onConfirm={voice.stop}
+                    onCancel={voice.cancel}
+                  />
+                </div>
+              ) : null}
+              {!showCompactLayout ? (
+                <div
+                  data-promptbox-expanded-only=""
+                  data-promptbox-standard-actions=""
+                  className={cn(
+                    "flex min-w-0 flex-1 flex-row items-center gap-1",
+                    showVoiceActionGroup && "pointer-events-none opacity-0",
+                  )}
+                  inert={showVoiceActionGroup ? true : undefined}
+                  aria-live="polite"
+                >
+                  <ComposerPlusMenuSlot
+                    actions={promptActions}
+                    isAttaching={isAttaching}
+                    onAttach={
+                      onAttachFiles
+                        ? () => attachmentInputRef.current?.click()
+                        : undefined
+                    }
+                    onAction={onPromptAction}
+                    includePluginContributions={
+                      !suppressPluginComposerCustomizations
+                    }
+                  />
+                  {footerStart}
+                </div>
+              ) : null}
+              <div
+                data-promptbox-standard-actions=""
+                className={cn(
+                  "flex shrink-0 flex-row items-center gap-1",
+                  showVoiceActionGroup && "pointer-events-none opacity-0",
+                )}
+                inert={showVoiceActionGroup ? true : undefined}
+              >
+                <ComposerActionsSlot
+                  includePluginContributions={
+                    !showCompactLayout && !suppressPluginComposerCustomizations
+                  }
+                >
+                  {!showCompactLayout ? (
+                    <>
+                      {voice &&
+                      !showVoiceActionGroup &&
+                      (!showVoiceAsPrimaryAction || showStop) ? (
+                        <Button
+                          data-promptbox-expanded-only=""
+                          type="button"
+                          size="icon"
+                          variant="ghost"
+                          aria-label={
+                            !voice.isSupported
+                              ? "Voice input is not supported in this browser"
+                              : "Start voice input"
+                          }
+                          disabled={!canStartVoiceInput}
+                          onPointerDown={handleVoicePointerDown}
+                          onClick={startVoiceInput}
+                          className={
+                            COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS
+                          }
+                        >
+                          <Icon name="Mic" className="size-4" />
+                        </Button>
+                      ) : null}
+                    </>
+                  ) : null}
+                  <div
+                    data-promptbox-submit-group=""
+                    className="flex shrink-0 flex-row items-center"
+                  >
+                    {showStop ? (
+                      <Button
+                        data-promptbox-submit-action=""
+                        type="button"
+                        size="icon"
+                        variant="secondary"
+                        aria-label="Stop run"
+                        onClick={onStop}
+                        className={
+                          showCompactLayout
+                            ? COMPACT_PROMPT_ACTION_BUTTON_CLASS
+                            : COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS
+                        }
+                      >
+                        <Icon
+                          name="Square"
+                          className="size-3.5 fill-current [&_*]:stroke-0"
+                        />
+                      </Button>
+                    ) : showVoiceAsPrimaryAction ? (
+                      <Button
+                        data-promptbox-submit-action=""
+                        type="button"
+                        size={showCompactLayout ? "icon" : "sm"}
+                        variant="default"
+                        aria-label="Start voice input"
+                        onPointerDown={handleVoicePointerDown}
+                        onClick={startVoiceInput}
+                        className={cn(
+                          showCompactLayout
+                            ? COMPACT_PROMPT_ACTION_BUTTON_CLASS
+                            : [
+                                "ml-1",
+                                COARSE_POINTER_PROMPT_ACTION_BUTTON_CLASS,
+                              ],
+                          "transition-colors",
+                        )}
+                      >
+                        <Icon name="Mic" className="size-4" />
+                      </Button>
+                    ) : (
+                      <PromptSubmitButton
+                        canSubmit={canSubmit}
+                        className={cn(
+                          showCompactLayout
+                            ? COMPACT_PROMPT_ACTION_BUTTON_CLASS
+                            : [
+                                "ml-1",
+                                COARSE_POINTER_PROMPT_ACTION_BUTTON_CLASS,
+                              ],
+                          "transition-colors",
+                        )}
+                        disabledReason={
+                          !canSubmit ? submitDisabledReason : undefined
+                        }
+                        isCompact={showCompactLayout}
+                        isSubmitting={isSubmitting}
+                        onPointerDown={() => {}}
+                        onClick={() => {}}
+                        title={effectiveSubmitTitle}
+                      />
+                    )}
+                  </div>
+                </ComposerActionsSlot>
+              </div>
+            </div>
+          </PluginComposerViewProvider>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/app/src/components/promptbox/prompt-action-draft.ts b/apps/app/src/components/promptbox/prompt-action-draft.ts
new file mode 100644
index 0000000000..d89f78573c
--- /dev/null
+++ b/apps/app/src/components/promptbox/prompt-action-draft.ts
@@ -0,0 +1,102 @@
+import type { PromptMentionCommandTrigger, PromptTextMention } from "@bb/domain";
+import type { ProviderCommandSuggestion } from "@bb/client-core";
+import { promptCommandResourceFromSuggestion } from "./editor/prompt-editor-serialization";
+import type { PromptBoxAction } from "./PromptBoxActionsMenu";
+
+/**
+ * Prompt-action → draft translation shared by the mounted editor's
+ * editorless fallback (PromptBoxInternal) and the pre-handoff shell
+ * (PromptBox). Deliberately tiptap-free: prompt-editor-serialization's
+ * tiptap imports are type-only, so this module stays in the light route
+ * closure while the editor chunk loads on demand.
+ */
+
+export interface PromptActionCommand {
+  serializedText: string;
+  trailingText: string;
+  trigger: PromptMentionCommandTrigger;
+  suggestion: ProviderCommandSuggestion;
+}
+
+export function promptActionCommandSerializedText(
+  action: PromptBoxAction,
+): string {
+  if (!action.command) {
+    return action.text;
+  }
+  return `${action.command.trigger}${action.command.name}`;
+}
+
+export function promptActionCommandFromAction(
+  action: PromptBoxAction,
+): PromptActionCommand | null {
+  if (action.kind === "skills" || !action.command) {
+    return null;
+  }
+
+  const { trigger, name, trailingText } = action.command;
+  const serializedText = `${trigger}${name}`;
+  return {
+    serializedText,
+    trailingText,
+    trigger,
+    suggestion: {
+      kind: "command",
+      name,
+      source: "command",
+      origin: "user",
+      description: null,
+      argumentHint: null,
+    },
+  };
+}
+
+export interface AppendPromptActionToDraftArgs {
+  action: PromptBoxAction;
+  text: string;
+  mentions: readonly PromptTextMention[];
+}
+
+export interface AppendedPromptActionDraft {
+  text: string;
+  mentions: PromptTextMention[];
+}
+
+/**
+ * Applies a prompt action to a draft without an editor: append the action's
+ * text (or its command pill serialization plus mention range) at the end.
+ * Returns null when the action is a no-op — empty text, or the draft already
+ * ends with it.
+ */
+export function appendPromptActionToDraft({
+  action,
+  text,
+  mentions,
+}: AppendPromptActionToDraftArgs): AppendedPromptActionDraft | null {
+  if (action.text.length === 0) return null;
+  if (text.endsWith(action.text)) return null;
+
+  const commandAction = promptActionCommandFromAction(action);
+  if (commandAction) {
+    const start = text.length;
+    return {
+      text: `${text}${commandAction.serializedText}${commandAction.trailingText}`,
+      mentions: [
+        ...mentions,
+        {
+          start,
+          end: start + commandAction.serializedText.length,
+          resource: promptCommandResourceFromSuggestion({
+            suggestion: commandAction.suggestion,
+            trigger: commandAction.trigger,
+          }),
+        },
+      ],
+    };
+  }
+
+  return {
+    text: `${text}${action.text}`,
+    mentions: [...mentions],
+  };
+}