opencroc 1.8.0 → 1.8.2

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

@@ -15,11 +15,21 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 /* ─── Module-level singletons ──────────────────────────────────────────────── */
 let renderer = null;
 let scene = null;
-let camera = null;
-let composer = null;
-let clock = null;
-let bloomPass = null;
-let fxaaPass = null;
+let camera = null;
+let composer = null;
+let clock = null;
+let bloomPass = null;
+let fxaaPass = null;
+
+function disposeMaterial(material) {
+  if (!material) return;
+  for (const value of Object.values(material)) {
+    if (value && typeof value === 'object' && value.isTexture) {
+      value.dispose();
+    }
+  }
+  material.dispose?.();
+}
 
 /* ═══════════════════════════════════════════════════════════════════════════════
    1. createEngine — Initialize the full Three.js rendering pipeline
@@ -482,7 +492,36 @@ export function updateEngineTheme(theme) {
 /* ═══════════════════════════════════════════════════════════════════════════════
    10. Getters
    ═══════════════════════════════════════════════════════════════════════════════ */
-export function getRenderer() { return renderer; }
+export function disposeEngine() {
+  if (scene) {
+    scene.traverse((child) => {
+      child.geometry?.dispose?.();
+      if (Array.isArray(child.material)) {
+        child.material.forEach(disposeMaterial);
+      } else {
+        disposeMaterial(child.material);
+      }
+    });
+
+    while (scene.children.length > 0) {
+      scene.remove(scene.children[0]);
+    }
+  }
+
+  composer?.passes?.forEach?.((pass) => pass.dispose?.());
+  composer?.dispose?.();
+  renderer?.dispose?.();
+
+  renderer = null;
+  scene = null;
+  camera = null;
+  composer = null;
+  clock = null;
+  bloomPass = null;
+  fxaaPass = null;
+}
+
+export function getRenderer() { return renderer; }
 export function getScene() { return scene; }
 export function getCamera() { return camera; }
 export function getComposer() { return composer; }

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

@@ -5,13 +5,33 @@
    ═══════════════════════════════════════════════════════════════════════════════ */
 
 import * as THREE from 'three';
-import { getScene } from './engine.js';
+import { getScene } from './engine';
 
 let officeGroup = null;
 let currentTheme = 'dark';
 
 /* ─── Material Cache ───────────────────────────────────────────────────────── */
-const MAT = {};
+const MAT = {};
+
+function disposeMaterialCache() {
+  Object.keys(MAT).forEach((key) => {
+    MAT[key]?.dispose?.();
+    delete MAT[key];
+  });
+}
+
+function disposeOfficeGroup(scene) {
+  if (!officeGroup) return;
+  scene?.remove(officeGroup);
+  officeGroup.traverse((child) => {
+    child.geometry?.dispose?.();
+  });
+  officeGroup = null;
+  DESK_POSITIONS.length = 0;
+  POND_POSITIONS.length = 0;
+  DESK_INDICATORS.clear();
+  disposeMaterialCache();
+}
 
 function initMaterials(theme) {
   const dk = theme === 'dark';
@@ -41,9 +61,10 @@ function initMaterials(theme) {
 /* ═══════════════════════════════════════════════════════════════════════════════
    createOffice — Build the full 3D office environment
    ═══════════════════════════════════════════════════════════════════════════════ */
-export async function createOffice(theme) {
-  currentTheme = theme;
-  initMaterials(theme);
+export async function createOffice(theme) {
+  currentTheme = theme;
+  disposeOfficeGroup(getScene());
+  initMaterials(theme);
 
   const scene = getScene();
   officeGroup = new THREE.Group();
@@ -52,6 +73,7 @@ export async function createOffice(theme) {
   buildFloor();
   buildWalls();
   buildGlassPartitions();
+  buildPondZone();
   buildDesks(6);
   buildServerRack();
   buildCoffeeMachine();
@@ -164,8 +186,70 @@ function buildGlassPartitions() {
    Agent Desks — Each agent gets a desk with monitor and chair
    ═══════════════════════════════════════════════════════════════════════════════ */
 export const DESK_POSITIONS = [];
+export const POND_POSITIONS = [];
+const DESK_INDICATORS = new Map();
+
+function buildPondZone() {
+  const pond = new THREE.Group();
+  pond.name = 'agent-pond';
+
+  const centerX = -9;
+  const centerZ = 6.2;
+
+  const rim = new THREE.Mesh(
+    new THREE.CylinderGeometry(3.4, 3.5, 0.16, 24),
+    MAT.frame,
+  );
+  rim.position.set(centerX, 0.25, centerZ);
+  rim.receiveShadow = true;
+  pond.add(rim);
+
+  const water = new THREE.Mesh(
+    new THREE.CylinderGeometry(3.1, 3.2, 0.1, 24),
+    new THREE.MeshStandardMaterial({
+      color: currentTheme === 'dark' ? 0x0f3a5d : 0x7dd3fc,
+      roughness: 0.18,
+      metalness: 0.2,
+      transparent: true,
+      opacity: currentTheme === 'dark' ? 0.72 : 0.52,
+      emissive: currentTheme === 'dark' ? 0x0ea5e9 : 0x0369a1,
+      emissiveIntensity: currentTheme === 'dark' ? 0.16 : 0.06,
+    }),
+  );
+  water.position.set(centerX, 0.3, centerZ);
+  pond.add(water);
+
+  // Pixel-style stepping stones around the pond edge.
+  for (let i = 0; i < 10; i++) {
+    const a = (i / 10) * Math.PI * 2;
+    const r = 3.7 + (i % 2) * 0.25;
+    const stone = new THREE.Mesh(
+      new THREE.BoxGeometry(0.32, 0.06, 0.32),
+      MAT.deskTop,
+    );
+    stone.position.set(centerX + Math.cos(a) * r, 0.23, centerZ + Math.sin(a) * r);
+    stone.rotation.y = a * 0.7;
+    stone.receiveShadow = true;
+    pond.add(stone);
+  }
+
+  POND_POSITIONS.length = 0;
+  const count = 24;
+  for (let i = 0; i < count; i++) {
+    const a = (i / count) * Math.PI * 2;
+    const r = 1.55 + (i % 3) * 0.34;
+    POND_POSITIONS.push({
+      x: centerX + Math.cos(a) * r,
+      z: centerZ + Math.sin(a) * r,
+    });
+  }
+
+  officeGroup.add(pond);
+}
 
 function buildDesks(count) {
+  DESK_POSITIONS.length = 0;
+  DESK_INDICATORS.clear();
   const rows = 2;
   const cols = Math.ceil(count / rows);
   const xStart = -2;
@@ -304,10 +388,42 @@ function buildSingleDesk(x, z, idx) {
     desk.add(mug);
   }
 
+  // Occupancy beacon near each desk (idle=dim, occupied=bright).
+  const indicator = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.06, 0.06, 0.04, 12),
+    new THREE.MeshStandardMaterial({
+      color: currentTheme === 'dark' ? 0x475569 : 0x94a3b8,
+      roughness: 0.25,
+      metalness: 0.4,
+      emissive: currentTheme === 'dark' ? 0x0f172a : 0x64748b,
+      emissiveIntensity: 0.12,
+    }),
+  );
+  indicator.position.set(1.0, 1.08, -0.32);
+  desk.add(indicator);
+  DESK_INDICATORS.set(idx, indicator);
+
   desk.position.set(x, 0.2, z);
   officeGroup.add(desk);
 }
 
+export function setDeskOccupied(index, occupied) {
+  const indicator = DESK_INDICATORS.get(index);
+  if (!indicator) return;
+  const mat = indicator.material;
+  if (!mat) return;
+
+  if (occupied) {
+    mat.color.setHex(currentTheme === 'dark' ? 0x34d399 : 0x059669);
+    mat.emissive.setHex(currentTheme === 'dark' ? 0x34d399 : 0x047857);
+    mat.emissiveIntensity = currentTheme === 'dark' ? 0.62 : 0.35;
+  } else {
+    mat.color.setHex(currentTheme === 'dark' ? 0x475569 : 0x94a3b8);
+    mat.emissive.setHex(currentTheme === 'dark' ? 0x0f172a : 0x64748b);
+    mat.emissiveIntensity = 0.12;
+  }
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════════
    Server Rack
    ═══════════════════════════════════════════════════════════════════════════════ */
@@ -775,29 +891,29 @@ function buildDecorativeElements() {
 /* ═══════════════════════════════════════════════════════════════════════════════
    Floor Y position getter
    ═══════════════════════════════════════════════════════════════════════════════ */
-export function getFloorY() {
-  return 0.2;
-}
+export function getFloorY() {
+  return 0.2;
+}
+
+export function disposeOffice() {
+  disposeOfficeGroup(getScene());
+}
 
 /* ═══════════════════════════════════════════════════════════════════════════════
    Theme Update
    ═══════════════════════════════════════════════════════════════════════════════ */
-export function updateOfficeLighting(theme) {
-  if (!officeGroup) return;
-  currentTheme = theme;
-
-  // Reload materials
-  initMaterials(theme);
-
-  // We rebuild the office to apply new materials
-  const scene = getScene();
-  scene.remove(officeGroup);
-  officeGroup = new THREE.Group();
-  officeGroup.name = 'office';
+export function updateOfficeLighting(theme) {
+  currentTheme = theme;
+  const scene = getScene();
+  disposeOfficeGroup(scene);
+  initMaterials(theme);
+  officeGroup = new THREE.Group();
+  officeGroup.name = 'office';
 
   buildFloor();
   buildWalls();
   buildGlassPartitions();
+  buildPondZone();
   buildDesks(6);
   buildServerRack();
   buildCoffeeMachine();

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

@@ -4,15 +4,15 @@
    ═══════════════════════════════════════════════════════════════════════════════ */
 
 const STATUS_LABEL = {
-  idle: '空闲', scanning: '扫描中', navigating: '导航中',
+  idle: '空闲', working: '工作中', scanning: '扫描中', navigating: '导航中',
   interacting: '交互中', asserting: '断言中', reporting: '报告中',
-  thinking: '思考中', complete: '完成', error: '错误',
+  thinking: '思考中', complete: '完成', done: '完成', error: '错误',
 };
 
 const STATUS_DOT_CLASS = {
-  idle: 'dot-idle', scanning: 'dot-active', navigating: 'dot-active',
+  idle: 'dot-idle', working: 'dot-active', scanning: 'dot-active', navigating: 'dot-active',
   interacting: 'dot-active', asserting: 'dot-active', reporting: 'dot-active',
-  thinking: 'dot-active', complete: 'dot-ok', error: 'dot-err',
+  thinking: 'dot-active', complete: 'dot-ok', done: 'dot-ok', error: 'dot-err',
 };
 
 /* ═══════════════════════════════════════════════════════════════════════════════
@@ -27,6 +27,7 @@ export class UIManager {
     this._logCount = 0;
     this._esc = options?.esc || (s => String(s));
     this._ROLE_ICONS = options?.ROLE_ICONS || {};
+    this._resolveIcon = options?.resolveRoleIcon || (name => this._ROLE_ICONS[name] || '🐊');
   }
 
   /* ── init: store callbacks (event binding done in index.html) ────────── */
@@ -135,11 +136,13 @@ export class UIManager {
       entries.forEach(agent => {
         const name = agent.name || agent.role || '';
         const status = agent.status || 'idle';
+        const role = agent.role || name;
         const item = document.createElement('div');
         item.className = 'agent-sidebar-item';
+        const category = agent.category ? ` <span style="font-size:9px;color:var(--text-subtle);opacity:0.7">${this._esc(agent.category)}</span>` : '';
         item.innerHTML = `
-          <span class="agent-icon">${this._ROLE_ICONS[name] || '🤖'}</span>
-          <span class="agent-name">${this._esc(name)}</span>
+          <span class="agent-icon">${this._resolveIcon(role)}</span>
+          <span class="agent-name">${this._esc(name)}${category}</span>
           <span class="agent-status-dot ${STATUS_DOT_CLASS[status] || 'dot-idle'}"></span>
           <span class="agent-status-text">${STATUS_LABEL[status] || status}</span>
         `;
@@ -179,8 +182,9 @@ export class UIManager {
   _renderDeskCard(name, info) {
     const status = info.status || 'idle';
     const progress = info.progress || 0;
+    const role = info.role || name;
     return `
-      <div class="dc-icon">${this._ROLE_ICONS[name] || '🤖'}</div>
+      <div class="dc-icon">${this._resolveIcon(role)}</div>
       <div class="dc-name">${this._esc(name)}</div>
       <div class="dc-status ${STATUS_DOT_CLASS[status] || ''}">${STATUS_LABEL[status] || status}</div>
       <div class="dc-bar"><div class="dc-fill" style="width:${progress}%"></div></div>

package/dist/web/src/shared/assets.ts

@@ -0,0 +1,4 @@
+export function publicAsset(path: string): string {
+  const normalizedPath = path.replace(/^\/+/, '');
+  return `${import.meta.env.BASE_URL}${normalizedPath}`;
+}

package/dist/web/src/shared/navigation.ts

@@ -0,0 +1,47 @@
+const ROUTE_CHANGE_EVENT = 'opencroc:route-change';
+
+const LEGACY_ROUTE_ALIASES: Record<string, string> = {
+  '/index.html': '/',
+  '/index-studio.html': '/studio',
+  '/index-v2-pixel.html': '/pixel',
+};
+
+export function normalizeAppPath(pathname: string): string {
+  if (!pathname) {
+    return '/';
+  }
+
+  const [pathOnly] = pathname.split('?');
+  const withLeadingSlash = pathOnly.startsWith('/') ? pathOnly : `/${pathOnly}`;
+  const trimmed = withLeadingSlash.length > 1 && withLeadingSlash.endsWith('/')
+    ? withLeadingSlash.slice(0, -1)
+    : withLeadingSlash;
+
+  return LEGACY_ROUTE_ALIASES[trimmed] || trimmed;
+}
+
+export function getCurrentAppPath(): string {
+  return normalizeAppPath(window.location.pathname);
+}
+
+export function navigate(to: string, options?: { replace?: boolean }): void {
+  const nextPath = normalizeAppPath(to);
+  const currentPath = getCurrentAppPath();
+
+  if (nextPath !== currentPath) {
+    const method = options?.replace ? 'replaceState' : 'pushState';
+    window.history[method]({}, '', nextPath);
+  }
+
+  window.dispatchEvent(new Event(ROUTE_CHANGE_EVENT));
+}
+
+export function subscribeNavigation(callback: () => void): () => void {
+  window.addEventListener('popstate', callback);
+  window.addEventListener(ROUTE_CHANGE_EVENT, callback);
+
+  return () => {
+    window.removeEventListener('popstate', callback);
+    window.removeEventListener(ROUTE_CHANGE_EVENT, callback);
+  };
+}

package/dist/web/src/styles/app-layout.css

@@ -0,0 +1,19 @@
+html,
+body,
+#root,
+.app-layout {
+  width: 100%;
+  height: 100%;
+}
+
+body[data-route-variant='office'] {
+  background: #000;
+}
+
+body[data-route-variant='graph'] {
+  background: #08101d;
+}
+
+body[data-route-variant='pixel'] {
+  background: #0a1220;
+}