fix: correct is_valid mapping and show provider status in UI

Fix is_valid field mapping to read is_vaild (legacy typo) from the API
response. Fix save payloads to send is_vaild: 2 (VaildStatus.is_valid).
Update sidebar, BYOK detail, and default model dropdown to show red
indicators for invalid providers and warning styling on the dropdown
trigger. Show inline API key error when provider is invalidated.

Author: eureka0928

src/pages/Setting/Models.tsx

@@ -244,7 +244,7 @@ export default function SettingModels() {
                 apiKey: found.api_key || '',
                 // Fall back to provider's default API host if endpoint_url is empty
                 apiHost: found.endpoint_url || item.apiHost,
-                is_valid: !!found?.is_valid,
+                is_valid: found?.is_vaild === 2,
                 prefer: found.prefer ?? false,
                 model_type: found.model_type ?? '',
                 externalConfig: fi.externalConfig
@@ -375,6 +375,15 @@ export default function SettingModels() {
     return t('setting.select-default-model');
   };
 
+  const isDefaultModelInvalid = (): boolean => {
+    // Check for custom model preference
+    const preferredIdx = form.findIndex((f) => f.prefer);
+    if (preferredIdx !== -1) {
+      return form[preferredIdx].is_valid === false;
+    }
+    return false;
+  };
+
   // Check if a model is configured
   const isModelConfigured = (
     category: 'cloud' | 'custom' | 'local',
@@ -559,7 +568,7 @@ export default function SettingModels() {
       provider_name: item.id,
       api_key: form[idx].apiKey,
       endpoint_url: form[idx].apiHost,
-      is_valid: form[idx].is_valid,
+      is_vaild: 2,
       model_type: form[idx].model_type,
     };
     if (externalConfig) {
@@ -590,7 +599,7 @@ export default function SettingModels() {
               apiKey: found.api_key || '',
               // Fall back to provider's default API host if endpoint_url is empty
               apiHost: found.endpoint_url || item.apiHost,
-              is_valid: !!found.is_valid,
+              is_valid: found.is_vaild === 2,
               prefer: found.prefer ?? false,
               externalConfig: fi.externalConfig
                 ? fi.externalConfig.map((ec) => {
@@ -734,7 +743,7 @@ export default function SettingModels() {
         provider_name: localPlatform,
         api_key: 'not-required',
         endpoint_url: currentEndpoint, // Save base URL without specific endpoints
-        is_valid: true,
+        is_vaild: 2,
         model_type: currentType,
         encrypted_config: {
           model_platform: localPlatform,
@@ -1037,7 +1046,8 @@ export default function SettingModels() {
     modelId: string | null,
     isActive: boolean,
     isSubItem: boolean = false,
-    isConfigured: boolean = false
+    isConfigured: boolean = false,
+    isValid: boolean = true
   ) => {
     const modelImage = getModelImage(modelId);
     const fallbackIcon =
@@ -1078,9 +1088,12 @@ export default function SettingModels() {
             {label}
           </span>
         </div>
-        {isConfigured && (
+        {isConfigured && isValid && (
           <div className="m-1 h-2 w-2 rounded-full bg-text-success" />
         )}
+        {isConfigured && !isValid && (
+          <div className="m-1 h-2 w-2 rounded-full bg-text-error" />
+        )}
       </button>
     );
   };
@@ -1300,8 +1313,10 @@ export default function SettingModels() {
                       : t('setting.set-as-default')}
                   </Button>
                 )}
-                {form[idx].provider_id ? (
+                {form[idx].provider_id && form[idx].is_valid !== false ? (
                   <div className="h-2 w-2 shrink-0 rounded-full bg-text-success" />
+                ) : form[idx].provider_id && form[idx].is_valid === false ? (
+                  <div className="h-2 w-2 shrink-0 rounded-full bg-text-error" />
                 ) : (
                   <div className="h-2 w-2 shrink-0 rounded-full bg-text-label opacity-10" />
                 )}
@@ -1318,8 +1333,19 @@ export default function SettingModels() {
               type={showApiKey[idx] ? 'text' : 'password'}
               size="default"
               title={t('setting.api-key-setting')}
-              state={errors[idx]?.apiKey ? 'error' : 'default'}
-              note={errors[idx]?.apiKey ?? undefined}
+              state={
+                errors[idx]?.apiKey
+                  ? 'error'
+                  : form[idx].provider_id && form[idx].is_valid === false
+                    ? 'error'
+                    : 'default'
+              }
+              note={
+                errors[idx]?.apiKey ??
+                (form[idx].provider_id && form[idx].is_valid === false
+                  ? t('setting.api-key-invalid-or-expired')
+                  : undefined)
+              }
               placeholder={` ${t('setting.enter-your-api-key')} ${
                 item.name
               } ${t('setting.key')}`}
@@ -1718,11 +1744,19 @@ export default function SettingModels() {
           </div>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="flex w-fit items-center justify-between gap-2 rounded-lg border-[0.5px] border-solid border-border-success bg-surface-success px-3 py-1 font-semibold text-text-success transition-colors hover:opacity-70 active:opacity-90">
+              <button
+                className={`flex w-fit items-center justify-between gap-2 rounded-lg border-[0.5px] border-solid px-3 py-1 font-semibold transition-colors hover:opacity-70 active:opacity-90 ${
+                  isDefaultModelInvalid()
+                    ? 'border-border-warning bg-surface-warning text-text-warning'
+                    : 'border-border-success bg-surface-success text-text-success'
+                }`}
+              >
                 <span className="whitespace-nowrap text-body-sm">
                   {getDefaultModelDisplayText()}
                 </span>
-                <ChevronDown className="h-4 w-4 flex-shrink-0 text-text-success" />
+                <ChevronDown
+                  className={`h-4 w-4 flex-shrink-0 ${isDefaultModelInvalid() ? 'text-text-warning' : 'text-text-success'}`}
+                />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-[180px]">
@@ -1766,6 +1800,7 @@ export default function SettingModels() {
                   {items.map((item, idx) => {
                     const isConfigured = !!form[idx]?.provider_id;
                     const isPreferred = form[idx]?.prefer;
+                    const isValid = form[idx]?.is_valid !== false;
                     const modelImage = getModelImage(item.id);
 
                     return (
@@ -1802,11 +1837,16 @@ export default function SettingModels() {
                             <div className="h-2 w-2 rounded-full bg-text-label opacity-10" />
                           )}
                           {isPreferred && (
-                            <Check className="h-4 w-4 text-text-success" />
+                            <Check
+                              className={`h-4 w-4 ${isValid ? 'text-text-success' : 'text-text-error'}`}
+                            />
                           )}
-                          {isConfigured && !isPreferred && (
+                          {isConfigured && !isPreferred && isValid && (
                             <div className="h-2 w-2 rounded-full bg-text-success" />
                           )}
+                          {isConfigured && !isPreferred && !isValid && (
+                            <div className="h-2 w-2 rounded-full bg-text-error" />
+                          )}
                         </div>
                       </DropdownMenuItem>
                     );
@@ -1932,7 +1972,8 @@ export default function SettingModels() {
                         item.id,
                         selectedTab === `byok-${item.id}`,
                         true,
-                        !!form[idx].provider_id
+                        !!form[idx].provider_id,
+                        form[idx].is_valid !== false
                       )
                     )}
                   </div>