Merge pull request #65 from ramhaidar/fix/provider-connection-ux

fix(api-key): auto-validate on save to improve UX

src/app/(dashboard)/dashboard/providers/[id]/page.js

@@ -66,8 +66,8 @@ export default function ProviderDetailPage() {
   const fetchConnections = useCallback(async () => {
     try {
       const [connectionsRes, nodesRes] = await Promise.all([
-        fetch("/api/providers"),
-        fetch("/api/provider-nodes"),
+        fetch("/api/providers", { cache: "no-store" }),
+        fetch("/api/provider-nodes", { cache: "no-store" }),
       ]);
       const connectionsData = await connectionsRes.json();
       const nodesData = await nodesRes.json();
@@ -76,7 +76,21 @@ export default function ProviderDetailPage() {
         setConnections(filtered);
       }
       if (nodesRes.ok) {
-        const node = (nodesData.nodes || []).find((entry) => entry.id === providerId) || null;
+        let node = (nodesData.nodes || []).find((entry) => entry.id === providerId) || null;
+
+        // Newly created compatible nodes can be briefly unavailable on one worker.
+        // Retry a few times before showing "Provider not found".
+        if (!node && isCompatible) {
+          for (let attempt = 0; attempt < 3; attempt += 1) {
+            await new Promise((resolve) => setTimeout(resolve, 150));
+            const retryRes = await fetch("/api/provider-nodes", { cache: "no-store" });
+            if (!retryRes.ok) continue;
+            const retryData = await retryRes.json();
+            node = (retryData.nodes || []).find((entry) => entry.id === providerId) || null;
+            if (node) break;
+          }
+        }
+
         setProviderNode(node);
       }
     } catch (error) {
@@ -1025,6 +1039,7 @@ function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthro
   });
   const [validating, setValidating] = useState(false);
   const [validationResult, setValidationResult] = useState(null);
+  const [saving, setSaving] = useState(false);
 
   const handleValidate = async () => {
     setValidating(true);
@@ -1043,13 +1058,38 @@ function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthro
     }
   };
 
-  const handleSubmit = () => {
-    onSave({
-      name: formData.name,
-      apiKey: formData.apiKey,
-      priority: formData.priority,
-      testStatus: validationResult === "success" ? "active" : "unknown",
-    });
+  const handleSubmit = async () => {
+    if (!provider || !formData.apiKey) return;
+
+    setSaving(true);
+    try {
+      let isValid = false;
+      try {
+        setValidating(true);
+        setValidationResult(null);
+        const res = await fetch("/api/providers/validate", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ provider, apiKey: formData.apiKey }),
+        });
+        const data = await res.json();
+        isValid = !!data.valid;
+        setValidationResult(isValid ? "success" : "failed");
+      } catch {
+        setValidationResult("failed");
+      } finally {
+        setValidating(false);
+      }
+
+      await onSave({
+        name: formData.name,
+        apiKey: formData.apiKey,
+        priority: formData.priority,
+        testStatus: isValid ? "active" : "unknown",
+      });
+    } finally {
+      setSaving(false);
+    }
   };
 
   if (!provider) return null;
@@ -1072,7 +1112,7 @@ function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthro
             className="flex-1"
           />
           <div className="pt-6">
-            <Button onClick={handleValidate} disabled={!formData.apiKey || validating} variant="secondary">
+            <Button onClick={handleValidate} disabled={!formData.apiKey || validating || saving} variant="secondary">
               {validating ? "Checking..." : "Check"}
             </Button>
           </div>
@@ -1097,8 +1137,8 @@ function AddApiKeyModal({ isOpen, provider, providerName, isCompatible, isAnthro
           onChange={(e) => setFormData({ ...formData, priority: Number.parseInt(e.target.value) || 1 })}
         />
         <div className="flex gap-2">
-          <Button onClick={handleSubmit} fullWidth disabled={!formData.name || !formData.apiKey}>
-            Save
+          <Button onClick={handleSubmit} fullWidth disabled={!formData.name || !formData.apiKey || saving}>
+            {saving ? "Saving..." : "Save"}
           </Button>
           <Button onClick={onClose} variant="ghost" fullWidth>
             Cancel
@@ -1129,6 +1169,7 @@ function EditConnectionModal({ isOpen, connection, onSave, onClose }) {
   const [testResult, setTestResult] = useState(null);
   const [validating, setValidating] = useState(false);
   const [validationResult, setValidationResult] = useState(null);
+  const [saving, setSaving] = useState(false);
 
   useEffect(() => {
     if (connection) {
@@ -1176,17 +1217,41 @@ function EditConnectionModal({ isOpen, connection, onSave, onClose }) {
     }
   };
 
-  const handleSubmit = () => {
-    const updates = { name: formData.name, priority: formData.priority };
-    if (!isOAuth && formData.apiKey) {
-      updates.apiKey = formData.apiKey;
-      if (validationResult === "success") {
-        updates.testStatus = "active";
-        updates.lastError = null;
-        updates.lastErrorAt = null;
+  const handleSubmit = async () => {
+    setSaving(true);
+    try {
+      const updates = { name: formData.name, priority: formData.priority };
+      if (!isOAuth && formData.apiKey) {
+        updates.apiKey = formData.apiKey;
+        let isValid = validationResult === "success";
+        if (!isValid) {
+          try {
+            setValidating(true);
+            setValidationResult(null);
+            const res = await fetch("/api/providers/validate", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ provider: connection.provider, apiKey: formData.apiKey }),
+            });
+            const data = await res.json();
+            isValid = !!data.valid;
+            setValidationResult(isValid ? "success" : "failed");
+          } catch {
+            setValidationResult("failed");
+          } finally {
+            setValidating(false);
+          }
+        }
+        if (isValid) {
+          updates.testStatus = "active";
+          updates.lastError = null;
+          updates.lastErrorAt = null;
+        }
       }
+      await onSave(updates);
+    } finally {
+      setSaving(false);
     }
-    onSave(updates);
   };
 
   if (!connection) return null;
@@ -1228,7 +1293,7 @@ function EditConnectionModal({ isOpen, connection, onSave, onClose }) {
                 className="flex-1"
               />
               <div className="pt-6">
-                <Button onClick={handleValidate} disabled={!formData.apiKey || validating} variant="secondary">
+                <Button onClick={handleValidate} disabled={!formData.apiKey || validating || saving} variant="secondary">
                   {validating ? "Checking..." : "Check"}
                 </Button>
               </div>
@@ -1256,7 +1321,7 @@ function EditConnectionModal({ isOpen, connection, onSave, onClose }) {
         )}
 
         <div className="flex gap-2">
-          <Button onClick={handleSubmit} fullWidth>Save</Button>
+          <Button onClick={handleSubmit} fullWidth disabled={saving}>{saving ? "Saving..." : "Save"}</Button>
           <Button onClick={onClose} variant="ghost" fullWidth>Cancel</Button>
         </div>
       </div>

src/lib/localDb.js

@@ -54,6 +54,60 @@ const defaultData = {
   pricing: {} // NEW: pricing configuration
 };
 
+function cloneDefaultData() {
+  return {
+    providerConnections: [],
+    providerNodes: [],
+    modelAliases: {},
+    combos: [],
+    apiKeys: [],
+    settings: {
+      cloudEnabled: false,
+      stickyRoundRobinLimit: 3,
+      requireLogin: true,
+    },
+    pricing: {},
+  };
+}
+
+function ensureDbShape(data) {
+  const defaults = cloneDefaultData();
+  const next = data && typeof data === "object" ? data : {};
+  let changed = false;
+
+  for (const [key, defaultValue] of Object.entries(defaults)) {
+    if (next[key] === undefined || next[key] === null) {
+      next[key] = defaultValue;
+      changed = true;
+      continue;
+    }
+
+    if (
+      key === "settings" &&
+      (typeof next.settings !== "object" || Array.isArray(next.settings))
+    ) {
+      next.settings = { ...defaultValue };
+      changed = true;
+      continue;
+    }
+
+    if (
+      key === "settings" &&
+      typeof next.settings === "object" &&
+      !Array.isArray(next.settings)
+    ) {
+      for (const [settingKey, settingDefault] of Object.entries(defaultValue)) {
+        if (next.settings[settingKey] === undefined) {
+          next.settings[settingKey] = settingDefault;
+          changed = true;
+        }
+      }
+    }
+  }
+
+  return { data: next, changed };
+}
+
 // Singleton instance
 let dbInstance = null;
 
@@ -64,35 +118,43 @@ export async function getDb() {
   if (isCloud) {
     // Return in-memory DB for Workers
     if (!dbInstance) {
-      dbInstance = new Low({ read: async () => {}, write: async () => {} }, defaultData);
-      dbInstance.data = defaultData;
+      const data = cloneDefaultData();
+      dbInstance = new Low({ read: async () => {}, write: async () => {} }, data);
+      dbInstance.data = data;
     }
     return dbInstance;
   }
 
   if (!dbInstance) {
     const adapter = new JSONFile(DB_FILE);
-    dbInstance = new Low(adapter, defaultData);
+    dbInstance = new Low(adapter, cloneDefaultData());
+  }
 
-    // Try to read DB with error recovery for corrupt JSON
-    try {
-      await dbInstance.read();
-    } catch (error) {
-      if (error instanceof SyntaxError) {
-        console.warn('[DB] Corrupt JSON detected, resetting to defaults...');
-        dbInstance.data = defaultData;
-        await dbInstance.write();
-      } else {
-        throw error;
-      }
+  // Always read latest disk state to avoid stale singleton data across route workers.
+  try {
+    await dbInstance.read();
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      console.warn('[DB] Corrupt JSON detected, resetting to defaults...');
+      dbInstance.data = cloneDefaultData();
+      await dbInstance.write();
+    } else {
+      throw error;
     }
+  }
 
-    // Initialize with default data if empty
-    if (!dbInstance.data) {
-      dbInstance.data = defaultData;
+  // Initialize/migrate missing keys for older DB schema versions.
+  if (!dbInstance.data) {
+    dbInstance.data = cloneDefaultData();
+    await dbInstance.write();
+  } else {
+    const { data, changed } = ensureDbShape(dbInstance.data);
+    dbInstance.data = data;
+    if (changed) {
       await dbInstance.write();
     }
   }
+
   return dbInstance;
 }