Update App.tsx

App.tsx

@@ -188,6 +188,18 @@ const AppContent = () => {
     if (node) addLog(`Deleted layer: ${node.data.label}`, 'info');
   };
 
+  const handleAPIError = (error: any) => {
+      const msg = error.message || String(error);
+      addLog(`API Error: ${msg}`, 'error');
+      
+      // Force disconnect if authentication failed to allow user to re-enter key
+      if (msg.includes('API Key') || msg.includes('403') || msg.includes('401') || msg.includes('400')) {
+          setIsConnected(false);
+          setIsApiKeyModalOpen(true);
+          addLog("Disconnected due to invalid API key. Please check your key.", 'warning');
+      }
+  }
+
   const handleGeneratePrompt = async () => {
     if (!isConnected) { setIsApiKeyModalOpen(true); return; }
     setIsGeneratingPrompt(true);
@@ -198,8 +210,8 @@ const AppContent = () => {
         setGeneratedPrompt(promptText);
         addLog("Code prompt generated successfully.", 'success');
     } catch (e) {
-        setGeneratedPrompt("Failed to generate prompt. Please try again.");
-        addLog("Failed to generate prompt.", 'error');
+        setGeneratedPrompt("Failed to generate prompt. See logs for details.");
+        handleAPIError(e);
     } finally {
         setIsGeneratingPrompt(false);
     }
@@ -209,14 +221,18 @@ const AppContent = () => {
     if (!isConnected) { setIsApiKeyModalOpen(true); return; }
     setValidationMsg("Validating...");
     addLog("Running architecture validation...", 'info');
-    const result = await validateArchitecture(nodes, edges);
-    setValidationMsg(result);
-    // Auto hide after 5 seconds ONLY if valid
-    if (result.toLowerCase().includes("valid") && !result.toLowerCase().includes("invalid") && result.length < 50) {
-      setTimeout(() => setValidationMsg(null), 5000);
-      addLog("Validation passed: Architecture is valid.", 'success');
-    } else {
-      addLog("Validation issues found.", 'warning');
+    try {
+        const result = await validateArchitecture(nodes, edges);
+        setValidationMsg(result);
+        if (result.toLowerCase().includes("valid") && !result.toLowerCase().includes("invalid") && result.length < 50) {
+            setTimeout(() => setValidationMsg(null), 5000);
+            addLog("Validation passed: Architecture is valid.", 'success');
+        } else {
+            addLog("Validation issues found.", 'warning');
+        }
+    } catch (e) {
+        setValidationMsg("Validation failed due to API error.");
+        handleAPIError(e);
     }
   };
 
@@ -228,7 +244,8 @@ const AppContent = () => {
       const suggestions = await getArchitectureSuggestions(nodes, edges);
       setSuggestionsText(suggestions);
     } catch (error) {
-      setSuggestionsText("Failed to get suggestions.");
+      setSuggestionsText("Failed to get suggestions. API Error.");
+      handleAPIError(error);
     } finally {
       setIsSuggestionsLoading(false);
     }
@@ -267,7 +284,7 @@ const AppContent = () => {
          addLog("Implemented AI improvements.", 'success');
       }
     } catch (e) {
-      console.error(e);
+      handleAPIError(e);
       addLog("Failed to implement suggestions.", 'error');
     } finally {
       setIsImplementingSuggestions(false);