Add features & update project

apps/next/src/components/spoons/spoon-agent-settings-form.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import type { ProviderModelOption } from '@/lib/models-dev';
-import { useEffect, useState } from 'react';
-import { loadModelsDevOptions } from '@/lib/models-dev';
+import { useState } from 'react';
 import { useMutation, useQuery } from 'convex/react';
 import { Bot } from 'lucide-react';
 import { toast } from 'sonner';
@@ -53,6 +51,7 @@ export const SpoonAgentSettingsForm = ({
 }) => {
   const update = useMutation(api.spoonAgentSettings.update);
   const profiles = useQuery(api.aiProviderProfiles.listMine, {}) ?? [];
+  const modelCatalog = useQuery(api.aiProviderModels.listAvailableForUser);
   const configuredProfiles = profiles.filter(
     (profile) => profile.enabled && profile.configured,
   );
@@ -99,8 +98,12 @@ export const SpoonAgentSettingsForm = ({
         ? defaultProfile?._id
         : aiProviderProfileId),
   );
-  const [availableModels, setAvailableModels] = useState<ProviderModelOption[]>(
-    [],
+  const selectedModelProfile = modelCatalog?.profiles.find(
+    (profile) =>
+      profile.profileId ===
+      (aiProviderProfileId === '__default'
+        ? defaultProfile?._id
+        : aiProviderProfileId),
   );
   const [agentModel, setAgentModel] = useState(
     settings?.aiProviderProfileId ? settings.agentModel : '',
@@ -115,42 +118,17 @@ export const SpoonAgentSettingsForm = ({
         : settings.reasoningEffort,
   );
 
-  useEffect(() => {
-    if (!selectedProfile?.configured) {
-      return;
-    }
-    let cancelled = false;
-    loadModelsDevOptions(selectedProfile.provider)
-      .then((models) => {
-        if (cancelled) return;
-        setAvailableModels(models);
-        setAgentModel((current) =>
-          current && models.some((model) => model.id === current)
-            ? current
-            : models.some((model) => model.id === selectedProfile.defaultModel)
-              ? selectedProfile.defaultModel
-              : (models[0]?.id ?? ''),
-        );
-        setReasoningEffort(
-          selectedProfile.reasoningEffort === 'none'
-            ? 'minimal'
-            : selectedProfile.reasoningEffort,
-        );
-      })
-      .catch((error: unknown) => {
-        console.error(error);
-        if (!cancelled) setAvailableModels([]);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    selectedProfile?.configured,
-    selectedProfile?.defaultModel,
-    selectedProfile?.provider,
-    selectedProfile?.reasoningEffort,
-  ]);
-  const selectableModels = selectedProfile?.configured ? availableModels : [];
+  const selectableModels = selectedModelProfile?.configured
+    ? selectedModelProfile.models
+    : [];
+  const selectedAgentModel =
+    agentModel && selectableModels.some((model) => model.id === agentModel)
+      ? agentModel
+      : selectableModels.some(
+            (model) => model.id === selectedModelProfile?.defaultModel,
+          )
+        ? (selectedModelProfile?.defaultModel ?? '')
+        : (selectableModels[0]?.id ?? '');
 
   const save = async () => {
     try {
@@ -163,9 +141,7 @@ export const SpoonAgentSettingsForm = ({
         installCommand: installCommand || undefined,
         checkCommand: checkCommand || undefined,
         testCommand: testCommand || undefined,
-        agentModel: agentModel.trim()
-          ? agentModel
-          : (selectableModels[0]?.id ?? undefined),
+        agentModel: selectedAgentModel || undefined,
         reasoningEffort,
         envFilePath: envFilePath as
           | '.env'
@@ -249,7 +225,8 @@ export const SpoonAgentSettingsForm = ({
               </SelectContent>
             </Select>
             <p className='text-muted-foreground text-xs'>
-              OpenCode jobs and maintenance review threads use this profile.
+              Workspaces use this profile. Use default resolves to your account
+              default provider.
             </p>
           </div>
           <div className='grid gap-2'>
@@ -271,7 +248,7 @@ export const SpoonAgentSettingsForm = ({
           <div className='grid gap-2'>
             <Label htmlFor='agentModel'>Model</Label>
             <Select
-              value={agentModel}
+              value={selectedAgentModel}
               onValueChange={setAgentModel}
               disabled={!selectableModels.length}
             >
@@ -288,8 +265,8 @@ export const SpoonAgentSettingsForm = ({
             </Select>
             {!selectableModels.length ? (
               <p className='text-muted-foreground text-xs'>
-                Configure an enabled AI provider profile in Settings before
-                choosing a model.
+                Configure an enabled AI provider profile with saved model
+                options in Settings before choosing a model.
               </p>
             ) : null}
           </div>
@@ -423,7 +400,7 @@ export const SpoonAgentSettingsForm = ({
           onClick={save}
           disabled={
             !selectedProfile?.configured ||
-            !selectableModels.some((model) => model.id === agentModel)
+            !selectableModels.some((model) => model.id === selectedAgentModel)
           }
         >
           Save agent settings