fix(quick-pane): restore model catalog controls

ui/src/App.tsx

@@ -11,6 +11,13 @@ import { CommandFormDialog } from "./components/CommandFormDialog";
 import type { RpcCommand } from "./commands/rpc";
 import { SessionPicker } from "./components/SessionPicker";
 import { SessionTabs } from "./components/SessionTabs";
+import {
+	catalogModels,
+	getModelCatalog,
+	modelIdentity,
+	modelIdentityFromValue,
+	modelIdentityValue,
+} from "./model-catalog";
 import type {
 	DirectorySession,
 	DirectoryWorkspace,
@@ -161,6 +168,7 @@ export default function App() {
 	);
 	const [quickPaneSettingsStatus, setQuickPaneSettingsStatus] = useState("");
 	const [quickPaneSettingsError, setQuickPaneSettingsError] = useState<string>();
+	const [modelCatalog, setModelCatalog] = useState<Model[]>([]);
 	const setRuntimeStatus = (runtimeId: string, detail: string) =>
 		setRuntimeStatuses((current) => ({ ...current, [runtimeId]: detail }));
 	const clearRuntimeStatus = (runtimeId: string) =>
@@ -220,6 +228,16 @@ export default function App() {
 						`Could not load Quick Pane settings: ${String(error)}`,
 					);
 			});
+		void getModelCatalog()
+			.then((models) => {
+				if (active) setModelCatalog(models);
+			})
+			.catch((error) => {
+				if (active)
+					setQuickPaneSettingsError(
+						`Could not load model catalog: ${String(error)}`,
+					);
+			});
 		return () => {
 			active = false;
 		};
@@ -691,6 +709,30 @@ export default function App() {
 			.map((entry) => entry.runtimeId as string),
 	);
 	const sameDirectoryCollision = directory && directory.openCount > 1;
+	const quickPaneModelOptions = catalogModels(modelCatalog, [
+		{
+			provider: quickPaneSettings.provider,
+			modelId: quickPaneSettings.model,
+		},
+		{
+			provider: quickPaneSettings.followUpProvider,
+			modelId: quickPaneSettings.followUpModel,
+		},
+	]);
+	const quickModelValue =
+		quickPaneSettings.provider && quickPaneSettings.model
+			? modelIdentityValue({
+					provider: quickPaneSettings.provider,
+					modelId: quickPaneSettings.model,
+				})
+			: "";
+	const followUpModelValue =
+		quickPaneSettings.followUpProvider && quickPaneSettings.followUpModel
+			? modelIdentityValue({
+					provider: quickPaneSettings.followUpProvider,
+					modelId: quickPaneSettings.followUpModel,
+				})
+			: "";
 	return (
 		<main
 			className="app-shell"
@@ -873,53 +915,69 @@ export default function App() {
 										}
 									/>
 								</label>
-								<label>
-									Quick provider
-									<input
-										value={quickPaneSettings.provider}
-										onChange={(event) =>
-											setQuickPaneSettings({
-												...quickPaneSettings,
-												provider: event.currentTarget.value,
-											})
-										}
-									/>
-								</label>
 								<label>
 									Quick model
-									<input
-										value={quickPaneSettings.model}
-										onChange={(event) =>
+									<select
+										value={quickModelValue}
+										onChange={(event) => {
+											const identity = modelIdentityFromValue(event.currentTarget.value);
+											if (!identity) return;
 											setQuickPaneSettings({
 												...quickPaneSettings,
-												model: event.currentTarget.value,
-											})
-										}
-									/>
-								</label>
-								<label>
-									Follow-up provider
-									<input
-										value={quickPaneSettings.followUpProvider}
-										onChange={(event) =>
-											setQuickPaneSettings({
-												...quickPaneSettings,
-												followUpProvider: event.currentTarget.value,
-											})
-										}
-									/>
+												provider: identity.provider,
+												model: identity.modelId,
+											});
+										}}
+									>
+										<option value="" disabled>
+											Select model
+										</option>
+										{quickPaneModelOptions.map((model) => {
+											const identity = modelIdentity(model);
+											if (!identity) return null;
+											return (
+												<option
+													key={modelIdentityValue(identity)}
+													value={modelIdentityValue(identity)}
+												>
+													{identity.provider}/{identity.modelId}
+												</option>
+											);
+										})}
+									</select>
+									<small>Provider comes from selected catalog model.</small>
 								</label>
 								<label>
 									Follow-up model
-									<input
-										value={quickPaneSettings.followUpModel}
-										onChange={(event) =>
+									<select
+										value={followUpModelValue}
+										onChange={(event) => {
+											const identity = modelIdentityFromValue(event.currentTarget.value);
+											if (!identity) return;
 											setQuickPaneSettings({
 												...quickPaneSettings,
-												followUpModel: event.currentTarget.value,
-											})
-										}
-									/>
+												followUpProvider: identity.provider,
+												followUpModel: identity.modelId,
+											});
+										}}
+									>
+										<option value="" disabled>
+											Select model
+										</option>
+										{quickPaneModelOptions.map((model) => {
+											const identity = modelIdentity(model);
+											if (!identity) return null;
+											return (
+												<option
+													key={modelIdentityValue(identity)}
+													value={modelIdentityValue(identity)}
+												>
+													{identity.provider}/{identity.modelId}
+												</option>
+											);
+										})}
+									</select>
+									<small>Provider comes from selected catalog model.</small>
 								</label>
 								<label>
 									Maximum seconds