Update src/App.js

src/App.js

@@ -1,25 +1,619 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { 
+  Activity, 
+  Settings, 
+  Play, 
+  Square, 
+  Trash2, 
+  Layers, 
+  Cpu, 
+  Zap, 
+  Plus, 
+  Info,
+  Database,
+  Move,
+  Maximize,
+  Search,
+  ZoomIn,
+  ZoomOut
+} 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, 
+    inputs: 0,
+    config: { batchSize: 32, seqLen: 128, vocabSize: 5000 }
+  },
+  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, 
+    inputs: 1,
+    config: { heads: 8, headDim: 64, dropout: 0.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, 
+    inputs: 1,
+    config: { eps: 1e-5 }
+  },
+  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, 
+    inputs: 1,
+    config: { d_state: 16, d_conv: 4, expand: 2 }
+  },
+  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, 
+    inputs: 2,
+    config: {}
+  },
+  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([
+    { id: 'n1', type: 'INPUT', x: 50, y: 150, config: BLOCK_TYPES.INPUT.config },
+    { id: 'n2', type: 'EMBED', x: 250, y: 150, config: BLOCK_TYPES.EMBED.config },
+    { id: 'n3', type: 'OUTPUT', x: 450, y: 150, config: BLOCK_TYPES.OUTPUT.config },
+  ]);
+  const [connections, setConnections] = useState([
+    { 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 [isDraggingNode, setIsDraggingNode] = useState(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [connectingFrom, setConnectingFrom] = useState(null);
+  
+  const canvasRef = useRef(null);
+
+  // --- SIMULATION ENGINE ---
+  const runTrainingStep = (epoch) => {
+    const hasInput = nodes.some(n => n.type === 'INPUT');
+    const hasOutput = nodes.some(n => n.type === 'OUTPUT');
+    if (!hasInput || !hasOutput) return null;
+
+    let capacity = 0;
+    let vanishingGradientRisk = 1.0;
+    
+    nodes.forEach(n => {
+      if (n.type === 'EMBED') capacity += (n.config.dim || 512) * 0.1;
+      if (n.type === 'ATTN') capacity += (n.config.heads * n.config.headDim) * 0.5;
+      if (n.type === 'FFN') capacity += (n.config.mult * 512) * 0.3;
+      if (n.type === 'LSTM') {
+        capacity += (n.config.hidden || 512) * 0.4;
+        vanishingGradientRisk *= 0.85;
+      }
+      if (n.type === 'NORM') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk + 0.2);
+      if (n.type === 'RESIDUAL') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk + 0.3);
+    });
+
+    const trainability = Math.max(0.1, (capacity / 500) * vanishingGradientRisk);
+    const noise = (Math.random() - 0.5) * 0.05;
+    const lrFactor = learningRate > 0.01 ? (0.5 + Math.random()) : 1.0;
+    
+    const baseLoss = 8.0;
+    const decay = 0.05 * trainability * (1 / lrFactor);
+    const loss = baseLoss * Math.exp(-decay * epoch) + (0.2 / (epoch + 1)) + noise;
+    const acc = Math.min(0.99, 1 - (loss / baseLoss) + (Math.random() * 0.02));
+
+    return {
+      epoch,
+      loss: Math.max(0, loss).toFixed(4),
+      accuracy: Math.max(0, acc).toFixed(4)
+    };
+  };
+
+  useEffect(() => {
+    let interval;
+    if (isTraining) {
+      interval = setInterval(() => {
+        setTrainingData(prev => {
+          const nextEpoch = prev.length;
+          if (nextEpoch > 150) { setIsTraining(false); return prev; }
+          const step = runTrainingStep(nextEpoch);
+          return [...prev, step];
+        });
+      }, 150);
+    }
+    return () => clearInterval(interval);
+  }, [isTraining, nodes, connections, learningRate]);
+
+  // --- INTERACTION HANDLERS ---
+  const handleWheel = (e) => {
+    e.preventDefault();
+    const zoomSpeed = 0.001;
+    const newZoom = Math.min(Math.max(zoom - e.deltaY * zoomSpeed, 0.2), 2);
+    setZoom(newZoom);
+  };
+
+  const addNode = (type) => {
+    const newNode = {
+      id: `n${Date.now()}`,
+      type,
+      // Place node relative to current view center and zoom
+      x: (-viewOffset.x + 100) / zoom,
+      y: (-viewOffset.y + 100) / zoom,
+      config: { ...BLOCK_TYPES[type].config }
+    };
+    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);
+      setPanStart({ x: e.clientX - viewOffset.x, y: e.clientY - viewOffset.y });
+      setSelectedNodeId(null);
+    }
+  };
+
+  const handleNodeMouseDown = (e, id) => {
+    e.stopPropagation();
+    if (connectingFrom) return;
+    setIsDraggingNode(id);
+    const node = nodes.find(n => n.id === id);
+    // Dragging logic needs to account for zoom
+    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));
+    } else if (isPanning) {
+      setViewOffset({
+        x: e.clientX - panStart.x,
+        y: e.clientY - panStart.y
+      });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDraggingNode(null);
+    setIsPanning(false);
+  };
+
+  const startConnection = (e, id) => {
+    e.stopPropagation();
+    setConnectingFrom(id);
+  };
+
+  const endConnection = (e, id) => {
+    e.stopPropagation();
+    if (connectingFrom && connectingFrom !== id) {
+      if (!connections.some(c => c.from === connectingFrom && c.to === id)) {
+        setConnections([...connections, { id: `c${Date.now()}`, from: connectingFrom, to: id }]);
+      }
+    }
+    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;
 
-function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+    <div className="flex flex-col h-screen w-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
+      {/* Header */}
+      <header className="h-16 border-b border-slate-800 flex items-center justify-between px-6 bg-slate-900/50 backdrop-blur-md z-20">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-indigo-500 rounded-lg">
+            <Layers size={20} className="text-white" />
+          </div>
+          <h1 className="text-lg font-bold tracking-tight">Arch-Sim <span className="text-slate-500 font-normal">v1.2</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-xs text-slate-400 uppercase font-semibold">LR</span>
+            <input 
+              type="range" 
+              min="0.0001" 
+              max="0.05" 
+              step="0.0001" 
+              value={learningRate} 
+              onChange={(e) => setLearningRate(parseFloat(e.target.value))}
+              className="w-24 accent-indigo-500"
+            />
+            <span className="text-xs font-mono w-12">{learningRate}</span>
+          </div>
+          
+          <button 
+            onClick={() => {
+              if (isTraining) setIsTraining(false);
+              else {
+                setTrainingData([]);
+                setIsTraining(true);
+              }
+            }}
+            className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-all ${
+              isTraining ? 'bg-red-500 hover:bg-red-600' : 'bg-emerald-500 hover:bg-emerald-600'
+            }`}
+          >
+            {isTraining ? <><Square size={16} fill="currentColor" /> Stop</> : <><Play size={16} fill="currentColor" /> Start Training</>}
+          </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">
+          <div>
+            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Components</h3>
+            <div className="grid grid-cols-1 gap-2">
+              {Object.entries(BLOCK_TYPES).map(([key, type]) => (
+                <button
+                  key={key}
+                  onClick={() => addNode(key)}
+                  className="flex items-center gap-3 p-3 rounded-xl border border-slate-800 bg-slate-900/50 hover:border-indigo-500/50 hover:bg-slate-800/50 transition-all text-left group"
+                >
+                  <div className={`w-8 h-8 rounded-lg ${type.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform`}>
+                    <Cpu size={14} />
+                  </div>
+                  <div>
+                    <div className="text-sm font-semibold">{type.label}</div>
+                    <div className="text-[10px] text-slate-500 uppercase">{type.category}</div>
+                  </div>
+                  <Plus size={14} className="ml-auto text-slate-600 group-hover:text-indigo-400" />
+                </button>
+              ))}
+            </div>
+          </div>
+        </aside>
+
+        {/* Canvas Area */}
+        <div 
+          className="flex-1 relative bg-slate-950 overflow-hidden cursor-grab active:cursor-grabbing outline-none"
+          onMouseDown={handleCanvasMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onWheel={handleWheel}
+          ref={canvasRef}
+        >
+          {/* Infinite Dot Grid Background */}
+          <div 
+            id="grid-background"
+            className="absolute inset-0 pointer-events-none"
+            style={{ 
+              backgroundImage: `radial-gradient(circle, #1e293b 1px, transparent 1px)`,
+              backgroundSize: `${gridSize}px ${gridSize}px`,
+              backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px`
+            }}
+          />
+
+          {/* Viewport Transform Container */}
+          <div 
+            className="absolute inset-0 pointer-events-none"
+            style={{ 
+              transform: `translate(${viewOffset.x}px, ${viewOffset.y}px) scale(${zoom})`,
+              transformOrigin: '0 0'
+            }}
+          >
+            {/* Connections SVG */}
+            <svg className="absolute inset-0 w-[10000px] h-[10000px] pointer-events-auto overflow-visible">
+              <defs>
+                <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                  <path d="M 0 0 L 10 5 L 0 10 z" fill="#6366f1" />
+                </marker>
+              </defs>
+              {connections.map(conn => {
+                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
+                      d={`M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`}
+                      stroke="transparent"
+                      strokeWidth={20 / zoom} // Adjust hit area based on zoom
+                      fill="none"
+                      onClick={(e) => { e.stopPropagation(); deleteConnection(conn.id); }}
+                    />
+                    <path
+                      d={`M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`}
+                      stroke="#6366f1"
+                      strokeWidth={3}
+                      strokeDasharray={isTraining ? "8 4" : "0"}
+                      className={`${isTraining ? "animate-[dash_1s_linear_infinite]" : ""} group-hover:stroke-red-500 transition-colors`}
+                      fill="none"
+                      markerEnd="url(#arrow)"
+                      opacity="0.6"
+                    />
+                  </g>
+                );
+              })}
+            </svg>
+
+            {/* Nodes */}
+            {nodes.map(node => {
+              const type = BLOCK_TYPES[node.type];
+              const isSelected = selectedNodeId === node.id;
+              return (
+                <div
+                  key={node.id}
+                  style={{ left: node.x, top: node.y }}
+                  onMouseDown={(e) => handleNodeMouseDown(e, node.id)}
+                  className={`absolute w-40 p-4 rounded-xl border-2 transition-shadow cursor-move select-none pointer-events-auto ${
+                    isSelected ? 'border-indigo-500 bg-slate-800 shadow-[0_0_25px_rgba(99,102,241,0.2)]' : 'border-slate-800 bg-slate-900/90'
+                  }`}
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <div className={`w-8 h-8 rounded-lg ${type.color} flex items-center justify-center shadow-lg mb-2`}>
+                       <Cpu size={14} />
+                    </div>
+                    {isSelected && (
+                      <button onClick={(e) => { e.stopPropagation(); deleteNode(node.id); }} className="text-slate-500 hover:text-red-400">
+                        <Trash2 size={14} />
+                      </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>
+
+                  {/* Input Port */}
+                  {type.inputs > 0 && (
+                    <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' : 'border-indigo-500'} flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30`}
+                    >
+                      <div className="w-1.5 h-1.5 bg-white rounded-full" />
+                    </div>
+                  )}
+                  {/* Output Port */}
+                  {type.outputs > 0 && (
+                    <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"
+                    >
+                      <div className="w-1.5 h-1.5 bg-white rounded-full" />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Navigation Controls Overlay */}
+          <div className="absolute bottom-6 left-6 flex flex-col gap-2 z-20">
+            <div className="flex gap-2">
+              <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"
+                title="Reset View"
+              >
+                <Maximize size={18} />
+                <span className="text-[10px] font-bold uppercase tracking-widest">{Math.round(zoom * 100)}%</span>
+              </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 
+                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"
+              >
+                <ZoomOut size={18} />
+              </button>
+            </div>
+            <div className="p-3 bg-slate-900/80 border border-slate-700 rounded-lg shadow-xl text-[10px] text-slate-400 flex items-center gap-2">
+              <Search size={14} /> Scroll to zoom, Drag background to pan
+            </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-1/2 p-6 flex flex-col border-b border-slate-800">
+            <div className="flex items-center gap-2 mb-4 text-slate-400 uppercase text-xs font-bold tracking-widest">
+              <Activity size={14} /> Training Metrics
+            </div>
+            
+            <div className="flex-1 bg-slate-900 rounded-xl p-2 border border-slate-800 overflow-hidden">
+              {trainingData.length > 0 ? (
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={trainingData}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+                    <XAxis dataKey="epoch" hide />
+                    <YAxis hide domain={[0, 'auto']} />
+                    <Tooltip 
+                      contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #1e293b', borderRadius: '8px' }}
+                      itemStyle={{ color: '#6366f1' }}
+                    />
+                    <Line type="monotone" dataKey="loss" stroke="#6366f1" strokeWidth={2} dot={false} isAnimationActive={false} />
+                  </LineChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="h-full flex flex-col items-center justify-center text-slate-600 italic text-sm text-center">
+                  Simulation idle.
+                </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>
+                <div className="text-lg font-mono text-indigo-400">
+                  {trainingData.length > 0 ? trainingData[trainingData.length-1].loss : '0.0000'}
+                </div>
+              </div>
+              <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">Accuracy</div>
+                <div className="text-lg font-mono text-emerald-400">
+                  {trainingData.length > 0 ? `${(trainingData[trainingData.length-1].accuracy * 100).toFixed(1)}%` : '0.0%'}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="h-1/2 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 Config' : 'Project Info'}
+            </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">
+                  <div className={`w-8 h-8 rounded-lg ${BLOCK_TYPES[selectedNode.type].color} flex items-center justify-center`}>
+                    <Cpu size={14} />
+                  </div>
+                  <div>
+                    <div className="font-bold text-sm">{BLOCK_TYPES[selectedNode.type].label}</div>
+                    <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">
+                      <label className="text-[11px] font-bold text-slate-500 uppercase flex justify-between">
+                        {key} <span>{val}</span>
+                      </label>
+                      <input
+                        type={typeof val === 'number' ? 'range' : 'text'}
+                        min={1}
+                        max={1024}
+                        value={val}
+                        onChange={(e) => updateConfig(key, typeof val === 'number' ? parseInt(e.target.value) : e.target.value)}
+                        className="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <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">
+                  <p><strong className="text-slate-300">Navigation:</strong> Click and drag the background to pan. <span className="text-indigo-400 font-bold">Use mouse wheel to zoom.</span></p>
+                  <p><strong className="text-slate-300">Infinite Grid:</strong> The canvas background scales and repeats automatically as you navigate.</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>Blocks: {nodes.length}</span>
+          <span>Links: {connections.length}</span>
+          <span>Zoom: {(zoom * 100).toFixed(0)}%</span>
+        </div>
+        <div>Educational Arch-Sim Environment</div>
+      </footer>
+
+      <style>{`
+        @keyframes dash {
+          to { stroke-dashoffset: -12; }
+        }
+      `}</style>
     </div>
   );
-}
+};
 
-export default App;
+export default App;