feat(multi-run): Agent Selector (#103)

* Add Agent Selector

* Send on Enter

* Allow multi run with 1 Model for Agent Manager

* Update packages/ui/src/stores/useMultiRunStore.ts

* Update Changelog

packages/ui/src/components/multirun/AgentSelector.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useConfigStore } from '@/stores/useConfigStore';
+
+export interface AgentSelectorProps {
+  /** Currently selected agent name (empty string for no agent) */
+  value: string;
+  /** Called when agent selection changes */
+  onChange: (agentName: string) => void;
+  /** Optional className for the trigger */
+  className?: string;
+  /** Whether the selector is disabled */
+  disabled?: boolean;
+  /** ID for accessibility */
+  id?: string;
+}
+
+/**
+ * Agent selector dropdown for selecting an agent for multi-run sessions.
+ * Uses getVisibleAgents from useConfigStore to show available agents.
+ */
+export const AgentSelector: React.FC<AgentSelectorProps> = ({
+  value,
+  onChange,
+  className,
+  disabled,
+  id,
+}) => {
+  const getVisibleAgents = useConfigStore((state) => state.getVisibleAgents);
+  const loadAgents = useConfigStore((state) => state.loadAgents);
+  const agents = getVisibleAgents();
+
+  // Load agents on mount
+  React.useEffect(() => {
+    loadAgents();
+  }, [loadAgents]);
+
+  // Use empty string to represent "no agent" selection
+  const handleValueChange = (newValue: string) => {
+    onChange(newValue === '__none__' ? '' : newValue);
+  };
+
+  // Convert empty value to __none__ for the Select component (which doesn't handle empty strings well)
+  const selectValue = value || '__none__';
+
+  return (
+    <Select
+      value={selectValue}
+      onValueChange={handleValueChange}
+      disabled={disabled}
+    >
+      <SelectTrigger
+        id={id}
+        size="lg"
+        className={className ?? 'max-w-full typography-meta text-foreground'}
+      >
+        <SelectValue placeholder="Select an agent (optional)" />
+      </SelectTrigger>
+      <SelectContent fitContent>
+        <SelectGroup>
+          <SelectLabel>Default</SelectLabel>
+          <SelectItem value="__none__" className="w-auto whitespace-nowrap">
+            No agent (default)
+          </SelectItem>
+        </SelectGroup>
+
+        {agents.length > 0 && (
+          <SelectGroup>
+            <SelectLabel>Agents</SelectLabel>
+            {agents.map((agent) => (
+              <SelectItem
+                key={agent.name}
+                value={agent.name}
+                className="w-auto whitespace-nowrap"
+              >
+                {agent.name}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        )}
+      </SelectContent>
+    </Select>
+  );
+};

packages/ui/src/components/multirun/MultiRunLauncher.tsx

@@ -13,6 +13,7 @@ import { useUIStore } from '@/stores/useUIStore';
 import type { CreateMultiRunParams, MultiRunModelSelection } from '@/types/multirun';
 import { ModelMultiSelect, generateInstanceId, type ModelSelectionWithId } from './ModelMultiSelect';
 import { BranchSelector, useBranchOptions } from './BranchSelector';
+import { AgentSelector } from './AgentSelector';
 
 /** Max file size in bytes (10MB) */
 const MAX_FILE_SIZE = 10 * 1024 * 1024;
@@ -50,6 +51,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
   const [name, setName] = React.useState('');
   const [prompt, setPrompt] = React.useState(() => initialPrompt ?? '');
   const [selectedModels, setSelectedModels] = React.useState<ModelSelectionWithId[]>([]);
+  const [selectedAgent, setSelectedAgent] = React.useState<string>('');
   const [attachedFiles, setAttachedFiles] = React.useState<MultiRunAttachedFile[]>([]);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
@@ -191,6 +193,7 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
         name: name.trim(),
         prompt: prompt.trim(),
         models: modelsForStore,
+        agent: selectedAgent || undefined,
         worktreeBaseBranch,
         files: filesForStore.length > 0 ? filesForStore : undefined,
       };
@@ -303,6 +306,24 @@ export const MultiRunLauncher: React.FC<MultiRunLauncherProps> = ({
               </div>
             </div>
 
+            {/* Agent selection */}
+            <div className="space-y-2">
+              <label
+                className="typography-ui-label font-medium text-foreground"
+                htmlFor="multirun-agent"
+              >
+                Agent
+              </label>
+              <AgentSelector
+                value={selectedAgent}
+                onChange={setSelectedAgent}
+                id="multirun-agent"
+              />
+              <p className="typography-micro text-muted-foreground">
+                Optional agent to use for all runs.
+              </p>
+            </div>
+
             {/* Prompt */}
             <div className="space-y-2">
               <label htmlFor="prompt" className="typography-ui-label font-medium text-foreground">

packages/ui/src/components/multirun/index.ts

@@ -1,3 +1,4 @@
 export { MultiRunLauncher } from './MultiRunLauncher';
 export { ModelMultiSelect, ModelChip, generateInstanceId, type ModelSelectionWithId, type ModelSelection, type ModelMultiSelectProps } from './ModelMultiSelect';
 export { BranchSelector, useBranchOptions, type BranchSelectorProps, type BranchSelectorState, type WorktreeBaseOption } from './BranchSelector';
+export { AgentSelector, type AgentSelectorProps } from './AgentSelector';