Hand off to another provider from the follow-up composer

apps/app/src/app.css

@@ -468,6 +468,10 @@
     padding: 0;
   }
 
+  [data-follow-up-composer] [data-promptbox-submit-label] {
+    display: none;
+  }
+
   [data-follow-up-composer] [data-follow-up-composer-footer] {
     min-height: 0;
     max-height: 0;

apps/app/src/components/pickers/ModelReasoningPicker.test.tsx

@@ -25,6 +25,7 @@ import {
 import {
   buildModelNavRows,
   ModelReasoningPicker,
+  type ModelReasoningPickerHandoff,
 } from "./ModelReasoningPicker";
 import type { PickerOption } from "./OptionPicker";
 import type { ProviderPickerOption } from "./model-brand-prefix";
@@ -160,6 +161,7 @@ function renderPicker({
   compact = false,
   splitPane = false,
   muted = false,
+  handoff,
 }: {
   onSelectedProviderChange?: ((value: string) => void) | null;
   onModelChange?: (value: string) => void;
@@ -178,6 +180,7 @@ function renderPicker({
   compact?: boolean;
   splitPane?: boolean;
   muted?: boolean;
+  handoff?: ModelReasoningPickerHandoff;
 } = {}) {
   const { queryClient, wrapper } = createQueryClientTestHarness();
   queryClient.setQueryData(
@@ -219,6 +222,7 @@ function renderPicker({
         showFastModeToggle={false}
         muted={muted}
         modal={false}
+        handoff={handoff}
       />
       <button type="button">Composer action</button>
     </div>
@@ -667,6 +671,177 @@ describe("ModelReasoningPicker", () => {
     expect(onModelChange).toHaveBeenCalledWith("claude-opus-4-7");
   });
 
+  it("opens the same handoff flow from provider tabs and the footer", async () => {
+    const onSelect = vi.fn();
+    const { onSelectedProviderChange, onModelChange, onReasoningChange } =
+      renderPicker({ handoff: { sourceProviderId: "codex", onSelect } });
+    const trigger = screen.getByRole("button", {
+      name: "Provider, model and reasoning",
+    });
+
+    fireEvent.click(trigger);
+    fireEvent.click(screen.getByTitle("Claude Code"));
+
+    expect(
+      screen.getByRole("button", { name: "Back to model picker" }),
+    ).not.toBeNull();
+    fireEvent.click(screen.getByTitle("Codex (current thread)"));
+    expect(
+      screen.queryByRole("button", { name: "Back to model picker" }),
+    ).toBeNull();
+    expect(onSelectedProviderChange).not.toHaveBeenCalled();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Handoff to new thread" }),
+    );
+    expect(screen.getByTitle("Codex (current thread)")).not.toBeNull();
+    expect(await screen.findByText("Opus 4.7")).not.toBeNull();
+    expect(screen.getAllByText("5.5")).toHaveLength(1);
+    expect(onSelectedProviderChange).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole("button", { name: "Handoff to new thread" }),
+    ).toBeNull();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Back to model picker" }),
+    );
+    expect(
+      screen.queryByRole("button", { name: "Back to model picker" }),
+    ).toBeNull();
+    expect(screen.getByTitle("Codex")).toHaveProperty("disabled", false);
+    expect(screen.getAllByText("5.5")).toHaveLength(2);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Handoff to new thread" }),
+    );
+    fireEvent.click(await screen.findByText("Opus 4.7"));
+
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+      providerId: "claude-code",
+      model: "claude-opus-4-7",
+      reasoningLevel: "medium",
+    });
+    expect(onSelectedProviderChange).not.toHaveBeenCalled();
+    expect(onModelChange).not.toHaveBeenCalled();
+    expect(onReasoningChange).not.toHaveBeenCalled();
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(
+      screen.getByRole("button", { name: "Back to model picker" }),
+    ).not.toBeNull();
+  });
+
+  it.each([
+    ["modelPicker.cycleModel", "claude-sonnet-4-6"],
+    ["modelPicker.cycleModelBackward", "claude-haiku-4-5"],
+  ])(
+    "%s selects from the handoff provider without changing the source",
+    async (command, expectedModel) => {
+      const onSelect = vi.fn();
+      const { onModelChange, onReasoningChange, onSelectedProviderChange } =
+        renderPicker({
+          handoff: { sourceProviderId: "codex", onSelect },
+          providerRouting: { environmentId: "env-source" },
+          alternateProviderModels: [
+            availableModel({
+              value: "claude-opus-4-7",
+              label: "Claude Opus 4.7",
+              isDefault: true,
+            }),
+            availableModel({
+              value: "claude-sonnet-4-6",
+              label: "Claude Sonnet 4.6",
+            }),
+            availableModel({
+              value: "claude-haiku-4-5",
+              label: "Claude Haiku 4.5",
+            }),
+          ],
+        });
+      fireEvent.click(
+        screen.getByRole("button", { name: "Provider, model and reasoning" }),
+      );
+      fireEvent.click(
+        screen.getByRole("button", { name: "Handoff to new thread" }),
+      );
+      await screen.findByText("Opus 4.7");
+      act(() => {
+        commandHandlers.get(command)?.({ target: document.body });
+      });
+      expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+        providerId: "claude-code",
+        model: expectedModel,
+        reasoningLevel: "medium",
+      });
+      expect(onModelChange).not.toHaveBeenCalled();
+      expect(onReasoningChange).not.toHaveBeenCalled();
+      expect(onSelectedProviderChange).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each(["modelPicker.cycleReasoning", "modelPicker.cycleReasoningBackward"])(
+    "%s keeps the handoff preview and applies its reasoning to selection",
+    async (command) => {
+      const onSelect = vi.fn();
+      const { onModelChange, onReasoningChange } = renderPicker({
+        handoff: { sourceProviderId: "codex", onSelect },
+        alternateProviderModels: [
+          {
+            ...availableModel({
+              value: "claude-opus-4-7",
+              label: "Claude Opus 4.7",
+              isDefault: true,
+            }),
+            supportedReasoningEfforts: [
+              { reasoningEffort: "medium", description: "Medium" },
+              { reasoningEffort: "high", description: "High" },
+            ],
+          },
+        ],
+      });
+      fireEvent.click(
+        screen.getByRole("button", { name: "Provider, model and reasoning" }),
+      );
+      fireEvent.click(
+        screen.getByRole("button", { name: "Handoff to new thread" }),
+      );
+      await screen.findByText("Opus 4.7");
+      act(() => {
+        commandHandlers.get(command)?.({ target: document.body });
+      });
+      expect(screen.getByTitle("Codex (current thread)")).not.toBeNull();
+      fireEvent.click(screen.getByText("Opus 4.7"));
+      expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+        providerId: "claude-code",
+        model: "claude-opus-4-7",
+        reasoningLevel: "high",
+      });
+      expect(onModelChange).not.toHaveBeenCalled();
+      expect(onReasoningChange).not.toHaveBeenCalled();
+    },
+  );
+
+  it("returns to the thread's provider from the current-thread tab", () => {
+    const onSelect = vi.fn();
+    const { onSelectedProviderChange } = renderPicker({
+      selectedProviderId: "claude-code",
+      handoff: { sourceProviderId: "codex", onSelect },
+    });
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Provider, model and reasoning" }),
+    );
+    fireEvent.click(
+      screen.getByRole("button", { name: "Handoff to new thread" }),
+    );
+    fireEvent.click(screen.getByTitle("Codex (current thread)"));
+
+    expect(onSelectedProviderChange).toHaveBeenCalledExactlyOnceWith("codex");
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole("button", { name: "Back to model picker" }),
+    ).toBeNull();
+  });
+
   it.each([
     {
       label: "fetches every sibling",