feat: model list

frontend/packages/inspector/src/components/chat/ChatSetup.tsx

@@ -1,10 +1,17 @@
-import type { AgentModeInfo } from "sandbox-agent";
+import type { AgentModelInfo, AgentModeInfo } from "sandbox-agent";
 
 const ChatSetup = ({
   agentMode,
   permissionMode,
   model,
   variant,
+  modelOptions,
+  defaultModel,
+  modelsLoading,
+  modelsError,
+  variantOptions,
+  defaultVariant,
+  supportsVariants,
   activeModes,
   hasSession,
   modesLoading,
@@ -18,6 +25,13 @@ const ChatSetup = ({
   permissionMode: string;
   model: string;
   variant: string;
+  modelOptions: AgentModelInfo[];
+  defaultModel: string;
+  modelsLoading: boolean;
+  modelsError: string | null;
+  variantOptions: string[];
+  defaultVariant: string;
+  supportsVariants: boolean;
   activeModes: AgentModeInfo[];
   hasSession: boolean;
   modesLoading: boolean;
@@ -27,6 +41,16 @@ const ChatSetup = ({
   onModelChange: (value: string) => void;
   onVariantChange: (value: string) => void;
 }) => {
+  const showModelSelect = modelsLoading || Boolean(modelsError) || modelOptions.length > 0;
+  const hasModelOptions = modelOptions.length > 0;
+  const showVariantSelect =
+    supportsVariants && (modelsLoading || Boolean(modelsError) || variantOptions.length > 0);
+  const hasVariantOptions = variantOptions.length > 0;
+  const modelCustom =
+    model && hasModelOptions && !modelOptions.some((entry) => entry.id === model);
+  const variantCustom =
+    variant && hasVariantOptions && !variantOptions.includes(variant);
+
   return (
     <div className="setup-row">
       <div className="setup-field">
@@ -71,26 +95,82 @@ const ChatSetup = ({
 
       <div className="setup-field">
         <span className="setup-label">Model</span>
-        <input
-          className="setup-input"
-          value={model}
-          onChange={(e) => onModelChange(e.target.value)}
-          placeholder="Model"
-          title="Model"
-          disabled={!hasSession}
-        />
+        {showModelSelect ? (
+          <select
+            className="setup-select"
+            value={model}
+            onChange={(e) => onModelChange(e.target.value)}
+            title="Model"
+            disabled={!hasSession || modelsLoading || Boolean(modelsError)}
+          >
+            {modelsLoading ? (
+              <option value="">Loading models...</option>
+            ) : modelsError ? (
+              <option value="">{modelsError}</option>
+            ) : (
+              <>
+                <option value="">
+                  {defaultModel ? `Default (${defaultModel})` : "Default"}
+                </option>
+                {modelCustom && <option value={model}>{model} (custom)</option>}
+                {modelOptions.map((entry) => (
+                  <option key={entry.id} value={entry.id}>
+                    {entry.name ?? entry.id}
+                  </option>
+                ))}
+              </>
+            )}
+          </select>
+        ) : (
+          <input
+            className="setup-input"
+            value={model}
+            onChange={(e) => onModelChange(e.target.value)}
+            placeholder="Model"
+            title="Model"
+            disabled={!hasSession}
+          />
+        )}
       </div>
 
       <div className="setup-field">
         <span className="setup-label">Variant</span>
-        <input
-          className="setup-input"
-          value={variant}
-          onChange={(e) => onVariantChange(e.target.value)}
-          placeholder="Variant"
-          title="Variant"
-          disabled={!hasSession}
-        />
+        {showVariantSelect ? (
+          <select
+            className="setup-select"
+            value={variant}
+            onChange={(e) => onVariantChange(e.target.value)}
+            title="Variant"
+            disabled={!hasSession || !supportsVariants || modelsLoading || Boolean(modelsError)}
+          >
+            {modelsLoading ? (
+              <option value="">Loading variants...</option>
+            ) : modelsError ? (
+              <option value="">{modelsError}</option>
+            ) : (
+              <>
+                <option value="">
+                  {defaultVariant ? `Default (${defaultVariant})` : "Default"}
+                </option>
+                {variantCustom && <option value={variant}>{variant} (custom)</option>}
+                {variantOptions.map((entry) => (
+                  <option key={entry} value={entry}>
+                    {entry}
+                  </option>
+                ))}
+              </>
+            )}
+          </select>
+        ) : (
+          <input
+            className="setup-input"
+            value={variant}
+            onChange={(e) => onVariantChange(e.target.value)}
+            placeholder={supportsVariants ? "Variant" : "Variants unsupported"}
+            title="Variant"
+            disabled={!hasSession || !supportsVariants}
+          />
+        )}
       </div>
     </div>
   );