Spaces:

Vikingdude81
/

memory-agent-demo

Sleeping

App Files Files Community

dixiebone13-a11y commited on Feb 6

Commit

82e6bed

0 Parent(s):

v2.5: Full rewrite - Vite+React+Tailwind build, all 13 audit fixes

Browse files

Files changed (15) hide show

.gitignore +4 -0
Dockerfile +26 -0
README.md +54 -0
index.html +12 -0
package.json +23 -0
postcss.config.js +6 -0
src/App.jsx +403 -0
src/components/AgentBar.jsx +44 -0
src/components/Icons.jsx +65 -0
src/components/MiniGraph.jsx +58 -0
src/components/UI.jsx +46 -0
src/index.css +3 -0
src/main.jsx +10 -0
tailwind.config.js +6 -0
vite.config.js +7 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,4 @@

+node_modules
+dist
+.DS_Store
+*.local

Dockerfile ADDED Viewed

	@@ -0,0 +1,26 @@

+FROM node:20-slim AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 7860
+COPY <<'EOF' /etc/nginx/nginx.conf
+worker_processes auto;
+events { worker_connections 1024; }
+http {
+  include /etc/nginx/mime.types;
+  server {
+    listen 7860;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}
+EOF
+CMD ["nginx", "-g", "daemon off;"]

README.md ADDED Viewed

	@@ -0,0 +1,54 @@

+---
+title: NeuroSort Memory Agent Demo
+emoji: 🧠
+colorFrom: blue
+colorTo: pink
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+short_description: Stochastic vs memory-augmented AI agents
+---
+# 🧠 NeuroSort: Memory-Augmented Agent Simulation
+**A real-time visualization comparing two AI agent strategies for navigating obstacle-rich environments.**
+## What Is This?
+NeuroSort demonstrates a key concept in AI agent design: **frustration memory**.
+When agents encounter obstacles that cause failures (and penalties), a naive stochastic agent keeps trying randomly—wasting time and resources. A memory-augmented agent *learns from frustration* and adapts its behavior, avoiding repeated mistakes.
+## The Two Agents
+| Agent | Strategy | Color |
+|-------|----------|-------|
+| **THREAD_A::BASELINE** | Pure stochastic (random) decisions | 🔵 Cyan |
+| **THREAD_B::MEMORY** | Frustration-aware adaptive logic | 🟣 Fuchsia |
+## How It Works
+1. **The Task**: Both agents try to sort an array (bubble sort style)
+2. **The Catch**: Some elements are "heavy" obstacles (gray bars) with 90% failure rate
+3. **Failure Penalty**: When an agent fails, it gets *stunned* for several cycles (amber glow)
+4. **Memory Advantage**: The memory agent tracks frustration per element—high frustration = skip and try elsewhere
+## Controls
+- **Obstacle Density**: % of heavy elements (requires reset)
+- **Stun Penalty**: How long agents are frozen after failure
+- **Memory Decay**: How fast frustration fades (higher = longer memory)
+## Key Insight
+Over time, the **Memory Agent (fuchsia)** consistently achieves:
+- ✅ More successful moves
+- ✅ Fewer crashes
+- ✅ Smarter resource allocation
+## Tech
+React 18 + Vite + Tailwind CSS, deployed as Docker on HuggingFace Spaces.
+*Part of the [Harmonic Field Consciousness](https://github.com/vfd-org/harmonic-field-consciousness) research project*

index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NeuroSort - Memory Agent Demo</title>
+  </head>
+  <body class="bg-slate-950">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,23 @@

+{
+  "name": "memory-agent-demo",
+  "private": true,
+  "version": "2.5.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.454.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
+    "vite": "^6.0.2"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.jsx ADDED Viewed

	@@ -0,0 +1,403 @@

+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Play, Pause, RotateCcw, Zap, Brain, Settings, Activity, Cpu } from './components/Icons';
+import { NeoCard, NeoBadge, Slider } from './components/UI';
+import AgentBar from './components/AgentBar';
+import MiniGraph from './components/MiniGraph';
+const ARRAY_SIZE = 50;
+const HISTORY_LENGTH = 100;
+// --- Data Generation (fix #7: flat .map instead of JSON round-trip) ---
+const generateData = (size, heavyChance) =>
+  Array.from({ length: size }, (_, i) => ({
+    id: i,
+    value: Math.floor(Math.random() * 90) + 10,
+    isHeavy: Math.random() < heavyChance,
+    frustration: 0,
+    lastAction: null,
+    recovery: 0,
+  }));
+const cloneData = (data) =>
+  data.map(d => ({ ...d }));
+// --- Fix #6: Unified agent step logic ---
+// Returns { data, moves, attempts, wasted, stunned }
+const runAgentStep = (prevData, params, useMemory) => {
+  const next = prevData.map(d => ({ ...d }));
+  let moves = 0, attempts = 0, wasted = 0, stunned = 0;
+  // Decay frustration & tick recovery for memory agent
+  if (useMemory) {
+    for (let i = 0; i < next.length; i++) {
+      next[i].frustration = Math.max(0, next[i].frustration * params.memoryDecay);
+      if (next[i].recovery > 0) {
+        next[i].recovery--;
+        next[i].lastAction = 'stun';
+        stunned++;
+      }
+    }
+  } else {
+    for (let i = 0; i < next.length; i++) {
+      if (next[i].recovery > 0) {
+        next[i].recovery--;
+        next[i].lastAction = 'stun';
+        stunned++;
+      }
+    }
+  }
+  for (let i = 0; i < next.length - 1; i++) {
+    if (next[i].recovery > 0) continue;
+    if (next[i].value > next[i + 1].value) {
+      if (next[i + 1].recovery > 0) {
+        next[i].lastAction = 'wait';
+        continue;
+      }
+      // Memory agent: frustration reduces willingness to attempt
+      let effectiveTemp = params.initialTemp;
+      if (useMemory) {
+        const frustPenalty = next[i].frustration * 0.25;
+        effectiveTemp = Math.max(0.01, Math.min(1.0, params.initialTemp - frustPenalty));
+      }
+      if (Math.random() < effectiveTemp) {
+        attempts++;
+        const failureChance = (next[i].isHeavy || next[i + 1].isHeavy) ? 0.9 : 0.0;
+        if (Math.random() > failureChance) {
+          // Successful swap
+          const tmp = next[i];
+          next[i] = next[i + 1];
+          next[i + 1] = tmp;
+          moves++;
+          next[i].lastAction = 'swap';
+          next[i + 1].lastAction = 'swap';
+          if (useMemory) {
+            next[i].frustration *= 0.5;
+            next[i + 1].frustration *= 0.5;
+          }
+        } else {
+          // Failed
+          wasted++;
+          next[i].lastAction = 'fail';
+          next[i].recovery = params.stunPenalty;
+          if (useMemory) {
+            next[i].frustration += 1.0;
+          }
+        }
+      } else {
+        next[i].lastAction = useMemory ? 'skip' : 'wait';
+      }
+    } else {
+      next[i].lastAction = null;
+    }
+  }
+  return { data: next, moves, attempts, wasted, stunned };
+};
+// ============================================================
+export default function App() {
+  const [params, setParams] = useState({
+    heavyChance: 0.25,
+    stunPenalty: 12,
+    memoryDecay: 0.95,
+    initialTemp: 0.8,
+  });
+  const [baselineData, setBaselineData] = useState([]);
+  const [memoryData, setMemoryData] = useState([]);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [frame, setFrame] = useState(0);
+  const [stats, setStats] = useState({
+    baseline: { moves: 0, attempts: 0, wasted: 0, stunned: 0 },
+    memory: { moves: 0, attempts: 0, wasted: 0, stunned: 0 },
+  });
+  const [history, setHistory] = useState([]);
+  // Refs for the simulation loop (fix #5, #11: single timer source of truth)
+  const timerRef = useRef(null);
+  const paramsRef = useRef(params);
+  const baselineRef = useRef(baselineData);
+  const memoryRef = useRef(memoryData);
+  const statsRef = useRef(stats);
+  const frameRef = useRef(0);
+  // Keep refs synced
+  useEffect(() => { paramsRef.current = params; }, [params]);
+  // Init on mount
+  useEffect(() => { resetSim(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  // Fix #9: Stable callbacks
+  const resetSim = useCallback(() => {
+    clearInterval(timerRef.current);
+    const data = generateData(ARRAY_SIZE, paramsRef.current.heavyChance);
+    const b = cloneData(data);
+    const m = cloneData(data);
+    setBaselineData(b);
+    setMemoryData(m);
+    baselineRef.current = b;
+    memoryRef.current = m;
+    const s = {
+      baseline: { moves: 0, attempts: 0, wasted: 0, stunned: 0 },
+      memory: { moves: 0, attempts: 0, wasted: 0, stunned: 0 },
+    };
+    setStats(s);
+    statsRef.current = s;
+    setHistory([]);
+    setFrame(0);
+    frameRef.current = 0;
+    setIsPlaying(false);
+  }, []);
+  const togglePlay = useCallback(() => {
+    setIsPlaying(prev => !prev);
+  }, []);
+  // Fix #5: Flat step — no nested state updaters
+  const step = useCallback(() => {
+    const p = paramsRef.current;
+    frameRef.current++;
+    const f = frameRef.current;
+    // Run both agents
+    const bResult = runAgentStep(baselineRef.current, p, false);
+    const mResult = runAgentStep(memoryRef.current, p, true);
+    // Update refs
+    baselineRef.current = bResult.data;
+    memoryRef.current = mResult.data;
+    // Accumulate stats
+    const prev = statsRef.current;
+    const nextStats = {
+      baseline: {
+        moves: prev.baseline.moves + bResult.moves,
+        attempts: prev.baseline.attempts + bResult.attempts,
+        wasted: prev.baseline.wasted + bResult.wasted,
+        stunned: prev.baseline.stunned + bResult.stunned,
+      },
+      memory: {
+        moves: prev.memory.moves + mResult.moves,
+        attempts: prev.memory.attempts + mResult.attempts,
+        wasted: prev.memory.wasted + mResult.wasted,
+        stunned: prev.memory.stunned + mResult.stunned,
+      },
+    };
+    statsRef.current = nextStats;
+    // Batch all state updates (flat, no nesting)
+    setBaselineData(bResult.data);
+    setMemoryData(mResult.data);
+    setStats(nextStats);
+    setFrame(f);
+    if (f % 5 === 0) {
+      setHistory(prev => {
+        const point = { frame: f, baseline: nextStats.baseline.moves, memory: nextStats.memory.moves };
+        const next = [...prev, point];
+        if (next.length > HISTORY_LENGTH) next.shift();
+        return next;
+      });
+    }
+  }, []);
+  // Fix #11: Single timer source of truth — only useEffect manages the interval
+  useEffect(() => {
+    if (isPlaying) {
+      timerRef.current = setInterval(step, 40);
+    } else {
+      clearInterval(timerRef.current);
+    }
+    return () => clearInterval(timerRef.current);
+  }, [isPlaying, step]);
+  // Fix #12: Stable slider handlers
+  const onHeavyChance = useCallback((e) => setParams(p => ({ ...p, heavyChance: parseFloat(e.target.value) / 100 })), []);
+  const onStunPenalty = useCallback((e) => setParams(p => ({ ...p, stunPenalty: parseFloat(e.target.value) })), []);
+  const onMemoryDecay = useCallback((e) => setParams(p => ({ ...p, memoryDecay: parseFloat(e.target.value) })), []);
+  return (
+    <div className="min-h-screen bg-slate-950 p-6 font-sans text-slate-200 selection:bg-cyan-900 selection:text-cyan-100">
+      {/* Grid background */}
+      <div
+        className="fixed inset-0 pointer-events-none opacity-20"
+        style={{
+          backgroundImage: 'linear-gradient(#1e293b 1px, transparent 1px), linear-gradient(90deg, #1e293b 1px, transparent 1px)',
+          backgroundSize: '40px 40px',
+        }}
+      />
+      <div className="max-w-6xl mx-auto space-y-6 relative z-10">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-slate-800 pb-6">
+          <div>
+            <h1 className="text-3xl font-black tracking-tighter text-white flex items-center gap-3 uppercase">
+              <Cpu className="w-8 h-8 text-cyan-500 animate-pulse" />
+              <span className="bg-gradient-to-r from-cyan-400 to-fuchsia-500 text-transparent bg-clip-text">
+                NeuroSort
+              </span>
+              <span className="text-xs font-mono text-slate-500 border border-slate-800 px-2 py-1 rounded">V2.5.0</span>
+            </h1>
+            <p className="text-slate-500 mt-2 font-mono text-sm max-w-lg">
+              Comparative simulation of Stochastic Agents vs. Memory-Augmented Frustration Logic in obstacle-rich environments.
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <button
+              onClick={togglePlay}
+              className={`flex items-center gap-2 px-6 py-3 rounded-none font-bold tracking-widest uppercase transition-all border border-transparent shadow-lg hover:shadow-cyan-500/20 ${
+                isPlaying
+                  ? 'bg-amber-500/10 text-amber-500 border-amber-500/50 hover:bg-amber-500/20'
+                  : 'bg-cyan-600 hover:bg-cyan-500 text-black'
+              }`}
+            >
+              {isPlaying ? <><Pause /> HALT</> : <><Play /> EXECUTE</>}
+            </button>
+            <button
+              onClick={resetSim}
+              className="p-3 text-cyan-500 border border-slate-700 hover:border-cyan-500/50 hover:bg-slate-800 transition-all bg-slate-900"
+              title="Reset Simulation"
+              aria-label="Reset simulation"
+            >
+              <RotateCcw />
+            </button>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          {/* Left Column — Controls */}
+          <div className="lg:col-span-1 space-y-6">
+            <NeoCard className="p-5">
+              <div className="flex items-center gap-2 mb-6 text-cyan-400 border-b border-slate-800 pb-2">
+                <Settings />
+                <h3 className="font-bold uppercase tracking-widest text-sm">Sys.Config</h3>
+              </div>
+              <Slider
+                label="Obstacle Density"
+                value={Math.round(params.heavyChance * 100)}
+                min={5} max={50} step={5} unit="%"
+                onChange={onHeavyChance}
+              />
+              <div className="text-[10px] text-slate-500 mb-4 text-right">*Requires Reset</div>
+              <Slider
+                label="Stun Penalty"
+                value={params.stunPenalty}
+                min={0} max={30} step={2} unit="ms"
+                onChange={onStunPenalty}
+              />
+              <Slider
+                label="Memory Decay"
+                value={params.memoryDecay}
+                min={0.80} max={0.99} step={0.01} unit=""
+                onChange={onMemoryDecay}
+              />
+            </NeoCard>
+            <NeoCard className="p-5 h-64 flex flex-col">
+              <div className="flex items-center justify-between gap-2 mb-4 text-fuchsia-400 border-b border-slate-800 pb-2">
+                <div className="flex items-center gap-2">
+                  <Activity />
+                  <h3 className="font-bold uppercase tracking-widest text-sm">Throughput</h3>
+                </div>
+                <span className="text-[10px] text-slate-500 font-mono">MOVES / TIME</span>
+              </div>
+              <div className="flex-1 w-full relative">
+                <MiniGraph data={history} />
+              </div>
+              <div className="flex justify-between text-[10px] font-mono mt-2">
+                <span className="text-cyan-400">● BASELINE</span>
+                <span className="text-fuchsia-400">● MEMORY</span>
+              </div>
+            </NeoCard>
+          </div>
+          {/* Right Column — Agent Visualizations */}
+          <div className="lg:col-span-3 space-y-6">
+            {/* Baseline Agent */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center px-1">
+                <div className="flex items-center gap-2">
+                  <Zap className="w-4 h-4 text-cyan-400" />
+                  <span className="font-mono text-sm tracking-wider text-cyan-100">THREAD_A::BASELINE</span>
+                  <NeoBadge color="cyan">STOCHASTIC</NeoBadge>
+                </div>
+                <div className="font-mono text-xs flex gap-4">
+                  <span className="text-slate-400">MOVES: <span className="text-cyan-400 text-lg">{stats.baseline.moves}</span></span>
+                  <span className="text-slate-400">CRASH: <span className="text-red-400 text-lg">{stats.baseline.wasted}</span></span>
+                </div>
+              </div>
+              <NeoCard className="h-48 p-4 flex items-end bg-slate-900/50" aria-label="Baseline agent sorting visualization">
+                {baselineData.map((item) => (
+                  <AgentBar
+                    key={item.id}
+                    value={item.value}
+                    isHeavy={item.isHeavy}
+                    lastAction={item.lastAction}
+                    frustration={item.frustration}
+                    isMemoryAgent={false}
+                  />
+                ))}
+              </NeoCard>
+            </div>
+            {/* Memory Agent */}
+            <div className="space-y-2">
+              <div className="flex justify-between items-center px-1">
+                <div className="flex items-center gap-2">
+                  <Brain className="w-4 h-4 text-fuchsia-400" />
+                  <span className="font-mono text-sm tracking-wider text-fuchsia-100">THREAD_B::MEMORY</span>
+                  <NeoBadge color="pink">ADAPTIVE</NeoBadge>
+                </div>
+                <div className="font-mono text-xs flex gap-4">
+                  <span className="text-slate-400">MOVES: <span className="text-fuchsia-400 text-lg">{stats.memory.moves}</span></span>
+                  <span className="text-slate-400">CRASH: <span className="text-green-400 text-lg">{stats.memory.wasted}</span></span>
+                </div>
+              </div>
+              <NeoCard className="h-48 p-4 flex items-end bg-slate-900/50 border-fuchsia-900/50" aria-label="Memory agent sorting visualization">
+                {memoryData.map((item) => (
+                  <AgentBar
+                    key={item.id}
+                    value={item.value}
+                    isHeavy={item.isHeavy}
+                    lastAction={item.lastAction}
+                    frustration={item.frustration}
+                    isMemoryAgent={true}
+                  />
+                ))}
+              </NeoCard>
+            </div>
+            {/* Legend */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs font-mono text-slate-500 pt-4 border-t border-slate-800">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 bg-slate-700 border border-slate-600" />
+                <span>OBSTACLE (HEAVY)</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 bg-amber-500 animate-pulse" />
+                <span>STUNNED (PENALTY)</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-fuchsia-500">██</span>
+                <span>FRUSTRATION MEMORY</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-slate-500 border border-slate-700 px-1 rounded">WAIT</span>
+                <span>SKIPPING (SMART)</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AgentBar.jsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import React from 'react';
+// Fix #4: Memoized bar component — only re-renders when its own data changes
+const AgentBar = React.memo(({ value, isHeavy, lastAction, frustration, isMemoryAgent }) => {
+  const f = Math.min(5, frustration) / 5;
+  let barColor = isMemoryAgent
+    ? 'bg-fuchsia-500 shadow-[0_0_8px_#d946ef]'
+    : 'bg-cyan-500 shadow-[0_0_8px_#06b6d4]';
+  let opacity = 'opacity-100';
+  if (isHeavy) barColor = 'bg-slate-700 border border-slate-600';
+  if (lastAction === 'stun') barColor = 'bg-amber-500 shadow-[0_0_10px_#f59e0b] animate-pulse';
+  if (lastAction === 'fail') barColor = 'bg-red-500 shadow-[0_0_15px_#ef4444]';
+  if (lastAction === 'skip') opacity = 'opacity-40';
+  return (
+    <div
+      className="flex-1 flex flex-col justify-end items-center group relative mx-[1px]"
+      style={{ height: '140px' }}
+      role="img"
+      aria-label={`Value ${value}, ${isHeavy ? 'obstacle' : 'normal'}${lastAction ? `, ${lastAction}` : ''}`}
+    >
+      {isMemoryAgent && frustration > 0.1 && lastAction !== 'stun' && (
+        <div
+          className="w-full absolute bottom-0 z-10 pointer-events-none transition-all duration-200 bg-red-600 mix-blend-overlay"
+          style={{ height: `${value}%`, opacity: f }}
+        />
+      )}
+      <div className="absolute -top-6 flex flex-col items-center h-6 justify-end pointer-events-none">
+        {lastAction === 'fail' && <span className="text-red-500 font-bold text-[10px]">✕</span>}
+        {lastAction === 'skip' && <span className="text-slate-500 font-mono text-[10px]">WAIT</span>}
+        {lastAction === 'stun' && <span className="text-amber-400 font-bold text-[10px]">ERR</span>}
+      </div>
+      <div
+        className={`w-full rounded-sm transition-all duration-75 ${barColor} ${opacity}`}
+        style={{ height: `${value}%` }}
+      />
+    </div>
+  );
+});
+AgentBar.displayName = 'AgentBar';
+export default AgentBar;

src/components/Icons.jsx ADDED Viewed

	@@ -0,0 +1,65 @@

+import React from 'react';
+// Fix #3: All icons accept and spread props (className, size, etc.)
+export const Play = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polygon points="5 3 19 12 5 21 5 3" />
+  </svg>
+);
+export const Pause = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect x="6" y="4" width="4" height="16" /><rect x="14" y="4" width="4" height="16" />
+  </svg>
+);
+export const RotateCcw = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
+  </svg>
+);
+export const Zap = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+  </svg>
+);
+export const Brain = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
+    <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
+  </svg>
+);
+export const Settings = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </svg>
+);
+export const Activity = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+  </svg>
+);
+export const Cpu = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+    fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
+    <rect x="9" y="9" width="6" height="6" />
+    <line x1="9" y1="1" x2="9" y2="4" /><line x1="15" y1="1" x2="15" y2="4" />
+    <line x1="9" y1="20" x2="9" y2="23" /><line x1="15" y1="20" x2="15" y2="23" />
+    <line x1="20" y1="9" x2="23" y2="9" /><line x1="20" y1="14" x2="23" y2="14" />
+    <line x1="1" y1="9" x2="4" y2="9" /><line x1="1" y1="14" x2="4" y2="14" />
+  </svg>
+);

src/components/MiniGraph.jsx ADDED Viewed

	@@ -0,0 +1,58 @@

+import React, { useMemo } from 'react';
+// Fix #10: Memoized graph with computed max
+const MiniGraph = React.memo(({ data }) => {
+  const maxVal = useMemo(() => {
+    let m = 10;
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].baseline > m) m = data[i].baseline;
+      if (data[i].memory > m) m = data[i].memory;
+    }
+    return m;
+  }, [data]);
+  if (data.length < 2) {
+    return (
+      <div className="h-full w-full flex items-center justify-center text-slate-700 text-xs font-mono">
+        WAITING FOR DATA...
+      </div>
+    );
+  }
+  const width = 100;
+  const height = 100;
+  const makePath = (key) => {
+    let points = '';
+    for (let i = 0; i < data.length; i++) {
+      const x = (i / (data.length - 1)) * width;
+      const y = height - (data[i][key] / maxVal) * height;
+      if (i > 0) points += ' ';
+      points += `${x},${y}`;
+    }
+    return points;
+  };
+  return (
+    <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full overflow-visible" role="img" aria-label="Throughput comparison graph">
+      <line x1="0" y1="25" x2="100" y2="25" stroke="#334155" strokeWidth="0.5" strokeDasharray="2" />
+      <line x1="0" y1="50" x2="100" y2="50" stroke="#334155" strokeWidth="0.5" strokeDasharray="2" />
+      <line x1="0" y1="75" x2="100" y2="75" stroke="#334155" strokeWidth="0.5" strokeDasharray="2" />
+      <polyline
+        points={makePath('baseline')}
+        fill="none" stroke="#06b6d4" strokeWidth="2"
+        vectorEffect="non-scaling-stroke"
+        style={{ filter: 'drop-shadow(0 0 3px rgba(6,182,212,0.8))' }}
+      />
+      <polyline
+        points={makePath('memory')}
+        fill="none" stroke="#d946ef" strokeWidth="2"
+        vectorEffect="non-scaling-stroke"
+        style={{ filter: 'drop-shadow(0 0 3px rgba(217,70,239,0.8))' }}
+      />
+    </svg>
+  );
+});
+MiniGraph.displayName = 'MiniGraph';
+export default MiniGraph;

src/components/UI.jsx ADDED Viewed

	@@ -0,0 +1,46 @@

+import React from 'react';
+export const NeoCard = ({ children, className = '', noBorder = false }) => (
+  <div className={`bg-slate-900/80 backdrop-blur-sm rounded-none border ${noBorder ? 'border-transparent' : 'border-slate-700'} shadow-lg relative overflow-hidden ${className}`}>
+    {!noBorder && (
+      <>
+        <div className="absolute top-0 left-0 w-2 h-2 border-t border-l border-cyan-500/50" />
+        <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-cyan-500/50" />
+        <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-cyan-500/50" />
+        <div className="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-cyan-500/50" />
+      </>
+    )}
+    {children}
+  </div>
+);
+export const NeoBadge = ({ children, color = 'cyan' }) => {
+  const styles = {
+    cyan: 'bg-cyan-900/30 text-cyan-400 border-cyan-500/30 shadow-[0_0_10px_rgba(34,211,238,0.2)]',
+    pink: 'bg-fuchsia-900/30 text-fuchsia-400 border-fuchsia-500/30 shadow-[0_0_10px_rgba(232,121,249,0.2)]',
+    red: 'bg-red-900/30 text-red-400 border-red-500/30',
+    amber: 'bg-amber-900/30 text-amber-400 border-amber-500/30',
+  };
+  return (
+    <span className={`px-2 py-1 rounded-none border text-xs font-mono tracking-wider ${styles[color] || styles.cyan}`}>
+      {children}
+    </span>
+  );
+};
+// Fix #12: Stable slider component — onChange receives raw float, no inline closure needed
+export const Slider = ({ label, value, onChange, min, max, step, unit }) => (
+  <div className="flex flex-col gap-1 mb-3">
+    <label className="flex justify-between text-xs font-mono text-slate-400">
+      <span className="uppercase tracking-widest">{label}</span>
+      <span className="text-cyan-400">{value}{unit}</span>
+    </label>
+    <input
+      type="range"
+      min={min} max={max} step={step}
+      value={value}
+      onChange={onChange}
+      className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-cyan-500 hover:accent-cyan-400"
+    />
+  </div>
+);

src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,jsx}'],
+  theme: { extend: {} },
+  plugins: [],
+};

vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: { host: '0.0.0.0', port: 7860 },
+});