@agent-os-lab/agent-game-sdk 0.1.5 → 0.1.6

package/README.md

@@ -92,6 +92,8 @@ office: {
 
 Built-in room types are `office`, `auditorium`, and `gym`. `capacity` is optional and affects generated agent placement anchors; desks, walls, meeting rooms, gym equipment, windows, and raw coordinates stay internal to the SDK.
 
+Runtime statuses stay unchanged. The SDK locally distributes `idle` and `resting` agents across ambient areas such as lounge, pantry, gym, and reading/bookcase anchors so inactive agents do not all gather at the sofa.
+
 Browser clients should call an application BFF endpoint. Keep the AgentOS service API key on the server; the SDK server client forwards it to Agent Game Runtime:
 
 ```ts

package/USAGE.md

@@ -176,6 +176,8 @@ office: {
 
 The layout packs up to three rooms per row, then starts another row. `capacity` is optional and influences the generated anchors used for agent placement. Do not configure desks, walls, whiteboards, fitness equipment, or raw coordinates from application code; those components remain SDK-managed presets.
 
+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.
+
 `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

package/package.json

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

package/src/office/core/projection.ts

@@ -18,6 +18,8 @@ const statusLabels = {
   offline: "Offline",
 } satisfies Record<AgentPresenceStatus, string>;
 
+const ambientZoneIds = ["lounge", "pantry", "gym", "reading"] as const;
+
 export function mapPresenceToOfficeAgents(
   agents: AgentPresence[],
 ): AgentGameOfficeAgent[] {
@@ -27,9 +29,9 @@ export function mapPresenceToOfficeAgents(
     role: agent.scene ?? null,
     statusLabel: statusLabels[agent.status],
     activity: agent.activity,
-    activityLabel: sanitizeActivityLabel(agent.activity?.summary),
+    activityLabel: sanitizeActivityLabel(agent.activity),
     sceneState: mapStatusToSceneState(agent.status),
-    zoneId: mapStatusToZoneId(agent.status),
+    zoneId: mapStatusToZoneId(agent.status, agent.agentId),
     updatedAt: agent.updatedAt,
     targetPosition: null,
     raw: agent,
@@ -66,12 +68,47 @@ function mapStatusToSceneState(status: AgentPresenceStatus): AgentGameOfficeScen
   return status;
 }
 
-function sanitizeActivityLabel(value: string | undefined): string | undefined {
-  const label = value?.trim();
-  return label ? label : undefined;
+function sanitizeActivityLabel(activity: AgentPresence["activity"]): string | undefined {
+  if (activity?.kind === "completed") {
+    return undefined;
+  }
+  const label = activity?.summary?.trim();
+  if (!label) {
+    return undefined;
+  }
+  if (activity?.kind === "tool") {
+    return formatToolActivityLabel(label);
+  }
+  return label;
+}
+
+function formatToolActivityLabel(label: string): string {
+  const normalized = label.toLowerCase();
+  if (normalized.includes("web") && normalized.includes("search")) {
+    return "正在搜索...";
+  }
+  if (
+    normalized.includes("browser") ||
+    normalized.includes("open_page") ||
+    normalized.includes("read_page") ||
+    normalized.includes("网页") ||
+    normalized.includes("page")
+  ) {
+    return "正在读取网页...";
+  }
+  if (normalized.includes("memory") || normalized.includes("记忆")) {
+    return "正在检索记忆...";
+  }
+  if (normalized.includes("file") || normalized.includes("read_file") || normalized.includes("文件")) {
+    return "正在读取文件...";
+  }
+  if (normalized.includes("database") || normalized.includes("sql") || normalized.includes("query")) {
+    return "正在查询数据...";
+  }
+  return label === "正在使用工具" ? "正在调用工具..." : label;
 }
 
-function mapStatusToZoneId(status: AgentPresenceStatus): AgentGameOfficeZoneId {
+function mapStatusToZoneId(status: AgentPresenceStatus, agentId: string): AgentGameOfficeZoneId {
   switch (status) {
     case "working":
     case "thinking":
@@ -80,10 +117,22 @@ function mapStatusToZoneId(status: AgentPresenceStatus): AgentGameOfficeZoneId {
       return "meeting-room";
     case "resting":
     case "idle":
-      return "lounge";
+      return resolveAmbientZoneId(agentId);
     case "entertaining":
       return "review-area";
     case "offline":
       return "offstage";
   }
 }
+
+function resolveAmbientZoneId(agentId: string): AgentGameOfficeZoneId {
+  return ambientZoneIds[stableHash(agentId) % ambientZoneIds.length]!;
+}
+
+function stableHash(value: string): number {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) >>> 0;
+  }
+  return hash;
+}

package/src/office/core/types.ts

@@ -22,6 +22,7 @@ export type AgentGameOfficeSceneState =
   | "working"
   | "thinking"
   | "meeting"
+  | "waiting"
   | "resting"
   | "entertaining"
   | "idle"
@@ -32,6 +33,8 @@ export type AgentGameOfficeZoneId =
   | "meeting-room"
   | "lounge"
   | "pantry"
+  | "gym"
+  | "reading"
   | "review-area"
   | "offstage";
 
@@ -88,6 +91,16 @@ export type AgentGameOfficeRendererController = {
   destroy(): void;
 };
 
+export type AgentGameOfficeCameraState = {
+  zoom: number;
+  distance: number;
+  position: { x: number; y: number; z: number };
+  rotation: { x: number; y: number; z: number };
+  target: { x: number; y: number; z: number };
+  polarAngle: number;
+  azimuthalAngle: number;
+};
+
 export type AgentGameOfficeRenderer = {
   mount(
     container: HTMLElement,
@@ -102,6 +115,7 @@ export type AgentGameOfficeMountOptions = {
   office?: AgentGameOfficeConfig;
   focusedAgentId?: string | null;
   className?: string;
+  onCameraChange?: (state: AgentGameOfficeCameraState) => void;
 };
 
 export type AgentGameOfficeResolvedOptions = Omit<AgentGameOfficeMountOptions, "renderer"> & {

package/src/office/layout/resolver.ts

@@ -17,6 +17,7 @@ const LARGE_MEETING_CHAIR_SPACING_X = 1.55 * OFFICE_LAYOUT_SCALE;
 const LARGE_MEETING_CHAIR_DISTANCE_Z = 2.55 * OFFICE_LAYOUT_SCALE;
 const ROOMS_PER_ROW = 3;
 const ROOM_ROW_GAP = 0;
+const NORTH_WALL_BOOKCASE_Z_OFFSET = 0.32;
 
 export type OfficeComponentKind =
   | "desk"
@@ -339,6 +340,16 @@ function addOfficePreset(layout: MutableResolvedLayout, room: ResolvedOfficeRoom
   addComponent(layout, room.id, "sofa", "lounge-sofa", LOUNGE_CENTER.x, LOUNGE_CENTER.z);
   addComponent(layout, room.id, "loungeSideTable", "lounge-side-table", LOUNGE_CENTER.x - 3.05, LOUNGE_CENTER.z - 0.05);
   addComponent(layout, room.id, "bookcase", "lounge-bookcase", LOUNGE_CENTER.x + 3.25, LOUNGE_CENTER.z + 0.15);
+  addComponent(layout, room.id, "bookcase", "reading-bookcase-1", scaleOfficeX(-16.2), scaleOfficeZ(-9.9));
+  addComponent(layout, room.id, "bookcase", "reading-bookcase-2", scaleOfficeX(-14.8), scaleOfficeZ(-9.9));
+  addSeat(layout, room.id, "reading-1", "reading", scaleOfficeX(-16.2), scaleOfficeZ(-7.8), {
+    x: scaleOfficeX(-16.2),
+    z: scaleOfficeZ(-9.9),
+  });
+  addSeat(layout, room.id, "reading-2", "reading", scaleOfficeX(-14.8), scaleOfficeZ(-7.8), {
+    x: scaleOfficeX(-14.8),
+    z: scaleOfficeZ(-9.9),
+  });
   for (let index = 0; index < Math.max(4, Math.min(room.capacity, 12)); index += 1) {
     addSeat(
       layout,
@@ -357,9 +368,24 @@ function addOfficePreset(layout: MutableResolvedLayout, room: ResolvedOfficeRoom
     x: scaleOfficeX(-9.2),
     z: scaleOfficeZ(5.2),
   });
-  addSeat(layout, room.id, "review-1", "review-area", scaleOfficeX(0.5) + 2.2 * OFFICE_LAYOUT_SCALE, scaleOfficeZ(4), {
-    x: scaleOfficeX(0.5),
-    z: scaleOfficeZ(3.05),
+  addSeat(layout, room.id, "pantry-2", "pantry", scaleOfficeX(-14.6), scaleOfficeZ(8.8), {
+    x: scaleOfficeX(-14.8),
+    z: scaleOfficeZ(10.4),
+  });
+  addSeat(layout, room.id, "pantry-3", "pantry", scaleOfficeX(-16.5), scaleOfficeZ(8.8), {
+    x: scaleOfficeX(-16.9),
+    z: scaleOfficeZ(10.4),
+  });
+  const reviewFacing = { x: scaleOfficeX(0.5), z: scaleOfficeZ(3.05) };
+  [
+    { x: scaleOfficeX(0.5) + 2.2 * OFFICE_LAYOUT_SCALE, z: scaleOfficeZ(4) },
+    { x: scaleOfficeX(0.5) + 0.8 * OFFICE_LAYOUT_SCALE, z: scaleOfficeZ(5.1) },
+    { x: scaleOfficeX(0.5) - 0.8 * OFFICE_LAYOUT_SCALE, z: scaleOfficeZ(5.1) },
+    { x: scaleOfficeX(0.5) - 2.2 * OFFICE_LAYOUT_SCALE, z: scaleOfficeZ(4) },
+    { x: scaleOfficeX(0.5) + 1.55 * OFFICE_LAYOUT_SCALE, z: scaleOfficeZ(2.75) },
+    { x: scaleOfficeX(0.5) - 1.55 * OFFICE_LAYOUT_SCALE, z: scaleOfficeZ(2.75) },
+  ].forEach((position, index) => {
+    addSeat(layout, room.id, `review-${index + 1}`, "review-area", position.x, position.z, reviewFacing);
   });
 }
 
@@ -419,7 +445,7 @@ function addGymPreset(layout: MutableResolvedLayout, room: ResolvedOfficeRoom) {
   ];
 
   fixedAnchors.forEach((anchor) => {
-    addSeat(layout, room.id, anchor.id, "lounge", anchor.x, anchor.z, anchor.facing);
+    addSeat(layout, room.id, anchor.id, "gym", anchor.x, anchor.z, anchor.facing);
   });
 
   const extraCount = Math.max(0, Math.min(room.capacity, 12) - fixedAnchors.length);
@@ -428,7 +454,7 @@ function addGymPreset(layout: MutableResolvedLayout, room: ResolvedOfficeRoom) {
       layout,
       room.id,
       `open-${index + 1}`,
-      "lounge",
+      "gym",
       baseX - 3 + index * 1.15,
       scaleOfficeZ(0.2),
       { x: baseX, z: scaleOfficeZ(0.2) },
@@ -522,6 +548,7 @@ function applyAdaptiveSceneBounds(layout: MutableResolvedLayout) {
   });
   packRoomBounds(layout);
   attachMeetingRoomsToOfficeWalls(layout);
+  attachReadingBookcasesToOfficeWalls(layout);
   attachWallDecorationsToRoomWalls(layout);
   layout.scene.walls = createRoomWalls(layout.rooms);
   addRoomWindows(layout);
@@ -654,6 +681,30 @@ function attachMeetingRoomsToOfficeWalls(layout: MutableResolvedLayout) {
   }
 }
 
+function attachReadingBookcasesToOfficeWalls(layout: MutableResolvedLayout) {
+  const officeRooms = layout.rooms.filter((room) => room.type === "office");
+  for (const room of officeRooms) {
+    const northWallInnerZ = getRoomEdges(room).minZ + NORTH_WALL_BOOKCASE_Z_OFFSET;
+    for (let index = 1; index <= 2; index += 1) {
+      const bookcase = layout.components.find((component) => component.id === `${room.id}:reading-bookcase-${index}`);
+      if (bookcase) {
+        bookcase.position = {
+          ...bookcase.position,
+          z: northWallInnerZ,
+        };
+      }
+
+      const readingAnchor = layout.anchors.seats.find((anchor) => anchor.id === `${room.id}:reading-${index}`);
+      if (readingAnchor) {
+        readingAnchor.facing = {
+          x: readingAnchor.facing?.x ?? readingAnchor.position.x,
+          z: northWallInnerZ,
+        };
+      }
+    }
+  }
+}
+
 function moveComponent(layout: MutableResolvedLayout, roomId: string, componentId: string, deltaX: number, deltaZ: number) {
   const fullId = `${roomId}:${componentId}`;
   const component = layout.components.find((item) => item.id === fullId);

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

@@ -4,6 +4,9 @@ import type { AgentGameOfficeAgent } from "../../core/types";
 import { updateAgentActivityEffects } from "./agent-activity-effects";
 import type { AgentMeshParts } from "./agent-mesh";
 
+const CHAIR_SEATED_VISUAL_Y = 0.42;
+const SOFA_SEATED_VISUAL_Y = 0.14;
+
 export type AgentAnimationContext = {
   mesh: AgentMeshParts;
   agent: AgentGameOfficeAgent;
@@ -19,6 +22,7 @@ export type AgentAnimationMode =
   | "working"
   | "thinking"
   | "meeting"
+  | "waiting"
   | "resting"
   | "idle"
   | "entertaining"
@@ -38,7 +42,7 @@ export function resolveAgentAnimationMode(
 }
 
 export function isSeatedAnimationMode(mode: AgentAnimationMode): boolean {
-  return mode === "working" || mode === "meeting" || mode === "resting";
+  return mode === "working" || mode === "meeting" || mode === "waiting" || mode === "resting";
 }
 
 export function hasVisibleActivity(agent: Pick<AgentGameOfficeAgent, "activityLabel">): boolean {
@@ -144,7 +148,7 @@ function applyPoseMode(
     case "working": {
       const phase = elapsedSeconds * 7;
       applySeatedLowerBody(mesh);
-      mesh.visualRoot.position.y = -0.08;
+      mesh.visualRoot.position.y = CHAIR_SEATED_VISUAL_Y;
       mesh.body.rotation.x = -0.1;
       mesh.head.rotation.x = -0.06;
       mesh.leftArm.rotation.x = 0.58 + Math.sin(phase) * 0.18;
@@ -160,15 +164,20 @@ function applyPoseMode(
       return;
     case "meeting":
       applySeatedLowerBody(mesh);
-      mesh.visualRoot.position.y = -0.08;
+      mesh.visualRoot.position.y = CHAIR_SEATED_VISUAL_Y;
       mesh.head.rotation.x = Math.sin(elapsedSeconds * 2) * 0.08;
       mesh.leftArm.rotation.x = 0.08;
       mesh.rightArm.rotation.x = -0.08;
       return;
+    case "waiting":
+      applySeatedLowerBody(mesh);
+      mesh.visualRoot.position.y = CHAIR_SEATED_VISUAL_Y;
+      mesh.head.rotation.y = Math.sin(elapsedSeconds * 0.9) * 0.12;
+      return;
     case "resting": {
       const breath = 1 + Math.sin(elapsedSeconds * 1.2) * 0.025;
       applySeatedLowerBody(mesh);
-      mesh.visualRoot.position.y = -0.12;
+      mesh.visualRoot.position.y = SOFA_SEATED_VISUAL_Y;
       mesh.body.scale.set(1, breath, 1);
       mesh.body.rotation.x = 0.08;
       mesh.head.rotation.z = Math.sin(elapsedSeconds * 0.8) * 0.05;

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

@@ -3,10 +3,13 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 import type {
   AgentGameOfficeAgent,
+  AgentGameOfficeCameraState,
   AgentGameOfficeRendererController,
   AgentGameOfficeResolvedOptions,
+  AgentGameOfficeSceneState,
   AgentGameOfficeSnapshot,
 } from "../../core/types";
+import type { ResolvedOfficeLayout } from "../../layout";
 import { applyAgentPose, updateAgentMotion } from "./agent-animation";
 import { createAgentBodyInstancedLayer } from "./agent-body-instancing";
 import { createAgentEffectInstancedLayer } from "./agent-effect-instancing";
@@ -34,6 +37,24 @@ export const THREE_RENDERER_PIXEL_RATIO_LIMIT = 1.5;
 export const THREE_RENDERER_TARGET_FPS = 30;
 export const THREE_RENDERER_MIN_CAMERA_DISTANCE = 8;
 export const THREE_RENDERER_MAX_CAMERA_DISTANCE = 150;
+export const THREE_RENDERER_INITIAL_CAMERA_ROTATION = { x: -0.93, y: -0.23, z: -0.29 } as const;
+const THREE_RENDERER_CAMERA_PADDING = 1.16;
+const OFFICE_CAMERA_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 OFFICE_CAMERA_TRANSITION_DURATION_MS = 600;
+
+export type WorkingAgentFollowState = {
+  selectedAgentId: string | null;
+  previousSceneStates: Record<string, AgentGameOfficeSceneState>;
+  resetAtMs: number | null;
+};
+
+export type OfficeWorkExitDisplayState = {
+  previousSceneStates: Record<string, AgentGameOfficeSceneState>;
+  waitingUntilByAgentId: Record<string, number>;
+};
 
 export function createOfficeMouseButtons(): OrbitControls["mouseButtons"] {
   return {
@@ -43,6 +64,93 @@ export function createOfficeMouseButtons(): OrbitControls["mouseButtons"] {
   };
 }
 
+export function updateWorkingAgentFollowState(
+  current: WorkingAgentFollowState | undefined,
+  agents: AgentGameOfficeAgent[],
+  nowMs: number,
+): WorkingAgentFollowState {
+  const previousSceneStates = current?.previousSceneStates ?? {};
+  const nextSceneStates: Record<string, AgentGameOfficeSceneState> = {};
+  let selectedAgentId = current?.selectedAgentId ?? null;
+  let resetAtMs = current?.resetAtMs ?? null;
+  let lastEnteredWorkingAgentId: string | null = null;
+
+  for (const agent of agents) {
+    nextSceneStates[agent.id] = agent.sceneState;
+    if (isActiveWorkSceneState(agent.sceneState) && !isActiveWorkSceneState(previousSceneStates[agent.id])) {
+      lastEnteredWorkingAgentId = agent.id;
+    }
+  }
+
+  if (lastEnteredWorkingAgentId) {
+    selectedAgentId = lastEnteredWorkingAgentId;
+    resetAtMs = null;
+  } else if (selectedAgentId) {
+    const selectedAgent = agents.find((agent) => agent.id === selectedAgentId);
+    if (isActiveWorkSceneState(selectedAgent?.sceneState)) {
+      resetAtMs = null;
+    } else if (resetAtMs === null) {
+      resetAtMs = nowMs + WORKING_FOLLOW_RESET_DELAY_MS;
+    } else if (nowMs >= resetAtMs) {
+      selectedAgentId = null;
+      resetAtMs = null;
+    }
+  }
+
+  return {
+    selectedAgentId,
+    previousSceneStates: nextSceneStates,
+    resetAtMs,
+  };
+}
+
+export function updateOfficeWorkExitDisplayState(
+  current: OfficeWorkExitDisplayState | undefined,
+  agents: AgentGameOfficeAgent[],
+  nowMs: number,
+): { state: OfficeWorkExitDisplayState; agents: AgentGameOfficeAgent[] } {
+  const previousSceneStates = current?.previousSceneStates ?? {};
+  const nextSceneStates: Record<string, AgentGameOfficeSceneState> = {};
+  const waitingUntilByAgentId: Record<string, number> = {};
+  const displayedAgents = agents.map((agent) => {
+    nextSceneStates[agent.id] = agent.sceneState;
+
+    if (agent.sceneState === "offline" || isActiveWorkSceneState(agent.sceneState)) {
+      return agent;
+    }
+
+    const existingWaitUntilMs = current?.waitingUntilByAgentId[agent.id] ?? null;
+    const waitUntilMs = isActiveWorkSceneState(previousSceneStates[agent.id])
+      ? nowMs + WORK_EXIT_WAIT_MS
+      : existingWaitUntilMs;
+
+    if (waitUntilMs !== null && nowMs < waitUntilMs) {
+      waitingUntilByAgentId[agent.id] = waitUntilMs;
+      return {
+        ...agent,
+        statusLabel: "Waiting",
+        sceneState: "waiting" as const,
+        zoneId: "desk" as const,
+        activityLabel: undefined,
+      };
+    }
+
+    return agent;
+  });
+
+  return {
+    state: {
+      previousSceneStates: nextSceneStates,
+      waitingUntilByAgentId,
+    },
+    agents: displayedAgents,
+  };
+}
+
+function isActiveWorkSceneState(sceneState: AgentGameOfficeSceneState | undefined): boolean {
+  return sceneState === "working" || sceneState === "thinking";
+}
+
 export function mountThreeAgentGameOffice(
   container: HTMLElement,
   initialSnapshot: AgentGameOfficeSnapshot,
@@ -54,8 +162,8 @@ export function mountThreeAgentGameOffice(
   scene.background = new THREE.Color(0xf7f8fb);
 
   const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
-  camera.position.set(30, 24, 28);
-  camera.lookAt(10, 0, 0);
+  const initialCameraView = createInitialOfficeCameraView(_options.officeLayout, camera.aspect, camera.fov);
+  applyOfficeCameraView(camera, initialCameraView);
 
   const renderer = new THREE.WebGLRenderer({
     antialias: true,
@@ -84,7 +192,7 @@ export function mountThreeAgentGameOffice(
 
   let labelsDirty = true;
   const controls = new OrbitControls(camera, renderer.domElement);
-  controls.target.set(10, 0, 0);
+  controls.target.copy(initialCameraView.target);
   controls.enableDamping = true;
   controls.dampingFactor = 0.08;
   controls.enablePan = true;
@@ -96,6 +204,7 @@ export function mountThreeAgentGameOffice(
   controls.maxPolarAngle = Math.PI * 0.48;
   controls.addEventListener("change", () => {
     labelsDirty = true;
+    emitCameraChange();
   });
   controls.update();
 
@@ -119,13 +228,28 @@ export function mountThreeAgentGameOffice(
   const agentEffectLayer = createAgentEffectInstancedLayer(scene);
 
   const agents = new Map<string, AgentMeshRecord>();
+  let latestSourceAgents = initialSnapshot.agents;
+  let latestAgents = initialSnapshot.agents;
+  let workExitDisplayState: OfficeWorkExitDisplayState | undefined;
+  let workingFollowState = updateWorkingAgentFollowState(undefined, latestAgents, performance.now());
   let frameId = 0;
   let disposed = false;
   let previousFrameTime = performance.now();
   let previousRenderTime = previousFrameTime;
+  let cameraTransition: OfficeCameraTransition | null = null;
 
   function update(snapshot: AgentGameOfficeSnapshot) {
-    const liveIds = new Set(snapshot.agents.map((agent) => agent.id));
+    latestSourceAgents = snapshot.agents;
+    refreshDisplayedAgents(performance.now());
+    syncWorkingFollowState(performance.now());
+    labelsDirty = true;
+  }
+
+  function refreshDisplayedAgents(nowMs: number) {
+    const displayResult = updateOfficeWorkExitDisplayState(workExitDisplayState, latestSourceAgents, nowMs);
+    workExitDisplayState = displayResult.state;
+    latestAgents = displayResult.agents;
+    const liveIds = new Set(latestAgents.map((agent) => agent.id));
     for (const [agentId, record] of agents.entries()) {
       if (!liveIds.has(agentId)) {
         scene.remove(record.mesh.group);
@@ -134,10 +258,10 @@ export function mountThreeAgentGameOffice(
       }
     }
 
-    snapshot.agents.forEach((agent, index) => {
+    latestAgents.forEach((agent, index) => {
       const record = agents.get(agent.id) ?? createAgentRecord(agent, index);
       agents.set(agent.id, record);
-      const target = resolveAgentPosition(agent, index, snapshot.agents.length, _options.officeLayout);
+      const target = resolveAgentPosition(agent, index, latestAgents.length, _options.officeLayout);
       record.agent = agent;
       record.renderIndex = index;
       record.target.copy(target);
@@ -145,7 +269,6 @@ export function mountThreeAgentGameOffice(
       updateAgentLabel(record.label, agent);
       updateAgentLabelPosition(record.label, record.mesh.group.position, camera, renderer.domElement);
     });
-    labelsDirty = true;
   }
 
   function createAgentRecord(agent: AgentGameOfficeAgent, index: number): AgentMeshRecord {
@@ -174,6 +297,8 @@ export function mountThreeAgentGameOffice(
     previousRenderTime = now;
     const elapsedSeconds = now / 1000;
 
+    refreshDisplayedAgents(now);
+    syncWorkingFollowState(now);
     const controlsChanged = controls.update();
     const shouldUpdateLabels = labelsDirty || controlsChanged;
 
@@ -192,6 +317,8 @@ export function mountThreeAgentGameOffice(
         updateAgentLabelPosition(record.label, record.mesh.group.position, camera, renderer.domElement);
       }
     }
+    followSelectedWorkingAgent();
+    stepActiveOfficeCameraTransition(now);
     agentBodyLayer.update(Array.from(agents.values()).map((record) => ({
       mesh: record.mesh,
       renderIndex: record.renderIndex,
@@ -213,31 +340,26 @@ export function mountThreeAgentGameOffice(
     camera.updateProjectionMatrix();
     renderer.setSize(nextWidth, nextHeight);
     labelsDirty = true;
+    emitCameraChange();
   });
   resizeObserver.observe(container);
 
   update(initialSnapshot);
+  emitCameraChange();
   animate();
 
   return {
     update,
     focusAgent(agentId) {
       if (!agentId) {
-        camera.position.set(30, 24, 28);
-        controls.target.set(10, 0, 0);
-        controls.update();
-        labelsDirty = true;
+        transitionOfficeCameraTo(createInitialOfficeCameraView(_options.officeLayout, camera.aspect, camera.fov));
         return;
       }
       const record = agents.get(agentId);
       if (!record) {
         return;
       }
-      const target = record.mesh.group.position;
-      camera.position.set(target.x + 5, 8, target.z + 7);
-      controls.target.set(target.x, 1, target.z);
-      controls.update();
-      labelsDirty = true;
+      transitionOfficeCameraTo(createFollowOfficeCameraView(record.mesh.group.position));
     },
     destroy() {
       disposed = true;
@@ -259,4 +381,253 @@ export function mountThreeAgentGameOffice(
       root.remove();
     },
   };
+
+  function emitCameraChange() {
+    _options.onCameraChange?.(createOfficeCameraState(camera, controls));
+  }
+
+  function syncWorkingFollowState(nowMs: number) {
+    const previousSelectedAgentId = workingFollowState.selectedAgentId;
+    workingFollowState = updateWorkingAgentFollowState(workingFollowState, latestAgents, nowMs);
+    if (previousSelectedAgentId && !workingFollowState.selectedAgentId) {
+      transitionOfficeCameraTo(createInitialOfficeCameraView(_options.officeLayout, camera.aspect, camera.fov));
+    }
+  }
+
+  function followSelectedWorkingAgent() {
+    const selectedAgentId = workingFollowState.selectedAgentId;
+    if (!selectedAgentId) {
+      return;
+    }
+    const record = agents.get(selectedAgentId);
+    if (!record) {
+      return;
+    }
+    const view = createFollowOfficeCameraView(record.mesh.group.position);
+    if (cameraTransition) {
+      cameraTransition.to = cloneOfficeCameraView(view);
+    } else {
+      transitionOfficeCameraTo(view);
+    }
+  }
+
+  function transitionOfficeCameraTo(view: OfficeCameraView) {
+    cameraTransition = createOfficeCameraTransition(getCurrentOfficeCameraView(camera, controls), view, performance.now());
+  }
+
+  function stepActiveOfficeCameraTransition(nowMs: number) {
+    if (!cameraTransition) {
+      return;
+    }
+    const next = stepOfficeCameraTransition(cameraTransition, nowMs);
+    applyOfficeCameraView(camera, next.view);
+    controls.target.copy(next.view.target);
+    controls.update();
+    labelsDirty = true;
+    emitCameraChange();
+    if (next.done) {
+      cameraTransition = null;
+    }
+  }
+}
+
+export type OfficeCameraView = {
+  position: THREE.Vector3;
+  rotation: THREE.Euler;
+  target: THREE.Vector3;
+  up: THREE.Vector3;
+  distance: number;
+};
+
+export type OfficeCameraTransition = {
+  from: OfficeCameraView;
+  to: OfficeCameraView;
+  startMs: number;
+  durationMs: number;
+};
+
+export function createOfficeCameraTransition(
+  from: OfficeCameraView,
+  to: OfficeCameraView,
+  startMs: number,
+  durationMs = OFFICE_CAMERA_TRANSITION_DURATION_MS,
+): OfficeCameraTransition {
+  return {
+    from: cloneOfficeCameraView(from),
+    to: cloneOfficeCameraView(to),
+    startMs,
+    durationMs,
+  };
+}
+
+export function stepOfficeCameraTransition(
+  transition: OfficeCameraTransition,
+  nowMs: number,
+): { view: OfficeCameraView; done: boolean } {
+  const progress = transition.durationMs <= 0
+    ? 1
+    : THREE.MathUtils.clamp((nowMs - transition.startMs) / transition.durationMs, 0, 1);
+  const eased = easeInOutCubic(progress);
+  return {
+    view: interpolateOfficeCameraView(transition.from, transition.to, eased),
+    done: progress >= 1,
+  };
+}
+
+export function createFollowOfficeCameraView(agentPosition: THREE.Vector3): OfficeCameraView {
+  const target = new THREE.Vector3(agentPosition.x, 1, agentPosition.z);
+  const position = target.clone().add(WORKING_FOLLOW_CAMERA_OFFSET);
+  const rotation = new THREE.Euler();
+  const matrix = new THREE.Matrix4().lookAt(position, target, new THREE.Vector3(0, 1, 0));
+  rotation.setFromRotationMatrix(matrix);
+
+  return {
+    position,
+    rotation,
+    target,
+    up: new THREE.Vector3(0, 1, 0),
+    distance: position.distanceTo(target),
+  };
+}
+
+export function createInitialOfficeCameraView(
+  layout: ResolvedOfficeLayout,
+  aspect: number,
+  fovDegrees: number,
+): OfficeCameraView {
+  const rotation = new THREE.Euler(
+    THREE_RENDERER_INITIAL_CAMERA_ROTATION.x,
+    THREE_RENDERER_INITIAL_CAMERA_ROTATION.y,
+    THREE_RENDERER_INITIAL_CAMERA_ROTATION.z,
+  );
+  const quaternion = new THREE.Quaternion().setFromEuler(rotation);
+  const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(quaternion).normalize();
+  const up = new THREE.Vector3(0, 1, 0).applyQuaternion(quaternion).normalize();
+  const target = new THREE.Vector3(layout.scene.center.x, OFFICE_CAMERA_BOUNDS_HEIGHT / 2, layout.scene.center.z);
+  const distance = resolveOfficeCameraDistance(layout, target, quaternion, aspect, fovDegrees);
+  const position = target.clone().sub(forward.multiplyScalar(distance));
+
+  return {
+    position,
+    rotation,
+    target,
+    up,
+    distance,
+  };
+}
+
+function applyOfficeCameraView(camera: THREE.PerspectiveCamera, view: OfficeCameraView) {
+  camera.up.copy(view.up);
+  camera.position.copy(view.position);
+  camera.rotation.copy(view.rotation);
+}
+
+function getCurrentOfficeCameraView(
+  camera: THREE.PerspectiveCamera,
+  controls: OrbitControls,
+): OfficeCameraView {
+  return {
+    position: camera.position.clone(),
+    rotation: camera.rotation.clone(),
+    target: controls.target.clone(),
+    up: camera.up.clone(),
+    distance: camera.position.distanceTo(controls.target),
+  };
+}
+
+function cloneOfficeCameraView(view: OfficeCameraView): OfficeCameraView {
+  return {
+    position: view.position.clone(),
+    rotation: view.rotation.clone(),
+    target: view.target.clone(),
+    up: view.up.clone(),
+    distance: view.distance,
+  };
+}
+
+function interpolateOfficeCameraView(from: OfficeCameraView, to: OfficeCameraView, amount: number): OfficeCameraView {
+  const position = from.position.clone().lerp(to.position, amount);
+  const target = from.target.clone().lerp(to.target, amount);
+  const up = from.up.clone().lerp(to.up, amount).normalize();
+  const rotation = new THREE.Euler();
+  const matrix = new THREE.Matrix4().lookAt(position, target, up);
+  rotation.setFromRotationMatrix(matrix);
+  return {
+    position,
+    rotation,
+    target,
+    up,
+    distance: position.distanceTo(target),
+  };
+}
+
+function easeInOutCubic(value: number): number {
+  return value < 0.5
+    ? 4 * value * value * value
+    : 1 - Math.pow(-2 * value + 2, 3) / 2;
+}
+
+function resolveOfficeCameraDistance(
+  layout: ResolvedOfficeLayout,
+  target: THREE.Vector3,
+  cameraQuaternion: THREE.Quaternion,
+  aspect: number,
+  fovDegrees: number,
+): number {
+  const inverseCameraQuaternion = cameraQuaternion.clone().invert();
+  const verticalTan = Math.tan(THREE.MathUtils.degToRad(fovDegrees) / 2);
+  const horizontalTan = verticalTan * Math.max(aspect, 0.1);
+  const halfWidth = layout.scene.width / 2;
+  const halfDepth = layout.scene.depth / 2;
+  const corners: THREE.Vector3[] = [];
+
+  for (const x of [layout.scene.center.x - halfWidth, layout.scene.center.x + halfWidth]) {
+    for (const y of [0, OFFICE_CAMERA_BOUNDS_HEIGHT]) {
+      for (const z of [layout.scene.center.z - halfDepth, layout.scene.center.z + halfDepth]) {
+        corners.push(new THREE.Vector3(x, y, z));
+      }
+    }
+  }
+
+  let distance = THREE_RENDERER_MIN_CAMERA_DISTANCE;
+  for (const corner of corners) {
+    const local = corner.sub(target).applyQuaternion(inverseCameraQuaternion);
+    distance = Math.max(
+      distance,
+      local.z + Math.abs(local.x) / horizontalTan,
+      local.z + Math.abs(local.y) / verticalTan,
+    );
+  }
+
+  return Math.min(
+    THREE_RENDERER_MAX_CAMERA_DISTANCE,
+    Math.max(THREE_RENDERER_MIN_CAMERA_DISTANCE, distance * THREE_RENDERER_CAMERA_PADDING),
+  );
+}
+
+export function createOfficeCameraState(
+  camera: THREE.PerspectiveCamera,
+  controls: OrbitControls,
+): AgentGameOfficeCameraState {
+  return {
+    zoom: camera.zoom,
+    distance: camera.position.distanceTo(controls.target),
+    position: {
+      x: camera.position.x,
+      y: camera.position.y,
+      z: camera.position.z,
+    },
+    rotation: {
+      x: camera.rotation.x,
+      y: camera.rotation.y,
+      z: camera.rotation.z,
+    },
+    target: {
+      x: controls.target.x,
+      y: controls.target.y,
+      z: controls.target.z,
+    },
+    polarAngle: controls.getPolarAngle(),
+    azimuthalAngle: controls.getAzimuthalAngle(),
+  };
 }