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
2026-01-04 16:53:44 +02:00
parent 45b3d1d920
commit b0bfa739e1
6 changed files with 150 additions and 2 deletions
@@ -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>
+  );
+};