Update App.tsx

App.tsx

@@ -1,4 +1,5 @@
 
+
 import React, { useCallback, useRef, useState, useMemo, useEffect } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
@@ -25,7 +26,7 @@ import ApiKeyModal from './components/ApiKeyModal';
 import FixerModal from './components/FixerModal';
 import { INITIAL_NODES, INITIAL_EDGES, LAYER_DEFINITIONS, TEMPLATES } from './constants';
 import { generateRefinedPrompt, validateArchitecture, getArchitectureSuggestions, getUserApiKey, implementArchitectureSuggestions } from './services/geminiService';
-import { NodeData, LayerType } from './types';
+import { NodeData, LayerType, LogEntry } from './types';
 
 let id = 1000;
 const getId = () => `${id++}`;
@@ -61,10 +62,23 @@ const AppContent = () => {
   const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
 
+  // Activity Log State
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+
+  const addLog = useCallback((message: string, type: 'info' | 'success' | 'warning' | 'error' = 'info') => {
+    setLogs(prev => [{
+      id: Date.now().toString() + Math.random(),
+      timestamp: new Date(),
+      message,
+      type
+    }, ...prev]);
+  }, []);
+
   // Load connection status on mount
   useEffect(() => {
     setIsConnected(!!getUserApiKey());
-  }, []);
+    addLog('System initialized. Ready to build.', 'info');
+  }, [addLog]);
 
   // Define custom node types
   const nodeTypes = useMemo(() => ({ custom: CustomNode }), []);
@@ -94,12 +108,13 @@ const AppContent = () => {
         y: event.clientY,
       });
 
+      const label = LAYER_DEFINITIONS[type].label;
       const newNode: Node<NodeData> = {
         id: getId(),
         type: 'custom',
         position,
         data: { 
-          label: LAYER_DEFINITIONS[type].label, 
+          label: label, 
           type: type, 
           params: LAYER_DEFINITIONS[type].parameters.reduce((acc, p) => ({...acc, [p.name]: p.default}), {}) 
         },
@@ -107,8 +122,9 @@ const AppContent = () => {
 
       setNodes((nds) => nds.concat(newNode));
       setSelectedNodeId(newNode.id);
+      addLog(`Added layer: ${label}`, 'info');
     },
-    [reactFlowInstance, setNodes]
+    [reactFlowInstance, setNodes, addLog]
   );
 
   const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
@@ -135,20 +151,25 @@ const AppContent = () => {
   };
 
   const deleteNode = (id: string) => {
+    const node = nodes.find(n => n.id === id);
     setNodes((nds) => nds.filter((node) => node.id !== id));
     setEdges((eds) => eds.filter((edge) => edge.source !== id && edge.target !== id));
     setSelectedNodeId(null);
+    if (node) addLog(`Deleted layer: ${node.data.label}`, 'info');
   };
 
   const handleGeneratePrompt = async () => {
     if (!isConnected) { setIsApiKeyModalOpen(true); return; }
     setIsGeneratingPrompt(true);
     setIsPromptViewerOpen(true);
+    addLog("Generating PyTorch code prompt...", 'info');
     try {
         const promptText = await generateRefinedPrompt(nodes, edges);
         setGeneratedPrompt(promptText);
+        addLog("Code prompt generated successfully.", 'success');
     } catch (e) {
         setGeneratedPrompt("Failed to generate prompt. Please try again.");
+        addLog("Failed to generate prompt.", 'error');
     } finally {
         setIsGeneratingPrompt(false);
     }
@@ -157,11 +178,15 @@ const AppContent = () => {
   const handleValidate = async () => {
     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.length < 50) {
+    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');
     }
   };
 
@@ -182,15 +207,26 @@ const AppContent = () => {
   const handleImplementSuggestions = async () => {
     if (!suggestionsText || isImplementingSuggestions) return;
     setIsImplementingSuggestions(true);
+    addLog("AI Agents implementing suggestions...", 'info');
     try {
       const result = await implementArchitectureSuggestions(nodes, edges, suggestionsText);
       if (result && result.nodes) {
-         // Fix types and defaults
-         const processedNodes = result.nodes.map((n: any) => ({
-            ...n,
-            type: 'custom',
-            data: { ...n.data, label: n.data.label || n.data.type }
-         }));
+         // Fix types and defaults safely
+         const processedNodes = result.nodes.map((n: any) => {
+            const data = n.data || {};
+            const type = data.type || n.type || 'Identity'; // Fallback type
+            return {
+              ...n,
+              type: 'custom',
+              data: { 
+                ...data, 
+                type: type,
+                label: data.label || n.label || type, // Safe fallback for label
+                params: data.params || {}
+              }
+            };
+         });
+         
          const processedEdges = result.edges.map((e: any) => ({
             ...e, animated: true, style: { stroke: '#94a3b8' }
          }));
@@ -198,10 +234,12 @@ const AppContent = () => {
          setNodes(processedNodes);
          setEdges(processedEdges);
          setIsSuggestionsOpen(false); // Close modal on success
+         addLog("Implemented AI improvements.", 'success');
       }
     } catch (e) {
       console.error(e);
-      alert("Failed to implement suggestions automatically.");
+      addLog("Failed to implement suggestions.", 'error');
+      // alert("Failed to implement suggestions automatically.");
     } finally {
       setIsImplementingSuggestions(false);
     }
@@ -215,11 +253,15 @@ const AppContent = () => {
     navigator.clipboard.writeText(JSON.stringify(layout, null, 2));
     setLayoutCopied(true);
     setTimeout(() => setLayoutCopied(false), 2000);
+    addLog("Layout JSON copied to clipboard.", 'info');
   };
 
-  const handleApplyAIBuild = (newNodes: any[], newEdges: any[]) => {
+  const handleApplyAIBuild = (newNodes: any[], newEdges: any[], logMsg?: string) => {
     setNodes(newNodes);
     setEdges(newEdges);
+    if (logMsg) {
+      addLog(logMsg, 'success');
+    }
   };
 
   const loadTemplate = (templateKey: string) => {
@@ -247,6 +289,7 @@ const AppContent = () => {
       setNodes(hydratedNodes);
       setEdges(hydratedEdges);
       setIsTemplateMenuOpen(false);
+      addLog(`Loaded template: ${template.name}`, 'info');
     }
   };
 
@@ -326,9 +369,9 @@ const AppContent = () => {
               <div className="bg-slate-900/95 backdrop-blur border border-slate-700 text-slate-200 px-6 py-4 rounded-xl shadow-2xl max-w-2xl w-full flex flex-col gap-3">
                 <div className="flex items-start gap-3">
                   <AlertTriangle className="text-amber-500 shrink-0 mt-0.5" size={20} />
-                  <div className="flex-1">
+                  <div className="flex-1 min-w-0">
                      <h4 className="font-bold text-sm text-slate-300 mb-1">Validation Report</h4>
-                     <p className="text-sm whitespace-pre-wrap leading-relaxed text-slate-400">{validationMsg}</p>
+                     <p className="text-sm whitespace-pre-wrap leading-relaxed text-slate-400 max-h-[50vh] overflow-y-auto scrollbar-thin scrollbar-thumb-slate-700 pr-2">{validationMsg}</p>
                   </div>
                 </div>
                 
@@ -339,7 +382,7 @@ const AppContent = () => {
                   >
                     Dismiss
                   </button>
-                  {!validationMsg.toLowerCase().includes("valid") && (
+                  {!validationMsg.toLowerCase().includes("architecture is valid") && (
                     <button 
                       onClick={() => setIsFixerOpen(true)}
                       className="flex items-center gap-2 px-4 py-1.5 bg-red-600 hover:bg-red-500 text-white rounded text-xs font-medium transition-colors shadow-lg shadow-red-900/20"
@@ -387,6 +430,7 @@ const AppContent = () => {
         onChange={updateNodeData}
         onDelete={deleteNode}
         onClose={() => setSelectedNodeId(null)}
+        logs={logs}
       />
 
       <CodeViewer