codex specify

frontend/src/components/llm/ProviderConfig.svelte

@@ -9,6 +9,7 @@
 <script>
   import { t } from "../../lib/i18n";
   import { requestApi } from "../../lib/api";
+  import { addToast } from "../../lib/toasts.js";
 
   /** @type {Array} */
   export let providers = [];
@@ -28,6 +29,7 @@
 
   let testStatus = { type: "", message: "" };
   let isTesting = false;
+  let togglingProviderIds = new Set();
 
   function isMultimodalModel(modelName) {
     const token = (modelName || "").toLowerCase();
@@ -124,19 +126,32 @@
       resetForm();
       onSave();
     } catch (err) {
-      alert(`Error: ${err.message}`);
+      addToast(err.message, "error");
     }
   }
 
   async function toggleActive(provider) {
+    if (togglingProviderIds.has(provider.id)) return;
+
+    const previousState = Boolean(provider.is_active);
+    provider.is_active = !previousState;
+    providers = [...providers];
+    togglingProviderIds.add(provider.id);
+    togglingProviderIds = new Set(togglingProviderIds);
+
     try {
       await requestApi(`/llm/providers/${provider.id}`, "PUT", {
         ...provider,
-        is_active: !provider.is_active,
+        is_active: provider.is_active,
       });
-      onSave();
     } catch (err) {
-      console.error("Failed to toggle status", err);
+      provider.is_active = previousState;
+      providers = [...providers];
+      addToast(err.message, "error");
+    } finally {
+      togglingProviderIds.delete(provider.id);
+      togglingProviderIds = new Set(togglingProviderIds);
+      onSave();
     }
   }
 </script>
@@ -333,8 +348,13 @@
             type="button"
             class={`text-sm ${provider.is_active ? "text-orange-600" : "text-green-600"} hover:underline`}
             on:click|preventDefault|stopPropagation={() => toggleActive(provider)}
+            disabled={togglingProviderIds.has(provider.id)}
           >
-            {provider.is_active ? "Deactivate" : "Activate"}
+            {#if togglingProviderIds.has(provider.id)}
+              ...
+            {:else}
+              {provider.is_active ? "Deactivate" : "Activate"}
+            {/if}
           </button>
         </div>
       </div>