@agent-os-lab/agent-game-sdk 0.1.10 → 0.1.11

package/README.md

@@ -33,6 +33,7 @@ const view = await mountAgentGameOffice(container, {
 });
 
 view.focusAgent("agent-1");
+view.resetCamera();
 view.refreshAgents();
 view.destroy();
 ```
@@ -57,6 +58,9 @@ export function Office() {
       <button type="button" onClick={() => view?.refreshAgents()}>
         Refresh agents
       </button>
+      <button type="button" onClick={() => view?.resetCamera()}>
+        Reset view
+      </button>
       <AgentGameOfficeView
         renderer="three"
         office={{

package/USAGE.md

@@ -203,6 +203,7 @@ const view = await mountAgentGameOffice(container, {
 });
 
 view.focusAgent("agent-1");
+view.resetCamera();
 view.refreshAgents();
 view.destroy();
 ```
@@ -221,6 +222,8 @@ The layout packs up to three rooms per row, then starts another row. `capacity`
 
 The SDK keeps runtime statuses simple. `idle` and `resting` agents are locally distributed across ambient anchors for lounge, pantry, gym, and reading areas. `entertaining` stays biased toward the review area. If a configured room does not provide the selected ambient zone, the SDK falls back to another available non-offstage anchor.
 
+`resetCamera` returns the office view to its initial camera position, rotation, target, zoom, and follow state. It is intended for UI controls such as a reset-view button after a user pans, rotates, zooms, or follows an Agent.
+
 `refreshAgents` asks Agent Game Runtime to refresh the tenant roster through the existing bootstrap flow. It is intended for UI controls such as a refresh button after an Agent was created or deleted in another surface.
 
 ## React Office View
@@ -245,6 +248,9 @@ export function Office() {
       <button type="button" onClick={() => view?.refreshAgents()}>
         Refresh agents
       </button>
+      <button type="button" onClick={() => view?.resetCamera()}>
+        Reset view
+      </button>
       <AgentGameOfficeView
         renderer="three"
         office={{
@@ -308,6 +314,8 @@ view.updateAgents([
 
 `updateAgents` only mutates SDK-managed snapshot sources. Runtime and custom sources own their own updates.
 
+`resetCamera` is source-independent and can be called for snapshot, runtime, and custom sources.
+
 ## Custom Source
 
 Use `source.type: "custom"` when another state manager already projects runtime state into office snapshots.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-os-lab/agent-game-sdk",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "type": "module",
   "files": [
     "src",

package/src/office/core/types.ts

@@ -87,6 +87,7 @@ export type AgentGameOfficeSourceInput =
 
 export type AgentGameOfficeRendererController = {
   update(snapshot: AgentGameOfficeSnapshot): void;
+  resetCamera?(): void;
   focusAgent?(agentId: string | null): void;
   focusFloor?(floorId: string | null): void;
   getFocusedFloor?(): string | null;
@@ -140,6 +141,7 @@ export type AgentGameOfficeResolvedOptions = Omit<AgentGameOfficeMountOptions, "
 
 export type AgentGameOfficeController = {
   updateAgents(agents: AgentPresence[]): void;
+  resetCamera(): void;
   focusAgent(agentId: string | null): void;
   focusFloor(floorId: string | null): void;
   getFocusedFloor(): string | null;

package/src/office/layout/resolver.ts

@@ -705,7 +705,7 @@ function addOfficePreset(layout: MutableResolvedLayout, room: ResolvedOfficeRoom
     addComponent(layout, room.id, "desk", `desk-${index + 1}`, slot.desk.x, slot.desk.z);
     addComponent(layout, room.id, "officeChair", `desk-chair-${index + 1}`, slot.seat.x, slot.seat.z, { rotation: slot.rotation });
     addComponent(layout, room.id, "monitor", `monitor-${index + 1}`, slot.desk.x, slot.desk.z - 0.4);
-    addSeat(layout, room.id, `desk-${index + 1}`, "desk", slot.seat.x, slot.seat.z, { x: scaleOfficeX(-7), z: scaleOfficeZ(-5) });
+    addSeat(layout, room.id, `desk-${index + 1}`, "desk", slot.seat.x, slot.seat.z, { x: slot.desk.x, z: slot.desk.z - 0.4 });
   });
 
   MEETING_ROOMS.forEach((meetingRoom, roomIndex) => {

package/src/office/mount.ts

@@ -72,6 +72,9 @@ export async function mountAgentGameOffice(
         mutableSource.updateAgents(agents);
       }
     },
+    resetCamera() {
+      controller?.resetCamera?.();
+    },
     focusAgent(agentId) {
       controller?.focusAgent?.(agentId);
     },

package/src/office/renderers/three/agent-body-instancing.ts

@@ -18,7 +18,7 @@ type AgentBodyBatch = {
   count: number;
 };
 
-const geometryCache = new Map<string, THREE.BoxGeometry>();
+const geometryCache = new Map<string, THREE.BufferGeometry>();
 const materialCache = new Map<string, THREE.MeshLambertMaterial>();
 const matrixHelper = new THREE.Matrix4();
 
@@ -70,7 +70,8 @@ export class AgentBodyInstancedLayer {
     requiredCapacity: number,
     opacity: number,
   ): AgentBodyBatch {
-    const key = `${part.width}:${part.height}:${part.depth}:${part.color}:${opacity}`;
+    const shape = part.shape ?? "box";
+    const key = `${shape}:${part.width}:${part.height}:${part.depth}:${part.color}:${opacity}`;
     const existing = this.batches.get(key);
     if (existing && existing.capacity >= requiredCapacity) {
       return existing;
@@ -80,7 +81,7 @@ export class AgentBodyInstancedLayer {
     }
 
     const mesh = new THREE.InstancedMesh(
-      getGeometry(part.width, part.height, part.depth),
+      getGeometry(part),
       getMaterial(part.color, opacity),
       Math.max(requiredCapacity, 1),
     );
@@ -100,17 +101,33 @@ export function createAgentBodyInstancedLayer(scene: THREE.Scene): AgentBodyInst
   return new AgentBodyInstancedLayer(scene);
 }
 
-function getGeometry(width: number, height: number, depth: number): THREE.BoxGeometry {
-  const key = `${width}:${height}:${depth}`;
+function getGeometry(part: ReturnType<typeof resolveAgentBodyPartRenderSpecs>[number]): THREE.BufferGeometry {
+  const shape = part.shape ?? "box";
+  const key = `${shape}:${part.width}:${part.height}:${part.depth}`;
   const cached = geometryCache.get(key);
   if (cached) {
     return cached;
   }
-  const geometry = new THREE.BoxGeometry(width, height, depth);
+  const geometry = createGeometry(part);
   geometryCache.set(key, geometry);
   return geometry;
 }
 
+function createGeometry(part: ReturnType<typeof resolveAgentBodyPartRenderSpecs>[number]): THREE.BufferGeometry {
+  switch (part.shape) {
+    case "frontPlane":
+      return new THREE.PlaneGeometry(part.width, part.height);
+    case "backPlane": {
+      const geometry = new THREE.PlaneGeometry(part.width, part.height);
+      geometry.rotateY(Math.PI);
+      return geometry;
+    }
+    case "box":
+    case undefined:
+      return new THREE.BoxGeometry(part.width, part.height, part.depth);
+  }
+}
+
 function getMaterial(color: number, opacity: number): THREE.MeshLambertMaterial {
   const key = `${color}:${opacity}`;
   const cached = materialCache.get(key);

package/src/office/renderers/three/agent-label.ts

@@ -2,6 +2,8 @@ import * as THREE from "three";
 
 import type { AgentGameOfficeAgent } from "../../core/types";
 
+export const AGENT_LABEL_WORLD_Y_OFFSET = 3.05;
+
 export type AgentLabelRecord = {
   root: HTMLDivElement;
   title: HTMLDivElement;
@@ -69,7 +71,7 @@ export function updateAgentLabelPosition(
   viewport: HTMLElement,
 ): void {
   const projected = position.clone();
-  projected.y += 2.2;
+  projected.y += AGENT_LABEL_WORLD_Y_OFFSET;
   projected.project(camera);
   const x = (projected.x * 0.5 + 0.5) * viewport.clientWidth;
   const y = (-projected.y * 0.5 + 0.5) * viewport.clientHeight;

package/src/office/renderers/three/agent-mesh.ts

@@ -13,6 +13,9 @@ export type AgentMeshParts = {
   head: THREE.Object3D;
   leftEye: THREE.Object3D;
   rightEye: THREE.Object3D;
+  mouth: THREE.Object3D;
+  chestFront: THREE.Object3D;
+  backPanel: THREE.Object3D;
   hairTop: THREE.Object3D;
   hairBack: THREE.Object3D;
   leftArm: THREE.Object3D;
@@ -38,6 +41,9 @@ export type AgentBodyPartKey =
   | "head"
   | "leftEye"
   | "rightEye"
+  | "mouth"
+  | "chestFront"
+  | "backPanel"
   | "hairTop"
   | "hairBack"
   | "leftArm"
@@ -45,6 +51,7 @@ export type AgentBodyPartKey =
 
 export type AgentBodyPartRenderSpec = {
   key: AgentBodyPartKey;
+  shape?: "box" | "frontPlane" | "backPlane";
   width: number;
   height: number;
   depth: number;
@@ -66,8 +73,11 @@ export function resolveAgentBodyPartRenderSpecs(index: number): AgentBodyPartRen
     { key: "leftFoot", width: 0.24, height: 0.12, depth: 0.34, color: 0x111827, x: -0.14, y: 0.06, z: 0.08 },
     { key: "rightFoot", width: 0.24, height: 0.12, depth: 0.34, color: 0x111827, x: 0.14, y: 0.06, z: 0.08 },
     { key: "head", width: 0.5, height: 0.48, depth: 0.42, color: skin, x: 0, y: 1.48, z: 0 },
-    { key: "leftEye", width: 0.06, height: 0.07, depth: 0.035, color: 0x111827, x: -0.11, y: 1.5, z: 0.225 },
-    { key: "rightEye", width: 0.06, height: 0.07, depth: 0.035, color: 0x111827, x: 0.11, y: 1.5, z: 0.225 },
+    { key: "leftEye", shape: "frontPlane", width: 0.06, height: 0.07, depth: 0, color: 0x111827, x: -0.11, y: 1.5, z: 0.235 },
+    { key: "rightEye", shape: "frontPlane", width: 0.06, height: 0.07, depth: 0, color: 0x111827, x: 0.11, y: 1.5, z: 0.235 },
+    { key: "mouth", shape: "frontPlane", width: 0.16, height: 0.035, depth: 0, color: 0x7f1d1d, x: 0, y: 1.38, z: 0.245 },
+    { key: "chestFront", shape: "frontPlane", width: 0.28, height: 0.12, depth: 0, color: 0xe0f2fe, x: 0, y: 1.02, z: 0.185 },
+    { key: "backPanel", shape: "backPlane", width: 0.36, height: 0.44, depth: 0, color: 0x0f172a, x: 0, y: 0.92, z: -0.185 },
     { key: "hairTop", width: 0.54, height: 0.14, depth: 0.46, color: hair, x: 0, y: 1.78, z: -0.01 },
     { key: "hairBack", width: 0.52, height: 0.28, depth: 0.09, color: hair, x: 0, y: 1.61, z: -0.23 },
     { key: "leftArm", width: 0.15, height: 0.56, depth: 0.17, color: shirt, x: -0.43, y: 0.88, z: 0 },
@@ -99,6 +109,9 @@ export function createAgentMesh(agent: AgentGameOfficeAgent, index: number): Age
     head: parts.head,
     leftEye: parts.leftEye,
     rightEye: parts.rightEye,
+    mouth: parts.mouth,
+    chestFront: parts.chestFront,
+    backPanel: parts.backPanel,
     hairTop: parts.hairTop,
     hairBack: parts.hairBack,
     leftArm: parts.leftArm,

package/src/office/renderers/three/mount.ts

@@ -58,7 +58,7 @@ const THREE_RENDERER_CAMERA_PADDING = 1.16;
 const OFFICE_CAMERA_MIN_BOUNDS_HEIGHT = 3.2;
 const WORKING_FOLLOW_RESET_DELAY_MS = 30_000;
 const WORK_EXIT_WAIT_MS = 30_000;
-const WORKING_FOLLOW_CAMERA_OFFSET = new THREE.Vector3(9, 12, 12);
+const WORKING_FOLLOW_CAMERA_OFFSET = new THREE.Vector3(14, 18, 20);
 const OFFICE_CAMERA_TRANSITION_DURATION_MS = 600;
 const OFFICE_CAMERA_UP = new THREE.Vector3(0, 1, 0);
 
@@ -332,7 +332,7 @@ export function mountThreeAgentGameOffice(
         mesh: record.mesh,
         agent: record.agent,
         target: record.target,
-        facingTarget: record.routeState.activeRoute ? record.target : resolveAgentFacingTarget(record.agent, _options.officeLayout),
+        facingTarget: resolveAgentFacingTarget(record.agent, _options.officeLayout),
         elapsedSeconds,
         deltaSeconds,
       });
@@ -387,6 +387,16 @@ export function mountThreeAgentGameOffice(
 
   return {
     update,
+    resetCamera() {
+      workingFollowState = {
+        ...workingFollowState,
+        selectedAgentId: null,
+        resetAtMs: null,
+      };
+      camera.zoom = 1;
+      camera.updateProjectionMatrix();
+      transitionOfficeCameraTo(createInitialOfficeCameraView(_options.officeLayout, camera.aspect, camera.fov));
+    },
     focusAgent(agentId) {
       if (!agentId) {
         transitionOfficeCameraTo(createInitialOfficeCameraView(_options.officeLayout, camera.aspect, camera.fov));