feat(desktop): add radio group button for switching agent mode

packages/app/src/components/prompt-input.tsx

@@ -42,6 +42,7 @@ import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
+import { RadioGroup } from "@opencode-ai/ui/radio-group"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover, ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
@@ -1656,20 +1657,38 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       title={language.t("command.agent.cycle")}
                       keybind={command.keybind("agent.cycle")}
                     >
-                      <Select
-                        size="normal"
-                        options={props.controls.agents.options}
-                        current={props.controls.agents.current}
-                        onSelect={(value) => {
-                          props.controls.agents.select(value)
-                          restoreFocus()
-                        }}
-                        class="capitalize max-w-[160px] text-text-base"
-                        valueClass="truncate text-13-regular text-text-base"
-                        triggerStyle={control()}
-                        triggerProps={{ "data-action": "prompt-agent" }}
-                        variant="ghost"
-                      />
+                      <Show
+                        when={props.controls.agents.options.length === 2}
+                        fallback={
+                          <Select
+                            size="normal"
+                            options={props.controls.agents.options}
+                            current={props.controls.agents.current}
+                            onSelect={(value) => {
+                              props.controls.agents.select(value)
+                              restoreFocus()
+                            }}
+                            class="capitalize max-w-[160px] text-text-base"
+                            valueClass="truncate text-13-regular text-text-base"
+                            triggerStyle={control()}
+                            triggerProps={{ "data-action": "prompt-agent" }}
+                            variant="ghost"
+                          />
+                        }
+                      >
+                        <RadioGroup
+                          size="small"
+                          options={props.controls.agents.options}
+                          current={props.controls.agents.current}
+                          onSelect={(value) => {
+                            if (!value) return
+                            props.controls.agents.select(value)
+                            restoreFocus()
+                          }}
+                          class="capitalize"
+                          data-action="prompt-agent"
+                        />
+                      </Show>
                     </TooltipKeybind>
                   </div>
                 </Show>

packages/session-ui/src/v2/components/prompt-input/index.tsx

@@ -8,6 +8,7 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { SegmentedControlItemV2, SegmentedControlV2 } from "@opencode-ai/ui/v2/segmented-control-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { AttachmentCardV2 } from "../attachment-card-v2"
 import { CommentCardV2 } from "../comment-card-v2"
@@ -212,7 +213,14 @@ export function PromptInputV2(props: PromptInputV2Props) {
             />
             <Show when={view.agent}>
               {(control) => (
-                <PromptInputV2ConfiguredSelect title="Choose agent" keybind={["Mod", "."]} control={control()} />
+                <Show
+                  when={control().options().length === 2}
+                  fallback={
+                    <PromptInputV2ConfiguredSelect title="Choose agent" keybind={["Mod", "."]} control={control()} />
+                  }
+                >
+                  <PromptInputV2SegmentedToggle title="Choose agent" keybind={["Mod", "."]} control={control()} />
+                </Show>
               )}
             </Show>
             <Show
@@ -531,6 +539,43 @@ function PromptInputV2ConfiguredSelect(props: {
   )
 }
 
+function PromptInputV2SegmentedToggle(props: {
+  title: string
+  keybind?: string[]
+  control: PromptInputV2SelectControl
+}) {
+  const keybind = () => props.control.keybind?.() ?? props.keybind ?? []
+  return (
+    <TooltipV2
+      placement="top"
+      value={
+        <>
+          {props.title}
+          <KeybindV2 keys={keybind()} variant="neutral" />
+        </>
+      }
+    >
+      <SegmentedControlV2
+        value={props.control.current()}
+        onChange={(value) => {
+          if (value === null) return
+          props.control.onSelect(value)
+        }}
+        class="segmented-control-v2--compact"
+        aria-label={props.title}
+      >
+        <For each={props.control.options()}>
+          {(option) => (
+            <SegmentedControlItemV2 value={option.id} class="capitalize">
+              {option.label}
+            </SegmentedControlItemV2>
+          )}
+        </For>
+      </SegmentedControlV2>
+    </TooltipV2>
+  )
+}
+
 export function PromptInputV2Select(props: {
   title: string
   keybind?: string[]

packages/ui/src/v2/components/segmented-control-v2.css

@@ -2,6 +2,18 @@
   width: 100%;
 }
 
+[data-slot="segmented-control-v2"].segmented-control-v2--compact {
+  width: fit-content;
+  height: 24px;
+}
+
+.segmented-control-v2--compact [data-slot="segmented-control-v2-item"] {
+  flex: 0 0 auto;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
 [data-slot="segmented-control-v2"] {
   box-sizing: border-box;
   display: flex;