Update src/App.jsx

src/App.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { 
-  Activity, 
-  Settings, 
-  Play, 
-  Square, 
-  Trash2, 
-  Layers, 
-  Cpu, 
-  Zap, 
-  Plus, 
+import {
+  Activity,
+  Settings,
+  Play,
+  Square,
+  Trash2,
+  Layers,
+  Cpu,
+  Zap,
+  Plus,
   Info,
   Database,
   Move,
@@ -20,101 +20,99 @@ import {
   AlertTriangle
 } from 'lucide-react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-
 // --- BLOCK DEFINITIONS ---
 const BLOCK_TYPES = {
-  INPUT: { 
-    id: 'INPUT', 
-    label: 'Data In', 
-    category: 'IO', 
-    color: 'bg-emerald-500', 
-    outputs: 1, 
+  INPUT: {
+    id: 'INPUT',
+    label: 'Data In',
+    category: 'IO',
+    color: 'bg-emerald-500',
+    outputs: 1,
     inputs: 0,
     config: { batchSize: 32, seqLen: 128, vocabSize: 5000 }
   },
-  EMBED: { 
-    id: 'EMBED', 
-    label: 'Embedding', 
-    category: 'Core', 
-    color: 'bg-blue-500', 
-    outputs: 1, 
+  EMBED: {
+    id: 'EMBED',
+    label: 'Embedding',
+    category: 'Core',
+    color: 'bg-blue-500',
+    outputs: 1,
     inputs: 1,
     config: { dim: 512 }
   },
-  ATTN: { 
-    id: 'ATTN', 
-    label: 'Attention', 
-    category: 'Core', 
-    color: 'bg-indigo-600', 
-    outputs: 1, 
+  ATTN: {
+    id: 'ATTN',
+    label: 'Attention',
+    category: 'Core',
+    color: 'bg-indigo-600',
+    outputs: 1,
     inputs: 1,
     config: { heads: 8, headDim: 64, dropout: 0.1 }
   },
-  FFN: { 
-    id: 'FFN', 
-    label: 'Feed Forward', 
-    category: 'Core', 
-    color: 'bg-blue-600', 
-    outputs: 1, 
+  FFN: {
+    id: 'FFN',
+    label: 'Feed Forward',
+    category: 'Core',
+    color: 'bg-blue-600',
+    outputs: 1,
     inputs: 1,
     config: { mult: 4, dropout: 0.1 }
   },
-  NORM: { 
-    id: 'NORM', 
-    label: 'Layer Norm', 
-    category: 'Core', 
-    color: 'bg-slate-500', 
-    outputs: 1, 
+  NORM: {
+    id: 'NORM',
+    label: 'Layer Norm',
+    category: 'Core',
+    color: 'bg-slate-500',
+    outputs: 1,
     inputs: 1,
     config: { eps: 1e-5 }
   },
-  LSTM: { 
-    id: 'LSTM', 
-    label: 'LSTM', 
-    category: 'RNN', 
-    color: 'bg-amber-500', 
-    outputs: 1, 
+  LSTM: {
+    id: 'LSTM',
+    label: 'LSTM',
+    category: 'RNN',
+    color: 'bg-amber-500',
+    outputs: 1,
     inputs: 1,
     config: { hidden: 512, layers: 1 }
   },
-  MAMBA: { 
-    id: 'MAMBA', 
-    label: 'Mamba (SSM)', 
-    category: 'Modern', 
-    color: 'bg-purple-600', 
-    outputs: 1, 
+  MAMBA: {
+    id: 'MAMBA',
+    label: 'Mamba (SSM)',
+    category: 'Modern',
+    color: 'bg-purple-600',
+    outputs: 1,
     inputs: 1,
     config: { d_state: 16, d_conv: 4, expand: 2 }
   },
-  RWKV: { 
-    id: 'RWKV', 
-    label: 'RWKV', 
-    category: 'Modern', 
-    color: 'bg-fuchsia-600', 
-    outputs: 1, 
+  RWKV: {
+    id: 'RWKV',
+    label: 'RWKV',
+    category: 'Modern',
+    color: 'bg-fuchsia-600',
+    outputs: 1,
     inputs: 1,
     config: { mode: 'v5', head_size: 64 }
   },
-  RESIDUAL: { 
-    id: 'RESIDUAL', 
-    label: 'Residual +', 
-    category: 'Utility', 
-    color: 'bg-cyan-500', 
-    outputs: 1, 
+  RESIDUAL: {
+    id: 'RESIDUAL',
+    label: 'Residual +',
+    category: 'Utility',
+    color: 'bg-cyan-500',
+    outputs: 1,
     inputs: 2,
     config: {}
   },
-  OUTPUT: { 
-    id: 'OUTPUT', 
-    label: 'Data Out', 
-    category: 'IO', 
-    color: 'bg-red-500', 
-    outputs: 0, 
+  OUTPUT: {
+    id: 'OUTPUT',
+    label: 'Data Out',
+    category: 'IO',
+    color: 'bg-red-500',
+    outputs: 0,
     inputs: 1,
     config: { loss: 'CrossEntropy' }
   }
 };
-
 const App = () => {
   // State for Blocks and Connections
   const [nodes, setNodes] = useState([
@@ -126,134 +124,254 @@ const App = () => {
     { id: 'c1', from: 'n1', to: 'n2' },
     { id: 'c2', from: 'n2', to: 'n3' }
   ]);
-  
+ 
   // UI & Viewport State
   const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
   const [isPanning, setIsPanning] = useState(false);
   const [panStart, setPanStart] = useState({ x: 0, y: 0 });
-  
+ 
   const [selectedNodeId, setSelectedNodeId] = useState(null);
   const [isTraining, setIsTraining] = useState(false);
   const [trainingData, setTrainingData] = useState([]);
   const [learningRate, setLearningRate] = useState(0.001);
   const [maxEpochs, setMaxEpochs] = useState(150);
   const [simAlert, setSimAlert] = useState(null);
-  
+ 
   const [isDraggingNode, setIsDraggingNode] = useState(null);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
   const [connectingFrom, setConnectingFrom] = useState(null);
-  
+ 
   const canvasRef = useRef(null);
+  // --- IMPROVED SIMULATION ENGINE ---
+  const analyzeGraph = () => {
+    // Build graph: predecessors and successors
+    const preds = {};
+    const succ = {};
+    connections.forEach(c => {
+      if (!succ[c.from]) succ[c.from] = [];
+      succ[c.from].push(c.to);
+      if (!preds[c.to]) preds[c.to] = [];
+      preds[c.to].push(c.from);
+    });
 
-  // --- ACCURATE SIMULATION ENGINE ---
+    // Topological sort to detect cycles and order
+    const indegree = {};
+    nodes.forEach(n => indegree[n.id] = preds[n.id] ? preds[n.id].length : 0);
+    const queue = nodes.filter(n => indegree[n.id] === 0).map(n => n.id);
+    const order = [];
+    while (queue.length > 0) {
+      const id = queue.shift();
+      order.push(id);
+      if (succ[id]) {
+        succ[id].forEach(to => {
+          indegree[to]--;
+          if (indegree[to] === 0) queue.push(to);
+        });
+      }
+    }
+    if (order.length < nodes.length) {
+      return { error: "Cycle detected or disconnected graph." };
+    }
 
-  const findPath = (startType, endType) => {
-    const startNodes = nodes.filter(n => n.type === startType);
-    const endNodes = nodes.filter(n => n.type === endType);
-    
-    for (const start of startNodes) {
-      let visited = new Set();
-      let queue = [[start.id, []]];
+    // Identify INPUT and OUTPUT
+    const inputNodes = nodes.filter(n => n.type === 'INPUT');
+    const outputNodes = nodes.filter(n => n.type === 'OUTPUT');
+    if (inputNodes.length !== 1 || outputNodes.length !== 1) {
+      return { error: "Exactly one INPUT and one OUTPUT required." };
+    }
+    const inputNode = inputNodes[0];
+    const outputNode = outputNodes[0];
+
+    // Extract global configs
+    const vocabSize = inputNode.config.vocabSize;
+    const batchSize = inputNode.config.batchSize;
+    const seqLen = inputNode.config.seqLen;
+
+    // Propagate dimensions and compute params, depths
+    const nodeDims = {}; // out_dim
+    const nodeParams = {};
+    const nodeDepths = {}; // max depth to this node
+    let totalParams = 0;
+    let minBottleneck = Infinity;
+    let vanishingGradientRisk = 1.0;
 
-      while (queue.length > 0) {
-        const [currId, path] = queue.shift();
-        if (visited.has(currId)) continue;
-        visited.add(currId);
+    // Start with INPUT: dim=0 (tokens)
+    nodeDims[inputNode.id] = 0;
+    nodeParams[inputNode.id] = 0;
+    nodeDepths[inputNode.id] = 0;
+
+    for (const id of order) {
+      if (id === inputNode.id) continue;
+      const node = nodes.find(n => n.id === id);
+      const type = BLOCK_TYPES[node.type];
+      const inIds = preds[id] || [];
+      if (inIds.length !== type.inputs) {
+        return { error: `Invalid input count for ${node.label} (${id}). Expected ${type.inputs}, got ${inIds.length}.` };
+      }
+      const inDims = inIds.map(pre => nodeDims[pre]);
 
-        const currNode = nodes.find(n => n.id === currId);
-        const currentPath = [...path, currNode];
+      // Compute inDim (assume primary or check match)
+      let inDim = inDims[0];
+      let outDim;
+      let params = 0;
 
-        if (currNode.type === endType) return currentPath;
+      // Compute depth: max over predecessors +1
+      const depth = 1 + Math.max(...inIds.map(pre => nodeDepths[pre] || 0), 0);
+      nodeDepths[id] = depth;
 
-        const nextConnections = connections.filter(c => c.from === currId);
-        for (const conn of nextConnections) {
-          queue.push([conn.to, currentPath]);
-        }
+      switch (node.type) {
+        case 'RESIDUAL':
+          if (inDims[0] !== inDims[1]) {
+            return { error: `Dimension mismatch in Residual (${id}): ${inDims[0]} vs ${inDims[1]}.` };
+          }
+          outDim = inDim;
+          params = 0;
+          vanishingGradientRisk *= 0.7; // Residuals stabilize gradients significantly
+          break;
+        case 'EMBED':
+          if (inDim !== 0) return { error: `Embedding (${id}) expects token input (dim=0), got ${inDim}.` };
+          outDim = node.config.dim;
+          params = vocabSize * outDim; // Embedding matrix
+          break;
+        case 'ATTN':
+          if (node.config.heads * node.config.headDim !== inDim) {
+            // Allow projection if mismatch, but for realism, assume same or add proj params
+            params += inDim * (node.config.heads * node.config.headDim); // Proj in if mismatch
+          }
+          outDim = node.config.heads * node.config.headDim;
+          params += 4 * outDim * outDim; // QKV + Proj (approx, ignoring heads split)
+          vanishingGradientRisk *= 0.98; // Attention is stable
+          break;
+        case 'FFN':
+          const hidden = inDim * node.config.mult;
+          params = inDim * hidden + hidden * inDim; // Up + down
+          outDim = inDim;
+          vanishingGradientRisk *= 0.99;
+          break;
+        case 'NORM':
+          params = 2 * inDim; // Scale + bias
+          outDim = inDim;
+          vanishingGradientRisk *= 0.85; // Norm stabilizes
+          break;
+        case 'LSTM':
+          outDim = node.config.hidden;
+          params = node.config.layers * (4 * inDim * outDim + 4 * outDim); // Gates + biases
+          vanishingGradientRisk *= Math.pow(0.95, node.config.layers); // RNN vanishing
+          break;
+        case 'MAMBA':
+          outDim = inDim * node.config.expand;
+          params = inDim * outDim * 2 + node.config.d_state * outDim + node.config.d_conv * outDim; // Approx
+          vanishingGradientRisk *= 0.97; // SSM stable
+          break;
+        case 'RWKV':
+          outDim = inDim;
+          params = 5 * inDim * inDim; // Approx for time-mix, channel-mix
+          vanishingGradientRisk *= 0.96;
+          break;
+        case 'OUTPUT':
+          outDim = vocabSize;
+          params = inDim * vocabSize; // Linear head
+          if (inDim < 64) vanishingGradientRisk *= 1.2; // Small head unstable
+          break;
+        default:
+          return { error: `Unknown block type: ${node.type}.` };
       }
-    }
-    return null;
-  };
 
-  const runTrainingStep = (epoch) => {
-    // 1. Trace the graph to find the active computation path
-    const activePath = findPath('INPUT', 'OUTPUT');
+      nodeDims[id] = outDim;
+      nodeParams[id] = params;
+      totalParams += params;
 
-    if (!activePath) {
-      setSimAlert("Broken Computation Path: Input cannot reach Output.");
-      return null;
+      if (outDim > 0) minBottleneck = Math.min(minBottleneck, outDim);
     }
 
-    setSimAlert(null);
+    // Check OUTPUT dim
+    if (nodeDims[outputNode.id] !== vocabSize) {
+      return { error: `Output dimension mismatch: expected ${vocabSize}, got ${nodeDims[outputNode.id]}.` };
+    }
 
-    // 2. Calculate Architectural Metrics
-    let depth = activePath.length;
-    let totalCapacity = 0;
-    let vanishingGradientRisk = 1.0;
-    let bottleneck = Infinity;
+    // Adjust vanishing risk with depth
+    const maxDepth = Math.max(...Object.values(nodeDepths));
+    vanishingGradientRisk = Math.pow(vanishingGradientRisk, maxDepth / 5); // Softer decay
 
-    activePath.forEach(node => {
-      const type = node.type;
-      const cfg = node.config;
+    // Fake dataset size (tokens)
+    const dataTokens = batchSize * seqLen * 10000; // Arbitrary large dataset
 
-      // Capacity based on hidden dimensions (Parameter scaling)
-      if (cfg.dim) totalCapacity += cfg.dim;
-      if (cfg.hidden) totalCapacity += cfg.hidden;
-      if (cfg.heads) totalCapacity += (cfg.heads * cfg.headDim);
+    // Scaling laws (inspired by Chinchilla/Kaplan): loss ~ a / params^b + c
+    const a = 410; // Tuned for CE loss
+    const b = 0.28;
+    const c = 1.7;
+    let predictedFloorLoss = a / Math.pow(totalParams || 1, b) + c;
 
-      // Bottleneck detection (Information Theory)
-      if (cfg.dim) bottleneck = Math.min(bottleneck, cfg.dim);
+    // Adjust for under/over-param
+    const paramDataRatio = totalParams / dataTokens;
+    if (paramDataRatio < 0.01) predictedFloorLoss *= 1.5; // Underfit
+    if (paramDataRatio > 10) predictedFloorLoss += 0.5; // Overfit plateau
 
-      // Gradient stability factors
-      if (type === 'LSTM') vanishingGradientRisk *= 0.95; // LSTM helps but still RNN
-      if (type === 'ATTN' || type === 'MAMBA') vanishingGradientRisk *= 0.99; // Very stable
-      if (type === 'NORM') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk * 1.5);
-      if (type === 'RESIDUAL') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk * 1.8);
-    });
+    // Bottleneck penalty
+    if (minBottleneck < 128) predictedFloorLoss += (128 - minBottleneck) / 100;
+
+    return {
+      totalParams,
+      maxDepth,
+      vanishingGradientRisk,
+      bottleneck: minBottleneck,
+      floorLoss: Math.max(0.1, predictedFloorLoss / 10), // Scale to reasonable CE range
+      batchSize,
+      error: null
+    };
+  };
 
-    // 3. Realistic Training Physics
-    // A. Learning Rate Explosion
-    if (learningRate > 0.04 && Math.random() > 0.95) {
-      setSimAlert("Gradient Explosion: Learning rate too high!");
-      return { epoch, loss: (Math.random() * 10 + 5).toFixed(4), accuracy: "0.0000" };
+  const runTrainingStep = (epoch, graphMetrics, prevLoss) => {
+    if (graphMetrics.error) {
+      setSimAlert(graphMetrics.error);
+      return null;
     }
+    setSimAlert(null);
+
+    const { vanishingGradientRisk, floorLoss, batchSize, maxDepth } = graphMetrics;
 
-    // B. Vanishing Gradients
-    // Probability of effective training decreases with depth unless stabilized
-    const effectiveLearningPower = learningRate * Math.pow(vanishingGradientRisk, depth / 2);
+    // Effective learning: adjust by batch, stability, depth
+    const effectiveLR = learningRate * Math.sqrt(batchSize / 32) * vanishingGradientRisk;
 
-    // C. Capacity vs Complexity
-    // If bottleneck < 128, the model "underfits" (cannot reach low loss)
-    const floorLoss = bottleneck < 128 ? 1.5 : 0.05;
+    // Gradient explosion check (more probable with high LR or unstable grad)
+    if (learningRate > 0.01 && Math.random() > vanishingGradientRisk) {
+      setSimAlert("Gradient Explosion: Reduce LR or add stabilization blocks!");
+      return { epoch, loss: (Math.random() * 20 + 10).toFixed(4), accuracy: "0.0000" };
+    }
 
-    // D. The Loss Function (Log-Space Convergence)
-    const prevLoss = trainingData.length > 0 ? parseFloat(trainingData[trainingData.length-1].loss) : 8.0;
-    
-    // Convergence speed depends on architecture efficiency
-    const delta = (prevLoss - floorLoss) * effectiveLearningPower * 5;
-    const noise = (Math.random() - 0.5) * (0.02 / (epoch + 1));
-    
+    // Loss update: exponential decay towards floor with noise
+    const delta = (prevLoss - floorLoss) * effectiveLR * (1 / (1 + epoch / 50)); // Slowdown over epochs
+    const noise = (Math.random() - 0.5) * (0.05 / Math.sqrt(epoch + 1));
     const newLoss = Math.max(floorLoss, prevLoss - delta + noise);
+
+    // Accuracy: inverse to loss (for classification-like)
     const newAcc = Math.min(0.99, 1 - (newLoss / 8) + (Math.random() * 0.01));
 
+    // Plateau if deep without stability
+    if (maxDepth > 10 && vanishingGradientRisk < 0.5 && Math.random() > 0.8) {
+      setSimAlert("Training Plateau: Add residuals/norms or reduce depth.");
+    }
+
     return {
       epoch,
       loss: newLoss.toFixed(4),
       accuracy: newAcc.toFixed(4)
     };
   };
-
   useEffect(() => {
     let interval;
     if (isTraining) {
+      const graphMetrics = analyzeGraph();
       interval = setInterval(() => {
         setTrainingData(prev => {
           const nextEpoch = prev.length;
-          if (nextEpoch >= maxEpochs) { 
-            setIsTraining(false); 
-            return prev; 
+          if (nextEpoch >= maxEpochs) {
+            setIsTraining(false);
+            return prev;
           }
-          const step = runTrainingStep(nextEpoch);
+          const prevLoss = prev.length > 0 ? parseFloat(prev[prev.length - 1].loss) : 8.0;
+          const step = runTrainingStep(nextEpoch, graphMetrics, prevLoss);
           if (!step) {
             setIsTraining(false);
             return prev;
@@ -263,8 +381,7 @@ const App = () => {
       }, 100);
     }
     return () => clearInterval(interval);
-  }, [isTraining, nodes, connections, learningRate, maxEpochs, trainingData]);
-
+  }, [isTraining, nodes, connections, learningRate, maxEpochs]);
   // --- INTERACTION HANDLERS ---
   const handleWheel = (e) => {
     e.preventDefault();
@@ -272,7 +389,6 @@ const App = () => {
     const newZoom = Math.min(Math.max(zoom - e.deltaY * zoomSpeed, 0.2), 2);
     setZoom(newZoom);
   };
-
   const addNode = (type) => {
     const newNode = {
       id: `n${Date.now()}`,
@@ -283,17 +399,14 @@ const App = () => {
     };
     setNodes([...nodes, newNode]);
   };
-
   const deleteNode = (id) => {
     setNodes(nodes.filter(n => n.id !== id));
     setConnections(connections.filter(c => c.from !== id && c.to !== id));
     if (selectedNodeId === id) setSelectedNodeId(null);
   };
-
   const deleteConnection = (id) => {
     setConnections(connections.filter(c => c.id !== id));
   };
-
   const handleCanvasMouseDown = (e) => {
     if (e.target === canvasRef.current || e.target.tagName === 'svg' || e.target.id === 'grid-background') {
       setIsPanning(true);
@@ -301,7 +414,6 @@ const App = () => {
       setSelectedNodeId(null);
     }
   };
-
   const handleNodeMouseDown = (e, id) => {
     e.stopPropagation();
     if (connectingFrom) return;
@@ -310,7 +422,6 @@ const App = () => {
     setDragOffset({ x: e.clientX / zoom - node.x, y: e.clientY / zoom - node.y });
     setSelectedNodeId(id);
   };
-
   const handleMouseMove = (e) => {
     if (isDraggingNode) {
       setNodes(nodes.map(n => n.id === isDraggingNode ? { ...n, x: e.clientX / zoom - dragOffset.x, y: e.clientY / zoom - dragOffset.y } : n));
@@ -321,17 +432,14 @@ const App = () => {
       });
     }
   };
-
   const handleMouseUp = () => {
     setIsDraggingNode(null);
     setIsPanning(false);
   };
-
   const startConnection = (e, id) => {
     e.stopPropagation();
     setConnectingFrom(id);
   };
-
   const endConnection = (e, id) => {
     e.stopPropagation();
     if (connectingFrom && connectingFrom !== id) {
@@ -341,26 +449,26 @@ const App = () => {
     }
     setConnectingFrom(null);
   };
-
   const updateConfig = (key, val) => {
     setNodes(nodes.map(n => n.id === selectedNodeId ? { ...n, config: { ...n.config, [key]: val } } : n));
   };
-
   const resetView = () => {
     setViewOffset({ x: 0, y: 0 });
     setZoom(1);
   };
-
   const selectedNode = nodes.find(n => n.id === selectedNodeId);
-
   // Calculated properties for infinite grid
   const gridSize = 24 * zoom;
   const gridOffsetX = viewOffset.x % gridSize;
   const gridOffsetY = viewOffset.y % gridSize;
-  
+ 
   const currentEpoch = trainingData.length;
   const trainingProgress = (currentEpoch / maxEpochs) * 100;
 
+  const graphMetrics = analyzeGraph();
+  const totalParams = graphMetrics.totalParams ? (graphMetrics.totalParams / 1e6).toFixed(2) + 'M' : 'N/A';
+  const isValidGraph = !graphMetrics.error;
+
   return (
     <div className="flex flex-col h-screen w-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
       {/* Header */}
@@ -369,40 +477,39 @@ const App = () => {
           <div className="p-2 bg-indigo-500 rounded-lg shadow-[0_0_15px_rgba(99,102,241,0.4)]">
             <Layers size={20} className="text-white" />
           </div>
-          <h1 className="text-lg font-bold tracking-tight">Arch-Sim <span className="text-slate-500 font-normal">v2.0 Accurate</span></h1>
+          <h1 className="text-lg font-bold tracking-tight">Arch-Sim <span className="text-slate-500 font-normal">v3.0 Realistic</span></h1>
         </div>
-        
+       
         <div className="flex items-center gap-4">
           <div className="flex items-center bg-slate-800 rounded-full px-4 py-1.5 gap-3 border border-slate-700">
             <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider">LR</span>
-            <input 
-              type="range" 
-              min="0.0001" 
-              max="0.05" 
-              step="0.0001" 
-              value={learningRate} 
+            <input
+              type="range"
+              min="0.0001"
+              max="0.05"
+              step="0.0001"
+              value={learningRate}
               onChange={(e) => setLearningRate(parseFloat(e.target.value))}
               className="w-20 accent-indigo-500"
             />
             <span className="text-[11px] font-mono text-indigo-300 w-10">{learningRate}</span>
           </div>
-
           <div className="flex items-center bg-slate-800 rounded-full px-4 py-1.5 gap-3 border border-slate-700">
             <Clock size={12} className="text-slate-400" />
             <span className="text-[10px] text-slate-400 uppercase font-bold tracking-wider whitespace-nowrap">Max Epochs</span>
-            <input 
-              type="range" 
-              min="50" 
-              max="1000" 
-              step="50" 
-              value={maxEpochs} 
+            <input
+              type="range"
+              min="50"
+              max="1000"
+              step="50"
+              value={maxEpochs}
               onChange={(e) => setMaxEpochs(parseInt(e.target.value))}
               className="w-20 accent-indigo-500"
             />
             <span className="text-[11px] font-mono text-indigo-300 w-8">{maxEpochs}</span>
           </div>
-          
-          <button 
+         
+          <button
             onClick={() => {
               if (isTraining) setIsTraining(false);
               else {
@@ -418,7 +525,6 @@ const App = () => {
           </button>
         </div>
       </header>
-
       <main className="flex-1 flex overflow-hidden">
         {/* Sidebar: Blocks Palette */}
         <aside className="w-64 border-r border-slate-800 bg-slate-900/30 p-4 flex flex-col gap-6 overflow-y-auto z-10">
@@ -444,9 +550,8 @@ const App = () => {
             </div>
           </div>
         </aside>
-
         {/* Canvas Area */}
-        <div 
+        <div
           className="flex-1 relative bg-slate-950 overflow-hidden cursor-grab active:cursor-grabbing outline-none"
           onMouseDown={handleCanvasMouseDown}
           onMouseMove={handleMouseMove}
@@ -455,16 +560,15 @@ const App = () => {
           ref={canvasRef}
         >
           {/* Infinite Dot Grid Background */}
-          <div 
+          <div
             id="grid-background"
             className="absolute inset-0 pointer-events-none"
-            style={{ 
+            style={{
               backgroundImage: `radial-gradient(circle, #1e293b 1px, transparent 1px)`,
               backgroundSize: `${gridSize}px ${gridSize}px`,
               backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px`
             }}
           />
-
           {/* Alert Message */}
           {simAlert && (
             <div className="absolute top-6 left-1/2 -translate-x-1/2 bg-red-500/90 text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm font-bold shadow-2xl z-50 animate-bounce">
@@ -472,11 +576,10 @@ const App = () => {
               {simAlert}
             </div>
           )}
-
           {/* Viewport Transform Container */}
-          <div 
+          <div
             className="absolute inset-0 pointer-events-none"
-            style={{ 
+            style={{
               transform: `translate(${viewOffset.x}px, ${viewOffset.y}px) scale(${zoom})`,
               transformOrigin: '0 0'
             }}
@@ -492,13 +595,13 @@ const App = () => {
                 const fromNode = nodes.find(n => n.id === conn.from);
                 const toNode = nodes.find(n => n.id === conn.to);
                 if (!fromNode || !toNode) return null;
-                
+               
                 const x1 = fromNode.x + 160;
                 const y1 = fromNode.y + 40;
                 const x2 = toNode.x;
                 const y2 = toNode.y + 40;
                 const dx = (x2 - x1) / 2;
-                
+               
                 return (
                   <g key={conn.id} className="group cursor-pointer">
                     <path
@@ -522,7 +625,6 @@ const App = () => {
                 );
               })}
             </svg>
-
             {/* Nodes */}
             {nodes.map(node => {
               const type = BLOCK_TYPES[node.type];
@@ -546,12 +648,11 @@ const App = () => {
                       </button>
                     )}
                   </div>
-                  
+                 
                   <h4 className="text-xs font-bold uppercase tracking-wide truncate">{type.label}</h4>
                   <div className="text-[10px] text-slate-500 mb-4">{node.id}</div>
-
                   {type.inputs > 0 && (
-                    <div 
+                    <div
                       onMouseUp={(e) => endConnection(e, node.id)}
                       className={`absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-800 border-2 ${connectingFrom ? 'border-yellow-400 animate-pulse scale-125' : 'border-indigo-500'} flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30 transition-transform`}
                     >
@@ -559,7 +660,7 @@ const App = () => {
                     </div>
                   )}
                   {type.outputs > 0 && (
-                    <div 
+                    <div
                       onMouseDown={(e) => startConnection(e, node.id)}
                       className="absolute -right-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-800 border-2 border-indigo-500 flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30"
                     >
@@ -570,24 +671,23 @@ const App = () => {
               );
             })}
           </div>
-
           {/* Navigation Controls Overlay */}
           <div className="absolute bottom-6 left-6 flex flex-col gap-2 z-20">
             <div className="flex gap-2">
-              <button 
+              <button
                 onClick={resetView}
                 className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400 flex items-center gap-2"
               >
                 <Maximize size={18} />
                 <span className="text-[10px] font-bold uppercase tracking-widest">{Math.round(zoom * 100)}%</span>
               </button>
-              <button 
+              <button
                 onClick={() => setZoom(prev => Math.min(prev + 0.1, 2))}
                 className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400"
               >
                 <ZoomIn size={18} />
               </button>
-              <button 
+              <button
                 onClick={() => setZoom(prev => Math.max(prev - 0.1, 0.2))}
                 className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400"
               >
@@ -596,7 +696,6 @@ const App = () => {
             </div>
           </div>
         </div>
-
         {/* Right Sidebar: Config & Monitoring */}
         <aside className="w-80 border-l border-slate-800 bg-slate-900/50 flex flex-col z-10">
           <div className="h-[55%] p-6 flex flex-col border-b border-slate-800 overflow-hidden">
@@ -608,15 +707,14 @@ const App = () => {
                 Epoch {currentEpoch}/{maxEpochs}
               </div>
             </div>
-
             {/* Progress Bar */}
             <div className="w-full h-1.5 bg-slate-800 rounded-full mb-4 overflow-hidden">
-              <div 
-                className="h-full bg-indigo-500 transition-all duration-300 shadow-[0_0_10px_rgba(99,102,241,0.5)]" 
+              <div
+                className="h-full bg-indigo-500 transition-all duration-300 shadow-[0_0_10px_rgba(99,102,241,0.5)]"
                 style={{ width: `${trainingProgress}%` }}
               />
             </div>
-            
+           
             <div className="flex-1 bg-slate-900 rounded-xl p-2 border border-slate-800 overflow-hidden relative">
               {trainingData.length > 0 ? (
                 <ResponsiveContainer width="100%" height="100%">
@@ -624,7 +722,7 @@ const App = () => {
                     <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
                     <XAxis dataKey="epoch" hide />
                     <YAxis hide domain={[0, 'auto']} />
-                    <Tooltip 
+                    <Tooltip
                       contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #1e293b', borderRadius: '8px' }}
                       itemStyle={{ color: '#6366f1' }}
                     />
@@ -633,11 +731,10 @@ const App = () => {
                 </ResponsiveContainer>
               ) : (
                 <div className="h-full flex flex-col items-center justify-center text-slate-600 italic text-xs text-center p-4">
-                  Simulation idle. Ensure INPUT is linked to OUTPUT and click Train.
+                  Simulation idle. Ensure valid graph from INPUT to OUTPUT and click Train.
                 </div>
               )}
             </div>
-
             <div className="mt-4 grid grid-cols-2 gap-4">
               <div className="p-3 bg-slate-900/50 rounded-lg border border-slate-800 text-center">
                 <div className="text-[10px] uppercase text-slate-500 font-bold mb-1">Loss</div>
@@ -653,12 +750,10 @@ const App = () => {
               </div>
             </div>
           </div>
-
           <div className="flex-1 p-6 overflow-y-auto">
             <div className="flex items-center gap-2 mb-6 text-slate-400 uppercase text-xs font-bold tracking-widest">
               <Settings size={14} /> {selectedNode ? 'Block Parameters' : 'Sim Intelligence'}
             </div>
-
             {selectedNode ? (
               <div className="space-y-6">
                 <div className="flex items-center gap-3 p-3 bg-indigo-500/10 rounded-xl border border-indigo-500/20">
@@ -670,7 +765,6 @@ const App = () => {
                     <div className="text-[10px] text-indigo-300 font-mono uppercase">{selectedNode.id}</div>
                   </div>
                 </div>
-
                 <div className="space-y-4">
                   {Object.entries(selectedNode.config).map(([key, val]) => (
                     <div key={key} className="space-y-1.5">
@@ -692,25 +786,24 @@ const App = () => {
             ) : (
               <div className="space-y-4">
                 <div className="p-4 bg-slate-800/30 rounded-xl border border-slate-700/50 text-xs text-slate-400 space-y-3 leading-relaxed">
-                  <p><strong className="text-slate-200 block mb-1">Graph Dependency:</strong> Training logic now uses a BFS trace. If a node isn't part of the direct path from Data In to Data Out, its parameters won't contribute to capacity.</p>
-                  <p><strong className="text-slate-200 block mb-1">Architecture Physics:</strong> Adding layers increases depth, which increases the risk of Vanishing Gradients unless you add <span className="text-cyan-400">Residual</span> or <span className="text-slate-300">Norm</span> blocks.</p>
-                  <p><strong className="text-slate-200 block mb-1">Convergence:</strong> The loss floor is determined by the "bottleneck" (the smallest hidden dimension in your path).</p>
+                  <p><strong className="text-slate-200 block mb-1">Graph Analysis:</strong> Full DAG traversal with dim propagation and param calculation. Supports branches like residuals.</p>
+                  <p><strong className="text-slate-200 block mb-1">Realism:</strong> Parameter counts, scaling laws for loss floor, gradient stability per block type, bottleneck detection, under/overfit based on params/data ratio.</p>
+                  <p><strong className="text-slate-200 block mb-1">Tips:</strong> Match dims, add norms/residuals for deep nets, balance params for optimal convergence.</p>
                 </div>
               </div>
             )}
           </div>
         </aside>
       </main>
-
       <footer className="h-10 border-t border-slate-800 bg-slate-900/80 px-4 flex items-center justify-between text-[10px] text-slate-500 uppercase tracking-widest font-semibold">
         <div className="flex gap-4">
           <span>Active Nodes: {nodes.length}</span>
-          <span>Valid Path: {findPath('INPUT', 'OUTPUT') ? 'YES' : 'NO'}</span>
+          <span>Valid Graph: {isValidGraph ? 'YES' : 'NO'}</span>
+          <span>Total Params: {totalParams}</span>
           <span>LR: {learningRate}</span>
         </div>
-        <div>Scientific Arch-Sim Engine v2.0</div>
+        <div>Scientific Arch-Sim Engine v3.0</div>
       </footer>
-
       <style>{`
         @keyframes dash {
           to { stroke-dashoffset: -12; }
@@ -729,5 +822,4 @@ const App = () => {
     </div>
   );
 };
-
 export default App;