chat worked

frontend/src/components/llm/ProviderConfig.svelte

@@ -7,12 +7,12 @@
 -->
 
 <script>
-  import { onMount } from "svelte";
   import { t } from "../../lib/i18n";
   import { requestApi } from "../../lib/api";
 
   /** @type {Array} */
-  let { providers = [], onSave = () => {} } = $props();
+  export let providers = [];
+  export let onSave = () => {};
 
   let editingProvider = null;
   let showForm = false;
@@ -43,8 +43,18 @@
   }
 
   function handleEdit(provider) {
+    console.log("[ProviderConfig][Action] Editing provider", provider?.id);
     editingProvider = provider;
-    formData = { ...provider, api_key: "" }; // Don't populate key for security
+    // Normalize provider fields to editable form shape.
+    formData = {
+      name: provider?.name ?? "",
+      provider_type: provider?.provider_type ?? "openai",
+      base_url: provider?.base_url ?? "https://api.openai.com/v1",
+      api_key: "",
+      default_model: provider?.default_model ?? "gpt-4o",
+      is_active: Boolean(provider?.is_active),
+    };
+    testStatus = { type: "", message: "" };
     showForm = true;
   }
 
@@ -121,19 +131,22 @@
   <div class="flex justify-between items-center mb-6">
     <h2 class="text-xl font-bold">{$t.llm.providers_title}</h2>
     <button
+      type="button"
       class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
-      on:click={() => {
+      on:click|preventDefault={() => {
         resetForm();
         showForm = true;
       }}
     >
-      {$t.llm.add_provider}
+        {$t.llm.add_provider}
     </button>
   </div>
 
   {#if showForm}
     <div
       class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      role="dialog"
+      aria-modal="true"
     >
       <div class="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
         <h3 class="text-lg font-semibold mb-4">
@@ -241,23 +254,26 @@
 
         <div class="mt-6 flex justify-between gap-2">
           <button
+            type="button"
             class="px-4 py-2 border rounded hover:bg-gray-50 flex-1"
-            on:click={() => {
+            on:click|preventDefault={() => {
               showForm = false;
             }}
           >
             {$t.llm.cancel}
           </button>
           <button
+            type="button"
             class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 flex-1"
             disabled={isTesting}
-            on:click={testConnection}
+            on:click|preventDefault={testConnection}
           >
             {isTesting ? $t.llm.testing : $t.llm.test}
           </button>
           <button
+            type="button"
             class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex-1"
-            on:click={handleSubmit}
+            on:click|preventDefault={handleSubmit}
           >
             {$t.llm.save}
           </button>
@@ -286,14 +302,16 @@
         </div>
         <div class="flex gap-2">
           <button
+            type="button"
             class="text-sm text-blue-600 hover:underline"
-            on:click={() => handleEdit(provider)}
+            on:click|preventDefault|stopPropagation={() => handleEdit(provider)}
           >
             {$t.common.edit}
           </button>
           <button
+            type="button"
             class={`text-sm ${provider.is_active ? "text-orange-600" : "text-green-600"} hover:underline`}
-            on:click={() => toggleActive(provider)}
+            on:click|preventDefault|stopPropagation={() => toggleActive(provider)}
           >
             {provider.is_active ? "Deactivate" : "Activate"}
           </button>