fix(ui): thème, textes et lisibilité restants de la revue

Les boutons suivent la couleur d’apparence, les libellés trop petits ou trop techniques sont clarifiés, et le catalogue des fournisseurs se met à jour tout seul.

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -16,26 +16,16 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { cn } from '@/lib/utils'
-
-// ─── Provider display info ────────────────────────────────────────────────────
-const PROVIDER_INFO: Record<string, { name: string; hint: string }> = {
-  openai:           { name: 'OpenAI',               hint: 'GPT-4o, GPT-4' },
-  anthropic:        { name: 'Anthropic',             hint: 'Claude 3.5 Sonnet, Haiku' },
-  minimax:          { name: 'MiniMax',               hint: 'MiniMax-M2.7, M2.5' },
-  google:           { name: 'Google AI',             hint: 'Gemini 1.5 Flash, Pro' },
-  deepseek:         { name: 'DeepSeek',              hint: 'DeepSeek Chat, Reasoner' },
-  openrouter:       { name: 'OpenRouter',            hint: 'Multi-provider access' },
-  mistral:          { name: 'Mistral AI',             hint: 'Mistral Small, Large' },
-  glm:              { name: 'GLM (Zhipu)',           hint: 'GLM-4, GLM-4-Flash' },
-  zai:              { name: 'Zuki Journey',          hint: 'OpenAI/Anthropic proxy' },
-  anthropic_custom: { name: 'Anthropic (custom)',    hint: 'Anthropic-compatible proxy' },
-  custom_openai:    { name: 'Compatible OpenAI',     hint: 'Any OpenAI-compatible proxy' },
-  custom_anthropic: { name: 'Compatible Anthropic',  hint: 'Any Anthropic-compatible proxy' },
-  custom:           { name: 'Custom API',            hint: 'Your own endpoint' },
-}
+import { providerDisplayName } from '@/lib/ai/provider-labels'
+import { PROVIDER_MODEL_SUGGESTIONS } from '@/lib/ai/models-list'
 
 function displayName(provider: string): string {
-  return PROVIDER_INFO[provider]?.name ?? provider
+  return providerDisplayName(provider)
+}
+
+function providerHint(provider: string): string {
+  const models = PROVIDER_MODEL_SUGGESTIONS[provider] ?? []
+  return models.slice(0, 2).join(', ')
 }
 
 const MANUAL_MODEL_PROVIDERS = new Set(['custom'])
@@ -155,20 +145,20 @@ function EditKeyForm({
   const showModelInput = manualModel || (!loadingModels && models.length === 0)
 
   return (
-    <div className="mt-2 border border-violet-500/20 rounded-xl bg-violet-500/5 p-4 space-y-3">
-      <p className="text-[10px] font-bold uppercase tracking-widest text-violet-600 dark:text-violet-400">
+    <div className="mt-2 border border-brand-accent/20 rounded-xl bg-brand-accent/5 p-4 space-y-3">
+      <p className="text-[13px] font-semibold uppercase tracking-wider text-brand-accent">
         {t('byok.editLabel', { name: displayName(savedKey.provider) })}
       </p>
 
       {/* Alias */}
       <div className="grid gap-3 sm:grid-cols-2">
         <div className="space-y-1">
-          <Label htmlFor={`edit-alias-${savedKey.provider}`} className="text-[9px] font-semibold uppercase tracking-widest text-concrete">{t('byok.aliasLabel')}</Label>
+          <Label htmlFor={`edit-alias-${savedKey.provider}`} className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.aliasLabel')}</Label>
           <Input id={`edit-alias-${savedKey.provider}`} value={alias} onChange={(e) => setAlias(e.target.value)} placeholder={t('byok.aliasPlaceholder')} />
         </div>
         {needsUrl && (
           <div className="space-y-1">
-            <Label htmlFor={`edit-baseurl-${savedKey.provider}`} className="text-[9px] font-semibold uppercase tracking-widest text-concrete">{t('byok.apiUrl')}</Label>
+            <Label htmlFor={`edit-baseurl-${savedKey.provider}`} className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.apiUrl')}</Label>
             <Input id={`edit-baseurl-${savedKey.provider}`} value={baseUrl} onChange={(e) => setBaseUrl(e.target.value.trim())} placeholder="https://api.example.com/v1" />
           </div>
         )}
@@ -176,7 +166,7 @@ function EditKeyForm({
 
       {/* Model */}
       <div className="space-y-1">
-        <Label htmlFor={`edit-model-${savedKey.provider}`} className="text-[9px] font-semibold uppercase tracking-widest text-concrete">{t('byok.model')}</Label>
+        <Label htmlFor={`edit-model-${savedKey.provider}`} className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.model')}</Label>
         {showModelDropdown ? (
           <Select value={model} onValueChange={setModel}>
             <SelectTrigger id={`edit-model-${savedKey.provider}`}><SelectValue placeholder={t('byok.choose')} /></SelectTrigger>
@@ -189,7 +179,7 @@ function EditKeyForm({
 
       {/* Key rotation (optional) */}
       <div className="space-y-1">
-        <Label htmlFor={`edit-key-${savedKey.provider}`} className="text-[9px] font-semibold uppercase tracking-widest text-concrete">
+        <Label htmlFor={`edit-key-${savedKey.provider}`} className="text-[13px] font-medium uppercase tracking-wider text-concrete">
           {t('byok.newKey')} <span className="normal-case font-normal text-concrete">{t('byok.newKeyHint')}</span>
         </Label>
         <Input
@@ -205,7 +195,7 @@ function EditKeyForm({
       {/* Test result */}
       {testResult && (
         <div className={cn(
-          'flex items-start gap-2 rounded-lg px-3 py-2 text-[10px] border',
+          'flex items-start gap-2 rounded-lg px-3 py-2 text-[13px] border',
           testResult.ok ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-700 dark:text-emerald-400' : 'bg-rose-500/10 border-rose-500/20 text-rose-700 dark:text-rose-400'
         )}>
           {testResult.ok ? <CheckCircle2 size={12} className="shrink-0 mt-0.5" /> : <XCircle size={12} className="shrink-0 mt-0.5" />}
@@ -224,7 +214,7 @@ function EditKeyForm({
           type="button"
           disabled={!newKey || newKey.length < 8 || testing}
           onClick={testModel}
-          className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-[9px] font-bold uppercase tracking-[0.1em] border border-border bg-white dark:bg-white/5 hover:border-violet-400 transition-colors disabled:opacity-40 disabled:pointer-events-none"
+          className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-[13px] font-semibold uppercase tracking-[0.1em] border border-border bg-white dark:bg-white/5 hover:border-brand-accent/50 transition-colors disabled:opacity-40 disabled:pointer-events-none"
         >
           {testing ? <Loader2 size={11} className="animate-spin" /> : <FlaskConical size={11} />}
           {t('byok.test')}
@@ -233,7 +223,7 @@ function EditKeyForm({
           type="button"
           disabled={saveMutation.isPending}
           onClick={() => saveMutation.mutate()}
-          className="flex-1 py-2 rounded-lg text-[9px] font-bold uppercase tracking-[0.12em] bg-ink text-paper shadow hover:scale-[1.01] active:scale-[0.99] transition-all disabled:opacity-40"
+          className="flex-1 py-2 rounded-lg text-[13px] font-semibold uppercase tracking-[0.12em] bg-brand-accent text-white shadow hover:scale-[1.01] active:scale-[0.99] transition-all disabled:opacity-40"
         >
           {saveMutation.isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : t('byok.saveChanges')}
         </Button>
@@ -286,13 +276,6 @@ export function ByokSettingsPanel() {
     setTestResult(null)
     setModel('')
     setModels([])
-    if (MANUAL_MODEL_PROVIDERS.has(p)) return
-    setLoadingModels(true)
-    try {
-      const list = await fetchModelsFromServer(p)
-      setModels(list)
-      if (list.length > 0) setModel(list[0])
-    } finally { setLoadingModels(false) }
   }
 
   async function refreshModels(p: string, key: string, _baseUrl?: string) {
@@ -403,10 +386,10 @@ export function ByokSettingsPanel() {
 
       {/* Header */}
       <div className="flex items-start gap-5">
-        <div className="p-3 bg-violet-500/10 rounded-2xl text-violet-500 border border-violet-500/20"><KeyRound size={18} /></div>
+        <div className="p-3 bg-brand-accent/10 rounded-2xl text-brand-accent border border-brand-accent/20"><KeyRound size={18} /></div>
         <div className="flex-1 space-y-1">
           <h3 className="text-[13px] font-bold text-ink">{t('byokSettings.title')}</h3>
-          <p className="text-[10px] text-concrete leading-relaxed">{t('byokSettings.description')}</p>
+          <p className="text-sm text-concrete leading-relaxed">{t('byokSettings.description')}</p>
         </div>
       </div>
 
@@ -419,7 +402,7 @@ export function ByokSettingsPanel() {
             : 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20'
         )}>
           {activeKey ? (
-            <><Zap size={14} className="shrink-0" /><span>{t('byok.byokActive')} · <strong>{displayName(activeKey.provider)}</strong>{activeKey.model && <> · <code className="font-mono text-[10px]">{activeKey.model}</code></>}{activeKey.alias && <> · {activeKey.alias}</>}</span></>
+            <><Zap size={14} className="shrink-0" /><span>{t('byok.byokActive')} · <strong>{displayName(activeKey.provider)}</strong>{activeKey.model && <> · <code className="font-mono text-[13px]">{activeKey.model}</code></>}{activeKey.alias && <> · {activeKey.alias}</>}</span></>
           ) : (
             <><Shield size={14} className="shrink-0" /><span>{t('byok.noActiveKey')}</span></>
           )}
@@ -433,7 +416,7 @@ export function ByokSettingsPanel() {
           {/* Saved keys */}
           {keys.length > 0 && (
             <div className="space-y-2">
-              <p className="text-[10px] font-bold uppercase tracking-widest text-concrete">{t('byok.savedKeys')}</p>
+              <p className="text-[13px] font-semibold uppercase tracking-wider text-concrete">{t('byok.savedKeys')}</p>
               <ul className="space-y-1">
                 {keys.map((key) => (
                   <li key={key.provider}>
@@ -447,9 +430,9 @@ export function ByokSettingsPanel() {
                         <div>
                           <div className="text-[13px] font-semibold text-ink leading-tight">{displayName(key.provider)}</div>
                           <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                            {key.model && <code className="text-[9px] font-mono text-brand-accent bg-brand-accent/10 px-1.5 py-0.5 rounded">{key.model}</code>}
-                            {key.alias && <span className="text-[9px] text-concrete">{key.alias}</span>}
-                            <span className={cn('text-[9px] font-medium', key.isActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-concrete')}>
+                            {key.model && <code className="text-[13px] font-mono text-brand-accent bg-brand-accent/10 px-1.5 py-0.5 rounded">{key.model}</code>}
+                            {key.alias && <span className="text-[13px] text-concrete">{key.alias}</span>}
+                            <span className={cn('text-[13px] font-medium', key.isActive ? 'text-emerald-600 dark:text-emerald-400' : 'text-concrete')}>
                               {key.isActive ? t('byok.activeStatus') : t('byok.inactiveStatus')}
                             </span>
                           </div>
@@ -462,7 +445,7 @@ export function ByokSettingsPanel() {
                           className={cn(
                             'h-7 w-7 rounded-lg flex items-center justify-center transition-colors',
                             editingProvider === key.provider
-                              ? 'text-violet-600 bg-violet-500/10 border border-violet-500/30'
+                              ? 'text-brand-accent bg-brand-accent/10 border border-brand-accent/30'
                               : 'text-concrete hover:text-ink hover:bg-muted border border-transparent'
                           )}
                           onClick={() => setEditingProvider(editingProvider === key.provider ? null : key.provider)}
@@ -492,7 +475,7 @@ export function ByokSettingsPanel() {
 
                     {/* Inline edit form */}
                     {editingProvider === key.provider && (
-                      <div className="border border-violet-500/20 border-t-0 rounded-b-xl overflow-hidden">
+                      <div className="border border-brand-accent/20 border-t-0 rounded-b-xl overflow-hidden">
                         <EditKeyForm
                           savedKey={key}
                           onDone={() => setEditingProvider(null)}
@@ -508,40 +491,40 @@ export function ByokSettingsPanel() {
 
           {/* Add key form */}
           <div className="space-y-4 border border-border/60 rounded-2xl p-5">
-            <p className="text-[10px] font-bold uppercase tracking-widest text-concrete">
+            <p className="text-[13px] font-semibold uppercase tracking-wider text-concrete">
               {keys.length > 0 ? t('byok.addOrReplace') : t('byok.connectProvider')}
             </p>
 
             <div className="grid gap-4 sm:grid-cols-2">
               <div className="space-y-1.5">
-                <Label htmlFor="byok-provider" className="text-[10px] font-semibold uppercase tracking-widest text-concrete">{t('byokSettings.provider')}</Label>
+                <Label htmlFor="byok-provider" className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byokSettings.provider')}</Label>
                 <Select value={provider} onValueChange={onProviderChange} disabled={saveMutation.isPending}>
                   <SelectTrigger id="byok-provider"><SelectValue placeholder={t('byok.chooseProvider')} /></SelectTrigger>
                   <SelectContent>
                     {allowed.map((p) => (
                       <SelectItem key={p} value={p}>
                         <span className="font-medium">{displayName(p)}</span>
-                        {PROVIDER_INFO[p]?.hint && <span className="ml-2 text-[10px] text-concrete">{PROVIDER_INFO[p].hint}</span>}
+                        {providerHint(p) && <span className="ml-2 text-[13px] text-concrete">{providerHint(p)}</span>}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               </div>
               <div className="space-y-1.5">
-                <Label htmlFor="byok-alias" className="text-[10px] font-semibold uppercase tracking-widest text-concrete">{t('byok.aliasLabel')} <span className="normal-case font-normal">{t('byok.optional')}</span></Label>
+                <Label htmlFor="byok-alias" className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.aliasLabel')} <span className="normal-case font-normal">{t('byok.optional')}</span></Label>
                 <Input id="byok-alias" value={alias} onChange={(e) => setAlias(e.target.value)} placeholder={t('byok.aliasPlaceholder')} disabled={saveMutation.isPending} />
               </div>
             </div>
 
             {NEEDS_BASE_URL.has(provider) && (
               <div className="space-y-1.5">
-                <Label htmlFor="byok-baseurl" className="text-[10px] font-semibold uppercase tracking-widest text-concrete">{t('byok.apiUrl')}</Label>
+                <Label htmlFor="byok-baseurl" className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.apiUrl')}</Label>
                 <Input id="byok-baseurl" value={baseUrl} onChange={(e) => setBaseUrl(e.target.value.trim())} placeholder="https://api.example.com/v1" disabled={saveMutation.isPending} />
               </div>
             )}
 
             <div className="space-y-1.5">
-              <Label htmlFor="byok-key" className="text-[10px] font-semibold uppercase tracking-widest text-concrete">{t('byok.apiKey')}</Label>
+              <Label htmlFor="byok-key" className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.apiKey')}</Label>
               <div className="flex gap-2">
                 <div className="relative flex-1">
                   <Input
@@ -554,8 +537,8 @@ export function ByokSettingsPanel() {
                 </div>
                 <button
                   type="button" disabled={!provider || apiKey.length < 8 || verifying} onClick={verifyKey}
-                  className={cn('shrink-0 px-4 py-2 rounded-xl text-[10px] font-bold uppercase tracking-[0.1em] transition-all border disabled:opacity-40 disabled:pointer-events-none',
-                    keyOk ? 'bg-emerald-500/10 border-emerald-500/40 text-emerald-700 dark:text-emerald-400' : 'bg-white dark:bg-white/5 border-border hover:border-violet-400')}
+                  className={cn('shrink-0 px-4 py-2 rounded-xl text-[13px] font-semibold uppercase tracking-[0.1em] transition-all border disabled:opacity-40 disabled:pointer-events-none',
+                    keyOk ? 'bg-emerald-500/10 border-emerald-500/40 text-emerald-700 dark:text-emerald-400' : 'bg-white dark:bg-white/5 border-border hover:border-brand-accent/50')}
                 >
                   {verifying ? <Loader2 className="h-4 w-4 animate-spin" /> : keyOk ? <CheckCircle2 className="h-4 w-4" /> : t('byok.verify')}
                 </button>
@@ -564,7 +547,7 @@ export function ByokSettingsPanel() {
 
             {provider && (
               <div className="space-y-1.5">
-                <Label htmlFor="byok-model" className="text-[10px] font-semibold uppercase tracking-widest text-concrete">{t('byok.model')}</Label>
+                <Label htmlFor="byok-model" className="text-[13px] font-medium uppercase tracking-wider text-concrete">{t('byok.model')}</Label>
                 {loadingModels ? (
                   <div className="flex items-center gap-2 text-xs text-concrete py-2"><Loader2 className="h-3 w-3 animate-spin" />{t('byok.fetchingModels')}</div>
                 ) : showModelDropdown ? (
@@ -593,13 +576,13 @@ export function ByokSettingsPanel() {
             <div className="flex gap-2">
               <button
                 type="button" disabled={!canTest || testing || saveMutation.isPending} onClick={testModel}
-                className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-[0.1em] transition-all border bg-white dark:bg-white/5 border-border hover:border-violet-400 disabled:opacity-40 disabled:pointer-events-none"
+                className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-[13px] font-semibold uppercase tracking-[0.1em] transition-all border bg-white dark:bg-white/5 border-border hover:border-brand-accent/50 disabled:opacity-40 disabled:pointer-events-none"
               >
                 {testing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <FlaskConical size={13} />}{t('byok.test')}
               </button>
               <Button
                 type="button" disabled={saveDisabled} onClick={() => saveMutation.mutate()}
-                className="flex-1 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-[0.15em] transition-all duration-200 bg-ink text-paper shadow-lg hover:scale-[1.01] active:scale-[0.99] disabled:opacity-40 disabled:pointer-events-none disabled:shadow-none"
+                className="flex-1 py-2.5 rounded-xl text-[13px] font-semibold uppercase tracking-[0.15em] transition-all duration-200 bg-brand-accent text-white shadow-lg hover:scale-[1.01] active:scale-[0.99] disabled:opacity-40 disabled:pointer-events-none disabled:shadow-none"
               >
                 <div className="flex items-center justify-center gap-2">
                   {saveMutation.isPending && <Loader2 className="h-4 w-4 animate-spin" />}