feat(byok): add model selection to BYOK settings panel and overlay custom model on route resolution

memento-note/components/ai/byok-settings-panel.tsx

@@ -42,12 +42,40 @@ function providerLabel(t: (key: string) => string, provider: string): string {
   return translated === key ? provider : translated
 }
 
+const PROVIDER_MODEL_SUGGESTIONS: Record<string, string[]> = {
+  openai: ['gpt-4o-mini', 'gpt-4o', 'gpt-3.5-turbo'],
+  anthropic: ['claude-3-5-sonnet-latest', 'claude-3-5-haiku-latest', 'claude-3-opus-latest'],
+  google: ['gemini-1.5-flash', 'gemini-1.5-pro', 'gemini-2.0-flash-exp'],
+  deepseek: ['deepseek-chat', 'deepseek-coder'],
+  minimax: ['abab6.5-chat', 'abab6.5s-chat'],
+  mistral: ['mistral-small-latest', 'mistral-medium-latest', 'mistral-large-latest'],
+  glm: ['glm-4', 'glm-4-flash'],
+  openrouter: ['openai/gpt-4o-mini', 'anthropic/claude-3.5-sonnet', 'deepseek/deepseek-chat'],
+  custom: [],
+}
+
 export function ByokSettingsPanel() {
   const { t } = useLanguage()
   const queryClient = useQueryClient()
   const [provider, setProvider] = useState('')
   const [apiKey, setApiKey] = useState('')
   const [alias, setAlias] = useState('')
+  const [model, setModel] = useState('')
+  const [customModel, setCustomModel] = useState('')
+  const [isCustomModel, setIsCustomModel] = useState(false)
+
+  const handleProviderChange = (p: string) => {
+    setProvider(p)
+    const sug = PROVIDER_MODEL_SUGGESTIONS[p] || []
+    if (sug.length > 0) {
+      setModel(sug[0])
+      setIsCustomModel(false)
+    } else {
+      setModel('')
+      setCustomModel('')
+      setIsCustomModel(true)
+    }
+  }
 
   const { data, isLoading, error } = useQuery({
     queryKey: ['user', 'api-keys'],
@@ -61,10 +89,16 @@ export function ByokSettingsPanel() {
 
   const saveMutation = useMutation({
     mutationFn: async () => {
+      const resolvedModel = isCustomModel ? customModel : model
       const res = await fetch('/api/user/api-keys', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ provider, apiKey, alias: alias || undefined }),
+        body: JSON.stringify({
+          provider,
+          apiKey,
+          alias: alias || undefined,
+          model: resolvedModel || undefined,
+        }),
       })
       const body = await res.json().catch(() => ({}))
       if (!res.ok) {
@@ -77,6 +111,9 @@ export function ByokSettingsPanel() {
       setApiKey('')
       setAlias('')
       setProvider('')
+      setModel('')
+      setCustomModel('')
+      setIsCustomModel(false)
       invalidate()
     },
     onError: (err: Error) => {
@@ -171,7 +208,7 @@ export function ByokSettingsPanel() {
               <Label htmlFor="byok-provider" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.provider')}</Label>
               <Select
                 value={provider}
-                onValueChange={setProvider}
+                onValueChange={handleProviderChange}
                 disabled={saveMutation.isPending}
               >
                 <SelectTrigger id="byok-provider">
@@ -197,6 +234,64 @@ export function ByokSettingsPanel() {
               />
             </div>
           </div>
+
+          {/* Model Selection Row */}
+          {provider && (
+            <div className="grid gap-4 sm:grid-cols-2 pt-2 border-t border-border/40">
+              <div className="space-y-2">
+                <Label htmlFor="byok-model-select" className="text-[10px] font-bold uppercase tracking-widest text-concrete">Modèle de l'IA (Optionnel)</Label>
+                {PROVIDER_MODEL_SUGGESTIONS[provider] && PROVIDER_MODEL_SUGGESTIONS[provider].length > 0 ? (
+                  <Select
+                    value={isCustomModel ? 'custom' : model}
+                    onValueChange={(val) => {
+                      if (val === 'custom') {
+                        setIsCustomModel(true)
+                      } else {
+                        setIsCustomModel(false)
+                        setModel(val)
+                      }
+                    }}
+                    disabled={saveMutation.isPending}
+                  >
+                    <SelectTrigger id="byok-model-select">
+                      <SelectValue placeholder="Choisir un modèle..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {PROVIDER_MODEL_SUGGESTIONS[provider].map((m) => (
+                        <SelectItem key={m} value={m}>
+                          {m}
+                        </SelectItem>
+                      ))}
+                      <SelectItem value="custom">Autre / Modèle personnalisé...</SelectItem>
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <div className="text-xs text-concrete py-2 italic">
+                    Spécifiez le modèle ci-contre si besoin.
+                  </div>
+                )}
+              </div>
+
+              {(isCustomModel || !(PROVIDER_MODEL_SUGGESTIONS[provider] && PROVIDER_MODEL_SUGGESTIONS[provider].length > 0)) && (
+                <div className="space-y-2">
+                  <Label htmlFor="byok-model-custom" className="text-[10px] font-bold uppercase tracking-widest text-concrete">Saisir le nom du modèle</Label>
+                  <Input
+                    id="byok-model-custom"
+                    value={isCustomModel ? customModel : model}
+                    onChange={(e) => {
+                      if (isCustomModel) {
+                        setCustomModel(e.target.value)
+                      } else {
+                        setModel(e.target.value)
+                      }
+                    }}
+                    placeholder="ex. deepseek-reasoner, minimax-abab6.5"
+                    disabled={saveMutation.isPending}
+                  />
+                </div>
+              )}
+            </div>
+          )}
           <div className="space-y-2">
             <Label htmlFor="byok-key" className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byokSettings.apiKey')}</Label>
             <Input
@@ -236,9 +331,14 @@ export function ByokSettingsPanel() {
             >
               <div className="min-w-0">
                 <div className="text-[13px] font-bold text-ink">{providerLabel(t, key.provider)}</div>
-                {key.alias ? (
-                  <p className="text-[10px] text-concrete truncate">{key.alias}</p>
-                ) : null}
+                <div className="flex flex-col gap-0.5 mt-0.5">
+                  {key.alias ? (
+                    <p className="text-[10px] text-concrete truncate">{key.alias}</p>
+                  ) : null}
+                  {key.model ? (
+                    <p className="text-[9px] text-brand-accent font-mono truncate">Modèle : {key.model}</p>
+                  ) : null}
+                </div>
               </div>
               <div className="flex items-center gap-3 shrink-0">
                 <label className="relative inline-flex items-center cursor-pointer">

memento-note/lib/ai/provider-for-user.ts

@@ -25,6 +25,7 @@ async function resolveProviderForLane(
   const cfg = { ...config };
   const route = resolveAiRoute(lane, cfg);
   let usedByok = false;
+  let byokModel: string | null = null;
 
   if (billingUserId) {
     const overlay = await applyByokToConfig(
@@ -34,17 +35,22 @@ async function resolveProviderForLane(
     );
     Object.assign(cfg, overlay.config);
     usedByok = overlay.usedByok;
+    byokModel = overlay.model;
   }
 
+  const resolvedModel = byokModel && byokModel.trim() !== '' ? byokModel : route.modelName;
+
   const provider = getProviderInstance(
     route.providerType as ProviderType,
     cfg,
-    route.modelName,
+    resolvedModel,
     route.embeddingModelName,
     route.ollamaBaseUrl,
   );
 
-  return { provider, usedByok, route };
+  const updatedRoute = { ...route, modelName: resolvedModel };
+
+  return { provider, usedByok, route: updatedRoute };
 }
 
 async function getChatProviderForBillingUser(

memento-note/lib/byok.ts

@@ -51,12 +51,12 @@ export async function getActiveByokKey(userId: string, provider: string) {
 export async function resolveByokApiKey(
   userId: string,
   providerType: string,
-): Promise<{ plaintext: string; provider: string } | null> {
+): Promise<{ plaintext: string; provider: string; model: string | null } | null> {
   const row = await getActiveByokKey(userId, providerType);
   if (!row) return null;
   try {
     const plaintext = await decryptApiKey(row.encryptedKey);
-    return { plaintext, provider: row.provider };
+    return { plaintext, provider: row.provider, model: row.model };
   } catch (err) {
     console.error('[byok] Failed to decrypt key for provider', providerType, err);
     return null;
@@ -67,16 +67,17 @@ export async function applyByokToConfig(
   billingUserId: string,
   providerType: string,
   config: Record<string, string>,
-): Promise<{ config: Record<string, string>; usedByok: boolean }> {
+): Promise<{ config: Record<string, string>; usedByok: boolean; model: string | null }> {
   const byok = await resolveByokApiKey(billingUserId, providerType);
-  if (!byok) return { config, usedByok: false };
+  if (!byok) return { config, usedByok: false, model: null };
 
   const { apiKeyConfigKey } = getProviderConfigKeys(providerType);
-  if (!apiKeyConfigKey) return { config, usedByok: false };
+  if (!apiKeyConfigKey) return { config, usedByok: false, model: null };
 
   return {
     config: { ...config, [apiKeyConfigKey]: byok.plaintext },
     usedByok: true,
+    model: byok.model,
   };
 }