Add bridge builder (not working) and asteroids

.buildpacks

@@ -0,0 +1,2 @@
+heroku/nodejs
+https://github.com/heroku/heroku-buildpack-static.git

README.md

@@ -1,73 +1,40 @@
-# React + TypeScript + Vite
+# Evolution
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A collection of interactive mini-applications demonstrating genetic algorithms, neural evolution, and AI learning techniques.
 
-Currently, two official plugins are available:
+**Live Demo:** [https://evolution.peterstockings.com/](https://evolution.peterstockings.com/)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## About
 
-## React Compiler
+This project features several mini-apps that showcase evolutionary algorithms and neural networks:
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+- **Snake AI**: Watch neural networks learn to play Snake through evolution
+- **Self-Driving Car**: AI learns to navigate a race track using genetic algorithms
+- **Lunar Lander**: Evolutionary training for optimal lunar landing with gimballed thrust control
+- **Bridge Builder**: Evolve bridge structures with stress visualization and physics
+- **Image Approximation**: Genetic algorithm that evolves shapes to approximate a target image
+- **NEAT Arena**: Neural evolution of augmenting topologies in a competitive environment
+- **Rogue Gen**: Procedural dungeon generation using evolutionary techniques
 
-## Expanding the ESLint configuration
+## Setup
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Prerequisites
+- [Bun](https://bun.sh/) runtime
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+### Installation
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+```bash
+# Install dependencies
+bun install
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+# Run development server
+bun run dev
+
+# Type check
+bun run typecheck
+
+# Build for production
+bun run build
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+The development server will start at `http://localhost:5173`

bun.lock

@@ -5,6 +5,10 @@
     "": {
       "name": "evolution",
       "dependencies": {
+        "@types/matter-js": "^0.20.2",
+        "matter-js": "^0.20.0",
+        "phaser": "^3.90.0",
+        "poly-decomp": "^0.3.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.12.0",
@@ -216,6 +220,8 @@
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
+    "@types/matter-js": ["@types/matter-js@0.20.2", "", {}, "sha512-3PPKy3QxvZ89h9+wdBV2488I1JLVs7DEpIkPvgO8JC1mUdiVSO37ZIvVctOTD7hIq8OAL2gJ3ugGSuUip6DhCw=="],
+
     "@types/node": ["@types/node@24.10.4", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg=="],
 
     "@types/react": ["@types/react@19.2.7", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg=="],
@@ -314,6 +320,8 @@
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
 
+    "eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
     "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
@@ -380,6 +388,8 @@
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
+    "matter-js": ["matter-js@0.20.0", "", {}, "sha512-iC9fYR7zVT3HppNnsFsp9XOoQdQN2tUyfaKg4CHLH8bN+j6GT4Gw7IH2rP0tflAebrHFw730RR3DkVSZRX8hwA=="],
+
     "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -402,10 +412,14 @@
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
+    "phaser": ["phaser@3.90.0", "", { "dependencies": { "eventemitter3": "^5.0.1" } }, "sha512-/cziz/5ZIn02uDkC9RzN8VF9x3Gs3XdFFf9nkiMEQT3p7hQlWuyjy4QWosU802qqno2YSLn2BfqwOKLv/sSVfQ=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
 
+    "poly-decomp": ["poly-decomp@0.3.0", "", {}, "sha512-hWeBxGzPYiybmI4548Fca7Up/0k1qS5+79cVHI9+H33dKya5YNb9hxl0ZnDaDgvrZSuYFBhkCK/HOnqN7gefkQ=="],
+
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],

e2e_log.txt

@@ -0,0 +1,9 @@
+Starting Test...
+Starting E2E Evolution Test (50 Gens)...
+Gen 0: Best: 56.73, Avg: 22.47
+Gen 10: Best: 58.09, Avg: 22.27
+Gen 20: Best: 59.51, Avg: 21.88
+Gen 30: Best: 56.22, Avg: 26.25
+Gen 40: Best: 60.17, Avg: 25.75
+Gen 49: Best: 62.23, Avg: 24.81
+Evolution Result: 56.73 -> 62.23

package.json

@@ -7,9 +7,14 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@types/matter-js": "^0.20.2",
+    "matter-js": "^0.20.0",
+    "phaser": "^3.90.0",
+    "poly-decomp": "^0.3.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.12.0"

src/App.css

@@ -1,5 +1,6 @@
 .app-layout {
   display: flex;
+  flex-direction: column;
   width: 100vw;
   height: 100vh;
   overflow: hidden;

src/App.tsx

@@ -2,6 +2,12 @@ import { Routes, Route, Navigate } from 'react-router-dom';
 import Sidebar from './components/Sidebar';
 import ImageApprox from './apps/ImageApprox/ImageApprox';
 import SnakeAI from './apps/SnakeAI/SnakeAI';
+import RogueGenApp from './apps/RogueGen/RogueGenApp';
+import NeatArena from './apps/NeatArena/NeatArena';
+import LunarLanderApp from './apps/LunarLander/LunarLanderApp';
+import { SelfDrivingCarApp } from './apps/SelfDrivingCar/SelfDrivingCarApp';
+import BridgeBuilderApp from './apps/BridgeBuilder/BridgeBuilderApp';
+import AsteroidsAI from './apps/AsteroidsAI/AsteroidsApp';
 import './App.css';
 
 function App() {
@@ -13,6 +19,12 @@ function App() {
           <Route path="/" element={<Navigate to="/image-approx" replace />} />
           <Route path="/image-approx" element={<ImageApprox />} />
           <Route path="/snake-ai" element={<SnakeAI />} />
+          <Route path="/rogue-gen" element={<RogueGenApp />} />
+          <Route path="/neat-arena" element={<NeatArena />} />
+          <Route path="/lunar-lander" element={<LunarLanderApp />} />
+          <Route path="/self-driving-car" element={<SelfDrivingCarApp />} />
+          <Route path="/bridge-builder" element={<BridgeBuilderApp />} />
+          <Route path="/asteroids-ai" element={<AsteroidsAI />} />
           <Route path="*" element={<div>App not found</div>} />
         </Routes>
       </main>

src/apps/AsteroidsAI/Asteroids.css

@@ -0,0 +1,125 @@
+.asteroids-app-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 1rem;
+    padding: 1rem;
+    background: linear-gradient(135deg, #0a0a15 0%, #1a1a2e 100%);
+}
+
+.top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.controls-section {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.btn-toggle {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #4488ff 0%, #6666ff 100%);
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(68, 136, 255, 0.3);
+}
+
+.btn-toggle:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(68, 136, 255, 0.4);
+}
+
+.btn-toggle.active {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ff8888 100%);
+    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
+}
+
+.btn-reset {
+    background: linear-gradient(135deg, #888888 0%, #aaaaaa 100%);
+    box-shadow: 0 4px 15px rgba(136, 136, 136, 0.3);
+}
+
+.btn-reset:hover {
+    box-shadow: 0 6px 20px rgba(136, 136, 136, 0.4);
+}
+
+.stats-section {
+    display: flex;
+    gap: 1rem;
+}
+
+.stat-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    min-width: 120px;
+}
+
+.stat-label {
+    font-size: 0.85rem;
+    color: #aaaaaa;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.25rem;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #ffffff;
+    font-family: 'Courier New', monospace;
+}
+
+.stat-value.highlight {
+    color: #ffaa00;
+    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
+}
+
+.graph-panel {
+    flex: 0 0 200px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.vis-column {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+}
+
+.main-view {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.main-view canvas {
+    display: block;
+    border-radius: 8px;
+}

src/apps/AsteroidsAI/AsteroidsApp.tsx

@@ -0,0 +1,82 @@
+import { useRef, useEffect } from 'react';
+import AppContainer from '../../components/AppContainer';
+import { createAsteroidsViewer, getAsteroidsScene } from './AsteroidsScene';
+import FitnessGraph from '../NeatArena/FitnessGraph';
+import { useEvolutionWorker } from './useEvolutionWorker';
+import ConfigPanel from './ConfigPanel';
+import './Asteroids.css';
+
+export default function AsteroidsApp() {
+    const { isTraining, stats, fitnessHistory, bestGenome, toggleTraining, handleReset } = useEvolutionWorker();
+    const phaserContainerRef = useRef<HTMLDivElement>(null);
+    const phaserGameRef = useRef<Phaser.Game | null>(null);
+
+    // Phaser Initialization
+    useEffect(() => {
+        if (!phaserContainerRef.current) return;
+        const game = createAsteroidsViewer(phaserContainerRef.current);
+        phaserGameRef.current = game;
+        return () => {
+            game.destroy(true);
+            phaserGameRef.current = null;
+        };
+    }, []);
+
+    // Exhibition Loop
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (!phaserGameRef.current) return;
+            const scene = getAsteroidsScene(phaserGameRef.current);
+            if (!scene) return;
+
+            // Start new match if game over and we have a genome
+            const sceneAny = scene as any;
+            if (bestGenome && (!sceneAny.sim || sceneAny.sim.isGameOver)) {
+                scene.startMatch(bestGenome, stats.generation);
+            }
+        }, 100);
+        return () => clearInterval(interval);
+    }, [bestGenome, stats.generation]);
+
+    return (
+        <AppContainer title="Asteroids AI (Dense NN)">
+            <div className="asteroids-app-layout">
+                <div className="top-bar">
+                    <div className="controls-section">
+                        <button className={`btn-toggle ${isTraining ? 'active' : ''}`} onClick={toggleTraining}>
+                            {isTraining ? '⏸ Pause' : '▶ Start Evolution'}
+                        </button>
+                        <button className="btn-toggle btn-reset" onClick={handleReset}>
+                            🔄 Reset
+                        </button>
+                    </div>
+
+                    <div className="stats-section">
+                        <StatCard label="Generation" value={stats.generation} />
+                        <StatCard label="Best Fit" value={stats.maxFitness.toFixed(2)} highlight />
+                        <StatCard label="Avg Fit" value={stats.avgFitness.toFixed(2)} />
+                    </div>
+                </div>
+
+                <ConfigPanel />
+
+                <div className="graph-panel">
+                    <FitnessGraph history={fitnessHistory} />
+                </div>
+
+                <div className="vis-column">
+                    <div className="main-view" ref={phaserContainerRef} />
+                </div>
+            </div>
+        </AppContainer>
+    );
+}
+
+function StatCard({ label, value, highlight = false }: { label: string, value: string | number, highlight?: boolean }) {
+    return (
+        <div className="stat-card">
+            <div className="stat-label">{label}</div>
+            <div className={`stat-value ${highlight ? 'highlight' : ''}`}>{value}</div>
+        </div>
+    );
+}

src/apps/AsteroidsAI/AsteroidsScene.ts

@@ -0,0 +1,288 @@
+import Phaser from 'phaser';
+import { AsteroidsSimulation, WORLD_WIDTH, WORLD_HEIGHT } from './AsteroidsSimulation';
+import { DenseNetwork } from './DenseNetwork';
+import { CONFIG, getLayerSizes } from './config';
+
+export class AsteroidsScene extends Phaser.Scene {
+    private sim: AsteroidsSimulation | null = null;
+    private network: DenseNetwork | null = null;
+    private generation = 0;
+    
+    // Graphics
+    private shipGraphics!: Phaser.GameObjects.Graphics;
+    private asteroidGraphics!: Phaser.GameObjects.Graphics;
+    private bulletGraphics!: Phaser.GameObjects.Graphics;
+    private debugGraphics!: Phaser.GameObjects.Graphics;
+    
+    // Particle emitters
+    private thrusterEmitter!: Phaser.GameObjects.Particles.ParticleEmitter;
+    
+    // HUD
+    private scoreText!: Phaser.GameObjects.Text;
+    private generationText!: Phaser.GameObjects.Text;
+    
+    private showDebug = CONFIG.SHOW_RAYCASTS;
+
+    constructor() {
+        super({ key: 'AsteroidsScene' });
+    }
+
+    preload() {
+        // Create particle texture using graphics
+        const graphics = this.make.graphics({});
+        graphics.fillStyle(0xffffff, 1);
+        graphics.fillCircle(8, 8, 8);
+        graphics.generateTexture('particle', 16, 16);
+        graphics.destroy();
+    }
+
+    create() {
+        // Background
+        this.cameras.main.setBackgroundColor('#0a0a15');
+        
+        // Graphics layers
+        this.debugGraphics = this.add.graphics();
+        this.asteroidGraphics = this.add.graphics();
+        this.bulletGraphics = this.add.graphics();
+        this.shipGraphics = this.add.graphics();
+        
+        // Particle system for thrusters
+        this.thrusterEmitter = this.add.particles(0, 0, 'particle', {
+            speed: { min: 20, max: 50 },
+            scale: { start: 0.6, end: 0 },
+            alpha: { start: 0.8, end: 0 },
+            lifespan: 300,
+            blendMode: 'ADD',
+            tint: [0x4488ff, 0x88ccff, 0xffffff],
+            frequency: 30,
+            emitting: false
+        });
+        
+        // HUD
+        this.scoreText = this.add.text(10, 10, 'Score: 0', {
+            fontSize: '20px',
+            color: '#ffffff',
+            fontFamily: 'monospace'
+        });
+        
+        this.generationText = this.add.text(10, 40, 'Gen: 0', {
+            fontSize: '16px',
+            color: '#aaaaaa',
+            fontFamily: 'monospace'
+        });
+    }
+
+    update() {
+        if (!this.sim || !this.network) return;
+        
+        // Get AI decision
+        const inputs = this.sim.getObservation();
+        const outputs = this.network.predict(inputs);
+        
+        // Update simulation
+        const isRunning = this.sim.update(outputs);
+        
+        // Render
+        this.render();
+        
+        // Update HUD
+        this.scoreText.setText(`Score: ${this.sim.score}`);
+        this.generationText.setText(`Gen: ${this.generation} | Time: ${this.sim.timeSteps}`);
+        
+        // Thruster particles
+        if (outputs[1] > 0.1) { // Thrust active
+            const angle = this.sim.ship.angle;
+            const offset = 15;
+            const pos = {
+                x: this.sim.ship.position.x - Math.cos(angle) * offset,
+                y: this.sim.ship.position.y - Math.sin(angle) * offset
+            };
+            
+            this.thrusterEmitter.setPosition(pos.x, pos.y);
+            this.thrusterEmitter.setAngle(Phaser.Math.RadToDeg(angle + Math.PI));
+            this.thrusterEmitter.emitting = true;
+        } else {
+            this.thrusterEmitter.emitting = false;
+        }
+        
+        // Game over - create explosion
+        if (!isRunning && this.sim.isGameOver) {
+            this.createExplosion(this.sim.ship.position.x, this.sim.ship.position.y, 0xff4444, 30);
+        }
+    }
+
+    private render() {
+        if (!this.sim) return;
+        
+        // Clear graphics
+        this.shipGraphics.clear();
+        this.asteroidGraphics.clear();
+        this.bulletGraphics.clear();
+        this.debugGraphics.clear();
+        
+        // Draw ship
+        this.drawShip();
+        
+        // Draw asteroids
+        this.drawAsteroids();
+        
+        // Draw bullets
+        this.drawBullets();
+        
+        // Draw debug info
+        if (this.showDebug) {
+            this.drawDebug();
+        }
+    }
+
+    private drawShip() {
+        if (!this.sim) return;
+        
+        const { position, angle } = this.sim.ship;
+        
+        this.shipGraphics.lineStyle(2, 0xffffff, 1);
+        this.shipGraphics.fillStyle(0x4488ff, 0.3);
+        
+        // Triangle pointing in direction of angle
+        const size = 15;
+        const points = [
+            { x: Math.cos(angle) * size, y: Math.sin(angle) * size },
+            { x: Math.cos(angle + 2.5) * size * 0.6, y: Math.sin(angle + 2.5) * size * 0.6 },
+            { x: Math.cos(angle - 2.5) * size * 0.6, y: Math.sin(angle - 2.5) * size * 0.6 }
+        ];
+        
+        this.shipGraphics.beginPath();
+        this.shipGraphics.moveTo(position.x + points[0].x, position.y + points[0].y);
+        this.shipGraphics.lineTo(position.x + points[1].x, position.y + points[1].y);
+        this.shipGraphics.lineTo(position.x + points[2].x, position.y + points[2].y);
+        this.shipGraphics.closePath();
+        this.shipGraphics.fillPath();
+        this.shipGraphics.strokePath();
+    }
+
+    private drawAsteroids() {
+        if (!this.sim) return;
+        
+        for (const asteroid of this.sim.asteroids) {
+            const vertices = asteroid.body.vertices;
+            
+            // Check if this asteroid is detected by raycasts
+            const isDetected = this.sim.detectedAsteroids.has(asteroid.body);
+            
+            // Color based on detection status and size
+            let color: number;
+            let fillAlpha: number;
+            
+            if (isDetected) {
+                // Detected asteroids are highlighted in orange
+                color = 0xff8800;
+                fillAlpha = 0.4;
+            } else {
+                // Undetected asteroids are gray
+                color = asteroid.size === 'large' ? 0x888888 : 
+                       asteroid.size === 'medium' ? 0x999999 : 0xaaaaaa;
+                fillAlpha = 0.2;
+            }
+            
+            this.asteroidGraphics.lineStyle(2, color, 1);
+            this.asteroidGraphics.fillStyle(color, fillAlpha);
+            
+            this.asteroidGraphics.beginPath();
+            this.asteroidGraphics.moveTo(vertices[0].x, vertices[0].y);
+            for (let i = 1; i < vertices.length; i++) {
+                this.asteroidGraphics.lineTo(vertices[i].x, vertices[i].y);
+            }
+            this.asteroidGraphics.closePath();
+            this.asteroidGraphics.fillPath();
+            this.asteroidGraphics.strokePath();
+        }
+    }
+
+    private drawBullets() {
+        if (!this.sim) return;
+        
+        this.bulletGraphics.fillStyle(0xffff00, 1);
+        
+        for (const bullet of this.sim.bullets) {
+            const { position } = bullet.body;
+            this.bulletGraphics.fillCircle(position.x, position.y, 3);
+        }
+    }
+
+    private drawDebug() {
+        if (!this.sim) return;
+        
+        // Draw raycasts using actual raycast data from simulation
+        const { position } = this.sim.ship;
+        
+        for (const raycast of this.sim.lastRaycasts) {
+            const endX = position.x + Math.cos(raycast.angle) * raycast.distance * CONFIG.RAYCAST_LENGTH_MULTIPLIER;
+            const endY = position.y + Math.sin(raycast.angle) * raycast.distance * CONFIG.RAYCAST_LENGTH_MULTIPLIER;
+            
+            this.debugGraphics.lineStyle(1, CONFIG.RAYCAST_COLOR, CONFIG.RAYCAST_ALPHA);
+            this.debugGraphics.lineBetween(position.x, position.y, endX, endY);
+        }
+    }
+
+    private createExplosion(x: number, y: number, tint: number, count: number) {
+        const emitter = this.add.particles(x, y, 'particle', {
+            speed: { min: 50, max: 200 },
+            scale: { start: 1, end: 0 },
+            alpha: { start: 1, end: 0 },
+            lifespan: 600,
+            blendMode: 'ADD',
+            tint: [tint, 0xff8800, 0xffff00],
+            quantity: count,
+            emitting: false
+        });
+        
+        emitter.explode(count);
+        
+        // Clean up after animation
+        this.time.delayedCall(1000, () => {
+            emitter.destroy();
+        });
+    }
+
+    public startMatch(genomeData: { weights: number[] }, generation: number) {
+        this.generation = generation;
+        
+        // Create new simulation
+        this.sim = new AsteroidsSimulation(generation);
+        
+        // Create network from genome using config
+        const weights = new Float32Array(genomeData.weights);
+        this.network = new DenseNetwork(getLayerSizes(), weights);
+        
+        // Stop thruster particles
+        this.thrusterEmitter.emitting = false;
+    }
+
+    public toggleDebug() {
+        this.showDebug = !this.showDebug;
+    }
+}
+
+export function createAsteroidsViewer(parent: HTMLElement): Phaser.Game {
+    const config: Phaser.Types.Core.GameConfig = {
+        type: Phaser.AUTO,
+        width: WORLD_WIDTH,
+        height: WORLD_HEIGHT,
+        parent: parent,
+        scene: AsteroidsScene,
+        physics: {
+            default: 'matter',
+            matter: {
+                gravity: { x: 0, y: 0 },
+                debug: false
+            }
+        },
+        backgroundColor: '#0a0a15'
+    };
+    
+    return new Phaser.Game(config);
+}
+
+export function getAsteroidsScene(game: Phaser.Game): AsteroidsScene | null {
+    return game.scene.getScene('AsteroidsScene') as AsteroidsScene;
+}

src/apps/AsteroidsAI/AsteroidsSimulation.ts

@@ -0,0 +1,420 @@
+import Matter from 'matter-js';
+import { CONFIG } from './config';
+
+export const WORLD_WIDTH = CONFIG.WORLD_WIDTH;
+export const WORLD_HEIGHT = CONFIG.WORLD_HEIGHT;
+
+type AsteroidSize = 'large' | 'medium' | 'small';
+
+interface Bullet {
+    body: Matter.Body;
+    lifetime: number;
+}
+
+interface Asteroid {
+    body: Matter.Body;
+    size: AsteroidSize;
+}
+
+export class AsteroidsSimulation {
+    public engine: Matter.Engine;
+    public ship!: Matter.Body;
+    public bullets: Bullet[] = [];
+    public asteroids: Asteroid[] = [];
+    public lastRaycasts: { angle: number; distance: number }[] = [];
+    public detectedAsteroids: Set<Matter.Body> = new Set(); // Track which asteroids are detected
+    
+    public isGameOver = false;
+    public score = 0;
+    public timeSteps = 0;
+    public readonly maxTimeSteps = CONFIG.MAX_TIME_STEPS;
+    public shotsFired = 0;
+    public shotsHit = 0;
+    public asteroidsDestroyed = 0;
+    public totalDistanceTraveled = 0; // Track movement
+    
+    private lastShootTime = 0;
+    private readonly shootCooldown = CONFIG.SHOOT_COOLDOWN;
+    private readonly seed: number;
+    private lastPosition = { x: 0, y: 0 }; // For distance tracking
+
+    constructor(seed: number = 0) {
+        this.seed = seed;
+        this.engine = Matter.Engine.create({ enableSleeping: false });
+        this.engine.gravity.y = 0; // Space has no gravity
+        
+        // Custom PRNG
+        let s = seed;
+        const random = () => {
+            s = (s * 9301 + 49297) % 233280;
+            return s / 233280;
+        };
+        
+        this.setupWorld(random);
+        Matter.Events.on(this.engine, 'collisionStart', (e) => this.handleCollisions(e));
+    }
+
+    private setupWorld(random: () => number) {
+        // Create ship at center
+        const shipVertices = [
+            { x: 0, y: -CONFIG.SHIP_SIZE },
+            { x: -CONFIG.SHIP_SIZE * 0.6, y: CONFIG.SHIP_SIZE },
+            { x: CONFIG.SHIP_SIZE * 0.6, y: CONFIG.SHIP_SIZE }
+        ];
+        
+        this.ship = Matter.Bodies.fromVertices(
+            WORLD_WIDTH / 2,
+            WORLD_HEIGHT / 2,
+            [shipVertices],
+            {
+                friction: 0,
+                frictionAir: CONFIG.SHIP_FRICTION_AIR,
+                restitution: 0,
+                label: 'ship',
+                angle: -Math.PI / 2
+            }
+        );
+        
+        Matter.Body.setMass(this.ship, CONFIG.SHIP_MASS);
+        Matter.World.add(this.engine.world, [this.ship]);
+        
+        // Spawn initial asteroids
+        this.spawnInitialAsteroids(random);
+    }
+
+    private spawnInitialAsteroids(random: () => number) {
+        const numAsteroids = CONFIG.ASTEROID_INITIAL_COUNT;
+        
+        for (let i = 0; i < numAsteroids; i++) {
+            // Spawn at edges, away from center
+            const angle = (i / numAsteroids) * Math.PI * 2;
+            const distance = Math.max(WORLD_WIDTH, WORLD_HEIGHT) / 2 + CONFIG.ASTEROID_SPAWN_DISTANCE;
+            const x = WORLD_WIDTH / 2 + Math.cos(angle) * distance;
+            const y = WORLD_HEIGHT / 2 + Math.sin(angle) * distance;
+            
+            this.spawnAsteroid(x, y, 'large', random);
+        }
+    }
+
+    private spawnAsteroid(x: number, y: number, size: AsteroidSize, random: () => number) {
+        const radius = size === 'large' ? CONFIG.ASTEROID_SIZE_LARGE : 
+                      size === 'medium' ? CONFIG.ASTEROID_SIZE_MEDIUM : 
+                      CONFIG.ASTEROID_SIZE_SMALL;
+        
+        // Create irregular asteroid shape
+        const sides = 8 + Math.floor(random() * 4);
+        const vertices = [];
+        for (let i = 0; i < sides; i++) {
+            const angle = (i / sides) * Math.PI * 2;
+            const r = radius * (0.7 + random() * 0.3);
+            vertices.push({
+                x: Math.cos(angle) * r,
+                y: Math.sin(angle) * r
+            });
+        }
+        
+        const body = Matter.Bodies.fromVertices(x, y, [vertices], {
+            friction: 0,
+            frictionAir: 0,
+            restitution: 1,
+            label: 'asteroid'
+        });
+        
+        // Asteroid speeds from config
+        const speed = size === 'large' ? CONFIG.ASTEROID_SPEED_LARGE : 
+                     size === 'medium' ? CONFIG.ASTEROID_SPEED_MEDIUM : 
+                     CONFIG.ASTEROID_SPEED_SMALL;
+        
+        // ANTI-CAMPING: Make asteroids move AWAY from center
+        // This forces the AI to chase them instead of camping
+        const centerX = WORLD_WIDTH / 2;
+        const centerY = WORLD_HEIGHT / 2;
+        const angleFromCenter = Math.atan2(y - centerY, x - centerX);
+        
+        // Add some randomness but bias away from center
+        const randomOffset = (random() - 0.5) * Math.PI * 0.5; // ±45 degrees
+        const vAngle = angleFromCenter + randomOffset;
+        
+        Matter.Body.setVelocity(body, {
+            x: Math.cos(vAngle) * speed,
+            y: Math.sin(vAngle) * speed
+        });
+        Matter.Body.setAngularVelocity(body, (random() - 0.5) * CONFIG.ASTEROID_ANGULAR_VELOCITY);
+        
+        this.asteroids.push({ body, size });
+        Matter.World.add(this.engine.world, [body]);
+    }
+
+    private handleCollisions(event: Matter.IEventCollision<Matter.Engine>) {
+        if (this.isGameOver) return;
+        
+        event.pairs.forEach(pair => {
+            const { bodyA, bodyB } = pair;
+            
+            // Ship hit asteroid
+            if ((bodyA === this.ship && bodyB.label === 'asteroid') ||
+                (bodyB === this.ship && bodyA.label === 'asteroid')) {
+                this.isGameOver = true;
+                return;
+            }
+            
+            // Bullet hit asteroid
+            const bullet = this.bullets.find(b => b.body === bodyA || b.body === bodyB);
+            const asteroidHit = this.asteroids.find(a => a.body === bodyA || a.body === bodyB);
+            
+            if (bullet && asteroidHit) {
+                this.handleAsteroidHit(asteroidHit, bullet);
+            }
+        });
+    }
+
+    private handleAsteroidHit(asteroid: Asteroid, bullet: Bullet) {
+        this.shotsHit++;
+        this.asteroidsDestroyed++;
+        
+        // Remove bullet
+        Matter.World.remove(this.engine.world, bullet.body);
+        this.bullets = this.bullets.filter(b => b !== bullet);
+        
+        // Score based on size from config
+        const points = asteroid.size === 'large' ? CONFIG.SCORE_LARGE : 
+                      asteroid.size === 'medium' ? CONFIG.SCORE_MEDIUM : 
+                      CONFIG.SCORE_SMALL;
+        this.score += points;
+        
+        // Split asteroid
+        const pos = asteroid.body.position;
+        Matter.World.remove(this.engine.world, asteroid.body);
+        this.asteroids = this.asteroids.filter(a => a !== asteroid);
+        
+        // Custom PRNG for splitting
+        let s = this.seed + this.timeSteps;
+        const random = () => {
+            s = (s * 9301 + 49297) % 233280;
+            return s / 233280;
+        };
+        
+        if (asteroid.size === 'large') {
+            // Split into 3 medium
+            for (let i = 0; i < 3; i++) {
+                const angle = (i / 3) * Math.PI * 2;
+                const offset = 30;
+                this.spawnAsteroid(
+                    pos.x + Math.cos(angle) * offset,
+                    pos.y + Math.sin(angle) * offset,
+                    'medium',
+                    random
+                );
+            }
+        } else if (asteroid.size === 'medium') {
+            // Split into 2 small
+            for (let i = 0; i < 2; i++) {
+                const angle = (i / 2) * Math.PI * 2;
+                const offset = 20;
+                this.spawnAsteroid(
+                    pos.x + Math.cos(angle) * offset,
+                    pos.y + Math.sin(angle) * offset,
+                    'small',
+                    random
+                );
+            }
+        }
+        // Small asteroids just disappear
+    }
+
+    public update(actions: number[]): boolean {
+        if (this.isGameOver) return false;
+        
+        // Track distance traveled
+        const dx = this.ship.position.x - this.lastPosition.x;
+        const dy = this.ship.position.y - this.lastPosition.y;
+        this.totalDistanceTraveled += Math.sqrt(dx * dx + dy * dy);
+        this.lastPosition = { x: this.ship.position.x, y: this.ship.position.y };
+        
+        // Apply AI controls.maxTimeSteps) {
+        if (++this.timeSteps > this.maxTimeSteps) {
+            this.isGameOver = true;
+            return false;
+        }
+        
+        // Actions: [rotation (-1 to 1), thrust (0 to 1), shoot (0 to 1)]
+        const rotation = actions[0];
+        const thrust = Math.max(0, Math.min(1, (actions[1] + 1) / 2));
+        const shoot = actions[2] > 0;
+        
+        this.applyControls(rotation, thrust, shoot);
+        this.updateBullets();
+        this.wrapBodies();
+        
+        Matter.Engine.update(this.engine, 1000 / 60);
+        
+        // Check if all asteroids destroyed (respawn)
+        if (this.asteroids.length === 0) {
+            let s = this.seed + this.timeSteps;
+            const random = () => {
+                s = (s * 9301 + 49297) % 233280;
+                return s / 233280;
+            };
+            this.spawnInitialAsteroids(random);
+        }
+        
+        return !this.isGameOver;
+    }
+
+    private applyControls(rotation: number, thrust: number, shoot: boolean) {
+        // Rotation from config
+        Matter.Body.setAngularVelocity(this.ship, rotation * CONFIG.ROTATION_SPEED);
+        
+        // Thrust from config
+        if (thrust > 0.1) {
+            const angle = this.ship.angle;
+            Matter.Body.applyForce(this.ship, this.ship.position, {
+                x: Math.cos(angle) * CONFIG.THRUST_FORCE * thrust,
+                y: Math.sin(angle) * CONFIG.THRUST_FORCE * thrust
+            });
+        }
+        
+        // Shoot
+        if (shoot && this.timeSteps - this.lastShootTime >= this.shootCooldown) {
+            this.shootBullet();
+            this.lastShootTime = this.timeSteps;
+        }
+    }
+
+    private shootBullet() {
+        this.shotsFired++;
+        
+        const angle = this.ship.angle;
+        const offset = CONFIG.SHIP_SIZE;
+        const pos = {
+            x: this.ship.position.x + Math.cos(angle) * offset,
+            y: this.ship.position.y + Math.sin(angle) * offset
+        };
+        
+        const bullet = Matter.Bodies.circle(pos.x, pos.y, CONFIG.BULLET_RADIUS, {
+            friction: 0,
+            frictionAir: 0,
+            restitution: 0,
+            label: 'bullet',
+            isSensor: false
+        });
+        
+        const velocity = {
+            x: this.ship.velocity.x + Math.cos(angle) * CONFIG.BULLET_SPEED,
+            y: this.ship.velocity.y + Math.sin(angle) * CONFIG.BULLET_SPEED
+        };
+        Matter.Body.setVelocity(bullet, velocity);
+        
+        this.bullets.push({ body: bullet, lifetime: CONFIG.BULLET_LIFETIME });
+        Matter.World.add(this.engine.world, [bullet]);
+    }
+
+    private updateBullets() {
+        for (let i = this.bullets.length - 1; i >= 0; i--) {
+            this.bullets[i].lifetime--;
+            if (this.bullets[i].lifetime <= 0) {
+                Matter.World.remove(this.engine.world, this.bullets[i].body);
+                this.bullets.splice(i, 1);
+            }
+        }
+    }
+
+    private wrapBodies() {
+        const wrap = (body: Matter.Body) => {
+            const pos = body.position;
+            let wrapped = false;
+            
+            if (pos.x < 0) {
+                Matter.Body.setPosition(body, { x: WORLD_WIDTH, y: pos.y });
+                wrapped = true;
+            } else if (pos.x > WORLD_WIDTH) {
+                Matter.Body.setPosition(body, { x: 0, y: pos.y });
+                wrapped = true;
+            }
+            
+            if (pos.y < 0) {
+                Matter.Body.setPosition(body, { x: pos.x, y: WORLD_HEIGHT });
+                wrapped = true;
+            } else if (pos.y > WORLD_HEIGHT) {
+                Matter.Body.setPosition(body, { x: pos.x, y: 0 });
+                wrapped = true;
+            }
+            
+            return wrapped;
+        };
+        
+        wrap(this.ship);
+        this.asteroids.forEach(a => wrap(a.body));
+        this.bullets.forEach(b => wrap(b.body));
+    }
+
+    public getObservation(): number[] {
+        // Raycasts for asteroid detection (configurable count)
+        const raycasts = this.getRaycasts();
+        
+        // Ship state
+        const { velocity, angularVelocity, angle } = this.ship;
+        
+        return [
+            ...raycasts, // distance to nearest asteroid in each direction
+            velocity.x / 10,
+            velocity.y / 10,
+            angularVelocity / 0.5,
+            Math.sin(angle), // Encode angle as sin/cos for continuity
+            Math.cos(angle)
+        ];
+    }
+
+    private getRaycasts(): number[] {
+        const numRays = CONFIG.NUM_RAYCASTS;
+        const maxDistance = Math.max(WORLD_WIDTH, WORLD_HEIGHT);
+        const results: number[] = [];
+        this.lastRaycasts = []; // Store for visualization
+        this.detectedAsteroids.clear(); // Clear previous detections
+        
+        for (let i = 0; i < numRays; i++) {
+            const rayAngle = this.ship.angle + (i / numRays) * Math.PI * 2;
+            let minDist = 1.0; // Normalized (1.0 = no asteroid detected)
+            let closestAsteroid: Matter.Body | null = null;
+            
+            // Check distance to each asteroid
+            for (const asteroid of this.asteroids) {
+                const dx = asteroid.body.position.x - this.ship.position.x;
+                const dy = asteroid.body.position.y - this.ship.position.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                
+                // Check if asteroid is in this ray's direction
+                const asteroidAngle = Math.atan2(dy, dx);
+                let angleDiff = asteroidAngle - rayAngle;
+                
+                // Normalize angle difference to [-PI, PI]
+                while (angleDiff > Math.PI) angleDiff -= Math.PI * 2;
+                while (angleDiff < -Math.PI) angleDiff += Math.PI * 2;
+                
+                // If within ray cone
+                if (Math.abs(angleDiff) < Math.PI / numRays) {
+                    const normalizedDist = Math.min(1.0, dist / maxDistance);
+                    if (normalizedDist < minDist) {
+                        minDist = normalizedDist;
+                        closestAsteroid = asteroid.body;
+                    }
+                }
+            }
+            
+            // Mark detected asteroid
+            if (closestAsteroid) {
+                this.detectedAsteroids.add(closestAsteroid);
+            }
+            
+            // Store raycast data for visualization
+            this.lastRaycasts.push({
+                angle: rayAngle,
+                distance: minDist * maxDistance
+            });
+            
+            results.push(minDist);
+        }
+        
+        return results;
+    }
+}

src/apps/AsteroidsAI/ConfigPanel.css

@@ -0,0 +1,127 @@
+.config-panel {
+    margin-bottom: 20px;
+}
+
+.config-toggle {
+    width: 100%;
+    padding: 12px 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.config-toggle:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.config-content {
+    margin-top: 15px;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.config-section {
+    margin-bottom: 25px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.config-section:last-of-type {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.config-section h3 {
+    margin: 0 0 15px 0;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.config-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    gap: 15px;
+}
+
+.config-item label {
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 14px;
+    flex: 1;
+    min-width: 150px;
+}
+
+.config-item input[type="number"] {
+    width: 100px;
+    padding: 6px 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    color: white;
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.config-item input[type="number"]:hover {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.config-item input[type="number"]:focus {
+    outline: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+}
+
+.config-value {
+    color: rgba(255, 255, 255, 0.6);
+    font-family: 'Courier New', monospace;
+    font-size: 13px;
+}
+
+.config-note {
+    margin-top: 20px;
+    padding: 12px;
+    background: rgba(255, 193, 7, 0.1);
+    border-left: 3px solid #ffc107;
+    border-radius: 4px;
+    color: #ffc107;
+    font-size: 13px;
+}
+
+/* Scrollbar styling */
+.config-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.config-content::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+}
+
+.config-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+}
+
+.config-content::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}

src/apps/AsteroidsAI/ConfigPanel.tsx

@@ -0,0 +1,265 @@
+import { useState } from 'react';
+import { CONFIG, updateConfig } from './config';
+import './ConfigPanel.css';
+
+interface ConfigPanelProps {
+    onConfigChange?: () => void;
+}
+
+export default function ConfigPanel({ onConfigChange }: ConfigPanelProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [, forceUpdate] = useState({});
+
+    const handleChange = (key: keyof typeof CONFIG, value: number | number[]) => {
+        updateConfig({ [key]: value });
+        forceUpdate({}); // Force re-render to show updated values
+        if (onConfigChange) {
+            onConfigChange();
+        }
+    };
+
+    return (
+        <div className="config-panel">
+            <button
+                className="config-toggle"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                ⚙️ Configuration {isOpen ? '▼' : '▶'}
+            </button>
+
+            {isOpen && (
+                <div className="config-content">
+                    <div className="config-section">
+                        <h3>🧠 Neural Network</h3>
+                        <div className="config-item">
+                            <label>Raycasts:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.NUM_RAYCASTS}
+                                onChange={(e) => handleChange('NUM_RAYCASTS', parseInt(e.target.value))}
+                                min="4" max="32" step="4"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Hidden Layers:</label>
+                            <span className="config-value">[{CONFIG.HIDDEN_LAYERS.join(', ')}]</span>
+                        </div>
+                    </div>
+
+                    <div className="config-section">
+                        <h3>🧬 Genetic Algorithm</h3>
+                        <div className="config-item">
+                            <label>Population Size:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.POPULATION_SIZE}
+                                onChange={(e) => handleChange('POPULATION_SIZE', parseInt(e.target.value))}
+                                min="10" max="500" step="10"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Mutation Rate:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.MUTATION_RATE}
+                                onChange={(e) => handleChange('MUTATION_RATE', parseFloat(e.target.value))}
+                                min="0" max="1" step="0.05"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Mutation Scale:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.MUTATION_SCALE}
+                                onChange={(e) => handleChange('MUTATION_SCALE', parseFloat(e.target.value))}
+                                min="0" max="2" step="0.1"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Elite Count:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ELITE_COUNT}
+                                onChange={(e) => handleChange('ELITE_COUNT', parseInt(e.target.value))}
+                                min="0" max="20"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Scenarios per Genome:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.SCENARIOS_PER_GENOME}
+                                onChange={(e) => handleChange('SCENARIOS_PER_GENOME', parseInt(e.target.value))}
+                                min="1" max="10"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="config-section">
+                        <h3>🚀 Ship Properties</h3>
+                        <div className="config-item">
+                            <label>Ship Size:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.SHIP_SIZE}
+                                onChange={(e) => handleChange('SHIP_SIZE', parseInt(e.target.value))}
+                                min="5" max="30"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Rotation Speed:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ROTATION_SPEED}
+                                onChange={(e) => handleChange('ROTATION_SPEED', parseFloat(e.target.value))}
+                                min="0.01" max="0.5" step="0.01"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Thrust Force:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.THRUST_FORCE}
+                                onChange={(e) => handleChange('THRUST_FORCE', parseFloat(e.target.value))}
+                                min="0.0001" max="0.002" step="0.0001"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="config-section">
+                        <h3>💥 Bullet Properties</h3>
+                        <div className="config-item">
+                            <label>Bullet Speed:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.BULLET_SPEED}
+                                onChange={(e) => handleChange('BULLET_SPEED', parseInt(e.target.value))}
+                                min="1" max="30"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Bullet Lifetime (frames):</label>
+                            <input
+                                type="number"
+                                value={CONFIG.BULLET_LIFETIME}
+                                onChange={(e) => handleChange('BULLET_LIFETIME', parseInt(e.target.value))}
+                                min="10" max="120" step="10"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Shoot Cooldown (frames):</label>
+                            <input
+                                type="number"
+                                value={CONFIG.SHOOT_COOLDOWN}
+                                onChange={(e) => handleChange('SHOOT_COOLDOWN', parseInt(e.target.value))}
+                                min="1" max="30"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="config-section">
+                        <h3>☄️ Asteroid Properties</h3>
+                        <div className="config-item">
+                            <label>Initial Count:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_INITIAL_COUNT}
+                                onChange={(e) => handleChange('ASTEROID_INITIAL_COUNT', parseInt(e.target.value))}
+                                min="1" max="10"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Large Size:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_SIZE_LARGE}
+                                onChange={(e) => handleChange('ASTEROID_SIZE_LARGE', parseInt(e.target.value))}
+                                min="20" max="100" step="5"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Medium Size:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_SIZE_MEDIUM}
+                                onChange={(e) => handleChange('ASTEROID_SIZE_MEDIUM', parseInt(e.target.value))}
+                                min="10" max="60" step="5"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Small Size:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_SIZE_SMALL}
+                                onChange={(e) => handleChange('ASTEROID_SIZE_SMALL', parseInt(e.target.value))}
+                                min="5" max="40" step="2"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Large Speed:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_SPEED_LARGE}
+                                onChange={(e) => handleChange('ASTEROID_SPEED_LARGE', parseFloat(e.target.value))}
+                                min="0.1" max="3" step="0.1"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Medium Speed:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_SPEED_MEDIUM}
+                                onChange={(e) => handleChange('ASTEROID_SPEED_MEDIUM', parseFloat(e.target.value))}
+                                min="0.1" max="4" step="0.1"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Small Speed:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.ASTEROID_SPEED_SMALL}
+                                onChange={(e) => handleChange('ASTEROID_SPEED_SMALL', parseFloat(e.target.value))}
+                                min="0.1" max="5" step="0.1"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="config-section">
+                        <h3>🎯 Scoring</h3>
+                        <div className="config-item">
+                            <label>Large Asteroid:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.SCORE_LARGE}
+                                onChange={(e) => handleChange('SCORE_LARGE', parseInt(e.target.value))}
+                                min="1" max="100" step="5"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Medium Asteroid:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.SCORE_MEDIUM}
+                                onChange={(e) => handleChange('SCORE_MEDIUM', parseInt(e.target.value))}
+                                min="1" max="200" step="10"
+                            />
+                        </div>
+                        <div className="config-item">
+                            <label>Small Asteroid:</label>
+                            <input
+                                type="number"
+                                value={CONFIG.SCORE_SMALL}
+                                onChange={(e) => handleChange('SCORE_SMALL', parseInt(e.target.value))}
+                                min="1" max="300" step="10"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="config-note">
+                        ✅ Changes apply immediately! Click Reset to restart training with new config.
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

src/apps/AsteroidsAI/DenseNetwork.ts

@@ -0,0 +1,69 @@
+
+export class DenseNetwork {
+    private weights: Float32Array;
+    private layerSizes: number[];
+    
+    constructor(layerSizes: number[], weights?: Float32Array) {
+        this.layerSizes = layerSizes;
+        const totalWeights = this.calculateTotalWeights(layerSizes);
+        
+        if (weights) {
+            if (weights.length !== totalWeights) {
+                throw new Error(`Expected ${totalWeights} weights, got ${weights.length}`);
+            }
+            this.weights = weights;
+        } else {
+            this.weights = new Float32Array(totalWeights);
+            this.randomize();
+        }
+    }
+
+    private calculateTotalWeights(sizes: number[]): number {
+        let total = 0;
+        for (let i = 0; i < sizes.length - 1; i++) {
+            // Weights + Bias for each next-layer neuron
+            // (Input + 1) * Output
+            total += (sizes[i] + 1) * sizes[i + 1];
+        }
+        return total;
+    }
+
+    private randomize() {
+        for (let i = 0; i < this.weights.length; i++) {
+            this.weights[i] = (Math.random() * 2 - 1); // -1 to 1 simplified initialization
+        }
+    }
+
+    public predict(inputs: number[]): number[] {
+        let currentValues = inputs;
+
+        let weightIndex = 0;
+        for (let i = 0; i < this.layerSizes.length - 1; i++) {
+            const inputSize = this.layerSizes[i];
+            const outputSize = this.layerSizes[i + 1];
+            const nextValues = new Array(outputSize).fill(0);
+
+            for (let out = 0; out < outputSize; out++) {
+                let sum = 0;
+                // Weights
+                for (let inp = 0; inp < inputSize; inp++) {
+                    sum += currentValues[inp] * this.weights[weightIndex++];
+                }
+                // Bias (last weight for this neuron)
+                sum += this.weights[weightIndex++];
+
+                // Activation
+                // Output layer (last layer) -> Tanh for action outputs (-1 to 1)
+                // Hidden layers -> ReLU or Tanh. Let's use Tanh everywhere for simplicity/stability in evolution.
+                nextValues[out] = Math.tanh(sum); 
+            }
+            currentValues = nextValues;
+        }
+
+        return currentValues;
+    }
+
+    public getWeights(): Float32Array {
+        return this.weights;
+    }
+}

src/apps/AsteroidsAI/GeneticAlgo.ts

@@ -0,0 +1,118 @@
+
+import { DenseNetwork } from './DenseNetwork';
+
+export interface Genome {
+    weights: Float32Array;
+    fitness: number;
+}
+
+export class GeneticAlgo {
+    private population: Genome[] = [];
+    private popSize: number;
+    private mutationRate: number;
+    private mutationScale: number;
+    public generation = 0;
+
+    // Track best ever
+    public bestGenome: Genome | null = null;
+    public bestFitness = -Infinity;
+
+    constructor(
+        popSize: number, 
+        layerSizes: number[], 
+        mutationRate = 0.1, // Chance per weight (increased for diversity)
+        mutationScale = 0.5  // Gaussian/random perturbation amount (increased)
+    ) {
+        this.popSize = popSize;
+        this.mutationRate = mutationRate;
+        this.mutationScale = mutationScale;
+
+        // Init population
+        for (let i = 0; i < popSize; i++) {
+            const net = new DenseNetwork(layerSizes);
+            this.population.push({
+                weights: net.getWeights(), // Actually reference, careful on mutation, should clone on breed
+                fitness: 0
+            });
+        }
+    }
+
+    public getPopulation() {
+        return this.population;
+    }
+
+    public evolve() {
+        // 1. Sort by fitness
+        this.population.sort((a, b) => b.fitness - a.fitness);
+
+        // Update best
+        if (this.population[0].fitness > this.bestFitness) {
+            this.bestFitness = this.population[0].fitness;
+            // Clone best weights to save safe
+            this.bestGenome = {
+                weights: new Float32Array(this.population[0].weights),
+                fitness: this.population[0].fitness
+            };
+        }
+
+        const newPop: Genome[] = [];
+
+        // 2. Elitism (Keep top 5)
+        const ELITE_COUNT = 5;
+        for (let i = 0; i < ELITE_COUNT; i++) {
+            newPop.push({
+                weights: new Float32Array(this.population[i].weights),
+                fitness: 0
+            });
+        }
+
+        // 3. Breed rest
+        while (newPop.length < this.popSize) {
+            // Tournament Select
+            const p1 = this.tournamentSelect();
+            const p2 = this.tournamentSelect();
+
+            // Crossover
+            const childWeights = this.crossover(p1.weights, p2.weights);
+
+            // Mutate
+            this.mutate(childWeights);
+
+            newPop.push({
+                weights: childWeights,
+                fitness: 0
+            });
+        }
+
+        this.population = newPop;
+        this.generation++;
+    }
+
+    private tournamentSelect(): Genome {
+        const pool = 5;
+        let best = this.population[Math.floor(Math.random() * this.population.length)];
+        for (let i = 0; i < pool - 1; i++) {
+            const cand = this.population[Math.floor(Math.random() * this.population.length)];
+            if (cand.fitness > best.fitness) best = cand;
+        }
+        return best;
+    }
+
+    private crossover(w1: Float32Array, w2: Float32Array): Float32Array {
+        const child = new Float32Array(w1.length);
+        // Uniform crossover
+        for (let i = 0; i < w1.length; i++) {
+            child[i] = Math.random() < 0.5 ? w1[i] : w2[i];
+        }
+        return child;
+    }
+
+    private mutate(weights: Float32Array) {
+        for (let i = 0; i < weights.length; i++) {
+            if (Math.random() < this.mutationRate) {
+                // Add noise
+                weights[i] += (Math.random() * 2 - 1) * this.mutationScale;
+            }
+        }
+    }
+}

src/apps/AsteroidsAI/config.ts

@@ -0,0 +1,86 @@
+// Configuration for Asteroids AI
+// Mutable config that can be updated at runtime
+
+export let CONFIG = {
+    // Neural Network Architecture
+    NUM_RAYCASTS: 16,
+    HIDDEN_LAYERS: [24, 24],
+    
+    // Genetic Algorithm
+    POPULATION_SIZE: 150,
+    MUTATION_RATE: 0.25,
+    MUTATION_SCALE: 1.0,
+    ELITE_COUNT: 3,
+    
+    // Training
+    SCENARIOS_PER_GENOME: 5,
+    
+    // World Settings
+    WORLD_WIDTH: 800,
+    WORLD_HEIGHT: 600,
+    MAX_TIME_STEPS: 60 * 60, // 60 seconds
+    
+    // Ship Properties
+    SHIP_SIZE: 15,
+    SHIP_FRICTION_AIR: 0.02,
+    SHIP_MASS: 1,
+    ROTATION_SPEED: 0.10,
+    THRUST_FORCE: 0.0005,
+    
+    // Bullet Properties
+    BULLET_SPEED: 12,
+    BULLET_LIFETIME: 30, // frames
+    BULLET_RADIUS: 2,
+    SHOOT_COOLDOWN: 12, // frames between shots
+    
+    // Asteroid Properties
+    ASTEROID_SPAWN_DISTANCE: 100,
+    ASTEROID_INITIAL_COUNT: 4,
+    ASTEROID_SIZE_LARGE: 50,
+    ASTEROID_SIZE_MEDIUM: 30,
+    ASTEROID_SIZE_SMALL: 18,
+    ASTEROID_SPEED_LARGE: 0.75,
+    ASTEROID_SPEED_MEDIUM: 1.0,
+    ASTEROID_SPEED_SMALL: 1.5,
+    ASTEROID_ANGULAR_VELOCITY: 0.1,
+    
+    // Scoring
+    SCORE_LARGE: 20,
+    SCORE_MEDIUM: 50,
+    SCORE_SMALL: 100,
+    
+    // Visualization
+    SHOW_RAYCASTS: true,
+    RAYCAST_COLOR: 0x00ff00,
+    RAYCAST_ALPHA: 0.8,
+    RAYCAST_LENGTH_MULTIPLIER: 0.8,
+};
+
+// Function to update config values
+export function updateConfig(updates: Partial<typeof CONFIG>) {
+    CONFIG = { ...CONFIG, ...updates };
+}
+
+// Function to get current config (for reading)
+export function getConfig() {
+    return { ...CONFIG };
+}
+
+// Calculate total inputs for neural network
+export function getInputCount(): number {
+    return CONFIG.NUM_RAYCASTS + 5; // raycasts + velocity.x + velocity.y + angularVelocity + sin(angle) + cos(angle)
+}
+
+// Calculate total outputs for neural network
+export function getOutputCount(): number {
+    return 3; // rotation, thrust, shoot
+}
+
+// Get layer sizes for neural network
+export function getLayerSizes(): number[] {
+    return [
+        getInputCount(),
+        ...CONFIG.HIDDEN_LAYERS,
+        getOutputCount()
+    ];
+}

src/apps/AsteroidsAI/debug.test.ts

@@ -0,0 +1,69 @@
+// Quick test to verify the simulation and fitness work correctly
+import { AsteroidsSimulation } from './AsteroidsSimulation';
+import { calculateFitness } from './fitnessConfig';
+import { DenseNetwork } from './DenseNetwork';
+import { getLayerSizes } from './config';
+
+console.log('=== ASTEROIDS AI DEBUG TEST ===');
+
+// Test 1: Does the simulation run?
+console.log('\n1. Testing basic simulation...');
+const sim1 = new AsteroidsSimulation(0);
+let steps = 0;
+while (!sim1.isGameOver && steps < 100) {
+    sim1.update([0, 0, 0]); // No actions
+    steps++;
+}
+console.log(`Simulation ran for ${steps} steps`);
+console.log(`Game over: ${sim1.isGameOver}`);
+console.log(`Asteroids: ${sim1.asteroids.length}`);
+
+// Test 2: Does shooting work?
+console.log('\n2. Testing shooting...');
+const sim2 = new AsteroidsSimulation(0);
+for (let i = 0; i < 60; i++) {
+    sim2.update([0, 0, 1]); // Always shoot
+}
+console.log(`Shots fired: ${sim2.shotsFired}`);
+console.log(`Bullets: ${sim2.bullets.length}`);
+
+// Test 3: Can we destroy asteroids?
+console.log('\n3. Testing asteroid destruction...');
+const sim3 = new AsteroidsSimulation(0);
+for (let i = 0; i < 300; i++) {
+    // Rotate and shoot
+    sim3.update([0.5, 0, 1]);
+}
+console.log(`Asteroids destroyed: ${sim3.asteroidsDestroyed}`);
+console.log(`Score: ${sim3.score}`);
+console.log(`Fitness: ${calculateFitness(sim3).toFixed(1)}`);
+
+// Test 4: Do network outputs make sense?
+console.log('\n4. Testing neural network...');
+const network = new DenseNetwork(getLayerSizes());
+const testInputs = new Array(getLayerSizes()[0]).fill(0.5);
+const outputs = network.predict(testInputs);
+console.log(`Network outputs: [${outputs.map(o => o.toFixed(3)).join(', ')}]`);
+console.log(`Output range: [${Math.min(...outputs).toFixed(3)}, ${Math.max(...outputs).toFixed(3)}]`);
+
+// Test 5: Fitness for doing nothing vs shooting
+console.log('\n5. Comparing fitness strategies...');
+const simNothing = new AsteroidsSimulation(0);
+for (let i = 0; i < 600; i++) {
+    if (simNothing.isGameOver) break;
+    simNothing.update([0, 0, 0]);
+}
+const fitnessNothing = calculateFitness(simNothing);
+
+const simShooting = new AsteroidsSimulation(0);
+for (let i = 0; i < 600; i++) {
+    if (simShooting.isGameOver) break;
+    simShooting.update([0, 0, 1]);
+}
+const fitnessShooting = calculateFitness(simShooting);
+
+console.log(`\nDoing nothing: ${fitnessNothing.toFixed(1)} (survived ${simNothing.timeSteps} steps)`);
+console.log(`Always shooting: ${fitnessShooting.toFixed(1)} (survived ${simShooting.timeSteps} steps, ${simShooting.shotsFired} shots, ${simShooting.asteroidsDestroyed} destroyed)`);
+console.log(`Fitness difference: ${(fitnessShooting - fitnessNothing).toFixed(1)}`);
+
+console.log('\n=== TEST COMPLETE ===');

src/apps/AsteroidsAI/destruction.test.ts

@@ -0,0 +1,60 @@
+// Test asteroid destruction mechanics
+import { AsteroidsSimulation } from './AsteroidsSimulation';
+
+console.log('=== ASTEROID DESTRUCTION TEST ===\n');
+
+// Test: How many hits does it take to destroy asteroids?
+const sim = new AsteroidsSimulation(42);
+
+console.log('Initial asteroids:', sim.asteroids.length);
+console.log('Initial asteroid sizes:', sim.asteroids.map(a => a.size));
+
+// Fire 100 shots in a circle to hit asteroids
+for (let i = 0; i < 200; i++) {
+    // Rotate and shoot constantly
+    const rotation = Math.sin(i * 0.1);
+    sim.update([rotation, 1, 1]); // Rotate, thrust, shoot
+    
+    if (i % 20 === 0) {
+        console.log(`\nStep ${i}:`);
+        console.log(`  Asteroids: ${sim.asteroids.length}`);
+        console.log(`  Destroyed: ${sim.asteroidsDestroyed}`);
+        console.log(`  Shots fired: ${sim.shotsFired}`);
+        console.log(`  Shots hit: ${sim.shotsHit}`);
+        console.log(`  Bullets active: ${sim.bullets.length}`);
+        console.log(`  Hit rate: ${sim.shotsFired > 0 ? ((sim.shotsHit / sim.shotsFired) * 100).toFixed(1) : 0}%`);
+    }
+}
+
+console.log('\n=== FINAL RESULTS ===');
+console.log(`Total asteroids destroyed: ${sim.asteroidsDestroyed}`);
+console.log(`Total shots fired: ${sim.shotsFired}`);
+console.log(`Total hits: ${sim.shotsHit}`);
+console.log(`Hit rate: ${((sim.shotsHit / sim.shotsFired) * 100).toFixed(1)}%`);
+console.log(`Asteroids per hit: ${(sim.asteroidsDestroyed / sim.shotsHit).toFixed(2)}`);
+console.log(`\nExpected: 1 hit = 1 asteroid destroyed (they should split, not take multiple hits)`);
+
+// Test 2: Single asteroid, single bullet
+console.log('\n=== SINGLE HIT TEST ===');
+const sim2 = new AsteroidsSimulation(100);
+const initialCount = sim2.asteroids.length;
+const initialDestroyed = sim2.asteroidsDestroyed;
+
+// Position ship to face an asteroid and shoot
+for (let i = 0; i < 50; i++) {
+    sim2.update([0, 0, i === 20 ? 1 : 0]); // Shoot once at step 20
+}
+
+console.log(`Initial asteroids: ${initialCount}`);
+console.log(`Final asteroids: ${sim2.asteroids.length}`);
+console.log(`Destroyed: ${sim2.asteroidsDestroyed - initialDestroyed}`);
+console.log(`Shots fired: ${sim2.shotsFired}`);
+console.log(`Hits: ${sim2.shotsHit}`);
+
+if (sim2.shotsHit > 0 && sim2.asteroidsDestroyed > initialDestroyed) {
+    console.log('✓ One hit destroys one asteroid (correct!)');
+} else if (sim2.shotsHit === 0) {
+    console.log('⚠ No hits registered (might need better aim)');
+} else {
+    console.log('✗ Hit registered but no destruction (BUG!)');
+}

src/apps/AsteroidsAI/fitnessConfig.ts

@@ -0,0 +1,43 @@
+import { AsteroidsSimulation } from './AsteroidsSimulation';
+
+export function calculateFitness(sim: AsteroidsSimulation): number {
+    // REDESIGNED: Make MOVEMENT absolutely essential
+    
+    // 1. Asteroids destroyed (MASSIVE REWARD - this is the main goal)
+    const destructionScore = sim.asteroidsDestroyed * 2000;
+    
+    // 2. Score from game (size-based rewards)
+    const gameScore = sim.score * 10;
+    
+    // 3. Survival time (MINIMAL - just a tiny base)
+    const cappedTime = Math.min(sim.timeSteps, 1000);
+    const survivalScore = cappedTime * 0.5; // Reduced from 1
+    
+    // 4. Shooting engagement reward
+    const shootingReward = Math.min(sim.shotsFired, 150) * 5;
+    
+    // 5. Accuracy multiplier
+    const accuracy = sim.shotsFired > 0 ? sim.shotsHit / sim.shotsFired : 0;
+    const accuracyBonus = accuracy * sim.shotsFired * 20;
+    
+    // 6. Destruction efficiency
+    const destructionRate = sim.timeSteps > 0 ? sim.asteroidsDestroyed / (sim.timeSteps / 60) : 0;
+    const efficiencyBonus = destructionRate * 1000;
+    
+    // 7. MOVEMENT REWARD: ABSOLUTELY ESSENTIAL
+    // Exponential scaling - more distance = exponentially better
+    const distanceReward = sim.totalDistanceTraveled * 50; // 50 points per pixel!
+    const distanceBonus = sim.totalDistanceTraveled > 1000 ? 
+        (sim.totalDistanceTraveled - 1000) * 20 : 0; // Extra bonus for high movement
+    
+    // 8. Speed bonus
+    const avgSpeed = Math.sqrt(sim.ship.velocity.x ** 2 + sim.ship.velocity.y ** 2);
+    const speedBonus = avgSpeed * 300;
+    
+    // Total fitness
+    const fitness = destructionScore + gameScore + survivalScore + shootingReward + 
+                   accuracyBonus + efficiencyBonus + distanceReward + distanceBonus + speedBonus;
+    
+    return Math.max(0, fitness);
+}
+

src/apps/AsteroidsAI/training.worker.ts

@@ -0,0 +1,119 @@
+import { AsteroidsSimulation } from './AsteroidsSimulation';
+import { calculateFitness } from './fitnessConfig'; 
+import { GeneticAlgo } from './GeneticAlgo';
+import { DenseNetwork } from './DenseNetwork';
+import { CONFIG, getLayerSizes } from './config';
+
+// Get architecture from config
+const LAYER_SIZES = getLayerSizes();
+const POPULATION_SIZE = CONFIG.POPULATION_SIZE;
+const SCENARIOS = CONFIG.SCENARIOS_PER_GENOME;
+
+let ga: GeneticAlgo | null = null;
+let isRunning = false;
+
+self.onmessage = (e: MessageEvent) => {
+    const { type } = e.data;
+
+    switch (type) {
+        case 'start':
+        case 'reset':
+            console.log('Worker: Initializing Asteroids AI GA');
+            console.log('Architecture:', LAYER_SIZES);
+            console.log('Population:', POPULATION_SIZE);
+            console.log('Mutation Rate:', CONFIG.MUTATION_RATE);
+            console.log('Mutation Scale:', CONFIG.MUTATION_SCALE);
+            ga = new GeneticAlgo(POPULATION_SIZE, LAYER_SIZES, CONFIG.MUTATION_RATE, CONFIG.MUTATION_SCALE);
+            isRunning = true;
+            runGeneration();
+            break;
+        case 'pause':
+            isRunning = false;
+            break;
+        case 'resume':
+            if (!isRunning) {
+                isRunning = true;
+                runGeneration();
+            }
+            break;
+    }
+};
+
+function runGeneration() {
+    if (!ga || !isRunning) return;
+
+    const population = ga.getPopulation();
+
+    // 1. Evaluate Fitness
+    for (const genome of population) {
+        let totalFitness = 0;
+        const network = new DenseNetwork(LAYER_SIZES, genome.weights);
+
+        for (let i = 0; i < SCENARIOS; i++) {
+            // Seed logic: (Gen * Scenarios) + i
+            const seed = (ga.generation * SCENARIOS) + i;
+            const sim = new AsteroidsSimulation(seed);
+
+            // Simulation Loop
+            let step = 0;
+            while (!sim.isGameOver && step < 5000) {
+                const inputs = sim.getObservation();
+                const outputs = network.predict(inputs);
+                sim.update(outputs);
+                step++;
+            }
+
+            const fitness = calculateFitness(sim);
+            totalFitness += fitness;
+            
+            // Debug logging for first genome of every 10th generation
+            if (genome === population[0] && ga.generation % 10 === 0 && i === 0) {
+                console.log(`Gen ${ga.generation} Sample:`, {
+                    timeSteps: sim.timeSteps,
+                    destroyed: sim.asteroidsDestroyed,
+                    shotsFired: sim.shotsFired,
+                    shotsHit: sim.shotsHit,
+                    score: sim.score,
+                    fitness: fitness.toFixed(1)
+                });
+            }
+        }
+
+        genome.fitness = totalFitness / SCENARIOS;
+    }
+
+    // Calculate stats before evolution
+    let sumFitness = 0;
+    let maxFitness = -Infinity;
+    let minFitness = Infinity;
+    for (const genome of population) {
+        sumFitness += genome.fitness;
+        if (genome.fitness > maxFitness) maxFitness = genome.fitness;
+        if (genome.fitness < minFitness) minFitness = genome.fitness;
+    }
+    const avgFitness = sumFitness / population.length;
+    
+    // Log fitness range every 10 generations
+    if (ga.generation % 10 === 0) {
+        console.log(`Gen ${ga.generation} Fitness Range: ${minFitness.toFixed(1)} - ${maxFitness.toFixed(1)}, Avg: ${avgFitness.toFixed(1)}`);
+    }
+    
+    // Send update to main thread
+    const bestOfGen = population.find(g => g.fitness === maxFitness) || population[0];
+
+    self.postMessage({
+        type: 'generationParams',
+        payload: {
+            generation: ga.generation, 
+            maxFitness: maxFitness,
+            avgFitness: avgFitness,
+            bestGenome: { weights: Array.from(bestOfGen.weights) }
+        }
+    });
+
+    // 2. Evolve to next generation
+    ga.evolve(); 
+
+    // Schedule next gen
+    setTimeout(runGeneration, 0);
+}

src/apps/AsteroidsAI/useEvolutionWorker.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export interface Stats {
+    generation: number;
+    maxFitness: number;
+    avgFitness: number;
+}
+
+export interface HistoryItem {
+    generation: number;
+    best: number;
+    avg: number;
+}
+
+export function useEvolutionWorker() {
+    const [isTraining, setIsTraining] = useState(false);
+    const [stats, setStats] = useState<Stats>({ generation: 0, maxFitness: 0, avgFitness: 0 });
+    const [fitnessHistory, setFitnessHistory] = useState<HistoryItem[]>([]);
+    const [bestGenome, setBestGenome] = useState<any>(null);
+    
+    const workerRef = useRef<Worker | null>(null);
+
+    useEffect(() => {
+        const worker = new Worker(new URL('./training.worker.ts', import.meta.url), { type: 'module' });
+        workerRef.current = worker;
+
+        worker.onmessage = (e: MessageEvent<any>) => {
+            const { type, payload, error } = e.data;
+            
+            if (type === 'generationParams') {
+                setStats({
+                    generation: payload.generation,
+                    maxFitness: payload.maxFitness,
+                    avgFitness: payload.avgFitness
+                });
+
+                if (payload.bestGenome) {
+                    setBestGenome(payload.bestGenome);
+                }
+
+                setFitnessHistory(prev => [...prev, {
+                    generation: payload.generation,
+                    best: payload.maxFitness,
+                    avg: payload.avgFitness
+                }]);
+            } else if (type === 'error') {
+                console.error("Worker Error:", error);
+                setIsTraining(false);
+            }
+        };
+
+        // Initial reset to setup GA
+        worker.postMessage({ type: 'reset' });
+
+        return () => worker.terminate();
+    }, []);
+
+    useEffect(() => {
+        if (!workerRef.current) return;
+        workerRef.current.postMessage({ type: isTraining ? 'resume' : 'pause' });
+    }, [isTraining]);
+
+    const handleReset = useCallback(() => {
+        setStats({ generation: 0, maxFitness: 0, avgFitness: 0 });
+        setFitnessHistory([]);
+        setBestGenome(null);
+        workerRef.current?.postMessage({ type: 'reset' });
+    }, []);
+
+    const toggleTraining = useCallback(() => {
+        setIsTraining(prev => !prev);
+    }, []);
+
+    return {
+        isTraining,
+        stats,
+        fitnessHistory,
+        bestGenome,
+        toggleTraining,
+        handleReset
+    };
+}

src/apps/BridgeBuilder/.reload

@@ -0,0 +1,2 @@
+// Force reload marker - change me to trigger HMR
+export const RELOAD_MARKER = 2;

src/apps/BridgeBuilder/BridgeBuilder.css

@@ -0,0 +1,240 @@
+/* Bridge Builder App Styles */
+
+.bridge-builder {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    color: #fff;
+}
+
+.bridge-builder__header {
+    padding: 1.5rem 2rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bridge-builder__title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.bridge-builder__subtitle {
+    font-size: 0.9rem;
+    color: #aaa;
+    margin: 0.25rem 0 0 0;
+}
+
+.bridge-builder__content {
+    flex: 1;
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    overflow: hidden;
+}
+
+.bridge-builder__canvas-container {
+    flex: 1;
+    background: #0f0f1e;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    position: relative;
+}
+
+.bridge-builder__sidebar {
+    width: 320px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 8px;
+    padding: 1.5rem;
+    overflow-y: auto;
+    backdrop-filter: blur(10px);
+}
+
+.bridge-builder__section {
+    margin-bottom: 2rem;
+}
+
+.bridge-builder__section-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    color: #fff;
+    border-bottom: 2px solid rgba(102, 126, 234, 0.5);
+    padding-bottom: 0.5rem;
+}
+
+.bridge-builder__controls {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.bridge-builder__button {
+    flex: 1;
+    min-width: 80px;
+    padding: 0.75rem 1rem;
+    border: none;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+}
+
+.bridge-builder__button--primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.bridge-builder__button--primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.bridge-builder__button--secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.bridge-builder__button--secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.bridge-builder__button--danger {
+    background: rgba(239, 68, 68, 0.2);
+    color: #ef4444;
+    border: 1px solid #ef4444;
+}
+
+.bridge-builder__button--danger:hover {
+    background: rgba(239, 68, 68, 0.3);
+}
+
+.bridge-builder__button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.bridge-builder__stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.bridge-builder__stat {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1rem;
+    border-radius: 6px;
+    border-left: 3px solid #667eea;
+}
+
+.bridge-builder__stat-label {
+    font-size: 0.75rem;
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.25rem;
+}
+
+.bridge-builder__stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #fff;
+}
+
+.bridge-builder__input-group {
+    margin-bottom: 1rem;
+}
+
+.bridge-builder__label {
+    display: block;
+    font-size: 0.875rem;
+    color: #ccc;
+    margin-bottom: 0.5rem;
+}
+
+.bridge-builder__input {
+    width: 100%;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    color: white;
+    font-size: 0.9rem;
+}
+
+.bridge-builder__input:focus {
+    outline: none;
+    border-color: #667eea;
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.bridge-builder__select {
+    width: 100%;
+    padding: 0.5rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    color: white;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.bridge-builder__select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.bridge-builder__slider {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.bridge-builder__slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #667eea;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.bridge-builder__slider::-webkit-slider-thumb:hover {
+    background: #764ba2;
+    transform: scale(1.2);
+}
+
+.bridge-builder__slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #667eea;
+    cursor: pointer;
+    border: none;
+    transition: all 0.2s;
+}
+
+.bridge-builder__slider::-moz-range-thumb:hover {
+    background: #764ba2;
+    transform: scale(1.2);
+}
+
+.bridge-builder__value-display {
+    display: inline-block;
+    font-weight: 600;
+    color: #667eea;
+    margin-left: 0.5rem;
+}

src/apps/BridgeBuilder/BridgeBuilderApp.tsx

@@ -0,0 +1,301 @@
+// Bridge Builder Main App Component
+import { useEffect, useRef, useState } from 'react';
+import Phaser from 'phaser';
+import { BridgeScene } from './BridgeScene';
+import { useEvolutionWorker } from './useEvolutionWorker';
+import { FitnessGraph } from './FitnessGraph';
+import { DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG, DEFAULT_GA_CONFIG } from './types';
+import type { BridgeConfig, SimulationConfig, GAConfig } from './types';
+import './BridgeBuilder.css';
+
+export default function BridgeBuilderApp() {
+    const canvasRef = useRef<HTMLDivElement>(null);
+    const gameRef = useRef<Phaser.Game | null>(null);
+    const sceneRef = useRef<BridgeScene | null>(null);
+
+    const [bridgeConfig, setBridgeConfig] = useState<BridgeConfig>(DEFAULT_BRIDGE_CONFIG);
+    const [simConfig, setSimConfig] = useState<SimulationConfig>(DEFAULT_SIM_CONFIG);
+    const [gaConfig, setGaConfig] = useState<GAConfig>(DEFAULT_GA_CONFIG);
+
+    const {
+        generation,
+        bestFitness,
+        avgFitness,
+        bestGenome,
+        isTraining,
+        bestFitnessHistory,
+        avgFitnessHistory,
+        startTraining,
+        stopTraining,
+        reset,
+    } = useEvolutionWorker(bridgeConfig, simConfig, gaConfig);
+
+    // Initialize Phaser
+    useEffect(() => {
+        if (!canvasRef.current || gameRef.current) return;
+
+        const config: Phaser.Types.Core.GameConfig = {
+            type: Phaser.AUTO,
+            width: 800,
+            height: 600,
+            parent: canvasRef.current,
+            backgroundColor: '#0f0f1e',
+            scene: BridgeScene,
+            physics: {
+                default: 'matter',
+                matter: {
+                    debug: false,
+                    gravity: { x: 0, y: 9.81 },
+                },
+            },
+        };
+
+        gameRef.current = new Phaser.Game(config);
+
+        // Wait for scene to be ready
+        setTimeout(() => {
+            if (gameRef.current) {
+                sceneRef.current = gameRef.current.scene.getScene('BridgeScene') as BridgeScene;
+                console.log('[App] Scene ref captured:', !!sceneRef.current);
+            }
+        }, 100);
+
+        return () => {
+            gameRef.current?.destroy(true);
+            gameRef.current = null;
+            sceneRef.current = null;
+        };
+    }, []);
+
+    // Update scene when best genome changes
+    useEffect(() => {
+        console.log('[App] useEffect triggered - updating scene', {
+            hasScene: !!sceneRef.current,
+            hasGenome: !!bestGenome,
+            generation,
+            nodes: bestGenome?.nodes.length,
+            beams: bestGenome?.beams.length
+        });
+        if (sceneRef.current && bestGenome) {
+            sceneRef.current.updateBridge(bestGenome);
+            sceneRef.current.updateStats(generation, bestFitness);
+        }
+    }, [bestGenome, generation, bestFitness]);
+
+    const handleStartStop = () => {
+        if (isTraining) {
+            stopTraining();
+        } else {
+            startTraining();
+        }
+    };
+
+    const handleReset = () => {
+        reset();
+        if (sceneRef.current) {
+            sceneRef.current.updateStats(0, 0);
+        }
+    };
+
+    return (
+        <div className="bridge-builder">
+            <header className="bridge-builder__header">
+                <h1 className="bridge-builder__title">🌉 Bridge Builder</h1>
+                <p className="bridge-builder__subtitle">
+                    Watch evolution discover structural engineering solutions
+                </p>
+            </header>
+
+            <div className="bridge-builder__content">
+                <div className="bridge-builder__canvas-container" ref={canvasRef} />
+
+                <aside className="bridge-builder__sidebar">
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Controls</h2>
+                        <div className="bridge-builder__controls">
+                            <button
+                                className={`bridge-builder__button ${isTraining ? 'bridge-builder__button--secondary' : 'bridge-builder__button--primary'
+                                    }`}
+                                onClick={handleStartStop}
+                            >
+                                {isTraining ? 'Pause' : 'Start'}
+                            </button>
+                            <button
+                                className="bridge-builder__button bridge-builder__button--danger"
+                                onClick={handleReset}
+                            >
+                                Reset
+                            </button>
+                        </div>
+                    </section>
+
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Bridge Config</h2>
+
+                        <div className="bridge-builder__input-group">
+                            <label className="bridge-builder__label">
+                                Load Mass
+                                <span className="bridge-builder__value-display">{bridgeConfig.loadMass}kg</span>
+                            </label>
+                            <input
+                                type="range"
+                                className="bridge-builder__slider"
+                                min="0.1"
+                                max="50"
+                                step="0.5"
+                                value={bridgeConfig.loadMass}
+                                onChange={(e) => setBridgeConfig({ ...bridgeConfig, loadMass: Number(e.target.value) })}
+                                disabled={isTraining}
+                            />
+                        </div>
+
+                        <div className="bridge-builder__input-group">
+                            <label className="bridge-builder__label">
+                                Beam Strength
+                                <span className="bridge-builder__value-display">{bridgeConfig.beamStrength}N</span>
+                            </label>
+                            <input
+                                type="range"
+                                className="bridge-builder__slider"
+                                min="500"
+                                max="10000"
+                                step="100"
+                                value={bridgeConfig.beamStrength}
+                                onChange={(e) => setBridgeConfig({ ...bridgeConfig, beamStrength: Number(e.target.value) })}
+                                disabled={isTraining}
+                            />
+                        </div>
+                    </section>
+
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Statistics</h2>
+                        <div className="bridge-builder__stats">
+                            <div className="bridge-builder__stat">
+                                <div className="bridge-builder__stat-label">Generation</div>
+                                <div className="bridge-builder__stat-value">{generation}</div>
+                            </div>
+                            <div className="bridge-builder__stat">
+                                <div className="bridge-builder__stat-label">Best Fitness</div>
+                                <div className="bridge-builder__stat-value">{bestFitness.toFixed(0)}</div>
+                            </div>
+                            <div className="bridge-builder__stat">
+                                <div className="bridge-builder__stat-label">Avg Fitness</div>
+                                <div className="bridge-builder__stat-value">{avgFitness.toFixed(0)}</div>
+                            </div>
+                            <div className="bridge-builder__stat">
+                                <div className="bridge-builder__stat-label">Nodes</div>
+                                <div className="bridge-builder__stat-value">{bestGenome?.nodes.length || 0}</div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Fitness Progress</h2>
+                        <FitnessGraph
+                            bestFitnessHistory={bestFitnessHistory}
+                            avgFitnessHistory={avgFitnessHistory}
+                        />
+                    </section>
+
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Simulation</h2>
+
+                        <div className="bridge-builder__input-group">
+                            <label className="bridge-builder__label">
+                                Population Size
+                                <span className="bridge-builder__value-display">{simConfig.populationSize}</span>
+                            </label>
+                            <input
+                                type="range"
+                                className="bridge-builder__slider"
+                                min="10"
+                                max="100"
+                                step="10"
+                                value={simConfig.populationSize}
+                                onChange={(e) => setSimConfig({ ...simConfig, populationSize: Number(e.target.value) })}
+                                disabled={isTraining}
+                            />
+                        </div>
+
+                        <div className="bridge-builder__input-group">
+                            <label className="bridge-builder__label">
+                                Max Steps
+                                <span className="bridge-builder__value-display">{simConfig.maxSteps}</span>
+                            </label>
+                            <input
+                                type="range"
+                                className="bridge-builder__slider"
+                                min="300"
+                                max="1200"
+                                step="100"
+                                value={simConfig.maxSteps}
+                                onChange={(e) => setSimConfig({ ...simConfig, maxSteps: Number(e.target.value) })}
+                                disabled={isTraining}
+                            />
+                        </div>
+                    </section>
+
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Evolution</h2>
+
+                        <div className="bridge-builder__input-group">
+                            <label className="bridge-builder__label">
+                                Mutation Rate
+                                <span className="bridge-builder__value-display">{(gaConfig.mutationRate * 100).toFixed(0)}%</span>
+                            </label>
+                            <input
+                                type="range"
+                                className="bridge-builder__slider"
+                                min="0"
+                                max="1"
+                                step="0.1"
+                                value={gaConfig.mutationRate}
+                                onChange={(e) => setGaConfig({ ...gaConfig, mutationRate: Number(e.target.value) })}
+                                disabled={isTraining}
+                            />
+                        </div>
+
+                        <div className="bridge-builder__input-group">
+                            <label className="bridge-builder__label">
+                                Elite Count
+                                <span className="bridge-builder__value-display">{gaConfig.eliteCount}</span>
+                            </label>
+                            <input
+                                type="range"
+                                className="bridge-builder__slider"
+                                min="1"
+                                max="10"
+                                step="1"
+                                value={gaConfig.eliteCount}
+                                onChange={(e) => setGaConfig({ ...gaConfig, eliteCount: Number(e.target.value) })}
+                                disabled={isTraining}
+                            />
+                        </div>
+                    </section>
+
+                    <section className="bridge-builder__section">
+                        <h2 className="bridge-builder__section-title">Legend</h2>
+                        <div style={{ fontSize: '0.85rem', lineHeight: '1.6' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                                <div style={{ width: 40, height: 3, background: '#4ade80' }}></div>
+                                <span>Low Stress</span>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                                <div style={{ width: 40, height: 3, background: '#60a5fa' }}></div>
+                                <span>Tension</span>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                                <div style={{ width: 40, height: 3, background: '#f59e0b' }}></div>
+                                <span>Compression</span>
+                            </div>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                <div style={{ width: 40, height: 3, background: '#ef4444' }}></div>
+                                <span>High Stress</span>
+                            </div>
+                        </div>
+                    </section>
+                </aside>
+            </div>
+        </div>
+    );
+}

src/apps/BridgeBuilder/BridgeScene.ts

@@ -0,0 +1,206 @@
+// Phaser Scene for Bridge Visualization
+import Phaser from 'phaser';
+import { BridgeSimulation } from './BridgeSimulation';
+import type { BridgeGenome, BridgeConfig, SimulationConfig } from './types';
+import { DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG } from './types';
+
+export class BridgeScene extends Phaser.Scene {
+  private sim!: BridgeSimulation;
+  private graphics!: Phaser.GameObjects.Graphics;
+  private statsText!: Phaser.GameObjects.Text;
+  
+  private currentGenome: BridgeGenome | null = null;
+  private generation = 0;
+  private bestFitness = 0;
+  
+  private bridgeConfig: BridgeConfig = DEFAULT_BRIDGE_CONFIG;
+  private simConfig: SimulationConfig = DEFAULT_SIM_CONFIG;
+  
+  constructor() {
+    super({ key: 'BridgeScene' });
+  }
+  
+  create() {
+    // Setup graphics
+    this.graphics = this.add.graphics();
+    
+    // Stats text
+    this.statsText = this.add.text(10, 10, '', {
+      fontSize: '14px',
+      color: '#ffffff',
+      backgroundColor: '#00000088',
+      padding: { x: 10, y: 5 },
+    });
+    
+    // Create initial simple bridge for demonstration
+    this.createDemoBridge();
+  }
+  
+  private createDemoBridge() {
+    // Simple triangle bridge
+    const genome: BridgeGenome = {
+      nodes: [
+        { x: 0.5, y: 0.5 }, // Center top
+      ],
+      beams: [
+        { nodeA: -1, nodeB: 0 },  // Left anchor to center
+        { nodeA: -2, nodeB: 0 },  // Right anchor to center
+      ],
+    };
+    
+    this.updateBridge(genome);
+  }
+  
+  public updateBridge(genome: BridgeGenome) {
+    console.log('[BridgeScene] updateBridge called:', { nodes: genome.nodes.length, beams: genome.beams.length });
+    this.currentGenome = genome;
+    
+    // Create new simulation
+    if (this.sim) {
+      // Cleanup old sim if needed
+    }
+    
+    this.sim = new BridgeSimulation(genome, this.bridgeConfig, this.simConfig);
+  }
+  
+  public updateStats(generation: number, fitness: number) {
+    console.log('[BridgeScene] updateStats called:', { generation, fitness });
+    this.generation = generation;
+    this.bestFitness = fitness;
+  }
+  
+  update() {
+    if (!this.sim) return;
+    
+    // Update simulation
+    if (!this.sim.isFinished()) {
+      this.sim.update();
+    }
+    
+    // Render
+    this.render();
+  }
+  
+  private render() {
+    this.graphics.clear();
+    
+    // Draw ground
+    this.drawGround();
+    
+    // Draw bridge structure
+    this.drawBridge();
+    
+    // Update stats
+    this.updateStatsText();
+  }
+  
+  private drawGround() {
+    const groundY = this.bridgeConfig.anchorHeight + 350;
+    this.graphics.lineStyle(2, 0x444444);
+    this.graphics.beginPath();
+    this.graphics.moveTo(0, groundY);
+    this.graphics.lineTo(800, groundY);
+    this.graphics.strokePath();
+  }
+  
+  private drawBridge() {
+    if (!this.sim || !this.currentGenome) return;
+    
+    const { anchorHeight, spanWidth, nodeRadius } = this.bridgeConfig;
+    
+    // Draw nodes and beams
+    const beamForces = this.sim.getBeamForces();
+    const nodePositions = this.sim.getNodePositions();
+    const loadPos = this.sim.getLoadPosition();
+    
+    // Draw beams
+    for (let i = 0; i < this.currentGenome.beams.length; i++) {
+      const beam = this.currentGenome.beams[i];
+      const force = beamForces[i];
+      
+      // Get node positions
+      let posA: { x: number; y: number };
+      let posB: { x: number; y: number };
+      
+      if (beam.nodeA === -1) {
+        posA = { x: 100, y: anchorHeight };
+      } else if (beam.nodeA === -2) {
+        posA = { x: 100 + spanWidth, y: anchorHeight };
+      } else {
+        posA = nodePositions[beam.nodeA];
+      }
+      
+      if (beam.nodeB === -1) {
+        posB = { x: 100, y: anchorHeight };
+      } else if (beam.nodeB === -2) {
+        posB = { x: 100 + spanWidth, y: anchorHeight };
+      } else {
+        posB = nodePositions[beam.nodeB];
+      }
+      
+      if (!posA || !posB) continue;
+
+      // Color by stress
+      const color = force?.broken 
+        ? 0x666666 
+        : this.getStressColor(force?.force || 0);
+      
+      const lineWidth = force?.broken ? 1 : 3;
+      
+      this.graphics.lineStyle(lineWidth, color);
+      this.graphics.beginPath();
+      this.graphics.moveTo(posA.x, posA.y);
+      this.graphics.lineTo(posB.x, posB.y);
+      this.graphics.strokePath();
+    }
+    
+    // Draw nodes
+    for (const pos of nodePositions) {
+      this.graphics.fillStyle(0xcccccc);
+      this.graphics.fillCircle(pos.x, pos.y, nodeRadius);
+    }
+    
+    // Draw anchors
+    this.graphics.fillStyle(0x888888);
+    this.graphics.fillCircle(100, anchorHeight, nodeRadius * 2);
+    this.graphics.fillCircle(100 + spanWidth, anchorHeight, nodeRadius * 2);
+    
+    // Draw load
+    this.graphics.fillStyle(0xff6b6b);
+    this.graphics.fillRect(loadPos.x - 15, loadPos.y - 15, 30, 30);
+  }
+  
+  private getStressColor(force: number): number {
+    // Color mapping: Blue (tension) -> Green (low) -> Red (compression)
+    const maxForce = this.bridgeConfig.beamStrength;
+    const ratio = Math.abs(force) / maxForce;
+    
+    if (ratio > 1) return 0xff0000; // Red - overstressed
+    
+    // Low stress = green
+    if (ratio < 0.3) return 0x4ade80;
+    
+    // Tension (positive) = blue shades
+    if (force > 0) {
+      const hue = 200 - ratio * 40; // Blue to cyan
+      return Phaser.Display.Color.HSLToColor(hue / 360, 0.7, 0.5).color;
+    }
+    
+    // Compression (negative) = yellow to red
+    const hue = 50 - ratio * 50; // Yellow to red
+    return Phaser.Display.Color.HSLToColor(hue / 360, 0.8, 0.5).color;
+  }
+  
+  private updateStatsText() {
+    const result = this.sim?.getResult();
+    
+    this.statsText.setText([
+      `Generation: ${this.generation}`,
+      `Best Fitness: ${this.bestFitness.toFixed(0)}`,
+      `Nodes: ${this.currentGenome?.nodes.length || 0}`,
+      `Beams: ${this.currentGenome?.beams.length || 0}`,
+      `Steps: ${result?.stepsSupported || 0}`,
+      `Status: ${result?.collapsed ? 'Collapsed' : 'Standing'}`,
+    ]);
+  }
+}

src/apps/BridgeBuilder/BridgeSimulation.ts

@@ -0,0 +1,434 @@
+// Bridge Physics Simulation using Matter.js
+// @ts-ignore
+import decomp from 'poly-decomp';
+import Matter from 'matter-js';
+import type { BridgeGenome, BridgeConfig, SimulationConfig, BeamForce, SimulationResult } from './types';
+import { DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG } from './types';
+
+Matter.Common.setDecomp(decomp);
+
+export class BridgeSimulation {
+  public engine: Matter.Engine;
+  
+  private nodes: Matter.Body[] = [];
+  private beams: Matter.Constraint[] = [];
+  private loadSupports: { constraint: Matter.Constraint; nodeIdx: number }[] = [];
+  private load: Matter.Body;
+  private anchorLeft: Matter.Body;
+  private anchorRight: Matter.Body;
+  
+  private genome: BridgeGenome;
+  private bridgeConfig: BridgeConfig;
+  private simConfig: SimulationConfig;
+  
+  private currentStep = 0;
+  private loadHeightSum = 0;
+  private collapsed = false;
+  private brokenBeams = new Set<number>();
+  
+  constructor(
+    genome: BridgeGenome,
+    bridgeConfig: BridgeConfig = DEFAULT_BRIDGE_CONFIG,
+    simConfig: SimulationConfig = DEFAULT_SIM_CONFIG
+  ) {
+    this.genome = genome;
+    this.bridgeConfig = bridgeConfig;
+    this.simConfig = simConfig;
+    
+    // Create physics engine
+    this.engine = Matter.Engine.create();
+    this.engine.gravity.y = 9.81; // m/s^2
+    
+    // Create anchor points (static)
+    const anchorY = this.bridgeConfig.anchorHeight;
+    this.anchorLeft = Matter.Bodies.circle(100, anchorY, this.bridgeConfig.nodeRadius * 2, {
+      isStatic: true,
+      label: 'anchor',
+      render: { fillStyle: '#888' }
+    });
+    
+    this.anchorRight = Matter.Bodies.circle(
+      100 + this.bridgeConfig.spanWidth,
+      anchorY,
+      this.bridgeConfig.nodeRadius * 2,
+      {
+        isStatic: true,
+        label: 'anchor',
+        render: { fillStyle: '#888' }
+      }
+    );
+    
+    Matter.World.add(this.engine.world, [this.anchorLeft, this.anchorRight]);
+    
+    // Create nodes from genome
+    this.createNodes();
+    
+    // Create beams from genome
+    this.createBeams();
+    
+    // Create load (suspended from center of bridge)
+    this.load = this.createLoad();
+    Matter.World.add(this.engine.world, this.load);
+    
+    // Debug: Log construction details
+    if (this.nodes.length === 0) {
+      console.warn('[BridgeSim] WARNING: No nodes created!');
+    }
+    if (this.beams.length === 0) {
+      console.warn('[BridgeSim] WARNING: No beams created!');
+    }
+  }
+  
+  private createNodes() {
+    const { nodes } = this.genome;
+    const { spanWidth, anchorHeight, nodeRadius } = this.bridgeConfig;
+    
+    for (const node of nodes) {
+      // Convert relative coords (0-1) to world coords
+      const x = 100 + node.x * spanWidth;
+      const y = anchorHeight + node.y * 150;
+      
+      // Safety: Skip invalid nodes
+      if (isNaN(x) || isNaN(y)) {
+        console.warn('[BridgeSim] Skipping node with NaN coordinates:', node);
+        continue;
+      }
+      
+      const body = Matter.Bodies.circle(x, y, nodeRadius, {
+        label: 'node',
+        density: 0.001, // Light nodes
+        frictionAir: 0.01,
+      });
+      
+      this.nodes.push(body);
+      Matter.World.add(this.engine.world, body);
+    }
+  }
+  
+  private createBeams() {
+    const { beams } = this.genome;
+    const { beamStiffness } = this.bridgeConfig;
+    
+    // Add beams connecting to left anchor
+    const leftConnections = beams.filter(b => b.nodeA === -1 || b.nodeB === -1);
+    for (const beam of leftConnections) {
+      const nodeIdx = beam.nodeA === -1 ? beam.nodeB : beam.nodeA;
+      if (nodeIdx >= 0 && nodeIdx < this.nodes.length) {
+        const constraint = Matter.Constraint.create({
+          bodyA: this.anchorLeft,
+          bodyB: this.nodes[nodeIdx],
+          stiffness: beamStiffness,
+          damping: 0.01,
+          label: 'beam',
+        });
+        this.beams.push(constraint);
+        Matter.World.add(this.engine.world, constraint);
+      }
+    }
+    
+    // Add beams connecting to right anchor
+    const rightConnections = beams.filter(b => b.nodeA === -2 || b.nodeB === -2);
+    for (const beam of rightConnections) {
+      const nodeIdx = beam.nodeA === -2 ? beam.nodeB : beam.nodeA;
+      if (nodeIdx >= 0 && nodeIdx < this.nodes.length) {
+        const constraint = Matter.Constraint.create({
+          bodyA: this.anchorRight,
+          bodyB: this.nodes[nodeIdx],
+          stiffness: beamStiffness,
+          damping: 0.01,
+          label: 'beam',
+        });
+        this.beams.push(constraint);
+        Matter.World.add(this.engine.world, constraint);
+      }
+    }
+    
+    // Add beams between nodes
+    const nodeBeams = beams.filter(b => b.nodeA >= 0 && b.nodeB >= 0);
+    for (const beam of nodeBeams) {
+      if (beam.nodeA < this.nodes.length && beam.nodeB < this.nodes.length) {
+        const constraint = Matter.Constraint.create({
+          bodyA: this.nodes[beam.nodeA],
+          bodyB: this.nodes[beam.nodeB],
+          stiffness: beamStiffness,
+          damping: 0.01,
+          label: 'beam',
+        });
+        this.beams.push(constraint);
+        Matter.World.add(this.engine.world, constraint);
+      }
+    }
+  }
+  
+  private createLoad(): Matter.Body {
+    const centerX = 100 + this.bridgeConfig.spanWidth / 2;
+    const centerY = this.bridgeConfig.anchorHeight + 100;
+    const loadSize = 24;
+    
+    const load = Matter.Bodies.rectangle(
+      centerX,
+      centerY,
+      loadSize,
+      loadSize,
+      {
+        label: 'load',
+        density: (this.bridgeConfig.loadMass / (loadSize * loadSize)) * 1.5,
+        friction: 0.1,
+        restitution: 0.3,
+        render: { fillStyle: '#ff6b6b' }
+      }
+    );
+    
+    this.load = load; // IMPORTANT: Assign before using in constraints!
+    
+    // Find center nodes to attach load (if any exist)
+    if (this.nodes.length > 0) {
+      const attachNodes = this.nodes.filter(n => {
+        const dx = Math.abs(n.position.x - centerX);
+        return dx < this.bridgeConfig.spanWidth * 0.3; // Within 30% of center
+      });
+      
+      // If no center nodes, attach to any nodes
+      const nodesToUse = attachNodes.length > 0 ? attachNodes : this.nodes;
+      
+      // Sort by height (lowest y = highest up = closest to anchors)
+      nodesToUse.sort((a, b) => {
+        if (isNaN(a.position.y) || isNaN(b.position.y)) return 0;
+        return a.position.y - b.position.y;
+      });
+      
+      // Attach to top few nodes
+      const attachCount = Math.min(3, nodesToUse.length);
+      this.loadSupports = nodesToUse.slice(0, attachCount).map(node => {
+        const idx = this.nodes.indexOf(node);
+        const constraint = Matter.Constraint.create({
+          bodyA: load, // Use local variable for safety
+          bodyB: node,
+          stiffness: 0.8,
+          length: Matter.Vector.magnitude(Matter.Vector.sub(node.position, load.position)),
+          render: { visible: true, strokeStyle: '#ff0000', lineWidth: 2 }
+        });
+        Matter.Composite.add(this.engine.world, constraint);
+        return { constraint, nodeIdx: idx };
+      });
+    }
+    
+    console.log(`[BridgeSim] Created load with ${this.loadSupports.length} support constraints`);
+    
+    return load;
+  }
+  
+  public update() {
+    if (this.collapsed) return;
+    
+    // Step physics with MORE iterations for stability
+    Matter.Engine.update(this.engine, this.simConfig.timeStep, this.simConfig.physicsIterations);
+    this.currentStep++;
+    
+    // Check beam forces and break if over threshold
+    this.checkBeamForces();
+    
+    // Track load height for fitness (negative when below anchors = bad)
+    const loadY = this.load.position.y;
+    if (isNaN(loadY)) {
+        this.collapsed = true;
+        return;
+    }
+    const loadHeight = this.bridgeConfig.anchorHeight - loadY;
+    this.loadHeightSum += loadHeight;
+    
+    // Check if load hit ground (y > some threshold)
+    // Realism: If the load sags too much, it's a failure.
+    if (this.load.position.y > this.bridgeConfig.anchorHeight + 250) {
+      console.log(`[BridgeSim] Load collapsed at step ${this.currentStep}: y=${this.load.position.y.toFixed(1)}`);
+      this.collapsed = true;
+    }
+    
+
+  }
+  
+  private checkBeamForces() {
+    // ONLY check structural beams, NOT load supports
+    for (let i = 0; i < this.beams.length; i++) {
+      if (this.brokenBeams.has(i)) continue;
+      
+      const beam = this.beams[i];
+      const bodyA = beam.bodyA;
+      const bodyB = beam.bodyB;
+      
+      if (!bodyA || !bodyB) continue;
+      
+      const posA = bodyA.position;
+      const posB = bodyB.position;
+      
+      const dx = posB.x - posA.x;
+      const dy = posB.y - posA.y;
+      const currentLength = Math.sqrt(dx * dx + dy * dy);
+      const restLength = beam.length || currentLength;
+      
+      const extension = currentLength - restLength;
+      const force = extension * (beam.stiffness || 1) * 1000; // Approximate
+      
+      if (Math.abs(force) > this.bridgeConfig.beamStrength) {
+        // Debug first beam break
+        if (this.brokenBeams.size === 0) {
+          console.log(`[BridgeSim] First STRUCTURAL beam break at step ${this.currentStep}: force=${force.toFixed(0)}N (abs), threshold=${this.bridgeConfig.beamStrength}N`);
+        }
+        // Break beam
+        this.brokenBeams.add(i);
+        Matter.Composite.remove(this.engine.world, beam);
+        // REDUNDANCY: No longer setting this.collapsed = true here!
+      }
+    }
+  }
+  
+  private getConstraintForce(constraint: Matter.Constraint): number {
+    // Approximate force from constraint extension
+    const bodyA = constraint.bodyA;
+    const bodyB = constraint.bodyB;
+    
+    if (!bodyA || !bodyB) return 0;
+    
+    const posA = bodyA.position;
+    const posB = bodyB.position;
+    
+    const dx = posB.x - posA.x;
+    const dy = posB.y - posA.y;
+    const currentLength = Math.sqrt(dx * dx + dy * dy);
+    const restLength = constraint.length || currentLength;
+    
+    const extension = currentLength - restLength;
+    const force = extension * (constraint.stiffness || 1) * 1000; // Approximate
+    
+    return force;
+  }
+  
+  public run(steps: number) {
+    for (let i = 0; i < steps; i++) {
+      this.update();
+      if (this.collapsed) break;
+      if (this.currentStep >= this.simConfig.maxSteps) break;
+    }
+  }
+  
+  public isFinished(): boolean {
+    return this.collapsed || this.currentStep >= this.simConfig.maxSteps;
+  }
+  
+  public getBeamForces(): (BeamForce | null)[] {
+    const forces: (BeamForce | null)[] = [];
+    for (let i = 0; i < this.beams.length; i++) {
+        const beam = this.beams[i];
+        const isBroken = this.brokenBeams.has(i);
+        forces.push({
+            force: isBroken ? 0 : this.getConstraintForce(beam),
+            broken: isBroken,
+            nodeA: -1, // Not used by scene now
+            nodeB: -1, // Not used by scene now
+        });
+    }
+    return forces;
+  }
+
+  public getNodePositions(): { x: number; y: number }[] {
+    return this.nodes.map(node => ({ x: node.position.x, y: node.position.y }));
+  }
+
+  public getLoadPosition(): { x: number; y: number } {
+    return { x: this.load.position.x, y: this.load.position.y };
+  }
+  
+  private hasFullConnectivity(): boolean {
+    if (this.nodes.length === 0 || this.loadSupports.length === 0) return false;
+    
+    // Check if there's a path from left anchor (-1) -> load (-3) -> right anchor (-2)
+    // using only currently active beams (not broken)
+    const activeBeams = this.genome.beams.filter((_, i) => !this.brokenBeams.has(i));
+    
+    const adj = new Map<number, number[]>();
+    activeBeams.forEach(b => {
+      if (!adj.has(b.nodeA)) adj.set(b.nodeA, []);
+      if (!adj.has(b.nodeB)) adj.set(b.nodeB, []);
+      adj.get(b.nodeA)!.push(b.nodeB);
+      adj.get(b.nodeB)!.push(b.nodeA);
+    });
+    
+    // Add load supports to adjacency (treat load as -3)
+    const loadNodeId = -3;
+    adj.set(loadNodeId, []);
+    this.loadSupports.forEach(support => {
+        const v = support.nodeIdx;
+        adj.get(loadNodeId)!.push(v);
+        if (!adj.has(v)) adj.set(v, []);
+        adj.get(v)!.push(loadNodeId);
+    });
+    
+    // Check path: -1 to -3
+    if (!adj.has(-1) || !adj.has(loadNodeId)) return false;
+    const hasLeftToLoad = this.bfs(adj, -1, loadNodeId);
+    if (!hasLeftToLoad) return false;
+    
+    // Check path: -3 to -2
+    if (!adj.has(-2)) return false;
+    const hasLoadToRight = this.bfs(adj, loadNodeId, -2);
+    
+    return hasLoadToRight;
+  }
+  
+  private bfs(adj: Map<number, number[]>, start: number, target: number): boolean {
+    const visited = new Set<number>();
+    const queue = [start];
+    visited.add(start);
+    
+    while (queue.length > 0) {
+      const u = queue.shift()!;
+      if (u === target) return true;
+      
+      const neighbors = adj.get(u) || [];
+      for (const v of neighbors) {
+        if (!visited.has(v)) {
+          visited.add(v);
+          queue.push(v);
+        }
+      }
+    }
+    return false;
+  }
+  
+  public getResult(): SimulationResult {
+    const avgLoadHeight = this.loadHeightSum / Math.max(1, this.currentStep);
+    const beamCount = this.genome.beams.length;
+    const nodeCount = this.genome.nodes.length;
+    const connected = this.hasFullConnectivity();
+    
+    // REDUCED survival rewards for disconnected bridges
+    const timeScale = connected ? 100 : 1; 
+    const timeFitness = this.currentStep * timeScale; 
+    
+    // 2. Height Score (Only reward if connected)
+    const heightScore = connected ? avgLoadHeight * 5 : 0; 
+    
+    // 3. Material Penalty
+    const efficiencyFactor = Math.min(1, this.currentStep / 100); 
+    const materialPenalty = ((beamCount * 5) + (nodeCount * 2)) * efficiencyFactor;
+    
+    // 4. Structural Integrity Bonus
+    // MASSIVE reward for full connectivity side-to-side through load
+    const structureBonus = connected ? 5000 : 0; 
+    
+    // 5. Completion Bonus (Connected ONLY)
+    const completionBonus = (connected && this.currentStep >= this.simConfig.maxSteps && !this.collapsed) ? 10000 : 0;
+    
+    // Minimum fitness 1 to keep it in the pool
+    const fitness = Math.max(1, timeFitness + heightScore + structureBonus + completionBonus - materialPenalty);
+    
+    return {
+      fitness,
+      stepsSupported: this.currentStep,
+      avgLoadHeight,
+      beamCount,
+      maxStress: 0,
+      collapsed: this.collapsed || (!connected && this.currentStep > 10), // Treat disconnected as collapse
+    };
+  }
+}

src/apps/BridgeBuilder/FitnessGraph.tsx

@@ -0,0 +1,120 @@
+// Fitness Graph Component for Bridge Builder
+import { useEffect, useRef } from 'react';
+
+interface FitnessGraphProps {
+    bestFitnessHistory: number[];
+    avgFitnessHistory: number[];
+}
+
+export function FitnessGraph({ bestFitnessHistory, avgFitnessHistory }: FitnessGraphProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (bestFitnessHistory.length < 2) return;
+
+        const width = canvas.width;
+        const height = canvas.height;
+        const padding = 40;
+
+        // Calculate bounds
+        const allValues = [...bestFitnessHistory, ...avgFitnessHistory];
+        const minFitness = Math.min(...allValues);
+        const maxFitness = Math.max(...allValues);
+        const fitnessRange = maxFitness - minFitness || 1;
+
+        const maxGen = bestFitnessHistory.length - 1;
+
+        // Draw grid
+        ctx.strokeStyle = '#2a2a3e';
+        ctx.lineWidth = 1;
+
+        for (let i = 0; i <= 5; i++) {
+            const y = padding + (height - 2 * padding) * (i / 5);
+            ctx.beginPath();
+            ctx.moveTo(padding, y);
+            ctx.lineTo(width - padding, y);
+            ctx.stroke();
+
+            // Y-axis labels
+            const value = maxFitness - (fitnessRange * i / 5);
+            ctx.fillStyle = '#888';
+            ctx.font = '10px monospace';
+            ctx.textAlign = 'right';
+            ctx.fillText(value.toFixed(0), padding - 5, y + 3);
+        }
+
+        // Draw best fitness line
+        ctx.strokeStyle = '#4ade80';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+
+        bestFitnessHistory.forEach((fitness, i) => {
+            const x = padding + (width - 2 * padding) * (i / maxGen);
+            const y = padding + (height - 2 * padding) * (1 - (fitness - minFitness) / fitnessRange);
+
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            } else {
+                ctx.lineTo(x, y);
+            }
+        });
+
+        ctx.stroke();
+
+        // Draw avg fitness line
+        ctx.strokeStyle = '#60a5fa';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+
+        avgFitnessHistory.forEach((fitness, i) => {
+            const x = padding + (width - 2 * padding) * (i / maxGen);
+            const y = padding + (height - 2 * padding) * (1 - (fitness - minFitness) / fitnessRange);
+
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            } else {
+                ctx.lineTo(x, y);
+            }
+        });
+
+        ctx.stroke();
+
+        // Legend
+        ctx.fillStyle = '#4ade80';
+        ctx.fillRect(width - 120, 10, 15, 3);
+        ctx.fillStyle = '#fff';
+        ctx.font = '12px sans-serif';
+        ctx.textAlign = 'left';
+        ctx.fillText('Best', width - 100, 15);
+
+        ctx.fillStyle = '#60a5fa';
+        ctx.fillRect(width - 120, 25, 15, 3);
+        ctx.fillStyle = '#fff';
+        ctx.fillText('Average', width - 100, 30);
+
+    }, [bestFitnessHistory, avgFitnessHistory]);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            width={600}
+            height={200}
+            style={{
+                width: '100%',
+                height: 'auto',
+                border: '1px solid #2a2a3e',
+                borderRadius: '8px',
+                background: '#0f0f1e',
+            }}
+        />
+    );
+}

src/apps/BridgeBuilder/GeneticAlgo.ts

@@ -0,0 +1,315 @@
+// Genetic Algorithm for Bridge Evolution
+import type { BridgeGenome, GAConfig } from './types';
+import { DEFAULT_GA_CONFIG } from './types';
+
+export class GeneticAlgorithm {
+  private config: GAConfig;
+  
+  constructor(config: GAConfig = DEFAULT_GA_CONFIG) {
+    this.config = config;
+  }
+  
+  public createRandomGenome(minNodes = 15, maxNodes = 25): BridgeGenome {
+    for (let attempt = 0; attempt < 20; attempt++) {
+        const nodeCount = minNodes + Math.floor(Math.random() * (maxNodes - minNodes));
+        const nodes: { x: number; y: number }[] = [];
+        
+        // Create nodes in a rough lattice/grid with jitter
+        const cols = 5;
+        const rows = Math.ceil(nodeCount / cols);
+        
+        for (let i = 0; i < nodeCount; i++) {
+            const r = Math.floor(i / cols);
+            const c = i % cols;
+            
+            const xBase = (cols > 1 ? c / (cols - 1) : 0.5);
+            const yBase = (rows > 1 ? r / (rows - 1) : 0.5);
+            
+            const x = xBase * 0.8 + 0.1 + (Math.random() - 0.5) * 0.05;
+            const y = yBase * 0.4 + 0.3 + (Math.random() - 0.5) * 0.05;
+            
+            nodes.push({ 
+                x: isNaN(x) ? 0.5 : Math.max(0.05, Math.min(0.95, x)), 
+                y: isNaN(y) ? 0.5 : Math.max(0.1, Math.min(0.9, y)) 
+            });
+        }
+        
+        const beams: { nodeA: number; nodeB: number }[] = [];
+        
+        // 1. DENSE INTERNAL CONNECTIONS: Connect each node to its 3 nearest neighbors
+        for (let i = 0; i < nodes.length; i++) {
+            const distances = nodes.map((n, idx) => ({
+                idx,
+                dist: Math.pow(nodes[i].x - n.x, 2) + Math.pow(nodes[i].y - n.y, 2)
+            }))
+            .filter(d => d.idx !== i)
+            .sort((a, b) => a.dist - b.dist);
+            
+            for (let j = 0; j < Math.min(3, distances.length); j++) {
+                const targetIdx = distances[j].idx;
+                if (!this.hasBeam(beams, i, targetIdx)) {
+                    beams.push({ nodeA: i, nodeB: targetIdx });
+                }
+            }
+        }
+        
+        // 2. ANCHOR CONNECTIONS
+        const sortedByX = nodes.map((n, idx) => ({ n, idx })).sort((a,b) => a.n.x - b.n.x);
+        for (let i = 0; i < 3; i++) {
+            beams.push({ nodeA: -1, nodeB: sortedByX[i].idx });
+            beams.push({ nodeA: -2, nodeB: sortedByX[nodes.length - 1 - i].idx });
+        }
+        
+        // 3. LOAD BRACING
+        for (let i = 0; i < nodes.length; i++) {
+            if (nodes[i].x > 0.3 && nodes[i].x < 0.7 && Math.random() < 0.4) {
+                 const target = Math.floor(Math.random() * nodes.length);
+                 if (target !== i && !this.hasBeam(beams, i, target)) {
+                     beams.push({ nodeA: i, nodeB: target });
+                 }
+            }
+        }
+        
+        const genome = { nodes, beams };
+        if (this.checkConnectivity(genome)) {
+            return genome;
+        }
+    }
+    
+    // Fallback: Just return whatever we got on last attempt if we failed to connect
+    return { nodes: [], beams: [] }; // Simulation will handle empty genome
+  }
+  
+  private hasBeam(beams: { nodeA: number; nodeB: number }[], a: number, b: number): boolean {
+    return beams.some(beam => 
+      (beam.nodeA === a && beam.nodeB === b) || 
+      (beam.nodeA === b && beam.nodeB === a)
+    );
+  }
+  
+  public evolve(population: BridgeGenome[], fitnesses: number[]): BridgeGenome[] {
+    const newPopulation: BridgeGenome[] = [];
+    
+    // Elitism - keep top performers
+    const sorted = population
+      .map((genome, i) => ({ genome, fitness: isNaN(fitnesses[i]) ? -1e9 : fitnesses[i] }))
+      .sort((a, b) => b.fitness - a.fitness);
+    
+    for (let i = 0; i < this.config.eliteCount; i++) {
+      newPopulation.push(this.cloneGenome(sorted[i].genome));
+    }
+    
+    // Fill rest with offspring
+    while (newPopulation.length < population.length) {
+      const parent = this.tournamentSelect(population, fitnesses);
+      const offspring = this.mutate(this.cloneGenome(parent));
+      newPopulation.push(offspring);
+    }
+    
+    return newPopulation;
+  }
+  
+  private tournamentSelect(population: BridgeGenome[], fitnesses: number[]): BridgeGenome {
+    let bestIdx = Math.floor(Math.random() * population.length);
+    let bestFitness = fitnesses[bestIdx];
+    
+    for (let i = 1; i < this.config.tournamentSize; i++) {
+      const idx = Math.floor(Math.random() * population.length);
+      if (fitnesses[idx] > bestFitness) {
+        bestIdx = idx;
+        bestFitness = fitnesses[idx];
+      }
+    }
+    
+    return population[bestIdx];
+  }
+  
+  private mutate(genome: BridgeGenome): BridgeGenome {
+    const original = this.cloneGenome(genome);
+    
+    if (Math.random() > this.config.mutationRate) {
+      return genome;
+    }
+    
+    const roll = Math.random();
+    let cumProb = 0;
+    
+    let mutated = genome;
+    cumProb += this.config.addNodeProb;
+    if (roll < cumProb) mutated = this.addNode(genome);
+    else {
+        cumProb += this.config.removeNodeProb;
+        if (roll < cumProb) mutated = this.removeNode(genome);
+        else {
+            cumProb += this.config.moveNodeProb;
+            if (roll < cumProb) mutated = this.moveNode(genome);
+            else {
+                cumProb += this.config.addBeamProb;
+                if (roll < cumProb) mutated = this.addBeam(genome);
+                else mutated = this.removeBeam(genome);
+            }
+        }
+    }
+    
+    // Connectivity Guard: If mutation broke the bridge, try to fix it or revert
+    if (!this.checkConnectivity(mutated)) {
+        // Try one quick repair attempt
+        this.addBeam(mutated);
+        if (!this.checkConnectivity(mutated)) {
+            return original; // Revert if still broken
+        }
+    }
+    
+    return mutated;
+  }
+  
+  private checkConnectivity(genome: BridgeGenome): boolean {
+    if (genome.nodes.length === 0) return false;
+    
+    // Check path from left (-1) -> any center node -> right (-2)
+    const adj = new Map<number, number[]>();
+    genome.beams.forEach(b => {
+      if (!adj.has(b.nodeA)) adj.set(b.nodeA, []);
+      if (!adj.has(b.nodeB)) adj.set(b.nodeB, []);
+      adj.get(b.nodeA)!.push(b.nodeB);
+      adj.get(b.nodeB)!.push(b.nodeA);
+    });
+    
+    if (!adj.has(-1) || !adj.has(-2)) return false;
+    
+    // 1. BFS to find all nodes reachable from left anchor
+    const reachableFromLeft = this.getReachable(adj, -1);
+    
+    // 2. BFS to find all nodes reachable from right anchor
+    const reachableFromRight = this.getReachable(adj, -2);
+    
+    // 3. Find intersection (nodes on a path between anchors)
+    const bridgePathNodes = Array.from(reachableFromLeft).filter(id => reachableFromRight.has(id));
+    
+    // 4. Check if any of these nodes are in the "load zone" (center of bridge)
+    // Relative x between 0.3 and 0.7
+    const hasCentralNode = bridgePathNodes.some(id => {
+        if (id < 0) return false;
+        const x = genome.nodes[id].x;
+        return x > 0.3 && x < 0.7;
+    });
+    
+    return hasCentralNode;
+  }
+  
+  private getReachable(adj: Map<number, number[]>, start: number): Set<number> {
+    const visited = new Set<number>();
+    const queue = [start];
+    visited.add(start);
+    
+    while (queue.length > 0) {
+      const u = queue.shift()!;
+      const neighbors = adj.get(u) || [];
+      for (const v of neighbors) {
+        if (!visited.has(v)) {
+          visited.add(v);
+          queue.push(v);
+        }
+      }
+    }
+    return visited;
+  }
+  
+  private addNode(genome: BridgeGenome): BridgeGenome {
+    if (genome.nodes.length >= 50) return genome; // Updated to match DEFAULT_BRIDGE_CONFIG
+    
+    genome.nodes.push({
+      x: Math.random(),
+      y: Math.random() * 0.5 + 0.2,
+    });
+    
+    return genome;
+  }
+  
+  private removeNode(genome: BridgeGenome): BridgeGenome {
+    if (genome.nodes.length <= 5) return genome; // Keep a minimum for lattice survival
+    
+    const idx = Math.floor(Math.random() * genome.nodes.length);
+    genome.nodes.splice(idx, 1);
+    
+    // Remove beams connected to this node
+    genome.beams = genome.beams.filter(b => 
+      b.nodeA !== idx && b.nodeB !== idx
+    );
+    
+    // Adjust indices for remaining beams
+    genome.beams.forEach(b => {
+      if (b.nodeA > idx) b.nodeA--;
+      if (b.nodeB > idx) b.nodeB--;
+    });
+    
+    return genome;
+  }
+  
+  private moveNode(genome: BridgeGenome): BridgeGenome {
+    if (genome.nodes.length === 0) return genome;
+    
+    const idx = Math.floor(Math.random() * genome.nodes.length);
+    const node = genome.nodes[idx];
+    
+    // Small perturbation
+    node.x = Math.max(0, Math.min(1, node.x + (Math.random() - 0.5) * 0.1));
+    node.y = Math.max(0.1, Math.min(0.9, node.y + (Math.random() - 0.5) * 0.1));
+    
+    return genome;
+  }
+  
+  private addBeam(genome: BridgeGenome): BridgeGenome {
+    if (genome.beams.length >= 100) return genome; // Updated to match DEFAULT_BRIDGE_CONFIG
+    if (genome.nodes.length < 2) return genome;
+    
+    // Try to connect disconnected subgraphs or anchors
+    const nodes = genome.nodes;
+    
+    // Choose starting node
+    const a = Math.random() < 0.2 ? (Math.random() < 0.5 ? -1 : -2) : Math.floor(Math.random() * nodes.length);
+    
+    // Find random target
+    let bestTarget = -1;
+    
+    for (let i = 0; i < 10; i++) {
+        const b = Math.floor(Math.random() * nodes.length);
+        if (a === b) continue;
+        if (this.hasBeam(genome.beams, a, b)) continue;
+        
+        bestTarget = b;
+        break; // Simple random for now
+    }
+    
+    if (bestTarget !== -1) {
+        genome.beams.push({ nodeA: a, nodeB: bestTarget });
+    }
+    
+    return genome;
+  }
+  
+  private removeBeam(genome: BridgeGenome): BridgeGenome {
+    if (genome.beams.length === 0) return genome;
+    
+    // Bias toward removing internal beams, protect anchors a bit
+    const internalBeams = genome.beams.filter(b => b.nodeA >= 0 && b.nodeB >= 0);
+    const targetArray = (internalBeams.length > 5 && Math.random() < 0.8) ? internalBeams : genome.beams;
+    
+    const beamToRemove = targetArray[Math.floor(Math.random() * targetArray.length)];
+    const idx = genome.beams.indexOf(beamToRemove);
+    if (idx !== -1) {
+        // Don't remove if it's the last anchor connection? 
+        // We have the checkConnectivity guard in mutate() anyway.
+        genome.beams.splice(idx, 1);
+    }
+    
+    return genome;
+  }
+  
+  private cloneGenome(genome: BridgeGenome): BridgeGenome {
+    return {
+      nodes: genome.nodes.map(n => ({ ...n })),
+      beams: genome.beams.map(b => ({ ...b })),
+    };
+  }
+}

src/apps/BridgeBuilder/e2e.test.ts

@@ -0,0 +1,79 @@
+// E2E Test for Bridge Builder
+import { describe, it, expect } from 'bun:test';
+import { BridgeSimulation } from './BridgeSimulation';
+import { GeneticAlgorithm } from './GeneticAlgo';
+import { DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG, DEFAULT_GA_CONFIG } from './types';
+import type { BridgeGenome } from './types';
+
+describe('Bridge Builder E2E', () => {
+  it('should evolve bridges that survive longer than 12 steps', () => {
+    const ga = new GeneticAlgorithm(DEFAULT_GA_CONFIG);
+    
+    // Create initial population
+    const populationSize = 10;
+    let population: BridgeGenome[] = [];
+    for (let i = 0; i < populationSize; i++) {
+      population.push(ga.createRandomGenome(3, 8));
+    }
+    
+    console.log('\n=== Bridge Builder E2E Test ===\n');
+    
+    // Check first genome structure
+    console.log('First genome sample:');
+    console.log(`  Nodes: ${population[0].nodes.length}`, population[0].nodes.slice(0, 3));
+    console.log(`  Beams: ${population[0].beams.length}`, population[0].beams.slice(0, 5));
+    
+    // Evolve for 50 generations
+    for (let gen = 1; gen <= 50; gen++) {
+      const fitnesses: number[] = [];
+      const steps: number[] = [];
+      
+      // Evaluate each genome
+      for (const genome of population) {
+        const sim = new BridgeSimulation(genome, DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG);
+        sim.run(DEFAULT_SIM_CONFIG.maxSteps);
+        
+        const result = sim.getResult();
+        fitnesses.push(result.fitness);
+        steps.push(result.stepsSupported);
+      }
+      
+      const maxFitness = Math.max(...fitnesses);
+      const avgFitness = fitnesses.reduce((a, b) => a + b, 0) / fitnesses.length;
+      const bestIdx = fitnesses.indexOf(maxFitness);
+      const maxSteps = Math.max(...steps);
+      const avgSteps = steps.reduce((a, b) => a + b, 0) / steps.length;
+      
+      if (gen % 10 === 0 || gen === 1) {
+        console.log(`Gen ${gen}:`);
+        console.log(`  Fitness: ${avgFitness.toFixed(1)} (best: ${maxFitness.toFixed(1)})`);
+        console.log(`  Steps: ${avgSteps.toFixed(1)} (best: ${maxSteps})`);
+        console.log(`  Best genome: ${population[bestIdx].nodes.length} nodes, ${population[bestIdx].beams.length} beams`);
+      }
+      
+      // Evolve population
+      population = ga.evolve(population, fitnesses);
+    }
+    
+    // Final check
+    const finalFitnesses = population.map(genome => {
+      const sim = new BridgeSimulation(genome, DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG);
+      sim.run(DEFAULT_SIM_CONFIG.maxSteps);
+      return sim.getResult();
+    });
+    
+    const bestFinalResult = finalFitnesses.reduce((best, curr) => 
+      curr.fitness > best.fitness ? curr : best
+    );
+    
+    console.log('\n=== Final Results ===');
+    console.log(`Best fitness: ${bestFinalResult.fitness.toFixed(1)}`);
+    console.log(`Steps survived: ${bestFinalResult.stepsSupported} / ${DEFAULT_SIM_CONFIG.maxSteps}`);
+    console.log(`Collapsed: ${bestFinalResult.collapsed}`);
+    console.log(`Beams: ${bestFinalResult.beamCount}`);
+    
+    // Test assertions
+    expect(bestFinalResult.stepsSupported).toBeGreaterThan(12);
+    expect(bestFinalResult.fitness).toBeGreaterThan(1200);
+  });
+});

src/apps/BridgeBuilder/manual_test.ts

@@ -0,0 +1,33 @@
+// Simple manual test
+import { BridgeSimulation } from './BridgeSimulation';
+import { DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG } from './types';
+
+// Triangle bridge - simplest possible
+const genome = {
+  nodes: [
+    { x: 0.5, y: 0.3 }, // Center node below anchors
+  ],
+  beams: [
+    { nodeA: -1, nodeB: 0 },  // Left anchor to center
+    { nodeA: -2, nodeB: 0 },  // Right anchor to center  
+  ],
+};
+
+console.log('\n=== Manual Triangle Test ===\n');
+console.log('Genome:', genome);
+
+const sim = new BridgeSimulation(genome, DEFAULT_BRIDGE_CONFIG, DEFAULT_SIM_CONFIG);
+
+// Run for 100 steps
+for (let i = 0; i < 100; i++) {
+  sim.update();
+  if (i < 20 || i === 99) {
+    console.log(`Step ${i + 1}: loadY=${sim['load'].position.y.toFixed(1)}, collapsed=${sim['collapsed']}`);
+  }
+}
+
+const result = sim.getResult();
+console.log('\n=== Result ===');
+console.log(`Steps: ${result.stepsSupported}`);
+console.log(`Fitness: ${result.fitness.toFixed(1)}`);
+console.log(`Collapsed: ${result.collapsed}`);

src/apps/BridgeBuilder/training.worker.ts

@@ -0,0 +1,132 @@
+// Training Worker for Bridge Evolution
+// @ts-ignore
+import decomp from 'poly-decomp';
+import Matter from 'matter-js';
+Matter.Common.setDecomp(decomp);
+
+import { BridgeSimulation } from './BridgeSimulation';
+import { GeneticAlgorithm } from './GeneticAlgo';
+import type { BridgeGenome, BridgeConfig, SimulationConfig, GAConfig } from './types';
+
+interface WorkerConfig {
+  bridgeConfig: BridgeConfig;
+  simConfig: SimulationConfig;
+  gaConfig: GAConfig;
+}
+
+let population: BridgeGenome[] = [];
+let ga: GeneticAlgorithm;
+let config: WorkerConfig;
+let running = false;
+let generation = 0;
+
+self.onmessage = (e: MessageEvent) => {
+  const { type, payload } = e.data;
+  
+  switch (type) {
+    case 'start':
+      config = payload;
+      ga = new GeneticAlgorithm(config.gaConfig);
+      initializePopulation();
+      running = true;
+      runGeneration();
+      break;
+      
+    case 'stop':
+      running = false;
+      break;
+      
+    case 'reset':
+      generation = 0;
+      initializePopulation();
+      break;
+  }
+};
+
+function initializePopulation() {
+  population = [];
+  for (let i = 0; i < config.simConfig.populationSize; i++) {
+    population.push(ga.createRandomGenome(15, 25));
+  }
+  generation = 0;
+  
+  // Debug first genome
+  const first = population[0];
+  console.log('[Init] First random genome:', {
+    nodes: first.nodes.length,
+    beams: first.beams.length,
+    sampleNode: first.nodes[0],
+    sampleBeams: first.beams.slice(0, 3)
+  });
+}
+
+function runGeneration() {
+  if (!running) return;
+  
+  generation++;
+  
+  // Evaluate all genomes
+  const fitnesses: number[] = [];
+  const results: any[] = [];
+  
+  for (let i = 0; i < population.length; i++) {
+    const genome = population[i];
+    const sim = new BridgeSimulation(genome, config.bridgeConfig, config.simConfig);
+    
+    // Run simulation
+    sim.run(config.simConfig.maxSteps);
+    
+    const result = sim.getResult();
+    fitnesses.push(result.fitness);
+    results.push(result);
+    
+    // Debug first genome of first 3 generations
+    if (generation <= 3 && i === 0) {
+      console.log(`[Gen ${generation}] First genome:`, {
+        nodes: genome.nodes.length,
+        beams: genome.beams.length,
+        result: {
+          fitness: result.fitness.toFixed(1),
+          steps: result.stepsSupported,
+          avgHeight: result.avgLoadHeight.toFixed(1),
+          collapsed: result.collapsed
+        }
+      });
+    }
+  }
+  
+  // Find best
+  const validFitnesses = fitnesses.filter(f => !isNaN(f));
+  const maxFitness = validFitnesses.length > 0 ? Math.max(...validFitnesses) : 0;
+  const minFitness = validFitnesses.length > 0 ? Math.min(...validFitnesses) : 0;
+  const avgFitness = validFitnesses.length > 0 ? validFitnesses.reduce((a, b) => a + b, 0) / validFitnesses.length : 0;
+  
+  let bestIdx = fitnesses.indexOf(maxFitness);
+  if (bestIdx === -1) bestIdx = 0; // Fallback to first if all crashed/NaN
+  
+  const bestGenome = population[bestIdx];
+  const bestResult = results[bestIdx] || { stepsSupported: 0, avgLoadHeight: 0 };
+  
+  // Debug log every 10 generations
+  if (generation % 10 === 0 || generation <= 3) {
+    console.log(`[Gen ${generation}] Fitness: ${minFitness.toFixed(1)}-${maxFitness.toFixed(1)} (avg: ${avgFitness.toFixed(1)})`);
+    console.log(`  Best: nodes=${bestGenome.nodes.length}, beams=${bestGenome.beams.length}, steps=${bestResult.stepsSupported}, height=${bestResult.avgLoadHeight.toFixed(1)}`);
+  }
+  
+  // Send progress update
+  self.postMessage({
+    type: 'progress',
+    payload: {
+      generation,
+      bestFitness: maxFitness,
+      avgFitness,
+      bestGenome,
+    }
+  });
+  
+  // Evolve population
+  population = ga.evolve(population, fitnesses);
+  
+  // Continue to next generation
+  setTimeout(() => runGeneration(), 0);
+}

src/apps/BridgeBuilder/types.ts

@@ -0,0 +1,83 @@
+// Bridge Builder Types
+
+export interface BridgeGenome {
+  nodes: { x: number; y: number }[];  // Joint positions (relative coords)
+  beams: { nodeA: number; nodeB: number }[];  // Beam connections (node indices)
+}
+
+export interface BridgeConfig {
+  spanWidth: number;       // Width of gap to span
+  anchorHeight: number;    // Y position of anchor points
+  maxNodes: number;        // Maximum nodes allowed in genome
+  maxBeams: number;        // Maximum beams allowed in genome
+  beamStrength: number;    // Force threshold before breaking (N)
+  beamStiffness: number;   // Constraint stiffness (0-1)
+  loadMass: number;        // Mass of the load to support (kg)
+  nodeRadius: number;      // Radius of node bodies
+}
+
+export interface SimulationConfig {
+  populationSize: number;
+  maxSteps: number;         // Max physics steps per evaluation
+  physicsIterations: number; // Matter.js constraint iterations
+  timeStep: number;         // Physics time step (ms)
+}
+
+export interface GAConfig {
+  mutationRate: number;     // Probability of mutation per genome
+  eliteCount: number;       // Number of top performers to preserve
+  tournamentSize: number;   // Tournament selection size
+  
+  // Mutation operation probabilities (should sum to ~1.0)
+  addNodeProb: number;
+  removeNodeProb: number;
+  moveNodeProb: number;
+  addBeamProb: number;
+  removeBeamProb: number;
+}
+
+export interface BeamForce {
+  nodeA: number;
+  nodeB: number;
+  force: number;  // Positive = tension, Negative = compression
+  broken: boolean;
+}
+
+export interface SimulationResult {
+  fitness: number;
+  stepsSupported: number;
+  avgLoadHeight: number;
+  beamCount: number;
+  maxStress: number;
+  collapsed: boolean;
+}
+
+// Default configurations
+export const DEFAULT_BRIDGE_CONFIG: BridgeConfig = {
+  spanWidth: 600,
+  anchorHeight: 200,
+  maxNodes: 50,
+  maxBeams: 100,
+  beamStrength: 5000,  // Increased for better initial stability
+  beamStiffness: 1.0,  // RIGID - no stretching!
+  loadMass: 10,  // 10kg - significant challenge
+  nodeRadius: 5,
+};
+
+export const DEFAULT_SIM_CONFIG: SimulationConfig = {
+  populationSize: 50,
+  maxSteps: 600,  // 10 seconds at 60fps
+  physicsIterations: 10,
+  timeStep: 1000 / 60,
+};
+
+export const DEFAULT_GA_CONFIG: GAConfig = {
+  mutationRate: 0.8,
+  eliteCount: 5,
+  tournamentSize: 3,
+  addNodeProb: 0.2,
+  removeNodeProb: 0.1,
+  moveNodeProb: 0.3,
+  addBeamProb: 0.3,
+  removeBeamProb: 0.1,
+};

src/apps/BridgeBuilder/useEvolutionWorker.ts

@@ -0,0 +1,101 @@
+import { useState, useEffect, useRef } from 'react';
+import type { BridgeGenome, BridgeConfig, SimulationConfig, GAConfig } from './types';
+import TrainingWorker from './training.worker.ts?worker';
+
+export function useEvolutionWorker(
+  bridgeConfig: BridgeConfig,
+  simConfig: SimulationConfig,
+  gaConfig: GAConfig
+) {
+  const [generation, setGeneration] = useState(0);
+  const [bestFitness, setBestFitness] = useState(0);
+  const [avgFitness, setAvgFitness] = useState(0);
+  const [bestGenome, setBestGenome] = useState<BridgeGenome | null>(null);
+  const [isTraining, setIsTraining] = useState(false);
+  
+  // Fitness history for graphing
+  const [bestFitnessHistory, setBestFitnessHistory] = useState<number[]>([]);
+  const [avgFitnessHistory, setAvgFitnessHistory] = useState<number[]>([]);
+  
+  const workerRef = useRef<Worker | null>(null);
+  
+  useEffect(() => {
+    // Create worker
+    workerRef.current = new TrainingWorker();
+    
+    // Setup message handler
+    if (workerRef.current) {
+      workerRef.current.onmessage = (e: MessageEvent) => {
+      const { type, payload } = e.data;
+      
+      if (type === 'progress') {
+        console.log('[useEvolutionWorker] Received progress:', { 
+          gen: payload.generation, 
+          fitness: payload.bestFitness,
+          genomeNodes: payload.bestGenome?.nodes.length,
+          genomeBeams: payload.bestGenome?.beams.length
+        });
+        setGeneration(payload.generation);
+        setBestFitness(payload.bestFitness);
+        setAvgFitness(payload.avgFitness);
+        setBestGenome(payload.bestGenome);
+        
+        // Update fitness history
+        setBestFitnessHistory(prev => [...prev, payload.bestFitness]);
+        setAvgFitnessHistory(prev => [...prev, payload.avgFitness]);
+      }
+      };
+    }
+    
+    return () => {
+      workerRef.current?.terminate();
+    };
+  }, []);
+  
+  const startTraining = () => {
+    if (!workerRef.current) return;
+    
+    workerRef.current.postMessage({
+      type: 'start',
+      payload: {
+        bridgeConfig,
+        simConfig,
+        gaConfig,
+      },
+    });
+    
+    setIsTraining(true);
+  };
+  
+  const stopTraining = () => {
+    if (!workerRef.current) return;
+    
+    workerRef.current.postMessage({ type: 'stop' });
+    setIsTraining(false);
+  };
+  
+  const reset = () => {
+    if (!workerRef.current) return;
+    
+    workerRef.current.postMessage({ type: 'reset' });
+    setGeneration(0);
+    setBestFitness(0);
+    setAvgFitness(0);
+    setBestGenome(null);
+    setBestFitnessHistory([]);
+    setAvgFitnessHistory([]);
+  };
+  
+  return {
+    generation,
+    bestFitness,
+    avgFitness,
+    bestGenome,
+    isTraining,
+    bestFitnessHistory,
+    avgFitnessHistory,
+    startTraining,
+    stopTraining,
+    reset,
+  };
+}

src/apps/LunarLander/DenseNetwork.ts

@@ -0,0 +1,69 @@
+
+export class DenseNetwork {
+    private weights: Float32Array;
+    private layerSizes: number[];
+    
+    constructor(layerSizes: number[], weights?: Float32Array) {
+        this.layerSizes = layerSizes;
+        const totalWeights = this.calculateTotalWeights(layerSizes);
+        
+        if (weights) {
+            if (weights.length !== totalWeights) {
+                throw new Error(`Expected ${totalWeights} weights, got ${weights.length}`);
+            }
+            this.weights = weights;
+        } else {
+            this.weights = new Float32Array(totalWeights);
+            this.randomize();
+        }
+    }
+
+    private calculateTotalWeights(sizes: number[]): number {
+        let total = 0;
+        for (let i = 0; i < sizes.length - 1; i++) {
+            // Weights + Bias for each next-layer neuron
+            // (Input + 1) * Output
+            total += (sizes[i] + 1) * sizes[i + 1];
+        }
+        return total;
+    }
+
+    private randomize() {
+        for (let i = 0; i < this.weights.length; i++) {
+            this.weights[i] = (Math.random() * 2 - 1); // -1 to 1 simplified initialization
+        }
+    }
+
+    public predict(inputs: number[]): number[] {
+        let currentValues = inputs;
+
+        let weightIndex = 0;
+        for (let i = 0; i < this.layerSizes.length - 1; i++) {
+            const inputSize = this.layerSizes[i];
+            const outputSize = this.layerSizes[i + 1];
+            const nextValues = new Array(outputSize).fill(0);
+
+            for (let out = 0; out < outputSize; out++) {
+                let sum = 0;
+                // Weights
+                for (let inp = 0; inp < inputSize; inp++) {
+                    sum += currentValues[inp] * this.weights[weightIndex++];
+                }
+                // Bias (last weight for this neuron)
+                sum += this.weights[weightIndex++];
+
+                // Activation
+                // Output layer (last layer) -> Tanh for action outputs (-1 to 1)
+                // Hidden layers -> ReLU or Tanh. Let's use Tanh everywhere for simplicity/stability in evolution.
+                nextValues[out] = Math.tanh(sum); 
+            }
+            currentValues = nextValues;
+        }
+
+        return currentValues;
+    }
+
+    public getWeights(): Float32Array {
+        return this.weights;
+    }
+}

src/apps/LunarLander/GeneticAlgo.ts

@@ -0,0 +1,118 @@
+
+import { DenseNetwork } from './DenseNetwork';
+
+export interface Genome {
+    weights: Float32Array;
+    fitness: number;
+}
+
+export class GeneticAlgo {
+    private population: Genome[] = [];
+    private popSize: number;
+    private mutationRate: number;
+    private mutationScale: number;
+    public generation = 0;
+
+    // Track best ever
+    public bestGenome: Genome | null = null;
+    public bestFitness = -Infinity;
+
+    constructor(
+        popSize: number, 
+        layerSizes: number[], 
+        mutationRate = 0.1, // Chance per weight (increased for diversity)
+        mutationScale = 0.5  // Gaussian/random perturbation amount (increased)
+    ) {
+        this.popSize = popSize;
+        this.mutationRate = mutationRate;
+        this.mutationScale = mutationScale;
+
+        // Init population
+        for (let i = 0; i < popSize; i++) {
+            const net = new DenseNetwork(layerSizes);
+            this.population.push({
+                weights: net.getWeights(), // Actually reference, careful on mutation, should clone on breed
+                fitness: 0
+            });
+        }
+    }
+
+    public getPopulation() {
+        return this.population;
+    }
+
+    public evolve() {
+        // 1. Sort by fitness
+        this.population.sort((a, b) => b.fitness - a.fitness);
+
+        // Update best
+        if (this.population[0].fitness > this.bestFitness) {
+            this.bestFitness = this.population[0].fitness;
+            // Clone best weights to save safe
+            this.bestGenome = {
+                weights: new Float32Array(this.population[0].weights),
+                fitness: this.population[0].fitness
+            };
+        }
+
+        const newPop: Genome[] = [];
+
+        // 2. Elitism (Keep top 5)
+        const ELITE_COUNT = 5;
+        for (let i = 0; i < ELITE_COUNT; i++) {
+            newPop.push({
+                weights: new Float32Array(this.population[i].weights),
+                fitness: 0
+            });
+        }
+
+        // 3. Breed rest
+        while (newPop.length < this.popSize) {
+            // Tournament Select
+            const p1 = this.tournamentSelect();
+            const p2 = this.tournamentSelect();
+
+            // Crossover
+            const childWeights = this.crossover(p1.weights, p2.weights);
+
+            // Mutate
+            this.mutate(childWeights);
+
+            newPop.push({
+                weights: childWeights,
+                fitness: 0
+            });
+        }
+
+        this.population = newPop;
+        this.generation++;
+    }
+
+    private tournamentSelect(): Genome {
+        const pool = 5;
+        let best = this.population[Math.floor(Math.random() * this.population.length)];
+        for (let i = 0; i < pool - 1; i++) {
+            const cand = this.population[Math.floor(Math.random() * this.population.length)];
+            if (cand.fitness > best.fitness) best = cand;
+        }
+        return best;
+    }
+
+    private crossover(w1: Float32Array, w2: Float32Array): Float32Array {
+        const child = new Float32Array(w1.length);
+        // Uniform crossover
+        for (let i = 0; i < w1.length; i++) {
+            child[i] = Math.random() < 0.5 ? w1[i] : w2[i];
+        }
+        return child;
+    }
+
+    private mutate(weights: Float32Array) {
+        for (let i = 0; i < weights.length; i++) {
+            if (Math.random() < this.mutationRate) {
+                // Add noise
+                weights[i] += (Math.random() * 2 - 1) * this.mutationScale;
+            }
+        }
+    }
+}

src/apps/LunarLander/LanderScene.ts

@@ -0,0 +1,224 @@
+
+import Phaser from 'phaser';
+import Matter from 'matter-js';
+import { LanderSimulation, WORLD_WIDTH, WORLD_HEIGHT } from './LanderSimulation';
+import { DenseNetwork } from './DenseNetwork';
+
+export class LanderScene extends Phaser.Scene {
+    private sim!: LanderSimulation;
+    private network!: DenseNetwork;
+    private landerGraphics!: Phaser.GameObjects.Graphics;
+    private terrainGraphics!: Phaser.GameObjects.Graphics;
+    private flameParticles!: Phaser.GameObjects.Particles.ParticleEmitter;
+    
+    constructor() {
+        super({ key: 'LanderScene' });
+    }
+
+    preload() {
+        // Generate a simple particle texture programmatically
+        const gfx = this.make.graphics({ x: 0, y: 0 });
+        gfx.fillStyle(0xffffff);
+        gfx.fillCircle(4, 4, 4); // 8x8 circle
+        gfx.generateTexture('flame', 8, 8);
+        gfx.destroy();
+    }
+
+    create() {
+        this.landerGraphics = this.add.graphics();
+        this.terrainGraphics = this.add.graphics();
+        this.cameras.main.setBackgroundColor('#111122');
+        
+        // Add some stars
+        const stars = this.add.graphics();
+        stars.fillStyle(0xffffff, 0.5);
+        for(let i=0; i<100; i++) {
+            stars.fillPoint(Math.random() * WORLD_WIDTH, Math.random() * WORLD_HEIGHT, 1);
+        }
+
+        // Setup simple particles
+        this.flameParticles = this.add.particles(0, 0, 'flame', {
+            speed: 100,
+            scale: { start: 1, end: 0 },
+            blendMode: 'ADD',
+            lifespan: 200,
+            emitting: false
+        });
+
+        // Add visual info
+        this.add.text(10, 10, 'Lunar Lander', { color: '#ffffff', fontSize: '14px', fontStyle: 'bold' });
+        
+        this.statsText = this.add.text(10, 30, '', { color: '#aaaaaa', fontSize: '12px' });
+    }
+
+    private statsText!: Phaser.GameObjects.Text;
+
+    public startMatch(genomeData: any, seed: number = 0) {
+        // genomeData is now { weights: number[] }
+        const weights = new Float32Array(genomeData.weights);
+        // Architecture must match worker
+        this.network = new DenseNetwork([8, 16, 16, 2], weights);
+        
+        // Ensure visual matches what the agent trained on
+        this.sim = new LanderSimulation(seed); 
+    }
+
+    update() {
+        if (!this.sim || !this.network || this.sim.isGameOver) return;
+
+        // Step Sim
+        const inputs = this.sim.getObservation();
+        const outputs = this.network.predict(inputs);
+        this.sim.update(outputs);
+
+        // Render methods
+        this.drawScene();
+        this.updateStats();
+    }
+
+    private drawScene() {
+        this.landerGraphics.clear();
+        this.terrainGraphics.clear();
+        
+        // Static
+        this.terrainGraphics.fillStyle(0x555555);
+        this.drawBody(this.sim.ground, this.terrainGraphics);
+        this.terrainGraphics.fillStyle(0x00ff00);
+        this.drawBody(this.sim.pad, this.terrainGraphics);
+
+        // Dynamic
+        this.landerGraphics.fillStyle(0xcccccc);
+        this.drawBody(this.sim.lander, this.landerGraphics);
+
+        this.drawFlames();
+    }
+
+    private updateStats() {
+        // Text
+        const { currentWind, fuel, lander } = this.sim;
+        const color = Math.abs(currentWind) > 1.0 ? '#ff5555' : '#aaaaaa';
+        
+        this.statsText.setText([
+            `Fuel: ${Math.round(fuel)}`,
+            `Mass: ${lander.mass.toFixed(1)}kg`,
+            `Wind: ${currentWind.toFixed(2)}`,
+            `Gimbal: ${(this.sim.currentNozzleAngle * 180 / Math.PI).toFixed(1)}°`
+        ]).setColor(color);
+
+        // Visuals
+        this.drawWindIndicator();
+        this.drawThrustGauge();
+    }
+
+    private drawBody(body: Matter.Body, graphics: Phaser.GameObjects.Graphics) {
+        graphics.beginPath();
+        const verts = body.vertices;
+        graphics.moveTo(verts[0].x, verts[0].y);
+        for (let i = 1; i < verts.length; i++) {
+            graphics.lineTo(verts[i].x, verts[i].y);
+        }
+        graphics.closePath();
+        graphics.fillPath();
+        graphics.lineStyle(1, 0x000000).strokePath();
+    }
+
+    private drawFlames() {
+        const { currentMainPower, currentNozzleAngle, lander } = this.sim;
+        if (currentMainPower <= 0.1) return;
+
+        this.landerGraphics.save();
+        
+        const totalAngle = lander.angle + currentNozzleAngle;
+        const offset = { x: 0, y: 20 }; // Nozzle relative pos
+        const nozzlePos = Matter.Vector.add(lander.position, Matter.Vector.rotate(offset, lander.angle));
+        
+        // 1. Particles
+        const emitAngleDeg = Math.atan2(Math.cos(totalAngle), -Math.sin(totalAngle)) * (180/Math.PI);
+        this.flameParticles.setAngle(emitAngleDeg); // Simple angle setting
+        this.flameParticles.emitParticleAt(nozzlePos.x, nozzlePos.y);
+
+        // 2. Vector
+        const arrowLength = currentMainPower * 60;
+        const endX = nozzlePos.x - Math.sin(totalAngle) * arrowLength;
+        const endY = nozzlePos.y + Math.cos(totalAngle) * arrowLength;
+
+        this.landerGraphics.lineStyle(2, 0xffff00, 0.8);
+        this.landerGraphics.beginPath();
+        this.landerGraphics.moveTo(nozzlePos.x, nozzlePos.y);
+        this.landerGraphics.lineTo(endX, endY);
+        this.landerGraphics.strokePath();
+        
+        this.landerGraphics.restore();
+    }
+
+    private drawWindIndicator() {
+         const { currentWind, lander } = this.sim;
+         if (Math.abs(currentWind) <= 0.1) return;
+
+         const startX = lander.position.x;
+         const startY = lander.position.y - 40;
+         
+         const length = Math.abs(currentWind * 20);
+         const angle = currentWind > 0 ? 0 : Math.PI;
+
+         this.landerGraphics.lineStyle(2, 0x00ffff);
+         this.drawArrow(startX, startY, length, angle);
+    }
+
+    private drawArrow(x: number, y: number, length: number, angle: number) {
+        const endX = x + Math.cos(angle) * length;
+        const endY = y + Math.sin(angle) * length;
+        
+        this.landerGraphics.beginPath();
+        this.landerGraphics.moveTo(x, y);
+        this.landerGraphics.lineTo(endX, endY);
+        
+        // Arrow head
+        const headSize = 5;
+        this.landerGraphics.moveTo(endX, endY);
+        this.landerGraphics.lineTo(endX - headSize * Math.cos(angle - Math.PI / 6), endY - headSize * Math.sin(angle - Math.PI / 6));
+        this.landerGraphics.moveTo(endX, endY);
+        this.landerGraphics.lineTo(endX - headSize * Math.cos(angle + Math.PI / 6), endY - headSize * Math.sin(angle + Math.PI / 6));
+        
+        this.landerGraphics.strokePath();
+    }
+
+    private drawThrustGauge() {
+        const { currentMainPower, lastActions } = this.sim;
+        const barX = 10, barY = 90, barW = 100, barH = 10;
+        const g = this.terrainGraphics;
+
+        g.fillStyle(0x333333).fillRect(barX, barY, barW, barH);
+        g.fillStyle(0x00ff00).fillRect(barX, barY, currentMainPower * barW, barH);
+        
+        const cmdW = Math.max(0, lastActions[0]) * barW;
+        g.fillStyle(0xff0000).fillRect(barX + cmdW, barY - 2, 2, barH + 4);
+    }
+}
+
+export function createLanderViewer(container: HTMLElement) {
+    return new Phaser.Game({
+        type: Phaser.AUTO,
+        width: WORLD_WIDTH,
+        height: WORLD_HEIGHT,
+        parent: container,
+        scene: LanderScene,
+        transparent: false,
+        backgroundColor: '#111122',
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_BOTH
+        },
+        physics: {
+            default: 'matter', 
+            matter: {
+                gravity: { x: 0, y: 0 }, 
+                debug: false
+            }
+        }
+    });
+}
+
+export function getLanderScene(game: Phaser.Game): LanderScene {
+    return game.scene.getScene('LanderScene') as LanderScene;
+}

src/apps/LunarLander/LanderSimulation.ts

@@ -0,0 +1,186 @@
+import Matter from 'matter-js';
+
+export const WORLD_WIDTH = 800;
+export const WORLD_HEIGHT = 600;
+const LANDER_WIDTH = 30;
+const LANDER_HEIGHT = 40;
+const PAD_WIDTH = 80;
+
+export class LanderSimulation {
+    public engine: Matter.Engine;
+    public lander!: Matter.Body;
+    public ground!: Matter.Body;
+    public pad!: Matter.Body;
+    
+    public isGameOver = false;
+    public result: 'FLYING' | 'CRASHED' | 'LANDED' | 'TIMEOUT' = 'FLYING';
+    
+    // State
+    public fuel = 1000;
+    public readonly maxFuel = 1000;
+    public timeSteps = 0;
+    public readonly maxTimeSteps = 60 * 20; // 20s
+    public currentWind = 0;
+    public currentMainPower = 0;
+    public currentNozzleAngle = 0;
+    public lastActions: number[] = [0, 0];
+
+    // Config
+    private readonly DRY_MASS = 10;
+    private readonly FUEL_MASS_CAPACITY = 10;
+    private readonly LAG_FACTOR = 0.05;
+    private readonly GIMBAL_SPEED = 0.05;
+    private windTime = Math.random() * 100;
+
+    constructor(seed: number = 0) {
+        this.engine = Matter.Engine.create({ enableSleeping: false });
+        this.engine.gravity.y = 0.5;
+
+        // Custom PRNG
+        let s = seed;
+        const random = () => {
+            s = (s * 9301 + 49297) % 233280;
+            return s / 233280;
+        };
+
+        this.setupWorld(random);
+        Matter.Events.on(this.engine, 'collisionStart', (e) => this.handleCollisions(e));
+    }
+
+    private setupWorld(random: () => number) {
+        // Bodies
+        this.ground = Matter.Bodies.rectangle(WORLD_WIDTH/2, WORLD_HEIGHT, WORLD_WIDTH, 20, { 
+            isStatic: true, label: 'ground', friction: 1, render: { fillStyle: '#555555' } 
+        });
+
+        this.pad = Matter.Bodies.rectangle(WORLD_WIDTH/2, WORLD_HEIGHT - 30, PAD_WIDTH, 10, {
+            isStatic: true, label: 'pad', render: { fillStyle: '#00ff00' }
+        });
+
+        const startX = 100 + random() * (WORLD_WIDTH - 200);
+        const startY = 50 + random() * 100;
+        this.lander = Matter.Bodies.trapezoid(startX, startY, LANDER_WIDTH, LANDER_HEIGHT, 0.5, {
+            friction: 0.1, frictionAir: 0.02, restitution: 0, label: 'lander', angle: 0
+        });
+
+        Matter.Body.setMass(this.lander, this.DRY_MASS + this.FUEL_MASS_CAPACITY);
+        Matter.Body.setVelocity(this.lander, { x: (random() - 0.5) * 4, y: 0 });
+
+        Matter.World.add(this.engine.world, [this.ground, this.pad, this.lander]);
+    }
+
+    private handleCollisions(event: Matter.IEventCollision<Matter.Engine>) {
+        if (this.isGameOver) return;
+        
+        event.pairs.forEach(pair => {
+            const other = pair.bodyA === this.lander ? pair.bodyB : (pair.bodyB === this.lander ? pair.bodyA : null);
+            if (!other) return;
+
+            if (other.label === 'pad') this.checkLanding();
+            else if (other.label === 'ground') this.crash("Hit ground");
+        });
+    }
+
+    private checkLanding() {
+        const { position, velocity, angle, angularVelocity } = this.lander;
+        const speed = Math.hypot(velocity.x, velocity.y);
+        
+        // Strict Bounds Check
+        const isAbovePad = position.y < (this.pad.position.y - 15);
+        const isOnPad = Math.abs(position.x - this.pad.position.x) < 35; // Inside pad width
+        
+        if (!isAbovePad) return this.crash("Hit side of pad");
+        if (!isOnPad) return this.crash("Missed center");
+
+        // Landing Criteria
+        if (speed < 2.5 && Math.abs(angle) < 0.25 && Math.abs(angularVelocity) < 0.15) {
+            this.result = 'LANDED';
+            this.isGameOver = true;
+        } else {
+            this.crash(`Too fast/tilted: Spd=${speed.toFixed(1)}`);
+        }
+    }
+
+    private crash(_reason: string) {
+        this.result = 'CRASHED';
+        this.isGameOver = true;
+    }
+
+    public update(actions: number[]): boolean {
+        this.lastActions = actions;
+        if (this.isGameOver) return false;
+        if (++this.timeSteps > this.maxTimeSteps) {
+            this.result = 'TIMEOUT';
+            this.isGameOver = true;
+            return false;
+        }
+
+        this.applyWind();
+        this.updateMass();
+        this.applyControls(actions);
+        this.checkBounds();
+        
+        Matter.Engine.update(this.engine, 1000 / 60);
+        return !this.isGameOver;
+    }
+
+    private applyWind() {
+        this.windTime += 0.01;
+        this.currentWind = Math.sin(this.windTime) + Math.sin(this.windTime * 3.2) * 0.5 + Math.sin(this.windTime * 0.7) * 2.0;
+        Matter.Body.applyForce(this.lander, this.lander.position, { x: this.currentWind * 0.002, y: 0 });
+    }
+
+    private updateMass() {
+        const expectedMass = this.DRY_MASS + (this.fuel / this.maxFuel) * this.FUEL_MASS_CAPACITY;
+        if (Math.abs(this.lander.mass - expectedMass) > 0.01) {
+            Matter.Body.setMass(this.lander, expectedMass);
+        }
+    }
+
+    private applyControls(actions: number[]) {
+        // [0: Thrust (-1..1), 1: Nozzle (-1..1)]
+        let targetMainPower = Math.max(0, Math.min(1, (actions[0] + 1) / 2));
+        const targetNozzleAngle = actions[1] * 0.5; // Max 0.5 rad (~28 deg)
+
+        // Lag & Inertia
+        this.currentMainPower += Math.sign(targetMainPower - this.currentMainPower) * Math.min(Math.abs(targetMainPower - this.currentMainPower), this.LAG_FACTOR);
+        this.currentNozzleAngle += Math.sign(targetNozzleAngle - this.currentNozzleAngle) * Math.min(Math.abs(targetNozzleAngle - this.currentNozzleAngle), this.GIMBAL_SPEED);
+
+        // Fuel
+        if (this.fuel <= 0) this.currentMainPower = 0;
+        else this.fuel -= this.currentMainPower * 0.5;
+
+        // Apply Force
+        if (this.currentMainPower > 0.01) {
+            const force = 0.0005 * 20 * 2.5 * this.currentMainPower; // 2.5TWR approx
+            const totalAngle = this.lander.angle + this.currentNozzleAngle;
+            const forceVector = { x: Math.sin(totalAngle) * force, y: -Math.cos(totalAngle) * force };
+            
+            // Offset point (bottom of lander)
+            const appPos = Matter.Vector.add(this.lander.position, Matter.Vector.rotate({ x: 0, y: 20 }, this.lander.angle));
+            Matter.Body.applyForce(this.lander, appPos, forceVector);
+        }
+    }
+
+    private checkBounds() {
+        if (this.lander.position.x < -100 || this.lander.position.x > WORLD_WIDTH + 100 || 
+            this.lander.position.y < -500 || this.lander.position.y > WORLD_HEIGHT + 100) {
+            this.crash("Out of bounds");
+        }
+    }
+
+    public getObservation(): number[] {
+        const { velocity, angularVelocity, position, angle } = this.lander;
+        return [
+            velocity.x / 10.0,
+            velocity.y / 10.0,
+            angle / 3.14,
+            angularVelocity / 0.5,
+            (position.x - this.pad.position.x) / WORLD_WIDTH,
+            (position.y - this.pad.position.y) / WORLD_HEIGHT,
+            this.currentWind / 5.0,
+            this.currentNozzleAngle / 0.5,
+        ];
+    }
+}
+

src/apps/LunarLander/LunarLander.css

@@ -0,0 +1,129 @@
+.lunar-app-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: #0d1117;
+    color: #c9d1d9;
+    border-radius: 6px;
+}
+
+.top-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background: #161b22;
+    border-bottom: 1px solid #30363d;
+    flex-shrink: 0;
+    gap: 20px;
+}
+
+.controls-section {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.stats-section {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+}
+
+.stat-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #21262d;
+    padding: 5px 15px;
+    border-radius: 6px;
+    border: 1px solid #30363d;
+    min-width: 80px;
+}
+
+.stat-label {
+    font-size: 0.75em;
+    color: #8b949e;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-value {
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #c9d1d9;
+    font-family: monospace;
+}
+
+.stat-value.highlight {
+    color: #58a6ff;
+}
+
+.vis-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    min-width: 0;
+}
+
+.graph-panel {
+    height: 180px;
+    /* Slightly shorter */
+    background: #161b22;
+    border-top: 1px solid #30363d;
+    padding: 10px 15px;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    box-sizing: border-box;
+}
+
+.graph-panel h3 {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 0.9em;
+    color: #58a6ff;
+}
+
+.main-view {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000;
+}
+
+/* Controls */
+.btn-toggle {
+    padding: 8px 16px;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    background: #238636;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.2s;
+    font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.btn-toggle.active {
+    background: #da3633;
+}
+
+.btn-toggle:hover {
+    filter: brightness(1.1);
+}
+
+.btn-reset {
+    background: #30363d;
+    border-color: #30363d;
+}

src/apps/LunarLander/LunarLanderApp.tsx

@@ -0,0 +1,80 @@
+import { useRef, useEffect } from 'react';
+import AppContainer from '../../components/AppContainer';
+import { createLanderViewer, getLanderScene } from './LanderScene';
+import FitnessGraph from '../NeatArena/FitnessGraph';
+import { useEvolutionWorker } from './useEvolutionWorker';
+import './LunarLander.css';
+
+export default function LunarLanderApp() {
+    const { isTraining, stats, fitnessHistory, bestGenome, toggleTraining, handleReset } = useEvolutionWorker();
+    const phaserContainerRef = useRef<HTMLDivElement>(null);
+    const phaserGameRef = useRef<Phaser.Game | null>(null);
+
+    // Phaser Initialization
+    useEffect(() => {
+        if (!phaserContainerRef.current) return;
+        const game = createLanderViewer(phaserContainerRef.current);
+        phaserGameRef.current = game;
+        return () => {
+            game.destroy(true);
+            phaserGameRef.current = null;
+        };
+    }, []);
+
+    // Exhibition Loop
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (!phaserGameRef.current) return;
+            const scene = getLanderScene(phaserGameRef.current);
+            if (!scene) return;
+
+            // Start new match if game over and we have a genome
+            // Accessing private sim via any cast for simplicity without exposing public property
+            const sceneAny = scene as any;
+            if (bestGenome && (!sceneAny.sim || sceneAny.sim.isGameOver)) {
+                scene.startMatch(bestGenome, stats.generation);
+            }
+        }, 100);
+        return () => clearInterval(interval);
+    }, [bestGenome, stats.generation]);
+
+    return (
+        <AppContainer title="Lunar Lander (Dense NN)">
+            <div className="lunar-app-layout">
+                <div className="top-bar">
+                    <div className="controls-section">
+                        <button className={`btn-toggle ${isTraining ? 'active' : ''}`} onClick={toggleTraining}>
+                            {isTraining ? '⏸ Pause' : '▶ Start Evolution'}
+                        </button>
+                        <button className="btn-toggle btn-reset" onClick={handleReset}>
+                            🔄 Reset
+                        </button>
+                    </div>
+
+                    <div className="stats-section">
+                        <StatCard label="Generation" value={stats.generation} />
+                        <StatCard label="Best Fit" value={stats.maxFitness.toFixed(2)} highlight />
+                        <StatCard label="Avg Fit" value={stats.avgFitness.toFixed(2)} />
+                    </div>
+                </div>
+
+                <div className="graph-panel">
+                    <FitnessGraph history={fitnessHistory} />
+                </div>
+
+                <div className="vis-column">
+                    <div className="main-view" ref={phaserContainerRef} />
+                </div>
+            </div>
+        </AppContainer>
+    );
+}
+
+function StatCard({ label, value, highlight = false }: { label: string, value: string | number, highlight?: boolean }) {
+    return (
+        <div className="stat-card">
+            <div className="stat-label">{label}</div>
+            <div className={`stat-value ${highlight ? 'highlight' : ''}`}>{value}</div>
+        </div>
+    );
+}

src/apps/LunarLander/debug.test.ts

@@ -0,0 +1,60 @@
+
+import { describe, it, expect } from 'bun:test';
+import { LanderSimulation } from './LanderSimulation';
+import Matter from 'matter-js';
+
+describe('Lunar Lander Physics Debug', () => {
+    it('should have enough thrust to lift off', () => {
+        const sim = new LanderSimulation(0);
+        const lander = sim.lander;
+        
+        console.log('--- Physics Debug Info ---');
+        console.log(`Lander Mass: ${lander.mass.toFixed(4)}`);
+        console.log(`Gravity Y: ${sim.engine.gravity.y}`);
+        console.log(`Gravity Scale: ${sim.engine.gravity.scale}`); // Default 0.001?
+        
+        // Matter.js gravity force = mass * gravity.y * gravity.scale
+        // (Wait, Matter applies gravity as acceleration? F = m * a)
+        // Standard gravity force per tick approx:
+        // Force = mass * gravity.y * 0.001 (default scale)
+        
+        const gravityForce = lander.mass * sim.engine.gravity.y * (sim.engine.gravity.scale || 0.001);
+        console.log(`Calculated Gravity Force (approx): ${gravityForce.toFixed(6)}`);
+
+        // My Max Thrust
+        const mainPower = 1.0;
+        const thrustForce = 0.002 * mainPower;
+        console.log(`Max Thrust Force: ${thrustForce.toFixed(6)}`);
+
+        const ratio = thrustForce / gravityForce;
+        console.log(`Thrust/Gravity Ratio: ${ratio.toFixed(2)}`);
+
+        // We expect Ratio > 1.0 to hover
+        if (ratio < 1.0) {
+            console.warn('⚠️ WARNING: THRUST IS TOO WEAK TO LIFT OFF! ⚠️');
+        } else {
+            console.log('✅ Thrust is sufficient.');
+        }
+
+        expect(ratio).toBeGreaterThan(1.2); // Should have some margin
+    });
+
+    it('should update inputs correctly', () => {
+        const sim = new LanderSimulation(0);
+        
+        // Initial state
+        const initialObs = sim.getObservation();
+        console.log('Initial Obs:', initialObs);
+        
+        // Fall for a bit
+        sim.update([0, 0]); // No thrust
+        sim.update([0, 0]);
+        sim.update([0, 0]); // 3 ticks
+        
+        const obs = sim.getObservation();
+        console.log('Obs after 3 ticks fall:', obs);
+        
+        // Velocity Y should be positive (down)
+        expect(obs[1]).toBeGreaterThan(0);
+    });
+});

src/apps/LunarLander/e2e.test.ts

@@ -0,0 +1,114 @@
+
+import { describe, test, expect } from "bun:test";
+import { LanderSimulation } from "./LanderSimulation";
+import { LANDER_NEAT_CONFIG, calculateFitness } from "./neatConfig";
+import { createPopulation, evolveGeneration } from "../../lib/neatArena/evolution";
+import { createNetwork } from "../../lib/neatArena/network";
+
+describe("Lunar Lander E2E & Stability", () => {
+
+    test("Simulation Determinism (Same Actions)", () => {
+        // Run two sims side-by-side with identical actions
+        const sim1 = new LanderSimulation(0);
+        const sim2 = new LanderSimulation(0);
+        
+        const actions = [1.0, 0.5]; // Full thrust, turn right
+
+        for(let i=0; i<100; i++) {
+            sim1.update(actions);
+            sim2.update(actions);
+
+            expect(sim1.lander.position.x).toBe(sim2.lander.position.x);
+            expect(sim1.lander.position.y).toBe(sim2.lander.position.y);
+            expect(sim1.lander.angle).toBe(sim2.lander.angle);
+        }
+    });
+
+    test("Evaluation Determinism (Same Genome)", () => {
+        const population = createPopulation(LANDER_NEAT_CONFIG);
+        const genome = population.genomes[0];
+        
+        // Evaluate once
+        const runSim = (g: typeof genome) => {
+            const sim = new LanderSimulation(0);
+            const net = createNetwork(g);
+            
+            while(!sim.isGameOver) {
+                const inputs = sim.getObservation();
+                const outputs = net.activate(inputs);
+                sim.update(outputs);
+            }
+            return calculateFitness(sim);
+        };
+
+        const fit1 = runSim(genome);
+        const fit2 = runSim(genome);
+        const fit3 = runSim(genome);
+
+        console.log(`Determinism Check: ${fit1}, ${fit2}, ${fit3}`);
+        expect(fit1).toBe(fit2);
+        expect(fit2).toBe(fit3);
+    });
+
+    test("Long Flight Stability (Mock Pilot)", () => {
+        // A simple pilot that pushes up if falling
+        const runPilot = () => {
+            const sim = new LanderSimulation(0);
+            let steps = 0;
+            while (!sim.isGameOver && steps < 1000) {
+                const obs = sim.getObservation();
+                // obs[1] is velY (scaled / 10). Positive = Falling.
+                // If falling > 0.1 (vel 1.0), thrust!
+                const mainThrust = obs[1] > 0.1 ? 1.0 : 0.0;
+                sim.update([mainThrust, 0]);
+                steps++;
+            }
+            return { fitness: calculateFitness(sim), steps };
+        };
+
+        const result1 = runPilot();
+        const result2 = runPilot();
+        const result3 = runPilot();
+
+        console.log(`Pilot Results: ${result1.fitness.toFixed(2)} (${result1.steps}), ${result2.fitness.toFixed(2)} (${result2.steps}), ${result3.fitness.toFixed(2)} (${result3.steps})`);
+        
+        expect(result1.fitness).toBe(result2.fitness);
+        expect(result1.steps).toBe(result2.steps);
+    });
+
+    test("Evolution Progress (Mock)", () => {
+        let population = createPopulation({
+            ...LANDER_NEAT_CONFIG,
+            populationSize: 20 // Smaller for speed
+        });
+
+        let bestFit = -Infinity;
+
+        // Run 5 generations
+        for(let gen=0; gen<5; gen++) {
+            // Evaluate
+            for(const g of population.genomes) {
+                const sim = new LanderSimulation(0);
+                const net = createNetwork(g);
+                while(!sim.isGameOver) {
+                    const inputs = sim.getObservation();
+                    const outputs = net.activate(inputs);
+                    sim.update(outputs);
+                }
+                g.fitness = calculateFitness(sim);
+            }
+
+            // Stats
+            const currentBest = Math.max(...population.genomes.map(g => g.fitness));
+            console.log(`Gen ${gen}: Best = ${currentBest.toFixed(2)}`);
+
+            // Elitism check: Best fitness should NEVER decrease
+            if (gen > 0) {
+                expect(currentBest).toBeGreaterThanOrEqual(bestFit - 0.001); // Tiny float tolerance
+            }
+            bestFit = currentBest;
+
+            population = evolveGeneration(population, LANDER_NEAT_CONFIG);
+        }
+    });
+});

src/apps/LunarLander/neatConfig.ts

@@ -0,0 +1,71 @@
+
+import { LanderSimulation } from './LanderSimulation';
+import type { EvolutionConfig } from '../../lib/neatArena/evolution';
+import { DEFAULT_COMPATIBILITY_CONFIG } from '../../lib/neatArena/speciation';
+import { DEFAULT_REPRODUCTION_CONFIG } from '../../lib/neatArena/reproduction';
+
+export const LANDER_NEAT_CONFIG: EvolutionConfig = {
+    inputCount: 8, // velX, velY, angle, angVel, dx, dy, WIND, nozzleAngle
+    outputCount: 2, // mainThrust, sideThrust
+    populationSize: 150,
+    compatibilityConfig: DEFAULT_COMPATIBILITY_CONFIG,
+    reproductionConfig: {
+        ...DEFAULT_REPRODUCTION_CONFIG,
+        elitePerSpecies: 2, // Keep top 2 per species to prevent losing best genes
+    },
+};
+
+export function calculateFitness(sim: LanderSimulation): number {
+    let fitness = 0;
+
+    // 1. Distance Reward (Closer to pad is better)
+    const distX = Math.abs(sim.lander.position.x - sim.pad.position.x);
+    const distY = Math.abs(sim.lander.position.y - sim.pad.position.y);
+    const dist = Math.sqrt(distX * distX + distY * distY);
+    
+    // Normalize distance reward (0 to 100)
+    fitness += Math.max(0, 500 - dist) * 0.1;
+
+    // Common metrics
+    const speed = Math.hypot(sim.lander.velocity.x, sim.lander.velocity.y);
+    const angle = Math.abs(sim.lander.angle);
+
+    // 2. Landing Reward
+    if (sim.result === 'LANDED') {
+        fitness += 200; // Base success reward
+
+        // SOFT LANDING BONUS
+        // Speed limit is 2.5. We reward being significantly below that.
+        // If speed is 0.0 -> +250 pts
+        // If speed is 2.5 -> +0 pts
+        fitness += Math.max(0, 2.5 - speed) * 100;
+
+        // Alignment Bonus (Dead center upright)
+        fitness += Math.max(0, 0.25 - angle) * 100;
+
+        // Efficiency Bonus
+        fitness += sim.fuel * 0.2; 
+    } 
+    // 3. Near-Miss / Crash partial rewards
+    else if (sim.result === 'CRASHED') {
+        // Continuous reward: Encourage getting CLOSER to valid landing state
+        
+        // Speed: Reward any braking. Freefall ~20.
+        // At 20 -> 0 pts
+        // At 0 -> 60 pts
+        fitness += Math.max(0, 20.0 - speed) * 3.0;
+        
+        // Angle: Upright is better.
+        fitness += Math.max(0, 1.0 - angle) * 30;
+
+        // Penalty for doing NOTHING (Full Fuel)
+        if (sim.fuel >= 999) {
+            fitness -= 30; 
+        }
+        
+    } else if (sim.result === 'TIMEOUT') {
+       fitness -= 50; 
+    }
+
+    return Math.max(0.1, fitness);
+}

src/apps/LunarLander/stagnation.test.ts

@@ -0,0 +1,72 @@
+
+import { test, expect } from 'bun:test';
+import { GeneticAlgo } from './GeneticAlgo';
+import { DenseNetwork } from './DenseNetwork';
+import { calculateFitness } from './neatConfig';
+import { LanderSimulation } from './LanderSimulation';
+
+test('Run 150 generations of Dense GA to verify learning progress', () => {
+    // 1. Setup
+    const LAYER_SIZES = [7, 16, 16, 2];
+    const POPULATION_SIZE = 150;
+    const ga = new GeneticAlgo(POPULATION_SIZE, LAYER_SIZES);
+    
+    const TOTAL_GENS = 150; 
+    const SCENARIOS = 5;
+
+    console.log("Generation, MaxFitness, AvgFitness");
+
+    for (let gen = 0; gen < TOTAL_GENS; gen++) {
+        // 2. Evaluate
+        const population = ga.getPopulation();
+        
+        for (const genome of population) {
+             const network = new DenseNetwork(LAYER_SIZES, genome.weights);
+             let totalFitness = 0;
+
+             for (let i = 0; i < SCENARIOS; i++) {
+                const seed = (ga.generation * SCENARIOS) + i; 
+                const sim = new LanderSimulation(seed);
+
+                let safety = 0;
+                while (!sim.isGameOver && safety < 5000) {
+                    const inputs = sim.getObservation();
+                    const outputs = network.predict(inputs);
+                    sim.update(outputs);
+                    safety++;
+                }
+                
+                totalFitness += calculateFitness(sim);
+            }
+            genome.fitness = totalFitness / SCENARIOS;
+        }
+
+        // 3. Log Stats every 10 gens
+        if (gen % 10 === 0) {
+            let maxFitness = -Infinity;
+            let sumFitness = 0;
+            for (const g of population) {
+                if (g.fitness > maxFitness) maxFitness = g.fitness;
+                sumFitness += g.fitness;
+            }
+            const avgFitness = sumFitness / population.length;
+            
+            console.log(`${ga.generation}, ${maxFitness.toFixed(2)}, ${avgFitness.toFixed(2)}`);
+        }
+
+        // 4. Evolve
+        ga.evolve();
+    }
+
+    const finalPop = ga.getPopulation();
+    let maxFitness = -Infinity;
+    for (const g of finalPop) {
+        if (g.fitness > maxFitness) maxFitness = g.fitness;
+    }
+    
+    console.log(`Final Gen ${ga.generation}: Max ${maxFitness.toFixed(2)}`);
+
+    // Expect significant improvement.
+    // Landing is > 200.
+    expect(maxFitness).toBeGreaterThan(150); 
+}, { timeout: 300000 }); // 5 min timeout

src/apps/LunarLander/training.worker.ts

@@ -0,0 +1,105 @@
+import { LanderSimulation } from './LanderSimulation';
+import { calculateFitness } from './neatConfig'; 
+import { GeneticAlgo } from './GeneticAlgo';
+import { DenseNetwork } from './DenseNetwork';
+
+// Define the fixed architecture
+// 6 Input -> 16 Hidden -> 16 Hidden -> 2 Output
+const LAYER_SIZES = [8, 16, 16, 2];
+const POPULATION_SIZE = 150;
+
+let ga: GeneticAlgo | null = null;
+let isRunning = false;
+
+self.onmessage = (e: MessageEvent) => {
+    const { type } = e.data;
+
+    switch (type) {
+        case 'start':
+        case 'reset':
+            console.log('Worker: Initializing Fixed Topology GA');
+            ga = new GeneticAlgo(POPULATION_SIZE, LAYER_SIZES);
+            isRunning = true;
+            runGeneration();
+            break;
+        case 'pause':
+            isRunning = false;
+            break;
+        case 'resume':
+            if (!isRunning) {
+                isRunning = true;
+                runGeneration();
+            }
+            break;
+    }
+};
+
+function runGeneration() {
+    if (!ga || !isRunning) return;
+
+    const population = ga.getPopulation();
+
+    // 1. Evaluate Fitness
+    const SCENARIOS = 5;
+
+    for (const genome of population) {
+        let totalFitness = 0;
+        const network = new DenseNetwork(LAYER_SIZES, genome.weights);
+
+        for (let i = 0; i < SCENARIOS; i++) {
+            // Seed logic: (Gen * Scenarios) + i
+            const seed = (ga.generation * SCENARIOS) + i;
+            const sim = new LanderSimulation(seed);
+
+            // Simulation Loop
+            // Safety break just in case
+            let step = 0;
+            while (!sim.isGameOver && step < 5000) {
+                const inputs = sim.getObservation();
+                const outputs = network.predict(inputs);
+                sim.update(outputs);
+                step++;
+            }
+            if (step >= 5000) {
+                 // penalty for timeout? Or just let calcFitness handle it.
+                 // calculateFitness handles timeout result.
+                 // Force result if not set
+                 if (!sim.isGameOver) sim.result = 'TIMEOUT';
+            }
+
+            totalFitness += calculateFitness(sim);
+        }
+
+        genome.fitness = totalFitness / SCENARIOS;
+    }
+
+    // Calculate stats before evolution
+    let sumFitness = 0;
+    let maxFitness = -Infinity;
+    for (const genome of population) {
+        sumFitness += genome.fitness;
+        if (genome.fitness > maxFitness) maxFitness = genome.fitness;
+    }
+    const avgFitness = sumFitness / population.length;
+    
+    // Send update to main thread
+    // The main thread expects bestGenome object. 
+    // We'll send the weights of the current champion (maxFitness)
+    const bestOfGen = population.find(g => g.fitness === maxFitness) || population[0];
+
+    self.postMessage({
+        type: 'generationParams',
+        payload: {
+            generation: ga.generation, 
+            maxFitness: maxFitness,
+            avgFitness: avgFitness,
+            bestGenome: { weights: Array.from(bestOfGen.weights) } // Custom payload
+        }
+    });
+
+    // 2. Evolve to next generation
+    ga.evolve(); 
+
+    // Schedule next gen
+    setTimeout(runGeneration, 0);
+}

src/apps/LunarLander/useEvolutionWorker.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+export interface Stats {
+    generation: number;
+    maxFitness: number;
+    avgFitness: number;
+}
+
+export interface HistoryItem {
+    generation: number;
+    best: number;
+    avg: number;
+}
+
+export function useEvolutionWorker() {
+    const [isTraining, setIsTraining] = useState(false);
+    const [stats, setStats] = useState<Stats>({ generation: 0, maxFitness: 0, avgFitness: 0 });
+    const [fitnessHistory, setFitnessHistory] = useState<HistoryItem[]>([]);
+    const [bestGenome, setBestGenome] = useState<any>(null);
+    
+    const workerRef = useRef<Worker | null>(null);
+
+    useEffect(() => {
+        const worker = new Worker(new URL('./training.worker.ts', import.meta.url), { type: 'module' });
+        workerRef.current = worker;
+
+        worker.onmessage = (e: MessageEvent<any>) => {
+            const { type, payload, error } = e.data;
+            
+            if (type === 'generationParams') {
+                setStats({
+                    generation: payload.generation,
+                    maxFitness: payload.maxFitness,
+                    avgFitness: payload.avgFitness
+                });
+
+                if (payload.bestGenome) {
+                    setBestGenome(payload.bestGenome);
+                }
+
+                setFitnessHistory(prev => [...prev, {
+                    generation: payload.generation,
+                    best: payload.maxFitness,
+                    avg: payload.avgFitness
+                }]);
+            } else if (type === 'error') {
+                console.error("Worker Error:", error);
+                setIsTraining(false);
+            }
+        };
+
+        // Initial reset to setup GA
+        worker.postMessage({ type: 'reset' });
+
+        return () => worker.terminate();
+    }, []);
+
+    useEffect(() => {
+        if (!workerRef.current) return;
+        workerRef.current.postMessage({ type: isTraining ? 'resume' : 'pause' });
+    }, [isTraining]);
+
+    const handleReset = useCallback(() => {
+        setStats({ generation: 0, maxFitness: 0, avgFitness: 0 });
+        setFitnessHistory([]);
+        setBestGenome(null);
+        workerRef.current?.postMessage({ type: 'reset' });
+    }, []);
+
+    const toggleTraining = useCallback(() => {
+        setIsTraining(prev => !prev);
+    }, []);
+
+    return {
+        isTraining,
+        stats,
+        fitnessHistory,
+        bestGenome,
+        toggleTraining,
+        handleReset
+    };
+}

src/apps/NeatArena/FitnessGraph.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef } from 'react';
+
+interface FitnessGraphProps {
+    history: { generation: number; best: number; avg: number }[];
+}
+
+export default function FitnessGraph({ history }: FitnessGraphProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const draw = () => {
+        const canvas = canvasRef.current;
+        if (!canvas || history.length === 0) return;
+
+        const container = containerRef.current;
+        if (container) {
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+        }
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const width = canvas.width;
+        const height = canvas.height;
+
+        // Configurable padding
+        const paddingLeft = 40;
+        const paddingRight = 20;
+        const paddingTop = 40;
+        const paddingBottom = 20;
+
+        const graphWidth = width - paddingLeft - paddingRight;
+        const graphHeight = height - paddingTop - paddingBottom;
+
+        // Clear
+        ctx.fillStyle = '#1a1a2e';
+        ctx.fillRect(0, 0, width, height);
+
+        // Find data range
+        const maxGen = Math.max(...history.map(h => h.generation), 1);
+        const allFitness = [...history.map(h => h.best), ...history.map(h => h.avg)];
+        const maxFit = Math.max(...allFitness, 1);
+        const minFit = Math.min(...allFitness, -1);
+        const fitRange = maxFit - minFit;
+
+        // Draw grid
+        ctx.strokeStyle = '#2a2a3e';
+        ctx.lineWidth = 1;
+        for (let i = 0; i <= 5; i++) {
+            const y = paddingTop + graphHeight * (i / 5);
+            ctx.beginPath();
+            ctx.moveTo(paddingLeft, y);
+            ctx.lineTo(width - paddingRight, y);
+            ctx.stroke();
+
+            // Y-axis labels
+            const fitValue = maxFit - (fitRange * i / 5);
+            ctx.fillStyle = '#888';
+            ctx.font = '11px monospace';
+            ctx.textAlign = 'right';
+            ctx.fillText(fitValue.toFixed(1), paddingLeft - 5, y + 4);
+        }
+
+        // Draw axes
+        ctx.strokeStyle = '#444';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(paddingLeft, paddingTop);
+        ctx.lineTo(paddingLeft, height - paddingBottom);
+        ctx.lineTo(width - paddingRight, height - paddingBottom);
+        ctx.stroke();
+
+        // Helper to convert data to canvas coords
+        const toX = (gen: number) => paddingLeft + (graphWidth * gen / maxGen);
+        const toY = (fit: number) => {
+            const normalized = (maxFit - fit) / fitRange;
+            return paddingTop + graphHeight * normalized;
+        };
+
+        // Draw best fitness line
+        ctx.strokeStyle = '#00ff88';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        history.forEach((h, i) => {
+            const x = toX(h.generation);
+            const y = toY(h.best);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        });
+        ctx.stroke();
+
+        // Draw avg fitness line
+        ctx.strokeStyle = '#4488ff';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        history.forEach((h, i) => {
+            const x = toX(h.generation);
+            const y = toY(h.avg);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        });
+        ctx.stroke();
+
+        // Legend
+        ctx.font = '12px monospace';
+        ctx.fillStyle = '#00ff88';
+        ctx.fillText('● Best', width - 120, 25);
+        ctx.fillStyle = '#4488ff';
+        ctx.fillText('● Avg', width - 60, 25);
+    };
+
+    useEffect(() => {
+        window.addEventListener('resize', draw);
+        // Also draw immediately
+        draw();
+        return () => window.removeEventListener('resize', draw);
+    }, [history]);
+
+    // Also use LayoutEffect to catch size changes? 
+    // Or just simple resize observer. 
+    // For now simple useEffect dependency on history + window resize is enough.
+
+    return (
+        <div ref={containerRef} style={{ width: '100%', height: '100%', minHeight: 0 }}>
+            <canvas
+                ref={canvasRef}
+                style={{ display: 'block' }}
+            />
+        </div>
+    );
+}

src/apps/NeatArena/NeatArena.css

@@ -0,0 +1,239 @@
+/* NEAT Arena Layout */
+.neat-arena-layout {
+    display: flex;
+    gap: 1.5rem;
+    height: 100%;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
+}
+
+/* Left Panel: Controls */
+.controls-panel {
+    flex: 0 0 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+}
+
+.control-section {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 1rem;
+    backdrop-filter: blur(10px);
+}
+
+.control-section h3 {
+    margin: 0 0 0.75rem 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.control-section h4 {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #aaa;
+}
+
+.control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+/* Buttons */
+.btn-primary,
+.btn-secondary {
+    padding: 0.75rem 1rem;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: center;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary.btn-stop {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.btn-primary:disabled,
+.btn-secondary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.stat-label {
+    font-size: 0.75rem;
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #fff;
+    font-variant-numeric: tabular-nums;
+}
+
+/* Checkbox */
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    color: #ddd;
+    font-size: 0.9rem;
+}
+
+.checkbox-label input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+/* Info Section */
+.info-section {
+    background: rgba(102, 126, 234, 0.1);
+    border: 1px solid rgba(102, 126, 234, 0.3);
+    border-radius: 8px;
+    padding: 1rem;
+}
+
+.info-section p {
+    margin: 0 0 0.75rem 0;
+    color: #ddd;
+    font-size: 0.85rem;
+    line-height: 1.5;
+}
+
+.info-section ul {
+    margin: 0;
+    padding-left: 1.25rem;
+    color: #bbb;
+    font-size: 0.85rem;
+}
+
+.info-section ul li {
+    margin-bottom: 0.25rem;
+}
+
+.text-muted {
+    color: #888;
+    font-size: 0.8rem;
+}
+
+.info-text {
+    margin-top: 0.5rem;
+    color: #aaa;
+    font-size: 0.8rem;
+    font-style: italic;
+}
+
+/* Right Panel: Viewer */
+.viewer-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.phaser-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.4);
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.phaser-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.placeholder-content {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.placeholder-content h2 {
+    margin: 0 0 0.5rem 0;
+    font-size: 2rem;
+    font-weight: 300;
+}
+
+.placeholder-content p {
+    margin: 0.25rem 0;
+    font-size: 1rem;
+}
+
+/* Scrollbar styling */
+.controls-panel::-webkit-scrollbar {
+    width: 8px;
+}
+
+.controls-panel::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}
+
+.controls-panel::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+}
+
+.controls-panel::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}

src/apps/NeatArena/NeatArena.tsx

@@ -0,0 +1,388 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import AppContainer from '../../components/AppContainer';
+import { createArenaViewer, getArenaScene } from '../../lib/neatArena/arenaScene';
+import { createSimulation, stepSimulation } from '../../lib/neatArena/simulation';
+import { spinnerBotAction } from '../../lib/neatArena/baselineBots';
+import { createPopulation, getPopulationStats, DEFAULT_EVOLUTION_CONFIG, type Population } from '../../lib/neatArena/evolution';
+import { createNetwork } from '../../lib/neatArena/network';
+import { generateObservation, observationToInputs } from '../../lib/neatArena/sensors';
+import { exportGenome, downloadGenomeAsFile, uploadGenomeFromFile } from '../../lib/neatArena/exportImport';
+import type { SimulationState, AgentAction, Genome } from '../../lib/neatArena/types';
+import type { TrainingWorkerMessage, TrainingWorkerResponse } from '../../lib/neatArena/training.worker';
+import FitnessGraph from './FitnessGraph';
+import './NeatArena.css';
+
+/**
+ * NEAT Arena Miniapp
+ * 
+ * Trains AI agents using NEAT (NeuroEvolution of Augmenting Topologies) to play
+ * a 2D top-down shooter arena via self-play.
+ */
+export default function NeatArena() {
+    // Training state
+    const [population, setPopulation] = useState<Population>(() => createPopulation(DEFAULT_EVOLUTION_CONFIG));
+    const [isTraining, setIsTraining] = useState(false);
+    const [showRays, setShowRays] = useState(false);
+    const [mapSeed] = useState(12345);
+    const [importedGenome, setImportedGenome] = useState<Genome | null>(null);
+    const [fitnessHistory, setFitnessHistory] = useState<{ generation: number; best: number; avg: number }[]>([]);
+
+    // Stats
+    const stats = getPopulationStats(population);
+
+    // Phaser game instance
+    const phaserGameRef = useRef<Phaser.Game | null>(null);
+    const phaserContainerRef = useRef<HTMLDivElement>(null);
+
+    // Exhibition match state (visualizing champion)
+    const simulationRef = useRef<SimulationState | null>(null);
+
+    // Web Worker
+    const workerRef = useRef<Worker | null>(null);
+
+    // Initialize Web Worker
+    useEffect(() => {
+        const worker = new Worker(new URL('../../lib/neatArena/training.worker.ts', import.meta.url), {
+            type: 'module'
+        });
+
+        worker.onmessage = (e: MessageEvent<TrainingWorkerResponse>) => {
+            const response = e.data;
+
+            switch (response.type) {
+                case 'update':
+                    if (response.population) {
+                        setPopulation(response.population);
+                        console.log('[UI] Stats?', response.stats ? 'YES' : 'NO', response.stats);
+
+                        // Track fitness history for graph
+                        if (response.stats) {
+                            setFitnessHistory(prev => [...prev, {
+                                generation: response.stats!.generation,
+                                best: response.stats!.maxFitness,
+                                avg: response.stats!.avgFitness,
+                            }]);
+                        }
+                    }
+                    break;
+
+                case 'error':
+                    console.error('Worker error:', response.error);
+                    setIsTraining(false);
+                    alert('Training error: ' + response.error);
+                    break;
+
+                case 'ready':
+                    console.log('Worker ready');
+                    break;
+            }
+        };
+
+        // Initialize worker with config
+        worker.postMessage({
+            type: 'init',
+            config: DEFAULT_EVOLUTION_CONFIG,
+        } as TrainingWorkerMessage);
+
+        workerRef.current = worker;
+
+        return () => {
+            worker.terminate();
+            workerRef.current = null;
+        };
+    }, []);
+
+    // Control worker based on training state
+    useEffect(() => {
+        if (!workerRef.current) return;
+
+        if (isTraining) {
+            workerRef.current.postMessage({
+                type: 'start',
+            } as TrainingWorkerMessage);
+        } else {
+            workerRef.current.postMessage({
+                type: 'pause',
+            } as TrainingWorkerMessage);
+        }
+    }, [isTraining]);
+
+    // Initialize Phaser
+    useEffect(() => {
+        if (!phaserContainerRef.current) return;
+
+        phaserContainerRef.current.innerHTML = '';
+        const game = createArenaViewer(phaserContainerRef.current);
+        phaserGameRef.current = game;
+
+        simulationRef.current = createSimulation(mapSeed, 0);
+
+        return () => {
+            game.destroy(true);
+            phaserGameRef.current = null;
+        };
+    }, [mapSeed]);
+
+    // Exhibition match loop (visualizing best vs second-best AI)
+    useEffect(() => {
+        if (!phaserGameRef.current) return;
+
+        const interval = setInterval(() => {
+            if (!simulationRef.current) return;
+
+            const sim = simulationRef.current;
+
+            if (sim.isOver) {
+                simulationRef.current = createSimulation(mapSeed, 0);
+                return;
+            }
+
+            // Get best and second-best genomes
+            const sortedGenomes = [...population.genomes].sort((a, b) => b.fitness - a.fitness);
+            const genome0 = importedGenome || sortedGenomes[0] || null;
+            const genome1 = sortedGenomes.length > 1 ? sortedGenomes[1] : null;
+
+            // Agent 0: Best AI
+            let action0: AgentAction;
+            if (genome0) {
+                const network = createNetwork(genome0);
+                const obs = generateObservation(0, sim);
+                const inputs = observationToInputs(obs);
+                const outputs = network.activate(inputs);
+
+                action0 = {
+                    moveX: outputs[0],
+                    moveY: outputs[1],
+                    turn: outputs[2],
+                    shoot: outputs[3],
+                };
+            } else {
+                action0 = spinnerBotAction();
+            }
+
+            // Agent 1: Second-best AI (or spinner if not enough genomes)
+            let action1: AgentAction;
+            if (genome1) {
+                const network = createNetwork(genome1);
+                const obs = generateObservation(1, sim);
+                const inputs = observationToInputs(obs);
+                const outputs = network.activate(inputs);
+
+                action1 = {
+                    moveX: outputs[0],
+                    moveY: outputs[1],
+                    turn: outputs[2],
+                    shoot: outputs[3],
+                };
+            } else {
+                action1 = spinnerBotAction();
+            }
+
+            simulationRef.current = stepSimulation(sim, [action0, action1]);
+
+            if (phaserGameRef.current) {
+                const scene = getArenaScene(phaserGameRef.current);
+                scene.updateSimulation(simulationRef.current);
+                scene.setShowRays(showRays);
+            }
+
+        }, 1000 / 30);
+
+        return () => clearInterval(interval);
+    }, [showRays, mapSeed, population.genomes, importedGenome]);
+
+    const handleReset = useCallback(() => {
+        setIsTraining(false);
+        setImportedGenome(null);
+        setFitnessHistory([]);
+
+        if (workerRef.current) {
+            workerRef.current.postMessage({
+                type: 'reset',
+            } as TrainingWorkerMessage);
+        }
+
+        simulationRef.current = createSimulation(mapSeed, 0);
+
+        if (phaserGameRef.current) {
+            const scene = getArenaScene(phaserGameRef.current);
+            scene.updateSimulation(simulationRef.current);
+        }
+    }, [mapSeed]);
+
+    const handleStepGeneration = useCallback(() => {
+        if (workerRef.current) {
+            workerRef.current.postMessage({
+                type: 'step',
+            } as TrainingWorkerMessage);
+        }
+    }, []);
+
+    const handleExport = useCallback(() => {
+        if (!population.bestGenomeEver) {
+            alert('No champion to export yet!');
+            return;
+        }
+
+        const exported = exportGenome(
+            population.bestGenomeEver,
+            DEFAULT_EVOLUTION_CONFIG,
+            {
+                generation: stats.generation,
+                fitness: stats.bestFitnessEver,
+                speciesCount: stats.speciesCount,
+            }
+        );
+
+        downloadGenomeAsFile(exported, `neat-champion-gen${stats.generation}.json`);
+    }, [population.bestGenomeEver, stats]);
+
+    const handleImport = useCallback(async () => {
+        try {
+            const exported = await uploadGenomeFromFile();
+            setImportedGenome(exported.genome);
+            alert(`Imported champion from generation ${exported.metadata?.generation || '?'} with fitness ${exported.metadata?.fitness?.toFixed(1) || '?'}`);
+        } catch (err) {
+            alert('Failed to import genome: ' + (err as Error).message);
+        }
+    }, []);
+
+    return (
+        <AppContainer title="NEAT Arena">
+            <div className="neat-arena-layout">
+                {/* Left Panel: Controls */}
+                <div className="controls-panel">
+                    <section className="control-section">
+                        <h3>Training Controls</h3>
+                        <div className="control-group">
+                            <button
+                                className={`btn-primary ${isTraining ? 'btn-stop' : 'btn-start'}`}
+                                onClick={() => setIsTraining(!isTraining)}
+                            >
+                                {isTraining ? '⏸ Pause Training' : '▶ Start Training'}
+                            </button>
+                            <button
+                                className="btn-secondary"
+                                onClick={handleStepGeneration}
+                                disabled={isTraining}
+                            >
+                                ⏭ Step Generation
+                            </button>
+                            <button
+                                className="btn-secondary"
+                                onClick={handleReset}
+                                disabled={isTraining}
+                            >
+                                🔄 Reset
+                            </button>
+                        </div>
+                        <p className="info-text">
+                            {isTraining
+                                ? '🟢 Training in background worker...'
+                                : importedGenome
+                                    ? '🎮 Watching imported champion vs Gen best'
+                                    : population.genomes.length > 1
+                                        ? `🎮 Watching Gen ${stats.generation}: Best vs 2nd-Best AI`
+                                        : '⚪ Need at least 2 genomes for exhibition'}
+                        </p>
+                    </section>
+
+                    <section className="control-section">
+                        <h3>Evolution Stats</h3>
+                        <div className="stats-grid">
+                            <div className="stat-item">
+                                <span className="stat-label">Generation</span>
+                                <span className="stat-value">{stats.generation}</span>
+                            </div>
+                            <div className="stat-item">
+                                <span className="stat-label">Species</span>
+                                <span className="stat-value">{stats.speciesCount}</span>
+                            </div>
+                            <div className="stat-item">
+                                <span className="stat-label">Best Fitness</span>
+                                <span className="stat-value">{stats.maxFitness.toFixed(1)}</span>
+                            </div>
+                            <div className="stat-item">
+                                <span className="stat-label">Avg Fitness</span>
+                                <span className="stat-value">{stats.avgFitness.toFixed(1)}</span>
+                            </div>
+                            <div className="stat-item">
+                                <span className="stat-label">Champion</span>
+                                <span className="stat-value">{stats.bestFitnessEver.toFixed(1)}</span>
+                            </div>
+                            <div className="stat-item">
+                                <span className="stat-label">Innovations</span>
+                                <span className="stat-value">{stats.totalInnovations}</span>
+                            </div>
+                        </div>
+                    </section>
+
+                    {fitnessHistory.length > 0 && (
+                        <section className="control-section">
+                            <h3>Fitness Progress</h3>
+                            <FitnessGraph history={fitnessHistory} />
+                        </section>
+                    )}
+
+                    <section className="control-section">
+                        <h3>Debug Options</h3>
+                        <label className="checkbox-label">
+                            <input
+                                type="checkbox"
+                                checked={showRays}
+                                onChange={(e) => setShowRays(e.target.checked)}
+                            />
+                            <span>Show Ray Sensors</span>
+                        </label>
+                    </section>
+
+                    <section className="control-section">
+                        <h3>Export / Import</h3>
+                        <div className="control-group">
+                            <button
+                                className="btn-secondary"
+                                onClick={handleExport}
+                                disabled={!population.bestGenomeEver}
+                            >
+                                💾 Export Champion
+                            </button>
+                            <button
+                                className="btn-secondary"
+                                onClick={handleImport}
+                            >
+                                📂 Import Genome
+                            </button>
+                        </div>
+                        {importedGenome && (
+                            <p className="info-text">
+                                ✅ Imported genome loaded
+                            </p>
+                        )}
+                    </section>
+
+                    <section className="info-section">
+                        <h4>NEAT Arena Status</h4>
+                        <ul>
+                            <li>✅ Deterministic 30Hz simulation</li>
+                            <li>✅ Symmetric procedural maps</li>
+                            <li>✅ Agent physics & bullets</li>
+                            <li>✅ 360° ray sensors (53 inputs)</li>
+                            <li>✅ NEAT evolution with speciation</li>
+                            <li>✅ Self-play training (K=4 matches)</li>
+                            <li>✅ Export/import genomes</li>
+                            <li>✅ Web worker (no UI lag!)</li>
+                        </ul>
+                    </section>
+                </div>
+
+                {/* Right Panel: Phaser Viewer */}
+                <div className="viewer-panel">
+                    <div
+                        ref={phaserContainerRef}
+                        className="phaser-container"
+                    />
+                </div>
+            </div>
+        </AppContainer>
+    );
+}

src/apps/RogueGen/RogueGenApp.tsx

@@ -0,0 +1,386 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import type { Genotype } from './types';
+import { generateMap } from './generator';
+import { createRandomGenome, evaluatePopulation, evolve, type Individual, POPULATION_SIZE } from './evolution';
+
+export default function RogueGenApp() {
+    const [generation, setGeneration] = useState(0);
+    const [bestFitness, setBestFitness] = useState(0);
+    const [population, setPopulation] = useState<Genotype[]>([]);
+    const [bestIndividual, setBestIndividual] = useState<Individual | null>(null);
+    const [isRunning, setIsRunning] = useState(false);
+
+    // Config
+    const [config, setConfig] = useState({
+        width: 100,
+        height: 80,
+        canvasScale: 4,
+        simulationSpeed: 100
+    });
+
+    // Targets & Overrides
+    const [targets, setTargets] = useState({
+        density: 0.45,
+        water: 0.15,
+        lava: 0.05,
+        veg: 0.20,
+        minPathLength: 50,
+        forceTunnels: false,
+        scaleOverride: 0
+    });
+
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    // Initialize
+    useEffect(() => {
+        const initPop = [];
+        for (let i = 0; i < POPULATION_SIZE; i++) initPop.push(createRandomGenome());
+        setPopulation(initPop);
+    }, []);
+
+    // Evolution Loop
+    const runGeneration = useCallback(() => {
+        if (!population.length) return;
+
+        // Apply overrides if needed (by modifying genome copy? No, better to pass override context)
+        // But for simplicity/visuals, we can just hack the population before eval? 
+        // No, that ruins evolution. 
+        // We probably want to visualize the BEST, but FORCE the generation parameters.
+        // Let's modify evaluatePopulation to handle overrides? 
+        // Or simple hack: Temporarily modify genomes.
+
+        const popToEval = population.map(p => {
+            const copy = { ...p };
+            if (targets.forceTunnels) copy.noiseType = 1;
+            if (targets.scaleOverride > 0) copy.noiseScale = targets.scaleOverride;
+            return copy;
+        });
+
+        const evaluated = evaluatePopulation(popToEval, config.width, config.height, targets);
+        setBestIndividual(evaluated[0]);
+        setBestFitness(evaluated[0].fitness.score);
+
+        const nextGen = evolve(evaluated);
+        setPopulation(nextGen);
+        setGeneration(g => g + 1);
+    }, [population, config.width, config.height, targets]);
+
+    useEffect(() => {
+        let interval: ReturnType<typeof setInterval>;
+        if (isRunning) {
+            interval = setInterval(runGeneration, config.simulationSpeed);
+        }
+        return () => clearInterval(interval);
+    }, [isRunning, runGeneration, config.simulationSpeed]);
+
+    // Render Best Map
+    useEffect(() => {
+        if (!bestIndividual || !canvasRef.current) return;
+        const ctx = canvasRef.current.getContext('2d');
+        if (!ctx) return;
+
+        const map = generateMap(bestIndividual.genome, config.width, config.height, targets.minPathLength);
+
+        ctx.fillStyle = "#111";
+        ctx.fillRect(0, 0, config.width * config.canvasScale, config.height * config.canvasScale);
+
+        // Draw
+        for (let y = 0; y < config.height; y++) {
+            for (let x = 0; x < config.width; x++) {
+                const val = map.grid[y * config.width + x];
+                if (val === 1) {
+                    ctx.fillStyle = "#889"; // Wall
+                    ctx.fillRect(x * config.canvasScale, y * config.canvasScale, config.canvasScale, config.canvasScale);
+                } else if (val === 2) {
+                    ctx.fillStyle = "#48d"; // Water
+                    ctx.fillRect(x * config.canvasScale, y * config.canvasScale, config.canvasScale, config.canvasScale);
+                } else if (val === 3) {
+                    ctx.fillStyle = "#e44"; // Lava
+                    ctx.fillRect(x * config.canvasScale, y * config.canvasScale, config.canvasScale, config.canvasScale);
+                } else if (val === 4) {
+                    ctx.fillStyle = "#2a4"; // Veg
+                    ctx.fillRect(x * config.canvasScale, y * config.canvasScale, config.canvasScale, config.canvasScale);
+                }
+            }
+        }
+
+        // Draw Start/End
+        if (map.startPoint && map.endPoint && map.pathLength && map.pathLength > 0) {
+            // Start
+            ctx.fillStyle = "#ff0";
+            ctx.fillRect(map.startPoint.x * config.canvasScale, map.startPoint.y * config.canvasScale, config.canvasScale, config.canvasScale);
+            // End
+            ctx.fillStyle = "#f0f";
+            ctx.fillRect(map.endPoint.x * config.canvasScale, map.endPoint.y * config.canvasScale, config.canvasScale, config.canvasScale);
+
+            // Text labels?
+            ctx.font = '10px monospace';
+            ctx.fillStyle = "#fff";
+            ctx.fillText("S", map.startPoint.x * config.canvasScale + 2, map.startPoint.y * config.canvasScale + 8);
+            ctx.fillText("E", map.endPoint.x * config.canvasScale + 2, map.endPoint.y * config.canvasScale + 8);
+        }
+    }, [bestIndividual, config]);
+
+    return (
+        <div className="rogue-gen-app" style={{
+            display: 'flex',
+            height: '100%',
+            background: '#1a1a1a',
+            color: '#eee',
+            fontFamily: 'monospace'
+        }}>
+            {/* Sidebar Controls */}
+            <div className="sidebar-panel" style={{
+                width: '320px',
+                padding: '20px',
+                background: '#222',
+                borderRight: '1px solid #333',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '20px',
+                overflowY: 'auto'
+            }}>
+                <div style={{ borderBottom: '1px solid #444', paddingBottom: '10px' }}>
+                    <h2 style={{ margin: '0 0 5px 0', fontSize: '1.2em', color: '#88f' }}>Rogue Map Evo</h2>
+                    <div style={{ fontSize: '0.8em', color: '#888' }}>Gen: {generation} | Best: {bestFitness.toFixed(4)}</div>
+                </div>
+
+                <div className="control-group">
+                    <h3 style={{ fontSize: '1em', marginBottom: '10px', color: '#ccc' }}>Controls</h3>
+                    <button
+                        onClick={() => setIsRunning(!isRunning)}
+                        style={{
+                            width: '100%',
+                            padding: '12px',
+                            fontSize: '14px',
+                            fontWeight: 'bold',
+                            background: isRunning ? '#c44' : '#4a4',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '4px',
+                            cursor: 'pointer',
+                            marginBottom: '10px'
+                        }}
+                    >
+                        {isRunning ? 'STOP EVOLUTION' : 'START EVOLUTION'}
+                    </button>
+                    <button
+                        onClick={() => {
+                            setGeneration(0);
+                            const initPop = [];
+                            for (let i = 0; i < POPULATION_SIZE; i++) initPop.push(createRandomGenome());
+                            setPopulation(initPop);
+                            setBestIndividual(null);
+                        }}
+                        style={{
+                            width: '100%',
+                            padding: '8px',
+                            background: '#444',
+                            color: '#ccc',
+                            border: '1px solid #555',
+                            borderRadius: '4px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        Reset Population
+                    </button>
+                </div>
+
+                <div className="control-group">
+                    <h3 style={{ fontSize: '1em', marginBottom: '10px', color: '#ccc' }}>Configuration</h3>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em' }}>
+                        Map Width: {config.width}
+                        <input
+                            type="range" min="20" max="300" step="10"
+                            value={config.width}
+                            onChange={e => setConfig({ ...config, width: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#88f' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em' }}>
+                        Map Height: {config.height}
+                        <input
+                            type="range" min="20" max="300" step="10"
+                            value={config.height}
+                            onChange={e => setConfig({ ...config, height: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#88f' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em' }}>
+                        Zoom: {config.canvasScale}x
+                        <input
+                            type="range" min="1" max="20" step="1"
+                            value={config.canvasScale}
+                            onChange={e => setConfig({ ...config, canvasScale: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#88f' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em' }}>
+                        Speed: {config.simulationSpeed}ms
+                        <input
+                            type="range" min="10" max="1000" step="10"
+                            value={config.simulationSpeed}
+                            onChange={e => setConfig({ ...config, simulationSpeed: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#88f' }}
+                        />
+                    </label>
+
+                    <h3 style={{ fontSize: '1em', marginBottom: '10px', marginTop: '20px', color: '#ccc' }}>Map Style</h3>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em', cursor: 'pointer' }}>
+                        <input
+                            type="checkbox"
+                            checked={targets.forceTunnels}
+                            onChange={e => setTargets({ ...targets, forceTunnels: e.target.checked })}
+                            style={{ marginRight: '5px' }}
+                        />
+                        Force Tunnels (Ridged)
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em' }}>
+                        Feature Scale: {targets.scaleOverride > 0 ? targets.scaleOverride : 'Auto'}
+                        <input
+                            type="range" min="0" max="50" step="1"
+                            value={targets.scaleOverride}
+                            onChange={e => setTargets({ ...targets, scaleOverride: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#aaa' }}
+                        />
+                        <div style={{ fontSize: '0.8em', color: '#666' }}>(0 = Evolve Scale)</div>
+                    </label>
+
+                    <h3 style={{ fontSize: '1em', marginBottom: '10px', marginTop: '20px', color: '#ccc' }}>Terrain Targets</h3>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em' }}>
+                        Open Space: {(targets.density * 100).toFixed(0)}%
+                        <input
+                            type="range" min="0.1" max="0.9" step="0.05"
+                            value={targets.density}
+                            onChange={e => setTargets({ ...targets, density: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#aaa' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em', color: '#48d' }}>
+                        Water: {(targets.water * 100).toFixed(0)}%
+                        <input
+                            type="range" min="0" max="0.5" step="0.05"
+                            value={targets.water}
+                            onChange={e => setTargets({ ...targets, water: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#48d' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em', color: '#e44' }}>
+                        Lava: {(targets.lava * 100).toFixed(0)}%
+                        <input
+                            type="range" min="0" max="0.5" step="0.05"
+                            value={targets.lava}
+                            onChange={e => setTargets({ ...targets, lava: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#e44' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em', color: '#2a4' }}>
+                        Veg: {(targets.veg * 100).toFixed(0)}%
+                        <input
+                            type="range" min="0" max="0.8" step="0.05"
+                            value={targets.veg}
+                            onChange={e => setTargets({ ...targets, veg: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#2a4' }}
+                        />
+                    </label>
+
+                    <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9em', color: '#fa4' }}>
+                        Min Path: {targets.minPathLength} tiles
+                        <input
+                            type="range" min="0" max="1000" step="5"
+                            value={targets.minPathLength}
+                            onChange={e => setTargets({ ...targets, minPathLength: Number(e.target.value) })}
+                            style={{ width: '100%', accentColor: '#fa4' }}
+                        />
+                    </label>
+                </div>
+
+                {bestIndividual && (
+                    <div className="stats-panel" style={{
+                        background: '#111',
+                        padding: '10px',
+                        borderRadius: '4px',
+                        fontSize: '0.85em',
+                        border: '1px solid #333'
+                    }}>
+                        <h4 style={{ margin: '0 0 10px 0', color: '#aaa' }}>Best Genome (Wall)</h4>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px', marginBottom: '10px' }}>
+                            <div>Init P:</div><div style={{ textAlign: 'right', color: '#8f8' }}>{bestIndividual.genome.initialChance.toFixed(2)}</div>
+                            <div>Birth:</div><div style={{ textAlign: 'right', color: '#8f8' }}>{bestIndividual.genome.birthLimit}</div>
+                            <div>Death:</div><div style={{ textAlign: 'right', color: '#8f8' }}>{bestIndividual.genome.deathLimit}</div>
+                            <div>Steps:</div><div style={{ textAlign: 'right', color: '#8f8' }}>{bestIndividual.genome.steps}</div>
+                            <div>Smooth:</div><div style={{ textAlign: 'right', color: '#8f8' }}>{bestIndividual.genome.smoothingSteps}</div>
+                            <div>Cleanup:</div><div style={{ textAlign: 'right', color: '#8f8' }}>{bestIndividual.genome.noiseReduction ? 'Yes' : 'No'}</div>
+                        </div>
+                        <h4 style={{ margin: '0 0 10px 0', color: '#aaa' }}>Best Genome (Water/Lava/Veg)</h4>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '5px', fontSize: '0.8em' }}>
+                            <div style={{ color: '#48d' }}>WATER</div>
+                            <div style={{ color: '#e44' }}>LAVA</div>
+                            <div style={{ color: '#2a4' }}>VEG</div>
+
+                            <div style={{ color: '#ccc' }}>{bestIndividual.genome.waterInitialChance.toFixed(2)}</div>
+                            <div style={{ color: '#ccc' }}>{bestIndividual.genome.lavaInitialChance.toFixed(2)}</div>
+                            <div style={{ color: '#ccc' }}>{bestIndividual.genome.vegInitialChance.toFixed(2)}</div>
+
+                            <div style={{ color: '#666' }}>Steps</div>
+                            <div style={{ color: '#666' }}>Steps</div>
+                            <div style={{ color: '#666' }}>Steps</div>
+
+                            <div style={{ color: '#ccc' }}>{bestIndividual.genome.waterSteps}</div>
+                            <div style={{ color: '#ccc' }}>{bestIndividual.genome.lavaSteps}</div>
+                            <div style={{ color: '#ccc' }}>{bestIndividual.genome.vegSteps}</div>
+                        </div>
+
+                        <h4 style={{ margin: '10px 0 5px 0', color: '#aaa' }}>Structure</h4>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
+                            <div>Noise:</div><div style={{ textAlign: 'right', color: '#ccc' }}>{bestIndividual.genome.useNoise ? (bestIndividual.genome.noiseType === 1 ? 'Tunnel' : 'Blob') : 'No'}</div>
+                            <div>Scale:</div><div style={{ textAlign: 'right', color: '#ccc' }}>{bestIndividual.genome.noiseScale.toFixed(1)}</div>
+                            <div>Rooms:</div><div style={{ textAlign: 'right', color: '#ccc' }}>{bestIndividual.genome.useRooms ? bestIndividual.genome.roomCount : 'No'}</div>
+                        </div>
+                        <hr style={{ borderColor: '#333', margin: '10px 0' }} />
+                        <h4 style={{ margin: '0 0 10px 0', color: '#aaa' }}>Metrics</h4>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
+                            <div>Connect:</div><div style={{ textAlign: 'right', color: '#fa4' }}>{(bestIndividual.fitness.connectivity * 100).toFixed(1)}%</div>
+                            <div>Density:</div><div style={{ textAlign: 'right', color: '#fa4' }}>{(bestIndividual.fitness.density * 100).toFixed(1)}%</div>
+                            <div>Path:</div><div style={{ textAlign: 'right', color: '#ff0' }}>{generateMap(bestIndividual.genome, config.width, config.height).pathLength}</div>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {/* Main Visualization */}
+            <div className="visualization-area" style={{
+                flex: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                background: '#0d0d0d',
+                overflow: 'auto',
+                padding: '20px'
+            }}>
+                <div style={{
+                    border: '5px solid #333',
+                    borderRadius: '4px',
+                    boxShadow: '0 0 20px rgba(0,0,0,0.5)',
+                    lineHeight: 0
+                }}>
+                    <canvas
+                        ref={canvasRef}
+                        width={config.width * config.canvasScale}
+                        height={config.height * config.canvasScale}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

src/apps/RogueGen/evolution.ts

@@ -0,0 +1,155 @@
+import type { Genotype } from './types';
+import { generateMap } from './generator';
+import { calculateFitness, type FitnessResult, type FitnessTargets } from './fitness';
+
+export interface Individual {
+    genome: Genotype;
+    fitness: FitnessResult;
+}
+
+export const POPULATION_SIZE = 50;
+const MUTATION_RATE = 0.1;
+
+export function createRandomGenome(): Genotype {
+    return {
+        initialChance: Math.random(), // 0.0 - 1.0
+        birthLimit: Math.floor(Math.random() * 8) + 1, // 1-8
+        deathLimit: Math.floor(Math.random() * 8) + 1, // 1-8
+        steps: Math.floor(Math.random() * 7) + 3, // 3-10 (Forced minimum steps to prevent static)
+        smoothingSteps: Math.floor(Math.random() * 6), // 0-5
+        noiseReduction: Math.random() < 0.5,
+
+        useNoise: Math.random() < 0.8, // High chance to use noise
+        noiseType: Math.random() < 0.5 ? 0 : 1, // Random start
+        noiseScale: Math.random() * 40 + 10, // 10-50
+        noiseThreshold: Math.random() * 0.4 + 0.3, // 0.3-0.7
+
+        useRooms: Math.random() < 0.8, // High chance
+        roomCount: Math.floor(Math.random() * 15) + 3, // 3-18
+        roomMinSize: Math.floor(Math.random() * 4) + 3, // 3-7
+        roomMaxSize: Math.floor(Math.random() * 8) + 8, // 8-16
+
+        waterInitialChance: Math.random(),
+        waterBirthLimit: Math.floor(Math.random() * 8) + 1,
+        waterDeathLimit: Math.floor(Math.random() * 8) + 1,
+        waterSteps: Math.floor(Math.random() * 7) + 3, // 3-10
+
+        lavaInitialChance: Math.random() * 0.5, // Rare
+        lavaBirthLimit: Math.floor(Math.random() * 8) + 1,
+        lavaDeathLimit: Math.floor(Math.random() * 8) + 1,
+        lavaSteps: Math.floor(Math.random() * 7) + 3, // 3-10
+
+        vegInitialChance: Math.random(),
+        vegBirthLimit: Math.floor(Math.random() * 8) + 1,
+        vegDeathLimit: Math.floor(Math.random() * 8) + 1,
+        vegSteps: Math.floor(Math.random() * 7) + 3 // 3-10
+    };
+}
+
+export function evaluatePopulation(population: Genotype[], width: number, height: number, targets: FitnessTargets): Individual[] {
+    return population.map(genome => {
+        const map = generateMap(genome, width, height, targets.minPathLength);
+        const fitness = calculateFitness(map, targets);
+        return { genome, fitness };
+    }).sort((a, b) => b.fitness.score - a.fitness.score);
+}
+
+export function evolve(population: Individual[]): Genotype[] {
+    const newPop: Genotype[] = [];
+    
+    // Elitism: Keep top 2
+    newPop.push(population[0].genome);
+    newPop.push(population[1].genome);
+
+    while (newPop.length < POPULATION_SIZE) {
+        const p1 = tournamentSelect(population);
+        const p2 = tournamentSelect(population);
+        const child = crossover(p1.genome, p2.genome);
+        mutate(child);
+        newPop.push(child);
+    }
+
+    return newPop;
+}
+
+function tournamentSelect(pop: Individual[]): Individual {
+    const k = 3;
+    let best = pop[Math.floor(Math.random() * pop.length)];
+    for (let i = 0; i < k - 1; i++) {
+        const cand = pop[Math.floor(Math.random() * pop.length)];
+        if (cand.fitness.score > best.fitness.score) {
+            best = cand;
+        }
+    }
+    return best;
+}
+
+function crossover(p1: Genotype, p2: Genotype): Genotype {
+    return {
+        initialChance: Math.random() < 0.5 ? p1.initialChance : p2.initialChance,
+        birthLimit: Math.random() < 0.5 ? p1.birthLimit : p2.birthLimit,
+        deathLimit: Math.random() < 0.5 ? p1.deathLimit : p2.deathLimit,
+        steps: Math.random() < 0.5 ? p1.steps : p2.steps,
+        smoothingSteps: Math.random() < 0.5 ? p1.smoothingSteps : p2.smoothingSteps,
+        noiseReduction: Math.random() < 0.5 ? p1.noiseReduction : p2.noiseReduction,
+        
+        useNoise: Math.random() < 0.5 ? p1.useNoise : p2.useNoise,
+        noiseType: Math.random() < 0.5 ? p1.noiseType : p2.noiseType,
+        noiseScale: Math.random() < 0.5 ? p1.noiseScale : p2.noiseScale,
+        noiseThreshold: Math.random() < 0.5 ? p1.noiseThreshold : p2.noiseThreshold,
+
+        useRooms: Math.random() < 0.5 ? p1.useRooms : p2.useRooms,
+        roomCount: Math.random() < 0.5 ? p1.roomCount : p2.roomCount,
+        roomMinSize: Math.random() < 0.5 ? p1.roomMinSize : p2.roomMinSize,
+        roomMaxSize: Math.random() < 0.5 ? p1.roomMaxSize : p2.roomMaxSize,
+
+        waterInitialChance: Math.random() < 0.5 ? p1.waterInitialChance : p2.waterInitialChance,
+        waterBirthLimit: Math.random() < 0.5 ? p1.waterBirthLimit : p2.waterBirthLimit,
+        waterDeathLimit: Math.random() < 0.5 ? p1.waterDeathLimit : p2.waterDeathLimit,
+        waterSteps: Math.random() < 0.5 ? p1.waterSteps : p2.waterSteps,
+
+        lavaInitialChance: Math.random() < 0.5 ? p1.lavaInitialChance : p2.lavaInitialChance,
+        lavaBirthLimit: Math.random() < 0.5 ? p1.lavaBirthLimit : p2.lavaBirthLimit,
+        lavaDeathLimit: Math.random() < 0.5 ? p1.lavaDeathLimit : p2.lavaDeathLimit,
+        lavaSteps: Math.random() < 0.5 ? p1.lavaSteps : p2.lavaSteps,
+
+        vegInitialChance: Math.random() < 0.5 ? p1.vegInitialChance : p2.vegInitialChance,
+        vegBirthLimit: Math.random() < 0.5 ? p1.vegBirthLimit : p2.vegBirthLimit,
+        vegDeathLimit: Math.random() < 0.5 ? p1.vegDeathLimit : p2.vegDeathLimit,
+        vegSteps: Math.random() < 0.5 ? p1.vegSteps : p2.vegSteps,
+    };
+}
+
+function mutate(g: Genotype) {
+    if (Math.random() < MUTATION_RATE) g.initialChance = Math.max(0, Math.min(1, g.initialChance + (Math.random() - 0.5) * 0.1));
+    if (Math.random() < MUTATION_RATE) g.birthLimit = Math.max(1, Math.min(8, Math.floor(g.birthLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.deathLimit = Math.max(1, Math.min(8, Math.floor(g.deathLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.steps = Math.max(3, Math.min(10, Math.floor(g.steps + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.smoothingSteps = Math.max(0, Math.min(5, Math.floor(g.smoothingSteps + (Math.random() - 0.5) * 3)));
+    if (Math.random() < MUTATION_RATE) g.noiseReduction = !g.noiseReduction;
+
+    if (Math.random() < MUTATION_RATE) g.useNoise = !g.useNoise;
+    if (Math.random() < MUTATION_RATE) g.noiseType = g.noiseType === 0 ? 1 : 0;
+    if (Math.random() < MUTATION_RATE) g.noiseScale = Math.max(5, Math.min(80, g.noiseScale + (Math.random() - 0.5) * 5));
+    if (Math.random() < MUTATION_RATE) g.noiseThreshold = Math.max(0.1, Math.min(0.9, g.noiseThreshold + (Math.random() - 0.5) * 0.1));
+
+    if (Math.random() < MUTATION_RATE) g.useRooms = !g.useRooms;
+    if (Math.random() < MUTATION_RATE) g.roomCount = Math.max(0, Math.min(25, Math.floor(g.roomCount + (Math.random() - 0.5) * 3)));
+    if (Math.random() < MUTATION_RATE) g.roomMinSize = Math.max(3, Math.min(10, Math.floor(g.roomMinSize + (Math.random() - 0.5) * 2)));
+    if (Math.random() < MUTATION_RATE) g.roomMaxSize = Math.max(5, Math.min(20, Math.floor(g.roomMaxSize + (Math.random() - 0.5) * 2)));
+
+    if (Math.random() < MUTATION_RATE) g.waterInitialChance = Math.max(0, Math.min(1, g.waterInitialChance + (Math.random() - 0.5) * 0.1));
+    if (Math.random() < MUTATION_RATE) g.waterBirthLimit = Math.max(1, Math.min(8, Math.floor(g.waterBirthLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.waterDeathLimit = Math.max(1, Math.min(8, Math.floor(g.waterDeathLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.waterSteps = Math.max(3, Math.min(10, Math.floor(g.waterSteps + (Math.random() - 0.5) * 4)));
+
+    if (Math.random() < MUTATION_RATE) g.lavaInitialChance = Math.max(0, Math.min(1, g.lavaInitialChance + (Math.random() - 0.5) * 0.1));
+    if (Math.random() < MUTATION_RATE) g.lavaBirthLimit = Math.max(1, Math.min(8, Math.floor(g.lavaBirthLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.lavaDeathLimit = Math.max(1, Math.min(8, Math.floor(g.lavaDeathLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.lavaSteps = Math.max(3, Math.min(10, Math.floor(g.lavaSteps + (Math.random() - 0.5) * 4)));
+
+    if (Math.random() < MUTATION_RATE) g.vegInitialChance = Math.max(0, Math.min(1, g.vegInitialChance + (Math.random() - 0.5) * 0.1));
+    if (Math.random() < MUTATION_RATE) g.vegBirthLimit = Math.max(1, Math.min(8, Math.floor(g.vegBirthLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.vegDeathLimit = Math.max(1, Math.min(8, Math.floor(g.vegDeathLimit + (Math.random() - 0.5) * 4)));
+    if (Math.random() < MUTATION_RATE) g.vegSteps = Math.max(3, Math.min(10, Math.floor(g.vegSteps + (Math.random() - 0.5) * 4)));
+}

src/apps/RogueGen/fitness.ts

@@ -0,0 +1,214 @@
+import type { MapData } from './types';
+
+export interface FitnessResult {
+    score: number;
+    connectivity: number;
+    density: number;
+}
+
+export interface FitnessTargets {
+    density: number;
+    water: number;
+    lava: number;
+    veg: number;
+    minPathLength: number; // New param
+}
+
+export function calculateFitness(map: MapData, targets: FitnessTargets): FitnessResult {
+    const { grid, width, height } = map;
+    let totalFloor = 0;
+    let totalWater = 0;
+    let totalLava = 0;
+    let totalVeg = 0;
+    
+    // 1. Calculate Density (Target 45% floor - configurable)
+    
+    // 1. Calculate Density (Target 45% floor - configurable)
+    
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const t = grid[y * width + x];
+            if (t === 0) totalFloor++;
+            else if (t === 2) totalWater++;
+            else if (t === 3) totalLava++;
+            else if (t === 4) totalVeg++;
+        }
+    }
+    
+    // "Open Space" = anything not a wall
+    const totalOpen = totalFloor + totalWater + totalLava + totalVeg;
+    const totalCells = width * height;
+    
+    // Target Open Space (inverse of Wall Density?) 
+    // Usually Density = Wall Density.
+    // If target is "Floor Density" (open space), we use targets.density directly.
+    // Let's assume targets.density = Target Open Space %.
+    const openDensity = totalOpen / totalCells;
+    const densityScore = 1 - Math.abs(openDensity - targets.density) * 2; 
+
+    // Ratios within Open Space
+    if (totalOpen === 0) return { score: 0, connectivity: 0, density: 0 };
+
+    const waterRatio = totalWater / totalOpen;
+    const lavaRatio = totalLava / totalOpen;
+    const vegRatio = totalVeg / totalOpen;
+
+    const waterScore = 1 - Math.abs(waterRatio - targets.water) * 3;
+    const lavaScore = 1 - Math.abs(lavaRatio - targets.lava) * 5; 
+    const vegScore = 1 - Math.abs(vegRatio - targets.veg) * 3;
+
+    // 2. Connectivity (Largest Flood Fill on WALKABLE tiles)
+    
+    const walkableCells = totalFloor + totalVeg;
+    if (walkableCells === 0) {
+        return { score: 0, connectivity: 0, density: openDensity };
+    }
+
+    const visited = new Uint8Array(width * height);
+    let maxConnected = 0;
+    
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            // Start flood fill on a walkable tile
+            const idx = y * width + x;
+            const tile = grid[idx];
+            // Check flat visited array
+            if ((tile === 0 || tile === 4) && visited[idx] === 0) {
+                const size = floodFill(grid, x, y, visited, width);
+                if (size > maxConnected) {
+                    maxConnected = size;
+                }
+            }
+        }
+    }
+
+    const connectivity = maxConnected / walkableCells;
+
+    // Composite Score
+    let score = (connectivity * 0.4) + 
+                (densityScore * 0.2) + 
+                (waterScore * 0.1) + 
+                (lavaScore * 0.15) + 
+                (vegScore * 0.15);
+    
+    if (connectivity < 0.5) score *= 0.1;
+
+    // Bonus for hitting targets closely if target > 0
+    // Bonus for hitting targets closely if target > 0
+    if (targets.lava > 0 && lavaRatio >= targets.lava * 0.8) score += 0.05;
+    if (targets.veg > 0 && vegRatio >= targets.veg * 0.8) score += 0.05;
+
+    // 3. Clumping Score (Avoid Static Noise)
+    // Check neighbors. If many neighbors are same type, good.
+    let sameNeighborCount = 0;
+    let totalChecks = 0;
+    
+    for (let y = 1; y < height - 1; y += 2) { // Optimization: check every other pixel
+        for (let x = 1; x < width - 1; x += 2) {
+            const idx = y * width + x;
+            const self = grid[idx];
+            totalChecks++;
+            
+            // extensive neighbor check
+            let localSame = 0;
+            if (grid[(y+1)*width + x] === self) localSame++;
+            if (grid[(y-1)*width + x] === self) localSame++;
+            if (grid[y*width + (x+1)] === self) localSame++;
+            if (grid[y*width + (x-1)] === self) localSame++;
+            
+            if (localSame >= 2) sameNeighborCount++;
+        }
+    }
+    
+    // Reward clumping strongly
+    const clumpingScore = totalChecks > 0 ? sameNeighborCount / totalChecks : 0;
+    score += clumpingScore * 0.3; // Significant bonus for non-noisy maps
+
+    // 4. Path Length Score
+    // If map.pathLength < minPathLength, penalize.
+    if (map.pathLength !== undefined && targets.minPathLength > 0) {
+        if (map.pathLength < targets.minPathLength) {
+            // Linear penalty? Or exponential?
+            // e.g. target 50. Actual 25. Score 0.5.
+            const ratio = map.pathLength / targets.minPathLength;
+            score *= ratio; // Hard penalty on everything if path is too short
+        } else {
+            score += 0.1; // Bonus for meeting criteria
+        }
+    }
+
+    return { score, connectivity, density: openDensity };
+}
+
+function floodFill(grid: Uint8Array, startX: number, startY: number, visited: Uint8Array, width: number): number {
+    let count = 0;
+    // Stack of coordinate pairs (packed or objects? Objects are slow. Let's use two stacks or one packed stack)
+    // Packed integer stack: y * width + x
+    const stack = [startY * width + startX];
+    
+    // Mark visited
+    visited[startY * width + startX] = 1;
+    count++;
+
+    while (stack.length > 0) {
+        const packed = stack.pop()!;
+        const cx = packed % width;
+        const cy = Math.floor(packed / width);
+        
+        // Inline neighbors for speed
+        // N
+        if (cy > 0) {
+            const ny = cy - 1;
+            const idx = ny * width + cx;
+            if (visited[idx] === 0) {
+                const t = grid[ny * width + cx];
+                if (t === 0 || t === 4) {
+                    visited[idx] = 1;
+                    stack.push(idx);
+                    count++;
+                }
+            }
+        }
+        // S
+        const height = grid.length / width;
+        if (cy < height - 1) {
+            const ny = cy + 1;
+            const idx = ny * width + cx;
+            if (visited[idx] === 0) {
+                const t = grid[ny * width + cx];
+                if (t === 0 || t === 4) {
+                    visited[idx] = 1;
+                    stack.push(idx);
+                    count++;
+                }
+            }
+        }
+        // W
+        if (cx > 0) {
+            const nx = cx - 1;
+            const idx = cy * width + nx;
+            if (visited[idx] === 0) {
+                const t = grid[cy * width + nx];
+                if (t === 0 || t === 4) {
+                    visited[idx] = 1;
+                    stack.push(idx);
+                    count++;
+                }
+            }
+        }
+        // E
+        if (cx < width - 1) {
+            const nx = cx + 1;
+            const idx = cy * width + nx;
+            if (visited[idx] === 0) {
+                const t = grid[cy * width + nx];
+                if (t === 0 || t === 4) {
+                    visited[idx] = 1;
+                    stack.push(idx);
+                    count++;
+                }
+            }
+        }
+    }
+    return count;
+}

src/apps/RogueGen/generator.ts

@@ -0,0 +1,653 @@
+import type { Genotype, MapData } from './types';
+import { Perlin } from './perlin';
+
+// Initialize Perlin once (or per gen? per gen better for seed, but instance is cheap)
+// Actually we want random noise every time, Perlin class randomizes on init.
+
+export function generateMap(genome: Genotype, width: number, height: number, minPathLength: number = 0): MapData {
+  let map = new Uint8Array(width * height);
+  
+  // --- Step 1: Initialization (Noise vs Random) ---
+  if (genome.useNoise) {
+    const perlin = new Perlin();
+    const scale = genome.noiseScale || 20;
+    const threshold = genome.noiseThreshold || 0.45;
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+             const idx = y * width + x;
+             // Edges always walls
+             if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
+                map[idx] = 1;
+                continue;
+             }
+
+             // Noise value -1 to 1 usually
+             const value = perlin.noise(x / scale, y / scale, 0); 
+             
+             let isEmpty = false;
+
+             if (genome.noiseType === 1) {
+                 // Tunnel Mode (Ridged): Empty space near 0
+                 const tunnelWidth = genome.noiseThreshold * 0.5; // Scale down for thinner tunnels
+                 if (Math.abs(value) < tunnelWidth) isEmpty = true;
+             } else {
+                 // Blob Mode (Standard)
+                 const norm = (value + 1) / 2;
+                 if (norm >= threshold) isEmpty = true;
+             }
+             
+             if (!isEmpty) map[idx] = 1; // Wall
+             else map[idx] = 0; // Floor
+        }
+    }
+  } else {
+    // Legacy Random Init
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const idx = y * width + x;
+            if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
+                map[idx] = 1;
+            } else {
+                map[idx] = Math.random() < genome.initialChance ? 1 : 0;
+            }
+        }
+    }
+  }
+
+  // --- Step 2: Room Injection ---
+  if (genome.useRooms) {
+      const count = genome.roomCount;
+      const min = genome.roomMinSize;
+      const max = genome.roomMaxSize;
+
+      for(let i=0; i<count; i++) {
+          const w = Math.floor(Math.random() * (max - min + 1)) + min;
+          const h = Math.floor(Math.random() * (max - min + 1)) + min;
+          const x = Math.floor(Math.random() * (width - w - 2)) + 1;
+          const y = Math.floor(Math.random() * (height - h - 2)) + 1;
+
+          // Stamp Room (Floor 0)
+          for(let ry = 0; ry < h; ry++) {
+              for(let rx = 0; rx < w; rx++) {
+                  if (y+ry < height-1 && x+rx < width-1) {
+                    map[(y+ry)*width + (x+rx)] = 0;
+                  }
+              }
+          }
+      }
+  }
+
+  // --- Step 3: Cellular Automata ---
+  // Double buffer allocation ONCE
+  let buffer = new Uint8Array(width * height);
+  
+  for (let s = 0; s < genome.steps; s++) {
+    // Copy map to buffer? Or just read from map write to buffer?
+    // Must handle edges.
+    // Optimization: Just swap references.
+    // Read from 'map', write to 'buffer'.
+    
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
+            buffer[idx] = 1;
+            continue;
+        }
+
+        const neighbors = countNeighbors(map, width, height, x, y, 1);
+        if (map[idx] === 1) {
+          // Wall logic
+          if (neighbors < genome.deathLimit) buffer[idx] = 0;
+          else buffer[idx] = 1;
+        } else {
+          // Floor logic
+          if (neighbors > genome.birthLimit) buffer[idx] = 1;
+          else buffer[idx] = 0;
+        }
+      }
+    }
+    // Swap
+    let temp = map;
+    map = buffer;
+    buffer = temp;
+  }
+
+
+  // Smoothing steps 
+  for (let s = 0; s < genome.smoothingSteps; s++) {
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
+            buffer[idx] = 1;
+            continue;
+        }
+
+        const neighbors = countNeighbors(map, width, height, x, y, 1);
+        if (neighbors > 4) buffer[idx] = 1;
+        else if (neighbors < 4) buffer[idx] = 0;
+        else buffer[idx] = map[idx];
+      }
+    }
+    let temp = map;
+    map = buffer;
+    buffer = temp;
+  }
+
+  // Noise Reduction
+  if (genome.noiseReduction) {
+     buffer.set(map);
+     
+     for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const idx = y * width + x;
+        if (map[idx] === 1) {
+            if (countNeighbors(map, width, height, x, y, 1) <= 1) {
+                buffer[idx] = 0;
+            }
+        }
+      }
+    }
+    let temp = map;
+    map = buffer;
+    buffer = temp;
+  }
+
+  // --- Lava Layer Generation (Priority 2) ---
+  let lavaMap = runCASimulation(width, height, genome.lavaInitialChance, genome.lavaSteps, genome.lavaBirthLimit, genome.lavaDeathLimit, map, [1]);
+  applyLayer(map, lavaMap, 3); // 3 = Lava
+
+  // --- Water Layer Generation (Priority 3) ---
+  let waterMap = runCASimulation(width, height, genome.waterInitialChance, genome.waterSteps, genome.waterBirthLimit, genome.waterDeathLimit, map, [1, 3]);
+  applyLayer(map, waterMap, 2); // 2 = Water
+
+  // --- Vegetation Layer Generation (Priority 4) ---
+  let vegMap = runCASimulation(width, height, genome.vegInitialChance, genome.vegSteps, genome.vegBirthLimit, genome.vegDeathLimit, map, [1, 2, 3]);
+  applyLayer(map, vegMap, 4); // 4 = Veg
+
+  // --- Step 4b: Post-Processing (Bridge Building with Pruning and Wobble) ---
+  connectRegions(map, width, height);
+
+  // --- Step 5: Start & Exit Points ---
+  // Strategy: 
+  // 1. Try Random Valid Path strategy (random start, random end > minPathLength)
+  // 2. If that fails (or no minPathLength given), FALLBACK to Double BFS (Diameter) to maximize path.
+  
+  let finalStart = {x:0, y:0};
+  let finalEnd = {x:0, y:0};
+  let pathDist = 0;
+  let found = false;
+
+  // Use minPathLength or fallback heuristic
+  const targetDist = minPathLength > 0 ? minPathLength : Math.max(width, height) * 0.4;
+  
+  // ATTEMPT 1: Random Points (Variety)
+  for(let attempt=0; attempt<10; attempt++) {
+      // 1. Pick random start
+      let startX = -1, startY = -1;
+      let tries = 0;
+      while(tries < 50) {
+          const rx = Math.floor(Math.random() * (width - 2)) + 1;
+          const ry = Math.floor(Math.random() * (height - 2)) + 1;
+          const t = map[ry*width+rx];
+          if (t === 0 || t === 4) { // Floor/Veg
+              startX = rx; startY = ry;
+              break;
+          }
+          tries++;
+      }
+
+      if (startX === -1) continue;
+
+      // 2. BFS Flood to find candidates
+      const dists = bfsFlood(map, width, height, startX, startY);
+      
+      const candidates = [];
+      
+      for(let y=1; y<height-1; y++) {
+          for(let x=1; x<width-1; x++) {
+              const d = dists[y*width+x];
+              if (d >= targetDist) { // Strict GE check
+                  candidates.push({x, y, dist: d});
+              }
+          }
+      }
+
+      if (candidates.length > 0) {
+          // Found at least one good path!
+          const chosen = candidates[Math.floor(Math.random() * candidates.length)];
+          finalStart = {x: startX, y: startY};
+          finalEnd = {x: chosen.x, y: chosen.y};
+          pathDist = chosen.dist;
+          found = true;
+          break;
+      }
+  }
+
+  // ATTEMPT 2: Fallback to Diameter (Reliability)
+  // If we couldn't find a random path > targetDist (maybe target is too high, or we got unlucky),
+  // we MUST try to find the longest possible path to show the user the "best" this map can do.
+  if (!found) {
+       // 1. Pick any valid point
+       let startX = -1, startY = -1;
+       outer2: for(let y=1; y<height-1; y++) {
+           for(let x=1; x<width-1; x++) {
+               if (map[y*width+x] === 0 || map[y*width+x] === 4) {
+                   startX = x; startY = y;
+                   break outer2;
+               }
+           }
+       }
+
+       if (startX !== -1) {
+           // 2. Find furthest from A -> B
+           const pB = bfsFurthest(map, width, height, startX, startY);
+           // 3. Find furthest from B -> C (Approximates Diameter)
+           const pC = bfsFurthest(map, width, height, pB.x, pB.y);
+           
+           finalStart = {x: pB.x, y: pB.y};
+           finalEnd = {x: pC.x, y: pC.y};
+           pathDist = pC.dist;
+       }
+  }
+
+  return { 
+      grid: map, 
+      width, 
+      height, 
+      startPoint: finalStart, 
+      endPoint: finalEnd, 
+      pathLength: pathDist 
+  };
+}
+
+// Simple BFS Flood returning distances array
+function bfsFlood(grid: Uint8Array, width: number, height: number, startX: number, startY: number): Int32Array {
+    const dists = new Int32Array(width * height).fill(-1);
+    const queue = [startY * width + startX];
+    dists[startY * width + startX] = 0;
+    
+    let head = 0;
+    while(head < queue.length) {
+        const packed = queue[head++];
+        const cx = packed % width;
+        const cy = Math.floor(packed / width);
+        const d = dists[packed];
+        
+        // Inline neighbors
+
+        for(let i=0; i<4; i++) {
+             // Ideally we check bounds. But since perimeter is always wall (1), 
+             // we technically won't escape if we trust the wall.
+             // BUT, index could wrap if we are at x=width-1 and do +1 -> next row x=0.
+             // Safer to do coord check.
+             
+             let nx = cx, ny = cy;
+             if (i===0) ny--;
+             else if (i===1) ny++;
+             else if (i===2) nx--;
+             else if (i===3) nx++;
+             
+             if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+                 const nIdx = ny * width + nx;
+                 if (dists[nIdx] === -1) {
+                     const t = grid[nIdx];
+                     if (t === 0 || t === 4) { // Walkable
+                         dists[nIdx] = d + 1;
+                         queue.push(nIdx);
+                     }
+                 }
+             }
+        }
+    }
+    return dists;
+}
+
+// Helper to run a CA simulation for a feature layer
+function runCASimulation(width: number, height: number, initialChance: number, steps: number, birth: number, death: number, baseMap: Uint8Array, forbiddenTiles: number[]): Uint8Array {
+    let layer = new Uint8Array(width * height);
+    
+    // Initialize
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const idx = y * width + x;
+            if (forbiddenTiles.includes(baseMap[idx])) {
+                layer[idx] = 0;
+            } else {
+                layer[idx] = Math.random() < initialChance ? 1 : 0; 
+            }
+        }
+    }
+
+    let buffer = new Uint8Array(width * height);
+
+    // Run Steps
+    for (let s = 0; s < steps; s++) {
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const idx = y * width + x;
+
+                if (forbiddenTiles.includes(baseMap[idx])) {
+                    buffer[idx] = 0; // Ensure forbidden stays empty
+                    continue;
+                }
+                
+                // Edges
+                if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
+                    buffer[idx] = 1; // Or 0? Features usually unbound. Let's say 0.
+                    continue;
+                }
+
+                // Count neighbors of THIS layer (1s)
+                const neighbors = countNeighbors(layer, width, height, x, y, 1);
+                
+                if (layer[idx] === 1) {
+                    if (neighbors < death) buffer[idx] = 0;
+                    else buffer[idx] = 1;
+                } else {
+                    if (neighbors > birth) buffer[idx] = 1;
+                    else buffer[idx] = 0;
+                }
+            }
+        }
+        // Swap
+        let temp = layer;
+        layer = buffer;
+        buffer = temp;
+    }
+    return layer;
+}
+
+function applyLayer(baseMap: Uint8Array, layer: Uint8Array, typeId: number) {
+    for (let i = 0; i < baseMap.length; i++) {
+        if (layer[i] === 1) {
+             if (baseMap[i] === 0) {
+                 baseMap[i] = typeId;
+             }
+        }
+    }
+}
+
+// BFS to find all connected regions of walkable tiles
+function getRegions(map: Uint8Array, width: number, height: number): {points: {x:number, y:number}[], id: number}[] {
+    const visited = new Uint8Array(width * height);
+    const regions = [];
+    let regionId = 0;
+
+    for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+             const idx = y * width + x;
+             // Walkable: 0 (Floor) or 4 (Veg)
+             if ((map[idx] === 0 || map[idx] === 4) && visited[idx] === 0) {
+                const points = [];
+                // Packed stack (DFS)
+                const stack = [idx];
+                visited[idx] = 1;
+                points.push({x, y});
+
+                while(stack.length > 0) {
+                    const packed = stack.pop()!;
+                    const cx = packed % width;
+                    const cy = Math.floor(packed / width);
+
+                    // Neighbors
+                    // N
+                    if (cy > 0) {
+                         const ny = cy - 1; const nx = cx;
+                         const nIdx = ny * width + nx;
+                         if (visited[nIdx] === 0) {
+                             const t = map[nIdx];
+                             if (t === 0 || t === 4) {
+                                 visited[nIdx] = 1;
+                                 points.push({x:nx, y:ny});
+                                 stack.push(nIdx);
+                             }
+                         }
+                    }
+                    // S
+                    if (cy < height - 1) {
+                         const ny = cy + 1; const nx = cx;
+                         const nIdx = ny * width + nx;
+                         if (visited[nIdx] === 0) {
+                             const t = map[nIdx];
+                             if (t === 0 || t === 4) {
+                                 visited[nIdx] = 1;
+                                 points.push({x:nx, y:ny});
+                                 stack.push(nIdx);
+                             }
+                         }
+                    }
+                     // W
+                    if (cx > 0) {
+                         const ny = cy; const nx = cx - 1;
+                         const nIdx = ny * width + nx;
+                         if (visited[nIdx] === 0) {
+                             const t = map[nIdx];
+                             if (t === 0 || t === 4) {
+                                 visited[nIdx] = 1;
+                                 points.push({x:nx, y:ny});
+                                 stack.push(nIdx);
+                             }
+                         }
+                    }
+                    // E
+                    if (cx < width - 1) {
+                         const ny = cy; const nx = cx + 1;
+                         const nIdx = ny * width + nx;
+                         if (visited[nIdx] === 0) {
+                             const t = map[nIdx];
+                             if (t === 0 || t === 4) {
+                                 visited[nIdx] = 1;
+                                 points.push({x:nx, y:ny});
+                                 stack.push(nIdx);
+                             }
+                         }
+                    }
+                }
+                regions.push({points, id: regionId++});
+            }
+        }
+    }
+    return regions;
+}
+
+function connectRegions(map: Uint8Array, width: number, height: number) {
+    let regions = getRegions(map, width, height);
+    
+    // PRUNING: Remove tiny regions (noise artifacts)
+    const PRUNE_SIZE = 12;
+    for (let i = regions.length - 1; i >= 0; i--) {
+        if (regions[i].points.length < PRUNE_SIZE) {
+            // Fill with wall
+            for(const p of regions[i].points) {
+                map[p.y * width + p.x] = 1;
+            }
+            regions.splice(i, 1);
+        }
+    }
+
+    if (regions.length <= 1) return;
+
+    // Sort by largest (Main)
+    regions.sort((a, b) => b.points.length - a.points.length);
+    const mainRegion = regions[0];
+
+    // Connect remaining
+    for (let i = 1; i < regions.length; i++) {
+        const region = regions[i];
+        let minDistance = Infinity;
+        let startPoint = {x:0, y:0};
+        let endPoint = {x:0, y:0};
+
+        // OPTIMIZATION: Sampling
+        const sampleSize = 30; // Check 30 random points
+        
+        const mainSamples = [];
+        if (mainRegion.points.length > sampleSize) {
+            for(let k=0; k<sampleSize; k++) {
+                mainSamples.push(mainRegion.points[Math.floor(Math.random() * mainRegion.points.length)]);
+            }
+        } else {
+            mainSamples.push(...mainRegion.points);
+        }
+
+        const regionSamples = [];
+        if (region.points.length > sampleSize) {
+             for(let k=0; k<sampleSize; k++) {
+                regionSamples.push(region.points[Math.floor(Math.random() * region.points.length)]);
+            }
+        } else {
+            regionSamples.push(...region.points);
+        }
+
+        // Compare samples
+        for(const pA of mainSamples) {
+            for(const pB of regionSamples) {
+                 const dist = (pA.x-pB.x)**2 + (pA.y-pB.y)**2;
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    startPoint = pA;
+                    endPoint = pB;
+                }
+            }
+        }
+
+        // Draw bridge - ORGANIC "DRUNKARD'S" LINE
+        let cursorX = startPoint.x;
+        let cursorY = startPoint.y;
+        
+        const dx = endPoint.x - startPoint.x;
+        const dy = endPoint.y - startPoint.y;
+        const dist = Math.sqrt(dx*dx + dy*dy);
+        
+        // Normalize direction
+        const stepX = dx / dist;
+        const stepY = dy / dist;
+        
+        let steps = Math.floor(dist);
+        
+        for(let s=0; s<=steps; s++) {
+            // Move generally towards target
+            cursorX += stepX;
+            cursorY += stepY;
+            
+            // Add jitter
+            const jitter = (Math.random() - 0.5) * 1.5; 
+            const px = Math.floor(cursorX + jitter);
+            const py = Math.floor(cursorY + jitter);
+            
+            // Carve with brush size 2 for playability
+            for(let by=0; by<=1; by++) {
+                for(let bx=0; bx<=1; bx++) {
+                     const carverY = py+by;
+                     const carverX = px+bx;
+                     if (carverY>0 && carverY<height-1 && carverX>0 && carverX<width-1) {
+                         const idx = carverY * width + carverX;
+                         // Overwrite anything that isn't already Floor/Veg
+                         if (map[idx] !== 0 && map[idx] !== 4) {
+                             map[idx] = 0; 
+                         }
+                     }
+                }
+            }
+        }
+    }
+}
+
+function countNeighbors(map: Uint8Array, width: number, height: number, x: number, y: number, targetInfo: number): number {
+  let count = 0;
+  // Inline checks for performance?
+  // 3x3 loop
+  for (let dy = -1; dy <= 1; dy++) {
+    for (let dx = -1; dx <= 1; dx++) {
+      if (dx === 0 && dy === 0) continue;
+      
+      const nx = x + dx;
+      const ny = y + dy;
+
+      if (ny < 0 || ny >= height || nx < 0 || nx >= width) {
+        if (targetInfo === 1) count++; // Edges are walls
+      } else {
+          if (map[ny * width + nx] === targetInfo) {
+            count++;
+          }
+      }
+    }
+  }
+  return count;
+}
+
+function bfsFurthest(grid: Uint8Array, width: number, height: number, startX: number, startY: number): {x: number, y: number, dist: number} {
+    // Use Int32Array for distances to support large maps (-1 init)
+    const dists = new Int32Array(width * height).fill(-1);
+    
+    // Packed queue
+    const queue = [startY * width + startX];
+    dists[startY * width + startX] = 0;
+    
+    let furthest = {x: startX, y: startY, dist: 0};
+    
+    // Using Queue (Shift) is slow. 
+    // Circular buffer or pointer index is better.
+    let head = 0;
+    
+    while(head < queue.length) {
+        const packed = queue[head++];
+        const cx = packed % width;
+        const cy = Math.floor(packed / width);
+        const d = dists[packed];
+
+        if (d > furthest.dist) {
+            furthest = {x: cx, y: cy, dist: d};
+        }
+        
+        // Inline neighbors
+        // N
+        if (cy > 0) {
+             const idx = (cy - 1) * width + cx;
+             if (dists[idx] === -1) {
+                 const t = grid[idx];
+                 if (t === 0 || t === 4) {
+                     dists[idx] = d + 1;
+                     queue.push(idx);
+                 }
+             }
+        }
+        // S
+        if (cy < height - 1) {
+             const idx = (cy + 1) * width + cx;
+             if (dists[idx] === -1) {
+                 const t = grid[idx];
+                 if (t === 0 || t === 4) {
+                     dists[idx] = d + 1;
+                     queue.push(idx);
+                 }
+             }
+        }
+        // W
+        if (cx > 0) {
+             const idx = cy * width + (cx - 1);
+             if (dists[idx] === -1) {
+                 const t = grid[idx];
+                 if (t === 0 || t === 4) {
+                     dists[idx] = d + 1;
+                     queue.push(idx);
+                 }
+             }
+        }
+        // E
+        if (cx < width - 1) {
+             const idx = cy * width + (cx + 1);
+             if (dists[idx] === -1) {
+                 const t = grid[idx];
+                 if (t === 0 || t === 4) {
+                     dists[idx] = d + 1;
+                     queue.push(idx);
+                 }
+             }
+        }
+    }
+    return furthest;
+}

src/apps/RogueGen/perlin.ts

@@ -0,0 +1,61 @@
+export class Perlin {
+    private perm: number[];
+
+    constructor() {
+        this.perm = new Array(512);
+        const p = new Array(256).fill(0).map((_, i) => i);
+        // Shuffle
+        for (let i = 255; i > 0; i--) {
+            const r = Math.floor(Math.random() * (i + 1));
+            [p[i], p[r]] = [p[r], p[i]];
+        }
+        for (let i = 0; i < 512; i++) {
+            this.perm[i] = p[i & 255];
+        }
+    }
+
+    public noise(x: number, y: number, z: number): number {
+        const X = Math.floor(x) & 255;
+        const Y = Math.floor(y) & 255;
+        const Z = Math.floor(z) & 255;
+
+        x -= Math.floor(x);
+        y -= Math.floor(y);
+        z -= Math.floor(z);
+
+        const u = fade(x);
+        const v = fade(y);
+        const w = fade(z);
+
+        const A = this.perm[X] + Y;
+        const AA = this.perm[A] + Z;
+        const AB = this.perm[A + 1] + Z;
+        const B = this.perm[X + 1] + Y;
+        const BA = this.perm[B] + Z;
+        const BB = this.perm[B + 1] + Z;
+
+        return lerp(w, lerp(v, lerp(u, grad(this.perm[AA], x, y, z),
+            grad(this.perm[BA], x - 1, y, z)),
+            lerp(u, grad(this.perm[AB], x, y - 1, z),
+                grad(this.perm[BB], x - 1, y - 1, z))),
+            lerp(v, lerp(u, grad(this.perm[AA + 1], x, y, z - 1),
+                grad(this.perm[BA + 1], x - 1, y, z - 1)),
+                lerp(u, grad(this.perm[AB + 1], x, y - 1, z - 1),
+                    grad(this.perm[BB + 1], x - 1, y - 1, z - 1))));
+    }
+}
+
+function fade(t: number): number {
+    return t * t * t * (t * (t * 6 - 15) + 10);
+}
+
+function lerp(t: number, a: number, b: number): number {
+    return a + t * (b - a);
+}
+
+function grad(hash: number, x: number, y: number, z: number): number {
+    const h = hash & 15;
+    const u = h < 8 ? x : y;
+    const v = h < 4 ? y : h === 12 || h === 14 ? x : z;
+    return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+}

src/apps/RogueGen/types.ts

@@ -0,0 +1,46 @@
+export interface Genotype {
+    initialChance: number; // 0.0 - 1.0
+    birthLimit: number;    // 1 - 8
+    deathLimit: number;    // 1 - 8
+    steps: number;        // 1 - 10
+    smoothingSteps: number; // 0 - 5
+    noiseReduction: boolean; // Remove small unconnected walls
+
+    // Hybrid Generation
+    useNoise: boolean; // If true, use Perlin Noise instead of random noise
+    noiseType: number; // 0 = Blob (Standard), 1 = Tunnel (Ridged)
+    noiseScale: number; // 5-50 (Zoom level)
+    noiseThreshold: number; // 0.2 - 0.8 (Sea/Wall level)
+
+    useRooms: boolean; // If true, inject rooms
+    roomCount: number; // 0-20
+    roomMinSize: number; // 3-8
+    roomMaxSize: number; // 8-15
+
+    // Water Layer (2)
+    waterInitialChance: number;
+    waterBirthLimit: number;
+    waterDeathLimit: number;
+    waterSteps: number;
+
+    // Lava Layer (3)
+    lavaInitialChance: number;
+    lavaBirthLimit: number;
+    lavaDeathLimit: number;
+    lavaSteps: number;
+
+    // Vegetation Layer (4)
+    vegInitialChance: number;
+    vegBirthLimit: number;
+    vegDeathLimit: number;
+    vegSteps: number;
+}
+
+export interface MapData {
+    grid: Uint8Array; // 1 = wall, 0 = floor, flat array (y*width+x)
+    width: number;
+    height: number;
+    startPoint?: {x: number, y: number};
+    endPoint?: {x: number, y: number};
+    pathLength?: number;
+}

src/apps/SelfDrivingCar/Car.test.ts

@@ -0,0 +1,46 @@
+
+import Matter from 'matter-js';
+import { describe, expect, it, beforeEach } from 'bun:test';
+import { Car } from './Car';
+import { DenseNetwork } from '../LunarLander/DenseNetwork';
+import { DEFAULT_CAR_CONFIG } from './types';
+
+describe('Car Logic - Fitness & Stagnation', () => {
+    let car: Car;
+    let brain: DenseNetwork;
+
+    beforeEach(() => {
+        brain = new DenseNetwork([6, 8, 2]); // Standard topology
+        car = new Car(100, 100, brain, 0, DEFAULT_CAR_CONFIG);
+    });
+
+    it('should initialize with 0 fitness', () => {
+        expect(car.fitness).toBe(0);
+        expect(car.isDead).toBe(false);
+    });
+
+    it('should NOT lose fitness on death', () => {
+        car.kill();
+        expect(car.fitness).toBe(0);
+        expect(car.isDead).toBe(true);
+    });
+
+    it('should accumulate continuous fitness when moving', () => {
+         // Mock speed
+         // Can't easily mock speed on Body as it is computed.
+         // But we can check update path progress logic if we had path points.
+         
+         const points = Array.from({length: 100}, (_, i) => ({x: i*10, y: 0}));
+         car.body.position = {x: 0, y: 0};
+         
+         // Initial update should set index 0
+         car.update([], points);
+         
+         // Move to index 1
+         car.body.position = {x: 10, y: 0};
+         car.update([], points);
+         
+         // Should have gained fitness
+         expect(car.fitness).toBeGreaterThan(0);
+    });
+});

src/apps/SelfDrivingCar/Car.ts

@@ -0,0 +1,345 @@
+
+import Matter from 'matter-js';
+import { DEFAULT_CAR_CONFIG } from './types';
+import type { CarConfig } from './types';
+// import { NeuralNetwork } from '../../lib/neatArena/network';
+import { DenseNetwork } from '../LunarLander/DenseNetwork';
+import { distance, lineToLineIntersection } from './geom';
+
+// Physics Tunings Removed (Now in config)
+
+export class Car {
+    public body: Matter.Body;
+    public brain: DenseNetwork;
+    public isDead: boolean = false;
+    public fitness: number = 0;
+    public checkpointsPassed: number = 0;
+    public rayReadings: number[] = [];
+
+    public config: CarConfig;
+    
+    // START NEW TRACKING LOGIC
+    private currentPathIndex: number = 0;
+    private laps: number = 0;
+    private maxPathIndexReached: number = 0;
+    private initialPosSet: boolean = false;
+    private framesSinceCheckpoint: number = 0;
+    
+    // Fitness tracking
+    private totalFrames: number = 0;
+    private speedSum: number = 0;
+    private lastSteer: number = 0;
+    private steeringChangeSum: number = 0;
+
+    constructor(
+        x: number, 
+        y: number, 
+        brain: DenseNetwork,
+        angle: number = 0,
+        config: CarConfig = DEFAULT_CAR_CONFIG
+    ) {
+        this.brain = brain;
+        this.config = config;
+
+        // Create Physics Body
+        this.body = Matter.Bodies.rectangle(x, y, config.width, config.height, {
+            angle: angle,
+            frictionAir: config.frictionAir,
+            friction: config.friction,
+            density: 0.01,
+            label: 'car'
+        });
+    }
+
+    public update(walls: Matter.Body[], pathPoints: {x:number, y:number}[]) {
+        if (this.isDead) return;
+
+        // Init start position on path
+        if (!this.initialPosSet && pathPoints.length > 0) {
+            this.currentPathIndex = this.findClosestIndex(pathPoints, 0); // Search wide
+            this.initialPosSet = true;
+        }
+
+        // Stagnation Killer - TIGHTENED to prevent local minima loops
+        this.framesSinceCheckpoint++;
+        if (this.framesSinceCheckpoint > 300) {  // 5 seconds without progress
+             this.kill();
+             return;
+        }
+        
+        // ANTI-EXPLOIT: Minimum progress requirements
+        // Must reach checkpoint 8 within first 8 seconds (stricter than before)
+        if (this.totalFrames > 480 && this.maxPathIndexReached < 8) {
+            this.kill();
+            return;
+        }
+        
+        // Must reach checkpoint 3 within first 3 seconds (catches immediate crashers)
+        if (this.totalFrames > 180 && this.maxPathIndexReached < 3) {
+            this.kill();
+            return;
+        }
+
+        // 1. Sensors
+        this.rayReadings = this.castRays(walls);
+
+        // 2. Think - Expanded inputs for better control awareness
+        const forward = {
+            x: Math.cos(this.body.angle - Math.PI/2),
+            y: Math.sin(this.body.angle - Math.PI/2)
+        };
+        const right = { x: -forward.y, y: forward.x };
+        
+        // Velocity in car's local frame (for drift detection)
+        const localVelX = this.body.velocity.x * forward.x + this.body.velocity.y * forward.y;
+        const localVelY = this.body.velocity.x * right.x + this.body.velocity.y * right.y;
+        
+        const inputs = [
+            ...this.rayReadings, // 7 rays
+            localVelX / this.config.maxSpeed, // Normalize forward/backward velocity
+            localVelY / this.config.maxSpeed, // Normalize lateral velocity (drift)
+            this.body.angularVelocity / this.config.turnSpeed, // Normalize rotation rate
+            this.body.speed / this.config.maxSpeed, // Normalize speed magnitude
+        ];
+        
+        const outputs = this.brain.predict(inputs);
+        const steer = outputs[0];
+        let gas = outputs[1];
+        
+        // Track metrics for fitness calculation
+        this.totalFrames++;
+        this.speedSum += this.body.speed;
+        this.steeringChangeSum += Math.abs(steer - this.lastSteer);
+        this.lastSteer = steer;
+
+        // 3. Act (Kickstart)
+        if (this.framesSinceCheckpoint < 60 && this.fitness < 2) {
+            gas = 1.0; 
+        } else if (this.body.speed < 0.2) {
+            gas = 1.0; 
+        }
+
+        // Physics: Steering
+        if (this.body.speed > 0.5) {
+            Matter.Body.setAngularVelocity(this.body, steer * this.config.turnSpeed * Math.sign(gas));
+        }
+
+        // Physics: Gas (Forward Force) - reuse forward vector from input calculation
+        // Physics: Lateral Friction (Tire Grip)
+        this.applyTireGrip(forward);
+
+        if (gas > 0) {
+            const force = 0.003 * gas; // slightly stronger engine
+            Matter.Body.applyForce(this.body, this.body.position, { x: forward.x * force, y: forward.y * force });
+        } else {
+            // Braking is less magical now
+            const brakeEffect = 0.98;
+             Matter.Body.setVelocity(this.body, { x: this.body.velocity.x * brakeEffect, y: this.body.velocity.y * brakeEffect });
+        }
+        
+        // Speed Limit
+        if (this.body.speed > this.config.maxSpeed) {
+            Matter.Body.setVelocity(this.body, { 
+                x: this.body.velocity.x * (this.config.maxSpeed/this.body.speed), 
+                y: this.body.velocity.y * (this.config.maxSpeed/this.body.speed) 
+            });
+        }
+        
+        // 4. Update Fitness (Continuous Path Progress)
+        if (pathPoints.length > 0) {
+            this.updatePathProgress(pathPoints);
+        }
+    }
+
+    private applyTireGrip(forward: {x:number, y:number}) {
+        // Compute current velocity
+        const velocity = this.body.velocity;
+
+        // Compute Right vector
+        const right = { x: -forward.y, y: forward.x };
+
+        // Lateral Velocity = Dot(Velocity, Right)
+        const lateralSpeed = velocity.x * right.x + velocity.y * right.y;
+
+        // Lateral Impulse = -Lateral Velocity * (0.0 to 1.0)
+        // 1.0 = Perfect rails
+        // 0.0 = Ice
+        const lateralImpulse = lateralSpeed * this.config.lateralFriction;
+
+        // Apply impulse against the lateral motion
+        // Matter does impulses as force * time? No, setVelocity is cheating.
+        // Let's modify velocity directly for stability.
+        
+        Matter.Body.setVelocity(this.body, {
+            x: velocity.x - right.x * lateralImpulse,
+            y: velocity.y - right.y * lateralImpulse
+        });
+    }
+
+    private updatePathProgress(pathPoints: {x:number, y:number}[]) {
+        // Find closest point LOCAL SEARCH
+        // Search window: +/- 20 points from current index, handling wrap-around
+        const searchRadius = 20;
+        const total = pathPoints.length;
+        
+        let bestDist = Infinity;
+        let bestIndex = this.currentPathIndex;
+
+        for (let i = -searchRadius; i <= searchRadius; i++) {
+            let idx = (this.currentPathIndex + i);
+            // Handle wrap
+            if (idx < 0) idx += total;
+            if (idx >= total) idx -= total;
+
+            const d = distance(this.body.position, pathPoints[idx]);
+            // Use <= to favor forward points (later in the loop) when equidistant
+            // This is critical for loop closure where end overlaps start
+            if (d <= bestDist) {
+                bestDist = d;
+                bestIndex = idx;
+            }
+        }
+
+        // Did we move forward or backward?
+        // Simple logic: delta index
+        let delta = bestIndex - this.currentPathIndex;
+        
+        // Wrap detection
+        // Jump from total-1 to 0 (Forward Lap) -> Delta is negative large number (e.g. -499)
+        // Jump from 0 to total-1 (Reverse) -> Delta is positive large number (e.g. +499)
+        
+        if (delta < -total / 2) {
+            // Forward Lap
+            this.laps++;
+            delta += total;
+        } else if (delta > total / 2) {
+            // Backward Lap
+            this.laps--;
+            delta -= total;
+        }
+        
+        // ANTI-EXPLOIT: Only reward progress if moving forward
+        // Check if velocity is aligned with path direction
+        if (delta > 0) {
+            // Calculate expected direction to next checkpoint
+            const nextIdx = (bestIndex + 1) % total;
+            const pathDir = {
+                x: pathPoints[nextIdx].x - pathPoints[bestIndex].x,
+                y: pathPoints[nextIdx].y - pathPoints[bestIndex].y
+            };
+            const pathDirMag = Math.sqrt(pathDir.x * pathDir.x + pathDir.y * pathDir.y);
+            
+            if (pathDirMag > 0.1) {
+                // Normalize
+                pathDir.x /= pathDirMag;
+                pathDir.y /= pathDirMag;
+                
+                // Dot product with velocity
+                const velDot = this.body.velocity.x * pathDir.x + this.body.velocity.y * pathDir.y;
+                
+                // Only allow progress if moving roughly forward (dot > 0)
+                if (velDot < 0) {
+                    // Moving backward relative to path - REJECT progress
+                    delta = 0;
+                    bestIndex = this.currentPathIndex; // Don't update position
+                }
+            }
+        }
+        
+        // Update state
+        this.currentPathIndex = bestIndex;
+
+        // Calculate continuous fitness with bonuses
+        const rawScore = (this.laps * total) + this.currentPathIndex;
+        
+        // Base fitness from progress
+        let baseFitness = Math.max(0, rawScore / 10.0);
+        
+        // Speed bonus: reward faster completion
+        const avgSpeed = this.totalFrames > 0 ? this.speedSum / this.totalFrames : 0;
+        const speedBonus = (avgSpeed / this.config.maxSpeed) * 0.2 * baseFitness; // Up to 20% bonus
+        
+        // Smoothness penalty: penalize jerky steering
+        const avgSteeringChange = this.totalFrames > 0 ? this.steeringChangeSum / this.totalFrames : 0;
+        const smoothnessPenalty = avgSteeringChange * 0.1 * baseFitness; // Up to 10% penalty
+        
+        // ANTI-EXPLOIT: Early death penalty
+        // Cars must survive at least 3 seconds to get any fitness at all
+        let finalFitness = baseFitness + speedBonus - smoothnessPenalty;
+        if (this.totalFrames < 180) { // Less than 3 seconds survived
+            finalFitness = 0; // No fitness for instant crashes
+        } else if (this.totalFrames < 300) { // Less than 5 seconds
+            // Strong penalty for early deaths (50% reduction)
+            finalFitness *= 0.5;
+        }
+        
+        this.fitness = Math.max(0, finalFitness);
+
+        // Stagnation Check
+        const absoluteIndex = (this.laps * total) + this.currentPathIndex;
+        if (absoluteIndex > this.maxPathIndexReached) {
+            this.maxPathIndexReached = absoluteIndex;
+            this.framesSinceCheckpoint = 0;
+        }
+    }
+
+    private findClosestIndex(points: {x:number, y:number}[], _startIndex: number): number {
+        let bestDist = Infinity;
+        let bestIdx = 0;
+        for(let i=0; i<points.length; i++) { // brute init
+             const d = distance(this.body.position, points[i]);
+             if (d < bestDist) { bestDist = d; bestIdx = i; }
+        }
+        return bestIdx;
+    }
+
+    private castRays(walls: Matter.Body[]): number[] {
+        // ... (Keep existing ray logic)
+        const rays: number[] = [];
+        const start = this.body.position;
+        const forwardAngle = this.body.angle - Math.PI/2;
+        const startRayAngle = forwardAngle - this.config.raySpread / 2;
+        const angleStep = this.config.raySpread / (this.config.rayCount - 1);
+
+        for (let i = 0; i < this.config.rayCount; i++) {
+            const angle = startRayAngle + i * angleStep;
+            const dir = { x: Math.cos(angle), y: Math.sin(angle) };
+            const end = {
+                x: start.x + dir.x * this.config.rayLength,
+                y: start.y + dir.y * this.config.rayLength
+            };
+
+            let minDist = 1.0; 
+            for (const wall of walls) {
+                const d = distance(start, wall.position);
+                if (d > this.config.rayLength + 100) continue;
+                const dist = this.rayBodyIntersect(start, end, wall);
+                if (dist < minDist) minDist = dist;
+            }
+            rays.push(1.0 - minDist);
+        }
+        return rays;
+    }
+
+    private rayBodyIntersect(start: {x:number, y:number}, end: {x:number, y:number}, body: Matter.Body): number {
+         // ... (Keep existing logic)
+         const verts = body.vertices;
+         let minDist = 1.2; 
+         for (let i = 0; i < verts.length; i++) {
+            const p1 = verts[i];
+            const p2 = verts[(i + 1) % verts.length];
+            const intersection = lineToLineIntersection(start.x, start.y, end.x, end.y, p1.x, p1.y, p2.x, p2.y);
+            if (intersection) {
+                const d = distance(start, intersection);
+                const normalizedD = d / this.config.rayLength;
+                if (normalizedD < minDist) minDist = normalizedD;
+            }
+         }
+         return minDist;
+    }
+    
+    public kill() {
+        if (this.isDead) return;
+        this.isDead = true;
+    }
+}

src/apps/SelfDrivingCar/CarScene.ts

@@ -0,0 +1,395 @@
+import Phaser from 'phaser';
+import { CarSimulation } from './CarSimulation';
+import { Car } from './Car';
+import { DEFAULT_SIM_CONFIG, DEFAULT_CAR_CONFIG } from './types';
+import type { SerializedTrackData, CarConfig, SimulationConfig } from './types';
+import { TrackGenerator } from './Track';
+
+// NEAT Imports REMOVED
+// import { createPopulation, evolveGeneration, DEFAULT_EVOLUTION_CONFIG, type Population, type EvolutionConfig } from '../../lib/neatArena/evolution';
+// import type { Genome } from '../../lib/neatArena/genome';
+import { SimpleGA, DEFAULT_GA_CONFIG } from './SimpleGA';
+import type { GAConfig } from './SimpleGA';
+
+// Worker Import (Vite/Bun compatible)
+import TrainingWorker from './training.worker.ts?worker';
+
+export class CarScene extends Phaser.Scene {
+    private sim!: CarSimulation;
+    private graphics!: Phaser.GameObjects.Graphics;
+    
+    // UI Text
+    private statsText!: Phaser.GameObjects.Text;
+    private fitnessText!: Phaser.GameObjects.Text;
+    
+    // Training State
+    private worker!: Worker;
+    private population: Float32Array[] = [];
+    private gaConfig = DEFAULT_GA_CONFIG;
+    private ga: SimpleGA;
+    
+    private generationCount = 0;
+    private bestGenomeEver: Float32Array | null = null;
+    private bestFitnessEver = -Infinity;
+
+    private serializedTrack!: SerializedTrackData;
+    private layerSizes = [11, 24, 16, 2]; // 11 Inputs (7 rays + 4 dynamics), 24/16 Hidden, 2 Outputs
+    
+    // Config
+    private carConfig: CarConfig = DEFAULT_CAR_CONFIG;
+    private simConfig: SimulationConfig = DEFAULT_SIM_CONFIG;
+
+    private instanceId: string;
+
+    constructor() {
+        super({ key: 'CarScene' });
+        this.instanceId = Math.random().toString(36).substring(7);
+        console.log(`[CarScene:${this.instanceId}] Constructor called`);
+        this.ga = new SimpleGA(this.layerSizes, this.gaConfig);
+    }
+
+
+
+    create() {
+        // ... (Keep existing setup)
+        this.cameras.main.setBackgroundColor('#222222');
+        this.graphics = this.add.graphics();
+        this.startTraining();
+
+        // Listen for new track request
+        this.game.events.on('new-track', () => this.handleNewTrack()); // Refactored handler
+
+        // Cleanup
+        this.events.on('shutdown', this.shutdown, this);
+        this.events.on('destroy', this.shutdown, this);
+
+        // Listen for Config Updates
+        this.game.events.on('update-config', (cfg: { car: CarConfig, sim: SimulationConfig, ga?: GAConfig }) => {
+            this.carConfig = cfg.car;
+            this.simConfig = cfg.sim;
+            
+            // Update GA config if provided
+            if (cfg.ga) {
+                this.gaConfig = cfg.ga;
+                this.ga = new SimpleGA(this.layerSizes, this.gaConfig);
+            }
+            
+            // HOT RELOAD PHYSICS
+            if (this.sim) {
+                this.sim.updateConfig(this.carConfig);
+                
+                // Restart visual sim with updated config so changes apply immediately
+                if (this.bestGenomeEver) {
+                    this.sim = new CarSimulation(
+                        this.serializedTrack,
+                        { ...this.simConfig, populationSize: 1 },
+                        [this.bestGenomeEver],
+                        this.carConfig
+                    );
+                }
+                
+                // Also update Worker config for NEXT generation
+                if (this.worker) {
+                    // We can't interrupt the worker mid-gen
+                    // Config updates apply on next generation
+                }
+            }
+        });
+        
+        // Create stats text overlay
+        this.statsText = this.add.text(20, 170, '', {
+            fontSize: '14px',
+            color: '#ffffff',
+            backgroundColor: '#000000aa',
+            padding: { x: 8, y: 6 }
+        }).setDepth(100);
+        
+        this.fitnessText = this.add.text(20, 210, '', {
+            fontSize: '12px',
+            color: '#4ecdc4',
+            backgroundColor: '#000000aa',
+            padding: { x: 8, y: 6 }
+        }).setDepth(100);
+        
+        // ... debug texts ... (rest of create)
+    }
+
+    private handleNewTrack() {
+        if (this.worker) {
+            this.worker.terminate();
+            this.worker = null as any; // CRITICAL: Set to null so startTraining creates new worker
+        }
+        this.sim = null as any; 
+        
+        // Recreate GA with current config (important for population size changes)
+        this.ga = new SimpleGA(this.layerSizes, this.gaConfig);
+        this.population = this.ga.createPopulation();
+        
+        this.generationCount = 0;
+        this.bestFitnessEver = -Infinity;
+        this.bestGenomeEver = null;
+        this.game.events.emit('generation-complete', { generation: 0, best: 0, average: 0 });
+        this.startTraining();
+    }
+
+    private startTraining() {
+        // 1. Generate Track (Main Thread)
+        const generator = new TrackGenerator(this.scale.width, this.scale.height);
+        // Use current Sim Config for Complexity/Length
+        const rawTrack = generator.generate(this.simConfig.trackComplexity, this.simConfig.trackLength);
+        
+        // 2. Serialize Track
+        const serializedTrack: SerializedTrackData = {
+            innerWalls: rawTrack.innerWalls.map(v => ({ x: v.x, y: v.y })),
+            outerWalls: rawTrack.outerWalls.map(v => ({ x: v.x, y: v.y })),
+            pathPoints: rawTrack.pathPoints.map(v => ({ x: v.x, y: v.y })),
+            startPosition: { x: rawTrack.startPosition.x, y: rawTrack.startPosition.y },
+            startAngle: rawTrack.startAngle,
+            walls: rawTrack.walls.map(b => ({
+                position: { x: b.position.x, y: b.position.y },
+                angle: b.angle,
+                width: b.bounds.max.x - b.bounds.min.x,
+                height: b.bounds.max.y - b.bounds.min.y,
+                label: b.label,
+                isSensor: b.isSensor
+            })),
+            checkpoints: rawTrack.checkpoints.map(b => ({
+                position: { x: b.position.x, y: b.position.y },
+                angle: b.angle,
+                width: b.bounds.max.x - b.bounds.min.x,
+                height: b.bounds.max.y - b.bounds.min.y,
+                label: b.label,
+                isSensor: b.isSensor
+            }))
+        };
+        this.serializedTrack = serializedTrack;
+
+        // 3. Initialize Population
+        if (this.population.length === 0) {
+             this.population = this.ga.createPopulation();
+        }
+        
+        // 4. Initialize Worker
+        if (!this.worker) { // Only create if missing (or terminated)
+            this.worker = new TrainingWorker();
+            this.worker.onmessage = (e) => {
+                if (e.data.type === 'TRAIN_COMPLETE') {
+                    this.handleTrainingComplete(e.data.results);
+                }
+            };
+        }
+
+        // 5. Start First Generation (Worker)
+        this.startWorkerGeneration();
+
+        // 6. Initialize Visual Sim
+        this.sim = new CarSimulation(this.serializedTrack, { ...this.simConfig, populationSize: 1 }, [], this.carConfig); 
+    }
+
+    private startWorkerGeneration() {
+        if (!this.worker) return;
+        this.worker.postMessage({
+            type: 'TRAIN',
+            trackData: this.serializedTrack,
+            genomes: this.population, 
+            config: this.simConfig, // Pass latest sim config
+            carConfig: this.carConfig, // Pass latest car config
+            steps: 60 * 60 
+        });
+    }
+
+    private handleTrainingComplete(results: { fitness: number, checkpoints: number }[]) {
+        // 1. Assign Fitness
+        const fitnesses = results.map(r => r.fitness);
+        
+        // Stats
+        const bestGenFit = Math.max(...fitnesses);
+        const avgGenFit = fitnesses.reduce((a,b) => a+b, 0) / fitnesses.length;
+        this.generationCount++;
+
+        let newChampionFound = false;
+
+        if (bestGenFit > this.bestFitnessEver) {
+            this.bestFitnessEver = bestGenFit;
+            const bestIdx = fitnesses.indexOf(bestGenFit);
+            this.bestGenomeEver = this.population[bestIdx];
+            newChampionFound = true;
+        }
+
+        // 2. Evolve
+        this.population = this.ga.evolve(this.population, fitnesses);
+
+        // 3. Emit Stats
+        const stats = {
+            generation: this.generationCount,
+            best: this.bestFitnessEver,
+            average: avgGenFit
+        };
+        console.log(`[CarScene:${this.instanceId}] Generation ${this.generationCount} complete. Emitting stats:`, stats);
+        this.game.events.emit('generation-complete', stats);
+
+        // 4. Update Visual Sim ONLY if we found a better car
+        // If we didn't improve, we let the current one keep running (it will loop itself)
+        if (newChampionFound && this.bestGenomeEver) {
+            // Visual feedback of new record?
+            this.updateVisualSim(this.bestGenomeEver);
+        }
+
+        // 5. Loop Internal Training
+        this.startWorkerGeneration();
+    }
+
+    private updateVisualSim(bestGenome: Float32Array) {
+        // Restart sim with just 1 car (The Champion)
+        // We reuse the track data
+        this.sim = new CarSimulation(
+            this.serializedTrack, 
+            { ...this.simConfig, populationSize: 1 }, 
+            [bestGenome],
+            this.carConfig  // FIXED: Use current carConfig, not default
+        );
+    }
+
+    update(_time: number, _delta: number) {
+        // Step Simulation (Visual Only)
+        this.sim.update();
+
+        // Check if visual car crashed/finished
+        // If so, respawn it (Infinite Loop of Fame)
+        if (this.sim.isFinished()) {
+             if (this.bestGenomeEver) {
+                 this.updateVisualSim(this.bestGenomeEver);
+             } else {
+                 // Should imply we are in init state, just restart whatever we have
+                 // (or wait for gen 1)
+             }
+        }
+
+        // Render
+        this.graphics.clear();
+        this.drawTrack();
+        
+        this.sim.cars.forEach(car => {
+            this.drawCar(car);
+        });
+        
+        // Update stats text
+        const aliveCount = this.sim.cars.filter(c => !c.isDead).length;
+        this.statsText.setText(`Gen: ${this.generationCount} | Alive: ${aliveCount}/${this.sim.cars.length}`);
+        
+        if (this.sim.cars.length > 0) {
+            const bestCar = this.sim.cars[0];
+            this.fitnessText.setText(
+                `Fitness: ${bestCar.fitness.toFixed(2)} | Speed: ${bestCar.body.speed.toFixed(1)}`
+            );
+        }
+    }
+
+    private drawTrack() {
+        if (!this.serializedTrack) return;
+
+        // Draw Smooth Track Surface (Dark Grey Road)
+        this.graphics.fillStyle(0x333333);
+        const outer = this.serializedTrack.outerWalls;
+        const inner = this.serializedTrack.innerWalls;
+        
+        this.graphics.fillStyle(0x333333);
+        this.graphics.lineStyle(2, 0x555555); // Wall edges
+
+        for (let i = 0; i < outer.length - 1; i++) {
+            this.graphics.beginPath();
+            this.graphics.moveTo(inner[i].x, inner[i].y);
+            this.graphics.lineTo(outer[i].x, outer[i].y);
+            this.graphics.lineTo(outer[i+1].x, outer[i+1].y);
+            this.graphics.lineTo(inner[i+1].x, inner[i+1].y);
+            this.graphics.closePath();
+            this.graphics.fillPath();
+            this.graphics.strokePath();
+        }
+
+        // PHYSICS DEBUG: Draw actual physical bodies in Red/Blue to check alignment
+        this.sim.walls.forEach(wall => {
+            this.graphics.lineStyle(1, 0xff0000, 0.5); // Red Walls
+            this.graphics.beginPath();
+            const v = wall.vertices;
+            this.graphics.moveTo(v[0].x, v[0].y);
+            for(let k=1; k<v.length; k++) this.graphics.lineTo(v[k].x, v[k].y);
+            this.graphics.closePath();
+            this.graphics.strokePath();
+        });
+
+        this.sim.checkpoints.forEach((cp, i) => {
+             if (i===0) this.graphics.fillStyle(0x00ff00, 0.5); 
+             else this.graphics.fillStyle(0x00ffff, 0.3); // Cyan checkpoints
+             
+             this.graphics.beginPath();
+             const v = cp.vertices;
+             this.graphics.moveTo(v[0].x, v[0].y);
+             for(let k=1; k<v.length; k++) this.graphics.lineTo(v[k].x, v[k].y);
+             this.graphics.closePath();
+             this.graphics.fillPath();
+        });
+    }
+
+    shutdown() {
+        if (this.worker) this.worker.terminate();
+    }
+
+    private drawCar(car: Car) {
+        const p = car.body.position;
+        // Body
+        this.graphics.fillStyle(car.isDead ? 0x550000 : 0x00ff00);
+        
+        this.graphics.translateCanvas(p.x, p.y);
+        this.graphics.rotateCanvas(car.body.angle);
+        this.graphics.fillRect(-10, -20, 20, 40); // Approx size
+        this.graphics.rotateCanvas(-car.body.angle);
+        this.graphics.translateCanvas(-p.x, -p.y);
+
+        // Draw Rays with color-coding (Only for the best car in visual mode)
+        if (!car.isDead && this.sim.cars.length === 1) {
+             const start = car.body.position;
+             const angleBase = car.body.angle - Math.PI/2;
+             const raySpread = this.carConfig.raySpread;
+             const rayCount = this.carConfig.rayCount;
+             const rayLen = this.carConfig.rayLength;
+
+             // Use actual ray readings for color-coding
+             const readings = car.rayReadings;
+             const startRayAngle = angleBase - raySpread / 2;
+             const angleStep = raySpread / (rayCount - 1);
+
+             for(let i=0; i<rayCount; i++) {
+                 const angle = startRayAngle + i * angleStep;
+                 const reading = readings[i] || 0; // 0 = far, 1 = close
+                 
+                 // Color interpolation: Green (far) -> Yellow -> Red (close)
+                 const r = Math.floor(reading * 255);
+                 const g = Math.floor((1 - reading) * 255);
+                 const color = (r << 16) | (g << 8) | 0;
+                 
+                 this.graphics.lineStyle(2, color, 0.6);
+                 this.graphics.beginPath();
+                 this.graphics.moveTo(start.x, start.y);
+                 this.graphics.lineTo(
+                     start.x + Math.cos(angle) * rayLen,
+                     start.y + Math.sin(angle) * rayLen
+                 );
+                 this.graphics.strokePath();
+                 
+                 // Draw hit point if detected
+                 if (reading > 0.1) {
+                     const hitDist = (1 - reading) * rayLen;
+                     const hitX = start.x + Math.cos(angle) * hitDist;
+                     const hitY = start.y + Math.sin(angle) * hitDist;
+                     this.graphics.fillStyle(color, 0.8);
+                     this.graphics.fillCircle(hitX, hitY, 3);
+                 }
+             }
+             
+             // Draw fitness overlay
+             this.graphics.fillStyle(0xffffff);
+             this.graphics.generateTexture('text', 200, 50);
+        }
+    }
+}

src/apps/SelfDrivingCar/CarSimulation.ts

@@ -0,0 +1,203 @@
+// @ts-ignore
+import decomp from 'poly-decomp';
+
+// Register decomp for Worker
+import Matter from 'matter-js';
+import { DenseNetwork } from '../LunarLander/DenseNetwork';
+import { Car } from './Car';
+import type { SimulationConfig, SerializedTrackData, CarConfig } from './types';
+import { DEFAULT_SIM_CONFIG, DEFAULT_CAR_CONFIG } from './types';
+Matter.Common.setDecomp(decomp);
+
+// ... (other imports)
+
+export class CarSimulation {
+    public engine: Matter.Engine;
+    public cars: Car[] = [];
+    public walls: Matter.Body[] = [];
+    public checkpoints: Matter.Body[] = [];
+    
+    // Sim State
+    public generation: number = 1;
+    public frameValues: number = 0;
+
+    private config: SimulationConfig;
+    private trackData: SerializedTrackData;
+    private genomes: Float32Array[] = [];
+
+    private carConfig: CarConfig;
+
+    constructor(
+        trackData: SerializedTrackData, 
+        config: SimulationConfig = DEFAULT_SIM_CONFIG,
+        genomes: Float32Array[] = [],
+        carConfig: CarConfig = DEFAULT_CAR_CONFIG
+    ) {
+        this.trackData = trackData;
+        this.config = config;
+        this.genomes = genomes;
+        this.carConfig = carConfig;
+
+        // Create detached engine
+        this.engine = Matter.Engine.create();
+        this.engine.gravity.x = 0;
+        this.engine.gravity.y = 0; // Top down
+
+        // 1. Setup Track from Data
+        this.walls = trackData.walls.map(w => {
+            if (w.vertices && w.vertices.length > 0) {
+                 return Matter.Bodies.fromVertices(
+                    w.position.x, w.position.y,
+                    [w.vertices], 
+                    {
+                        isStatic: true,
+                        label: w.label,
+                        // Restore angle if needed, but fromVertices might bake it?
+                        // Actually Track.ts creates from global coords, so angle is implicit in vertices?
+                        // No, Matter bodies created from vertices are centered.
+                        // Track.ts: `Bodies.fromVertices(center, ..., [[v1, v2...]])`.
+                        // The vertices passed to Track.ts are GLOBAL.
+                        // Matter.fromVertices recalculates center and translates vertices to local.
+                        // Serialized vertices should be consistent with this.
+                        // We should pass vertices as they are.
+                    }
+                );
+            } else {
+                 return Matter.Bodies.rectangle(
+                    w.position.x, w.position.y, w.width, w.height, {
+                        isStatic: true,
+                        angle: w.angle,
+                        label: w.label
+                    }
+                );
+            }
+        });
+
+        this.checkpoints = trackData.checkpoints.map(cp => Matter.Bodies.rectangle(
+            cp.position.x, cp.position.y, cp.width, cp.height, {
+                isStatic: true,
+                isSensor: true,
+                angle: cp.angle,
+                label: cp.label
+            }
+        ));
+
+        Matter.World.add(this.engine.world, this.walls);
+        Matter.World.add(this.engine.world, this.checkpoints);
+
+        // Events
+        Matter.Events.on(this.engine, 'collisionStart', (e) => this.handleCollisions(e));
+
+        // 2. Spawn
+        this.spawnGeneration();
+    }
+
+    public update() {
+        // Step Physics directly
+        Matter.Engine.update(this.engine, 1000 / 60);
+
+        // Update Cars Logic
+        let aliveCount = 0;
+        this.cars.forEach(car => {
+            if (!car.isDead) {
+                car.update(this.walls, this.trackData.pathPoints);
+                aliveCount++;
+            }
+        });
+
+        if (aliveCount === 0) {
+            this.nextGeneration();
+        }
+    }
+
+    private spawnGeneration() {
+        // Cleanup bodies
+        this.cars.forEach(c => Matter.World.remove(this.engine.world, c.body));
+        this.cars = [];
+
+        // If we have genomes, use them. Otherwise mock.
+        const effectivePopSize = this.genomes.length > 0 ? this.genomes.length : this.config.populationSize;
+        const layerSizes = [11, 24, 16, 2]; // Input (7 rays + vel x/y + angular vel + speed), Hidden layers, Output (steer, gas)
+
+        for (let i = 0; i < effectivePopSize; i++) {
+            let network: DenseNetwork;
+
+            if (this.genomes.length > 0) {
+                 network = new DenseNetwork(layerSizes, this.genomes[i]);
+            } else {
+                 // Random new
+                 network = new DenseNetwork(layerSizes);
+            }
+
+            const car = new Car(
+                this.trackData.startPosition.x, 
+                this.trackData.startPosition.y,
+                network,
+                this.trackData.startAngle + Math.PI / 2,
+                this.carConfig
+            );
+
+            Matter.World.add(this.engine.world, car.body);
+            this.cars.push(car);
+        }
+    }
+
+    public onGenerationComplete?: (stats: { generation: number, best: number, average: number }) => void;
+
+    private nextGeneration() {
+        // In Worker Mode, we don't proceed to next generation automatically.
+        // We stop and return result.
+        // But for compatibility with internal loop if needed:
+        
+        // Return results via callback if set?
+        // Or just stop.
+    }
+
+    // Helper to get results
+    public getResults() {
+        return this.cars.map((c, i) => ({
+            fitness: c.fitness,
+            checkpoints: c.checkpointsPassed,
+            genome: this.genomes[i]
+        }));
+    }
+
+    public isFinished(): boolean {
+        return this.cars.every(c => c.isDead);
+    }
+
+    public run(steps: number) {
+        for(let i=0; i<steps; i++) {
+            this.update();
+            // Check if all dead to early exit?
+            if (this.cars.every(c => c.isDead)) break;
+        }
+    }
+
+    private handleCollisions(event: Matter.IEventCollision<Matter.Engine>) {
+        event.pairs.forEach(pair => {
+            const { bodyA, bodyB } = pair;
+            this.checkCarWallCollision(bodyA, bodyB);
+        });
+    }
+
+    private checkCarWallCollision(bodyA: Matter.Body, bodyB: Matter.Body) {
+        const carBody = bodyA.label === 'car' ? bodyA : (bodyB.label === 'car' ? bodyB : null);
+        const wallBody = bodyA.label === 'wall' ? bodyA : (bodyB.label === 'wall' ? bodyB : null);
+
+        if (carBody && wallBody) {
+            const car = this.cars.find(c => c.body === carBody);
+            if (car) car.kill();
+        }
+    }
+    public updateConfig(carConfig: CarConfig) {
+        this.cars.forEach(car => {
+            car.config = carConfig; // Update config ref
+            // Apply physics properties directly to body
+            Matter.Body.set(car.body, {
+                frictionAir: carConfig.frictionAir,
+                friction: carConfig.friction
+            });
+        });
+    }
+}

src/apps/SelfDrivingCar/ConfigPanel.tsx

@@ -0,0 +1,255 @@
+import { useState } from 'react';
+import type { CarConfig, SimulationConfig } from './types';
+import type { GAConfig } from './SimpleGA';
+
+interface ConfigPanelProps {
+    carConfig: CarConfig;
+    simConfig: SimulationConfig;
+    gaConfig: GAConfig;
+    onCarConfigChange: (config: CarConfig) => void;
+    onSimConfigChange: (config: SimulationConfig) => void;
+    onGAConfigChange: (config: GAConfig) => void;
+    onNewTrack: () => void;
+}
+
+export function ConfigPanel({ carConfig, simConfig, gaConfig, onCarConfigChange, onSimConfigChange, onGAConfigChange, onNewTrack }: ConfigPanelProps) {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const sliderStyle = { width: '100%', margin: '5px 0' };
+    const labelStyle = { display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: '#ccc' };
+    const groupStyle = { marginBottom: '15px', borderBottom: '1px solid #444', paddingBottom: '10px' };
+
+    const updateCar = (key: keyof CarConfig, value: number) => {
+        onCarConfigChange({ ...carConfig, [key]: value });
+    };
+
+    const updateSim = (key: keyof SimulationConfig, value: number) => {
+        onSimConfigChange({ ...simConfig, [key]: value });
+    };
+
+    const updateGA = (key: keyof GAConfig, value: number) => {
+        onGAConfigChange({ ...gaConfig, [key]: value });
+    };
+
+    return (
+        <div style={{
+            position: 'absolute',
+            top: 170,
+            right: 20,
+            width: isExpanded ? '250px' : 'auto',
+            background: 'rgba(0,0,0,0.8)',
+            padding: '10px',
+            borderRadius: '8px',
+            color: 'white',
+            backdropFilter: 'blur(5px)',
+            maxHeight: 'calc(100vh - 40px)',
+            overflowY: 'auto',
+            transition: 'width 0.2s'
+        }}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    borderBottom: isExpanded ? '1px solid #666' : 'none',
+                    paddingBottom: isExpanded ? '5px' : '0',
+                    marginBottom: isExpanded ? '10px' : '0'
+                }}
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <h3 style={{ margin: 0, fontSize: '14px' }}>Configuration</h3>
+                <span style={{ fontSize: '12px', marginLeft: '10px' }}>{isExpanded ? '▼' : '◀'}</span>
+            </div>
+
+            {isExpanded && (
+                <>
+                    <div style={groupStyle}>
+                        <h4 style={{ margin: '5px 0', color: '#4ecdc4' }}>Car Physics</h4>
+
+                        <div style={labelStyle}>
+                            <span>Max Speed</span>
+                            <span>{carConfig.maxSpeed.toFixed(1)}</span>
+                        </div>
+                        <input
+                            type="range" min="5" max="25" step="0.5"
+                            value={carConfig.maxSpeed}
+                            onChange={(e) => updateCar('maxSpeed', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Turn Speed</span>
+                            <span>{carConfig.turnSpeed.toFixed(2)}</span>
+                        </div>
+                        <input
+                            type="range" min="0.02" max="0.20" step="0.01"
+                            value={carConfig.turnSpeed}
+                            onChange={(e) => updateCar('turnSpeed', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Tire Grip (Lateral)</span>
+                            <span>{(carConfig.lateralFriction * 100).toFixed(0)}%</span>
+                        </div>
+                        <input
+                            type="range" min="0.5" max="0.99" step="0.01"
+                            value={carConfig.lateralFriction}
+                            onChange={(e) => updateCar('lateralFriction', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Air Resistance</span>
+                            <span>{(carConfig.frictionAir * 1000).toFixed(0)}</span>
+                        </div>
+                        <input
+                            type="range" min="0.00" max="0.20" step="0.005"
+                            value={carConfig.frictionAir}
+                            onChange={(e) => updateCar('frictionAir', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+                    </div>
+
+                    <div style={groupStyle}>
+                        <h4 style={{ margin: '5px 0', color: '#ffa726' }}>Sensors</h4>
+
+                        <div style={labelStyle}>
+                            <span>Ray Count</span>
+                            <span>{carConfig.rayCount}</span>
+                        </div>
+                        <input
+                            type="range" min="3" max="11" step="2"
+                            value={carConfig.rayCount}
+                            onChange={(e) => updateCar('rayCount', parseInt(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>FOV (Field of View)</span>
+                            <span>{(carConfig.raySpread * 180 / Math.PI).toFixed(0)}°</span>
+                        </div>
+                        <input
+                            type="range" min="60" max="180" step="10"
+                            value={carConfig.raySpread * 180 / Math.PI}
+                            onChange={(e) => updateCar('raySpread', parseFloat(e.target.value) * Math.PI / 180)}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Ray Length</span>
+                            <span>{carConfig.rayLength}</span>
+                        </div>
+                        <input
+                            type="range" min="50" max="300" step="10"
+                            value={carConfig.rayLength}
+                            onChange={(e) => updateCar('rayLength', parseInt(e.target.value))}
+                            style={sliderStyle}
+                        />
+                    </div>
+
+                    <div style={groupStyle}>
+                        <h4 style={{ margin: '5px 0', color: '#ff6b6b' }}>Track Gen</h4>
+
+                        <div style={labelStyle}>
+                            <span>Complexity (Wiggle)</span>
+                            <span>{(simConfig.trackComplexity * 100).toFixed(0)}%</span>
+                        </div>
+                        <input
+                            type="range" min="0.1" max="1.0" step="0.01"
+                            value={simConfig.trackComplexity}
+                            onChange={(e) => updateSim('trackComplexity', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Length (Nodes)</span>
+                            <span>{simConfig.trackLength}</span>
+                        </div>
+                        <input
+                            type="range" min="10" max="60" step="1"
+                            value={simConfig.trackLength}
+                            onChange={(e) => updateSim('trackLength', parseInt(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <button
+                            onClick={onNewTrack}
+                            style={{
+                                width: '100%',
+                                marginTop: '10px',
+                                background: '#ff6b6b',
+                                border: 'none',
+                                padding: '8px',
+                                borderRadius: '4px',
+                                cursor: 'pointer',
+                                fontWeight: 'bold',
+                                color: 'white'
+                            }}
+                        >
+                            Generate New Track
+                        </button>
+                    </div>
+
+                    <div style={groupStyle}>
+                        <h4 style={{ margin: '5px 0', color: '#a855f7' }}>Evolution (GA)</h4>
+
+                        <div style={labelStyle}>
+                            <span>Population Size</span>
+                            <span>{gaConfig.populationSize}</span>
+                        </div>
+                        <input
+                            type="range" min="10" max="200" step="10"
+                            value={gaConfig.populationSize}
+                            onChange={(e) => updateGA('populationSize', parseInt(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Mutation Rate</span>
+                            <span>{(gaConfig.mutationRate * 100).toFixed(1)}%</span>
+                        </div>
+                        <input
+                            type="range" min="0.01" max="0.20" step="0.01"
+                            value={gaConfig.mutationRate}
+                            onChange={(e) => updateGA('mutationRate', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Mutation Amount</span>
+                            <span>{gaConfig.mutationAmount.toFixed(2)}</span>
+                        </div>
+                        <input
+                            type="range" min="0.05" max="1.0" step="0.05"
+                            value={gaConfig.mutationAmount}
+                            onChange={(e) => updateGA('mutationAmount', parseFloat(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={labelStyle}>
+                            <span>Elitism (Keep Best)</span>
+                            <span>{gaConfig.elitism}</span>
+                        </div>
+                        <input
+                            type="range" min="0" max="20" step="1"
+                            value={gaConfig.elitism}
+                            onChange={(e) => updateGA('elitism', parseInt(e.target.value))}
+                            style={sliderStyle}
+                        />
+
+                        <div style={{ fontSize: '10px', color: '#f59e0b', marginTop: '8px', textAlign: 'center' }}>
+                            ⚠️ GA changes restart training
+                        </div>
+                    </div>
+
+                    <div style={{ fontSize: '10px', color: '#888', textAlign: 'center' }}>
+                        Physics apply immediately.<br />
+                        Track settings apply on generate.
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}

src/apps/SelfDrivingCar/FitnessGraph.tsx

@@ -0,0 +1,140 @@
+interface FitnessGraphProps {
+    history: Array<{ generation: number; best: number; average: number }>;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+}
+
+export default function FitnessGraph({ history, width = "100%", height = 150, className = "" }: FitnessGraphProps) {
+    if (history.length < 2) {
+        return (
+            <div style={{
+                width,
+                height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#666',
+                fontSize: '0.8rem',
+                background: 'rgba(0,0,0,0.2)',
+                borderRadius: '4px'
+            }}>
+                Waiting for data...
+            </div>
+        );
+    }
+
+    const PADDING = 20; // Internal padding
+    // Use internal coordinate system for viewBox
+    const VIEW_WIDTH = 500;
+    const VIEW_HEIGHT = 200;
+
+    const GRAPH_WIDTH = VIEW_WIDTH - PADDING * 2;
+    const GRAPH_HEIGHT = VIEW_HEIGHT - PADDING * 2;
+
+    // Find min/max for scaling
+    const maxFitness = Math.max(...history.map(h => h.best), 1);
+    const minGeneration = history[0].generation;
+    const maxGeneration = history[history.length - 1].generation;
+    const genRange = Math.max(maxGeneration - minGeneration, 1);
+
+    // Helper to scale points
+    const getX = (gen: number) => {
+        return PADDING + ((gen - minGeneration) / genRange) * GRAPH_WIDTH;
+    };
+
+    const getY = (fitness: number) => {
+        // Invert Y because SVG 0 is top
+        return PADDING + GRAPH_HEIGHT - (fitness / maxFitness) * GRAPH_HEIGHT;
+    };
+
+    // Generate path data
+    const bestPath = history.map((p, i) =>
+        `${i === 0 ? 'M' : 'L'} ${getX(p.generation)} ${getY(p.best)}`
+    ).join(' ');
+
+    const averagePath = history.map((p, i) =>
+        `${i === 0 ? 'M' : 'L'} ${getX(p.generation)} ${getY(p.average)}`
+    ).join(' ');
+
+
+    // Areas (closed paths for gradients)
+    const bestArea = bestPath + ` L ${getX(history[history.length - 1].generation)} ${GRAPH_HEIGHT + PADDING} L ${getX(minGeneration)} ${GRAPH_HEIGHT + PADDING} Z`;
+    const averageArea = averagePath + ` L ${getX(history[history.length - 1].generation)} ${GRAPH_HEIGHT + PADDING} L ${getX(minGeneration)} ${GRAPH_HEIGHT + PADDING} Z`;
+
+    return (
+        <div className={`fitness-graph-container ${className}`} style={{ width: '100%', height, position: 'relative' }}>
+            {/* Legend Overlay */}
+            <div style={{
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                display: 'flex',
+                gap: '12px',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                background: 'rgba(0,0,0,0.4)',
+                padding: '4px 8px',
+                borderRadius: '0 0 0 8px',
+                pointerEvents: 'none',
+                backdropFilter: 'blur(2px)'
+            }}>
+                <div style={{ color: '#4ecdc4', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div style={{ width: 8, height: 8, background: '#4ecdc4', borderRadius: '50%' }}></div>
+                    Best: {Math.round(history[history.length - 1].best)}
+                </div>
+                <div style={{ color: '#4a9eff', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div style={{ width: 8, height: 8, background: '#4a9eff', borderRadius: '50%' }}></div>
+                    Avg: {Math.round(history[history.length - 1].average)}
+                </div>
+            </div>
+
+            <svg
+                width="100%"
+                height="100%"
+                viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}
+                preserveAspectRatio="none"
+                style={{ overflow: 'visible' }}
+            >
+                <defs>
+                    <linearGradient id="gradBest" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="0%" stopColor="#4ecdc4" stopOpacity={0.4} />
+                        <stop offset="100%" stopColor="#4ecdc4" stopOpacity={0} />
+                    </linearGradient>
+                    <linearGradient id="gradAvg" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="0%" stopColor="#4a9eff" stopOpacity={0.3} />
+                        <stop offset="100%" stopColor="#4a9eff" stopOpacity={0} />
+                    </linearGradient>
+                </defs>
+
+                {/* Grid Lines (Horizontal) */}
+                {[0, 0.25, 0.5, 0.75, 1].map(ratio => {
+                    const y = PADDING + ratio * GRAPH_HEIGHT;
+                    return (
+                        <line
+                            key={ratio}
+                            x1={PADDING}
+                            y1={y}
+                            x2={VIEW_WIDTH - PADDING}
+                            y2={y}
+                            stroke="#333"
+                            strokeWidth="1"
+                            strokeDasharray="4 4"
+                            opacity="0.5"
+                        />
+                    );
+                })}
+
+                {/* Average Area */}
+                <path d={averageArea} fill="url(#gradAvg)" />
+                {/* Average Line */}
+                <path d={averagePath} fill="none" stroke="#4a9eff" strokeWidth="2" strokeOpacity="0.8" />
+
+                {/* Best Area */}
+                <path d={bestArea} fill="url(#gradBest)" />
+                {/* Best Line */}
+                <path d={bestPath} fill="none" stroke="#4ecdc4" strokeWidth="2.5" />
+            </svg>
+        </div>
+    );
+}

src/apps/SelfDrivingCar/SelfDrivingCarApp.tsx

@@ -0,0 +1,122 @@
+import { useRef, useState, useEffect } from 'react';
+import { CarScene } from './CarScene';
+import { ConfigPanel } from './ConfigPanel';
+import FitnessGraph from './FitnessGraph';
+import { DEFAULT_CAR_CONFIG, DEFAULT_SIM_CONFIG } from './types';
+import { DEFAULT_GA_CONFIG } from './SimpleGA';
+import type { CarConfig, SimulationConfig } from './types';
+import type { GAConfig } from './SimpleGA';
+
+export function SelfDrivingCarApp() {
+    const gameContainer = useRef<HTMLDivElement>(null);
+    const gameInstance = useRef<Phaser.Game | null>(null);
+    const [history, setHistory] = useState<Array<{ generation: number, best: number, average: number }>>([]);
+
+    // Config State
+    const [carConfig, setCarConfig] = useState<CarConfig>(DEFAULT_CAR_CONFIG);
+    const [simConfig, setSimConfig] = useState<SimulationConfig>(DEFAULT_SIM_CONFIG);
+    const [gaConfig, setGAConfig] = useState<GAConfig>(DEFAULT_GA_CONFIG);
+
+    useEffect(() => {
+        if (!gameContainer.current || gameInstance.current) return;
+
+        const config: Phaser.Types.Core.GameConfig = {
+            type: Phaser.AUTO,
+            parent: gameContainer.current,
+            width: gameContainer.current.clientWidth,
+            height: gameContainer.current.clientHeight,
+            backgroundColor: '#222222',
+            physics: {
+                default: 'matter',
+                matter: {
+                    gravity: { x: 0, y: 0 },
+                    debug: false
+                }
+            },
+            scene: [CarScene],
+            scale: {
+                mode: Phaser.Scale.RESIZE,
+                autoCenter: Phaser.Scale.CENTER_BOTH
+            }
+        };
+
+        const game = new Phaser.Game(config);
+        gameInstance.current = game;
+
+        // Init config in scene once ready?
+        // Actually Scene starts immediately. We can emit config update shortly after or pass safely.
+
+        // Listen for stats
+        const onGenerationComplete = (stats: { generation: number, best: number, average: number }) => {
+            setHistory(prev => {
+                const newHistory = [...prev, stats];
+                return newHistory;
+            });
+        };
+
+        game.events.on('generation-complete', onGenerationComplete);
+
+        return () => {
+            if (gameInstance.current) {
+                gameInstance.current.events.off('generation-complete', onGenerationComplete);
+                gameInstance.current.destroy(true);
+                gameInstance.current = null;
+            }
+        };
+    }, []);
+
+    // Sync Config to Scene
+    useEffect(() => {
+        if (gameInstance.current) {
+            gameInstance.current.events.emit('update-config', { car: carConfig, sim: simConfig, ga: gaConfig });
+        }
+    }, [carConfig, simConfig, gaConfig]);
+
+    const handleNewTrack = () => {
+        if (gameInstance.current) {
+            gameInstance.current.events.emit('new-track');
+            setHistory([]); // Clear fitness history on restart
+        }
+    };
+
+    // Restart training when GA config changes
+    const handleGAConfigChange = (newConfig: GAConfig) => {
+        setGAConfig(newConfig);
+        handleNewTrack(); // Restart training with new GA settings
+    };
+
+    return (
+        <div style={{ width: '100%', height: '100%', position: 'relative', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+            {/* Top Bar for Graph */}
+            <div style={{
+                height: '150px',
+                background: '#1a1a1a',
+                padding: '10px',
+                borderBottom: '1px solid #333',
+                zIndex: 10
+            }}>
+                <FitnessGraph history={history} height="100%" />
+            </div>
+
+            <div
+                style={{ flex: 1, position: 'relative', overflow: 'hidden' }}
+            >
+                <div
+                    ref={gameContainer}
+                    style={{ width: '100%', height: '100%' }}
+                />
+            </div>
+
+            {/* Config Panel */}
+            <ConfigPanel
+                carConfig={carConfig}
+                simConfig={simConfig}
+                gaConfig={gaConfig}
+                onCarConfigChange={setCarConfig}
+                onSimConfigChange={setSimConfig}
+                onGAConfigChange={handleGAConfigChange}
+                onNewTrack={handleNewTrack}
+            />
+        </div>
+    );
+}

src/apps/SelfDrivingCar/SimpleGA.ts

@@ -0,0 +1,117 @@
+
+import { DenseNetwork } from '../../apps/LunarLander/DenseNetwork';
+
+export interface GAConfig {
+    populationSize: number;
+    mutationRate: number;
+    mutationAmount: number;
+    elitism: number; // Number of best agents to keep unchanged
+}
+
+export const DEFAULT_GA_CONFIG: GAConfig = {
+    populationSize: 50,
+    mutationRate: 0.05,   // Reduced from 0.1
+    mutationAmount: 0.2,  // Reduced from 0.5
+    elitism: 5
+};
+
+export class SimpleGA {
+    private layerSizes: number[];
+    private config: GAConfig;
+
+    constructor(layerSizes: number[], config: GAConfig = DEFAULT_GA_CONFIG) {
+        this.layerSizes = layerSizes;
+        this.config = config;
+    }
+
+    createPopulation(): Float32Array[] {
+        const pop: Float32Array[] = [];
+        // Helper to get weight count
+        // We create a dummy network to calculate size easily, or duplicate logic.
+        // Duplicating logic is safer to avoid instantiation overhead if large.
+        // Logic from DenseNetwork: sum((full_in + 1) * out)
+        // Let's just instantiate one to be sure.
+
+        for (let i = 0; i < this.config.populationSize; i++) {
+            const dn = new DenseNetwork(this.layerSizes);
+            pop.push(dn.getWeights());
+        }
+        return pop;
+    }
+
+    evolve(currentPop: Float32Array[], fitnesses: number[]): Float32Array[] {
+        // 1. Sort by fitness (descending)
+        const indices = currentPop.map((_, i) => i).sort((a, b) => fitnesses[b] - fitnesses[a]);
+        
+        const nextPop: Float32Array[] = [];
+        const popSize = this.config.populationSize;
+
+        // 2. Elitism
+        for (let i = 0; i < this.config.elitism; i++) {
+            if (i < indices.length) {
+                // Keep exact copy
+                nextPop.push(new Float32Array(currentPop[indices[i]]));
+            }
+        }
+
+        // 3. Fill rest
+        while (nextPop.length < popSize) {
+            // Diversity Injection (Random Immigrants)
+            // Increased from 5% to 15% to combat stagnation
+            if (Math.random() < 0.15) {
+                const dn = new DenseNetwork(this.layerSizes);
+                nextPop.push(dn.getWeights());
+                continue;
+            }
+
+            // Tournament selection
+            const p1 = currentPop[this.tournamentSelect(indices, fitnesses)];
+            const p2 = currentPop[this.tournamentSelect(indices, fitnesses)];
+
+            // Crossover
+            const child = this.crossover(p1, p2);
+
+            // Mutation
+            this.mutate(child);
+
+            nextPop.push(child);
+        }
+
+        return nextPop;
+    }
+
+    private tournamentSelect(indices: number[], fitnesses: number[]): number {
+        const k = 3;
+        let bestIndex = -1;
+        let bestFitness = -Infinity;
+
+        for (let i = 0; i < k; i++) {
+            const r = Math.floor(Math.random() * indices.length);
+            const realIdx = indices[r];
+            if (fitnesses[realIdx] > bestFitness) {
+                bestFitness = fitnesses[realIdx];
+                bestIndex = realIdx;
+            }
+        }
+        return bestIndex;
+    }
+
+    private crossover(w1: Float32Array, w2: Float32Array): Float32Array {
+        const child = new Float32Array(w1.length);
+        // Uniform crossover? Or Split?
+        // Uniform is good for weights.
+        for (let i = 0; i < w1.length; i++) {
+            child[i] = Math.random() < 0.5 ? w1[i] : w2[i];
+        }
+        return child;
+    }
+
+    private mutate(weights: Float32Array) {
+        for (let i = 0; i < weights.length; i++) {
+            if (Math.random() < this.config.mutationRate) {
+                weights[i] += (Math.random() * 2 - 1) * this.config.mutationAmount;
+                // Clamp? Optional. Tanh handles range usually.
+            }
+        }
+    }
+}

src/apps/SelfDrivingCar/Track.ts

@@ -0,0 +1,215 @@
+import Phaser from 'phaser';
+import Matter from 'matter-js';
+// @ts-ignore
+import decomp from 'poly-decomp';
+
+(window as any).decomp = decomp; // Matter.js requires it on window or Common
+// Or better:
+Matter.Common.setDecomp(decomp);
+
+export interface TrackData {
+    innerWalls: Phaser.Math.Vector2[];
+    outerWalls: Phaser.Math.Vector2[];
+    pathPoints: Phaser.Math.Vector2[]; // For logic/fitness
+    centerLine: Phaser.Curves.Spline;
+    checkpoints: Matter.Body[];
+    walls: Matter.Body[];
+    startPosition: Phaser.Math.Vector2;
+    startAngle: number;
+}
+
+export class TrackGenerator {
+    private width: number;
+    private height: number;
+    private trackWidth: number;
+
+    constructor(width: number, height: number, trackWidth: number = 80) {
+        this.width = width;
+        this.height = height;
+        this.trackWidth = trackWidth;
+    }
+
+    public generate(complexity: number = 0.5, length: number = 25): TrackData {
+        // 1. Generate Control Points (Rough Circle with Noise)
+        const center = new Phaser.Math.Vector2(this.width / 2, this.height / 2);
+        const controlPoints: Phaser.Math.Vector2[] = [];
+        
+        const numPoints = length; 
+        const baseRadius = Math.min(this.width, this.height) * 0.35;
+        const radiusVariation = baseRadius * 0.3 * complexity; // Smooth variation
+
+        for (let i = 0; i < numPoints; i++) {
+            const angle = (i / numPoints) * Math.PI * 2;
+            const r = baseRadius + (Math.random() * 2 - 1) * radiusVariation;
+            
+            // Minimal angle noise to prevent loop-backs
+            const angleNoise = (Math.random() - 0.5) * (Math.PI * 2 / numPoints) * 0.1 * complexity;
+            
+            controlPoints.push(new Phaser.Math.Vector2(
+                center.x + Math.cos(angle + angleNoise) * r,
+                center.y + Math.sin(angle + angleNoise) * r
+            ));
+        }
+
+        // 2. Closed Loop Spline
+        // To make it loop smoothly, we copy the first 3 points to the end.
+        const closedPoints = [
+            ...controlPoints,
+            controlPoints[0],
+            controlPoints[1],
+            controlPoints[2]
+        ];
+
+        const spline = new Phaser.Curves.Spline(closedPoints);
+
+        // 3. Create Geometry
+        // Sample at fixed DISTANCE, not t-steps, for uniform width
+        return this.createGeometry(spline, controlPoints.length);
+    }
+
+    private createGeometry(spline: Phaser.Curves.Spline, originalCount: number): TrackData {
+        const resolutionPerSegment = 10; 
+        const points: Phaser.Math.Vector2[] = [];
+        
+        // ... (Sampling logic same) ...
+        const totalSegments = (originalCount + 3) - 1;
+        
+        for (let i = 0; i < originalCount; i++) {
+            const tStart = i / totalSegments;
+            const tEnd = (i + 1) / totalSegments;
+            for (let j = 0; j < resolutionPerSegment; j++) {
+                const t = tStart + (tEnd - tStart) * (j / resolutionPerSegment);
+                const p = spline.getPoint(t);
+                points.push(new Phaser.Math.Vector2(p.x, p.y));
+            }
+        }
+        
+        // Close Loop
+        const p0 = spline.getPoint(0);
+        points.push(new Phaser.Math.Vector2(p0.x, p0.y));
+
+        // CALCULATE VERTEX NORMALS
+        const normals: Phaser.Math.Vector2[] = [];
+        // First compute segment tangents/normals
+        const segmentNormals: Phaser.Math.Vector2[] = [];
+        for (let i = 0; i < points.length - 1; i++) {
+             const p1 = points[i];
+             const p2 = points[i+1];
+             const t = p2.clone().subtract(p1).normalize();
+             segmentNormals.push(new Phaser.Math.Vector2(-t.y, t.x));
+        }
+
+        // Now compute vertex normals (average of adjacent segments)
+        // For i=0 (Start), average(LastSeg, Seg0)
+        // For i=Last (End), average(LastSeg, Seg0) -> Should be same as i=0
+        
+        for (let i = 0; i < points.length; i++) {
+             // Prev Segment
+             let prevIdx = i - 1;
+             if (prevIdx < 0) prevIdx = segmentNormals.length - 1;
+             
+             // Next Segment (current i) generally, but for the last point, it's also the last segment?
+             // Actually: point i connects Seg i-1 and Seg i.
+             // point 0 connects Seg LAST and Seg 0.
+             // point N connects Seg N-1 and Seg 0? Yes if closed.
+             
+             let nextIdx = i;
+             if (nextIdx >= segmentNormals.length) nextIdx = 0; // Wrap valid? 
+             // Wait, points length is N+1. Segments length is N.
+             // points[0] joins Seg[N-1] and Seg[0].
+             // points[N] is same as points[0].
+             
+             // Let's just average generic
+             const n1 = segmentNormals[prevIdx];
+             const n2 = segmentNormals[nextIdx < segmentNormals.length ? nextIdx : 0];
+             
+             const avg = n1.clone().add(n2).normalize();
+             normals.push(avg);
+        }
+
+        const innerWalls: Phaser.Math.Vector2[] = [];
+        const outerWalls: Phaser.Math.Vector2[] = [];
+        const walls: Matter.Body[] = [];
+        const checkpoints: Matter.Body[] = [];
+
+        for (let i = 0; i < points.length - 1; i++) {
+            const p1 = points[i];
+            const p2 = points[i + 1];
+            
+            const n1 = normals[i];
+            const n2 = normals[i+1];
+
+            // Vertices using Smooth Normals
+            const outer1 = p1.clone().add(n1.clone().scale(this.trackWidth / 2));
+            const inner1 = p1.clone().add(n1.clone().scale(-this.trackWidth / 2));
+            const outer2 = p2.clone().add(n2.clone().scale(this.trackWidth / 2));
+            const inner2 = p2.clone().add(n2.clone().scale(-this.trackWidth / 2));
+
+            outerWalls.push(outer1);
+            innerWalls.push(inner1);
+
+            // Walls (Trapezoids)
+            const thickness = 20;
+            const outer1_T = outer1.clone().add(n1.clone().scale(thickness));
+            const outer2_T = outer2.clone().add(n2.clone().scale(thickness));
+            
+            const wallLeft = Matter.Bodies.fromVertices(
+                (outer1.x + outer2.x + outer1_T.x + outer2_T.x)/4,
+                (outer1.y + outer2.y + outer1_T.y + outer2_T.y)/4,
+                [[outer1, outer2, outer2_T, outer1_T]],
+                { isStatic: true, label: 'wall' }
+            );
+            if (wallLeft) walls.push(wallLeft);
+
+            const inner1_T = inner1.clone().add(n1.clone().scale(-thickness));
+            const inner2_T = inner2.clone().add(n2.clone().scale(-thickness));
+            
+            const wallRight = Matter.Bodies.fromVertices(
+                (inner1.x + inner2.x + inner1_T.x + inner2_T.x)/4,
+                (inner1.y + inner2.y + inner1_T.y + inner2_T.y)/4,
+                [[inner1, inner2, inner2_T, inner1_T]],
+                { isStatic: true, label: 'wall' }
+            );
+            if (wallRight) walls.push(wallRight);
+
+            // Circle Joints (Still useful for sharp corners, but smooth normals handle gaps)
+            if (true) {
+                 // Place at vertices (p1/p2)
+                 // We only need to place at p1 for each segment to cover the seam.
+                 // Actually with smooth normals, outer2(i-1) === outer1(i). Guaranteed.
+                 // So no gaps!
+                 // But Sharp Corners might still have physics issues if convex?
+                 // No, smooth normals rounds the corner.
+                 // We don't need joints anymore!
+            }
+
+            // ... Checkpoints logic ...
+            if (points.length > 50 && i % Math.floor(points.length / 10) === 0) {
+                 // Use segment tangent for angle
+                 const tangent = p2.clone().subtract(p1).normalize(); 
+                 const cpMid = p1.clone();
+                 checkpoints.push(Matter.Bodies.rectangle(cpMid.x, cpMid.y, 10, this.trackWidth, {
+                    isSensor: true,
+                    isStatic: true,
+                    angle: Math.atan2(tangent.y, tangent.x),
+                    label: `checkpoint_${checkpoints.length}`
+                }));
+            }
+        }
+        
+        // Start Position (First point)
+        const startP = points[0];
+        const startT = points[1].clone().subtract(points[0]).normalize();
+
+        return {
+            innerWalls,
+            outerWalls,
+            pathPoints: points, // These are the high-res samples
+            centerLine: spline,
+            checkpoints,
+            walls,
+            startPosition: startP,
+            startAngle: Math.atan2(startT.y, startT.x)
+        };
+    }
+}

src/apps/SelfDrivingCar/e2e_evolution.test.ts

@@ -0,0 +1,91 @@
+
+import { describe, expect, it } from 'bun:test';
+import { SimpleGA, DEFAULT_GA_CONFIG } from './SimpleGA';
+import { CarSimulation } from './CarSimulation';
+// import { TrackGenerator } from './Track';
+import { DEFAULT_SIM_CONFIG } from './types';
+import type { SerializedTrackData } from './types';
+
+describe('Car Evolution E2E', () => {
+
+    // Hardcoded simple square track (cw)
+    // 0,0 -> 800,0 -> 800,600 -> 0,600 -> 0,0 (Outline)
+    // 100,100 -> 700,100 -> 700,500 -> 100,500 -> 100,100 (Inner)
+    
+    const serializedTrack: SerializedTrackData = {
+        innerWalls: [
+            {x: 100, y: 100}, {x: 700, y: 100}, {x: 700, y: 500}, {x: 100, y: 500}
+        ],
+        outerWalls: [
+            {x: 0, y: 0}, {x: 800, y: 0}, {x: 800, y: 600}, {x: 0, y: 600}
+        ],
+        startPosition: { x: 400, y: 50 }, // Top middle
+        startAngle: 0, // Facing right?
+        walls: [
+             // Top wall
+             { position: {x: 400, y: 0}, width: 800, height: 20, angle: 0, label: 'wall', isSensor: false},
+             // Bottom wall
+             { position: {x: 400, y: 600}, width: 800, height: 20, angle: 0, label: 'wall', isSensor: false},
+             // Left wall
+             { position: {x: 0, y: 300}, width: 20, height: 600, angle: 0, label: 'wall', isSensor: false},
+             // Right wall
+             { position: {x: 800, y: 300}, width: 20, height: 600, angle: 0, label: 'wall', isSensor: false},
+             // Inner box (mocking just center block)
+             { position: {x: 400, y: 300}, width: 200, height: 200, angle: 0, label: 'wall', isSensor: false}
+        ],
+        checkpoints: [
+            // Start
+             { position: {x: 400, y: 50}, width: 200, height: 20, angle: 0, label: 'checkpoint_0', isSensor: true},
+             // Corner 1 (Right)
+             { position: {x: 750, y: 50}, width: 20, height: 200, angle: 0, label: 'checkpoint_1', isSensor: true},
+             // Corner 2 (Right Bottom)
+             { position: {x: 750, y: 550}, width: 20, height: 200, angle: 0, label: 'checkpoint_2', isSensor: true}
+        ]
+    };
+
+    it('should improve fitness over 50 generations', async () => {
+        const fs = require('fs');
+        const logFile = 'e2e_log.txt';
+        fs.writeFileSync(logFile, 'Starting Test...\n');
+
+        const log = (msg: string) => fs.appendFileSync(logFile, msg + '\n');
+
+        try {
+            const ga = new SimpleGA([6, 16, 12, 2], DEFAULT_GA_CONFIG);
+            let population = ga.createPopulation();
+            
+            let initialBest = 0;
+            let finalBest = 0;
+
+            log('Starting E2E Evolution Test (50 Gens)...');
+
+            for (let gen = 0; gen < 50; gen++) {
+                // Run Simulation
+                const sim = new CarSimulation(serializedTrack, DEFAULT_SIM_CONFIG, population);
+                sim.run(1000); 
+                
+                const results = sim.getResults();
+                const fitnesses = results.map(r => r.fitness);
+                
+                const best = Math.max(...fitnesses);
+                const avg = fitnesses.reduce((a,b)=>a+b, 0) / fitnesses.length;
+
+                if (gen === 0) initialBest = best;
+                if (gen === 49) finalBest = best;
+
+                if (gen % 10 === 0 || gen === 49) {
+                    log(`Gen ${gen}: Best: ${best.toFixed(2)}, Avg: ${avg.toFixed(2)}`);
+                }
+
+                population = ga.evolve(population, fitnesses);
+            }
+
+            log(`Evolution Result: ${initialBest.toFixed(2)} -> ${finalBest.toFixed(2)}`);
+
+            expect(finalBest).toBeGreaterThan(10); 
+        } catch (e) {
+            log(`ERROR: ${e}`);
+            throw e;
+        }
+    });
+});

src/apps/SelfDrivingCar/geom.ts

@@ -0,0 +1,32 @@
+
+export interface Point {
+    x: number;
+    y: number;
+}
+
+export function distance(p1: Point, p2: Point): number {
+    const dx = p1.x - p2.x;
+    const dy = p1.y - p2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+export function lineToLineIntersection(
+    x1: number, y1: number, x2: number, y2: number,
+    x3: number, y3: number, x4: number, y4: number
+): Point | null {
+    const denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+    
+    if (denom === 0) return null; // Parallel
+
+    const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom;
+    const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom;
+
+    if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
+        return {
+            x: x1 + ua * (x2 - x1),
+            y: y1 + ua * (y2 - y1)
+        };
+    }
+
+    return null;
+}

src/apps/SelfDrivingCar/training.worker.ts

@@ -0,0 +1,41 @@
+
+import { CarSimulation } from './CarSimulation';
+import type { SerializedTrackData, SimulationConfig, CarConfig } from './types';
+
+interface WorkerMessage {
+    type: 'TRAIN';
+    trackData: SerializedTrackData;
+    genomes: Float32Array[]; // Was Genome[]
+    config: SimulationConfig;
+    carConfig: CarConfig;
+    steps?: number;
+}
+
+self.onmessage = (e: MessageEvent<WorkerMessage>) => {
+    const { type, trackData, genomes, config, carConfig, steps = 3600 } = e.data; // 60s default
+
+    if (type === 'TRAIN') {
+        console.log(`Worker: Starting generation step. Pop: ${genomes.length || config.populationSize}, Steps: ${steps}`);
+        const sim = new CarSimulation(trackData, config, genomes, carConfig);
+        
+        const startTime = performance.now();
+        sim.run(steps);
+        const duration = performance.now() - startTime;
+        
+        console.log(`Worker: Generation complete in ${duration.toFixed(2)}ms. Cars alive: ${sim.cars.filter(c => !c.isDead).length}`);
+
+        const results = sim.getResults();
+
+        // Send back fitnesses
+        // We map results to simple array to reduce transfer cost, or send objects
+        const fitnessMap = results.map(r => ({
+            fitness: r.fitness,
+            checkpoints: r.checkpoints,
+            // We don't need to send genome back if Main thread kept it, 
+            // but sender might need to know which is which. 
+            // Order is preserved.
+        }));
+
+        self.postMessage({ type: 'TRAIN_COMPLETE', results: fitnessMap });
+    }
+};

src/apps/SelfDrivingCar/types.ts

@@ -0,0 +1,70 @@
+
+// import { Vector } from 'matter-js';
+
+export interface CarConfig {
+    width: number;
+    height: number;
+    maxSpeed: number;
+    turnSpeed: number;
+    rayCount: number;
+    rayLength: number;
+    raySpread: number; // FOV in radians
+    
+    // Physics
+    frictionAir: number; // 0.0-1.0 (Air Resistance/Drag)
+    friction: number; // 0.0-1.0 (Wall Friction)
+    lateralFriction: number; // 0.0-1.0 (Tire Grip. 1.0=Rails, 0.0=Ice)
+}
+
+export interface SimulationConfig {
+    populationSize: number;
+    mutationRate: number;
+    trackComplexity: number; // 0.0-1.0 (Noise/Wiggle)
+    trackLength: number; // 10-100 (Approx number of control points)
+}
+
+export interface SerializedVector { x: number, y: number }
+
+export interface SerializedBody {
+    position: SerializedVector;
+    angle: number;
+    width: number;
+    height: number;
+    label: string;
+    isSensor: boolean;
+    vertices?: SerializedVector[];
+}
+
+export interface SerializedTrackData {
+    innerWalls: SerializedVector[];
+    outerWalls: SerializedVector[];
+    pathPoints: SerializedVector[]; // Center line points for fitness tracking
+    walls: SerializedBody[];
+    checkpoints: SerializedBody[];
+    startPosition: SerializedVector;
+    startAngle: number;
+}
+
+// Physics Tunings Removed (Now in config)
+
+export const DEFAULT_CAR_CONFIG: CarConfig = {
+    width: 20,
+    height: 40,
+    maxSpeed: 12,
+    turnSpeed: 0.15, // Increased from 0.08 for sharper turning
+    rayCount: 7, // Increased from 5 for better peripheral vision
+    rayLength: 150,
+    raySpread: Math.PI * 5 / 6, // 150° FOV (increased from 90°)
+    
+    // Default Physics (Drifty)
+    frictionAir: 0.02,
+    friction: 0.1,
+    lateralFriction: 0.90
+};
+
+export const DEFAULT_SIM_CONFIG: SimulationConfig = {
+    populationSize: 50,
+    mutationRate: 0.1,
+    trackComplexity: 0.2,
+    trackLength: 25 // Default length
+};

src/apps/SnakeAI/BestSnakeDisplay.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import SnakeCanvas from './SnakeCanvas';
 import type { Network } from '../../lib/snakeAI/network';
 
@@ -8,6 +9,8 @@ interface BestSnakeDisplayProps {
 }
 
 export default function BestSnakeDisplay({ network, gridSize, fitness }: BestSnakeDisplayProps) {
+    const [playbackSpeed, setPlaybackSpeed] = useState(15);
+
     if (!network) return null;
 
     return (
@@ -19,6 +22,22 @@ export default function BestSnakeDisplay({ network, gridSize, fitness }: BestSna
                     <span className="value">{Math.round(fitness)}</span>
                 </div>
             </div>
+
+            <div className="playback-controls" style={{ padding: '0 10px 10px 10px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.8rem', color: '#888' }}>
+                    <span>Replay Speed:</span>
+                    <input
+                        type="range"
+                        min="1"
+                        max="200"
+                        value={playbackSpeed}
+                        onChange={(e) => setPlaybackSpeed(Number(e.target.value))}
+                        style={{ flex: 1, accentColor: '#4ecdc4' }}
+                    />
+                    <span style={{ minWidth: '3ch', textAlign: 'right' }}>{playbackSpeed}x</span>
+                </div>
+            </div>
+
             <div className="best-canvas-wrapper">
                 <SnakeCanvas
                     network={network}
@@ -26,6 +45,7 @@ export default function BestSnakeDisplay({ network, gridSize, fitness }: BestSna
                     size="large"
                     showGrid={true}
                     showStats={true}
+                    playbackSpeed={playbackSpeed}
                 />
             </div>
         </div>

src/apps/SnakeAI/FitnessGraph.tsx

@@ -0,0 +1,140 @@
+interface FitnessGraphProps {
+    history: Array<{ generation: number; best: number; average: number }>;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+}
+
+export default function FitnessGraph({ history, width = "100%", height = 150, className = "" }: FitnessGraphProps) {
+    if (history.length < 2) {
+        return (
+            <div style={{
+                width,
+                height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#666',
+                fontSize: '0.8rem',
+                background: 'rgba(0,0,0,0.2)',
+                borderRadius: '4px'
+            }}>
+                Waiting for data...
+            </div>
+        );
+    }
+
+    const PADDING = 20; // Internal padding
+    // Use internal coordinate system for viewBox
+    const VIEW_WIDTH = 500;
+    const VIEW_HEIGHT = 200;
+
+    const GRAPH_WIDTH = VIEW_WIDTH - PADDING * 2;
+    const GRAPH_HEIGHT = VIEW_HEIGHT - PADDING * 2;
+
+    // Find min/max for scaling
+    const maxFitness = Math.max(...history.map(h => h.best), 1);
+    const minGeneration = history[0].generation;
+    const maxGeneration = history[history.length - 1].generation;
+    const genRange = Math.max(maxGeneration - minGeneration, 1);
+
+    // Helper to scale points
+    const getX = (gen: number) => {
+        return PADDING + ((gen - minGeneration) / genRange) * GRAPH_WIDTH;
+    };
+
+    const getY = (fitness: number) => {
+        // Invert Y because SVG 0 is top
+        return PADDING + GRAPH_HEIGHT - (fitness / maxFitness) * GRAPH_HEIGHT;
+    };
+
+    // Generate path data
+    const bestPath = history.map((p, i) =>
+        `${i === 0 ? 'M' : 'L'} ${getX(p.generation)} ${getY(p.best)}`
+    ).join(' ');
+
+    const averagePath = history.map((p, i) =>
+        `${i === 0 ? 'M' : 'L'} ${getX(p.generation)} ${getY(p.average)}`
+    ).join(' ');
+
+
+    // Areas (closed paths for gradients)
+    const bestArea = bestPath + ` L ${getX(history[history.length - 1].generation)} ${GRAPH_HEIGHT + PADDING} L ${getX(minGeneration)} ${GRAPH_HEIGHT + PADDING} Z`;
+    const averageArea = averagePath + ` L ${getX(history[history.length - 1].generation)} ${GRAPH_HEIGHT + PADDING} L ${getX(minGeneration)} ${GRAPH_HEIGHT + PADDING} Z`;
+
+    return (
+        <div className={`fitness-graph-container ${className}`} style={{ width: '100%', height, position: 'relative' }}>
+            {/* Legend Overlay */}
+            <div style={{
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                display: 'flex',
+                gap: '12px',
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                background: 'rgba(0,0,0,0.4)',
+                padding: '4px 8px',
+                borderRadius: '0 0 0 8px',
+                pointerEvents: 'none',
+                backdropFilter: 'blur(2px)'
+            }}>
+                <div style={{ color: '#4ecdc4', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div style={{ width: 8, height: 8, background: '#4ecdc4', borderRadius: '50%' }}></div>
+                    Best: {Math.round(history[history.length - 1].best)}
+                </div>
+                <div style={{ color: '#4a9eff', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <div style={{ width: 8, height: 8, background: '#4a9eff', borderRadius: '50%' }}></div>
+                    Avg: {Math.round(history[history.length - 1].average)}
+                </div>
+            </div>
+
+            <svg
+                width="100%"
+                height="100%"
+                viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}
+                preserveAspectRatio="none"
+                style={{ overflow: 'visible' }}
+            >
+                <defs>
+                    <linearGradient id="gradBest" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="0%" stopColor="#4ecdc4" stopOpacity={0.4} />
+                        <stop offset="100%" stopColor="#4ecdc4" stopOpacity={0} />
+                    </linearGradient>
+                    <linearGradient id="gradAvg" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="0%" stopColor="#4a9eff" stopOpacity={0.3} />
+                        <stop offset="100%" stopColor="#4a9eff" stopOpacity={0} />
+                    </linearGradient>
+                </defs>
+
+                {/* Grid Lines (Horizontal) */}
+                {[0, 0.25, 0.5, 0.75, 1].map(ratio => {
+                    const y = PADDING + ratio * GRAPH_HEIGHT;
+                    return (
+                        <line
+                            key={ratio}
+                            x1={PADDING}
+                            y1={y}
+                            x2={VIEW_WIDTH - PADDING}
+                            y2={y}
+                            stroke="#333"
+                            strokeWidth="1"
+                            strokeDasharray="4 4"
+                            opacity="0.5"
+                        />
+                    );
+                })}
+
+                {/* Average Area */}
+                <path d={averageArea} fill="url(#gradAvg)" />
+                {/* Average Line */}
+                <path d={averagePath} fill="none" stroke="#4a9eff" strokeWidth="2" strokeOpacity="0.8" />
+
+                {/* Best Area */}
+                <path d={bestArea} fill="url(#gradBest)" />
+                {/* Best Line */}
+                <path d={bestPath} fill="none" stroke="#4ecdc4" strokeWidth="2.5" />
+            </svg>
+        </div>
+    );
+}

src/apps/SnakeAI/SnakeAI.css

@@ -328,9 +328,12 @@ input[type='range']::-webkit-slider-thumb:hover {
 }
 
 .progress-indicator {
-    background: #080808;
-    padding: 0.75rem;
-    border: 1px solid #222;
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid #3a3a4e;
+    display: flex;
+    flex-direction: column;
 }
 
 .progress-label {

src/apps/SnakeAI/SnakeAI.tsx

@@ -7,11 +7,6 @@ import Tips from './Tips';
 import BestSnakeDisplay from './BestSnakeDisplay';
 import {
     createPopulation,
-    evaluatePopulation,
-    evolveGeneration,
-    getBestIndividual,
-    getAverageFitness,
-    type Population,
 } from '../../lib/snakeAI/evolution';
 import type { EvolutionConfig } from '../../lib/snakeAI/types';
 import './SnakeAI.css';
@@ -24,6 +19,9 @@ const DEFAULT_CONFIG: EvolutionConfig = {
     maxGameSteps: 20000,
 };
 
+import { WorkerPool } from '../../lib/snakeAI/workerPool';
+import { evolveGeneration, updateBestStats, type Population } from '../../lib/snakeAI/evolution';
+
 export default function SnakeAI() {
     const [population, setPopulation] = useState<Population>(() =>
         createPopulation(DEFAULT_CONFIG)
@@ -32,29 +30,75 @@ export default function SnakeAI() {
     const [isRunning, setIsRunning] = useState(false);
     const [speed, setSpeed] = useState(5);
     const [gamesPlayed, setGamesPlayed] = useState(0);
+    const [fitnessHistory, setFitnessHistory] = useState<Array<{ generation: number, best: number, average: number }>>([]);
 
-    // Compute derived values from population
-    const bestIndividual = getBestIndividual(population);
-    const averageFitness = getAverageFitness(population);
+    // Keep a ref to population for the worker
+    const populationRef = useRef(population);
+    useEffect(() => {
+        populationRef.current = population;
+    }, [population]);
 
-    const animationFrameRef = useRef<number>();
+    const animationFrameRef = useRef<number>(0);
     const lastUpdateRef = useRef<number>(0);
 
-    const runGeneration = useCallback(() => {
-        setPopulation((prev) => {
+    // Compute derived values for display
+    const currentBestFitness = population.lastGenerationStats?.bestFitness || 0;
+    const currentAverageFitness = population.lastGenerationStats?.averageFitness || 0;
+
+    const workerPoolRef = useRef<WorkerPool | null>(null);
+    const isProcessingRef = useRef(false);
+
+    useEffect(() => {
+        // Initialize Worker Pool with logical cores (default)
+        workerPoolRef.current = new WorkerPool();
+
+        return () => {
+            workerPoolRef.current?.terminate();
+        };
+    }, []);
+
+    const runGeneration = useCallback(async (generations: number = 1) => {
+        if (isProcessingRef.current || !workerPoolRef.current) return;
+
+        isProcessingRef.current = true;
+        let currentPop = populationRef.current;
+
         try {
-                // Evaluate current generation
-                const evaluated = evaluatePopulation(prev, config);
+            for (let i = 0; i < generations; i++) {
+                // 1. Evaluate in parallel
+                let evaluatedPop = await workerPoolRef.current.evaluateParallel(currentPop, config);
 
-                // Evolve to next generation
-                const nextGen = evolveGeneration(evaluated, config);
+                // 1.5 Update Best Stats (Critical for UI)
+                evaluatedPop = updateBestStats(evaluatedPop);
 
-                return nextGen;
-            } catch (error) {
-                console.error("SnakeAI: Generation update failed", error);
-                return prev;
+                // 2. Evolve on main thread (fast)
+                currentPop = evolveGeneration(evaluatedPop, config);
             }
+
+            // Update state
+            populationRef.current = currentPop;
+            setPopulation(currentPop);
+
+            // Update history
+            if (currentPop.lastGenerationStats) {
+                setFitnessHistory(prev => {
+                    const newEntry = {
+                        generation: currentPop.generation - 1,
+                        best: currentPop.lastGenerationStats!.bestFitness,
+                        average: currentPop.lastGenerationStats!.averageFitness
+                    };
+                    const newHistory = [...prev, newEntry];
+                    if (newHistory.length > 100) return newHistory.slice(newHistory.length - 100);
+                    return newHistory;
                 });
+            }
+
+        } catch (err) {
+            console.error("Evolution error:", err);
+            setIsRunning(false);
+        } finally {
+            isProcessingRef.current = false;
+        }
     }, [config]);
 
     // Update stats when generation changes
@@ -93,7 +137,7 @@ export default function SnakeAI() {
                 }
 
                 if (elapsed >= updateInterval) {
-                    runGeneration();
+                    runGeneration(1);
                     lastUpdateRef.current = timestamp;
                 }
             } else {
@@ -102,9 +146,9 @@ export default function SnakeAI() {
                 // Speed 100 -> 10 gens per frame (~600 eps)
                 const gensPerFrame = Math.floor((speed - 10) / 10);
 
-                for (let i = 0; i < gensPerFrame; i++) {
-                    runGeneration();
-                }
+                // For turbo mode, we just fire once per frame (or whenever the worker is ready)
+                // asking for multiple generations
+                runGeneration(gensPerFrame);
                 lastUpdateRef.current = timestamp;
             }
 
@@ -122,7 +166,9 @@ export default function SnakeAI() {
 
     const handleReset = () => {
         setIsRunning(false);
-        setPopulation(createPopulation(config));
+        const newPop = createPopulation(config);
+        populationRef.current = newPop;
+        setPopulation(newPop);
         setGamesPlayed(0);
     };
 
@@ -162,10 +208,11 @@ export default function SnakeAI() {
 
                     <Stats
                         generation={population.generation}
-                        bestFitness={bestIndividual.fitness}
+                        bestFitness={currentBestFitness}
                         bestFitnessEver={population.bestFitnessEver}
-                        averageFitness={averageFitness}
+                        averageFitness={currentAverageFitness}
                         gamesPlayed={gamesPlayed}
+                        history={fitnessHistory}
                     />
 
                     <Tips />

src/apps/SnakeAI/SnakeCanvas.tsx

@@ -9,6 +9,7 @@ interface SnakeCanvasProps {
     showGrid?: boolean;
     size?: 'small' | 'normal' | 'large';
     showStats?: boolean; // Show score/length/steps even in small mode
+    playbackSpeed?: number; // Steps per second (default: 15)
 }
 
 const CELL_SIZES = {
@@ -19,11 +20,16 @@ const CELL_SIZES = {
 
 const CANVAS_PADDING = 10;
 
-export default function SnakeCanvas({ network, gridSize, showGrid = true, size = 'normal', showStats = false }: SnakeCanvasProps) {
+export default function SnakeCanvas({ network, gridSize, showGrid = true, size = 'normal', showStats = false, playbackSpeed = 15 }: SnakeCanvasProps) {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [currentGame, setCurrentGame] = useState<GameState | null>(null);
-    const animationFrameRef = useRef<number>();
+    const animationFrameRef = useRef<number>(0);
     const lastUpdateRef = useRef<number>(0);
+    const networkRef = useRef(network);
+
+    useEffect(() => {
+        networkRef.current = network;
+    }, [network]);
 
     const CELL_SIZE = CELL_SIZES[size];
 
@@ -32,13 +38,13 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
         if (network) {
             setCurrentGame(createGame(gridSize));
         }
-    }, [network, gridSize]);
+    }, [network?.id, gridSize]);
 
     // Animation loop to step through game
     useEffect(() => {
         if (!network || !currentGame) return;
 
-        const STEPS_PER_SECOND = 10; // Speed of game playback
+        const STEPS_PER_SECOND = playbackSpeed; // Use prop
         const UPDATE_INTERVAL = 1000 / STEPS_PER_SECOND;
 
         const animate = (timestamp: number) => {
@@ -54,8 +60,11 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
                     }
 
                     // Get neural network decision
+                    const currentNetwork = networkRef.current;
+                    if (!currentNetwork) return prevGame;
+
                     const inputs = getInputs(prevGame);
-                    const action = getAction(network, inputs);
+                    const action = getAction(currentNetwork, inputs);
 
                     // Step the game forward
                     return step(prevGame, action);
@@ -74,7 +83,7 @@ export default function SnakeCanvas({ network, gridSize, showGrid = true, size =
                 cancelAnimationFrame(animationFrameRef.current);
             }
         };
-    }, [network, currentGame, gridSize]);
+    }, [network?.id, !!currentGame, gridSize, playbackSpeed]); // Added playbackSpeed dependency
 
     // Set canvas size once when props change (not on every render)
     useEffect(() => {

src/apps/SnakeAI/Stats.tsx

@@ -1,9 +1,12 @@
+import FitnessGraph from './FitnessGraph';
+
 interface StatsProps {
     generation: number;
     bestFitness: number;
     bestFitnessEver: number;
     averageFitness: number;
     gamesPlayed: number;
+    history: Array<{ generation: number; best: number; average: number }>;
 }
 
 export default function Stats({
@@ -12,6 +15,7 @@ export default function Stats({
     bestFitnessEver,
     averageFitness,
     gamesPlayed,
+    history,
 }: StatsProps) {
     return (
         <div className="stats-panel">
@@ -45,17 +49,10 @@ export default function Stats({
             </div>
 
             <div className="progress-indicator">
-                <div className="progress-label">
-                    Improvement: {bestFitnessEver > 0 ? ((bestFitness / bestFitnessEver) * 100).toFixed(1) : 0}%
-                </div>
-                <div className="progress-bar">
-                    <div
-                        className="progress-fill"
-                        style={{
-                            width: `${bestFitnessEver > 0 ? Math.min(100, (bestFitness / bestFitnessEver) * 100) : 0}%`,
-                        }}
-                    />
+                <div className="progress-label" style={{ marginBottom: '0.5rem' }}>
+                    Fitness History
                 </div>
+                <FitnessGraph history={history} height={120} />
             </div>
         </div>
     );

src/components/Sidebar.css

@@ -1,92 +1,121 @@
 .sidebar {
-  width: 280px;
-  height: 100vh;
-  background: var(--bg-darker);
-  border-right: 1px solid var(--border-color);
+  width: 100%;
+  height: 72px;
+  background: var(--glass-bg);
+  backdrop-filter: var(--backdrop-blur);
+  -webkit-backdrop-filter: var(--backdrop-blur);
+  border-bottom: var(--glass-border);
   display: flex;
-  flex-direction: column;
-  padding: 2rem 0;
-  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
+  align-items: center;
+  padding: 0 2rem;
+  box-shadow: var(--glass-shadow);
+  z-index: 100;
+  flex-shrink: 0;
+  position: relative;
+}
+
+/* Add a subtle top highlight line */
+.sidebar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 }
 
 .sidebar-header {
-  padding: 0 1.5rem 2rem;
-  border-bottom: 1px solid var(--border-color);
+  padding: 0;
+  margin-right: 4rem;
+  border: none;
+  display: flex;
+  align-items: center;
 }
 
 .sidebar-logo {
   font-size: 1.75rem;
   font-weight: 700;
   margin: 0;
-  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-}
-
-.sidebar-tagline {
-  margin: 0.25rem 0 0;
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.5);
-  font-weight: 300;
+  letter-spacing: -0.02em;
+  text-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
 }
 
 .sidebar-nav {
   flex: 1;
-  padding: 2rem 1rem;
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.75rem;
+  height: 100%;
+  overflow-x: auto;
+  /* Hide scrollbar */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.sidebar-nav::-webkit-scrollbar {
+  display: none;
 }
 
 .nav-item {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.25rem;
+  justify-content: center;
+  padding: 0.6rem 1.25rem;
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  color: rgba(255, 255, 255, 0.7);
+  border: 1px solid transparent;
+  border-radius: 99px;
+  /* Pill shape */
+  color: var(--text-secondary);
   cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 1rem;
-  text-align: left;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 0.95rem;
+  text-decoration: none;
+  white-space: nowrap;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  position: relative;
+  overflow: hidden;
 }
 
+/* Hover effects */
 .nav-item:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: var(--primary);
-  color: rgba(255, 255, 255, 0.9);
-  transform: translateX(4px);
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.03);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
 }
 
+/* Active State */
 .nav-item.active {
-  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
-  border-color: var(--primary);
-  color: #fff;
-  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.08);
+  /* Lighter bg for active */
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1);
 }
 
-.nav-icon {
-  font-size: 1.5rem;
-  line-height: 1;
+/* Adding a glow dot for active items */
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  height: 3px;
+  background: var(--primary);
+  border-radius: 4px 4px 0 0;
+  box-shadow: 0 -2px 8px var(--primary-glow);
 }
 
 .nav-name {
-  font-weight: 500;
-}
-
-.sidebar-footer {
-  padding: 0 1.5rem;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  padding-top: 1.5rem;
-}
-
-.footer-text {
-  margin: 0;
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-align: center;
-  font-style: italic;
+  position: relative;
+  z-index: 2;
 }

src/components/Sidebar.tsx

@@ -1,13 +1,12 @@
 import { NavLink } from 'react-router-dom';
 import './Sidebar.css';
 
-export type AppId = 'image-approx' | 'snake-ai';
+export type AppId = 'image-approx' | 'snake-ai' | 'rogue-gen' | 'neat-arena' | 'lunar-lander' | 'self-driving-car' | 'bridge-builder' | 'asteroids-ai';
 
 export interface AppInfo {
   id: AppId;
   path: string;
   name: string;
-  icon: string;
   description: string;
 }
 
@@ -16,24 +15,57 @@ export const APPS: AppInfo[] = [
     id: 'image-approx',
     path: '/image-approx',
     name: 'Image Approximation',
-    icon: '🎨',
     description: 'Evolve triangles to approximate images',
   },
   {
     id: 'snake-ai',
     path: '/snake-ai',
     name: 'Neural Network Snake',
-    icon: '🐍',
     description: 'Evolve neural networks to play Snake',
   },
+  {
+    id: 'rogue-gen',
+    path: '/rogue-gen',
+    name: 'Rogue Map Gen',
+    description: 'Evolve cellular automata for dungeon generation',
+  },
+  {
+    id: 'neat-arena',
+    path: '/neat-arena',
+    name: 'NEAT Arena',
+    description: 'Evolve AI agents to fight in a top-down shooter',
+  },
+  {
+    id: 'lunar-lander',
+    path: '/lunar-lander',
+    name: 'Lunar Lander',
+    description: 'Evolve a spaceship to land safely',
+  },
+  {
+    id: 'self-driving-car',
+    path: '/self-driving-car',
+    name: 'Self-Driving Car',
+    description: 'Evolve cars to navigate a track',
+  },
+  {
+    id: 'bridge-builder',
+    path: '/bridge-builder',
+    name: 'Bridge Builder',
+    description: 'Evolve bridge structures with stress visualization',
+  },
+  {
+    id: 'asteroids-ai',
+    path: '/asteroids-ai',
+    name: 'Asteroids AI',
+    description: 'Evolve strategies to shoot asteroids and avoid collisions',
+  },
 ];
 
 export default function Sidebar() {
   return (
-    <aside className="sidebar">
+    <header className="sidebar">
       <div className="sidebar-header">
         <h1 className="sidebar-logo">🧬 Evolution</h1>
-        <p className="sidebar-tagline">Mini-Apps</p>
       </div>
 
       <nav className="sidebar-nav">
@@ -44,15 +76,10 @@ export default function Sidebar() {
             className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
             title={app.description}
           >
-            <span className="nav-icon">{app.icon}</span>
             <span className="nav-name">{app.name}</span>
           </NavLink>
         ))}
       </nav>
-
-      <div className="sidebar-footer">
-        <p className="footer-text">Select an app to begin</p>
-      </div>
-    </aside>
+    </header>
   );
 }

src/index.css

@@ -1,30 +1,50 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
 
 :root {
-  /* Color palette - lighter, less dark */
-  --primary: #6366f1;
-  --primary-dark: #4f46e5;
-  --primary-light: #818cf8;
-  --accent: #8b5cf6;
-  --bg-dark: #1a1a2e;
-  --bg-darker: #0f1729;
-  --bg-card: rgba(255, 255, 255, 0.05);
-  --text-primary: rgba(255, 255, 255, 0.95);
-  --text-secondary: rgba(255, 255, 255, 0.7);
-  --text-muted: rgba(255, 255, 255, 0.5);
-  --border-color: rgba(255, 255, 255, 0.12);
+  /* Premium Dark Sci-Fi Palette */
+  --bg-dark: #030305;
+  /* Deepest void black */
+  --bg-darker: #000000;
+  /* Pure black for contrast */
+  --bg-card: rgba(20, 20, 35, 0.4);
+  /* Glassy panel background */
+  --bg-card-hover: rgba(30, 30, 50, 0.6);
+
+  /* Accents */
+  --primary: #7c3aed;
+  /* Electric Violet */
+  --primary-glow: rgba(124, 58, 237, 0.5);
+  --accent: #06b6d4;
+  /* Cyan/Teal */
+  --accent-glow: rgba(6, 182, 212, 0.5);
+  --success: #10b981;
+  /* Emerald */
+  --danger: #ef4444;
+  /* Red */
+
+  /* Text elements */
+  --text-primary: #f8fafc;
+  /* Bright white */
+  --text-secondary: #94a3b8;
+  /* Blue-grey */
+  --text-muted: #475569;
+  /* Darker grey */
+
+  /* Structural */
+  --border-color: rgba(255, 255, 255, 0.08);
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+
+  /* Glassmorphism */
+  --glass-bg: rgba(10, 10, 15, 0.75);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.05);
+  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
+  --backdrop-blur: blur(12px);
 
   /* Typography */
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  line-height: 1.6;
-  font-weight: 400;
-  color: var(--text-primary);
-
-  /* Rendering */
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  --font-main: 'Outfit', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
 }
 
 * {
@@ -35,9 +55,16 @@
 
 body {
   margin: 0;
-  background: var(--bg-dark);
+  background-color: var(--bg-dark);
+  background-image:
+    radial-gradient(circle at 15% 50%, rgba(124, 58, 237, 0.08), transparent 25%),
+    radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.08), transparent 25%);
   color: var(--text-primary);
+  font-family: var(--font-main);
+  line-height: 1.6;
   overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 #root {
@@ -45,11 +72,45 @@ body {
   height: 100vh;
 }
 
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-darker);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
 button {
   font-family: inherit;
   cursor: pointer;
 }
 
-input {
+input,
+select,
+textarea {
   font-family: inherit;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
 }

src/lib/neatArena/aim_mechanics.test.ts

@@ -0,0 +1,100 @@
+
+import { describe, expect, test } from 'bun:test';
+import { createSimulation, stepSimulation } from './simulation';
+import { SIMULATION_CONFIG } from './types';
+import { generateObservation, observationToInputs } from './sensors';
+
+// Mock Genome that implements Perfect Tracking Logic
+const perfectTrackerGenome = {
+    id: 9999,
+    nodes: [],
+    connections: [],
+    fitness: 0
+};
+
+// Strafer Bot (Same as in selfPlay.ts)
+const straferGenome = {
+    id: -3,
+    nodes: [],
+    connections: [],
+    fitness: 0
+};
+
+describe('Aim Mechanics Verification', () => {
+    test('Perfect Tracker should defeat Strafer', () => {
+        // Setup Simulation
+        const sim = createSimulation(12345, 2); // Pair 2 (Strafer pair)
+        
+        let trackerHits = 0;
+        let straferHits = 0;
+        
+        // Run Match
+        let currentSim = sim;
+        const maxTicks = 300;
+        
+        for (let t = 0; t < maxTicks; t++) {
+            const obsTracker = generateObservation(0, currentSim);
+            
+            // --- PERFECT LOGIC ---
+            // 1. Get Target Relative Angle from Sensor (Index 54 in 0-based array of 56 inputs)
+            // But we can just read it from observation directly
+            const targetAngle = obsTracker.targetRelativeAngle; // [-1, 1]
+            const targetVisible = obsTracker.targetVisible;
+            
+            // 2. Control Logic
+            // If angle > 0 (Left), Turn Left (-1). If angle < 0 (Right), Turn Right (1).
+            // P-Controller: turn = angle * K
+            const K = 5.0; // Strong gain
+            let turn = -targetAngle * K; // Note: Sign depends on coordinate system. 
+            // In setup: Angle is Aim - Target.
+            // If Target is to Left (Positive relative?), we need to turn Left (Positive/Negative?)
+            
+            // Let's verify sign: 
+            // If target is at angle 0.1 (Left), we want to Increase Aim Angle?
+            // Usually turn +1 adds to angle.
+            // So turn = +1 * K.
+            
+            // Note: targetRelativeAngle = (Target - Aim) / PI.
+            // If Target > Aim (Positive), we need to Turn Positive.
+            turn = targetAngle * 20.0; // Max turn
+            
+            // Clamp
+            if (turn > 1) turn = 1;
+            if (turn < -1) turn = -1;
+            
+            // Shoot if locked on
+            const shoot = (Math.abs(targetAngle) < 0.05 && targetVisible > 0.5) ? 1.0 : 0.0;
+            
+            const actionTracker = {
+                moveX: 0,
+                moveY: 0, 
+                turn: turn,
+                shoot: shoot
+            };
+            
+            // --- STRAFER LOGIC ---
+            const straferMoveY = Math.sin(t * 0.2);
+            const actionStrafer = {
+                moveX: 0,
+                moveY: straferMoveY,
+                turn: 0,
+                shoot: 0 // Strafer is passive to isolate aim test
+            };
+            
+            // Step
+            currentSim = stepSimulation(currentSim, [actionTracker, actionStrafer]);
+            
+            // Count hits
+            if (currentSim.agents[1].hits > trackerHits) {
+                 trackerHits = currentSim.agents[1].hits; // Agent 1 is Strafer
+                 // console.log(`Hit at tick ${t}! Total: ${trackerHits}`);
+            }
+        }
+        
+        console.log(`Perfect Tracker Result: ${trackerHits} Hits on Strafer in ${maxTicks} ticks.`);
+        
+        // Assert Feasibility
+        // We expect at least 3-5 hits to prove it's possible.
+        expect(trackerHits).toBeGreaterThan(3);
+    });
+});

src/lib/neatArena/arenaScene.ts

@@ -0,0 +1,184 @@
+import Phaser from 'phaser';
+import type { SimulationState } from './types';
+import { SIMULATION_CONFIG } from './types';
+
+/**
+ * Phaser scene for rendering the NEAT Arena.
+ * 
+ * This scene is ONLY for visualization - the actual simulation runs separately.
+ * The scene receives simulation state updates and renders them.
+ */
+export class ArenaScene extends Phaser.Scene {
+    private simulationState: SimulationState | null = null;
+    private showRays: boolean = true;
+    
+    // Graphics objects
+    private wallGraphics!: Phaser.GameObjects.Graphics;
+    private agentGraphics!: Phaser.GameObjects.Graphics;
+    private bulletGraphics!: Phaser.GameObjects.Graphics;
+    private rayGraphics!: Phaser.GameObjects.Graphics;
+    
+    constructor() {
+        super({ key: 'ArenaScene' });
+    }
+    
+    create() {
+        // Create graphics layers (back to front)
+        this.wallGraphics = this.add.graphics();
+        this.rayGraphics = this.add.graphics();
+        this.bulletGraphics = this.add.graphics();
+        this.agentGraphics = this.add.graphics();
+        
+        // Set background
+        this.cameras.main.setBackgroundColor(0x1a1a2e);
+    }
+    
+    update() {
+        if (!this.simulationState) return;
+        
+        this.render();
+    }
+    
+    /**
+     * Update the simulation state to render
+     */
+    public updateSimulation(state: SimulationState) {
+        this.simulationState = state;
+    }
+    
+    /**
+     * Toggle ray visualization
+     */
+    public setShowRays(show: boolean) {
+        this.showRays = show;
+    }
+    
+    /**
+     * Render the current simulation state
+     */
+    private render() {
+        if (!this.simulationState) return;
+        
+        // Clear graphics
+        this.wallGraphics.clear();
+        this.agentGraphics.clear();
+        this.bulletGraphics.clear();
+        this.rayGraphics.clear();
+        
+        // Render walls
+        this.renderWalls();
+        
+        // Render rays (if enabled)
+        if (this.showRays) {
+            this.renderRays();
+        }
+        
+        // Render bullets
+        this.renderBullets();
+        
+        // Render agents
+        this.renderAgents();
+    }
+    
+    private renderWalls() {
+        if (!this.simulationState) return;
+        
+        const { walls } = this.simulationState.map;
+        
+        this.wallGraphics.fillStyle(0x4a5568, 1);
+        this.wallGraphics.lineStyle(2, 0x64748b, 1);
+        
+        for (const wall of walls) {
+            const { minX, minY, maxX, maxY } = wall.rect;
+            this.wallGraphics.fillRect(minX, minY, maxX - minX, maxY - minY);
+            this.wallGraphics.strokeRect(minX, minY, maxX - minX, maxY - minY);
+        }
+    }
+    
+    private renderAgents() {
+        if (!this.simulationState) return;
+        
+        const agents = this.simulationState.agents;
+        const colors = [0x667eea, 0xf093fb]; // Purple and pink
+        
+        for (let i = 0; i < agents.length; i++) {
+            const agent = agents[i];
+            const color = colors[i];
+            
+            // Agent body (circle)
+            if (agent.invulnTicks > 0) {
+                // Flash when invulnerable
+                const alpha = agent.invulnTicks % 4 < 2 ? 0.5 : 1;
+                this.agentGraphics.fillStyle(color, alpha);
+            } else {
+                this.agentGraphics.fillStyle(color, 1);
+            }
+            
+            this.agentGraphics.fillCircle(agent.position.x, agent.position.y, agent.radius);
+            
+            // Border
+            this.agentGraphics.lineStyle(2, 0xffffff, 0.8);
+            this.agentGraphics.strokeCircle(agent.position.x, agent.position.y, agent.radius);
+            
+            // Aim direction indicator
+            const aimLength = 20;
+            const aimEndX = agent.position.x + Math.cos(agent.aimAngle) * aimLength;
+            const aimEndY = agent.position.y + Math.sin(agent.aimAngle) * aimLength;
+            
+            this.agentGraphics.lineStyle(3, 0xffffff, 1);
+            this.agentGraphics.lineBetween(agent.position.x, agent.position.y, aimEndX, aimEndY);
+        }
+    }
+    
+    private renderBullets() {
+        if (!this.simulationState) return;
+        
+        this.bulletGraphics.fillStyle(0xfbbf24, 1); // Yellow
+        this.bulletGraphics.lineStyle(1, 0xffffff, 0.8);
+        
+        for (const bullet of this.simulationState.bullets) {
+            this.bulletGraphics.fillCircle(bullet.position.x, bullet.position.y, 3);
+            this.bulletGraphics.strokeCircle(bullet.position.x, bullet.position.y, 3);
+        }
+    }
+    
+    private renderRays() {
+        if (!this.simulationState) return;
+        
+        // TODO: This will be implemented when we integrate sensor visualization
+        // For now, rays will be rendered when we have a specific agent's observation to display
+    }
+}
+
+/**
+ * Create and initialize a Phaser game instance for the arena
+ */
+export function createArenaViewer(parentElement: HTMLElement): Phaser.Game {
+    const config: Phaser.Types.Core.GameConfig = {
+        type: Phaser.AUTO,
+        width: SIMULATION_CONFIG.WORLD_SIZE,
+        height: SIMULATION_CONFIG.WORLD_SIZE,
+        parent: parentElement,
+        backgroundColor: '#1a1a2e',
+        scene: ArenaScene,
+        physics: {
+            default: 'arcade',
+            arcade: {
+                debug: false,
+            },
+        },
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_BOTH,
+        },
+    };
+    
+    return new Phaser.Game(config);
+}
+
+/**
+ * Get the scene instance from a Phaser game
+ */
+export function getArenaScene(game: Phaser.Game): ArenaScene {
+    return game.scene.getScene('ArenaScene') as ArenaScene;
+}

src/lib/neatArena/baselineBots.ts

@@ -0,0 +1,60 @@
+import type { AgentAction } from './types';
+import { SeededRandom } from './utils';
+
+/**
+ * Baseline scripted bots for testing and benchmarking.
+ * 
+ * These provide simple strategies that can be used to:
+ * - Test the simulation mechanics
+ * - Provide initial training opponents
+ * - Benchmark evolved agents
+ */
+
+/**
+ * Random bot - takes random actions
+ */
+export function randomBotAction(rng: SeededRandom): AgentAction {
+    return {
+        moveX: rng.nextFloat(-1, 1),
+        moveY: rng.nextFloat(-1, 1),
+        turn: rng.nextFloat(-1, 1),
+        shoot: rng.next(),
+    };
+}
+
+/**
+ * Idle bot - does nothing
+ */
+export function idleBotAction(): AgentAction {
+    return {
+        moveX: 0,
+        moveY: 0,
+        turn: 0,
+        shoot: 0,
+    };
+}
+
+/**
+ * Spinner bot - spins in place and shoots
+ */
+export function spinnerBotAction(): AgentAction {
+    return {
+        moveX: 0,
+        moveY: 0,
+        turn: 1,
+        shoot: 1,
+    };
+}
+
+/**
+ * Circle strafe bot - moves in circles and shoots
+ */
+export function circleStrafeBotAction(tick: number): AgentAction {
+    const angle = (tick / 20) * Math.PI * 2;
+    return {
+        moveX: Math.cos(angle),
+        moveY: Math.sin(angle),
+        turn: 0.3,
+        shoot: tick % 15 === 0 ? 1 : 0,
+    };
+}

src/lib/neatArena/bench_learning.test.ts

@@ -0,0 +1,46 @@
+
+import { test, expect } from 'bun:test';
+import { createPopulation, evolveGeneration, getPopulationStats } from './evolution';
+import { evaluatePopulation } from './selfPlay';
+import { DEFAULT_EVOLUTION_CONFIG } from './evolution';
+
+test('Benchmark: Learning Performance over 50 generations', async () => {
+    // 1. Setup
+    const config = { ...DEFAULT_EVOLUTION_CONFIG };
+    let population = createPopulation(config);
+    
+    console.log('Starting Benchmark: 50 Generations');
+    console.log('Generation, Species, MaxFitness, AvgFitness');
+    
+    const history: {gen: number, max: number}[] = [];
+
+    // 2. Loop
+    const matchConfig = { matchesPerGenome: 2, mapSeed: 12345, maxTicks: 300 }; // Faster for benchmark
+    
+    for (let i = 0; i < 100; i++) {
+        // Evaluate (Self-Play)
+        population = evaluatePopulation(population, matchConfig);
+        
+        const stats = getPopulationStats(population);
+        if (i % 5 === 0 || i === 99) {
+             console.log(`${stats.generation}, ${stats.speciesCount}, ${stats.maxFitness.toFixed(4)}, ${stats.avgFitness.toFixed(4)}`);
+        }
+        
+        history.push({ gen: stats.generation, max: stats.maxFitness });
+
+        // Evolve
+        population = evolveGeneration(population, config);
+    }
+    
+    // 3. Analysis
+    const firstMax = history[0].max;
+    const lastMax = history[history.length - 1].max;
+    const improvement = lastMax - firstMax;
+    
+    console.log(`Improvement: ${improvement.toFixed(4)}`);
+    
+    // Expect significantly positive fitness (at least winning some matches)
+    // Baseline is usually 0 or negative. We want > 1.0 (some kills)
+    expect(lastMax).toBeGreaterThan(0.5); 
+    expect(improvement).toBeGreaterThan(0);
+}, 60000); // 60s timeout

src/lib/neatArena/benchmark_progress.test.ts

@@ -0,0 +1,61 @@
+
+import { describe, expect, test } from 'bun:test';
+import { createSimulation, stepSimulation } from './simulation';
+import { generateObservation } from './sensors';
+import { AgentAction } from './types';
+import * as fs from 'fs';
+import * as path from 'path';
+
+// --- MECHANICS TEST ---
+function runMechanicsTest() {
+    const sim = createSimulation(12345, 2); // Pair 2 (Strafer)
+    let hits = 0;
+    let currentSim = sim;
+    
+    // Perfect Tracker Logic
+    for (let t = 0; t < 600; t++) { // 20 seconds
+        const obs = generateObservation(0, currentSim);
+        const targetAngle = obs.targetRelativeAngle;
+        const targetVisible = obs.targetVisible;
+        
+        // P-Controller
+        // Reduced gain to prevent overshoot with new high TURN_RATE
+        let turn = targetAngle * 5.0; 
+        if (turn > 1) turn = 1;
+        if (turn < -1) turn = -1;
+        
+        // Shoot if locked on
+        // Tighter angle check because we shoot faster now
+        const shoot = (Math.abs(targetAngle) < 0.05 && targetVisible > 0.5) ? 1.0 : 0.0;
+        
+        const actionTracker: AgentAction = { moveX: 0, moveY: 0, turn, shoot };
+        const actionStrafer: AgentAction = { 
+            moveX: 0, moveY: Math.sin(t * 0.2) * 0.5, turn: 0, shoot: 0 // Nerfed speed (0.5x)
+        };
+        
+        const nextSim = stepSimulation(currentSim, [actionTracker, actionStrafer]);
+        
+        // Check hits (Agent 1 is Strafer)
+        if (nextSim.agents[1].hits > currentSim.agents[1].hits) {
+            hits++;
+        }
+        currentSim = nextSim;
+    }
+    return hits;
+}
+
+describe('Progress Benchmark', () => {
+    test('Mechanics: Task is Solvable', () => {
+        const hits = runMechanicsTest();
+        console.log(`[Mechanics] Perfect Bot Hits: ${hits}`);
+        
+        // Save result
+        const result = {
+            mechanics_hits: hits,
+            solvable: hits > 5
+        };
+        fs.writeFileSync('benchmark_results.json', JSON.stringify(result, null, 2));
+        
+        expect(hits).toBeGreaterThan(5); // Expect at least 5 hits (Winning condition)
+    });
+});

src/lib/neatArena/check_map_los.ts

@@ -0,0 +1,37 @@
+
+import { generateArenaMap } from "./mapGenerator";
+import { hasLineOfSight } from "./sensors";
+import type { Agent } from "./types";
+import { SIMULATION_CONFIG } from './types';
+
+const map = generateArenaMap(12345);
+console.log(`Map generated with ${map.walls.length} walls.`);
+
+let blockedCount = 0;
+
+// Check the seeds used in Curriculum
+const BASE_SEED = 12345;
+const SPAWN_INDICES = [0, 1, 2, 3];
+
+for (const i of SPAWN_INDICES) {
+    const seed = BASE_SEED + i;
+    const spawnIdx = i;
+    
+    // NOTE: SIMULATION_CONFIG is not defined in this file, assuming it's imported or globally available.
+    // For the purpose of this edit, I'm assuming generateArenaMap can take 3 arguments as per the new code.
+    const map = generateArenaMap(SIMULATION_CONFIG.WORLD_SIZE, SIMULATION_CONFIG.WORLD_SIZE, seed);
+    
+    // Find the spawn pair for this index
+    const pairPoints = map.spawnPoints.filter(sp => sp.pairId === spawnIdx);
+    const p1 = pairPoints.find(sp => sp.side === 0)!.position;
+    const p2 = pairPoints.find(sp => sp.side === 1)!.position;
+    
+    const blocked = !hasLineOfSight({ position: p1 } as any, { position: p2 } as any, map.walls);
+    
+    console.log(`Seed ${seed}, Spawn ${spawnIdx}: ${blocked ? 'BLOCKED ❌' : 'CLEAR ✅'}`);
+    
+    if (blocked) {
+        process.exit(1); 
+    }
+}
+console.log('All Curriculum Maps Clear!');

src/lib/neatArena/check_sight.ts

@@ -0,0 +1,28 @@
+
+import { hasLineOfSight } from "./sensors";
+import { type Agent, type Wall } from "./types";
+
+// Mock agents
+const agent = { position: { x: 100, y: 100 } } as Agent;
+const opponent = { position: { x: 300, y: 100 } } as Agent;
+
+// Mock walls
+const blockWall: Wall = {
+    rect: { minX: 190, minY: 50, maxX: 210, maxY: 150 }
+};
+
+const clearWall: Wall = {
+    rect: { minX: 190, minY: 200, maxX: 210, maxY: 300 }
+};
+
+// Test 1: Clear path (no walls)
+const clear = hasLineOfSight(agent, opponent, []);
+console.log("No walls:", clear ? "PASS" : "FAIL");
+
+// Test 2: Blocked path
+const blocked = hasLineOfSight(agent, opponent, [blockWall]);
+console.log("Blocked:", !blocked ? "PASS" : "FAIL");
+
+// Test 3: Wall nearby but not blocking
+const notBlocked = hasLineOfSight(agent, opponent, [clearWall]);
+console.log("Clear wall:", notBlocked ? "PASS" : "FAIL");

src/lib/neatArena/crossover.ts

@@ -0,0 +1,75 @@
+import type { Genome } from './genome';
+import { cloneGenome } from './genome';
+
+/**
+ * NEAT Crossover
+ * 
+ * Produces offspring by crossing over two parent genomes.
+ * Follows the NEAT crossover rules:
+ * - Matching genes are randomly inherited
+ * - Disjoint/excess genes are inherited from the fitter parent
+ * - Disabled genes have a chance to stay disabled
+ */
+
+const DISABLED_GENE_INHERITANCE_RATE = 0.75;
+
+/**
+ * Perform crossover between two genomes
+ * @param parent1 First parent (should be fitter or equal)
+ * @param parent2 Second parent
+ * @param innovationTracker Not used in crossover, but kept for consistency
+ * @returns Offspring genome
+ */
+export function crossover(
+    parent1: Genome,
+    parent2: Genome
+): Genome {
+    // Ensure parent1 is fitter (or equal)
+    if (parent2.fitness > parent1.fitness) {
+        [parent1, parent2] = [parent2, parent1];
+    }
+
+    const offspring = cloneGenome(parent1);
+    offspring.connections = [];
+    offspring.fitness = 0;
+
+    // Build innovation maps
+    const p1Connections = new Map(
+        parent1.connections.map(c => [c.innovation, c])
+    );
+    const p2Connections = new Map(
+        parent2.connections.map(c => [c.innovation, c])
+    );
+
+    // Get all innovation numbers
+    const allInnovations = new Set([
+        ...p1Connections.keys(),
+        ...p2Connections.keys(),
+    ]);
+
+    for (const innovation of allInnovations) {
+        const conn1 = p1Connections.get(innovation);
+        const conn2 = p2Connections.get(innovation);
+
+        if (conn1 && conn2) {
+            // Matching gene - randomly choose from either parent
+            const chosen = Math.random() < 0.5 ? conn1 : conn2;
+            const newConn = { ...chosen };
+
+            // Handle disabled gene inheritance
+            if (!conn1.enabled || !conn2.enabled) {
+                if (Math.random() < DISABLED_GENE_INHERITANCE_RATE) {
+                    newConn.enabled = false;
+                }
+            }
+
+            offspring.connections.push(newConn);
+        } else if (conn1) {
+            // Disjoint/excess gene from parent1 (fitter)
+            offspring.connections.push({ ...conn1 });
+        }
+        // Genes only in parent2 are not inherited (parent1 is fitter)
+    }
+
+    return offspring;
+}

src/lib/neatArena/curriculum_e2e.test.ts

@@ -0,0 +1,66 @@
+
+import { describe, test, expect } from 'bun:test';
+import { createPopulation, evolveGeneration, getPopulationStats, DEFAULT_EVOLUTION_CONFIG } from './evolution';
+import { evaluatePopulation, DEFAULT_MATCH_CONFIG } from './selfPlay';
+
+// Extended configuration for Long-term Test
+const LONG_RUN_CONFIG = {
+    ...DEFAULT_EVOLUTION_CONFIG,
+    populationSize: 50, // Smaller pop for faster test speed
+};
+
+const MATCH_CONFIG = {
+    ...DEFAULT_MATCH_CONFIG,
+    matchesPerGenome: 6, // 2 Static + 2 Spinner + 2 Peer
+    maxTicks: 300,
+};
+
+describe('Curriculum Evolution Long-term', () => {
+    test('Should reliably evolve High Fitness over 50 generations', () => {
+        let population = createPopulation(LONG_RUN_CONFIG);
+        const history: number[] = [];
+        
+        console.log('\n--- Starting Long-term Curriculum Test (50 Gens) ---');
+        
+        for (let gen = 0; gen < 50; gen++) {
+            try {
+                // 1. Evaluate
+                const evaluatedPop = evaluatePopulation(population, MATCH_CONFIG);
+                const stats = getPopulationStats(evaluatedPop);
+                
+                history.push(stats.avgFitness);
+                
+                console.log(`Gen ${gen}: Avg ${stats.avgFitness.toFixed(2)} | Max ${stats.maxFitness.toFixed(2)} | Species ${stats.speciesCount}`);
+                
+                // Checks
+                if (gen === 0) {
+                    if (stats.avgFitness <= 1.0) {
+                        console.error(`FAILURE at Gen 0: Avg Fitness ${stats.avgFitness} <= 1.0`);
+                    }
+                    expect(stats.avgFitness).toBeGreaterThan(1.0);
+                }
+                
+                if (gen === 20) {
+                   if (stats.avgFitness <= 12.0) {
+                        console.error(`FAILURE at Gen 20: Avg Fitness ${stats.avgFitness} <= 12.0`);
+                    }
+                    expect(stats.avgFitness).toBeGreaterThan(12.0);
+                }
+                
+                // 2. Evolve
+                population = evolveGeneration(evaluatedPop, LONG_RUN_CONFIG);
+            } catch (e) {
+                console.error(`CRASH at Gen ${gen}:`, e);
+                throw e;
+            }
+        }
+        
+        console.log('--- Test Complete ---');
+        
+        // Final Success Criteria
+        const finalStats = getPopulationStats(evaluatePopulation(population, MATCH_CONFIG));
+        console.log(`Final Gen: Avg ${finalStats.avgFitness.toFixed(2)}`);
+        
+        expect(finalStats.avgFitness).toBeGreaterThan(15.0); // Better than just Static + Spinner?
+    }, 600000); // 10 minute timeout
+});

src/lib/neatArena/debug_curriculum_placeholder.ts

@@ -0,0 +1,41 @@
+
+import { test, expect } from 'bun:test';
+import { generateArenaMap } from './mapGenerator';
+import { SIMULATION_CONFIG } from './types';
+
+const BASE_SEED = 12345;
+const SPAWN_PAIRS_TO_CHECK = [0, 1, 2, 3]; // Used in Curriculum
+
+console.log('--- Checking Curriculum Map LoS ---');
+
+for (const spawnId of SPAWN_PAIRS_TO_CHECK) {
+    const mapSeed = BASE_SEED + spawnId;
+    // Note: evaluatePopulation passes (mapSeed + spawnPairId) as the first arg to createSimulation
+    // In runMatch: createSimulation(config.mapSeed + pairing.spawnPairId, pairing.spawnPairId)
+    // So for spawnId 0: seed 12345, spawn 0
+    // For spawnId 1: seed 12346, spawn 1
+    
+    const map = generateArenaMap(SIMULATION_CONFIG.WORLD_SIZE, SIMULATION_CONFIG.WORLD_SIZE, mapSeed);
+    
+    const p1 = map.spawnPoints[spawnId].p1;
+    const p2 = map.spawnPoints[spawnId].p2;
+    
+    // Check LoS
+    let blocked = false;
+    
+    // Simple raycast check against all walls
+    const dx = p2.x - p1.x;
+    const dy = p2.y - p1.y;
+    const dist = Math.sqrt(dx*dx + dy*dy);
+    
+    // Check against every wall
+    for (const wall of map.walls) {
+        // ... (ray AABB intersection logic)
+        // Re-using simplified check logic or just manual visual inspection via log?
+        // Let's copy the helper from check_map_los.ts
+    }
+    
+    // Since I can't easily import the helper without creating a module mess,
+    // I relies on the fact that I previously made check_map_los.ts.
+    // I will just modify check_map_los.ts to loop through these seeds.
+}

src/lib/neatArena/debug_distance.ts

@@ -0,0 +1,26 @@
+
+import { InnovationTracker, createMinimalGenome } from "./genome";
+import { compatibilityDistance, DEFAULT_COMPATIBILITY_CONFIG } from "./speciation";
+
+const tracker = new InnovationTracker();
+
+const g1 = createMinimalGenome(5, 2, tracker);
+const g2 = createMinimalGenome(5, 2, tracker); // Should reuse innovation IDs
+
+console.log("Genome 1 connections:", g1.connections.length);
+console.log("Genome 2 connections:", g2.connections.length);
+
+const g1Innovations = g1.connections.map(c => c.innovation).join(',');
+const g2Innovations = g2.connections.map(c => c.innovation).join(',');
+
+console.log("G1 Innovations:", g1Innovations);
+console.log("G2 Innovations:", g2Innovations);
+
+const dist = compatibilityDistance(g1, g2, { ...DEFAULT_COMPATIBILITY_CONFIG, weightDiffCoeff: 0.4 });
+console.log("Distance:", dist);
+
+if (dist > 2.0) {
+    console.error("FAIL: Distance too high for minimal genomes!");
+} else {
+    console.log("PASS: Distance reasonable.");
+}

src/lib/neatArena/debug_fitness_calc.ts

@@ -0,0 +1,46 @@
+import { createSimulation, stepSimulation } from './simulation';
+import { createFitnessTracker, updateFitness } from './fitness';
+import { createNetwork } from './network';
+import { Genome } from './genome';
+import { AgentAction } from './types';
+import { generateObservation, observationToInputs } from './sensors';
+
+// Mock Genome
+const mockGenome: Genome = {
+    id: 1,
+    nodes: [],
+    connections: [],
+    fitness: 0
+};
+
+console.log("Creating simulation with seed 12345 + 0...");
+let sim = createSimulation(12345, 0);
+console.log(`Initial State: Tick=${sim.tick}, IsOver=${sim.isOver}`);
+
+let tracker1 = createFitnessTracker(0);
+let tracker2 = createFitnessTracker(1); // Agent 1
+
+// Mock Network (Spinner)
+const spinner = { activate: () => [0, 0, 1.0, 1.0] }; // Turn + Shoot
+
+console.log("Running 10 ticks...");
+for (let i = 0; i < 10; i++) {
+    const obs1 = generateObservation(0, sim);
+    const obs2 = generateObservation(1, sim);
+    
+    // Agent 0 does nothing (0,0,0,0)
+    // Agent 1 Spins and Shoots (0,0,1,1)
+    
+    const action1: AgentAction = { moveX: 0, moveY: 0, turn: 0, shoot: 0 };
+    const action2: AgentAction = { moveX: 0, moveY: 0, turn: 1, shoot: 1 };
+    
+    sim = stepSimulation(sim, [action1, action2]);
+    tracker1 = updateFitness(tracker1, sim);
+    tracker2 = updateFitness(tracker2, sim);
+    
+    console.log(`Tick ${i+1}:`);
+    console.log(`  Agent 0 Pos: ${sim.agents[0].position.x.toFixed(2)}, ${sim.agents[0].position.y.toFixed(2)}`);
+    console.log(`  Agent 1 Pos: ${sim.agents[1].position.x.toFixed(2)}, ${sim.agents[1].position.y.toFixed(2)}`);
+    console.log(`  Tracker 1 Fitness: ${tracker1.fitness}`);
+    console.log(`  Tracker 2 Fitness: ${tracker2.fitness}`);
+}

src/lib/neatArena/debug_simulation_score.ts

@@ -0,0 +1,41 @@
+
+import { createSimulation, stepSimulation } from "./simulation";
+import { createFitnessTracker, updateFitness } from "./fitness";
+import { generateObservation, observationToInputs } from "./sensors";
+import type { AgentAction } from "./types";
+
+// Setup
+const seed = 12345;
+const maxTicks = 300;
+let sim = createSimulation(seed, 0);
+
+// Trackers
+let staticTracker = createFitnessTracker(sim.agents[0].id);
+let spinnerTracker = createFitnessTracker(sim.agents[1].id);
+
+console.log("Starting Simulation check...");
+
+for (let i = 0; i < maxTicks; i++) {
+    // Agent 0: Static (Do nothing)
+    const action0: AgentAction = {
+        moveX: 0, moveY: 0,
+        turn: 0,
+        shoot: 0
+    };
+
+    // Agent 1: Spinner (Turn right)
+    const action1: AgentAction = {
+        moveX: 0, moveY: 0,
+        turn: 1.0, 
+        shoot: 0
+    };
+
+    sim = stepSimulation(sim, [action0, action1]);
+    staticTracker = updateFitness(staticTracker, sim);
+    spinnerTracker = updateFitness(spinnerTracker, sim);
+}
+
+console.log("Static Bot Fitness:", staticTracker.fitness.toFixed(4));
+console.log("Spinner Bot Fitness:", spinnerTracker.fitness.toFixed(4));
+console.log("Spinner Hits Taken:", spinnerTracker.lastHits);
+console.log("Spinner Shots Fired:", spinnerTracker.shotsFired);

src/lib/neatArena/duration_impact.test.ts

@@ -0,0 +1,110 @@
+
+import { describe, expect, test } from 'bun:test';
+import { createSimulation, stepSimulation } from './simulation';
+import { generateObservation } from './sensors';
+import { AgentAction, SIMULATION_CONFIG } from './types';
+
+// Search Scenario
+function createSearcherAction(obs: any, tick: number): AgentAction {
+    if (obs.targetVisible > 0.5) {
+        // Attack Mode
+        const angle = obs.targetRelativeAngle;
+        let turn = angle * 5.0;
+        if (turn > 1) turn = 1;
+        if (turn < -1) turn = -1;
+        return { moveX: 0.5, moveY: 0, turn, shoot: 1.0 };
+    } else {
+        // Search Mode (Random Walk / Spin)
+        const wander = Math.sin(tick * 0.1);
+        return { moveX: 0.5, moveY: 0, turn: wander, shoot: 0 };
+    }
+}
+
+function createHiderAction(obs: any): AgentAction {
+    // Zero movement, just sit there (or move to corner if we had map info)
+    // For now, simple stationary target.
+    return { moveX: 0, moveY: 0, turn: 0, shoot: 0 };
+}
+
+function runScenario(duration: number): { hits: number, kills: number } {
+    const sim = createSimulation(12345, 0); 
+    let currentSim = sim;
+    let totalHits = 0;
+    
+    // Force agents apart? Sim pair 0 usually has distance.
+    
+    for (let t = 0; t < duration; t++) {
+        const obs0 = generateObservation(0, currentSim);
+        const action0 = createSearcherAction(obs0, t);
+        
+        const obs1 = generateObservation(1, currentSim);
+        const action1 = createHiderAction(obs1);
+        
+        let nextSim = stepSimulation(currentSim, [action0, action1]);
+        
+        if (nextSim.agents[1].hits > currentSim.agents[1].hits) {
+            totalHits++;
+        }
+        
+        // Manual Infinite Respawn
+        if (nextSim.isOver) {
+            // Reset health/hits but keep positions? No, standard respawn logic is complex.
+            // stepSimulation already handles respawn if health < 0.
+            // isOver only triggers if Kill Limit reached.
+            // We want to CONTINUE counting.
+            // So we just clear the 'isOver' flag and reset kill counts in the match state?
+            // Actually, nextSim is immutable. We overwrite currentSim.
+            nextSim = {
+                ...nextSim,
+                isOver: false
+                // Note: If kills reached, we should reset kills to 0 so they don't trigger isOver again immediately?
+            };
+             // Hack: Reset kills if > 4
+            if (nextSim.agents[0].kills >= 5) {
+                 nextSim.agents[0].kills = 0;
+                 nextSim.agents[1].kills = 0;
+            }
+        }
+        
+        currentSim = nextSim;
+    }
+    
+    const kills = Math.floor(totalHits / 5);
+    return { hits: totalHits, kills };
+}
+
+import * as fs from 'fs';
+
+// ... (previous imports)
+
+describe('Game Duration Impact', () => {
+    test('Longer games should favor Chaser Strategy', () => {
+        // Short Game (10s = 300 ticks)
+        const shortResult = runScenario(300);
+        
+        // Long Game (30s = 900 ticks)
+        const longResult = runScenario(900);
+        
+        const shortHPS = shortResult.hits / 10;
+        const longHPS = longResult.hits / 30;
+        const ratio = longHPS / (shortHPS + 0.001);
+        
+        const results = {
+            short: { ticks: 300, hits: shortResult.hits, hps: shortHPS },
+            long: { ticks: 900, hits: longResult.hits, hps: longHPS },
+            ratio: ratio,
+            verdict: ratio > 1.2 ? "Strategy Scale Proved" : "Linear Scale"
+        };
+        
+        fs.writeFileSync('duration_results.json', JSON.stringify(results, null, 2));
+        
+        // Assertions
+        expect(longResult.hits).toBeGreaterThan(shortResult.hits);
+        // Expect at least 30% efficiency gain (cornering effect)
+        // If Short=0 hits, this math is weird.
+        if (shortResult.hits > 0) {
+            expect(ratio).toBeGreaterThan(1.0);
+        }
+    });
+});
+

src/lib/neatArena/e2e_evolution.test.ts

@@ -0,0 +1,157 @@
+
+import { describe, test, expect, beforeAll } from "bun:test";
+import { createPopulation, evolveGeneration, type EvolutionConfig } from "./evolution";
+import { DEFAULT_MUTATION_RATES } from "./mutations";
+import type { Genome } from "./genome";
+
+// Deterministic configuration for testing
+const TEST_CONFIG: EvolutionConfig = {
+    populationSize: 100,
+    inputCount: 5,
+    outputCount: 2,
+    compatibilityConfig: {
+        excessCoeff: 1.0, 
+        disjointCoeff: 1.0, 
+        weightDiffCoeff: 0.4,
+        // targetSpeciesMin/Max are handled by adjustCompatibilityThreshold but not part of CompatibilityConfig interface?
+        // Wait, CompatibilityConfig only has coefficients. 
+        // EvolutionConfig usually doesn't hold targets in CompatibilityConfig?
+        // Let's check the interface definition in speciation.ts
+    },
+    reproductionConfig: {
+        elitePerSpecies: 1, // STRICT ELITISM
+        crossoverRate: 0.0, // Disable crossover to track clones easily
+        interspeciesMatingRate: 0,
+        mutationRates: { 
+            ...DEFAULT_MUTATION_RATES,
+            // Reduce mutation chaos for this test
+            addConnectionProb: 0.0,
+            addNodeProb: 0.0,
+            mutateWeightsProb: 0.0, 
+            resetWeightProb: 0.0,
+        }
+    }
+};
+
+describe("NEAT Engine E2E Logic", () => {
+    
+    test("Elite Preservation (Hall of Fame)", () => {
+        let population = createPopulation(TEST_CONFIG);
+        const bestId = population.genomes[0].id;
+        
+        // 1. Assign fitness - Genome 0 is the KING
+        population.genomes.forEach(g => {
+            if (g.id === bestId) g.fitness = 1000;
+            else g.fitness = 1;
+        });
+
+        // 2. Identify Best
+        population.bestGenomeEver = population.genomes[0];
+        population.bestFitnessEver = 1000;
+
+        // 3. Evolve
+        const nextGen = evolveGeneration(population, TEST_CONFIG);
+
+        // 4. Verify KING exists in next gen
+        // Note: ID might change due to cloning. We need to check structure or finding the high fitness trace.
+        // But wait, the previous fix "Reset new genome fitness to 0" means we can't find it by fitness!
+        // We MUST verify structural identity or ID tracking if we kept it.
+        // In my previous step, I decided to "Injection" blindly.
+        // Let's see if the logic holds.
+        
+        // Actually, let's check population size first
+        expect(nextGen.genomes.length).toBe(TEST_CONFIG.populationSize);
+        
+        // The algorithm SHOULD have preserved the best genome (cloned it).
+        // Since we disabled mutation, there should be at least one genome with the exact SAME structure (connections/weights) as the King.
+        
+        const king = population.genomes[0];
+        const kingClone = nextGen.genomes.find(g => 
+            g.connections.length === king.connections.length &&
+            g.connections.every((c, i) => c.weight === king.connections[i].weight && c.to === king.connections[i].to)
+        );
+
+        expect(kingClone).toBeDefined();
+        if (!kingClone) throw new Error("Elite was lost!");
+    });
+
+    test("Selection Pressure (Fitter = More Offspring)", () => {
+        let population = createPopulation(TEST_CONFIG);
+        
+        // Create two groups: Winners (fitness 100) and Losers (fitness 1)
+        for(let i=0; i<50; i++) population.genomes[i].fitness = 100; // Winners
+        for(let i=50; i<100; i++) population.genomes[i].fitness = 1;  // Losers
+        
+        // Evolve
+        const nextGen = evolveGeneration(population, {
+            ...TEST_CONFIG,
+            // Enable mutation slightly so we can track lineage via stats if needed, 
+            // but for simple proportional selection, we just start with clones.
+             reproductionConfig: { ...TEST_CONFIG.reproductionConfig, mutationRates: DEFAULT_MUTATION_RATES }
+        });
+        
+        // We can't easily track lineage without a 'parentId' tag.
+        // But generally, we verify that the population didn't collapse.
+        expect(nextGen.genomes.length).toBe(TEST_CONFIG.populationSize);
+    });
+
+    test("Strict Monotonicity with Hall of Fame", () => {
+        // This test simulates 10 generations where the "Game" is simply "Fitness = Number of Nodes"
+        // Since "Add Node" is the only way to improve, and mutation adds nodes...
+        // We check if maxFitness (Node Count) ever drops.
+        
+        let population = createPopulation(TEST_CONFIG);
+        
+        // Enable Add Node mutation
+        const GROWTH_CONFIG = {
+            ...TEST_CONFIG,
+            reproductionConfig: {
+                ...TEST_CONFIG.reproductionConfig,
+                mutationRates: {
+                    ...DEFAULT_MUTATION_RATES,
+                    addNodeProb: 1.0, // ALWAYS add node
+                    addConnectionProb: 0.0,
+                    mutateWeightsProb: 0.0,
+                }
+            }
+        };
+
+        let lastMaxNodes = 0;
+
+        for(let i=0; i<10; i++) {
+            // Evaluate: Fitness = Node Count
+            population.genomes.forEach(g => {
+                g.fitness = g.nodes.length;
+            });
+            
+            const stats = getStats(population);
+            // console.log(`Gen ${i}: Max Nodes = ${stats.max}`);
+            
+            // Assertion: We must NOT lose progress
+            expect(stats.max).toBeGreaterThanOrEqual(lastMaxNodes);
+            lastMaxNodes = stats.max;
+
+            population = evolveGeneration(population, GROWTH_CONFIG);
+        }
+    });
+
+    test("Species Count Stability (Panic Mode Check)", () => {
+         // Create a population that is heavily fragmented (simulate by high threshold sensitivity?)
+         // This is hard to mock without valid distance function.
+         // We'll trust the Speciation unit tests for this.
+         // This test just ensures we don't crash with 0 species or 1000 species.
+         let population = createPopulation(TEST_CONFIG);
+         population.genomes.forEach(g => g.fitness = Math.random());
+         
+         const nextGen = evolveGeneration(population, TEST_CONFIG);
+         expect(nextGen.species.length).toBeGreaterThan(0);
+         expect(nextGen.species.length).toBeLessThan(TEST_CONFIG.populationSize);
+    });
+});
+
+function getStats(pop: any) {
+    const fitnesses = pop.genomes.map((g: any) => g.fitness);
+    return {
+        max: Math.max(...fitnesses)
+    };
+}

src/lib/neatArena/evolution.test.ts

@@ -0,0 +1,301 @@
+import { describe, expect, test, beforeEach } from "bun:test";
+import { InnovationTracker, createMinimalGenome, type Genome, cloneGenome } from "./genome";
+import { compatibilityDistance, speciate, adjustCompatibilityThreshold, DEFAULT_COMPATIBILITY_CONFIG, type Species } from "./speciation";
+import { mutate, DEFAULT_MUTATION_RATES } from "./mutations";
+import { createNetwork } from "./network";
+import { crossover } from "./crossover";
+
+describe("NEAT Evolution Logic", () => {
+    let tracker: InnovationTracker;
+    
+    beforeEach(() => {
+        tracker = new InnovationTracker();
+    });
+
+    describe("Neural Network", () => {
+        test("Activates correctly for direct connection", () => {
+            // Input 0 -> Output 1 with weight 1.0
+            const genome = createMinimalGenome(1, 1, tracker);
+            genome.connections[0].weight = 1.0;
+            genome.connections[0].enabled = true;
+            genome.nodes.find(n => n.id === 1)!.activation = "linear"; // Easier to test
+            
+            const network = createNetwork(genome);
+            const outputs = network.activate([0.5]);
+            
+            // 0.5 * 1.0 = 0.5
+            expect(outputs[0]).toBe(0.5);
+        });
+
+        test("Handles disabled connections", () => {
+             const genome = createMinimalGenome(1, 1, tracker);
+             genome.connections[0].weight = 1.0;
+             genome.connections[0].enabled = false;
+             
+             const network = createNetwork(genome);
+             const outputs = network.activate([0.5]);
+             
+             // Should be 0 (bias is not modeled here implicitly unless node has bias, usually linear 0)
+             // Tanh of 0 is 0.
+             expect(outputs[0]).toBe(0);
+        });
+        
+        test("Topological sort handles hidden nodes", () => {
+             // 0 -> 2 -> 1
+             const genome = createMinimalGenome(1, 1, tracker); // 0->1
+             
+             // Add hidden node 2
+             // Disable 0->1
+             genome.connections[0].enabled = false;
+             
+             // Add 0->2 (inv 100)
+             genome.nodes.push({ id: 2, type: 'hidden', activation: 'linear' });
+             genome.connections.push({ innovation: 100, from: 0, to: 2, weight: 1.0, enabled: true });
+             
+             // Add 2->1 (inv 101)
+             genome.connections.push({ innovation: 101, from: 2, to: 1, weight: 1.0, enabled: true });
+             
+             // Set output 1 to linear
+             genome.nodes.find(n => n.id === 1)!.activation = "linear";
+             
+             const network = createNetwork(genome);
+             const outputs = network.activate([0.5]);
+             
+             // 0.5 ->(x1) node2(0.5) ->(x1) node1(0.5)
+             expect(outputs[0]).toBe(0.5);
+        });
+    });
+
+    describe("Crossover", () => {
+        test("Inherits matching genes from either parent", () => {
+             const p1 = createMinimalGenome(1, 1, tracker);
+             const p2 = cloneGenome(p1);
+             
+             p1.connections[0].weight = 1.0;
+             p1.fitness = 10;
+             
+             p2.connections[0].weight = 2.0;
+             p2.fitness = 5;
+             
+             // Run many times to check randomness
+             let gotP1Weight = 0;
+             let gotP2Weight = 0;
+             
+             for(let i=0; i<100; i++) {
+                 const child = crossover(p1, p2, tracker);
+                 const w = child.connections[0].weight;
+                 if (w === 1.0) gotP1Weight++;
+                 if (w === 2.0) gotP2Weight++;
+             }
+             
+             expect(gotP1Weight).toBeGreaterThan(0);
+             expect(gotP2Weight).toBeGreaterThan(0);
+        });
+        
+        test("Inherits disjoint genes from fitter parent ONLY", () => {
+             const p1 = createMinimalGenome(1, 1, tracker);
+             p1.fitness = 10;
+             // Add extra gene to P1 (fitter)
+             p1.connections.push({ innovation: 100, from: 0, to: 1, weight: 1, enabled: true });
+             
+             const p2 = createMinimalGenome(1, 1, tracker);
+             p2.fitness = 5;
+             // Add extra gene to P2 (less fit)
+             p2.connections.push({ innovation: 200, from: 0, to: 1, weight: 1, enabled: true });
+             
+             const child = crossover(p1, p2, tracker);
+             
+             // Should have inv 100 (from P1)
+             expect(child.connections.find(c => c.innovation === 100)).toBeDefined();
+             
+             // Should NOT have inv 200 (from P2)
+             expect(child.connections.find(c => c.innovation === 200)).toBeUndefined();
+        });
+    });
+    
+    describe("Cloning", () => {
+         test("Performs deep copy", () => {
+              const g1 = createMinimalGenome(1, 1, tracker);
+              const g2 = cloneGenome(g1);
+              
+              g1.connections[0].weight = 500;
+              expect(g2.connections[0].weight).not.toBe(500);
+              
+              g1.nodes[0].activation = 'sigmoid';
+              expect(g2.nodes[0].activation).not.toBe('sigmoid');
+         });
+    });
+
+    describe("Compatibility Distance", () => {
+        test("Identical genomes have distance 0", () => {
+            const g1 = createMinimalGenome(3, 2, tracker);
+            const g2 = cloneGenome(g1);
+            
+            const distance = compatibilityDistance(g1, g2, DEFAULT_COMPATIBILITY_CONFIG);
+            expect(distance).toBe(0);
+        });
+
+        test("Weight differences increase distance", () => {
+            const g1 = createMinimalGenome(3, 2, tracker);
+            const g2 = cloneGenome(g1);
+            
+            // Modify weights of g2
+            g2.connections[0].weight += 1.0;
+            g2.connections[1].weight -= 1.0;
+            
+            const distance = compatibilityDistance(g1, g2, DEFAULT_COMPATIBILITY_CONFIG);
+            expect(distance).toBeGreaterThan(0);
+            
+            // Manual calc check: 
+            // 2 matching genes modified by 1.0 each. Total diff = 2.0.
+            // Avg diff W = 2.0 / 6 (total connections) = 0.333...
+            // Coeff (default 0.4) * 0.333 = 0.1333...
+            expect(distance).toBeCloseTo(0.4 * (2.0/6.0), 2);
+        });
+
+        test("Large genomes require adjustment of N or threshold", () => {
+            // Create large genomes (simulating snake AI start)
+            // 50 inputs * 5 outputs = 250 connections
+            const g1 = createMinimalGenome(50, 5, tracker);
+            const g2 = cloneGenome(g1);
+            
+            // Add 5 distinct NEW connections to g2 (5 disjoints/excess)
+            for(let i=0; i<5; i++) {
+                g2.connections.push({
+                    innovation: 10000 + i,
+                    from: 0, to: 50+i%5, weight: 1, enabled: true
+                });
+            }
+            
+            // N = 1 (Removed normalization)
+            // Disjoint = 5
+            // Delta = 1.0 * 5 / 1.0 = 5.0
+            
+            const distance = compatibilityDistance(g1, g2, DEFAULT_COMPATIBILITY_CONFIG);
+            
+            console.log(`Large Genome Distance (5 diffs): ${distance}`);
+            
+            // Now we expect a healthy distance
+            expect(distance).toBeGreaterThan(4.0); 
+        });
+
+        test("Disjoint genes increase distance", () => {
+            const g1 = createMinimalGenome(3, 2, tracker);
+            const g2 = cloneGenome(g1);
+            
+            // Add a new random connection to g2 (ensuring it's disjoint, not excess)
+            // But wait, if we add a new innovation ID, it acts as excess unless another genome has a HIGHER ID.
+            // So for g2 to have disjoint, g1 must have something higher? 
+            // Or if g1 and g2 both branched from a parent, and g1 got inv 10, g2 got inv 11.
+            
+            // Let's create a scenario: Parent -> Child1, Child2
+            // Child1 gets connection A (id 100)
+            // Child2 gets connection B (id 101)
+            // A is disjoint to Child2? No, A (100) < Child2Max (101). So A is disjoint.
+            // B (101) > Child1Max (100). So B is excess.
+            
+            // Let's simulate:
+            // g1 has connections [0..5]
+            // g2 has connections [0..5]
+            
+            // Add connection 6 to g1
+            g1.connections.push({
+                innovation: 998,
+                from: 0, to: 1, weight: 1, enabled: true
+            });
+            
+            // Add connection 7 to g2
+            g2.connections.push({
+                innovation: 999,
+                from: 0, to: 1, weight: 1, enabled: true
+            });
+            
+            // Max1 = 998, Max2 = 999.
+            // Gene 998 in g1: 998 < Max2(999), so it is DISJOINT.
+            // Gene 999 in g2: 999 > Max1(998), so it is EXCESS.
+            
+            // Total genes N = max(7, 7) = 7.
+            // Disjoint = 1
+            // Excess = 1
+            // Distance = (1 * 1.0 / 7) + (1 * 1.0 / 7) + (weights...)
+            
+            const distance = compatibilityDistance(g1, g2, DEFAULT_COMPATIBILITY_CONFIG);
+            
+            // We expect non-zero distance contributions from both D and E terms
+            expect(distance).toBeGreaterThan(0);
+        });
+    });
+
+    describe("Speciation", () => {
+        test("Separates distinct populations", () => {
+            const population: Genome[] = [];
+            
+            // Group A: Basic genomes
+            for(let i=0; i<10; i++) {
+                population.push(createMinimalGenome(3, 2, tracker));
+            }
+            
+            // Group B: Highly mutated genomes
+            // We manually clear 'connections' and add something totally different to force separation
+            for(let i=0; i<10; i++) {
+                const g = createMinimalGenome(3, 2, tracker);
+                g.connections = []; // Clear all common connections
+                g.connections.push({
+                   innovation: 1000 + i, // High innovation IDs
+                   from: 0, to: 3, weight: 1, enabled: true
+                });
+                population.push(g);
+            }
+            
+            const species = speciate(population, [], 1.0, DEFAULT_COMPATIBILITY_CONFIG);
+            
+            // Should have at least 2 species
+            expect(species.length).toBeGreaterThanOrEqual(2);
+        });
+        
+        test("Groups similar genomes", () => {
+             const population: Genome[] = [];
+             const base = createMinimalGenome(3, 2, tracker);
+             
+             // 5 clones
+             for(let i=0; i<5; i++) {
+                 population.push(cloneGenome(base));
+             }
+             
+             const species = speciate(population, [], 3.0, DEFAULT_COMPATIBILITY_CONFIG);
+             
+             // Should accommodate all in 1 species due to high threshold and identical genes
+             expect(species.length).toBe(1);
+        });
+    });
+
+    describe("Mutation Rates", () => {
+        test("Structural mutations occur with sufficient frequency", () => {
+            // Need to mock random? Or just run it 1000 times and check average.
+            const base = createMinimalGenome(5, 2, tracker);
+            let structuralChanges = 0;
+            const trials = 1000;
+            
+            // Use current default rates
+            const rates = DEFAULT_MUTATION_RATES;
+            
+            for(let i=0; i<trials; i++) {
+                const g = cloneGenome(base);
+                const originalConnCount = g.connections.length;
+                const originalNodeCount = g.nodes.length;
+                
+                mutate(g, tracker, rates);
+                
+                if (g.connections.length > originalConnCount || g.nodes.length > originalNodeCount) {
+                    structuralChanges++;
+                }
+            }
+            
+            console.log(`Structural mutations in ${trials} trials: ${structuralChanges}`);
+            
+            // Expecting roughly (addConnProb + addNodeProb) * trials
+            // current rates: conn=0.20, node=0.15 => 35% chance roughly
+            expect(structuralChanges).toBeGreaterThan(200); // at least 20%
+        });
+    });
+});

src/lib/neatArena/evolution.ts

@@ -0,0 +1,213 @@
+import { InnovationTracker, type Genome } from './genome';
+import type { Species } from './speciation';
+import type { ReproductionConfig } from './reproduction';
+import { createMinimalGenome, cloneGenome } from './genome';
+import {
+    speciate,
+    adjustCompatibilityThreshold,
+    applyFitnessSharing,
+    DEFAULT_COMPATIBILITY_CONFIG,
+    type CompatibilityConfig,
+} from './speciation';
+import { reproduce, DEFAULT_REPRODUCTION_CONFIG } from './reproduction';
+
+/**
+ * NEAT Evolution Engine
+ * 
+ * Coordinates the entire evolution process:
+ * - Population management
+ * - Speciation
+ * - Fitness evaluation
+ * - Reproduction
+ */
+
+export interface EvolutionConfig {
+    populationSize: number;
+    inputCount: number;
+    outputCount: number;
+    compatibilityConfig: CompatibilityConfig;
+    reproductionConfig: ReproductionConfig;
+}
+
+export const DEFAULT_EVOLUTION_CONFIG: EvolutionConfig = {
+    populationSize: 200, // Increased from 150 for wider search
+    inputCount: 55, // Ray sensors (48) + extra (5) + Target Sensors (2)
+    outputCount: 5,  // moveX, moveY, turn, shoot, reserved
+    compatibilityConfig: DEFAULT_COMPATIBILITY_CONFIG,
+    reproductionConfig: DEFAULT_REPRODUCTION_CONFIG,
+};
+
+export interface Population {
+    genomes: Genome[];
+    species: Species[];
+    generation: number;
+    compatibilityThreshold: number;
+    innovationTracker: InnovationTracker;
+    bestGenomeEver: Genome | null;
+    bestFitnessEver: number;
+}
+
+/**
+ * Create initial population
+ */
+export function createPopulation(config: EvolutionConfig): Population {
+    const innovationTracker = new InnovationTracker();
+    const genomes: Genome[] = [];
+    
+    for (let i = 0; i < config.populationSize; i++) {
+        genomes.push(createMinimalGenome(
+            config.inputCount,
+            config.outputCount,
+            innovationTracker
+        ));
+    }
+    
+    return {
+        genomes,
+        species: [],
+        generation: 0,
+        compatibilityThreshold: 3.0,  // Increased from 1.5 to prevent initial explosion
+        innovationTracker,
+        bestGenomeEver: null,
+        bestFitnessEver: -Infinity,
+    };
+}
+
+/**
+ * Evolve the population by one generation
+ * 
+ * Note: This assumes genomes have already been evaluated and have fitness values.
+ */
+export function evolveGeneration(population: Population, config: EvolutionConfig): Population {
+    // 1. Speciate
+    const species = speciate(
+        population.genomes,
+        population.species,
+        population.compatibilityThreshold,
+        config.compatibilityConfig
+    );
+    
+    // 2. Apply fitness sharing
+    applyFitnessSharing(species);
+    
+    // 3. Remove stagnant species (optional for now)
+    // TODO: Implement staleness checking and removal
+    
+    // 4. Track best genome
+    let bestGenome = population.bestGenomeEver;
+    let bestFitness = population.bestFitnessEver;
+    
+    for (const genome of population.genomes) {
+        if (genome.fitness > bestFitness) {
+            bestFitness = genome.fitness;
+            bestGenome = genome;
+        }
+    }
+    
+    // 5. Reproduce
+    const newGenomes = reproduce(
+        species,
+        config.populationSize,
+        population.innovationTracker,
+        config.reproductionConfig
+    );
+    
+    // 5b. Hall of Fame (Force inject best genome ever if not present)
+    if (bestGenome && config.populationSize > 0) {
+        // Check if best genome logic is actually preserved
+        // Note: Comparing by ID is safest
+        // const bestId = bestGenome.id; // Unused
+        
+        // Check if any new genome has this ID (unlikely if they are all clones/crossovers)
+        // OR if any new genome matches the best genome's structure/stats?
+        // Actually, since we clone, IDs change. 
+        // We really want to know if a clone of "bestGenome" was added.
+        // But since we just added elitism in `reproduceSpecies`, the champion of the best species IS likely the bestGenome.
+        // Let's just blindly inject it if we think it might be lost.
+        // Actually, blindly injecting it (replacing worst) is safer.
+        // But we just calculated `bestGenome` from `population.genomes`.
+        // If that genome was an elite, it was cloned into `newGenomes` by `reproduceSpecies`.
+        // So checking if `reproduce` preserved it is hard because IDs change.
+        // Let's just add it. It guarantees it exists.
+        
+        // Replace the worst new genome with the champion
+        if (newGenomes.length >= config.populationSize) {
+             newGenomes.pop();
+        }
+        
+        const champion = cloneGenome(bestGenome);
+        champion.fitness = 0; // Reset
+        newGenomes.push(champion);
+    }
+    
+    // 6. Adjust compatibility threshold
+    // Target roughly 5-10% of population as number of species
+    const targetMin = Math.max(6, Math.floor(config.populationSize * 0.05));
+    const targetMax = Math.max(12, Math.floor(config.populationSize * 0.10));
+    const newThreshold = adjustCompatibilityThreshold(
+        population.compatibilityThreshold,
+        species.length,
+        targetMin,
+        targetMax
+    );
+    
+    return {
+        genomes: newGenomes,
+        species,
+        generation: population.generation + 1,
+        compatibilityThreshold: newThreshold,
+        innovationTracker: population.innovationTracker,
+        bestGenomeEver: bestGenome,
+        bestFitnessEver: bestFitness,
+    };
+}
+
+/**
+ * Get statistics for the current population
+ */
+export function getPopulationStats(population: Population) {
+    if (!population.genomes || population.genomes.length === 0) {
+        return {
+            generation: population.generation,
+            speciesCount: 0,
+            avgFitness: 0,
+            maxFitness: 0,
+            minFitness: 0,
+            bestFitnessEver: population.bestFitnessEver,
+            totalInnovations: (population.innovationTracker as any).currentInnovation || 0
+        };
+    }
+
+    const fitnesses = population.genomes.filter(g => g && typeof g.fitness === 'number').map(g => g.fitness);
+    
+    if (fitnesses.length === 0) {
+        // Fallback if all genomes are invalid
+         return {
+            generation: population.generation,
+            speciesCount: population.species ? population.species.length : 0,
+            avgFitness: 0,
+            maxFitness: 0,
+            minFitness: 0,
+            bestFitnessEver: population.bestFitnessEver,
+            totalInnovations: (population.innovationTracker as any).currentInnovation || 0
+        };
+    }
+    
+    const avgFitness = fitnesses.reduce((a, b) => a + b, 0) / fitnesses.length;
+    const maxFitness = Math.max(...fitnesses);
+    const minFitness = Math.min(...fitnesses);
+    
+    // When population comes from worker, innovationTracker is a plain object
+    // Access the private property directly instead of calling method
+    const totalInnovations = (population.innovationTracker as any).currentInnovation || 0;
+    
+    return {
+        generation: population.generation,
+        speciesCount: population.species.length,
+        avgFitness,
+        maxFitness,
+        minFitness,
+        bestFitnessEver: population.bestFitnessEver,
+        totalInnovations,
+    };
+}

src/lib/neatArena/evolution_performance.test.ts

@@ -0,0 +1,57 @@
+import { describe, test, expect } from 'bun:test';
+import { createPopulation, evolveGeneration } from './evolution'; // Fixed import name
+import { evaluatePopulation, DEFAULT_MATCH_CONFIG } from './selfPlay';
+import { DEFAULT_EVOLUTION_CONFIG } from './evolution';
+
+describe('Evolution Performance', () => {
+    test('Should improve fitness over 5 generations', () => {
+        // Setup
+        const config = { ...DEFAULT_EVOLUTION_CONFIG, populationSize: 50 }; // Smaller pop for speed
+        let population = createPopulation(config);
+        
+        // Track progress
+        const maxFitnessHistory: number[] = [];
+        
+        console.log('--- STARTING LONG-TERM EVOLUTION TEST (50 Gens) ---');
+        
+        const GENERATIONS = 50;
+        
+        for (let gen = 0; gen < GENERATIONS; gen++) {
+            // Evaluate
+            population = evaluatePopulation(population, { 
+                ...DEFAULT_MATCH_CONFIG, 
+                matchesPerGenome: 2, // Keep low for speed
+                maxTicks: 300 // Standard length
+            }, gen);
+            
+            // Stats
+            const maxFit = Math.max(...population.genomes.map(g => g.fitness));
+            maxFitnessHistory.push(maxFit);
+            const avgFit = population.genomes.reduce((s, g) => s + g.fitness, 0) / population.genomes.length;
+            
+            if (gen % 5 === 0 || gen === GENERATIONS - 1) {
+                console.log(`Gen ${gen}: Max=${maxFit.toFixed(2)}, Avg=${avgFit.toFixed(2)}, Species=${population.species.length}`);
+            }
+            
+            // Evolve
+            if (gen < GENERATIONS - 1) {
+                population = evolveGeneration(population, config); 
+            }
+        }
+        
+        console.log('--- EVOLUTION RESULTS ---');
+        // console.log('Fitness Trend:', maxFitnessHistory.join(' -> ')); // Too long
+        
+        const startFit = maxFitnessHistory[0];
+        const endFit = maxFitnessHistory[maxFitnessHistory.length - 1];
+        const improvement = endFit - startFit;
+        
+        console.log(`Start Max: ${startFit.toFixed(2)}`);
+        console.log(`End Max: ${endFit.toFixed(2)}`);
+        console.log(`Total Improvement: ${improvement.toFixed(2)}`);
+        
+        // Assert significant improvement
+        expect(endFit).toBeGreaterThan(startFit + 5); // Expect at least +5 points gain
+        expect(endFit).toBeGreaterThan(15); // Expect to reach decent competence (halfway to stagnation level)
+    });
+});

src/lib/neatArena/exportImport.ts

@@ -0,0 +1,121 @@
+import type { Genome } from './genome';
+import type { EvolutionConfig } from './evolution';
+
+/**
+ * Export/Import system for trained genomes.
+ * 
+ * Allows saving champion genomes as JSON files and loading them back
+ * for exhibition matches or continued training.
+ */
+
+export interface ExportedGenome {
+    version: string;
+    timestamp: number;
+    config: {
+        inputCount: number;
+        outputCount: number;
+    };
+    genome: Genome;
+    metadata?: {
+        generation?: number;
+        fitness?: number;
+        speciesCount?: number;
+    };
+}
+
+const EXPORT_VERSION = '1.0.0';
+
+/**
+ * Export a genome to a downloadable JSON format
+ */
+export function exportGenome(
+    genome: Genome,
+    config: EvolutionConfig,
+    metadata?: ExportedGenome['metadata']
+): ExportedGenome {
+    return {
+        version: EXPORT_VERSION,
+        timestamp: Date.now(),
+        config: {
+            inputCount: config.inputCount,
+            outputCount: config.outputCount,
+        },
+        genome: {
+            id: genome.id,
+            nodes: genome.nodes,
+            connections: genome.connections,
+            fitness: genome.fitness,
+        },
+        metadata,
+    };
+}
+
+/**
+ * Import a genome from JSON
+ */
+export function importGenome(exported: ExportedGenome): {
+    genome: Genome;
+    config: { inputCount: number; outputCount: number };
+} {
+    // Version check
+    if (exported.version !== EXPORT_VERSION) {
+        console.warn(`Imported genome version ${exported.version} may be incompatible with current version ${EXPORT_VERSION}`);
+    }
+    
+    return {
+        genome: exported.genome,
+        config: exported.config,
+    };
+}
+
+/**
+ * Download genome as JSON file
+ */
+export function downloadGenomeAsFile(exported: ExportedGenome, filename?: string): void {
+    const json = JSON.stringify(exported, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename || `neat-champion-${Date.now()}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    URL.revokeObjectURL(url);
+}
+
+/**
+ * Upload and parse genome from file
+ */
+export function uploadGenomeFromFile(): Promise<ExportedGenome> {
+    return new Promise((resolve, reject) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'application/json,.json';
+        
+        input.onchange = (e) => {
+            const file = (e.target as HTMLInputElement).files?.[0];
+            if (!file) {
+                reject(new Error('No file selected'));
+                return;
+            }
+            
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                try {
+                    const json = event.target?.result as string;
+                    const exported = JSON.parse(json) as ExportedGenome;
+                    resolve(exported);
+                } catch (err) {
+                    reject(new Error('Failed to parse genome file'));
+                }
+            };
+            reader.onerror = () => reject(new Error('Failed to read file'));
+            reader.readAsText(file);
+        };
+        
+        input.click();
+    });
+}

src/lib/neatArena/fitness.ts

@@ -0,0 +1,116 @@
+import type { SimulationState } from './types';
+import { hasLineOfSight } from './sensors';
+
+/**
+ * Fitness calculation for NEAT Arena.
+ * 
+ * Fitness rewards:
+ * - +10 per hit on opponent
+ * - -10 per being hit
+ * - -0.002 per tick (time penalty to encourage aggression)
+ * - -0.2 per shot fired (ammo management)
+ * - +0.01 per tick when aiming well at visible opponent
+ */
+
+export const FITNESS_CONFIG = {
+    HIT_REWARD: 10.0,      // Kill
+    DAMAGE_REWARD: 4.0,    // Per hit dealt (High reward for hitting)
+    HIT_PENALTY: 1.0,      // Per hit taken (Reduced to 1.0 to encourage aggression/trading)
+    TIME_PENALTY: 0.002,   // Per tick
+    SHOT_PENALTY: 0.0,     // REMOVED: Free shooting encourages exploration
+    AIM_REWARD: 0.01,      // Increased: Stronger guide signal
+    MOVE_REWARD: 0.001,    // Per tick moving
+};
+
+export interface FitnessTracker {
+    agentId: number;
+    fitness: number;
+    
+    // For incremental calculation
+    lastKills: number;
+    lastHitsTaken: number;
+    lastHitsDealt: number;
+    shotsFired: number;
+}
+
+
+/**
+ * Create a new fitness tracker
+ */
+export function createFitnessTracker(agentId: number): FitnessTracker {
+    return {
+        agentId,
+        fitness: 0,
+        lastKills: 0,
+        lastHitsTaken: 0,
+        lastHitsDealt: 0,
+        shotsFired: 0,
+    };
+}
+
+/**
+ * Update fitness based on current simulation state
+ */
+export function updateFitness(tracker: FitnessTracker, state: SimulationState): FitnessTracker {
+    const agent = state.agents.find(a => a.id === tracker.agentId)!;
+    const opponent = state.agents.find(a => a.id !== tracker.agentId)!;
+    
+    const newTracker = { ...tracker };
+    
+    // Reward for new kills
+    const newKills = agent.kills - tracker.lastKills;
+    newTracker.fitness += newKills * FITNESS_CONFIG.HIT_REWARD;
+    newTracker.lastKills = agent.kills;
+    
+    // Reward for HITS DEALT (Direct Damage)
+    // We infer hits dealt by checking opponent's hit counter increase
+    const currentHitsDealt = opponent.hits; // Assuming opponent.hits tracks times they were hit
+    const newHitsDealt = currentHitsDealt - tracker.lastHitsDealt;
+    
+    if (newHitsDealt > 0) {
+        // +2.0 per hit. 5 hits = 10 pts (Kill equivalent).
+        // Makes shooting visibly rewarding immediately.
+        newTracker.fitness += newHitsDealt * FITNESS_CONFIG.DAMAGE_REWARD; 
+    }
+    newTracker.lastHitsDealt = currentHitsDealt;
+
+    // Penalty for being hit (Hits Taken)
+    const newHitsTaken = agent.hits - tracker.lastHitsTaken;
+    newTracker.fitness -= newHitsTaken * FITNESS_CONFIG.HIT_PENALTY; 
+    newTracker.lastHitsTaken = agent.hits;
+    
+    // Time penalty (encourages finishing quickly)
+    newTracker.fitness -= FITNESS_CONFIG.TIME_PENALTY;
+    
+    // Check if agent fired this tick
+    if (agent.fireCooldown === 10) {
+        newTracker.shotsFired++;
+        newTracker.fitness -= FITNESS_CONFIG.SHOT_PENALTY; // Tiny penalty just to prevent spamming empty space
+    }
+    
+    // Reward for aiming at visible opponent (Guide Signal ONLY)
+    if (hasLineOfSight(agent, opponent, state.map.walls)) {
+        const dx = opponent.position.x - agent.position.x;
+        const dy = opponent.position.y - agent.position.y;
+        const angleToOpponent = Math.atan2(dy, dx);
+        
+        let angleDiff = angleToOpponent - agent.aimAngle;
+        while (angleDiff > Math.PI) angleDiff -= 2 * Math.PI;
+        while (angleDiff < -Math.PI) angleDiff += 2 * Math.PI;
+        
+        const cosAngleDiff = Math.cos(angleDiff);
+        
+        // Reduced from 0.05 to 0.005. 
+        // Max total aim points = 1.5. 
+        // One bullet hit (2.0) is worth more than perfect aiming all match.
+        newTracker.fitness += ((cosAngleDiff + 1) * 0.5) * FITNESS_CONFIG.AIM_REWARD;
+    }
+
+    // Small reward for movement
+    const speed = Math.sqrt(agent.velocity.x**2 + agent.velocity.y**2);
+    if (speed > 0.1) {
+        newTracker.fitness += FITNESS_CONFIG.MOVE_REWARD;
+    }
+    
+    return newTracker;
+}

src/lib/neatArena/genome.ts

@@ -0,0 +1,235 @@
+/**
+ * NEAT Genome Implementation
+ * 
+ * Represents a neural network genome with node genes and connection genes.
+ * Implements the core NEAT genome structure as described in the original paper.
+ */
+
+export type NodeType = 'input' | 'hidden' | 'output';
+export type ActivationFunction = 'tanh' | 'sigmoid' | 'relu' | 'linear';
+
+/**
+ * Node gene - represents a neuron
+ */
+export interface NodeGene {
+    id: number;
+    type: NodeType;
+    activation: ActivationFunction;
+}
+
+/**
+ * Connection gene - represents a synapse
+ */
+export interface ConnectionGene {
+    innovation: number;
+    from: number;
+    to: number;
+    weight: number;
+    enabled: boolean;
+}
+
+/**
+ * Complete genome
+ */
+/**
+ * Complete genome
+ */
+export interface Genome {
+    id: number;
+    nodes: NodeGene[];
+    connections: ConnectionGene[];
+    fitness: number;
+}
+
+/**
+ * Global innovation tracker for historical markings
+ */
+export class InnovationTracker {
+    private currentInnovation: number = 0;
+    private innovationHistory: Map<string, number> = new Map();
+
+    /**
+     * Get or create innovation number for a connection
+     */
+    getInnovation(from: number, to: number): number {
+        const key = `${from}->${to}`;
+        
+        if (this.innovationHistory.has(key)) {
+            return this.innovationHistory.get(key)!;
+        }
+        
+        const innovation = this.currentInnovation++;
+        this.innovationHistory.set(key, innovation);
+        return innovation;
+    }
+
+    /**
+     * Reset innovation tracking (useful for new experiments)
+     */
+    reset(): void {
+        this.currentInnovation = 0;
+        this.innovationHistory.clear();
+    }
+
+    /**
+     * Get current innovation count
+     */
+    getCurrentInnovation(): number {
+        return this.currentInnovation;
+    }
+}
+
+let nextGenomeId = 0;
+
+/**
+ * Create a minimal genome with only input and output nodes, fully connected
+ */
+export function createMinimalGenome(
+    inputCount: number,
+    outputCount: number,
+    innovationTracker: InnovationTracker
+): Genome {
+    const nodes: NodeGene[] = [];
+    const connections: ConnectionGene[] = [];
+
+    // Create input nodes (IDs 0 to inputCount-1)
+    // PLUS one extra for Bias
+    for (let i = 0; i < inputCount + 1; i++) {
+        nodes.push({
+            id: i,
+            type: 'input',
+            activation: 'linear',
+        });
+    }
+
+    // Create output nodes (IDs starting from inputCount + 1)
+    // Fix: Bias node uses ID `inputCount`, so outputs must start at `inputCount + 1`
+    for (let i = 0; i < outputCount; i++) {
+        nodes.push({
+            id: inputCount + 1 + i,
+            type: 'output',
+            activation: 'tanh',
+        });
+    }
+
+    // Create fully connected minimal genome
+    // Iterate through all inputs INCLUDING Bias
+    for (let i = 0; i < inputCount + 1; i++) {
+        const inputNode = i; 
+        
+        for (let o = 0; o < outputCount; o++) {
+            const outputNode = inputCount + 1 + o; // target the shifted output IDs
+            const innovation = innovationTracker.getInnovation(inputNode, outputNode);
+            
+            let weight = (Math.random() * 2.0) - 1.0; 
+
+            // FORCE AGGRESSION:
+            // If connection is from BIAS node (index == inputCount) TO SHOOT node (index 3 of output)
+            // Warning: Output indices are 0..4 relative to output block.
+            // Shoot is 4th output (moveX, moveY, turn, shoot, reserved).
+            if (inputNode === inputCount && o === 3) {
+                weight = 1.0 + Math.random(); // Range [1.0, 2.0] -> Strong Positive Bias
+            }
+
+            connections.push({
+                innovation,
+                from: inputNode,
+                to: outputNode,
+                weight,
+                enabled: true,
+            });
+        }
+    }
+
+    return {
+        id: nextGenomeId++,
+        nodes,
+        connections,
+        fitness: 0,
+    };
+}
+
+/**
+ * Clone a genome (deep copy)
+ */
+export function cloneGenome(genome: Genome): Genome {
+    return {
+        id: nextGenomeId++,
+        nodes: genome.nodes.map(n => ({ ...n })),
+        connections: genome.connections.map(c => ({ ...c })),
+        fitness: genome.fitness,
+    };
+}
+
+/**
+ * Get next available node ID
+ */
+export function getNextNodeId(genome: Genome): number {
+    return Math.max(...genome.nodes.map(n => n.id)) + 1;
+}
+
+/**
+ * Check if a connection already exists
+ */
+export function connectionExists(genome: Genome, from: number, to: number): boolean {
+    return genome.connections.some(c => c.from === from && c.to === to);
+}
+
+/**
+ * Check if adding a connection would create a cycle (for feedforward networks)
+ */
+export function wouldCreateCycle(genome: Genome, from: number, to: number): boolean {
+    // Build adjacency list
+    const adj = new Map<number, number[]>();
+    for (const node of genome.nodes) {
+        adj.set(node.id, []);
+    }
+    
+    for (const conn of genome.connections) {
+        if (!conn.enabled) continue;
+        if (!adj.has(conn.from)) adj.set(conn.from, []);
+        adj.get(conn.from)!.push(conn.to);
+    }
+    
+    // Add the proposed connection
+    if (!adj.has(from)) adj.set(from, []);
+    adj.get(from)!.push(to);
+    
+    // DFS to detect cycle
+    const visited = new Set<number>();
+    const recStack = new Set<number>();
+    
+    const hasCycle = (nodeId: number): boolean => {
+        visited.add(nodeId);
+        recStack.add(nodeId);
+        
+        const neighbors = adj.get(nodeId) || [];
+        for (const neighbor of neighbors) {
+            if (!visited.has(neighbor)) {
+                if (hasCycle(neighbor)) return true;
+            } else if (recStack.has(neighbor)) {
+                return true;
+            }
+        }
+        
+        recStack.delete(nodeId);
+        return false;
+    };
+    
+    // Check from the 'from' node
+    return hasCycle(from);
+}
+
+/**
+ * Serialize genome to JSON
+ */
+export function serializeGenome(genome: Genome): string {
+    return JSON.stringify(genome, null, 2);
+}
+
+/**
+ * Deserialize genome from JSON
+ */
+export function deserializeGenome(json: string): Genome {
+    return JSON.parse(json);
+}

src/lib/neatArena/mapGenerator.ts

@@ -0,0 +1,129 @@
+import type { ArenaMap, Wall, SpawnPoint, AABB, Vec2 } from './types';
+import { SIMULATION_CONFIG } from './types';
+import { SeededRandom } from './utils';
+
+/**
+ * Generates a symmetric arena map with procedurally placed walls.
+ * 
+ * The map is generated by creating walls on the left half, then mirroring them
+ * to the right half for perfect symmetry.
+ * 
+ * Spawn points are placed symmetrically as well.
+ */
+export function generateArenaMap(seed: number): ArenaMap {
+    const rng = new SeededRandom(seed);
+    const { WORLD_SIZE } = SIMULATION_CONFIG;
+    
+    const walls: Wall[] = [];
+    const spawnPoints: SpawnPoint[] = [];
+    
+    // Add boundary walls
+    const wallThickness = 16;
+    walls.push(
+        // Top
+        { rect: { minX: 0, minY: 0, maxX: WORLD_SIZE, maxY: wallThickness } },
+        // Bottom
+        { rect: { minX: 0, minY: WORLD_SIZE - wallThickness, maxX: WORLD_SIZE, maxY: WORLD_SIZE } },
+        // Left
+        { rect: { minX: 0, minY: 0, maxX: wallThickness, maxY: WORLD_SIZE } },
+        // Right
+        { rect: { minX: WORLD_SIZE - wallThickness, minY: 0, maxX: WORLD_SIZE, maxY: WORLD_SIZE } }
+    );
+    
+    // Generate interior walls on left half, then mirror
+    const numInteriorWalls = rng.nextInt(3, 6);
+    const leftHalfWalls: AABB[] = [];
+    
+    for (let i = 0; i < numInteriorWalls; i++) {
+        const width = rng.nextFloat(30, 80);
+        const height = rng.nextFloat(30, 80);
+        
+        // Keep walls in left half (with margin)
+        // CRITICAL: Leave a center lane open for Line of Sight!
+        // World is 512. Center is 256. Leave 60px gap (30px on each side).
+        // Max X for left wall = 256 - 30 = 226.
+        const minX = rng.nextFloat(wallThickness + 20, (WORLD_SIZE / 2) - width - 60);
+        const minY = rng.nextFloat(wallThickness + 20, WORLD_SIZE - height - wallThickness - 20);
+        
+        const wall: AABB = {
+            minX,
+            minY,
+            maxX: minX + width,
+            maxY: minY + height,
+        };
+        
+        leftHalfWalls.push(wall);
+        walls.push({ rect: wall });
+    }
+    
+    // Mirror walls to right half
+    for (const leftWall of leftHalfWalls) {
+        const centerX = WORLD_SIZE / 2;
+        const distFromCenter = centerX - ((leftWall.minX + leftWall.maxX) / 2);
+        const mirroredCenterX = centerX + distFromCenter;
+        const wallWidth = leftWall.maxX - leftWall.minX;
+        
+        const mirroredWall: AABB = {
+            minX: mirroredCenterX - wallWidth / 2,
+            maxX: mirroredCenterX + wallWidth / 2,
+            minY: leftWall.minY,
+            maxY: leftWall.maxY,
+        };
+        
+        walls.push({ rect: mirroredWall });
+    }
+    
+    // Generate 5 symmetric spawn point pairs
+    // Spawn points should be clear of walls
+    for (let pairId = 0; pairId < 5; pairId++) {
+        let leftSpawn: Vec2;
+        let attempts = 0;
+        
+        // Find a valid spawn point on the left
+        do {
+            leftSpawn = {
+                // Spawn in the central clear lane (guaranteed no walls)
+                // Center is 256. Lane is +/- 60.
+                // Spawn between 256-50 and 256-20 (left side of center)
+                x: rng.nextFloat(WORLD_SIZE / 2 - 50, WORLD_SIZE / 2 - 20),
+                y: rng.nextFloat(wallThickness + 40, WORLD_SIZE - wallThickness - 40),
+            };
+            attempts++;
+        } while (isPositionInWall(leftSpawn, walls) && attempts < 50);
+        
+        // Mirror to right
+        const rightSpawn: Vec2 = {
+            x: WORLD_SIZE - leftSpawn.x,
+            y: leftSpawn.y,
+        };
+        
+        spawnPoints.push(
+            { position: leftSpawn, pairId, side: 0 },
+            { position: rightSpawn, pairId, side: 1 }
+        );
+    }
+    
+    return {
+        walls,
+        spawnPoints,
+        seed,
+    };
+}
+
+/**
+ * Check if a position overlaps with any wall
+ */
+function isPositionInWall(pos: Vec2, walls: Wall[]): boolean {
+    const margin = 20; // give some breathing room
+    for (const wall of walls) {
+        if (
+            pos.x >= wall.rect.minX - margin &&
+            pos.x <= wall.rect.maxX + margin &&
+            pos.y >= wall.rect.minY - margin &&
+            pos.y <= wall.rect.maxY + margin
+        ) {
+            return true;
+        }
+    }
+    return false;
+}

src/lib/neatArena/mutations.ts

@@ -0,0 +1,219 @@
+import type { Genome, InnovationTracker } from './genome';
+import {
+    getNextNodeId,
+    connectionExists,
+    wouldCreateCycle,
+} from './genome';
+
+/**
+ * NEAT Mutations
+ * 
+ * Implements the core mutation operations:
+ * - Weight perturbation (80%)
+ * - Weight reset (10%)
+ * - Add connection (5%)
+ * - Add node (3%)
+ * - Toggle connection (2%)
+ */
+
+export interface MutationRates {
+    mutateWeightsProb: number;
+    resetWeightProb: number;
+    addConnectionProb: number;
+    addNodeProb: number;
+    toggleConnectionProb: number;
+    perturbationPower: number;
+    resetRange: number;
+}
+
+/**
+ * Default mutation probabilities
+ */
+export const DEFAULT_MUTATION_RATES: MutationRates = {
+    mutateWeightsProb: 0.80,      // Keep high for fine-tuning
+    resetWeightProb: 0.01,         // Low risk reset
+    addConnectionProb: 0.02,       // REDUCED (was 0.05): Stabilize architecture
+    addNodeProb: 0.01,             // REDUCED (was 0.03): Stop excessive growth
+    toggleConnectionProb: 0.01,    // Reduced
+
+    
+    // Weight mutation parameters
+    // Weight mutation parameters
+    perturbationPower: 0.1,        // Reduced from 0.5 to prevent re-saturation
+    resetRange: 0.5,               // Reduced from 2.0 for safer resets
+};
+
+/**
+ * Apply mutations to a genome
+ */
+export function mutate(genome: Genome, tracker: InnovationTracker, rates = DEFAULT_MUTATION_RATES): void {
+    let addedConnections = 0;
+    let addedNodes = 0;
+    let toggledConnections = 0;
+    
+    // Mutate weights
+    if (Math.random() < rates.mutateWeightsProb) {
+        mutateWeights(genome, rates);
+    }
+    
+    // Reset a random weight
+    if (Math.random() < rates.resetWeightProb) {
+        resetWeight(genome, rates);
+    }
+    
+    // Add connection
+    if (Math.random() < rates.addConnectionProb) {
+        if (addConnection(genome, tracker)) {
+            addedConnections++;
+        }
+    }
+    
+    // Add node
+    if (Math.random() < rates.addNodeProb) {
+        if (addNode(genome, tracker)) {
+            addedNodes++;
+        }
+    }
+    
+    // Toggle connection
+    if (Math.random() < rates.toggleConnectionProb) {
+        if (toggleConnection(genome)) {
+            toggledConnections++;
+        }
+    }
+    
+    // Log structural mutations (only if any happened)
+    if (addedConnections > 0 || addedNodes > 0 || toggledConnections > 0) {
+        // console.log(`[Mutation] +${addedConnections} conn, +${addedNodes} nodes, ${toggledConnections} toggled`);
+    }
+}
+
+/**
+ * Perturb weights slightly
+ */
+function mutateWeights(genome: Genome, rates: MutationRates): void {
+    for (const conn of genome.connections) {
+        if (Math.random() < 0.9) {
+            // Small perturbation
+            conn.weight += (Math.random() * 2 - 1) * rates.perturbationPower;
+            // Clamp to reasonable range
+            conn.weight = Math.max(-5, Math.min(5, conn.weight));
+        }
+    }
+}
+
+/**
+ * Reset a random weight to a new random value
+ */
+function resetWeight(genome: Genome, rates: MutationRates): void {
+    if (genome.connections.length === 0) return;
+
+    const conn = genome.connections[Math.floor(Math.random() * genome.connections.length)];
+    conn.weight = (Math.random() * 2 - 1) * rates.resetRange;
+}
+
+/**
+ * Add a new connection between two nodes
+ */
+function addConnection(genome: Genome, innovationTracker: InnovationTracker): boolean {
+    const inputNodes = genome.nodes.filter(n => n.type === 'input');
+    const nonInputNodes = genome.nodes.filter(n => n.type !== 'input');
+
+    if (inputNodes.length === 0 || nonInputNodes.length === 0) return false;
+
+    // Try to find a valid connection
+    let attempts = 0;
+    const maxAttempts = 20;
+
+    while (attempts < maxAttempts) {
+        // Random from node (any node)
+        const fromNode = genome.nodes[Math.floor(Math.random() * genome.nodes.length)];
+        // Random to node (not input)
+        const toNode = nonInputNodes[Math.floor(Math.random() * nonInputNodes.length)];
+
+        // Can't connect to itself
+        if (fromNode.id === toNode.id) {
+            attempts++;
+            continue;
+        }
+
+        // Check if connection already exists
+        if (connectionExists(genome, fromNode.id, toNode.id)) {
+            attempts++;
+            continue;
+        }
+
+        // Check if it would create a cycle
+        if (wouldCreateCycle(genome, fromNode.id, toNode.id)) {
+            attempts++;
+            continue;
+        }
+
+        // Valid connection!
+        genome.connections.push({
+            innovation: innovationTracker.getInnovation(fromNode.id, toNode.id),
+            from: fromNode.id,
+            to: toNode.id,
+            weight: (Math.random() * 2 - 1) * 2, // [-2, 2]
+            enabled: true,
+        });
+
+        return true;
+    }
+    
+    return false;
+}
+
+/**
+ * Add a new node by splitting an existing connection
+ */
+function addNode(genome: Genome, innovationTracker: InnovationTracker): boolean {
+    const enabledConnections = genome.connections.filter(c => c.enabled);
+    if (enabledConnections.length === 0) return false;
+
+    // Pick a random enabled connection
+    const conn = enabledConnections[Math.floor(Math.random() * enabledConnections.length)];
+
+    // Disable the old connection
+    conn.enabled = false;
+
+    // Create new node
+    const newNodeId = getNextNodeId(genome);
+    genome.nodes.push({
+        id: newNodeId,
+        type: 'hidden',
+        activation: 'tanh',
+    });
+
+    // Create two new connections:
+    // 1. from -> newNode (weight = 1.0)
+    genome.connections.push({
+        innovation: innovationTracker.getInnovation(conn.from, newNodeId),
+        from: conn.from,
+        to: newNodeId,
+        weight: 1.0,
+        enabled: true,
+    });
+
+    // 2. newNode -> to (weight = old connection's weight)
+    genome.connections.push({
+        innovation: innovationTracker.getInnovation(newNodeId, conn.to),
+        from: newNodeId,
+        to: conn.to,
+        weight: conn.weight,
+        enabled: true,
+    });
+    
+    return true;
+}
+
+/**
+ * Toggle a random connection's enabled state
+ */
+function toggleConnection(genome: Genome): boolean {
+    if (genome.connections.length === 0) return false;
+
+    const conn = genome.connections[Math.floor(Math.random() * genome.connections.length)];
+    conn.enabled = !conn.enabled;
+    return true;
+}

src/lib/neatArena/network.ts

@@ -0,0 +1,183 @@
+import type { Genome, ActivationFunction } from './genome';
+
+/**
+ * Feedforward neural network built from a NEAT genome.
+ * 
+ * The network is built by topologically sorting the nodes and
+ * evaluating them in order to ensure feedforward behavior.
+ */
+
+interface NetworkNode {
+    id: number;
+    activation: ActivationFunction;
+    inputs: { weight: number; sourceId: number }[];
+    value: number;
+}
+
+export class NeuralNetwork {
+    private inputNodes: number[];
+    private outputNodes: number[];
+    private nodes: Map<number, NetworkNode>;
+    private evaluationOrder: number[];
+
+    constructor(genome: Genome) {
+        this.inputNodes = [];
+        this.outputNodes = [];
+        this.nodes = new Map();
+        this.evaluationOrder = [];
+
+        this.buildNetwork(genome);
+    }
+
+    /**
+     * Build the network from the genome
+     */
+    private buildNetwork(genome: Genome): void {
+        // Create network nodes
+        for (const nodeGene of genome.nodes) {
+            this.nodes.set(nodeGene.id, {
+                id: nodeGene.id,
+                activation: nodeGene.activation,
+                inputs: [],
+                value: 0,
+            });
+
+            if (nodeGene.type === 'input') {
+                this.inputNodes.push(nodeGene.id);
+            } else if (nodeGene.type === 'output') {
+                this.outputNodes.push(nodeGene.id);
+            }
+        }
+
+        // Add connections
+        for (const conn of genome.connections) {
+            if (!conn.enabled) continue;
+
+            const targetNode = this.nodes.get(conn.to);
+            if (targetNode) {
+                targetNode.inputs.push({
+                    weight: conn.weight,
+                    sourceId: conn.from,
+                });
+            }
+        }
+
+        // Compute evaluation order (topological sort)
+        this.evaluationOrder = this.topologicalSort(genome);
+    }
+
+    /**
+     * Topological sort to determine evaluation order
+     */
+    private topologicalSort(genome: Genome): number[] {
+        const inDegree = new Map<number, number>();
+        const adj = new Map<number, number[]>();
+
+        // Initialize
+        for (const node of genome.nodes) {
+            inDegree.set(node.id, 0);
+            adj.set(node.id, []);
+        }
+
+        // Build adjacency list and in-degrees
+        for (const conn of genome.connections) {
+            if (!conn.enabled) continue;
+            
+            adj.get(conn.from)!.push(conn.to);
+            inDegree.set(conn.to, (inDegree.get(conn.to) || 0) + 1);
+        }
+
+        // Kahn's algorithm
+        const queue: number[] = [];
+        const order: number[] = [];
+
+        // Start with nodes that have no incoming edges
+        for (const [nodeId, degree] of inDegree.entries()) {
+            if (degree === 0) {
+                queue.push(nodeId);
+            }
+        }
+
+        while (queue.length > 0) {
+            const nodeId = queue.shift()!;
+            order.push(nodeId);
+
+            for (const neighbor of adj.get(nodeId) || []) {
+                inDegree.set(neighbor, inDegree.get(neighbor)! - 1);
+                if (inDegree.get(neighbor) === 0) {
+                    queue.push(neighbor);
+                }
+            }
+        }
+
+        return order;
+    }
+
+    /**
+     * Activate the network with inputs and return outputs
+     */
+    activate(inputs: number[]): number[] {
+        if (inputs.length !== this.inputNodes.length) {
+            throw new Error(`Expected ${this.inputNodes.length} inputs, got ${inputs.length}`);
+        }
+
+        // Reset all node values
+        for (const node of this.nodes.values()) {
+            node.value = 0;
+        }
+
+        // Set input values
+        for (let i = 0; i < this.inputNodes.length; i++) {
+            const node = this.nodes.get(this.inputNodes[i])!;
+            node.value = inputs[i];
+        }
+
+        // Evaluate nodes in topological order
+        for (const nodeId of this.evaluationOrder) {
+            const node = this.nodes.get(nodeId)!;
+
+            // Skip input nodes (already set)
+            if (this.inputNodes.includes(nodeId)) continue;
+
+            // Sum weighted inputs
+            let sum = 0;
+            for (const input of node.inputs) {
+                const sourceNode = this.nodes.get(input.sourceId);
+                if (sourceNode) {
+                    sum += sourceNode.value * input.weight;
+                }
+            }
+
+            // Apply activation function
+            node.value = this.applyActivation(sum, node.activation);
+        }
+
+        // Collect output values
+        return this.outputNodes.map(id => this.nodes.get(id)!.value);
+    }
+
+    /**
+     * Apply activation function
+     */
+    private applyActivation(x: number, activation: ActivationFunction): number {
+        switch (activation) {
+            case 'tanh':
+                return Math.tanh(x);
+            case 'sigmoid':
+                return 1 / (1 + Math.exp(-x));
+            case 'relu':
+                return Math.max(0, x);
+            case 'linear':
+                return x;
+            default:
+                return Math.tanh(x);
+        }
+    }
+}
+
+/**
+ * Create a neural network from a genome
+ */
+export function createNetwork(genome: Genome): NeuralNetwork {
+    return new NeuralNetwork(genome);
+}