From 635d80c149a1858829396b1d5e354fb6cb26bb99 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Mon, 9 Nov 2026 16:10:17 +0100
Subject: [PATCH] fix(app): close a plugin picker when its trigger moves to the
 overflow

The measuring slot keeps toolbar plugin items mounted, so a picker that
was open when the toolbar condensed lost its trigger but kept its popup,
which portals to the overlay root. Mark the slot's items inactive while
they are out of the row, the contract retained panels already use to
close their popups.
---
 .../e2e/browser/plugin-composer-items.spec.ts | 12 +++
 .../support/helpers/plugin-composer-items.ts  | 77 ++++++++++++++++---
 .../agent-controls/plugin-toolbar-slot.tsx    |  7 +-
 3 files changed, 83 insertions(+), 13 deletions(-)

diff --git a/packages/app/e2e/browser/plugin-composer-items.spec.ts b/packages/app/e2e/browser/plugin-composer-items.spec.ts
index 6cbb6d0244..2c669105ae 100644
--- a/packages/app/e2e/browser/plugin-composer-items.spec.ts
+++ b/packages/app/e2e/browser/plugin-composer-items.spec.ts
@@ -3,6 +3,7 @@ import {
   expectToolbarNeverCondensedOrClipped,
   recordToolbarFramesFromLoad,
   withComposerControlsExample,
+  withPickerComposerItem,
   withToggleAndWatcherComposerItems,
 } from "../support/helpers/plugin-composer-items";
 
@@ -43,6 +44,17 @@ test("a toolbar without room moves a plugin toggle to the overflow sheet and bac
   });
 });
 
+test("an open plugin picker closes when its trigger moves to the overflow", async ({ page }) => {
+  test.setTimeout(120_000);
+  await withPickerComposerItem(page, async (composer) => {
+    await composer.setWindowWidth(1000);
+    await composer.openInlinePicker();
+    await composer.setWindowWidth(880);
+    await composer.expectToolbarWidthBetween(300, 395);
+    await composer.expectPickerClosed();
+  });
+});
+
 test("the toolbar settles on one density without flipping as the window widens", async ({
   page,
 }) => {
diff --git a/packages/app/e2e/support/helpers/plugin-composer-items.ts b/packages/app/e2e/support/helpers/plugin-composer-items.ts
index f262c3a91b..678c9544da 100644
--- a/packages/app/e2e/support/helpers/plugin-composer-items.ts
+++ b/packages/app/e2e/support/helpers/plugin-composer-items.ts
@@ -90,6 +90,33 @@ export default function contribute(client) {
   return () => {};
 }`;
 
+const PICKER_NAME = "Review state";
+const PICKER_PLUGIN_SOURCE = `import { Select } from "@getpaseo/plugin/client/ui";
+import { useState } from "react";
+
+const OPTIONS = [
+  { value: "draft", label: "Draft" },
+  { value: "ready", label: "Ready" },
+];
+
+function ReviewState() {
+  const [value, setValue] = useState("draft");
+  return (
+    <Select
+      title="${PICKER_NAME}"
+      icon="CircleDot"
+      value={value}
+      options={OPTIONS}
+      onValueChange={({ value: next }) => setValue(next)}
+    />
+  );
+}
+
+export default function contribute(client) {
+  client.addComposerItem({ id: "review-state", Component: ReviewState });
+  return () => {};
+}`;
+
 function toolbar(page: Page) {
   return page.getByTestId("agent-controls-toolbar").filter({ visible: true }).first();
 }
@@ -136,18 +163,38 @@ function agentFeaturesButton(page: Page) {
   return page.getByRole("button", { name: "Open agent features", exact: true });
 }
 
+interface ToolbarPluginComposer {
+  setWindowWidth(width: number): Promise<void>;
+  expectToolbarWidthBetween(min: number, max: number): Promise<void>;
+  expectToggleInlineAtFullDensity(): Promise<void>;
+  expectToggleInOverflow(): Promise<void>;
+  closeOverflowSheet(): Promise<void>;
+  startRecordingDensity(): Promise<void>;
+  expectAtMostOneDensityChange(): Promise<void>;
+  openInlinePicker(): Promise<void>;
+  expectPickerClosed(): Promise<void>;
+}
+
 /** Runs `run` in an agent's composer with one icon toggle and one item that renders nothing. */
-export async function withToggleAndWatcherComposerItems(
+export function withToggleAndWatcherComposerItems(
   page: Page,
-  run: (composer: {
-    setWindowWidth(width: number): Promise<void>;
-    expectToolbarWidthBetween(min: number, max: number): Promise<void>;
-    expectToggleInlineAtFullDensity(): Promise<void>;
-    expectToggleInOverflow(): Promise<void>;
-    closeOverflowSheet(): Promise<void>;
-    startRecordingDensity(): Promise<void>;
-    expectAtMostOneDensityChange(): Promise<void>;
-  }) => Promise<void>,
+  run: (composer: ToolbarPluginComposer) => Promise<void>,
+) {
+  return withToolbarPlugin(page, ONE_TOGGLE_PLUGIN_SOURCE, run);
+}
+
+/** Runs `run` in an agent's composer with one plugin `Select` in the toolbar. */
+export function withPickerComposerItem(
+  page: Page,
+  run: (composer: ToolbarPluginComposer) => Promise<void>,
+) {
+  return withToolbarPlugin(page, PICKER_PLUGIN_SOURCE, run);
+}
+
+async function withToolbarPlugin(
+  page: Page,
+  pluginSource: string,
+  run: (composer: ToolbarPluginComposer) => Promise<void>,
 ) {
   const workspace = await seedWorkspace({ repoPrefix: "composer-measured-items-" });
   const agent = await workspace.client.createAgent({
@@ -165,7 +212,7 @@ export async function withToggleAndWatcherComposerItems(
     path.join(directory, "paseo-plugin.json"),
     JSON.stringify({ id: ONE_TOGGLE_PLUGIN_ID, requirements: pluginRequirements }),
   );
-  await writeFile(path.join(directory, "index.client.tsx"), ONE_TOGGLE_PLUGIN_SOURCE);
+  await writeFile(path.join(directory, "index.client.tsx"), pluginSource);
   try {
     await client.patchDaemonConfig({ pluginsEnabled: true });
     await client.installDirectoryPlugin(directory);
@@ -229,6 +276,14 @@ export async function withToggleAndWatcherComposerItems(
           });
           expect(changes).toBeLessThanOrEqual(1);
         }),
+      openInlinePicker: () =>
+        test.step("open the plugin picker from the toolbar", async () => {
+          await toolbar(page).getByRole("button", { name: PICKER_NAME, exact: true }).click();
+          await expect(page.getByTestId("combobox-desktop-container")).toBeVisible();
+        }),
+      expectPickerClosed: () =>
+        test.step("the plugin picker has closed", () =>
+          expect(page.getByTestId("combobox-desktop-container")).toHaveCount(0)),
     });
   } finally {
     await client.removePlugin(ONE_TOGGLE_PLUGIN_ID);
diff --git a/packages/app/src/composer/agent-controls/plugin-toolbar-slot.tsx b/packages/app/src/composer/agent-controls/plugin-toolbar-slot.tsx
index 84f186cbe5..f31561b6ac 100644
--- a/packages/app/src/composer/agent-controls/plugin-toolbar-slot.tsx
+++ b/packages/app/src/composer/agent-controls/plugin-toolbar-slot.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from "react";
 import { type LayoutChangeEvent, View } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
+import { RetainedPanelActivity } from "@/components/retained-panel";
 import { TOOLBAR_CONTROL_GAP } from "@/components/ui/control-geometry";
 import { isWeb } from "@/constants/platform";
 import { PluginComposerItems } from "@/plugins/composer-items";
@@ -29,7 +30,7 @@ export function usePluginToolbarWidth(): {
  * is an arbitrary component, so its width is known only from rendering it, and it is always the
  * toolbar form that is measured: the width never depends on the density it decides, so moving the
  * items to the overflow sheet cannot change the answer. Out of the row, the same node stays
- * mounted and measured, unseen and out of reach.
+ * mounted and measured, unseen and out of reach, and inactive so an open picker closes with it.
  */
 export function PluginToolbarSlot({
   serverId,
@@ -54,7 +55,9 @@ export function PluginToolbarSlot({
       importantForAccessibility={inline ? "auto" : "no-hide-descendants"}
       aria-hidden={!inline}
     >
-      <PluginComposerItems serverId={serverId} surface="toolbar" />
+      <RetainedPanelActivity active={inline}>
+        <PluginComposerItems serverId={serverId} surface="toolbar" />
+      </RetainedPanelActivity>
     </View>
   );
 }