warp-agent 1.0.0

package/public/camera.js

@@ -0,0 +1,214 @@
+/**
+ * Camera Bubble & Audio-Reactive Voice Ring Visualizer
+ * Streams user's webcam and animates an audio visualizer ring based on voice input.
+ */
+
+class CameraStudio {
+  constructor() {
+    this.videoEl = document.getElementById('webcamVideo');
+    this.canvasEl = document.getElementById('audioVisualizerRing');
+    this.ctx = this.canvasEl ? this.canvasEl.getContext('2d') : null;
+    this.placeholderEl = document.getElementById('cameraPlaceholder');
+    this.dockEl = document.getElementById('cameraDock');
+    
+    this.camToggleBtn = document.getElementById('camToggleBtn');
+    this.micToggleBtn = document.getElementById('micToggleBtn');
+    this.dockCycleBtn = document.getElementById('dockCycleBtn');
+
+    this.stream = null;
+    this.audioCtx = null;
+    this.analyser = null;
+    this.dataArray = null;
+    this.isCamActive = false;
+    this.isMicActive = true;
+    this.dockPositions = ['dock-bottom-right', 'dock-bottom-left', 'dock-top-right'];
+    this.currentDockIndex = 0;
+
+    this.initListeners();
+    this.startSimulatedRing(); // subtle glow before mic permission
+  }
+
+  initListeners() {
+    if (this.placeholderEl) {
+      this.placeholderEl.addEventListener('click', () => this.enableWebcam());
+    }
+    if (this.camToggleBtn) {
+      this.camToggleBtn.addEventListener('click', () => this.toggleWebcam());
+    }
+    if (this.micToggleBtn) {
+      this.micToggleBtn.addEventListener('click', () => this.toggleMic());
+    }
+    if (this.dockCycleBtn) {
+      this.dockCycleBtn.addEventListener('click', () => this.cycleDockPosition());
+    }
+  }
+
+  async enableWebcam() {
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: { width: { ideal: 1280 }, height: { ideal: 720 } },
+        audio: true
+      });
+
+      this.videoEl.srcObject = this.stream;
+      this.isCamActive = true;
+      if (this.placeholderEl) this.placeholderEl.style.display = 'none';
+      if (this.camToggleBtn) this.camToggleBtn.classList.add('active');
+
+      this.initAudioVisualizer(this.stream);
+    } catch (err) {
+      console.warn('Webcam permission not granted or device unavailable:', err);
+      if (this.placeholderEl) {
+        this.placeholderEl.querySelector('.cam-hint').textContent = 'Camera Off (Click to Retry)';
+      }
+    }
+  }
+
+  toggleWebcam() {
+    if (!this.stream) {
+      this.enableWebcam();
+      return;
+    }
+    const videoTrack = this.stream.getVideoTracks()[0];
+    if (videoTrack) {
+      videoTrack.enabled = !videoTrack.enabled;
+      this.isCamActive = videoTrack.enabled;
+      this.camToggleBtn.classList.toggle('active', this.isCamActive);
+      this.placeholderEl.style.display = this.isCamActive ? 'none' : 'flex';
+    }
+  }
+
+  toggleMic() {
+    if (!this.stream) return;
+    const audioTrack = this.stream.getAudioTracks()[0];
+    if (audioTrack) {
+      audioTrack.enabled = !audioTrack.enabled;
+      this.isMicActive = audioTrack.enabled;
+      this.micToggleBtn.classList.toggle('active', this.isMicActive);
+    }
+  }
+
+  cycleDockPosition() {
+    this.dockEl.classList.remove(this.dockPositions[this.currentDockIndex]);
+    this.currentDockIndex = (this.currentDockIndex + 1) % this.dockPositions.length;
+    this.dockEl.classList.add(this.dockPositions[this.currentDockIndex]);
+  }
+
+  initAudioVisualizer(stream) {
+    try {
+      const AudioContext = window.AudioContext || window.webkitAudioContext;
+      this.audioCtx = new AudioContext();
+      const source = this.audioCtx.createMediaStreamSource(stream);
+      this.analyser = this.audioCtx.createAnalyser();
+      this.analyser.fftSize = 64;
+      source.connect(this.analyser);
+
+      const bufferLength = this.analyser.frequencyBinCount;
+      this.dataArray = new Uint8Array(bufferLength);
+
+      this.drawAudioRing();
+    } catch (e) {
+      console.warn('Web Audio Analyser not supported:', e);
+    }
+  }
+
+  drawAudioRing() {
+    if (!this.ctx || !this.analyser) return;
+
+    requestAnimationFrame(() => this.drawAudioRing());
+
+    this.analyser.getByteFrequencyData(this.dataArray);
+
+    const width = this.canvasEl.width;
+    const height = this.canvasEl.height;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const baseRadius = 96;
+
+    this.ctx.clearRect(0, 0, width, height);
+
+    // Calculate volume level from audio bins
+    let sum = 0;
+    for (let i = 0; i < this.dataArray.length; i++) {
+      sum += this.dataArray[i];
+    }
+    const avg = sum / this.dataArray.length; // 0 to 255
+    const volumeMultiplier = this.isMicActive ? (avg / 255) : 0;
+
+    // Draw audio-reactive radial spikes
+    const numBars = 32;
+    const angleStep = (Math.PI * 2) / numBars;
+
+    for (let i = 0; i < numBars; i++) {
+      const angle = i * angleStep;
+      const binIndex = i % this.dataArray.length;
+      const val = this.isMicActive ? (this.dataArray[binIndex] / 255) : (Math.sin(Date.now() * 0.003 + i) * 0.1 + 0.1);
+      const spikeLength = Math.max(3, val * 22);
+
+      const x1 = centerX + Math.cos(angle) * (baseRadius);
+      const y1 = centerY + Math.sin(angle) * (baseRadius);
+      const x2 = centerX + Math.cos(angle) * (baseRadius + spikeLength);
+      const y2 = centerY + Math.sin(angle) * (baseRadius + spikeLength);
+
+      this.ctx.beginPath();
+      this.ctx.moveTo(x1, y1);
+      this.ctx.lineTo(x2, y2);
+      this.ctx.lineWidth = 3;
+      this.ctx.lineCap = 'round';
+      
+      // Color shifts from cyan to emerald based on voice loudness
+      this.ctx.strokeStyle = volumeMultiplier > 0.35 
+        ? `rgba(0, 255, 136, ${Math.min(1, 0.4 + val)})`
+        : `rgba(0, 240, 255, ${Math.min(1, 0.3 + val)})`;
+
+      this.ctx.stroke();
+    }
+  }
+
+  startSimulatedRing() {
+    // Idle glowing pulse before camera stream connects
+    const renderIdle = () => {
+      if (this.analyser) return; // Don't run once real audio is connected
+      if (!this.ctx) return;
+
+      const width = this.canvasEl.width;
+      const height = this.canvasEl.height;
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const baseRadius = 96;
+
+      this.ctx.clearRect(0, 0, width, height);
+
+      const numBars = 32;
+      const angleStep = (Math.PI * 2) / numBars;
+      const t = Date.now() * 0.002;
+
+      for (let i = 0; i < numBars; i++) {
+        const angle = i * angleStep;
+        const val = (Math.sin(t + i * 0.4) + 1) * 0.5;
+        const spikeLength = 3 + val * 6;
+
+        const x1 = centerX + Math.cos(angle) * baseRadius;
+        const y1 = centerY + Math.sin(angle) * baseRadius;
+        const x2 = centerX + Math.cos(angle) * (baseRadius + spikeLength);
+        const y2 = centerY + Math.sin(angle) * (baseRadius + spikeLength);
+
+        this.ctx.beginPath();
+        this.ctx.moveTo(x1, y1);
+        this.ctx.lineTo(x2, y2);
+        this.ctx.lineWidth = 2;
+        this.ctx.lineCap = 'round';
+        this.ctx.strokeStyle = `rgba(0, 240, 255, ${0.2 + val * 0.4})`;
+        this.ctx.stroke();
+      }
+
+      requestAnimationFrame(renderIdle);
+    };
+
+    renderIdle();
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  window.cameraStudio = new CameraStudio();
+});

package/public/index.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WARP-AGENT // 60-FPS Autonomous Agent Studio</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="studio-container" id="studioRoot">
+    <!-- Top Cyberpunk Bar -->
+    <header class="top-nav">
+      <div class="brand-cluster">
+        <div class="brand-logo">⚡</div>
+        <div>
+          <h1 class="brand-title">WARP-AGENT <span class="badge-system1">JEV SYSTEM 1 REFLEX</span></h1>
+          <p class="brand-subtitle">World's First 60-FPS Autonomous Coding Agent // Speedrun Visualizer Studio</p>
+        </div>
+      </div>
+
+      <div class="studio-controls">
+        <div class="scenario-picker">
+          <label for="taskSelect">MISSION:</label>
+          <select id="taskSelect">
+            <option value="Fix Concurrency Mutex Starvation across 20 Microservices">Fix Mutex Starvation across 20 Microservices</option>
+            <option value="Zero-Day Remote Code Execution AST Neutralization">Zero-Day RCE AST Neutralization</option>
+            <option value="Full-Stack SQL Injection Blast Radius Auto-Patch">Full-Stack SQL Injection Auto-Patch</option>
+          </select>
+        </div>
+
+        <button id="sfxToggle" class="btn-tool active" title="Toggle Procedural Audio FX">
+          <span id="sfxIcon">🔊</span> SFX: ON
+        </button>
+
+        <button id="fullscreenBtn" class="btn-tool" title="Maximize for Screen Recording">
+          ⛶ STUDIO MODE
+        </button>
+      </div>
+    </header>
+
+    <!-- Speedrun Control Hero -->
+    <section class="speedrun-hero">
+      <div class="telemetry-bar">
+        <div class="stat-card">
+          <span class="stat-label">STOPWATCH</span>
+          <span class="stat-value text-cyan" id="heroStopwatch">00:00.000</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-label">WARP VELOCITY</span>
+          <span class="stat-value text-emerald" id="heroVelocity">0.0 <small>actions/s</small></span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-label">AVG LATENCY</span>
+          <span class="stat-value text-yellow" id="heroLatency">0ms</span>
+        </div>
+        <div class="stat-card">
+          <span class="stat-label">AGENT SPEEDUP</span>
+          <span class="stat-value text-purple" id="heroSpeedup">100x</span>
+        </div>
+      </div>
+
+      <div class="cta-actions">
+        <button id="startRaceBtn" class="btn-warp">
+          <span class="pulse-spark"></span>
+          ⚡ START 60-FPS SPEEDRUN
+        </button>
+        <button id="resetRaceBtn" class="btn-reset">
+          ↺ RESET ARENA
+        </button>
+      </div>
+    </section>
+
+    <!-- The Side-by-Side Arena -->
+    <main class="arena-grid">
+      <!-- LEFT: Legacy Sluggish LLM Agent -->
+      <section class="arena-panel legacy-panel">
+        <div class="panel-header">
+          <div class="header-tag tag-legacy">
+            <span class="dot-red"></span> LEGACY 70B LLM AGENT (Devin / Claude 3.5 / GPT-4o)
+          </div>
+          <div class="panel-metrics">
+            <span id="legacyTimer" class="metric-timer">00:00.0</span>
+            <span id="legacyCost" class="metric-cost">$0.00</span>
+          </div>
+        </div>
+
+        <div class="progress-track">
+          <div id="legacyProgressBar" class="progress-bar-fill fill-red" style="width: 0%;"></div>
+        </div>
+
+        <div class="agent-status-box">
+          <div id="legacySpinner" class="spinner-idle">⏳</div>
+          <div class="status-meta">
+            <div id="legacyStatusText" class="status-heading">Awaiting Mission Launch...</div>
+            <div id="legacySubText" class="status-sub">Heavy 70B parameter inference: ~4,200ms per tool decision</div>
+          </div>
+        </div>
+
+        <div class="stream-console" id="legacyConsole">
+          <div class="log-entry log-dim">[00:00.000] Initializing LangChain / AutoGen agent loop...</div>
+        </div>
+      </section>
+
+      <!-- RIGHT: WARP-AGENT Powered by Jev System 1 -->
+      <section class="arena-panel warp-panel">
+        <div class="panel-header">
+          <div class="header-tag tag-warp">
+            <span class="dot-emerald"></span> WARP-AGENT (Jev System 1 Reflex Engine)
+          </div>
+          <div class="panel-metrics">
+            <span id="warpTimer" class="metric-timer text-emerald">00:00.000</span>
+            <span id="warpCost" class="metric-cost text-cyan">$0.0000</span>
+          </div>
+        </div>
+
+        <div class="progress-track">
+          <div id="warpProgressBar" class="progress-bar-fill fill-emerald" style="width: 0%;"></div>
+        </div>
+
+        <div class="agent-status-box warp-active-box">
+          <div class="gauge-ring">
+            <span id="warpStepCount" class="gauge-number">0/48</span>
+          </div>
+          <div class="status-meta">
+            <div id="warpStatusText" class="status-heading text-emerald">System 1 Reflex Subconscious Ready</div>
+            <div id="warpSubText" class="status-sub">Target Latency: &lt;30ms // Zero LLM Hallucinations</div>
+          </div>
+        </div>
+
+        <div class="stream-console warp-stream" id="warpConsole">
+          <div class="log-entry log-dim">[00:00.000] Subconscious neural reflex ready for instant execution...</div>
+        </div>
+      </section>
+    </main>
+
+    <!-- Victory Overlay Modal -->
+    <div class="victory-banner" id="victoryBanner">
+      <div class="victory-content">
+        <div class="victory-badge">⚡ MISSION SPEEDRUN COMPLETED IN 1.34s</div>
+        <div class="victory-stats">
+          <div class="stat-pill"><span class="label">WARP TIME:</span> <strong>1.34s (48 Actions)</strong></div>
+          <div class="stat-pill"><span class="label">LEGACY ESTIMATE:</span> <strong class="text-red">182.4s (3+ min)</strong></div>
+          <div class="stat-pill"><span class="label">COST REDUCTION:</span> <strong class="text-emerald">99.4% SAVED ($0.0003 vs $1.44)</strong></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FLOATING WEBCAM BUBBLE FOR RECORDING -->
+    <div class="camera-dock dock-bottom-right" id="cameraDock">
+      <div class="camera-canvas-wrapper">
+        <!-- Audio Reactive Waveform Ring Canvas -->
+        <canvas id="audioVisualizerRing" width="220" height="220"></canvas>
+        
+        <!-- Live Video Feed -->
+        <video id="webcamVideo" autoplay playsinline muted></video>
+
+        <!-- Placeholder when Camera is off -->
+        <div id="cameraPlaceholder" class="camera-placeholder">
+          <div class="cam-avatar">🎙️</div>
+          <div class="cam-hint">Click to Enable Camera</div>
+        </div>
+
+        <!-- Camera HUD Ring Controls -->
+        <div class="camera-controls-overlay">
+          <button id="camToggleBtn" class="cam-btn" title="Toggle Webcam">📹</button>
+          <button id="micToggleBtn" class="cam-btn active" title="Toggle Mic Visualizer">🎙️</button>
+          <button id="dockCycleBtn" class="cam-btn" title="Cycle Dock Corner">🔄</button>
+        </div>
+      </div>
+      <div class="presenter-tag">
+        <span class="live-dot"></span> PRESENTER
+      </div>
+    </div>
+  </div>
+
+  <script type="module" src="camera.js"></script>
+  <script type="module" src="app.js"></script>
+</body>
+</html>