From 421ce75733a3d5c8e3ea10c3558622046f10d0d1 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Mon, 3 Aug 2026 03:05:25 -0600
Subject: [PATCH] Dedupe AgentTypeCombobox into AgentTypeSelect

AgentTypeCombobox in automations-form-fields.tsx duplicated ~90 lines of
AgentTypeSelect (identical trigger, key handling, and Command dropdown).
AgentTypeSelect gains an optional label prop (default "Type") so both
automations call sites keep their "Agent type" label; the duplicate is
deleted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/components/app/agent-type-select.tsx  |   4 +-
 .../app/automations-form-fields.tsx           | 121 ++----------------
 .../app/automations-launch-dialog.tsx         |  16 +--
 3 files changed, 20 insertions(+), 121 deletions(-)

diff --git a/apps/web/src/components/app/agent-type-select.tsx b/apps/web/src/components/app/agent-type-select.tsx
index 98522651c..dc66fa3b6 100644
--- a/apps/web/src/components/app/agent-type-select.tsx
+++ b/apps/web/src/components/app/agent-type-select.tsx
@@ -20,6 +20,7 @@ type AgentTypeSelectProps = {
   onChange: (type: AgentType) => void;
   agentTypes: AgentType[];
   onOpenChange?: (open: boolean) => void;
+  label?: string;
 };
 
 export function AgentTypeSelect({
@@ -27,6 +28,7 @@ export function AgentTypeSelect({
   onChange,
   agentTypes,
   onOpenChange,
+  label = "Type",
 }: AgentTypeSelectProps): JSX.Element {
   const sortedTypes = useMemo(() => sortAgentTypes(agentTypes), [agentTypes]);
   const [open, setOpen] = useState(false);
@@ -46,7 +48,7 @@ export function AgentTypeSelect({
 
   return (
     <div className="relative space-y-1" ref={cmdRef}>
-      <label className="text-sm text-muted-foreground">Type</label>
+      <label className="text-sm text-muted-foreground">{label}</label>
       <button
         ref={triggerRef}
         type="button"
diff --git a/apps/web/src/components/app/automations-form-fields.tsx b/apps/web/src/components/app/automations-form-fields.tsx
index 950480181..b83e0c165 100644
--- a/apps/web/src/components/app/automations-form-fields.tsx
+++ b/apps/web/src/components/app/automations-form-fields.tsx
@@ -1,116 +1,17 @@
-import { useMemo, useCallback, useRef, useState } from "react";
-import { Check, ChevronDown, GitBranch, Paperclip } from "lucide-react";
+import { useMemo } from "react";
+import { GitBranch, Paperclip } from "lucide-react";
 
+import { AgentTypeSelect } from "@/components/app/agent-type-select";
 import { BranchSelect } from "@/components/app/branch-select";
 import { useCwdHistory } from "@/components/app/create-agent-dialog-utils";
 import { PathInput } from "@/components/app/path-input";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Command,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  AGENT_TYPE_LABELS,
-  type AgentType,
-  sortAgentTypes,
-} from "@/lib/agent-types";
-import { useClickOutside } from "@/hooks/use-click-outside";
+import { type AgentType } from "@/lib/agent-types";
 import { parseTemplateArgs } from "@/hooks/use-templates";
 import { cn } from "@/lib/utils";
 
-export function AgentTypeCombobox({
-  value,
-  onChange,
-  agentTypes,
-}: {
-  value: AgentType;
-  onChange: (value: AgentType) => void;
-  agentTypes: AgentType[];
-}): JSX.Element {
-  const sorted = useMemo(() => sortAgentTypes(agentTypes), [agentTypes]);
-  const [open, setOpen] = useState(false);
-  const cmdRef = useRef<HTMLDivElement>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const close = useCallback(() => setOpen(false), []);
-  useClickOutside(cmdRef, open, close);
-
-  return (
-    <div className="relative" ref={cmdRef}>
-      <button
-        ref={triggerRef}
-        type="button"
-        role="combobox"
-        tabIndex={0}
-        aria-expanded={open}
-        onClick={() => setOpen((prev) => !prev)}
-        onKeyDown={(e) => {
-          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            if (!open) setOpen(true);
-          }
-        }}
-        className={cn(
-          "flex h-9 w-full items-center justify-between rounded-md border border-white/[0.12] bg-white/[0.04] px-3 py-2 text-sm shadow-[inset_0_2px_6px_rgba(0,0,0,0.3)] backdrop-blur-md",
-          "ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring"
-        )}
-      >
-        {AGENT_TYPE_LABELS[value]}
-        <ChevronDown
-          className={cn(
-            "h-4 w-4 text-muted-foreground transition-transform",
-            open && "rotate-180"
-          )}
-        />
-      </button>
-      {open ? (
-        <div className="absolute left-0 right-0 z-[80] mt-1 rounded-md border border-white/[0.2] bg-[hsl(var(--card))] shadow-[0_16px_64px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.15)] backdrop-blur-2xl">
-          <Command
-            shouldFilter={false}
-            ref={(el) => {
-              if (el) requestAnimationFrame(() => el.focus());
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Escape") {
-                e.preventDefault();
-                setOpen(false);
-                requestAnimationFrame(() => triggerRef.current?.focus());
-              }
-            }}
-          >
-            <CommandList>
-              <CommandGroup>
-                {sorted.map((t) => (
-                  <CommandItem
-                    key={t}
-                    value={t}
-                    onSelect={() => {
-                      onChange(t);
-                      setOpen(false);
-                      requestAnimationFrame(() => triggerRef.current?.focus());
-                    }}
-                  >
-                    <Check
-                      className={cn(
-                        "mr-2 h-3 w-3 shrink-0",
-                        t === value ? "opacity-100" : "opacity-0"
-                      )}
-                    />
-                    {AGENT_TYPE_LABELS[t]}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
 export function TemplateWorktreeOption({
   checked,
   cwd,
@@ -259,14 +160,12 @@ export function TemplateConfigFields({
 
   return (
     <div className="space-y-3">
-      <div className="space-y-1">
-        <label className="text-sm text-muted-foreground">Agent type</label>
-        <AgentTypeCombobox
-          value={agentType}
-          onChange={onAgentTypeChange}
-          agentTypes={enabledAgentTypes}
-        />
-      </div>
+      <AgentTypeSelect
+        label="Agent type"
+        value={agentType}
+        onChange={onAgentTypeChange}
+        agentTypes={enabledAgentTypes}
+      />
 
       <div className="space-y-1">
         <label className="text-sm text-muted-foreground">Name</label>
diff --git a/apps/web/src/components/app/automations-launch-dialog.tsx b/apps/web/src/components/app/automations-launch-dialog.tsx
index cc25c4702..e08d0f2d3 100644
--- a/apps/web/src/components/app/automations-launch-dialog.tsx
+++ b/apps/web/src/components/app/automations-launch-dialog.tsx
@@ -13,7 +13,7 @@ import { toast } from "sonner";
 import { ArgInput } from "@/components/app/arg-input";
 import { ContextPicker } from "@/components/app/context-picker";
 import { startupFileKey } from "@/components/app/create-agent-dialog-clipboard";
-import { AgentTypeCombobox } from "@/components/app/automations-form-fields";
+import { AgentTypeSelect } from "@/components/app/agent-type-select";
 import { ActivityBars } from "@/components/ui/activity-bars";
 import { Button } from "@/components/ui/button";
 import {
@@ -247,14 +247,12 @@ function LaunchTemplateDialogContent({
         onDrop={showMedia ? handleDrop : undefined}
       >
         {!isTerminal ? (
-          <div className="space-y-2">
-            <label className="text-sm text-muted-foreground">Agent type</label>
-            <AgentTypeCombobox
-              value={agentType}
-              onChange={setAgentType}
-              agentTypes={agentTypes}
-            />
-          </div>
+          <AgentTypeSelect
+            label="Agent type"
+            value={agentType}
+            onChange={setAgentType}
+            agentTypes={agentTypes}
+          />
         ) : null}
 
         {args.length > 0 ? (