Standardize model and effort selectors to use same dropdown pattern

Author: charlesvien

apps/code/src/renderer/features/sessions/components/ReasoningLevelSelector.tsx

@@ -1,6 +1,6 @@
 import type { SessionConfigOption } from "@agentclientprotocol/sdk";
-import { Brain } from "@phosphor-icons/react";
-import { Flex, Select, Text } from "@radix-ui/themes";
+import { Brain, CaretDown, Check } from "@phosphor-icons/react";
+import { Button, DropdownMenu, Flex, Text } from "@radix-ui/themes";
 import { flattenSelectOptions } from "../stores/sessionStore";
 
 interface ReasoningLevelSelectorProps {
@@ -10,6 +10,16 @@ interface ReasoningLevelSelectorProps {
   disabled?: boolean;
 }
 
+const triggerStyle = {
+  fontSize: "var(--font-size-1)",
+  color: "var(--gray-11)",
+  padding: "4px 8px",
+  height: "auto",
+  minHeight: "unset",
+  gap: "6px",
+  userSelect: "none" as const,
+};
+
 export function ReasoningLevelSelector({
   thoughtOption,
   adapter,
@@ -27,24 +37,9 @@ export function ReasoningLevelSelector({
     options.find((opt) => opt.value === activeLevel)?.name ?? activeLevel;
 
   return (
-    <Select.Root
-      value={activeLevel}
-      onValueChange={(value) => onChange?.(value)}
-      disabled={disabled}
-      size="1"
-    >
-      <Select.Trigger
-        variant="ghost"
-        style={{
-          fontSize: "var(--font-size-1)",
-          color: "var(--gray-11)",
-          padding: "4px 8px",
-          height: "auto",
-          minHeight: "unset",
-          gap: "6px",
-        }}
-      >
-        <Flex align="center" gap="1">
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger disabled={disabled}>
+        <Button variant="ghost" color="gray" size="1" style={triggerStyle}>
           <Brain
             size={14}
             weight="regular"
@@ -53,15 +48,34 @@ export function ReasoningLevelSelector({
           <Text size="1">
             {adapter === "codex" ? "Reasoning" : "Effort"}: {activeLabel}
           </Text>
-        </Flex>
-      </Select.Trigger>
-      <Select.Content position="popper" sideOffset={4}>
+          <CaretDown
+            size={10}
+            weight="bold"
+            style={{ color: "var(--gray-9)", flexShrink: 0 }}
+          />
+        </Button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content align="start" sideOffset={4} size="1">
         {options.map((level) => (
-          <Select.Item key={level.value} value={level.value}>
-            {level.name}
-          </Select.Item>
+          <DropdownMenu.Item
+            key={level.value}
+            onSelect={() => onChange?.(level.value)}
+          >
+            <Flex align="center" gap="2" style={{ minWidth: "100px" }}>
+              <Check
+                size={12}
+                weight="bold"
+                style={{
+                  flexShrink: 0,
+                  opacity: level.value === activeLevel ? 1 : 0,
+                }}
+              />
+              <Text size="1">{level.name}</Text>
+            </Flex>
+          </DropdownMenu.Item>
         ))}
-      </Select.Content>
-    </Select.Root>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
   );
 }

apps/code/src/renderer/features/sessions/components/UnifiedModelSelector.tsx

@@ -5,6 +5,7 @@ import type {
 import type { AgentAdapter } from "@features/settings/stores/settingsStore";
 import {
   ArrowsClockwise,
+  CaretDown,
   Check,
   Cpu,
   Robot,
@@ -74,6 +75,7 @@ export function UnifiedModelSelector({
     height: "auto",
     minHeight: "unset",
     gap: "6px",
+    userSelect: "none" as const,
   };
 
   if (isConnecting) {
@@ -122,6 +124,11 @@ export function UnifiedModelSelector({
             {ADAPTER_ICONS[adapter]}
           </Flex>
           <Text size="1">{currentLabel ?? "Model"}</Text>
+          <CaretDown
+            size={10}
+            weight="bold"
+            style={{ color: "var(--gray-9)", flexShrink: 0 }}
+          />
         </Button>
       </DropdownMenu.Trigger>