pixelcrew 0.2.2 → 0.2.6

package/src/dashboard/app.js

@@ -1,5 +1,5 @@
 /**
- * PIXEL CORPS HQ — Interactive Startup Office Engine & Pixel Art Canvas Renderer
+ * PIXEL CREW HQ — Autonomous Multi-Agent Office & Realtime Telemetry Engine
  */
 
 // Global State
@@ -8,9 +8,15 @@ const appState = {
   state: null,
   events: [],
   activeFilter: 'all',
+  streamMode: 'sidechat', // 'sidechat' | 'slack'
+  autoScrollEnabled: true,
   audioEnabled: true,
   crtEnabled: true,
   nightMode: false,
+  activeProvider: 'antigravity',
+  activeProviderName: 'Google Antigravity',
+  activeProviderIcon: '🪐',
+  providersData: null,
   missionStartTime: null,
   missionTimerInterval: null,
   hoveredDesk: null
@@ -104,7 +110,303 @@ const WORKSTATIONS = {
   }
 };
 
-// Retro Web Audio Synthesizer
+// ============================================================================
+// PROCEDURAL LO-FI MUSIC SYNTHESIZER & AMBIENT RADIO
+// ============================================================================
+class LofiMusicEngine {
+  constructor() {
+    this.ctx = null;
+    this.isPlaying = false;
+    this.currentTrack = 'floor42';
+    this.volume = 0.7;
+    this.loopTimer = null;
+    this.noiseNode = null;
+    this.noiseGain = null;
+    this.chordStep = 0;
+    this.bpm = 75;
+  }
+
+  initContext() {
+    if (!this.ctx) {
+      const AudioCtx = window.AudioContext || window.webkitAudioContext;
+      if (AudioCtx) {
+        this.ctx = new AudioCtx();
+      }
+    }
+    if (this.ctx && this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+  }
+
+  setVolume(val) {
+    this.volume = Math.max(0, Math.min(1, val));
+    if (this.masterGain && this.ctx) {
+      this.masterGain.gain.setValueAtTime(this.volume * 0.8, this.ctx.currentTime);
+    }
+  }
+
+  setTrack(trackId) {
+    this.currentTrack = trackId;
+    this.chordStep = 0;
+    if (this.isPlaying) {
+      this.stop();
+      this.start();
+    }
+  }
+
+  start() {
+    this.initContext();
+    if (!this.ctx) return;
+    if (this.isPlaying) return;
+    this.isPlaying = true;
+
+    this.masterGain = this.ctx.createGain();
+    this.masterGain.gain.setValueAtTime(this.volume * 0.8, this.ctx.currentTime);
+    this.masterGain.connect(this.ctx.destination);
+
+    this.startVinylNoise();
+    this.scheduleNextBeat();
+
+    const btn = document.getElementById('btnLofiToggle');
+    const visualizer = document.getElementById('lofiVisualizer');
+    const playIcon = document.getElementById('lofiPlayIcon');
+    if (btn) btn.classList.add('playing');
+    if (visualizer) visualizer.classList.add('playing');
+    if (playIcon) playIcon.textContent = '⏸';
+  }
+
+  stop() {
+    this.isPlaying = false;
+    if (this.loopTimer) {
+      clearTimeout(this.loopTimer);
+      this.loopTimer = null;
+    }
+    this.stopVinylNoise();
+
+    const btn = document.getElementById('btnLofiToggle');
+    const visualizer = document.getElementById('lofiVisualizer');
+    const playIcon = document.getElementById('lofiPlayIcon');
+    if (btn) btn.classList.remove('playing');
+    if (visualizer) visualizer.classList.remove('playing');
+    if (playIcon) playIcon.textContent = '▶';
+  }
+
+  toggle() {
+    if (this.isPlaying) this.stop();
+    else this.start();
+  }
+
+  startVinylNoise() {
+    if (!this.ctx || this.noiseNode) return;
+    try {
+      const bufferSize = this.ctx.sampleRate * 2;
+      const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+      const data = buffer.getChannelData(0);
+      for (let i = 0; i < bufferSize; i++) {
+        const white = Math.random() * 2 - 1;
+        const isPop = Math.random() < 0.0008;
+        data[i] = (white * 0.035) + (isPop ? (Math.random() * 0.35 - 0.17) : 0);
+      }
+
+      this.noiseNode = this.ctx.createBufferSource();
+      this.noiseNode.buffer = buffer;
+      this.noiseNode.loop = true;
+
+      const filter = this.ctx.createBiquadFilter();
+      filter.type = 'lowpass';
+      filter.frequency.value = 1600;
+
+      this.noiseGain = this.ctx.createGain();
+      this.noiseGain.gain.setValueAtTime(0.06, this.ctx.currentTime);
+
+      this.noiseNode.connect(filter);
+      filter.connect(this.noiseGain);
+      this.noiseGain.connect(this.masterGain);
+
+      this.noiseNode.start();
+    } catch {}
+  }
+
+  stopVinylNoise() {
+    if (this.noiseNode) {
+      try { this.noiseNode.stop(); } catch {}
+      this.noiseNode = null;
+    }
+  }
+
+  playWarmChord(freqs, duration = 2.4, gainLevel = 0.07) {
+    if (!this.ctx || !this.isPlaying) return;
+    const now = this.ctx.currentTime;
+
+    freqs.forEach((freq, i) => {
+      try {
+        const osc = this.ctx.createOscillator();
+        const subOsc = this.ctx.createOscillator();
+        const filter = this.ctx.createBiquadFilter();
+        const gain = this.ctx.createGain();
+
+        osc.type = 'triangle';
+        osc.frequency.setValueAtTime(freq, now);
+
+        subOsc.type = 'sine';
+        subOsc.frequency.setValueAtTime(freq * 0.5, now);
+
+        filter.type = 'lowpass';
+        filter.frequency.setValueAtTime(1400, now);
+        filter.frequency.exponentialRampToValueAtTime(500, now + duration);
+
+        const stagger = i * 0.022;
+        gain.gain.setValueAtTime(0.0001, now + stagger);
+        gain.gain.exponentialRampToValueAtTime(gainLevel / freqs.length, now + stagger + 0.08);
+        gain.gain.exponentialRampToValueAtTime(0.0001, now + duration);
+
+        osc.connect(filter);
+        subOsc.connect(filter);
+        filter.connect(gain);
+        gain.connect(this.masterGain);
+
+        osc.start(now + stagger);
+        subOsc.start(now + stagger);
+        osc.stop(now + duration);
+        subOsc.stop(now + duration);
+      } catch {}
+    });
+  }
+
+  playLofiKick() {
+    if (!this.ctx || !this.isPlaying) return;
+    try {
+      const now = this.ctx.currentTime;
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+
+      osc.frequency.setValueAtTime(110, now);
+      osc.frequency.exponentialRampToValueAtTime(42, now + 0.16);
+
+      gain.gain.setValueAtTime(0.1, now);
+      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.18);
+
+      osc.connect(gain);
+      gain.connect(this.masterGain);
+
+      osc.start(now);
+      osc.stop(now + 0.18);
+    } catch {}
+  }
+
+  playLofiSnare() {
+    if (!this.ctx || !this.isPlaying) return;
+    try {
+      const now = this.ctx.currentTime;
+      const buffer = this.ctx.createBuffer(1, this.ctx.sampleRate * 0.14, this.ctx.sampleRate);
+      const data = buffer.getChannelData(0);
+      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;
+
+      const noise = this.ctx.createBufferSource();
+      noise.buffer = buffer;
+
+      const filter = this.ctx.createBiquadFilter();
+      filter.type = 'bandpass';
+      filter.frequency.setValueAtTime(1100, now);
+
+      const gain = this.ctx.createGain();
+      gain.gain.setValueAtTime(0.05, now);
+      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.14);
+
+      noise.connect(filter);
+      filter.connect(gain);
+      gain.connect(this.masterGain);
+
+      noise.start(now);
+      noise.stop(now + 0.14);
+    } catch {}
+  }
+
+  playLofiHat() {
+    if (!this.ctx || !this.isPlaying) return;
+    try {
+      const now = this.ctx.currentTime;
+      const buffer = this.ctx.createBuffer(1, this.ctx.sampleRate * 0.04, this.ctx.sampleRate);
+      const data = buffer.getChannelData(0);
+      for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;
+
+      const noise = this.ctx.createBufferSource();
+      noise.buffer = buffer;
+
+      const filter = this.ctx.createBiquadFilter();
+      filter.type = 'highpass';
+      filter.frequency.setValueAtTime(6500, now);
+
+      const gain = this.ctx.createGain();
+      gain.gain.setValueAtTime(0.018, now);
+      gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.04);
+
+      noise.connect(filter);
+      filter.connect(gain);
+      gain.connect(this.masterGain);
+
+      noise.start(now);
+      noise.stop(now + 0.04);
+    } catch {}
+  }
+
+  scheduleNextBeat() {
+    if (!this.isPlaying) return;
+
+    const CHORD_PROGRESSIONS = {
+      floor42: [
+        [293.66, 349.23, 440.00, 523.25, 659.25], // Dm9
+        [392.00, 493.88, 587.33, 698.46, 880.00], // G13
+        [261.63, 329.63, 392.00, 493.88, 587.33], // Cmaj9
+        [220.00, 277.18, 329.63, 440.00, 554.37]  // A7b13
+      ],
+      rainy: [
+        [349.23, 440.00, 523.25, 659.25, 783.99], // Fmaj9
+        [329.63, 392.00, 493.88, 587.33],         // Em7
+        [293.66, 349.23, 440.00, 523.25],         // Dm7
+        [220.00, 261.63, 329.63, 392.00, 493.88]  // Am9
+      ],
+      antigravity: [
+        [261.63, 329.63, 392.00, 523.25, 659.25], // Cmaj7/9
+        [220.00, 261.63, 329.63, 440.00, 587.33], // Am9
+        [349.23, 440.00, 523.25, 698.46],         // Fmaj7
+        [196.00, 246.94, 293.66, 392.00, 493.88]  // G6
+      ],
+      retro8bit: [
+        [261.63, 329.63, 392.00, 523.25], // C
+        [220.00, 261.63, 329.63, 440.00], // Am
+        [174.61, 220.00, 261.63, 349.23], // F
+        [196.00, 246.94, 293.66, 392.00]  // G
+      ]
+    };
+
+    const chords = CHORD_PROGRESSIONS[this.currentTrack] || CHORD_PROGRESSIONS.floor42;
+    const currentChord = chords[this.chordStep % chords.length];
+
+    this.playWarmChord(currentChord, 2.4, 0.08);
+
+    const beatInterval = (60 / this.bpm) * 1000;
+
+    this.playLofiKick();
+    this.playLofiHat();
+
+    setTimeout(() => { if (this.isPlaying) { this.playLofiSnare(); this.playLofiHat(); } }, beatInterval);
+    setTimeout(() => { if (this.isPlaying) { this.playLofiKick(); this.playLofiHat(); } }, beatInterval * 2);
+    setTimeout(() => { if (this.isPlaying) { this.playLofiHat(); } }, beatInterval * 2.5);
+    setTimeout(() => { if (this.isPlaying) { this.playLofiSnare(); this.playLofiHat(); } }, beatInterval * 3);
+
+    this.chordStep++;
+    this.loopTimer = setTimeout(() => {
+      this.scheduleNextBeat();
+    }, beatInterval * 4);
+  }
+}
+
+const lofiEngine = new LofiMusicEngine();
+
+// ============================================================================
+// RETRO SFX AUDIO SYNTHESIZER
+// ============================================================================
 class RetroAudioSynth {
   constructor() {
     this.ctx = null;
@@ -122,7 +424,7 @@ class RetroAudioSynth {
     }
   }
 
-  playTone(freq, type = 'square', duration = 0.08, gainVal = 0.05) {
+  playTone(freq, type = 'square', duration = 0.08, gainVal = 0.04) {
     if (!appState.audioEnabled) return;
     try {
       this.initContext();
@@ -140,36 +442,40 @@ class RetroAudioSynth {
 
       osc.start();
       osc.stop(this.ctx.currentTime + duration);
-    } catch (e) {
-      // Audio autoplay policy
-    }
+    } catch {}
   }
 
   playSpawn() {
     if (!appState.audioEnabled) return;
     this.playTone(330, 'triangle', 0.06);
-    setTimeout(() => this.playTone(440, 'triangle', 0.06), 60);
-    setTimeout(() => this.playTone(660, 'square', 0.1), 120);
+    setTimeout(() => this.playTone(440, 'triangle', 0.06), 55);
+    setTimeout(() => this.playTone(660, 'square', 0.09), 110);
+  }
+
+  playTool() {
+    if (!appState.audioEnabled) return;
+    this.playTone(520, 'triangle', 0.04, 0.03);
+    setTimeout(() => this.playTone(780, 'square', 0.04, 0.02), 35);
   }
 
   playSkill() {
     if (!appState.audioEnabled) return;
-    this.playTone(659.25, 'square', 0.05, 0.04);
-    setTimeout(() => this.playTone(987.77, 'square', 0.1, 0.04), 50);
+    this.playTone(659.25, 'square', 0.05, 0.03);
+    setTimeout(() => this.playTone(987.77, 'square', 0.09, 0.03), 45);
   }
 
   playComplete() {
     if (!appState.audioEnabled) return;
     const notes = [523.25, 659.25, 783.99, 1046.50];
     notes.forEach((note, i) => {
-      setTimeout(() => this.playTone(note, 'square', 0.12, 0.05), i * 80);
+      setTimeout(() => this.playTone(note, 'square', 0.1, 0.04), i * 75);
     });
   }
 
   playError() {
     if (!appState.audioEnabled) return;
-    this.playTone(180, 'sawtooth', 0.15, 0.08);
-    setTimeout(() => this.playTone(140, 'sawtooth', 0.25, 0.08), 100);
+    this.playTone(180, 'sawtooth', 0.12, 0.06);
+    setTimeout(() => this.playTone(140, 'sawtooth', 0.2, 0.06), 90);
   }
 
   playClick() {
@@ -179,7 +485,9 @@ class RetroAudioSynth {
 
 const synth = new RetroAudioSynth();
 
-// Pixel Office Canvas Renderer
+// ============================================================================
+// PIXEL OFFICE CANVAS RENDERER (HIGH-DPI RETINA SUPPORT)
+// ============================================================================
 let officeCanvas, officeCtx;
 let animFrame = 0;
 
@@ -188,11 +496,20 @@ function initOfficeCanvas() {
   if (!officeCanvas) return;
   officeCtx = officeCanvas.getContext('2d');
 
+  // Handle Retina / High-DPI Display Scaling
+  const dpr = window.devicePixelRatio || 1;
+  const baseW = 960;
+  const baseH = 420;
+
+  officeCanvas.width = baseW * dpr;
+  officeCanvas.height = baseH * dpr;
+  officeCtx.scale(dpr, dpr);
+
   // Mouse interaction for tooltips and clicking workstations
   officeCanvas.addEventListener('mousemove', (e) => {
     const rect = officeCanvas.getBoundingClientRect();
-    const scaleX = officeCanvas.width / rect.width;
-    const scaleY = officeCanvas.height / rect.height;
+    const scaleX = baseW / rect.width;
+    const scaleY = baseH / rect.height;
     const mouseX = (e.clientX - rect.left) * scaleX;
     const mouseY = (e.clientY - rect.top) * scaleY;
 
@@ -433,6 +750,12 @@ function renderOfficeWorker(ctx, agentKey, state, x, y, frame) {
 
   const suitColor = colors[agentKey] || '#00f0ff';
 
+  // Monitor Glow Reflection on Desk
+  if (state === 'WORKING' || state === 'ANALYZING') {
+    ctx.fillStyle = suitColor + '18';
+    ctx.fillRect(x - 14, y + 14, 40, 16);
+  }
+
   // Hair / Head
   ctx.fillStyle = '#ffd1a4'; // skin
   ctx.fillRect(x, y + offsetY, 10, 10);
@@ -464,17 +787,56 @@ function renderOfficeWorker(ctx, agentKey, state, x, y, frame) {
     ctx.fillStyle = '#ffffff';
     ctx.fillRect(x + ((frame * 3) % 12) - 2, y + 8, 2, 2);
   } else if (state === 'ANALYZING') {
-    // Thinking bubble
+    // Small thought icon
     ctx.fillStyle = '#ffffff';
-    ctx.fillRect(x + 12, y - 6, 8, 6);
+    ctx.fillRect(x + 12, y - 6 + offsetY, 8, 6);
     ctx.fillStyle = '#000000';
-    ctx.fillRect(x + 14, y - 4, 4, 2);
+    ctx.fillRect(x + 14, y - 4 + offsetY, 4, 2);
   } else if (state === 'COMPLETED') {
     // Victory hands up
     ctx.fillStyle = '#ffd1a4';
     ctx.fillRect(x - 5, y + 6 + offsetY, 3, 5);
     ctx.fillRect(x + 12, y + 6 + offsetY, 3, 5);
   }
+
+  // Floating Live Task / Speech Bubble above Worker's Head
+  if (state === 'WORKING' || state === 'ANALYZING') {
+    const aData = (appState.state && appState.state.agents) ? appState.state.agents[agentKey] : null;
+    let label = state === 'ANALYZING' ? '🧠 Thinking...' : '⚡ Building...';
+    if (aData && aData.currentTask && aData.currentTask !== 'Idle') {
+      const t = aData.currentTask;
+      if (t.includes('view_file') || t.includes('reading') || t.includes('Read')) label = '📄 ' + (t.split('/').pop().slice(0, 12) || 'file');
+      else if (t.includes('replace_file') || t.includes('writing') || t.includes('Edit')) label = '📝 ' + (t.split('/').pop().slice(0, 12) || 'code');
+      else if (t.includes('run_command') || t.includes('exec') || t.includes('npm')) label = '⚡ ' + (t.split(' ')[0].slice(0, 10) || 'exec');
+      else if (t.includes('grep') || t.includes('search')) label = '🔍 Search';
+      else label = t.length > 14 ? t.slice(0, 12) + '..' : t;
+    }
+
+    ctx.font = '7px "Press Start 2P", monospace';
+    const textWidth = ctx.measureText(label).width;
+    const bubbleW = textWidth + 12;
+    const bubbleH = 15;
+    const bubbleX = x - bubbleW / 2 + 5;
+    const bubbleY = y - 22 + offsetY;
+
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(bubbleX + 2, bubbleY + 2, bubbleW, bubbleH);
+    ctx.fillStyle = '#0a0e1c';
+    ctx.fillRect(bubbleX, bubbleY, bubbleW, bubbleH);
+    ctx.strokeStyle = suitColor;
+    ctx.lineWidth = 1;
+    ctx.strokeRect(bubbleX, bubbleY, bubbleW, bubbleH);
+
+    ctx.fillStyle = '#0a0e1c';
+    ctx.beginPath();
+    ctx.moveTo(x + 3, bubbleY + bubbleH);
+    ctx.lineTo(x + 7, bubbleY + bubbleH);
+    ctx.lineTo(x + 5, bubbleY + bubbleH + 3);
+    ctx.fill();
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillText(label, bubbleX + 6, bubbleY + 10);
+  }
 }
 
 // Break Lounge Area (Espresso machine, water cooler, beanbag)
@@ -493,7 +855,6 @@ function renderBreakLounge(ctx, x, y, w, h) {
   // Espresso Bar
   ctx.fillStyle = '#2c223b';
   ctx.fillRect(x + 14, y + 30, 65, 45);
-  ctx.fillStyle = '#silver';
   ctx.fillStyle = '#a0aab8';
   ctx.fillRect(x + 20, y + 34, 24, 20); // coffee maker
   ctx.fillStyle = '#00f0ff';
@@ -552,7 +913,284 @@ function startOfficeAnimationLoop() {
   requestAnimationFrame(loop);
 }
 
-// Initialize Application
+// ============================================================================
+// REALTIME ANTIGRAVITY SIDECHAT VIEW ENGINE
+// ============================================================================
+function updateActiveTaskHud(taskText, toolName = null) {
+  const hudTaskText = document.getElementById('hudActiveTaskText');
+  const hudToolBadge = document.getElementById('hudToolBadge');
+  const hudToolName = document.getElementById('hudToolName');
+
+  if (hudTaskText && taskText) {
+    hudTaskText.textContent = taskText;
+    hudTaskText.title = taskText;
+  }
+
+  if (hudToolBadge && hudToolName) {
+    if (toolName) {
+      hudToolBadge.style.display = 'inline-flex';
+      hudToolName.textContent = toolName.toUpperCase();
+    } else {
+      hudToolBadge.style.display = 'none';
+    }
+  }
+}
+
+function parseToolAction(msg, metadata = {}) {
+  if (!msg) return { action: 'EXEC', file: '', snippet: '' };
+  const lower = msg.toLowerCase();
+
+  let action = metadata.action || 'EXEC';
+  let file = metadata.file || '';
+  let snippet = msg;
+
+  if (!metadata.action) {
+    if (lower.includes('view_file') || lower.includes('reading') || lower.includes('read ')) {
+      action = 'READ';
+    } else if (lower.includes('replace_file') || lower.includes('writing') || lower.includes('modify') || lower.includes('edit')) {
+      action = 'EDIT';
+    } else if (lower.includes('run_command') || lower.includes('npm') || lower.includes('executing')) {
+      action = 'EXEC';
+    } else if (lower.includes('grep') || lower.includes('search') || lower.includes('finding')) {
+      action = 'SEARCH';
+    } else if (lower.includes('browser') || lower.includes('open_url')) {
+      action = 'BROWSER';
+    }
+  }
+
+  // Extract file path if not already provided
+  if (!file) {
+    const fileMatch = msg.match(/(?:file|path|to|in|edited|reading)\s*[:=]?\s*[`"']?([a-zA-Z0-9_\-./\\]+\.[a-zA-Z0-9]+)[`"']?/i);
+    if (fileMatch) {
+      file = fileMatch[1];
+    }
+  }
+
+  return { action, file, snippet };
+}
+
+function appendSidechatCard(event) {
+  const container = document.getElementById('sidechatStream');
+  if (!container) return;
+
+  const timeStr = new Date(event.timestamp || Date.now()).toTimeString().split(' ')[0];
+  const agentKey = event.agent || 'orchestrator';
+  const ws = WORKSTATIONS[agentKey] || { name: 'Tech Lead', color: '#ffd700', icon: '👔' };
+  const agentColor = ws.color || '#00f0ff';
+  const agentIcon = ws.icon || '🤖';
+  const agentUpper = agentKey.toUpperCase();
+
+  const card = document.createElement('div');
+  card.className = `sidechat-card card-${agentKey}`;
+
+  if (event.type === 'thinking' || (agentKey === 'orchestrator' && event.type === 'progress')) {
+    card.innerHTML = `
+      <div class="sidechat-card-header">
+        <span class="sidechat-agent-badge" style="color: ${agentColor}; border-color: ${agentColor};">
+          ${agentIcon} #${agentUpper}
+        </span>
+        <span class="sidechat-type-badge">THINKING</span>
+        <span class="sidechat-timestamp">${timeStr}</span>
+      </div>
+      <div class="sidechat-thought-box">
+        <span class="thought-brain-icon">🧠</span>
+        <div class="thought-content">
+          ${escapeHtml(event.message)}
+          <span class="thought-typing-dots"></span>
+        </div>
+      </div>
+    `;
+    updateActiveTaskHud(event.message, 'REASONING');
+  } else if (event.type === 'tool' || event.type === 'tool_call' || event.skill || event.message.includes('file') || event.message.includes('npm') || event.message.includes('run') || event.message.includes('Edit')) {
+    const toolInfo = parseToolAction(event.message, event.metadata || {});
+    const actionClass = toolInfo.action.toLowerCase();
+
+    card.innerHTML = `
+      <div class="sidechat-card-header">
+        <span class="sidechat-agent-badge" style="color: ${agentColor}; border-color: ${agentColor};">
+          ${agentIcon} #${agentUpper}
+        </span>
+        <span class="sidechat-type-badge">${toolInfo.action}</span>
+        <span class="sidechat-timestamp">${timeStr}</span>
+      </div>
+      <div class="sidechat-tool-box">
+        <div class="tool-box-header">
+          <span class="tool-action-pill ${actionClass}">[${toolInfo.action}]</span>
+          ${toolInfo.file ? `<span class="tool-target-path">${escapeHtml(toolInfo.file)}</span>` : ''}
+        </div>
+        <div class="tool-snippet-block">${escapeHtml(event.message)}</div>
+      </div>
+    `;
+    updateActiveTaskHud(event.message, toolInfo.action);
+    synth.playTool();
+  } else if (event.type === 'complete') {
+    card.innerHTML = `
+      <div class="sidechat-card-header">
+        <span class="sidechat-agent-badge" style="color: #39ff14; border-color: #39ff14;">
+          ${agentIcon} #${agentUpper}
+        </span>
+        <span class="sidechat-type-badge" style="background: #0e2016; color: #39ff14;">COMPLETED</span>
+        <span class="sidechat-timestamp">${timeStr}</span>
+      </div>
+      <div style="background: #0c1a14; border: 1px solid #165b38; padding: 8px 10px; color: #39ff14; font-size: 12px;">
+        ✓ ${escapeHtml(event.message)}
+      </div>
+    `;
+    updateActiveTaskHud(event.message, 'SUCCESS');
+  } else if (event.type === 'error') {
+    card.innerHTML = `
+      <div class="sidechat-card-header">
+        <span class="sidechat-agent-badge" style="color: #ff3344; border-color: #ff3344;">
+          ${agentIcon} #${agentUpper}
+        </span>
+        <span class="sidechat-type-badge" style="background: #2a0c0e; color: #ff3344;">ERROR</span>
+        <span class="sidechat-timestamp">${timeStr}</span>
+      </div>
+      <div style="background: #1c0606; border: 1px solid #551111; padding: 8px 10px; color: #ff3344; font-size: 12px;">
+        ⚠ ${escapeHtml(event.message)}
+      </div>
+    `;
+  } else {
+    card.innerHTML = `
+      <div class="sidechat-card-header">
+        <span class="sidechat-agent-badge" style="color: ${agentColor}; border-color: ${agentColor};">
+          ${agentIcon} #${agentUpper}
+        </span>
+        <span class="sidechat-type-badge">LOG</span>
+        <span class="sidechat-timestamp">${timeStr}</span>
+      </div>
+      <div style="color: #cbd5e1; font-size: 12px; line-height: 1.4;">
+        ${escapeHtml(event.message)}
+      </div>
+    `;
+  }
+
+  container.appendChild(card);
+  if (appState.autoScrollEnabled) {
+    container.scrollTop = container.scrollHeight;
+  }
+}
+
+function renderSidechat(events) {
+  const container = document.getElementById('sidechatStream');
+  if (!container) return;
+  container.innerHTML = '';
+  for (const evt of events) {
+    appendSidechatCard(evt);
+  }
+}
+
+// ============================================================================
+// ACCURATE PROVIDER SWITCHER & DIAGNOSTICS MODAL
+// ============================================================================
+function updateProviderUI(provData) {
+  if (!provData) return;
+  appState.providersData = provData;
+
+  const activeId = provData.activeProvider || 'antigravity';
+  const activeName = provData.activeProviderName || 'Google Antigravity';
+  const activeIcon = provData.activeProviderIcon || '🪐';
+  const activeDesc = provData.activeProviderDescription || 'Integrated Antigravity IDE Autonomous Pair Programming Engine';
+
+  appState.activeProvider = activeId;
+  appState.activeProviderName = activeName;
+  appState.activeProviderIcon = activeIcon;
+
+  // Header Badge
+  const badgeNameEl = document.getElementById('providerName');
+  const badgeIconEl = document.getElementById('providerIcon');
+  if (badgeNameEl) badgeNameEl.textContent = activeId.toUpperCase();
+  if (badgeIconEl) badgeIconEl.textContent = activeIcon;
+
+  // Modal Header
+  const modalNameEl = document.getElementById('modalActiveProvName');
+  const modalIconEl = document.getElementById('modalActiveProvIcon');
+  const modalDescEl = document.getElementById('modalActiveProvDesc');
+  if (modalNameEl) modalNameEl.textContent = `${activeIcon} ${activeName} (${activeId.toUpperCase()})`;
+  if (modalIconEl) modalIconEl.textContent = activeIcon;
+  if (modalDescEl) modalDescEl.textContent = activeDesc;
+
+  // Render Grid
+  renderProvidersGrid(provData);
+}
+
+function renderProvidersGrid(provData) {
+  const grid = document.getElementById('providerGrid');
+  if (!grid || !provData) return;
+
+  grid.innerHTML = '';
+
+  const allProviders = [
+    ...(provData.available || []),
+    ...(provData.missing || [])
+  ];
+
+  allProviders.forEach(p => {
+    const isActive = p.id === provData.activeProvider;
+    const isAvailable = (provData.available || []).some(av => av.id === p.id);
+    const card = document.createElement('div');
+    card.className = `provider-card ${isActive ? 'active' : (isAvailable ? 'available' : 'missing')}`;
+
+    card.innerHTML = `
+      <div class="provider-card-header">
+        <div class="provider-card-title">
+          <span>${p.icon || '💻'}</span>
+          <span>${p.name}</span>
+        </div>
+        <span class="provider-card-status">
+          ${isActive ? 'ACTIVE' : (isAvailable ? 'DETECTED' : 'UNAVAILABLE')}
+        </span>
+      </div>
+      <div class="provider-card-desc">${p.description || ''}</div>
+    `;
+
+    card.addEventListener('click', async () => {
+      synth.playClick();
+      await selectProvider(p.id);
+    });
+
+    grid.appendChild(card);
+  });
+}
+
+async function selectProvider(providerId) {
+  try {
+    const res = await fetch('/api/providers/select', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ provider: providerId })
+    });
+    if (res.ok) {
+      const data = await res.json();
+      if (data.providers) {
+        updateProviderUI(data.providers);
+      }
+      synth.playSkill();
+    }
+  } catch (err) {
+    console.error('Failed to select provider:', err);
+  }
+}
+
+function openProviderModal() {
+  const modal = document.getElementById('providerModal');
+  if (modal) {
+    if (appState.providersData) {
+      updateProviderUI(appState.providersData);
+    }
+    modal.classList.add('open');
+    synth.playClick();
+  }
+}
+
+function closeProviderModal() {
+  const modal = document.getElementById('providerModal');
+  if (modal) modal.classList.remove('open');
+}
+
+// ============================================================================
+// INITIALIZATION & DOM BINDINGS
+// ============================================================================
 async function initApp() {
   setupEventListeners();
   initOfficeCanvas();
@@ -560,9 +1198,11 @@ async function initApp() {
 
   // Instant initial fetch before SSE stream connects
   try {
-    const [cfgRes, stRes] = await Promise.all([
+    const [cfgRes, stRes, provRes, tokRes] = await Promise.all([
       fetch('/api/config').then(r => r.ok ? r.json() : null),
-      fetch('/api/state').then(r => r.ok ? r.json() : null)
+      fetch('/api/state').then(r => r.ok ? r.json() : null),
+      fetch('/api/providers').then(r => r.ok ? r.json() : null),
+      fetch('/api/token-telemetry').then(r => r.ok ? r.json() : null)
     ]);
     if (cfgRes) {
       appState.config = cfgRes;
@@ -574,6 +1214,12 @@ async function initApp() {
       appState.state = stRes;
       renderState();
     }
+    if (provRes) {
+      updateProviderUI(provRes);
+    }
+    if (tokRes) {
+      renderTokenTelemetry(tokRes);
+    }
     await fetchReports();
   } catch (e) {
     // Handled by SSE
@@ -582,16 +1228,200 @@ async function initApp() {
   connectSSE();
 }
 
+let selectedAutocompleteIndex = -1;
+let currentSuggestions = [];
+
 // Setup DOM Event Listeners
 function setupEventListeners() {
+  initTokenTelemetryModal();
+
+  // Provider Badge & Switcher Modal
+  const providerBadge = document.getElementById('providerBadge');
+  if (providerBadge) {
+    providerBadge.addEventListener('click', () => {
+      openProviderModal();
+    });
+  }
+
+  const btnCloseProviderModal = document.getElementById('btnCloseProviderModal');
+  if (btnCloseProviderModal) {
+    btnCloseProviderModal.addEventListener('click', () => {
+      closeProviderModal();
+    });
+  }
+
+  const providerModal = document.getElementById('providerModal');
+  if (providerModal) {
+    providerModal.addEventListener('click', (e) => {
+      if (e.target === providerModal) closeProviderModal();
+    });
+  }
+
+  // Lo-Fi Music Synthesizer Controls
+  const btnLofiToggle = document.getElementById('btnLofiToggle');
+  if (btnLofiToggle) {
+    btnLofiToggle.addEventListener('click', () => {
+      synth.playClick();
+      lofiEngine.toggle();
+    });
+  }
+
+  const lofiTrackSelect = document.getElementById('lofiTrackSelect');
+  if (lofiTrackSelect) {
+    lofiTrackSelect.addEventListener('change', (e) => {
+      lofiEngine.setTrack(e.target.value);
+    });
+  }
+
+  const lofiVolSlider = document.getElementById('lofiVolSlider');
+  if (lofiVolSlider) {
+    lofiVolSlider.addEventListener('input', (e) => {
+      lofiEngine.setVolume(parseFloat(e.target.value));
+    });
+  }
+
+  // Stream Tab Switcher (#AI-SIDECHAT vs #TEAM-SLACK)
+  const tabSidechat = document.getElementById('tabSidechat');
+  const tabSlack = document.getElementById('tabSlack');
+  const sidechatStream = document.getElementById('sidechatStream');
+  const terminalLogs = document.getElementById('terminalLogs');
+
+  if (tabSidechat && tabSlack) {
+    tabSidechat.addEventListener('click', () => {
+      synth.playClick();
+      tabSidechat.classList.add('active');
+      tabSlack.classList.remove('active');
+      if (sidechatStream) sidechatStream.style.display = 'flex';
+      if (terminalLogs) terminalLogs.style.display = 'none';
+      appState.streamMode = 'sidechat';
+    });
+
+    tabSlack.addEventListener('click', () => {
+      synth.playClick();
+      tabSlack.classList.add('active');
+      tabSidechat.classList.remove('active');
+      if (sidechatStream) sidechatStream.style.display = 'none';
+      if (terminalLogs) terminalLogs.style.display = 'flex';
+      appState.streamMode = 'slack';
+    });
+  }
+
+  // Auto Scroll Toggle Button
+  const btnAutoScroll = document.getElementById('btnAutoScroll');
+  if (btnAutoScroll) {
+    btnAutoScroll.addEventListener('click', () => {
+      synth.playClick();
+      appState.autoScrollEnabled = !appState.autoScrollEnabled;
+      btnAutoScroll.classList.toggle('active', appState.autoScrollEnabled);
+      btnAutoScroll.textContent = appState.autoScrollEnabled ? 'AUTO-SCROLL ON' : 'AUTO-SCROLL OFF';
+    });
+  }
+
+  // Clear Sidechat / Clear Logs
+  const btnClearSidechat = document.getElementById('btnClearSidechat');
+  if (btnClearSidechat) {
+    btnClearSidechat.addEventListener('click', () => {
+      synth.playClick();
+      if (sidechatStream) sidechatStream.innerHTML = '';
+      if (terminalLogs) terminalLogs.innerHTML = '';
+    });
+  }
+
   // Task form submission
   const taskForm = document.getElementById('taskForm');
   const taskInput = document.getElementById('taskInput');
+  const autocompletePopup = document.getElementById('commandAutocomplete');
+  const autocompleteList = document.getElementById('autocompleteList');
+
+  // Handle Autocomplete popup
+  async function updateAutocomplete() {
+    const val = taskInput.value.trim();
+    if (!val.startsWith('/')) {
+      autocompletePopup.style.display = 'none';
+      selectedAutocompleteIndex = -1;
+      return;
+    }
+
+    try {
+      const res = await fetch(`/api/commands/autocomplete?q=${encodeURIComponent(val)}`);
+      if (res.ok) {
+        const data = await res.json();
+        currentSuggestions = data.suggestions || [];
+        if (currentSuggestions.length > 0) {
+          renderAutocomplete(currentSuggestions);
+          autocompletePopup.style.display = 'block';
+        } else {
+          autocompletePopup.style.display = 'none';
+        }
+      }
+    } catch {
+      autocompletePopup.style.display = 'none';
+    }
+  }
+
+  function renderAutocomplete(suggestions) {
+    autocompleteList.innerHTML = suggestions.map((s, idx) => `
+      <div class="autocomplete-item ${idx === selectedAutocompleteIndex ? 'selected' : ''}" data-index="${idx}">
+        <span class="autocomplete-name">${escapeHtml(s.name)}</span>
+        <span class="autocomplete-desc">${escapeHtml(s.description)}</span>
+        <span class="autocomplete-usage">${escapeHtml(s.usage)}</span>
+      </div>
+    `).join('');
+
+    autocompleteList.querySelectorAll('.autocomplete-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const idx = parseInt(item.getAttribute('data-index'), 10);
+        selectSuggestion(idx);
+      });
+    });
+  }
+
+  function selectSuggestion(idx) {
+    if (idx >= 0 && idx < currentSuggestions.length) {
+      const s = currentSuggestions[idx];
+      taskInput.value = `${s.name} `;
+      autocompletePopup.style.display = 'none';
+      taskInput.focus();
+    }
+  }
+
+  taskInput.addEventListener('input', () => {
+    selectedAutocompleteIndex = 0;
+    updateAutocomplete();
+  });
+
+  taskInput.addEventListener('keydown', (e) => {
+    if (autocompletePopup.style.display === 'block' && currentSuggestions.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        selectedAutocompleteIndex = (selectedAutocompleteIndex + 1) % currentSuggestions.length;
+        renderAutocomplete(currentSuggestions);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        selectedAutocompleteIndex = (selectedAutocompleteIndex - 1 + currentSuggestions.length) % currentSuggestions.length;
+        renderAutocomplete(currentSuggestions);
+      } else if (e.key === 'Tab' || (e.key === 'Enter' && selectedAutocompleteIndex >= 0 && taskInput.value.trim().split(' ').length === 1)) {
+        e.preventDefault();
+        selectSuggestion(selectedAutocompleteIndex);
+      } else if (e.key === 'Escape') {
+        autocompletePopup.style.display = 'none';
+      }
+    }
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!taskInput.contains(e.target) && !autocompletePopup.contains(e.target)) {
+      autocompletePopup.style.display = 'none';
+    }
+  });
+
   taskForm.addEventListener('submit', async (e) => {
     e.preventDefault();
+    autocompletePopup.style.display = 'none';
     const prompt = taskInput.value.trim();
     if (!prompt) return;
     synth.playClick();
+    updateActiveTaskHud(prompt, 'RUNNING');
     await submitTask(prompt);
     taskInput.value = '';
   });
@@ -601,6 +1431,7 @@ function setupEventListeners() {
     btn.addEventListener('click', async () => {
       synth.playClick();
       const prompt = btn.getAttribute('data-prompt');
+      updateActiveTaskHud(prompt, 'RUNNING');
       await submitTask(prompt);
     });
   });
@@ -608,11 +1439,13 @@ function setupEventListeners() {
   // Header buttons
   document.getElementById('btnDemo').addEventListener('click', async () => {
     synth.playClick();
+    updateActiveTaskHud('Running Full PixelCrew Multi-Agent Sprint Demo', 'SPRINT');
     await fetch('/api/demo', { method: 'POST' });
   });
 
   document.getElementById('btnReset').addEventListener('click', async () => {
     synth.playClick();
+    updateActiveTaskHud('Standing by for sprint assignment', null);
     await fetch('/api/reset', { method: 'POST' });
   });
 
@@ -638,6 +1471,8 @@ function setupEventListeners() {
   document.getElementById('btnClearLogs').addEventListener('click', () => {
     synth.playClick();
     document.getElementById('terminalLogs').innerHTML = '';
+    const sidechat = document.getElementById('sidechatStream');
+    if (sidechat) sidechat.innerHTML = '';
   });
 
   // Log filter chips
@@ -1113,16 +1948,24 @@ function escapeHtml(str) {
     .replace(/'/g, '&#039;');
 }
 
-// Submit Task to Server
+// Submit Task or Slash Command to Server
 async function submitTask(prompt) {
   try {
-    await fetch('/api/task', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ prompt })
-    });
+    if (prompt.startsWith('/')) {
+      await fetch('/api/command', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ input: prompt })
+      });
+    } else {
+      await fetch('/api/task', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ prompt })
+      });
+    }
   } catch (err) {
-    console.error('Failed to submit task:', err);
+    console.error('Failed to submit task or command:', err);
   }
 }
 
@@ -1253,17 +2096,30 @@ function connectSSE() {
     appState.state = data.state;
     appState.events = data.history || [];
 
+    if (data.providers) {
+      updateProviderUI(data.providers);
+    } else if (data.state?.activeProvider) {
+      updateProviderUI({
+        activeProvider: data.state.activeProvider,
+        activeProviderName: data.state.activeProviderName,
+        activeProviderIcon: data.state.activeProviderIcon,
+        available: [{ id: data.state.activeProvider, name: data.state.activeProviderName, icon: data.state.activeProviderIcon }]
+      });
+    }
+
     renderProjectInfo();
     renderAgentGrid();
     renderSkillsList();
     renderState();
     renderLogs(appState.events);
+    renderSidechat(appState.events);
   });
 
   eventSource.addEventListener('agent_event', (e) => {
     const event = JSON.parse(e.data);
     appState.events.push(event);
     appendLog(event);
+    appendSidechatCard(event);
 
     // Real-time visual state & sprite animation update
     if (appState.state && event.agent) {
@@ -1349,6 +2205,11 @@ function connectSSE() {
       renderOneShotResults(event.metadata);
     }
 
+    // Real-time Token Telemetry Update
+    if (event.type === 'token_telemetry' || event.tokenStats || event.metadata?.tokenStats) {
+      renderTokenTelemetry(event.tokenStats || event.metadata?.tokenStats);
+    }
+
     // Audio cues & Report Refresh
     if (event.type === 'spawn') {
       synth.playSpawn();
@@ -1644,5 +2505,286 @@ function openAgentModal(agentKey) {
   synth.playClick();
 }
 
+// ============================================================================
+// REAL-TIME TOKEN TELEMETRY & VISUALIZER ENGINE
+// ============================================================================
+const tokenState = {
+  rawTokensEstimated: 0,
+  actualTokensUsed: 0,
+  tokensSaved: 0,
+  promptTokens: 0,
+  completionTokens: 0,
+  cachedTokens: 0,
+  efficiencyRatio: 72,
+  costUsd: 0,
+  perAgent: {
+    creativeDirector: 0,
+    uxPlanner: 0,
+    designSystem: 0,
+    frontend: 0,
+    backend: 0,
+    database: 0,
+    performance: 0,
+    security: 0,
+    qa: 0
+  },
+  timeline: []
+};
+
+function initTokenTelemetryModal() {
+  const btnOpen = document.getElementById('btnTokenAnalyticsModal');
+  const btnClose = document.getElementById('btnCloseTokenModal');
+  const modal = document.getElementById('tokenAnalyticsModal');
+
+  if (btnOpen && modal) {
+    btnOpen.addEventListener('click', () => {
+      modal.classList.add('open');
+      renderTokenTelemetry(tokenState);
+      synth.playClick();
+    });
+  }
+
+  if (btnClose && modal) {
+    btnClose.addEventListener('click', () => {
+      modal.classList.remove('open');
+      synth.playClick();
+    });
+  }
+
+  if (modal) {
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) {
+        modal.classList.remove('open');
+      }
+    });
+  }
+}
+
+async function fetchTokenTelemetry() {
+  try {
+    const res = await fetch('/api/token-telemetry');
+    if (res.ok) {
+      const data = await res.json();
+      renderTokenTelemetry(data);
+    }
+  } catch (err) {
+    console.warn('Failed to fetch initial token telemetry:', err);
+  }
+}
+
+function renderTokenTelemetry(stats) {
+  if (!stats) return;
+  Object.assign(tokenState, stats);
+
+  const used = tokenState.actualTokensUsed || 0;
+  const raw = tokenState.rawTokensEstimated || 0;
+  const saved = tokenState.tokensSaved || 0;
+  const ratio = tokenState.efficiencyRatio || 72;
+  const cost = tokenState.costUsd || ((used / 1000000) * 2.4);
+  const costSaved = ((saved / 1000000) * 2.4);
+
+  // 1. Header & HUD Badges
+  const headerVal = document.getElementById('headerTokenVal');
+  if (headerVal) {
+    headerVal.textContent = used >= 1000 ? `${(used / 1000).toFixed(1)}k tok` : `${used} tok`;
+  }
+  const headerPill = document.getElementById('headerSavedPill');
+  if (headerPill) {
+    headerPill.textContent = `${ratio}% SAVED`;
+  }
+  const hudTokenVal = document.getElementById('hudTokenVal');
+  if (hudTokenVal) {
+    hudTokenVal.textContent = `${used.toLocaleString()} tokens`;
+  }
+  const hudCostVal = document.getElementById('hudCostVal');
+  if (hudCostVal) {
+    hudCostVal.textContent = `($${cost.toFixed(4)})`;
+  }
+
+  // 2. OneShot Modal Token Card
+  const rawEl = document.getElementById('rawTokenVal');
+  const actualEl = document.getElementById('actualTokenVal');
+  const savedEl = document.getElementById('savedTokenVal');
+  if (rawEl && raw > 0) rawEl.textContent = raw.toLocaleString();
+  if (actualEl && used > 0) actualEl.textContent = used.toLocaleString();
+  if (savedEl && saved > 0) savedEl.textContent = `${saved.toLocaleString()} (${ratio}% Saved)`;
+
+  // 3. Analytics Modal KPI Cards
+  const modalActual = document.getElementById('modalActualTokens');
+  if (modalActual) modalActual.textContent = used.toLocaleString();
+
+  const modalSaved = document.getElementById('modalSavedTokens');
+  if (modalSaved) modalSaved.textContent = `${saved.toLocaleString()} (${ratio}%)`;
+
+  const modalRaw = document.getElementById('modalRawTokens');
+  if (modalRaw) modalRaw.textContent = `Raw Est: ${raw.toLocaleString()}`;
+
+  const modalCost = document.getElementById('modalEstCost');
+  if (modalCost) modalCost.textContent = `$${cost.toFixed(4)}`;
+
+  const modalCostSaved = document.getElementById('modalCostSaved');
+  if (modalCostSaved) modalCostSaved.textContent = `Saved: $${costSaved.toFixed(4)}`;
+
+  const modalRatio = document.getElementById('modalPromptOutputRatio');
+  if (modalRatio) {
+    const p = tokenState.promptTokens || 0;
+    const c = tokenState.completionTokens || 0;
+    modalRatio.textContent = `${p.toLocaleString()} / ${c.toLocaleString()}`;
+  }
+
+  const modalCached = document.getElementById('modalCachedTokens');
+  if (modalCached) {
+    modalCached.textContent = `Cached: ${(tokenState.cachedTokens || 0).toLocaleString()}`;
+  }
+
+  // 4. Per-Agent Token Distribution Bars
+  const agentBarsContainer = document.getElementById('agentTokenBars');
+  if (agentBarsContainer && tokenState.perAgent) {
+    const agents = [
+      { key: 'frontend', name: 'Frontend Eng', icon: '💻', class: 'fe' },
+      { key: 'backend', name: 'Backend Eng', icon: '⚙️', class: 'be' },
+      { key: 'qa', name: 'QA Critic', icon: '🔍', class: 'qa' },
+      { key: 'creativeDirector', name: 'Creative Dir', icon: '🎨', class: 'cd' },
+      { key: 'uxPlanner', name: 'UX Planner', icon: '📐', class: 'ux' },
+      { key: 'designSystem', name: 'Design System', icon: '🌿', class: 'ds' },
+      { key: 'database', name: 'DB Architect', icon: '🗄️', class: 'db' },
+      { key: 'performance', name: 'Perf SRE', icon: '⚡', class: 'perf' },
+      { key: 'security', name: 'Security Sentinel', icon: '🛡️', class: 'sec' }
+    ];
+
+    const maxAgentTokens = Math.max(...Object.values(tokenState.perAgent), 1);
+
+    agentBarsContainer.innerHTML = agents.map(ag => {
+      const agTokens = tokenState.perAgent[ag.key] || 0;
+      const pct = Math.round((agTokens / maxAgentTokens) * 100);
+      const share = used > 0 ? Math.round((agTokens / used) * 100) : 0;
+      return `
+        <div class="agent-token-bar-row">
+          <div class="agent-bar-meta">
+            <span>${ag.icon}</span>
+            <span>${ag.name}</span>
+          </div>
+          <div class="agent-bar-track">
+            <div class="agent-bar-fill ${ag.class}" style="width: ${pct}%;"></div>
+          </div>
+          <div class="agent-bar-stats">
+            <strong>${agTokens.toLocaleString()}</strong> <span style="color: var(--color-cyan);">(${share}%)</span>
+          </div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  // 5. Render Real-Time Sparkline Canvas
+  drawTokenSparkline(tokenState.timeline || []);
+}
+
+function drawTokenSparkline(timeline) {
+  const canvas = document.getElementById('tokenSparklineCanvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const w = canvas.width;
+  const h = canvas.height;
+
+  // Clear background
+  ctx.fillStyle = '#04070f';
+  ctx.fillRect(0, 0, w, h);
+
+  // Draw retro gridlines
+  ctx.strokeStyle = '#0e1626';
+  ctx.lineWidth = 1;
+  for (let x = 0; x < w; x += 40) {
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, h);
+    ctx.stroke();
+  }
+  for (let y = 0; y < h; y += 25) {
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(w, y);
+    ctx.stroke();
+  }
+
+  if (!timeline || timeline.length === 0) {
+    // Render idle pulse wave
+    ctx.strokeStyle = '#00f0ff33';
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(0, h / 2);
+    ctx.lineTo(w, h / 2);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = '#64748b';
+    ctx.font = '9px "Press Start 2P", monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText('AWAITING ACTIVE SPRINT TOKEN EMISSIONS...', w / 2, h / 2 - 10);
+    return;
+  }
+
+  const padding = 20;
+  const maxVal = Math.max(...timeline.map(t => t.totalTokens || 0), 1000);
+  const minVal = 0;
+
+  const getX = (idx) => padding + (idx / Math.max(timeline.length - 1, 1)) * (w - padding * 2);
+  const getY = (val) => (h - padding) - ((val - minVal) / (maxVal - minVal)) * (h - padding * 2);
+
+  // Gradient fill under curve
+  const gradient = ctx.createLinearGradient(0, 0, 0, h);
+  gradient.addColorStop(0, 'rgba(0, 240, 255, 0.3)');
+  gradient.addColorStop(1, 'rgba(0, 255, 136, 0.02)');
+
+  ctx.beginPath();
+  ctx.moveTo(getX(0), h - padding);
+  for (let i = 0; i < timeline.length; i++) {
+    ctx.lineTo(getX(i), getY(timeline[i].totalTokens || 0));
+  }
+  ctx.lineTo(getX(timeline.length - 1), h - padding);
+  ctx.closePath();
+  ctx.fillStyle = gradient;
+  ctx.fill();
+
+  // Glow line
+  ctx.shadowColor = '#00f0ff';
+  ctx.shadowBlur = 8;
+  ctx.strokeStyle = '#00f0ff';
+  ctx.lineWidth = 2;
+
+  ctx.beginPath();
+  for (let i = 0; i < timeline.length; i++) {
+    const x = getX(i);
+    const y = getY(timeline[i].totalTokens || 0);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+
+  // Draw node points & step labels
+  for (let i = 0; i < timeline.length; i++) {
+    const pt = timeline[i];
+    const x = getX(i);
+    const y = getY(pt.totalTokens || 0);
+
+    ctx.fillStyle = '#00ff88';
+    ctx.beginPath();
+    ctx.arc(x, y, 4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // Node label
+    if (i === timeline.length - 1 || i % 2 === 0) {
+      ctx.fillStyle = '#ffffff';
+      ctx.font = '8px "Press Start 2P", monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText(`${(pt.totalTokens || 0).toLocaleString()}`, x, y - 8);
+    }
+  }
+}
+
 // Bootstrap
 window.addEventListener('DOMContentLoaded', initApp);