opencroc 1.8.1 → 1.8.2

package/dist/web/{js/agents.js → src/runtime/agents.ts}

@@ -6,12 +6,24 @@
 
 import * as THREE from 'three';
 import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
-import { DESK_POSITIONS } from './office.js';
+import { DESK_POSITIONS, POND_POSITIONS, setDeskOccupied } from './office';
 
 /* ─── Module state ─────────────────────────────────────────────────────────── */
 const agents = new Map(); // name → { group, parts, label, bubble, anim }
 let scene = null;
-let css2dRenderer = null;
+let css2dRenderer = null;
+let css2dResizeHandler = null;
+
+function disposeObject3D(object) {
+  object?.traverse?.((child) => {
+    child.geometry?.dispose?.();
+    if (Array.isArray(child.material)) {
+      child.material.forEach((material) => material?.dispose?.());
+    } else {
+      child.material?.dispose?.();
+    }
+  });
+}
 
 /* ─── Robot Colors per Role ────────────────────────────────────────────────── */
 const ROLE_COLORS = {
@@ -37,6 +49,17 @@ const STATUS_ANIM = {
   passed:   { speed: 1.0, bobAmp: 0.05, rotSpeed: 0.2 },
 };
 
+const ACTIVE_STATUSES = new Set([
+  'working',
+  'testing',
+  'thinking',
+  'scanning',
+  'navigating',
+  'interacting',
+  'asserting',
+  'reporting',
+]);
+
 /* ═══════════════════════════════════════════════════════════════════════════════
    AgentManager — Creates, updates, removes 3D robot agents
    ═══════════════════════════════════════════════════════════════════════════════ */
@@ -45,12 +68,17 @@ export class AgentManager {
     scene = sceneRef;
     this._time = 0;
     this._bubbleTimers = new Map();
+    this._deskAssignments = new Map();
+    this._eventAssignments = new Map();
     this._initCSS2D();
   }
 
-  /** Initialize CSS2D renderer for labels and bubbles */
-  _initCSS2D() {
-    css2dRenderer = new CSS2DRenderer();
+  /** Initialize CSS2D renderer for labels and bubbles */
+  _initCSS2D() {
+    if (css2dRenderer?.domElement?.parentNode) {
+      css2dRenderer.domElement.parentNode.removeChild(css2dRenderer.domElement);
+    }
+    css2dRenderer = new CSS2DRenderer();
     css2dRenderer.setSize(window.innerWidth, window.innerHeight);
     css2dRenderer.domElement.style.position = 'fixed';
     css2dRenderer.domElement.style.top = '0';
@@ -59,14 +87,16 @@ export class AgentManager {
     css2dRenderer.domElement.style.zIndex = '5';
     document.body.appendChild(css2dRenderer.domElement);
 
-    window.addEventListener('resize', () => {
-      css2dRenderer.setSize(window.innerWidth, window.innerHeight);
-    });
-  }
+    css2dResizeHandler = () => {
+      css2dRenderer.setSize(window.innerWidth, window.innerHeight);
+    };
+    window.addEventListener('resize', css2dResizeHandler);
+  }
 
   /** Sync agents from backend data */
   sync(agentData) {
     const current = new Set();
+    const active = new Set();
 
     agentData.forEach((a, i) => {
       current.add(a.name);
@@ -74,11 +104,51 @@ export class AgentManager {
         this._createRobot(a, i, agentData.length);
       }
       this._updateStatus(a.name, a.status);
+      const eventActive = this._eventAssignments.get(a.name);
+      const isActive = typeof eventActive === 'boolean' ? eventActive : this._isActiveStatus(a.status);
+      if (isActive) active.add(a.name);
+    });
+
+    // Drop stale event-assignment flags for removed agents.
+    for (const name of this._eventAssignments.keys()) {
+      if (!current.has(name)) this._eventAssignments.delete(name);
+    }
+
+    // Release desks for idle/done agents.
+    for (const [name, deskIdx] of this._deskAssignments) {
+      if (!current.has(name) || !active.has(name)) {
+        this._deskAssignments.delete(name);
+      }
+    }
+
+    // Assign desks to active agents that don't have one yet.
+    active.forEach((name) => {
+      if (!this._deskAssignments.has(name)) {
+        const deskIdx = this._nextFreeDesk();
+        if (deskIdx >= 0) this._deskAssignments.set(name, deskIdx);
+      }
+    });
+
+    this._syncDeskOccupancy();
+
+    // Update movement targets by current allocation.
+    current.forEach((name) => {
+      const agent = agents.get(name);
+      if (!agent) return;
+      const deskIdx = this._deskAssignments.get(name);
+      if (typeof deskIdx === 'number' && DESK_POSITIONS[deskIdx]) {
+        const desk = DESK_POSITIONS[deskIdx];
+        this._setTarget(agent, desk.x, desk.z + 1.2, 'desk', desk);
+      } else {
+        const pond = POND_POSITIONS[agent.pondSlot % Math.max(1, POND_POSITIONS.length)] || { x: -9, z: 6.2 };
+        this._setTarget(agent, pond.x, pond.z, 'pond');
+      }
     });
 
     // Remove stale agents
     for (const [name] of agents) {
       if (!current.has(name)) {
+        this._deskAssignments.delete(name);
         this._removeRobot(name);
       }
     }
@@ -87,6 +157,89 @@ export class AgentManager {
     this._scheduleBubbles(agentData);
   }
 
+  applyAssignmentEvent(payload) {
+    const name = payload?.name;
+    if (!name || !agents.has(name)) return null;
+
+    this._eventAssignments.set(name, true);
+    if (!this._deskAssignments.has(name)) {
+      const deskIdx = this._nextFreeDesk();
+      if (deskIdx >= 0) this._deskAssignments.set(name, deskIdx);
+    }
+
+    const agent = agents.get(name);
+    const deskIdx = this._deskAssignments.get(name);
+    if (!agent || typeof deskIdx !== 'number' || !DESK_POSITIONS[deskIdx]) return null;
+
+    const desk = DESK_POSITIONS[deskIdx];
+    const from = { x: agent.baseX, z: agent.baseZ };
+    this._setTarget(agent, desk.x, desk.z + 1.2, 'desk', desk);
+    this._syncDeskOccupancy();
+    this._flashSummon(name);
+
+    return { from, to: { x: desk.x, z: desk.z + 1.2 }, kind: 'assigned' };
+  }
+
+  applyReleaseEvent(payload) {
+    const name = payload?.name;
+    if (!name || !agents.has(name)) return null;
+
+    this._eventAssignments.set(name, false);
+    this._deskAssignments.delete(name);
+
+    const agent = agents.get(name);
+    if (!agent) return null;
+
+    const pond = POND_POSITIONS[agent.pondSlot % Math.max(1, POND_POSITIONS.length)] || { x: -9, z: 6.2 };
+    const from = { x: agent.baseX, z: agent.baseZ };
+    this._setTarget(agent, pond.x, pond.z, 'pond');
+    this._syncDeskOccupancy();
+
+    return { from, to: { x: pond.x, z: pond.z }, kind: 'released' };
+  }
+
+  _flashSummon(name) {
+    const agent = agents.get(name);
+    if (!agent) return;
+
+    // Brief glow spike
+    if (agent.parts.glow) {
+      const prev = agent.parts.glow.intensity;
+      agent.parts.glow.intensity = 1.9;
+      setTimeout(() => {
+        const a = agents.get(name);
+        if (a && a.parts.glow) a.parts.glow.intensity = prev;
+      }, 700);
+    }
+
+    // Expanding ring at robot feet (blue for assignment)
+    const ringGeo = new THREE.TorusGeometry(0.3, 0.04, 8, 20);
+    const ringMat = new THREE.MeshBasicMaterial({
+      color: 0x60a5fa, transparent: true, opacity: 0.88, depthWrite: false,
+    });
+    const ring = new THREE.Mesh(ringGeo, ringMat);
+    ring.rotation.x = -Math.PI / 2;
+    ring.position.set(agent.baseX, 0.24, agent.baseZ);
+    scene.add(ring);
+
+    let life = 0;
+    const ttl = 0.78;
+    const tick = () => {
+      life += 0.016;
+      ring.position.set(agent.baseX, 0.24, agent.baseZ);
+      ring.scale.setScalar(1 + (life / ttl) * 4.5);
+      ring.material.opacity = Math.max(0, 0.88 * (1 - life / ttl));
+      if (life < ttl) {
+        requestAnimationFrame(tick);
+      } else {
+        scene.remove(ring);
+        ringGeo.dispose();
+        ringMat.dispose();
+      }
+    };
+    requestAnimationFrame(tick);
+  }
+
   /** Update all agents each frame */
   update(dt) {
     this._time += dt;
@@ -94,6 +247,31 @@ export class AgentManager {
     for (const [name, agent] of agents) {
       const anim = STATUS_ANIM[agent.status] || STATUS_ANIM.idle;
 
+      let moveTargetX = agent.targetX;
+      let moveTargetZ = agent.targetZ;
+      if (agent.path.length) {
+        moveTargetX = agent.path[0].x;
+        moveTargetZ = agent.path[0].z;
+      }
+
+      // Move toward target zone.
+      const dx = moveTargetX - agent.baseX;
+      const dz = moveTargetZ - agent.baseZ;
+      const dist = Math.hypot(dx, dz);
+      if (dist > 0.01) {
+        const speed = agent.zone === 'desk' ? 4.2 : 2.6;
+        const step = Math.min(1, (dt * speed) / dist);
+        agent.baseX += dx * step;
+        agent.baseZ += dz * step;
+        agent.group.lookAt(new THREE.Vector3(moveTargetX, 0.2, moveTargetZ));
+      } else if (agent.path.length) {
+        agent.path.shift();
+      } else if (agent.zone === 'desk' && agent.deskPos) {
+        agent.group.lookAt(new THREE.Vector3(agent.deskPos.x, 0.2, agent.deskPos.z));
+      } else if (agent.zone === 'pond') {
+        agent.group.lookAt(new THREE.Vector3(-9, 0.2, 6.2));
+      }
+
       // Bobbing
       const bobY = Math.sin(this._time * anim.speed * 2) * anim.bobAmp;
       agent.group.position.y = agent.baseY + bobY;
@@ -147,7 +325,15 @@ export class AgentManager {
      ═════════════════════════════════════════════════════════════════════════ */
   _createRobot(agentData, index, total) {
     const role = agentData.role || 'parser';
-    const colors = ROLE_COLORS[role] || DEFAULT_COLORS;
+    // Support dynamic color from server (hex string like '#60a5fa')
+    let colors = ROLE_COLORS[role] || DEFAULT_COLORS;
+    if (agentData.color && !ROLE_COLORS[role]) {
+      const hex = parseInt(agentData.color.replace('#', ''), 16);
+      if (!isNaN(hex)) {
+        const lighter = new THREE.Color(hex).lerp(new THREE.Color(0xffffff), 0.35).getHex();
+        colors = { body: hex, accent: hex, eye: lighter, glow: hex };
+      }
+    }
     const group = new THREE.Group();
     group.name = `agent-${agentData.name}`;
 
@@ -311,14 +497,13 @@ export class AgentManager {
     group.add(shadow);
 
     /* ── Position ────────────────────────────────────────────────────────── */
-    const desk = DESK_POSITIONS[index] || { x: index * 3 - 6, z: 0 };
-    const x = desk.x;
-    const z = desk.z + 1.2; // Position in front of desk (in chair)
+    const pondSlot = index % Math.max(1, POND_POSITIONS.length);
+    const pond = POND_POSITIONS[pondSlot] || { x: -9, z: 6.2 };
+    const x = pond.x;
+    const z = pond.z;
 
     group.position.set(x, 0.2, z);
-
-    // Point toward desk
-    group.lookAt(new THREE.Vector3(desk.x, 0.2, desk.z));
+    group.lookAt(new THREE.Vector3(-9, 0.2, 6.2));
 
     scene.add(group);
 
@@ -346,7 +531,12 @@ export class AgentManager {
       baseX: x,
       baseY: 0.2,
       baseZ: z,
-      deskPos: desk,
+      deskPos: null,
+      pondSlot,
+      zone: 'pond',
+      targetX: x,
+      targetZ: z,
+      path: [],
     });
   }
 
@@ -369,14 +559,72 @@ export class AgentManager {
     }
   }
 
+  _isActiveStatus(status) {
+    return ACTIVE_STATUSES.has(status || 'idle');
+  }
+
+  _nextFreeDesk() {
+    const used = new Set(this._deskAssignments.values());
+    for (let i = 0; i < DESK_POSITIONS.length; i++) {
+      if (!used.has(i)) return i;
+    }
+    return -1;
+  }
+
+  _setTarget(agent, x, z, zone, deskPos = null) {
+    const changed = zone !== agent.zone || Math.hypot(agent.targetX - x, agent.targetZ - z) > 0.06;
+    if (!changed) {
+      agent.deskPos = deskPos;
+      return;
+    }
+
+    agent.targetX = x;
+    agent.targetZ = z;
+    agent.zone = zone;
+    agent.deskPos = deskPos;
+    agent.path = this._buildPath(agent, x, z, zone);
+  }
+
+  _buildPath(agent, targetX, targetZ, zone) {
+    const path = [];
+    const corridorZ = 2.6;
+    const pondGateX = -6.4;
+
+    const nearCorridor = Math.abs(agent.baseZ - corridorZ) < 0.6;
+    if (!nearCorridor) {
+      path.push({ x: agent.baseX, z: corridorZ });
+    }
+
+    if (zone === 'desk') {
+      path.push({ x: targetX, z: corridorZ });
+      path.push({ x: targetX, z: targetZ });
+      return path;
+    }
+
+    path.push({ x: pondGateX, z: corridorZ + 1.1 });
+    path.push({ x: targetX, z: targetZ });
+    return path;
+  }
+
+  _syncDeskOccupancy() {
+    for (let i = 0; i < DESK_POSITIONS.length; i++) {
+      setDeskOccupied(i, false);
+    }
+    for (const deskIdx of this._deskAssignments.values()) {
+      setDeskOccupied(deskIdx, true);
+    }
+  }
+
   /* ═════════════════════════════════════════════════════════════════════════
      Remove Robot
      ═════════════════════════════════════════════════════════════════════════ */
-  _removeRobot(name) {
-    const agent = agents.get(name);
-    if (!agent) return;
-    scene.remove(agent.group);
-    agents.delete(name);
+  _removeRobot(name) {
+    const agent = agents.get(name);
+    if (!agent) return;
+    scene.remove(agent.group);
+    disposeObject3D(agent.group);
+    agents.delete(name);
+    this._syncDeskOccupancy();
 
     // Clean bubble timer
     const bt = this._bubbleTimers.get(name);
@@ -427,7 +675,7 @@ export class AgentManager {
     }
   }
 
-  _showBubble(name, text) {
+  _showBubble(name, text) {
     const agent = agents.get(name);
     if (!agent) return;
 
@@ -446,14 +694,39 @@ export class AgentManager {
     agent.bubbleObj = bubble;
 
     // Remove after 3 seconds
-    setTimeout(() => {
-      if (agent.bubbleObj === bubble) {
-        agent.group.remove(bubble);
-        agent.bubbleObj = null;
-      }
-    }, 3000);
-  }
-}
+    setTimeout(() => {
+      if (agent.bubbleObj === bubble) {
+        agent.group.remove(bubble);
+        agent.bubbleObj = null;
+      }
+    }, 3000);
+  }
+
+  dispose() {
+    for (const timer of this._bubbleTimers.values()) {
+      clearTimeout(timer);
+    }
+    this._bubbleTimers.clear();
+    this._deskAssignments.clear();
+    this._eventAssignments.clear();
+
+    for (const name of [...agents.keys()]) {
+      this._removeRobot(name);
+    }
+
+    if (css2dResizeHandler) {
+      window.removeEventListener('resize', css2dResizeHandler);
+      css2dResizeHandler = null;
+    }
+
+    if (css2dRenderer?.domElement?.parentNode) {
+      css2dRenderer.domElement.parentNode.removeChild(css2dRenderer.domElement);
+    }
+
+    css2dRenderer = null;
+    scene = null;
+  }
+}
 
 /* ═══════════════════════════════════════════════════════════════════════════════
    Helper exports

package/dist/web/{js/camera.js → src/runtime/camera.ts}

@@ -118,8 +118,15 @@ export class CameraController {
     this.controls.autoRotate = false;
   }
 
-  /** Get the raw controls for external use */
-  getControls() {
-    return this.controls;
-  }
-}
+  /** Get the raw controls for external use */
+  getControls() {
+    return this.controls;
+  }
+
+  dispose() {
+    this.controls?.dispose?.();
+    if (this.scene?.userData?.camera === this.camera) {
+      delete this.scene.userData.camera;
+    }
+  }
+}

package/dist/web/{js/dataviz.js → src/runtime/dataviz.ts}

@@ -4,7 +4,18 @@
    ~2000 lines
    ═══════════════════════════════════════════════════════════════════════════════ */
 
-import * as THREE from 'three';
+import * as THREE from 'three';
+
+function disposeObject3D(object) {
+  object?.traverse?.((child) => {
+    child.geometry?.dispose?.();
+    if (Array.isArray(child.material)) {
+      child.material.forEach((material) => material?.dispose?.());
+    } else {
+      child.material?.dispose?.();
+    }
+  });
+}
 
 /* ─── Color Map per module ─────────────────────────────────────────────────── */
 const MOD_COLORS = [
@@ -125,10 +136,18 @@ export class GraphViz {
     }
   }
 
-  /** Show/hide the graph */
-  show() { this.group.visible = true; }
-  hide() { this.group.visible = false; }
-}
+  /** Show/hide the graph */
+  show() { this.group.visible = true; }
+  hide() { this.group.visible = false; }
+
+  dispose() {
+    this.scene.remove(this.group);
+    disposeObject3D(this.group);
+    this._nodes.clear();
+    this._edges = [];
+    this._modules.clear();
+  }
+}
 
 /* ═══════════════════════════════════════════════════════════════════════════════
    HologramDisplay — Central floating data display
@@ -250,7 +269,7 @@ export class HologramDisplay {
   }
 
   /** Update each frame */
-  update(dt, graphData) {
+  update(dt, graphData) {
     this._time += dt;
 
     // Rotate elements
@@ -278,11 +297,16 @@ export class HologramDisplay {
     this.holoLight.intensity = 0.6 + 0.4 * Math.sin(this._time * 2);
 
     // Update sphere opacity based on data amount
-    if (graphData && graphData.nodes) {
-      const nodeCount = graphData.nodes.length;
-      const t = Math.min(nodeCount / 100, 1);
-      this.sphere.material.opacity = 0.1 + t * 0.2;
-      this.innerSphere.material.opacity = 0.08 + t * 0.15;
-    }
-  }
-}
+    if (graphData && graphData.nodes) {
+      const nodeCount = graphData.nodes.length;
+      const t = Math.min(nodeCount / 100, 1);
+      this.sphere.material.opacity = 0.1 + t * 0.2;
+      this.innerSphere.material.opacity = 0.08 + t * 0.15;
+    }
+  }
+
+  dispose() {
+    this.scene.remove(this.group);
+    disposeObject3D(this.group);
+  }
+}

package/dist/web/{js/effects.js → src/runtime/effects.ts}

@@ -3,7 +3,18 @@
    ~2000 lines
    ═══════════════════════════════════════════════════════════════════════════════ */
 
-import * as THREE from 'three';
+import * as THREE from 'three';
+
+function disposeObject3D(object) {
+  object?.traverse?.((child) => {
+    child.geometry?.dispose?.();
+    if (Array.isArray(child.material)) {
+      child.material.forEach((material) => material?.dispose?.());
+    } else {
+      child.material?.dispose?.();
+    }
+  });
+}
 
 /* ═══════════════════════════════════════════════════════════════════════════════
    ParticleManager
@@ -342,4 +353,130 @@ export class ParticleManager {
 
     this.systems.push(sys);
   }
-}
+
+  triggerAgentTransfer(from, to, kind = 'assigned') {
+    if (!from || !to) return;
+
+    const startColor = kind === 'released' ? 0xfbbf24 : 0x60a5fa;
+    const endColor = kind === 'released' ? 0x34d399 : 0x22d3ee;
+
+    this._triggerPulse(from.x, 0.34, from.z, startColor, kind === 'released' ? 0.8 : 1.1);
+    this._triggerPulse(to.x, 0.34, to.z, endColor, kind === 'released' ? 1.2 : 0.9, 180);
+
+    // Expanding ripple at the pond side (departure or arrival).
+    const pondSide = kind === 'assigned' ? from : to;
+    if (pondSide.x != null) this.triggerPondRipple(pondSide.x, pondSide.z ?? 6.2);
+  }
+
+  triggerPondRipple(x, z) {
+    const geo = new THREE.RingGeometry(0.18, 0.32, 24);
+    const mat = new THREE.MeshBasicMaterial({
+      color: 0x0ea5e9,
+      transparent: true,
+      opacity: 0.65,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    });
+    const ring = new THREE.Mesh(geo, mat);
+    ring.rotation.x = -Math.PI / 2;
+    ring.position.set(x, 0.31, z);
+    this.scene.add(ring);
+
+    let life = 0;
+    const sys = {
+      mesh: ring,
+      update: (dt) => {
+        life += dt;
+        if (life >= 1.1) {
+          this.scene.remove(ring);
+          geo.dispose();
+          mat.dispose();
+          const idx = this.systems.indexOf(sys);
+          if (idx >= 0) this.systems.splice(idx, 1);
+          return;
+        }
+        ring.scale.setScalar(1 + life * 3.2);
+        ring.material.opacity = Math.max(0, 0.65 * (1 - life / 1.1));
+      },
+    };
+    this.systems.push(sys);
+  }
+
+  _triggerPulse(x, y, z, colorHex, lift = 1, delayMs = 0) {
+    const spawn = () => {
+      const count = 38;
+      const positions = new Float32Array(count * 3);
+      const velocities = new Float32Array(count * 3);
+
+      for (let i = 0; i < count; i++) {
+        positions[i * 3] = x;
+        positions[i * 3 + 1] = y;
+        positions[i * 3 + 2] = z;
+
+        const a = (i / count) * Math.PI * 2;
+        const speed = 0.8 + Math.random() * 1.4;
+        velocities[i * 3] = Math.cos(a) * speed;
+        velocities[i * 3 + 1] = 0.8 + Math.random() * lift;
+        velocities[i * 3 + 2] = Math.sin(a) * speed;
+      }
+
+      const geo = new THREE.BufferGeometry();
+      geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+      const mat = new THREE.PointsMaterial({
+        size: 0.09,
+        color: colorHex,
+        transparent: true,
+        opacity: 0.92,
+        blending: THREE.AdditiveBlending,
+        depthWrite: false,
+      });
+      const points = new THREE.Points(geo, mat);
+      this.scene.add(points);
+
+      let life = 0;
+      const ttl = 0.68;
+      const sys = {
+        mesh: points,
+        update: (dt) => {
+          life += dt;
+          if (life >= ttl) {
+            this.scene.remove(points);
+            geo.dispose();
+            mat.dispose();
+            const idx = this.systems.indexOf(sys);
+            if (idx >= 0) this.systems.splice(idx, 1);
+            return;
+          }
+
+          const arr = geo.attributes.position.array;
+          for (let i = 0; i < count; i++) {
+            arr[i * 3] += velocities[i * 3] * dt;
+            arr[i * 3 + 1] += velocities[i * 3 + 1] * dt;
+            arr[i * 3 + 2] += velocities[i * 3 + 2] * dt;
+            velocities[i * 3 + 1] -= 2.8 * dt;
+          }
+          geo.attributes.position.needsUpdate = true;
+          mat.opacity = Math.max(0, 0.92 - (life / ttl) * 0.92);
+        },
+      };
+
+      this.systems.push(sys);
+    };
+
+    if (delayMs > 0) {
+      setTimeout(spawn, delayMs);
+    } else {
+      spawn();
+    }
+  }
+
+  dispose() {
+    for (const system of this.systems) {
+      if (system.mesh) {
+        this.scene.remove(system.mesh);
+        disposeObject3D(system.mesh);
+      }
+    }
+    this.systems = [];
+  }
+}