agmon 0.2.0 → 0.2.2

package/src/components/store/LiveFittingRoom.jsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import {
   Sparkles,
   Bot,
@@ -27,20 +27,9 @@ import {
   equipCustomLoadout,
   SUPPORTER_CHANGE_EVENT,
 } from "@/lib/supporterStore";
+import { LiveReactAgent } from "./LiveReactAgent";
+
 
-// Color presets for known archetypes & themes
-const THEME_STYLES = {
-  theme_default: { name: "Classic Charcoal Slate", base: "#14161a", tile: "#1e222b", grid: "#2d3548", glow: "#38bdf8" },
-  theme_cyberpunk: { name: "Cyberpunk Neon Night", base: "#0d0819", tile: "#1c0d33", grid: "#ff2a85", glow: "#00f0ff" },
-  theme_matrix: { name: "Phosphor Matrix Terminal", base: "#020d05", tile: "#051f0b", grid: "#00ff66", glow: "#10b981" },
-  theme_wood: { name: "Cozy Scandinavian Loft", base: "#1f1610", tile: "#2c2017", grid: "#451a03", glow: "#f59e0b" },
-  theme_space: { name: "Deep Space Void", base: "#030712", tile: "#0b1329", grid: "#1e1b4b", glow: "#6366f1" },
-  theme_blueprint: { name: "Blueprint CAD Grid", base: "#0b1a30", tile: "#1e3a8a", grid: "#1d4ed8", glow: "#38bdf8" },
-  theme_synthwave: { name: "Retro Synthwave 80s", base: "#1a052e", tile: "#3b0764", grid: "#d946ef", glow: "#ec4899" },
-  theme_sakura_cyber: { name: "Sakura Cyber Garden", base: "#1c0e18", tile: "#2e1022", grid: "#f43f5e", glow: "#fb7185" },
-  theme_nordic_ice: { name: "Minimalist Nordic Ice", base: "#0f172a", tile: "#1e293b", grid: "#38bdf8", glow: "#e2e8f0" },
-  theme_industrial: { name: "High-Voltage Industrial", base: "#18181b", tile: "#27272a", grid: "#eab308", glow: "#f59e0b" },
-};
 
 export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
   const [storeState, setStoreState] = useState(initialStoreState || getSupporterState());
@@ -64,10 +53,7 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
   const [archetypeFilter, setArchetypeFilter] = useState("all");
   const [saveToast, setSaveToast] = useState(false);
 
-  const canvasRef = useRef(null);
-  const animFrameRef = useRef(null);
-  const telemetryRef = useRef({ bob: 0, shake: 0, rotL: 0, rotR: 0, blink: false, fps: 60 });
-  const [telemetry, setTelemetry] = useState(telemetryRef.current);
+  const [telemetry, setTelemetry] = useState({ bob: 0, shake: 0, rotL: 0, rotR: 0, blink: false, fps: 60 });
 
   // Sync with store state changes
   useEffect(() => {
@@ -96,760 +82,7 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
     return (COSMETIC_CATALOG.officeThemes || []).find((t) => t.id === activeThemeId) || (COSMETIC_CATALOG.officeThemes || [])[0];
   }, [activeThemeId]);
 
-  // --------------------------------------------------------------------------
-  // CANVAS ANIMATION ENGINE (Procedural Vector Drawing)
-  // --------------------------------------------------------------------------
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-
-    let lastTime = performance.now();
-    let frameCount = 0;
-    let fpsTimer = 0;
-
-    const render = (now) => {
-      const dt = now - lastTime;
-      lastTime = now;
-
-      // Telemetry FPS
-      frameCount++;
-      fpsTimer += dt;
-      if (fpsTimer >= 500) {
-        telemetryRef.current.fps = Math.round((frameCount * 1000) / fpsTimer);
-        frameCount = 0;
-        fpsTimer = 0;
-        setTelemetry({ ...telemetryRef.current });
-      }
-
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      const cx = canvas.width / 2;
-      const cy = canvas.height / 2 + 55;
-      const t = isPlaying ? now : 0;
-
-      // 1. Draw Floor Theme Environment Background
-      drawFloorEnvironment(ctx, cx, cy, canvas.width, canvas.height, activeThemeId, t);
-
-      // 2. Draw Aura Behind Character
-      drawAura(ctx, cx, cy - 50, currentAuraItem, t, currentMode);
-
-      // 3. Draw Character Avatar Behind Desk
-      const tel = drawCharacter(
-        ctx,
-        cx,
-        cy - 50,
-        1.75,
-        t,
-        currentMode,
-        intensity,
-        currentSkinItem,
-        clientType
-      );
-
-      // 4. Draw Desk & Workstation in Front of Character
-      drawDesk(
-        ctx,
-        cx,
-        cy,
-        t,
-        intensity,
-        currentMode,
-        clientType,
-        activeProps,
-        currentSkinItem?.color || "#00f0ff"
-      );
-
-      // 5. Draw Companion Pet on/near Desk
-      drawPet(ctx, cx + 80, cy + 2, currentPetItem, t, currentMode);
-
-      telemetryRef.current.bob = tel.bob;
-      telemetryRef.current.shake = tel.shake;
-      telemetryRef.current.rotL = tel.rotL;
-      telemetryRef.current.rotR = tel.rotR;
-      telemetryRef.current.blink = tel.blinking;
-
-      if (isPlaying) {
-        animFrameRef.current = requestAnimationFrame(render);
-      }
-    };
-
-    animFrameRef.current = requestAnimationFrame(render);
-    return () => {
-      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-    };
-  }, [
-    activeSkinId,
-    activePetId,
-    activeProps,
-    activeAuraId,
-    activeThemeId,
-    currentMode,
-    intensity,
-    clientType,
-    isPlaying,
-    currentSkinItem,
-    currentPetItem,
-    currentAuraItem,
-    currentThemeId,
-  ]);
-
-  // --------------------------------------------------------------------------
-  // DRAWING ROUTINES (Canvas 2D Vector Primitives)
-  // --------------------------------------------------------------------------
-
-  function drawFloorEnvironment(ctx, cx, cy, width, height, themeId, t) {
-    ctx.save();
-    const style = THEME_STYLES[themeId] || THEME_STYLES.theme_default;
-
-    // Background radial ambient glow
-    const bgRad = ctx.createRadialGradient(cx, cy - 20, 20, cx, cy, width * 0.7);
-    bgRad.addColorStop(0, style.base);
-    bgRad.addColorStop(0.7, "#08090c");
-    bgRad.addColorStop(1, "#040507");
-    ctx.fillStyle = bgRad;
-    ctx.fillRect(0, 0, width, height);
-
-    // 3D Isometric Floor Slate
-    ctx.save();
-    ctx.translate(cx, cy + 70);
-
-    // Outer Floor Shadow
-    ctx.fillStyle = "rgba(0,0,0,0.55)";
-    ctx.beginPath();
-    ctx.ellipse(0, 15, 230, 75, 0, 0, Math.PI * 2);
-    ctx.fill();
-
-    // Isometric Floor Polygon
-    const fW = 240;
-    const fH = 110;
-    ctx.beginPath();
-    ctx.moveTo(0, -fH);
-    ctx.lineTo(fW, 0);
-    ctx.lineTo(0, fH);
-    ctx.lineTo(-fW, 0);
-    ctx.closePath();
-
-    const fGrad = ctx.createLinearGradient(0, -fH, 0, fH);
-    fGrad.addColorStop(0, style.tile);
-    fGrad.addColorStop(1, style.base);
-    ctx.fillStyle = fGrad;
-    ctx.fill();
-
-    // Floor Bevel Rim
-    ctx.strokeStyle = style.grid;
-    ctx.lineWidth = 1.8;
-    ctx.stroke();
-
-    // Floor Edge Thickness (Extrusion)
-    ctx.fillStyle = "rgba(0,0,0,0.4)";
-    ctx.beginPath();
-    ctx.moveTo(-fW, 0);
-    ctx.lineTo(0, fH);
-    ctx.lineTo(0, fH + 12);
-    ctx.lineTo(-fW, 12);
-    ctx.closePath();
-    ctx.fill();
-
-    ctx.fillStyle = "rgba(0,0,0,0.6)";
-    ctx.beginPath();
-    ctx.moveTo(fW, 0);
-    ctx.lineTo(0, fH);
-    ctx.lineTo(0, fH + 12);
-    ctx.lineTo(fW, 12);
-    ctx.closePath();
-    ctx.fill();
-
-    // Isometric Gridlines
-    ctx.strokeStyle = style.grid;
-    ctx.lineWidth = 1;
-    ctx.globalAlpha = 0.45;
-    for (let i = -3; i <= 3; i++) {
-      const off = i * 40;
-      ctx.beginPath();
-      ctx.moveTo(-fW / 2 + off, -fH / 2);
-      ctx.lineTo(fW / 2 + off, fH / 2);
-      ctx.stroke();
-
-      ctx.beginPath();
-      ctx.moveTo(fW / 2 - off, -fH / 2);
-      ctx.lineTo(-fW / 2 - off, fH / 2);
-      ctx.stroke();
-    }
-    ctx.globalAlpha = 1;
-
-    // Corner Neon Glow Brackets
-    ctx.strokeStyle = style.glow;
-    ctx.lineWidth = 2;
-    ctx.shadowColor = style.glow;
-    ctx.shadowBlur = 10;
-    ctx.beginPath();
-    ctx.moveTo(-fW + 30, -5); ctx.lineTo(-fW + 10, 0); ctx.lineTo(-fW + 30, 5);
-    ctx.moveTo(fW - 30, -5); ctx.lineTo(fW - 10, 0); ctx.lineTo(fW - 30, 5);
-    ctx.stroke();
-    ctx.shadowBlur = 0;
-
-    ctx.restore();
-    ctx.restore();
-  }
-
-  function drawAura(ctx, cx, cy, auraItem, t, mode) {
-    if (!auraItem || auraItem.id === "none" || auraItem.archetype === "none") return;
-    ctx.save();
-    ctx.translate(cx, cy);
-
-    const color = auraItem.color || "#00f0ff";
-    const arch = auraItem.archetype || "plasma_ring";
-    const pulse = 1 + Math.sin(t * 0.006) * 0.12;
-    const aAlpha = mode === "happy" ? 0.95 : mode === "error" ? 0.4 : mode === "sleeping" ? 0.25 : 0.65;
-
-    ctx.shadowColor = color;
-    ctx.shadowBlur = 12;
-
-    if (arch === "matrix_rain") {
-      ctx.strokeStyle = color;
-      ctx.fillStyle = "#ffffff";
-      ctx.lineWidth = 1.6;
-      for (let col = -3; col <= 3; col++) {
-        const rx = col * 12;
-        const dropP = ((t * 0.002 + col * 0.33) % 1);
-        const ry = -80 + dropP * 65;
-        ctx.globalAlpha = aAlpha * 0.8;
-        ctx.beginPath();
-        ctx.moveTo(rx, ry - 10);
-        ctx.lineTo(rx, ry);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.arc(rx, ry, 1.4, 0, Math.PI * 2);
-        ctx.fill();
-      }
-    } else if (arch === "quantum_mist") {
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1.4;
-      ctx.globalAlpha = aAlpha * 0.5;
-      for (let p = 0; p < 4; p++) {
-        const ang = t * 0.003 + (p * Math.PI) / 2;
-        const rx = 36 * pulse + Math.sin(ang) * 5;
-        const ry = 16 * pulse + Math.cos(ang) * 4;
-        ctx.beginPath();
-        ctx.ellipse(0, -42, rx, ry, 0, 0, Math.PI * 2);
-        ctx.stroke();
-      }
-      ctx.fillStyle = "#ffffff";
-      ctx.globalAlpha = aAlpha;
-      ctx.beginPath();
-      ctx.arc(Math.sin(t * 0.007) * 34, -42 + Math.cos(t * 0.007) * 14, 2.5, 0, Math.PI * 2);
-      ctx.fill();
-    } else if (arch === "glitch_halo") {
-      const jx = Math.sin(t * 0.09) * 3;
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 2.2;
-      ctx.globalAlpha = aAlpha;
-      ctx.strokeRect(-38 * pulse + jx, -64 * pulse, 76 * pulse, 30 * pulse);
-    } else {
-      // Plasma Ring default
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 2.4;
-      ctx.globalAlpha = aAlpha;
-      ctx.beginPath();
-      ctx.ellipse(0, -42, 42 * pulse, 16 * pulse, 0, 0, Math.PI * 2);
-      ctx.stroke();
-
-      ctx.strokeStyle = "#ffffff";
-      ctx.lineWidth = 1.2;
-      ctx.beginPath();
-      ctx.ellipse(0, -42, 32 * pulse, 11 * pulse, 0, 0, Math.PI * 2);
-      ctx.stroke();
-    }
-
-    ctx.restore();
-  }
-
-  function drawCharacter(ctx, cx, cy, scale, t, mode, intensity, skinItem, clientType) {
-    ctx.save();
-    ctx.translate(cx, cy);
-    ctx.scale(scale, scale);
-
-    const skinColor = skinItem?.color || "#00f0ff";
-    const skinArch = skinItem?.archetype || "cyber_classic";
-    const trimColor = clientType === "app" ? "#8b5cf6" : "#10b981";
-    const SHELL = "#1e2430";
-    const SHADE = "#111622";
-    const phase = t * 0.012;
-
-    // Body Motion Calculations
-    let bob = Math.sin(t * 0.004) * (0.8 + intensity * 1.4);
-    let shake = 0;
-    let tilt = 0;
-
-    if (mode === "happy") bob = -Math.abs(Math.sin(t * 0.005)) * 4.2;
-    if (mode === "sleeping") {
-      bob = Math.sin(t * 0.0016) * 1.1 + 2.2;
-      tilt = 0.12 + Math.sin(t * 0.0016) * 0.02;
-    }
-    if (mode === "error") shake = Math.sin(t * 0.09) * 2.2;
-    if (mode === "looping") {
-      shake = Math.sin(t * 0.08) * 2.5;
-      bob = Math.sin(t * 0.015) * 1.8;
-      tilt = Math.sin(t * 0.02) * 0.18;
-    }
-
-    ctx.translate(shake, bob);
-    ctx.rotate(tilt);
-
-    // 1. Torso
-    const bGrad = ctx.createLinearGradient(0, -30, 0, 0);
-    bGrad.addColorStop(0, "#ffffff");
-    bGrad.addColorStop(0.5, SHELL);
-    bGrad.addColorStop(1, SHADE);
-    ctx.fillStyle = bGrad;
-    ctx.beginPath();
-    ctx.roundRect(-17, -30, 34, 22, 11);
-    ctx.fill();
-
-    // Torso Trim Band
-    ctx.fillStyle = trimColor;
-    ctx.fillRect(-14, -12, 28, 6);
-
-    // Chest Arc Reactor
-    ctx.fillStyle = "#0f172a";
-    ctx.beginPath();
-    ctx.arc(0, -18, 4.5, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.strokeStyle = skinColor;
-    ctx.lineWidth = 1.4;
-    ctx.stroke();
-    ctx.fillStyle = skinColor;
-    ctx.beginPath();
-    ctx.arc(0, -18, 2.2, 0, Math.PI * 2);
-    ctx.fill();
-
-    // 2. Arms (Pivot at shoulder)
-    let rotL = 0;
-    let rotR = 0;
 
-    if (mode === "streaming") {
-      rotL = Math.sin(phase) * 0.14 * (0.3 + intensity);
-      rotR = -Math.sin(phase + 1.3) * 0.14 * (0.3 + intensity);
-    } else if (mode === "pending") {
-      rotL = 2.5 + Math.sin(t * 0.012) * 0.35;
-      rotR = -Math.sin(phase + 1.3) * 0.06;
-    } else if (mode === "happy") {
-      rotL = 2.2 + Math.sin(t * 0.01) * 0.2;
-      rotR = -2.2 - Math.sin(t * 0.01 + 1) * 0.2;
-    } else if (mode === "error") {
-      rotL = 2.7 + Math.sin(t * 0.08) * 0.1;
-      rotR = -2.7 - Math.sin(t * 0.08) * 0.1;
-    } else if (mode === "looping") {
-      rotL = 2.4 + Math.sin(t * 0.02) * 0.4;
-      rotR = -2.4 - Math.sin(t * 0.02 + 1) * 0.4;
-    }
-
-    // Left Arm
-    ctx.save();
-    ctx.translate(-22, -26);
-    ctx.rotate(rotL);
-    ctx.fillStyle = SHELL;
-    ctx.beginPath();
-    ctx.roundRect(-4, 0, 8, 24, 4);
-    ctx.fill();
-    ctx.restore();
-
-    // Right Arm
-    ctx.save();
-    ctx.translate(22, -26);
-    ctx.rotate(rotR);
-    ctx.fillStyle = SHELL;
-    ctx.beginPath();
-    ctx.roundRect(-4, 0, 8, 24, 4);
-    ctx.fill();
-    ctx.restore();
-
-    // 3. Head & Comm Pods
-    ctx.fillStyle = skinColor;
-    ctx.beginPath();
-    ctx.arc(-27, -56, 8, 0, Math.PI * 2);
-    ctx.arc(27, -56, 8, 0, Math.PI * 2);
-    ctx.fill();
-
-    // Helmet Sphere
-    const hGrad = ctx.createLinearGradient(0, -80, 0, -32);
-    hGrad.addColorStop(0, "#2d3748");
-    hGrad.addColorStop(0.6, SHELL);
-    hGrad.addColorStop(1, SHADE);
-    ctx.fillStyle = hGrad;
-    ctx.strokeStyle = skinColor;
-    ctx.lineWidth = 2.2;
-    ctx.beginPath();
-    ctx.ellipse(0, -56, 26, 24, 0, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-
-    // Visor Cavity
-    ctx.fillStyle = "#0f141c";
-    ctx.beginPath();
-    ctx.ellipse(0, -53, 20, 15.5, 0, 0, Math.PI * 2);
-    ctx.fill();
-
-    // Head Archetype Accessories
-    if (skinArch === "cyber_cat") {
-      // Cute Cat Ears
-      ctx.fillStyle = SHELL;
-      ctx.beginPath();
-      ctx.moveTo(-22, -72); ctx.lineTo(-14, -86); ctx.lineTo(-6, -76); ctx.closePath();
-      ctx.moveTo(6, -76); ctx.lineTo(14, -86); ctx.lineTo(22, -72); ctx.closePath();
-      ctx.fill();
-      ctx.fillStyle = "#f472b6";
-      ctx.beginPath();
-      ctx.moveTo(-20, -73); ctx.lineTo(-14, -83); ctx.lineTo(-8, -76); ctx.closePath();
-      ctx.moveTo(8, -76); ctx.lineTo(14, -83); ctx.lineTo(20, -73); ctx.closePath();
-      ctx.fill();
-    } else if (skinArch === "stealth_ninja") {
-      // Ninja Headband
-      ctx.fillStyle = "#1e1b4b";
-      ctx.strokeStyle = skinColor;
-      ctx.lineWidth = 1.5;
-      ctx.fillRect(-24, -66, 48, 8);
-      ctx.strokeRect(-24, -66, 48, 8);
-      ctx.fillStyle = "#38bdf8";
-      ctx.beginPath();
-      ctx.arc(0, -62, 3, 0, Math.PI * 2);
-      ctx.fill();
-    } else if (skinArch === "mecha_pilot") {
-      // Dual Antennas
-      ctx.fillStyle = skinColor;
-      ctx.fillRect(-20, -88, 3, 20);
-      ctx.fillRect(17, -88, 3, 20);
-      ctx.fillStyle = "#ffffff";
-      ctx.beginPath();
-      ctx.arc(-18.5, -88, 3, 0, Math.PI * 2);
-      ctx.arc(18.5, -88, 3, 0, Math.PI * 2);
-      ctx.fill();
-    } else if (skinArch === "celestial_astro") {
-      // Solar Halo
-      ctx.strokeStyle = skinColor;
-      ctx.lineWidth = 2;
-      ctx.beginPath();
-      ctx.ellipse(0, -64, 30, 8, 0, 0, Math.PI * 2);
-      ctx.stroke();
-    } else if (skinArch === "matrix_hacker") {
-      // Hacker Hoodie Cowl
-      ctx.strokeStyle = skinColor;
-      ctx.lineWidth = 1.8;
-      ctx.strokeRect(-26, -76, 52, 44);
-    } else if (skinArch === "cyber_suit") {
-      // Tactical Brow & Wing Antennas
-      ctx.fillStyle = skinColor;
-      ctx.fillRect(-24, -66, 48, 6);
-    }
-
-    // 4. Eyes & Facial Expression
-    const blinking = Math.sin(t * 0.0013) > 0.985;
-    const flicker = 0.85 + Math.sin(t * 0.01) * 0.15;
-    ctx.strokeStyle = skinColor;
-    ctx.fillStyle = skinColor;
-    ctx.lineWidth = 2.2;
-    ctx.globalAlpha = flicker;
-
-    const drawEye = (ex, ey, kind) => {
-      ctx.save();
-      if (kind === "happy") {
-        ctx.beginPath();
-        ctx.arc(ex, ey + 2, 4.6, Math.PI, 0);
-        ctx.stroke();
-      } else if (kind === "sleep") {
-        ctx.beginPath();
-        ctx.arc(ex, ey, 4.6, 0, Math.PI);
-        ctx.stroke();
-      } else if (kind === "x") {
-        ctx.beginPath();
-        ctx.moveTo(ex - 4, ey - 4); ctx.lineTo(ex + 4, ey + 4);
-        ctx.moveTo(ex + 4, ey - 4); ctx.lineTo(ex - 4, ey + 4);
-        ctx.stroke();
-      } else if (kind === "looping") {
-        ctx.beginPath();
-        ctx.arc(ex, ey, 4.2, 0, Math.PI * 2);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.arc(ex, ey, 2.0, 0, Math.PI * 2);
-        ctx.stroke();
-      } else {
-        const eh = blinking ? 0.8 : 4.4;
-        ctx.beginPath();
-        ctx.ellipse(ex, ey, 4.8, eh, 0, 0, Math.PI * 2);
-        ctx.fill();
-        if (!blinking) {
-          ctx.fillStyle = "#0f141c";
-          for (let sy = ey - eh + 1; sy < ey + eh; sy += 2.4) {
-            ctx.fillRect(ex - 6, sy, 12, 1);
-          }
-        }
-      }
-      ctx.restore();
-    };
-
-    const eyeKind =
-      mode === "happy"
-        ? "happy"
-        : mode === "sleeping"
-        ? "sleep"
-        : mode === "error"
-        ? "x"
-        : mode === "looping"
-        ? "looping"
-        : "scan";
-
-    drawEye(-8, -57, eyeKind);
-    drawEye(8, -57, eyeKind);
-
-    // Mouth
-    if (mode === "happy") {
-      ctx.beginPath();
-      ctx.arc(0, -48, 6, 0, Math.PI);
-      ctx.stroke();
-    } else if (mode === "sleeping") {
-      ctx.beginPath();
-      ctx.arc(0, -45, 1.8, 0, Math.PI * 2);
-      ctx.stroke();
-    } else if (mode === "error") {
-      ctx.beginPath();
-      ctx.moveTo(-7, -45); ctx.lineTo(-3.5, -48); ctx.lineTo(0, -45); ctx.lineTo(3.5, -48); ctx.lineTo(7, -45);
-      ctx.stroke();
-    } else if (mode === "looping") {
-      ctx.beginPath();
-      ctx.arc(0, -46, 3.2, 0, Math.PI * 2);
-      ctx.stroke();
-    } else {
-      const mw = 5 + intensity * 3;
-      ctx.beginPath();
-      ctx.ellipse(0, -46, mw, 2.4 + intensity * 1.2, 0, 0, Math.PI * 2);
-      ctx.fill();
-    }
-
-    // 5. Particles (Z's or Smoke)
-    if (mode === "sleeping") {
-      for (let k = 0; k < 3; k++) {
-        const p = ((t * 0.0004 + k / 3) % 1);
-        const zx = 20 + p * 16;
-        const zy = -78 - p * 30;
-        const s = 3 + p * 4;
-        ctx.strokeStyle = "#a5b4cc";
-        ctx.globalAlpha = 1 - p;
-        ctx.lineWidth = 1.6;
-        ctx.beginPath();
-        ctx.moveTo(zx, zy); ctx.lineTo(zx + s, zy); ctx.lineTo(zx, zy + s); ctx.lineTo(zx + s, zy + s);
-        ctx.stroke();
-      }
-    } else if (mode === "error" || mode === "looping") {
-      for (let k = 0; k < 5; k++) {
-        const p = ((t * 0.0008 + k / 5) % 1);
-        const sx = Math.sin(p * 8 + k * 1.3) * 7 + (k - 2) * 3.5;
-        const sy = -76 - p * 38;
-        const r = 2.5 + p * 7;
-        ctx.fillStyle = "#4b5563";
-        ctx.globalAlpha = 0.65 * (1 - p);
-        ctx.beginPath();
-        ctx.arc(sx, sy, r, 0, Math.PI * 2);
-        ctx.fill();
-      }
-    }
-
-    ctx.restore();
-    return { bob, shake, rotL, rotR, blinking };
-  }
-
-  function drawDesk(ctx, cx, cy, t, intensity, mode, clientType, propsList, accentColor) {
-    ctx.save();
-    ctx.translate(cx, cy);
-
-    const W = 210;
-    const H = 120;
-
-    // Desk Slab
-    const dGrad = ctx.createLinearGradient(0, -30, 0, H - 30);
-    dGrad.addColorStop(0, "#2b3443");
-    dGrad.addColorStop(1, "#181d26");
-    ctx.fillStyle = dGrad;
-    ctx.beginPath();
-    ctx.roundRect(-W / 2, 0, W, H, 10);
-    ctx.fill();
-    ctx.strokeStyle = "#475569";
-    ctx.lineWidth = 1.5;
-    ctx.stroke();
-
-    // Desk Lip Highlight
-    ctx.fillStyle = "rgba(255,255,255,0.15)";
-    ctx.fillRect(-W / 2, 0, W, 4);
-
-    // Latency Progress Bar
-    const barW = W - 40;
-    ctx.fillStyle = "#0f141c";
-    ctx.fillRect(-barW / 2, H - 14, barW, 6);
-    ctx.fillStyle = mode === "error" ? "#f43f5e" : intensity > 0.8 ? "#f59e0b" : "#10b981";
-    ctx.fillRect(-barW / 2, H - 14, barW * (0.3 + intensity * 0.7), 6);
-
-    // Center Monitor Screen
-    ctx.fillStyle = "#0b0e13";
-    ctx.fillRect(-45, -45, 90, 48);
-    ctx.fillStyle = mode === "error" ? "rgba(244,63,94,0.3)" : "rgba(0,240,255,0.25)";
-    ctx.fillRect(-42, -42, 84, 42);
-
-    // Screen Code Lines
-    ctx.fillStyle = "#ffffff";
-    for (let i = 0; i < 4; i++) {
-      ctx.globalAlpha = 0.4 + Math.sin(t * 0.01 + i) * 0.2;
-      ctx.fillRect(-38, -38 + i * 9, 20 + ((i * 19) % 36), 3);
-    }
-    ctx.globalAlpha = 1;
-
-    // Monitor Client Badge
-    ctx.fillStyle = clientType === "app" ? "#3b0764" : "#064e3b";
-    ctx.fillRect(-42, -42, 28, 12);
-    ctx.fillStyle = clientType === "app" ? "#d8b4fe" : "#6ee7b7";
-    ctx.font = "bold 8px monospace";
-    ctx.fillText(clientType === "app" ? "APP" : "CLI", -38, -33);
-
-    // ------------------------------------------------------------------------
-    // PROPS ON DESK (Dynamic based on activeProps)
-    // ------------------------------------------------------------------------
-    const hasProp = (keyword) => activeProps.some((p) => String(p).toLowerCase().includes(keyword));
-
-    // 1. Hologram Cube
-    if (hasProp("holo") || hasProp("cube") || hasProp("prop_2") || activeProps.length > 2) {
-      ctx.save();
-      ctx.translate(65, -15);
-      ctx.rotate(t * 0.002);
-      ctx.strokeStyle = accentColor || "#38bdf8";
-      ctx.lineWidth = 1.4;
-      ctx.strokeRect(-10, -10, 20, 20);
-      ctx.restore();
-    }
-
-    // 2. Steaming Coffee Mug
-    if (hasProp("coffee") || hasProp("mug") || hasProp("prop_0") || activeProps.length > 0) {
-      ctx.fillStyle = "#e2e8f0";
-      ctx.fillRect(-80, 10, 14, 16);
-      if (intensity > 0) {
-        for (let i = 0; i < 3; i++) {
-          const p = ((t * 0.001 + i / 3) % 1);
-          const sx = -73 + Math.sin(p * 5 + i) * 3;
-          const sy = 8 - p * 14;
-          ctx.fillStyle = "rgba(255,255,255," + (0.45 * (1 - p)) + ")";
-          ctx.beginPath();
-          ctx.arc(sx, sy, 1 + p * 2, 0, Math.PI * 2);
-          ctx.fill();
-        }
-      }
-    }
-
-    // 3. Server Tower with Multi-Color Blinking LEDs
-    if (hasProp("server") || hasProp("tower") || hasProp("prop_1") || activeProps.length > 1) {
-      ctx.fillStyle = "#1e293b";
-      ctx.fillRect(-96, -26, 12, 38);
-      for (let idx = 0; idx < 4; idx++) {
-        const blink = Math.sin(t * 0.008 + idx * 1.6) > 0;
-        const ledCol = ["#22c55e", "#00f0ff", "#f59e0b", "#ec4899"][idx];
-        ctx.fillStyle = blink ? ledCol : "#0f172a";
-        ctx.beginPath();
-        ctx.arc(-90, -20 + idx * 8, 1.6, 0, Math.PI * 2);
-        ctx.fill();
-      }
-    }
-
-    // 4. Oscilloscope
-    if (hasProp("osc") || hasProp("wave") || hasProp("prop_3")) {
-      ctx.fillStyle = "#111827";
-      ctx.fillRect(55, 10, 32, 22);
-      ctx.strokeStyle = "#10b981";
-      ctx.lineWidth = 1.2;
-      ctx.beginPath();
-      ctx.moveTo(57, 21);
-      for (let ox = 57; ox <= 85; ox += 2) {
-        const oy = 21 + Math.sin(t * 0.01 + ox * 0.8) * 4;
-        ctx.lineTo(ox, oy);
-      }
-      ctx.stroke();
-    }
-
-    ctx.restore();
-  }
-
-  function drawPet(ctx, cx, cy, petItem, t, mode) {
-    if (!petItem || petItem.id === "pet_0" || petItem.archetype === "none") return;
-    ctx.save();
-
-    const arch = petItem.archetype || "hover_drone";
-    const color = petItem.color || "#00f0ff";
-
-    let py = cy;
-    let px = cx;
-    let scaleY = 1;
-
-    if (arch === "hover_drone") {
-      py = cy - 25 + Math.sin(t * 0.005) * 5;
-    } else if (mode === "happy") {
-      py = cy - Math.abs(Math.sin(t * 0.008)) * 8;
-      scaleY = 1 + Math.abs(Math.sin(t * 0.008)) * 0.15;
-    } else if (mode === "sleeping") {
-      scaleY = 1 + Math.sin(t * 0.0016) * 0.04;
-    } else if (mode === "error") {
-      px = cx + Math.sin(t * 0.08) * 2;
-    } else if (mode === "looping") {
-      ctx.rotate(Math.sin(t * 0.04) * 0.15);
-    }
-
-    ctx.translate(px, py);
-    ctx.scale(1, scaleY);
-
-    if (arch === "hover_drone") {
-      // Hover Drone
-      ctx.fillStyle = "#0f172a";
-      ctx.beginPath();
-      ctx.ellipse(0, 0, 14, 8, 0, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1.5;
-      ctx.stroke();
-
-      // Spinning Halo Rotor
-      ctx.strokeStyle = "#ffffff";
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.ellipse(0, -6, 16, 3, 0, 0, Math.PI * 2);
-      ctx.stroke();
-
-      // Scanner Eye
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.arc(0, 0, 2.5, 0, Math.PI * 2);
-      ctx.fill();
-    } else {
-      // Cyber Cat / Robo Pup Ground Companion
-      ctx.fillStyle = "#1e293b";
-      ctx.beginPath();
-      ctx.roundRect(-10, -14, 20, 16, 5);
-      ctx.fill();
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1.4;
-      ctx.stroke();
-
-      // Ears
-      ctx.fillStyle = color;
-      ctx.beginPath();
-      ctx.moveTo(-8, -14); ctx.lineTo(-4, -20); ctx.lineTo(-1, -14);
-      ctx.moveTo(1, -14); ctx.lineTo(4, -20); ctx.lineTo(8, -14);
-      ctx.fill();
-
-      // Glowing Eyes
-      ctx.fillStyle = mode === "sleeping" ? "#64748b" : "#ffffff";
-      ctx.beginPath();
-      ctx.arc(-4, -8, 1.5, 0, Math.PI * 2);
-      ctx.arc(4, -8, 1.5, 0, Math.PI * 2);
-      ctx.fill();
-    }
-
-    ctx.restore();
-  }
 
   // --------------------------------------------------------------------------
   // ACTIONS: RANDOMIZE, RESET, APPLY LOADOUT
@@ -957,7 +190,7 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
               </span>
             </div>
             <p className="text-xs text-slate-400">
-              Mix and match 1,010 skins, desk props, cyber pets, auras, and floor themes with live animated actions.
+              Mix and match 148 skins, desk props, cyber pets, auras, and floor themes with live animated actions.
             </p>
           </div>
         </div>
@@ -1024,18 +257,37 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
               </div>
             </div>
 
-            {/* Canvas Stage Viewport */}
+            {/* Live React SVG Agent Viewport */}
             <div className="relative rounded-lg overflow-hidden border border-[#2d2d3a] bg-[#0c0d12] flex items-center justify-center shadow-inner h-[380px]">
-              <canvas ref={canvasRef} width={640} height={460} className="w-full h-full block select-none" />
+              <LiveReactAgent
+                skinId={activeSkinId}
+                skinItem={currentSkinItem}
+                petId={activePetId}
+                petItem={currentPetItem}
+                propsList={activeProps}
+                auraId={activeAuraId}
+                auraItem={currentAuraItem}
+                themeId={activeThemeId}
+                themeItem={currentThemeItem}
+                mode={currentMode}
+                intensity={intensity}
+                clientType={clientType}
+                isPlaying={isPlaying}
+                interactive={true}
+                showFloor={true}
+                showDesk={true}
+                onTelemetry={setTelemetry}
+                className="w-full h-full"
+              />
 
               {/* Theme Badge Overlay */}
-              <div className="absolute top-2.5 left-2.5 px-2.5 py-1 rounded-md bg-black/60 backdrop-blur-md border border-white/10 text-[10px] font-mono text-slate-300 flex items-center gap-1.5">
+              <div className="absolute top-2.5 left-2.5 px-2.5 py-1 rounded-md bg-black/60 backdrop-blur-md border border-white/10 text-[10px] font-mono text-slate-300 flex items-center gap-1.5 pointer-events-none z-10">
                 <Palette className="w-3 h-3 text-cyan-400" />
                 <span>{currentThemeItem?.name || "Classic Slate"}</span>
               </div>
 
               {/* Action Mode Overlay */}
-              <div className="absolute top-2.5 right-2.5 px-2.5 py-1 rounded-md bg-black/60 backdrop-blur-md border border-white/10 text-[10px] font-mono font-bold text-cyan-300 uppercase">
+              <div className="absolute top-2.5 right-2.5 px-2.5 py-1 rounded-md bg-black/60 backdrop-blur-md border border-white/10 text-[10px] font-mono font-bold text-cyan-300 uppercase pointer-events-none z-10">
                 {currentMode}
               </div>
             </div>
@@ -1118,6 +370,18 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
               </div>
             </div>
 
+            {/* Active VFX Indicator */}
+            <div className="flex items-center justify-between px-2.5 py-1.5 rounded-lg bg-[#13141a] border border-[#272836] text-[11px]">
+              <div className="flex items-center gap-1.5 text-slate-300">
+                <Sparkles className="w-3.5 h-3.5 text-cyan-400" />
+                <span className="text-slate-400">Equipped VFX:</span>
+                <span className="font-bold text-cyan-300 truncate max-w-[200px]">{currentAuraItem?.name || "None"}</span>
+              </div>
+              <span className="px-1.5 py-0.5 rounded bg-cyan-500/20 text-cyan-300 font-mono font-bold text-[9px] uppercase border border-cyan-500/30">
+                Live 60 FPS VFX
+              </span>
+            </div>
+
             {/* Live Telemetry Measurements */}
             <div className="grid grid-cols-4 gap-2 p-2 rounded-lg bg-[#121217] border border-[#252530] text-[10px] font-mono text-center">
               <div>
@@ -1148,11 +412,11 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
             {/* Mixer Category Navigation Tabs */}
             <div className="flex items-center gap-1.5 border-b border-[#2b2b38] pb-2 overflow-x-auto">
               {[
-                { id: "skins", label: "Skins (250)", icon: Bot, count: 250 },
-                { id: "props", label: "Props (350)", icon: Laptop, count: 350 },
-                { id: "pets", label: "Pets (200)", icon: Sparkles, count: 200 },
-                { id: "auras", label: "Auras (100)", icon: Layers, count: 100 },
-                { id: "themes", label: "Themes (10)", icon: Palette, count: 10 },
+                { id: "skins", label: `Skins (${(COSMETIC_CATALOG.skins || []).length})`, icon: Bot, count: (COSMETIC_CATALOG.skins || []).length },
+                { id: "props", label: `Props (${(COSMETIC_CATALOG.props || []).length})`, icon: Laptop, count: (COSMETIC_CATALOG.props || []).length },
+                { id: "pets", label: `Pets (${(COSMETIC_CATALOG.pets || []).length})`, icon: Sparkles, count: (COSMETIC_CATALOG.pets || []).length },
+                { id: "auras", label: `Auras (${(COSMETIC_CATALOG.auras || []).length})`, icon: Layers, count: (COSMETIC_CATALOG.auras || []).length },
+                { id: "themes", label: `Themes (${(COSMETIC_CATALOG.officeThemes || []).length})`, icon: Palette, count: (COSMETIC_CATALOG.officeThemes || []).length },
               ].map((tab) => {
                 const Icon = tab.icon;
                 const active = mixerTab === tab.id;
@@ -1196,13 +460,12 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
                   onChange={(e) => setArchetypeFilter(e.target.value)}
                   className="bg-[#111116] border border-[#2b2b36] rounded-lg px-2.5 py-1.5 text-xs text-slate-300 focus:outline-none"
                 >
-                  <option value="all">All Archetypes</option>
-                  <option value="cyber_cat">Cyber Cat</option>
-                  <option value="stealth_ninja">Stealth Ninja</option>
-                  <option value="mecha_pilot">Mecha Pilot</option>
-                  <option value="matrix_hacker">Matrix Hacker</option>
-                  <option value="celestial_astro">Celestial</option>
-                  <option value="cyber_suit">Cyber Suit</option>
+                  <option value="all">All Archetypes (50)</option>
+                  <option value="cyber_suit">Cyber Suit (10)</option>
+                  <option value="mecha_pilot">Mecha Pilot (10)</option>
+                  <option value="stealth_ninja">Stealth Ninja (10)</option>
+                  <option value="matrix_hacker">Matrix Hacker (10)</option>
+                  <option value="celestial_astro">Celestial Astro (10)</option>
                 </select>
               )}
             </div>
@@ -1276,11 +539,12 @@ export default function LiveFittingRoom({ initialStoreState, onEquipSuccess }) {
 
             {/* Loadout Summary Footer */}
             <div className="pt-2 border-t border-[#262632] flex flex-wrap items-center justify-between text-[11px] text-slate-400">
-              <div className="truncate">
+              <div className="truncate max-w-[80%]">
                 <span>Loadout: </span>
-                <strong className="text-slate-200">{currentSkinItem?.name}</strong> +{" "}
+                <strong className="text-slate-200">{currentSkinItem?.name || "Agent"}</strong> +{" "}
                 <strong className="text-slate-200">{activeProps.length} Props</strong> +{" "}
-                <strong className="text-slate-200">{currentPetItem?.name}</strong>
+                <strong className="text-slate-200">{currentPetItem?.name || "None"}</strong> +{" "}
+                <strong className="text-cyan-300">{currentAuraItem?.name || "No VFX"}</strong>
               </div>
               <button
                 onClick={handleApplyLoadout}