Use a dropdown for default send behavior (#3644)

* fix(app): make default send a dropdown

Keep the compact three-choice setting behind one anchored control while preserving the selected behavior and persistence flow.

* test(app): select default send behavior from its menu

The agent-message submission coverage configures send behavior through Settings, so it follows the dropdown interaction rather than the removed segmented buttons.

packages/app/e2e/browser/agent-message-submission.spec.ts

@@ -315,10 +315,11 @@ async function configureInterruptInSettings(page: Page): Promise<void> {
 
 async function selectSendBehaviorInSettings(
   page: Page,
-  buttonName: string,
+  behaviorLabel: string,
   stored: string,
 ): Promise<void> {
-  await page.getByRole("button", { name: buttonName, exact: true }).click();
+  await page.getByRole("button", { name: /^Default send: / }).click();
+  await page.getByRole("menuitem", { name: behaviorLabel, exact: true }).click();
   await expect
     .poll(async () => {
       const raw = await page.evaluate(() => localStorage.getItem("@paseo:app-settings"));

packages/app/e2e/browser/settings-toggle-tab-regression.spec.ts

@@ -70,9 +70,28 @@ test.describe("Settings toggle tab regression", () => {
       await pressSettingsToggleShortcut(page);
       await expect(page).toHaveURL(/\/settings\/general$/);
 
-      await page.getByRole("button", { name: "Queue", exact: true }).click();
+      const defaultSendTrigger = page.getByRole("button", {
+        name: "Default send: Steer",
+        exact: true,
+      });
+      await expect(defaultSendTrigger).toBeVisible();
+      await expect(page.getByRole("menuitem", { name: "Queue", exact: true })).toHaveCount(0);
+
+      await defaultSendTrigger.click();
+      await expect(page.getByRole("menuitem", { name: "Steer", exact: true })).toHaveAttribute(
+        "aria-checked",
+        "true",
+      );
+      await page.getByRole("menuitem", { name: "Queue", exact: true }).click();
       await expectSendBehavior(page, "queue");
-      await page.getByRole("button", { name: "Interrupt", exact: true }).click();
+      const queuedDefaultSendTrigger = page.getByRole("button", {
+        name: "Default send: Queue",
+        exact: true,
+      });
+      await expect(queuedDefaultSendTrigger).toBeVisible();
+
+      await queuedDefaultSendTrigger.click();
+      await page.getByRole("menuitem", { name: "Interrupt", exact: true }).click();
       await expectSendBehavior(page, "interrupt");
 
       await pressSettingsToggleShortcut(page);

packages/app/src/screens/settings-screen.tsx

@@ -284,6 +284,24 @@ interface ServiceUrlBehaviorMenuItemProps {
   onChange: (value: ServiceUrlBehavior) => void;
 }
 
+interface SendBehaviorMenuItemProps {
+  value: SendBehavior;
+  label: string;
+  selected: boolean;
+  onChange: (value: SendBehavior) => void;
+}
+
+function SendBehaviorMenuItem({ value, label, selected, onChange }: SendBehaviorMenuItemProps) {
+  const handleSelect = useCallback(() => {
+    onChange(value);
+  }, [onChange, value]);
+  return (
+    <DropdownMenuItem selected={selected} onSelect={handleSelect}>
+      {label}
+    </DropdownMenuItem>
+  );
+}
+
 function ServiceUrlBehaviorMenuItem({
   value,
   label,
@@ -336,6 +354,9 @@ function GeneralSection({
   const { t, i18n } = useTranslation();
   const activeLocale = getActiveLocale(i18n.language);
   const sendBehaviorOptions = useMemo(() => getSendBehaviorOptions(t), [t]);
+  const selectedSendBehaviorLabel =
+    sendBehaviorOptions.find((option) => option.value === settings.sendBehavior)?.label ??
+    settings.sendBehavior;
   const sendBehaviorDescriptionKey = `settings.general.defaultSend.descriptions.${settings.sendBehavior}`;
   const selectedLanguageOption = LANGUAGE_OPTIONS.find(
     (option) => option.value === settings.language,
@@ -380,12 +401,26 @@ function GeneralSection({
             <Text style={settingsStyles.rowTitle}>{t("settings.general.defaultSend.label")}</Text>
             <Text style={settingsStyles.rowHint}>{t(sendBehaviorDescriptionKey)}</Text>
           </View>
-          <SegmentedControl
+          <DropdownMenu>
-            size="sm"
+            <DropdownTrigger
-            value={settings.sendBehavior}
+              accessibilityRole="button"
-            onValueChange={handleSendBehaviorChange}
+              accessibilityLabel={`${t("settings.general.defaultSend.label")}: ${selectedSendBehaviorLabel}`}
-            options={sendBehaviorOptions}
+              style={themeTriggerStyle}
+            >
+              <Text style={styles.themeTriggerText}>{selectedSendBehaviorLabel}</Text>
+            </DropdownTrigger>
+            <DropdownMenuContent side="bottom" align="end" width={200}>
+              {sendBehaviorOptions.map((option) => (
+                <SendBehaviorMenuItem
+                  key={option.value}
+                  value={option.value}
+                  label={option.label}
+                  selected={settings.sendBehavior === option.value}
+                  onChange={handleSendBehaviorChange}
                 />
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
         </View>
         <View style={[settingsStyles.row, settingsStyles.rowBorder]}>
           <View style={settingsStyles.rowContent}>