@nextclaw/ui 0.13.4 → 0.13.6

package/src/shared/components/config/provider-form-support.ts

@@ -1,17 +1,25 @@
 import { t } from '@/shared/lib/i18n';
 import type { getLanguage } from '@/shared/lib/i18n';
-import type { ProviderConfigUpdate, ProviderConfigView, ThinkingLevel } from '@/shared/lib/api';
+import type { ProviderConfigView, ThinkingLevel } from '@/shared/lib/api';
+import {
+  normalizeModelConfigMap,
+  normalizeThinkingLevels,
+  parseThinkingLevel,
+  THINKING_LEVELS,
+  type ModelConfig as ModelConfigEntry
+} from '@/shared/lib/provider-models';
 
 type WireApiType = 'auto' | 'chat' | 'responses';
-type ModelConfig = Record<string, {
-  thinking?: { supported: ThinkingLevel[]; default?: ThinkingLevel | null };
-  vision?: boolean;
-}>;
+type ModelConfig = Record<string, ModelConfigEntry>;
 type ProviderAuthMethodOption = {
   id: string;
 };
 
 const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
+  providerId: '',
+  providerType: null,
+  isBuiltInType: false,
+  isCustom: true,
   enabled: true,
   displayName: '',
   apiKeySet: false,
@@ -23,9 +31,6 @@ const EMPTY_PROVIDER_CONFIG: ProviderConfigView = {
   modelConfig: {}
 };
 
-const THINKING_LEVELS: ThinkingLevel[] = ['off', 'minimal', 'low', 'medium', 'high', 'adaptive', 'xhigh'];
-const THINKING_LEVEL_SET = new Set<string>(THINKING_LEVELS);
-
 function normalizeHeaders(input: Record<string, string> | null | undefined): Record<string, string> | null {
   if (!input) {
     return null;
@@ -107,76 +112,20 @@ function modelListsEqual(left: string[], right: string[]): boolean {
   return left.every((item, index) => item === right[index]);
 }
 
-function resolveEditableModels(_defaultModels: string[], savedModels: string[]): string[] {
-  return savedModels;
-}
-
-function serializeModelsForSave(models: string[], _defaultModels: string[]): string[] {
-  return models;
+function resolveEditableModels(defaultModels: string[], savedModels: string[]): string[] {
+  void defaultModels;
+  return normalizeModelList(savedModels);
 }
 
-function applyEnabledPatch(payload: ProviderConfigUpdate, enabled: boolean, currentEnabled: boolean): void {
-  if (enabled !== currentEnabled) {
-    payload.enabled = enabled;
-  }
-}
-
-function parseThinkingLevel(value: unknown): ThinkingLevel | null {
-  if (typeof value !== 'string') {
-    return null;
-  }
-  const normalized = value.trim().toLowerCase();
-  if (!normalized) {
-    return null;
-  }
-  return THINKING_LEVEL_SET.has(normalized) ? (normalized as ThinkingLevel) : null;
-}
-
-function normalizeThinkingLevels(values: unknown): ThinkingLevel[] {
-  if (!Array.isArray(values)) {
-    return [];
-  }
-  const deduped: ThinkingLevel[] = [];
-  for (const value of values) {
-    const level = parseThinkingLevel(value);
-    if (!level || deduped.includes(level)) {
-      continue;
+function serializeModelsForSave(models: string[], providerId: string): string[] {
+  const normalizedModels = normalizeModelList(models);
+  return normalizedModels.map((model) => {
+    const trimmed = model.trim();
+    if (!trimmed || trimmed.startsWith(`${providerId}/`)) {
+      return trimmed;
     }
-    deduped.push(level);
-  }
-  return deduped;
-}
-
-function normalizeModelConfig(
-  input: ProviderConfigView['modelConfig'],
-  aliases: string[]
-): ModelConfig {
-  if (!input) {
-    return {};
-  }
-  const normalized: ModelConfig = {};
-  for (const [rawModel, rawValue] of Object.entries(input)) {
-    const model = toProviderLocalModelId(rawModel, aliases);
-    if (!model) {
-      continue;
-    }
-    const entry: NonNullable<ModelConfig[string]> = {};
-    const supported = normalizeThinkingLevels(rawValue?.thinking?.supported);
-    if (supported.length > 0) {
-      const defaultLevel = parseThinkingLevel(rawValue?.thinking?.default);
-      entry.thinking =
-        defaultLevel && supported.includes(defaultLevel)
-          ? { supported, default: defaultLevel }
-          : { supported };
-    }
-    if (rawValue?.vision === true) {
-      entry.vision = true;
-    }
-    if (entry.thinking || entry.vision === true) {
-      normalized[model] = entry;
-    }
-  }
-  return normalized;
+    return `${providerId}/${trimmed}`;
+  });
 }
 
 function normalizeModelConfigForModels(modelConfig: ModelConfig, models: string[]): ModelConfig {
@@ -205,6 +154,17 @@ function normalizeModelConfigForModels(modelConfig: ModelConfig, models: string[
   return normalized;
 }
 
+function mergeModelConfig(
+  base: ProviderConfigView['modelConfig'],
+  override: ProviderConfigView['modelConfig'],
+  aliases: string[]
+): ModelConfig {
+  return {
+    ...normalizeModelConfigMap(base, aliases),
+    ...normalizeModelConfigMap(override, aliases)
+  };
+}
+
 function modelConfigEqual(left: ModelConfig, right: ModelConfig): boolean {
   const leftKeys = Object.keys(left).sort();
   const rightKeys = Object.keys(right).sort();
@@ -319,20 +279,20 @@ function shouldUsePillSelector(params: {
   hasDefault: boolean;
   optionCount: number;
 }): boolean {
-  return params.required && params.hasDefault && params.optionCount > 1 && params.optionCount <= 3;
+  const { required, hasDefault, optionCount } = params;
+  return required && hasDefault && optionCount > 1 && optionCount <= 3;
 }
 
 export type { ModelConfig, ProviderAuthMethodOption, WireApiType };
 export {
-  applyEnabledPatch,
   EMPTY_PROVIDER_CONFIG,
   formatThinkingLevelLabel,
   headersEqual,
   modelListsEqual,
   modelConfigEqual,
+  mergeModelConfig,
   normalizeHeaders,
   normalizeModelList,
-  normalizeModelConfig,
   normalizeModelConfigForModels,
   resolveEditableModels,
   resolvePreferredAuthMethodId,

package/src/shared/components/config/provider-form.tsx

@@ -3,12 +3,12 @@ import { useQueryClient } from '@tanstack/react-query';
 import { CircleDotDashed, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
-  useConfig,
-  useConfigMeta,
   useConfigSchema,
   useDeleteProvider,
   useImportProviderAuthFromCli,
   usePollProviderAuth,
+  useProviders,
+  useProviderTemplates,
   useStartProviderAuth,
   useTestProviderConnection,
   useUpdateProvider
@@ -26,20 +26,18 @@ import {
   ConfigSplitPaneBody,
   ConfigSplitPaneFooter,
   ConfigSplitPaneHeader
-} from '../config-split-page';
-import { ProviderAdvancedSettingsSection } from '../provider-advanced-settings-section';
-import { ProviderAuthSection } from '../provider-auth-section';
-import { ProviderEnabledField } from '../provider-enabled-field';
+} from '@/shared/components/config-split-page';
+import { ProviderAdvancedSettingsSection } from '@/shared/components/provider-advanced-settings-section';
+import { ProviderAuthSection } from '@/shared/components/provider-auth-section';
 import {
-  applyEnabledPatch,
   EMPTY_PROVIDER_CONFIG,
   formatThinkingLevelLabel,
   headersEqual,
   modelListsEqual,
   modelConfigEqual,
+  mergeModelConfig,
   normalizeHeaders,
   normalizeModelList,
-  normalizeModelConfig,
   normalizeModelConfigForModels,
   resolveEditableModels,
   resolvePreferredAuthMethodId,
@@ -51,8 +49,8 @@ import {
   type WireApiType
 } from './provider-form-support';
 import { ProviderModelsSection } from './provider-models-section';
-import type { PillSelectOption } from '../provider-pill-selector';
-import { ProviderStatusBadge } from '../provider-status-badge';
+import type { PillSelectOption } from '@/shared/components/provider-pill-selector';
+import { ProviderStatusBadge } from '@/shared/components/provider-status-badge';
 
 type ProviderFormProps = {
   providerName?: string;
@@ -61,8 +59,8 @@ type ProviderFormProps = {
 
 export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormProps) {
   const queryClient = useQueryClient();
-  const { data: config } = useConfig();
-  const { data: meta } = useConfigMeta();
+  const { data: providersView } = useProviders();
+  const { data: templatesView } = useProviderTemplates();
   const { data: schema } = useConfigSchema();
   const updateProvider = useUpdateProvider();
   const deleteProvider = useDeleteProvider();
@@ -72,7 +70,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const importProviderAuthFromCli = useImportProviderAuthFromCli();
 
   const [apiKey, setApiKey] = useState('');
-  const [enabled, setEnabled] = useState(true);
   const [apiBase, setApiBase] = useState('');
   const [extraHeaders, setExtraHeaders] = useState<Record<string, string> | null>(null);
   const [wireApi, setWireApi] = useState<WireApiType>('auto');
@@ -87,23 +84,23 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const [authMethodId, setAuthMethodId] = useState('');
   const authPollTimerRef = useRef<number | null>(null);
 
-  const providerSpec = meta?.providers.find((p) => p.name === providerName);
-  const providerConfig = providerName ? config?.providers[providerName] : null;
+  const providerConfig = providerName ? providersView?.providers[providerName] : null;
+  const providerSpec = templatesView?.providerTemplates.find((template) => template.providerType === providerConfig?.providerType);
   const resolvedProviderConfig = providerConfig ?? EMPTY_PROVIDER_CONFIG;
   const uiHints = schema?.uiHints;
-  const isCustomProvider = Boolean(providerSpec?.isCustom);
+  const isCustomProvider = Boolean(providerConfig?.isCustom);
   const apiKeyHint = providerName ? hintForPath(`providers.${providerName}.apiKey`, uiHints) : undefined;
   const apiBaseHint = providerName ? hintForPath(`providers.${providerName}.apiBase`, uiHints) : undefined;
   const extraHeadersHint = providerName ? hintForPath(`providers.${providerName}.extraHeaders`, uiHints) : undefined;
   const wireApiHint = providerName ? hintForPath(`providers.${providerName}.wireApi`, uiHints) : undefined;
-  const defaultDisplayName = providerSpec?.displayName || providerName || '';
+  const defaultDisplayName = providerSpec?.displayName || providerConfig?.displayName || providerName || '';
   const currentDisplayName = (resolvedProviderConfig.displayName || '').trim();
   const effectiveDisplayName = currentDisplayName || defaultDisplayName;
   const currentEnabled = resolvedProviderConfig.enabled !== false;
   const providerTitle = providerDisplayName.trim() || effectiveDisplayName || providerName || t('providersSelectPlaceholder');
   const providerModelAliases = useMemo(
-    () => normalizeModelList([providerSpec?.modelPrefix || providerName || '', providerName || '']),
-    [providerName, providerSpec?.modelPrefix]
+    () => normalizeModelList([providerSpec?.modelPrefix || providerSpec?.providerType || '', providerName || '']),
+    [providerName, providerSpec?.modelPrefix, providerSpec?.providerType]
   );
   const defaultApiBase = providerSpec?.defaultApiBase || '';
   const currentApiBase = resolvedProviderConfig.apiBase || defaultApiBase;
@@ -127,7 +124,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const currentModelConfig = useMemo(
     () =>
       normalizeModelConfigForModels(
-        normalizeModelConfig(resolvedProviderConfig.modelConfig ?? providerSpec?.modelConfig, providerModelAliases),
+        mergeModelConfig(providerSpec?.modelConfig, resolvedProviderConfig.modelConfig, providerModelAliases),
         currentEditableModels
       ),
     [currentEditableModels, providerModelAliases, providerSpec?.modelConfig, resolvedProviderConfig.modelConfig]
@@ -136,7 +133,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   const apiBaseHelpText =
     providerSpec?.apiBaseHelp?.[language] || providerSpec?.apiBaseHelp?.en || apiBaseHint?.help || t('providerApiBaseHelp');
   const providerAuth = providerSpec?.auth;
-  const providerAuthMethods = providerAuth?.methods ?? [];
+  const providerAuthMethods = useMemo(() => providerAuth?.methods ?? [], [providerAuth?.methods]);
   const supportsWireApi = Boolean(providerSpec?.supportsWireApi) || isCustomProvider;
   const providerAuthMethodOptions = useMemo(
     () =>
@@ -147,8 +144,8 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     [providerAuthMethods, language]
   );
   const preferredAuthMethodId = useMemo(
-    () => resolvePreferredAuthMethodId({ providerName, methods: providerAuthMethods, defaultMethodId: providerAuth?.defaultMethodId, language }),
-    [providerName, providerAuth?.defaultMethodId, providerAuthMethods, language]
+    () => resolvePreferredAuthMethodId({ providerName: providerSpec?.providerType ?? providerName, methods: providerAuthMethods, defaultMethodId: providerAuth?.defaultMethodId, language }),
+    [providerName, providerAuth?.defaultMethodId, providerAuthMethods, language, providerSpec?.providerType]
   );
   const resolvedAuthMethodId = useMemo(() => {
     if (!providerAuthMethods.length) {
@@ -207,7 +204,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
               setAuthStatusMessage(t('providerAuthCompleted'));
               toast.success(t('providerAuthCompleted'));
               queryClient.invalidateQueries({ queryKey: ['config'] });
-              queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+              queryClient.invalidateQueries({ queryKey: ['providers'] });
               return;
             }
             setAuthSessionId(null);
@@ -230,7 +227,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   useEffect(() => {
     if (!providerName) {
       setApiKey('');
-      setEnabled(true);
       setApiBase('');
       setExtraHeaders(null);
       setWireApi('auto');
@@ -246,7 +242,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     }
 
     setApiKey('');
-    setEnabled(currentEnabled);
     setApiBase(currentApiBase);
     setExtraHeaders(resolvedProviderConfig.extraHeaders || null);
     setWireApi(currentWireApi);
@@ -261,7 +256,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   }, [
     providerName,
     currentApiBase,
-    currentEnabled,
     resolvedProviderConfig.extraHeaders,
     currentWireApi,
     currentEditableModels,
@@ -280,19 +274,16 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     }
     return (
       apiKey.trim().length > 0 ||
-      enabled !== currentEnabled ||
       apiBase.trim() !== currentApiBase.trim() ||
       !headersEqual(extraHeaders, currentHeaders) ||
       (supportsWireApi && wireApi !== currentWireApi) ||
       !modelListsEqual(models, currentEditableModels) ||
       !modelConfigEqual(modelConfig, currentModelConfig) ||
-      (isCustomProvider && providerDisplayName.trim() !== effectiveDisplayName)
+      providerDisplayName.trim() !== effectiveDisplayName
     );
   }, [
     providerName,
     apiKey,
-    enabled,
-    currentEnabled,
     apiBase,
     currentApiBase,
     extraHeaders,
@@ -304,7 +295,6 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     currentEditableModels,
     modelConfig,
     currentModelConfig,
-    isCustomProvider,
     providerDisplayName,
     effectiveDisplayName
   ]);
@@ -314,6 +304,10 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     if (!next) {
       return;
     }
+    if (next.includes('/')) {
+      toast.error(t('providerModelInvalidProviderPrefix'));
+      return;
+    }
     if (models.includes(next)) {
       setModelDraft('');
       return;
@@ -403,13 +397,12 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     const normalizedHeaders = normalizeHeaders(extraHeaders);
     const trimmedDisplayName = providerDisplayName.trim();
 
-    if (isCustomProvider && trimmedDisplayName !== effectiveDisplayName) {
+    if (trimmedDisplayName !== effectiveDisplayName) {
       payload.displayName = trimmedDisplayName.length > 0 ? trimmedDisplayName : null;
     }
     if (trimmedApiKey.length > 0) {
       payload.apiKey = trimmedApiKey;
     }
-    applyEnabledPatch(payload, enabled, currentEnabled);
     if (trimmedApiBase !== currentApiBase.trim()) {
       payload.apiBase = trimmedApiBase.length > 0 && trimmedApiBase !== defaultApiBase ? trimmedApiBase : null;
     }
@@ -420,7 +413,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       payload.wireApi = wireApi;
     }
     if (!modelListsEqual(models, currentEditableModels)) {
-      payload.models = serializeModelsForSave(models, defaultModels);
+      payload.models = serializeModelsForSave(models, providerName);
     }
     if (!modelConfigEqual(modelConfig, currentModelConfig)) {
       payload.modelConfig = normalizeModelConfigForModels(modelConfig, models);
@@ -465,7 +458,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
   };
 
   const handleDeleteProvider = async () => {
-    if (!providerName || !isCustomProvider) {
+    if (!providerName) {
       return;
     }
     if (!window.confirm(t('providerDeleteConfirm'))) {
@@ -517,7 +510,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       setAuthStatusMessage(`${t('providerAuthImportStatusPrefix')}${result.expiresAt ? ` (expires: ${result.expiresAt})` : ''}`);
       toast.success(t('providerAuthImportSuccess'));
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+      queryClient.invalidateQueries({ queryKey: ['providers'] });
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
       setAuthStatusMessage(message);
@@ -525,7 +518,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     }
   };
 
-  if (!providerName || !providerSpec) {
+  if (!providerName || !providerConfig) {
     return (
       <ConfigSplitEmptyPane>
         <div>
@@ -542,17 +535,15 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
         <div className='flex items-center justify-between'>
           <h3 className='truncate text-lg font-semibold text-gray-900'>{providerTitle}</h3>
           <div className='flex items-center gap-3'>
-            {isCustomProvider && (
-              <button
-                type='button'
-                onClick={handleDeleteProvider}
-                disabled={deleteProvider.isPending}
-                className='text-gray-400 transition-colors hover:text-red-500'
-                title={t('providerDelete')}
-              >
-                <Trash2 className='h-4 w-4' />
-              </button>
-            )}
+            <button
+              type='button'
+              onClick={handleDeleteProvider}
+              disabled={deleteProvider.isPending}
+              className='text-gray-400 transition-colors hover:text-red-500'
+              title={t('providerDelete')}
+            >
+              <Trash2 className='h-4 w-4' />
+            </button>
             <ProviderStatusBadge enabled={currentEnabled} apiKeySet={resolvedProviderConfig.apiKeySet} />
           </div>
         </div>
@@ -560,24 +551,20 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
 
       <form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
         <ConfigSplitPaneBody className='space-y-5 px-6 py-5'>
-          <ProviderEnabledField enabled={enabled} onChange={setEnabled} />
-
-          {isCustomProvider && (
-            <div className='space-y-2'>
-              <Label htmlFor='providerDisplayName' className='text-sm font-medium text-gray-900'>
-                {t('providerDisplayName')}
-              </Label>
-              <Input
-                id='providerDisplayName'
-                type='text'
-                value={providerDisplayName}
-                onChange={(e) => setProviderDisplayName(e.target.value)}
-                placeholder={defaultDisplayName || t('providerDisplayNamePlaceholder')}
-                className='rounded-xl'
-              />
-              <p className='text-xs text-gray-500'>{t('providerDisplayNameHelpShort')}</p>
-            </div>
-          )}
+          <div className='space-y-2'>
+            <Label htmlFor='providerDisplayName' className='text-sm font-medium text-gray-900'>
+              {t('providerDisplayName')}
+            </Label>
+            <Input
+              id='providerDisplayName'
+              type='text'
+              value={providerDisplayName}
+              onChange={(e) => setProviderDisplayName(e.target.value)}
+              placeholder={defaultDisplayName || t('providerDisplayNamePlaceholder')}
+              className='rounded-xl'
+            />
+            <p className='text-xs text-gray-500'>{t('providerDisplayNameHelpShort')}</p>
+          </div>
 
           <div className='space-y-2'>
             <Label htmlFor='apiKey' className='text-sm font-medium text-gray-900'>