agents-dojo 0.1.6 → 0.1.7

package/monitor/src/lib/dojo-app.ts

@@ -0,0 +1,799 @@
+/**
+ * DojoApp — Pure Pixi.js application that manages all dojo sprites.
+ * Single Ticker loop drives all animations. No React re-renders for movement.
+ */
+import {
+  Application, Container, Sprite, Texture, Assets, Rectangle,
+  Graphics, Text, TextStyle, type FederatedPointerEvent,
+} from 'pixi.js';
+import { useMonitorStore, getChatPosition } from './store.js';
+import { sendCommand } from './ws-client.js';
+import { INTERACTABLES, getObstacles } from './interactables.js';
+import type { Agent, AgentAnim } from './types.js';
+
+// ── Constants ──────────────────────────────────────────────
+
+const DESIGN_W = 960;
+const DESIGN_H = 600;
+const FRAME_SIZE = 256;
+const TOTAL_FRAMES = 21;
+const SPRITE_SCALE = 64 / 256;
+const MOVE_SPEED = 1.2;
+const STAKE_ATTACK_OFFSET_X = 25;
+const DS = 960 / 2400;
+const OBSTACLES = getObstacles();
+
+const MASTER_POS = { x: 480, y: 460 };
+
+const ANIMS: Record<string, number[]> = {
+  idle: [0, 1], walk: [2, 3, 4, 5], sit: [6, 7, 8], attack: [9, 10, 11],
+  daydream: [12, 13], chat: [19, 20],
+  shake_hand: [0, 1],   // reuse idle frames; wobble effect applied in tick
+  head_shake: [0, 1],   // reuse idle frames; wobble effect applied in tick
+};
+const ANIM_SPEED: Record<string, number> = {
+  idle: 800, walk: 150, sit: 600, attack: 200, daydream: 1200, chat: 400,
+  shake_hand: 200, head_shake: 150,
+};
+
+const FLOOR = { minX: 40, maxX: 920, minY: 310, maxY: 550 };
+const BUBBLE_CHUNK_SIZE = 40;
+const BUBBLE_CHUNK_INTERVAL = 1500; // ms per chunk
+
+/** Split text into display chunks of ~BUBBLE_CHUNK_SIZE chars, breaking at word boundaries. */
+function splitIntoChunks(text: string): string[] {
+  if (text.length <= BUBBLE_CHUNK_SIZE) return [text];
+  const chunks: string[] = [];
+  let pos = 0;
+  while (pos < text.length) {
+    let end = pos + BUBBLE_CHUNK_SIZE;
+    if (end >= text.length) { chunks.push(text.slice(pos)); break; }
+    // Find a word boundary near the end
+    const spaceIdx = text.lastIndexOf(' ', end);
+    if (spaceIdx > pos) end = spaceIdx;
+    chunks.push(text.slice(pos, end));
+    pos = end;
+    // Skip leading space on next chunk
+    if (text[pos] === ' ') pos++;
+  }
+  return chunks;
+}
+
+function randomFloorPos() {
+  for (let i = 0; i < 30; i++) {
+    const x = FLOOR.minX + Math.random() * (FLOOR.maxX - FLOOR.minX);
+    const y = FLOOR.minY + Math.random() * (FLOOR.maxY - FLOOR.minY);
+    if (!OBSTACLES.some(o => Math.hypot(x - o.x, y - o.y) < o.r + 20)) return { x, y };
+  }
+  return { x: 480, y: 450 };
+}
+
+// ── Agent Sprite State ─────────────────────────────────────
+
+interface AgentState {
+  sprite: Sprite;
+  nameLabel: Text;
+  nameBg: Graphics;
+  bubble: Container;
+  bubbleText: Text;
+  bubbleBg: Graphics;
+  x: number; y: number;
+  targetX: number; targetY: number;
+  animKey: string;
+  animTime: number;
+  frameIdx: number;
+  facingLeft: boolean;
+  arrived: boolean;
+  autoAction: { kind: string; target?: { x: number; y: number }; duration?: number; timer: number };
+  visitedMaster: boolean;
+  failTimer?: number;     // ms counter for shake_hand animation on failed
+  rejectTimer?: number;   // ms counter for head_shake animation on rejected
+  dragging: boolean;      // true while user is dragging this agent
+  wobbleTime: number;     // ticker-synced wobble accumulator
+  prevStoreState: string; // previous store state (for detecting transitions)
+  idleGrace: number;      // ms grace period after task→idle (delays auto-behavior)
+  pendingSync?: Agent;    // buffered store agent snapshot, applied at start of tick
+  // Chunked bubble display
+  bubbleChunks: string[];
+  bubbleChunkIdx: number;
+  bubbleChunkTimer: number;
+  bubbleFullText: string; // track to detect when message changes
+}
+
+// ── Interactable State ─────────────────────────────────────
+
+interface InteractableState {
+  sprite: Sprite;
+  shakeX: number;
+  scaleX: number;
+  deform: number;
+  type: string;
+  anchorX: number;
+  spriteY: number;
+  agentX: number;
+  agentY: number;
+  designW: number;
+  designH: number;
+}
+
+// ── Main App ───────────────────────────────────────────────
+
+export class DojoApp {
+  app: Application;
+  private scene!: Container;
+  private agentFrames: Texture[] = [];
+  private masterFrames: Texture[] = [];
+  private agents = new Map<string, AgentState>();
+  private interactables: InteractableState[] = [];
+  private ready = false;
+  // Master bubble state
+  private masterBubble!: Container;
+  private masterBubbleBg!: Graphics;
+  private masterBubbleText!: Text;
+  private masterBubbleChunks: string[] = [];
+  private masterBubbleChunkIdx = 0;
+  private masterBubbleChunkTimer = 0;
+  private masterBubbleFullText = '';
+
+  constructor(private canvas: HTMLCanvasElement) {
+    this.app = new Application();
+  }
+
+  async init() {
+    await this.app.init({
+      canvas: this.canvas,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      background: 0x2a1a0a,
+      antialias: false,
+    });
+
+    this.scene = new Container();
+    this.app.stage.addChild(this.scene);
+    this.app.stage.eventMode = 'static';
+    this.app.stage.on('pointerdown', () => {
+      useMonitorStore.getState().closeMenu();
+    });
+    this.updateScale();
+
+    // Load assets
+    const [bgTex, agentTex, masterTex] = await Promise.all([
+      Assets.load('/bg_clean.png'),
+      Assets.load('/sprites/agent_default.png'),
+      Assets.load('/sprites/master.png'),
+    ]);
+
+    // Background
+    const bg = new Sprite(bgTex);
+    bg.width = DESIGN_W;
+    bg.height = DESIGN_H;
+    this.scene.addChild(bg);
+
+    // Cut agent frames
+    for (let i = 0; i < TOTAL_FRAMES; i++) {
+      this.agentFrames.push(new Texture({ source: agentTex.source, frame: new Rectangle(i * FRAME_SIZE, 0, FRAME_SIZE, FRAME_SIZE) }));
+    }
+
+    // Cut master frames
+    for (let i = 0; i < 2; i++) {
+      this.masterFrames.push(new Texture({ source: masterTex.source, frame: new Rectangle(i * FRAME_SIZE, 0, FRAME_SIZE, FRAME_SIZE) }));
+    }
+
+    // Load interactables
+    await this.loadInteractables();
+
+    // Master sprite
+    this.createMaster();
+
+    // Start ticker
+    this.app.ticker.add(this.tick.bind(this));
+
+    // Subscribe to store — buffer agent snapshots for next tick (avoids race condition)
+    useMonitorStore.subscribe((state) => {
+      for (const [id, agent] of state.agents) {
+        if (!this.agents.has(id)) this.createAgent(id, agent);
+        const s = this.agents.get(id);
+        if (s) s.pendingSync = agent;
+      }
+    });
+
+    // Also process any agents already in the store (loaded before init)
+    const initialState = useMonitorStore.getState();
+    for (const [id, agent] of initialState.agents) {
+      if (!this.agents.has(id)) this.createAgent(id, agent);
+      this.syncAgentFromStore(id, agent);
+    }
+
+    this.ready = true;
+
+    // Handle resize
+    window.addEventListener('resize', () => this.updateScale());
+  }
+
+  private updateScale() {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const scale = Math.min(vw / DESIGN_W, vh / DESIGN_H);
+    this.scene.x = (vw - DESIGN_W * scale) / 2;
+    this.scene.y = (vh - DESIGN_H * scale) / 2;
+    this.scene.scale.set(scale);
+    this.app.renderer.resize(vw, vh);
+  }
+
+  private async loadInteractables() {
+    for (const def of INTERACTABLES) {
+      const tex = await Assets.load(def.spriteFile);
+      const spr = new Sprite(tex);
+      spr.anchor.set(def.spriteAnchorX, def.spriteAnchorY);
+      spr.x = def.anchorX;
+      spr.y = def.spriteY;
+      spr.width = def.origW * DS;
+      spr.height = def.origH * DS;
+      // Cushions behind agents, stakes in front
+      if (def.type === 'cushion') {
+        this.scene.addChild(spr);
+      }
+      this.interactables.push({
+        sprite: spr, shakeX: 0, scaleX: 1, deform: 0,
+        type: def.type, anchorX: def.anchorX, spriteY: def.spriteY,
+        agentX: def.agentX, agentY: def.agentY,
+        designW: def.origW * DS, designH: def.origH * DS,
+      });
+    }
+    // Stakes added later (on top)
+    for (const ist of this.interactables) {
+      if (ist.type === 'stake') this.scene.addChild(ist.sprite);
+    }
+  }
+
+  private createMaster() {
+    const masterContainer = new Container();
+    masterContainer.x = MASTER_POS.x;
+    masterContainer.y = MASTER_POS.y;
+
+    const spr = new Sprite(this.masterFrames[0]);
+    spr.anchor.set(0.5, 1);
+    spr.scale.set(SPRITE_SCALE);
+
+    const nameBg = new Graphics();
+    nameBg.roundRect(-28, -FRAME_SIZE * SPRITE_SCALE - 14, 56, 14, 3);
+    nameBg.fill({ color: 0x8b0000, alpha: 0.6 });
+
+    const label = new Text({ text: 'Master', style: new TextStyle({ fontFamily: 'monospace', fontSize: 11, fill: 0xffd700, fontWeight: 'bold' }) });
+    label.anchor.set(0.5, 0);
+    label.y = -FRAME_SIZE * SPRITE_SCALE - 13;
+
+    // Speech bubble (hidden by default)
+    this.masterBubble = new Container();
+    this.masterBubble.visible = false;
+    this.masterBubbleBg = new Graphics();
+    this.masterBubbleText = new Text({ text: '', style: new TextStyle({ fontFamily: 'monospace', fontSize: 8, fill: 0x333333, wordWrap: true, wordWrapWidth: 140 }) });
+    this.masterBubbleText.anchor.set(0.5, 0);
+    this.masterBubble.addChild(this.masterBubbleBg, this.masterBubbleText);
+
+    masterContainer.addChild(spr, nameBg, label, this.masterBubble);
+    this.scene.addChild(masterContainer);
+  }
+
+  private createAgent(id: string, agent: Agent) {
+    const container = new Container();
+
+    const spr = new Sprite(this.agentFrames[0]);
+    spr.anchor.set(0.5, 1);
+    spr.scale.set(SPRITE_SCALE);
+
+    const nameBg = new Graphics();
+    nameBg.roundRect(-28, -FRAME_SIZE * SPRITE_SCALE - 14, 56, 14, 3);
+    nameBg.fill({ color: 0x000000, alpha: 0.45 });
+
+    const nameLabel = new Text({ text: id, style: new TextStyle({ fontFamily: 'monospace', fontSize: 11, fill: 0xffffff }) });
+    nameLabel.anchor.set(0.5, 0);
+    nameLabel.y = -FRAME_SIZE * SPRITE_SCALE - 13;
+
+    // Speech bubble (hidden by default)
+    const bubble = new Container();
+    bubble.visible = false;
+    const bubbleBg = new Graphics();
+    const bubbleText = new Text({ text: '', style: new TextStyle({ fontFamily: 'monospace', fontSize: 8, fill: 0x333333, wordWrap: true, wordWrapWidth: 140 }) });
+    bubbleText.anchor.set(0.5, 0);
+    bubble.addChild(bubbleBg, bubbleText);
+
+    // Hit area for easier clicking/dragging
+    const hitArea = new Graphics();
+    hitArea.rect(-32, -FRAME_SIZE * SPRITE_SCALE, 64, FRAME_SIZE * SPRITE_SCALE);
+    hitArea.fill({ color: 0, alpha: 0.001 });
+
+    container.addChild(hitArea, spr, nameBg, nameLabel, bubble);
+    // Insert before stakes
+    const stakeIdx = this.scene.children.findIndex(c => this.interactables.some(i => i.type === 'stake' && i.sprite === c));
+    if (stakeIdx >= 0) this.scene.addChildAt(container, stakeIdx);
+    else this.scene.addChild(container);
+
+    const state: AgentState = {
+      sprite: spr, nameLabel, nameBg, bubble, bubbleText, bubbleBg,
+      x: agent.position.x, y: agent.position.y,
+      targetX: agent.position.x, targetY: agent.position.y,
+      animKey: 'idle', animTime: 0, frameIdx: 0, facingLeft: false,
+      arrived: false,
+      autoAction: { kind: 'pause', duration: 500 + Math.random() * 2000, timer: 0 },
+      visitedMaster: false,
+      dragging: false,
+      wobbleTime: 0,
+      prevStoreState: 'idle',
+      idleGrace: 0,
+      bubbleChunks: [],
+      bubbleChunkIdx: 0,
+      bubbleChunkTimer: 0,
+      bubbleFullText: '',
+    };
+    container.x = state.x;
+    container.y = state.y;
+    this.agents.set(id, state);
+
+    // ── Drag + Click interaction ──
+    container.eventMode = 'static';
+    container.cursor = 'pointer';
+    let dragStart: { x: number; y: number } | null = null;
+    let dragMoved = false;
+    const DRAG_THRESHOLD = 4;
+
+    container.on('pointerdown', (e: FederatedPointerEvent) => {
+      e.stopPropagation();
+      dragStart = { x: e.globalX, y: e.globalY };
+      dragMoved = false;
+      state.dragging = false;
+    });
+
+    container.on('globalpointermove', (e: FederatedPointerEvent) => {
+      if (!dragStart) return;
+      const dx = e.globalX - dragStart.x;
+      const dy = e.globalY - dragStart.y;
+      if (!dragMoved && Math.hypot(dx, dy) > DRAG_THRESHOLD) {
+        dragMoved = true;
+        state.dragging = true;
+        useMonitorStore.getState().closeMenu();
+      }
+      if (dragMoved) {
+        // Convert screen coords to design coords via scene transform
+        const sceneScale = this.scene.scale.x;
+        const designX = (e.globalX - this.scene.x) / sceneScale;
+        const designY = (e.globalY - this.scene.y) / sceneScale;
+        state.x = Math.max(FLOOR.minX, Math.min(FLOOR.maxX, designX));
+        state.y = Math.max(FLOOR.minY, Math.min(FLOOR.maxY, designY));
+        state.targetX = state.x;
+        state.targetY = state.y;
+        state.arrived = true;
+      }
+    });
+
+    const onPointerEnd = (e: FederatedPointerEvent) => {
+      if (!dragStart) return;
+      if (dragMoved) {
+        // Drag ended — persist position
+        sendCommand({ type: 'set_position', agentId: id, x: state.x, y: state.y });
+        state.autoAction = { kind: 'pause', duration: 2000, timer: 0 };
+        state.arrived = true;
+      } else {
+        // Click — open context menu
+        useMonitorStore.getState().openMenu(id, e.globalX, e.globalY);
+      }
+      dragStart = null;
+      dragMoved = false;
+      state.dragging = false;
+    };
+
+    container.on('pointerup', onPointerEnd);
+    container.on('pointerupoutside', onPointerEnd);
+  }
+
+  /**
+   * Sync animation targets from store state.
+   * State machine per ANIMATION_REQUIREMENTS.md §10:
+   *
+   * 10.1 Client → Agent:
+   *   submitted       → walk to Master
+   *   working         → walk to stake, attack
+   *   input-required  → walk back to Master, wait
+   *   auth-required   → same as input-required
+   *   completed       → walk home
+   *   failed          → shake_hand at stake, then walk home
+   *   canceled        → walk home immediately
+   *   rejected        → head_shake at Master, then walk home
+   *
+   * 10.2 Agent → Agent:
+   *   submitted/working → walk to peer, chat animation
+   *   completed etc.    → walk home
+   */
+  private syncAgentFromStore(id: string, agent: Agent) {
+    const s = this.agents.get(id);
+    if (!s) return;
+
+    const store = useMonitorStore.getState();
+    const peerSession = agent.chatSessionId ? store.chatSessions.get(agent.chatSessionId) : undefined;
+    const isInPeerChat = !!peerSession;
+    const isAgentCall = agent.taskFrom && agent.taskFrom !== 'user';
+    const state = agent.state;
+
+    // Priority 1: Peer chat (agent-to-agent interaction)
+    if (isInPeerChat && peerSession) {
+      const idx = peerSession.memberIds.indexOf(id);
+      const pos = getChatPosition(peerSession.meetPoint, idx, peerSession.memberIds.length);
+      s.targetX = pos.x; s.targetY = pos.y;
+      s.animKey = s.arrived ? 'chat' : 'walk';
+    }
+    // Priority 2: Agent-to-agent call (no peer session yet, B walking to A)
+    else if (isAgentCall && (state === 'submitted' || state === 'working' || state === 'tool_call')) {
+      // Will be handled by peer chat session once created; for now walk toward caller
+      s.animKey = 'walk';
+    }
+    // Priority 3: Client task states
+    else if (state === 'submitted') {
+      // Walk to Master
+      s.animKey = 'walk';
+      s.targetX = MASTER_POS.x + 30; s.targetY = MASTER_POS.y;
+      s.visitedMaster = false;
+    }
+    else if (state === 'working' || state === 'tool_call') {
+      if (!s.visitedMaster) {
+        // First visit master, then go to stake
+        s.animKey = 'walk';
+        s.targetX = MASTER_POS.x + 30; s.targetY = MASTER_POS.y;
+      } else {
+        // At stake, attack
+        s.animKey = s.arrived ? 'attack' : 'walk';
+        s.targetX = agent.stakePosition.x + STAKE_ATTACK_OFFSET_X;
+        s.targetY = agent.stakePosition.y;
+      }
+    }
+    else if (state === 'input-required' || state === 'auth-required') {
+      // Walk back to Master and wait
+      s.animKey = s.arrived ? 'idle' : 'walk';
+      s.targetX = MASTER_POS.x + 30; s.targetY = MASTER_POS.y;
+    }
+    else if (state === 'completed' || state === 'canceled') {
+      // Walk home
+      s.animKey = s.arrived ? 'idle' : 'walk';
+      s.targetX = agent.homePosition.x; s.targetY = agent.homePosition.y;
+    }
+    else if (state === 'failed') {
+      // Shake hand at stake, then walk home
+      if (!s.arrived) {
+        // If still walking somewhere, keep going to stake first
+        s.animKey = 'walk';
+        s.targetX = agent.stakePosition.x + STAKE_ATTACK_OFFSET_X;
+        s.targetY = agent.stakePosition.y;
+      } else if (s.failTimer === undefined) {
+        // Just arrived at stake — start shake_hand animation
+        s.animKey = 'shake_hand';
+        s.failTimer = 0;
+      } else if (s.failTimer < 1500) {
+        // Shake hand for 1.5 seconds
+        s.animKey = 'shake_hand';
+      } else {
+        // Done shaking, walk home
+        s.animKey = 'walk';
+        s.targetX = agent.homePosition.x; s.targetY = agent.homePosition.y;
+        s.arrived = false;
+      }
+    }
+    else if (state === 'rejected') {
+      // Head shake at Master, then walk home
+      if (!s.arrived && Math.hypot(s.x - MASTER_POS.x - 30, s.y - MASTER_POS.y) > MOVE_SPEED * 3) {
+        s.animKey = 'walk';
+        s.targetX = MASTER_POS.x + 30; s.targetY = MASTER_POS.y;
+      } else if (s.rejectTimer === undefined) {
+        s.animKey = 'head_shake';
+        s.rejectTimer = 0;
+      } else if (s.rejectTimer < 1500) {
+        s.animKey = 'head_shake';
+      } else {
+        s.animKey = 'walk';
+        s.targetX = agent.homePosition.x; s.targetY = agent.homePosition.y;
+        s.arrived = false;
+      }
+    }
+    // else: idle — handled by auto-behavior in tick
+
+    // Reset timers when leaving failed/rejected states
+    if (state !== 'failed') s.failTimer = undefined;
+    if (state !== 'rejected') s.rejectTimer = undefined;
+
+    // Bubble — split full message into chunks, cycled in tick()
+    const showBubble = !!agent.lastMessage && state !== 'idle';
+    s.bubble.visible = showBubble;
+    if (showBubble && agent.lastMessage) {
+      // Recompute chunks if message changed
+      if (agent.lastMessage !== s.bubbleFullText) {
+        s.bubbleFullText = agent.lastMessage;
+        s.bubbleChunks = splitIntoChunks(agent.lastMessage);
+        s.bubbleChunkIdx = 0;
+        s.bubbleChunkTimer = 0;
+      }
+    } else {
+      s.bubbleFullText = '';
+      s.bubbleChunks = [];
+      s.bubbleChunkIdx = 0;
+      s.bubbleChunkTimer = 0;
+    }
+  }
+
+  // ── Single Ticker Loop ───────────────────────────────────
+
+  private tick(ticker: any) {
+    const dt = ticker.deltaMS;
+
+    for (const [id, s] of this.agents) {
+      // Apply buffered store sync at the start of each tick (avoids mid-frame mutation)
+      if (s.pendingSync) {
+        this.syncAgentFromStore(id, s.pendingSync);
+        s.pendingSync = undefined;
+      }
+
+      const agent = useMonitorStore.getState().agents.get(id);
+      if (!agent) continue;
+
+      const state = agent.state;
+      const isIdle = state === 'idle';
+      const isInPeerChat = !!agent.chatSessionId;
+
+      // Track state transitions for idle grace period
+      if (s.prevStoreState !== state) {
+        if (state === 'idle' && s.prevStoreState !== 'idle') {
+          // Just transitioned to idle — set grace period to prevent auto-behavior flicker
+          s.idleGrace = 500;
+        }
+        s.prevStoreState = state;
+      }
+      if (s.idleGrace > 0) s.idleGrace -= dt;
+
+      // Auto-behavior when idle (sit on cushion, occasionally wander)
+      // Skip during grace period after task completion
+      if (isIdle && !isInPeerChat && s.idleGrace <= 0) {
+        const action = s.autoAction;
+        if (action.kind === 'sit') {
+          // Sit on cushion (home position)
+          s.animKey = 'sit';
+          s.targetX = agent.homePosition.x; s.targetY = agent.homePosition.y;
+          action.timer += dt;
+          if (action.timer >= (action.duration ?? 5000)) {
+            s.autoAction = this.pickAutoAction();
+            s.arrived = false;
+          }
+        } else if (action.kind === 'wander') {
+          s.animKey = 'walk';
+          s.targetX = action.target!.x;
+          s.targetY = action.target!.y;
+          if (s.arrived) {
+            s.autoAction = this.pickAutoAction();
+            s.arrived = false;
+          }
+        } else if (action.kind === 'daydream' || action.kind === 'pause') {
+          s.animKey = action.kind === 'daydream' ? 'daydream' : 'idle';
+          s.targetX = s.x; s.targetY = s.y;
+          action.timer += dt;
+          if (action.timer >= (action.duration ?? 3000)) {
+            s.autoAction = this.pickAutoAction();
+            s.arrived = false;
+          }
+        }
+      }
+
+      // Advance fail/reject timers
+      if (s.failTimer !== undefined) s.failTimer += dt;
+      if (s.rejectTimer !== undefined) s.rejectTimer += dt;
+
+      // Movement (skip while being dragged)
+      if (s.dragging) {
+        // Position is updated directly by drag handler, skip movement logic
+      } else {
+
+      const dx = s.targetX - s.x;
+      const dy = s.targetY - s.y;
+      const dist = Math.hypot(dx, dy);
+      if (dist > MOVE_SPEED * 2) {
+        s.arrived = false;
+        if (Math.abs(dx) > 0.5) s.facingLeft = dx < 0;
+        let nx = s.x + (dx / dist) * MOVE_SPEED;
+        let ny = s.y + (dy / dist) * MOVE_SPEED;
+        // Obstacle avoidance when idle wandering
+        if (isIdle && !isInPeerChat) {
+          for (const o of OBSTACLES) {
+            const od = Math.hypot(nx - o.x, ny - o.y);
+            if (od < o.r + 8 && od > 0.1) {
+              nx = o.x + ((nx - o.x) / od) * (o.r + 8);
+              ny = o.y + ((ny - o.y) / od) * (o.r + 8);
+            }
+          }
+        }
+        s.x = nx; s.y = ny;
+      } else {
+        if (!s.arrived) { s.x = s.targetX; s.y = s.targetY; }
+        s.arrived = true;
+      }
+
+      // Master visit: when agent arrives at Master during working state
+      if ((state === 'working' || state === 'tool_call') && !s.visitedMaster && s.arrived
+          && Math.hypot(s.x - MASTER_POS.x - 30, s.y - MASTER_POS.y) < MOVE_SPEED * 3) {
+        s.visitedMaster = true;
+        s.arrived = false;
+      }
+
+      // Peer chat: face toward partner when arrived
+      if (isInPeerChat && s.arrived) {
+        const session = useMonitorStore.getState().chatSessions.get(agent.chatSessionId!);
+        if (session) {
+          s.facingLeft = session.meetPoint.x < s.x;
+        }
+      }
+
+      } // end of !dragging else block
+
+      // Animation frame
+      const frames = ANIMS[s.animKey] ?? ANIMS.idle;
+      const spd = ANIM_SPEED[s.animKey] ?? 800;
+      s.animTime += dt;
+      if (s.animTime >= spd) {
+        s.animTime = 0;
+        const idx = frames.indexOf(s.frameIdx);
+        s.frameIdx = idx === -1 ? frames[0] : frames[(idx + 1) % frames.length];
+      }
+
+      // Apply to Pixi sprite
+      const container = s.sprite.parent as Container;
+      container.x = s.x;
+      container.y = s.y;
+      s.sprite.texture = this.agentFrames[s.frameIdx] ?? this.agentFrames[0];
+      const facing = s.animKey === 'attack' ? -1 : (s.facingLeft ? -1 : 1);
+      s.sprite.scale.x = facing * SPRITE_SCALE;
+
+      // Wobble effects for shake_hand / head_shake (ticker-synced)
+      if (s.animKey === 'shake_hand' || s.animKey === 'head_shake') {
+        s.wobbleTime += dt;
+        const freq = s.animKey === 'shake_hand' ? 0.02 : 0.03;
+        const amp = s.animKey === 'shake_hand' ? 3 : 4;
+        container.x = s.x + Math.sin(s.wobbleTime * freq) * amp;
+      } else {
+        s.wobbleTime = 0;
+      }
+
+      // Bubble chunk cycling
+      if (s.bubble.visible && s.bubbleChunks.length > 0) {
+        s.bubbleChunkTimer += dt;
+        if (s.bubbleChunkTimer >= BUBBLE_CHUNK_INTERVAL && s.bubbleChunks.length > 1) {
+          s.bubbleChunkTimer = 0;
+          s.bubbleChunkIdx = (s.bubbleChunkIdx + 1) % s.bubbleChunks.length;
+        }
+        const text = s.bubbleChunks[s.bubbleChunkIdx] ?? '';
+        s.bubbleText.text = text;
+        const bw = Math.min(Math.max(text.length * 5 + 16, 50), 160);
+        const bh = 22;
+        const by = -FRAME_SIZE * SPRITE_SCALE - 16 - bh;
+        s.bubbleBg.clear();
+        s.bubbleBg.roundRect(-bw / 2, by, bw, bh, 6);
+        s.bubbleBg.fill({ color: 0xffffff, alpha: 0.92 });
+        s.bubbleText.y = by + 4;
+      }
+
+      // Sync position to store (throttled)
+      const storeAgent = useMonitorStore.getState().agents.get(id);
+      if (storeAgent && Math.hypot(storeAgent.position.x - s.x, storeAgent.position.y - s.y) > 1) {
+        useMonitorStore.getState().setPosition(id, s.x, s.y);
+      }
+
+      // Sync anim
+      const storeAnim = this.animToStoreAnim(s.animKey);
+      if (storeAgent && storeAgent.currentAnim !== storeAnim) {
+        useMonitorStore.getState().setAnim(id, storeAnim);
+      }
+    }
+
+    // Master bubble: show client's message with chunked display
+    const masterMsg = useMonitorStore.getState().masterMessage;
+    if (masterMsg) {
+      this.masterBubble.visible = true;
+      if (masterMsg !== this.masterBubbleFullText) {
+        this.masterBubbleFullText = masterMsg;
+        this.masterBubbleChunks = splitIntoChunks(masterMsg);
+        this.masterBubbleChunkIdx = 0;
+        this.masterBubbleChunkTimer = 0;
+      }
+      this.masterBubbleChunkTimer += dt;
+      if (this.masterBubbleChunkTimer >= BUBBLE_CHUNK_INTERVAL && this.masterBubbleChunks.length > 1) {
+        this.masterBubbleChunkTimer = 0;
+        this.masterBubbleChunkIdx = (this.masterBubbleChunkIdx + 1) % this.masterBubbleChunks.length;
+      }
+      const text = this.masterBubbleChunks[this.masterBubbleChunkIdx] ?? '';
+      this.masterBubbleText.text = text;
+      const bw = Math.min(Math.max(text.length * 5 + 16, 50), 160);
+      const bh = 22;
+      const by = -FRAME_SIZE * SPRITE_SCALE - 16 - bh;
+      this.masterBubbleBg.clear();
+      this.masterBubbleBg.roundRect(-bw / 2, by, bw, bh, 6);
+      this.masterBubbleBg.fill({ color: 0xfff8dc, alpha: 0.95 });
+      this.masterBubbleText.y = by + 4;
+    } else {
+      this.masterBubble.visible = false;
+      this.masterBubbleFullText = '';
+      this.masterBubbleChunks = [];
+    }
+
+    // Depth sort: objects with higher y should render in front
+    this.scene.children.sort((a, b) => (a.y || 0) - (b.y || 0));
+
+    // Update interactables
+    for (const ist of this.interactables) {
+      const agents = useMonitorStore.getState().agents;
+      const isActive = this.checkInteractableActive(ist, agents);
+
+      if (ist.type === 'stake') {
+        if (isActive) {
+          const t = performance.now() / 1000;
+          const decay = Math.exp(-((t % 0.4) * 5));
+          ist.shakeX = Math.sin(t * 20) * 3 * decay;
+          const hp = (t * 5) % 1;
+          ist.scaleX = hp < 0.2 ? 1 + (0.2 - hp) * 0.15 : 1;
+        } else {
+          ist.shakeX *= 0.85;
+          ist.scaleX += (1 - ist.scaleX) * 0.15;
+          if (Math.abs(ist.shakeX) < 0.1) ist.shakeX = 0;
+        }
+        ist.sprite.x = ist.anchorX + ist.shakeX;
+        ist.sprite.width = ist.designW * ist.scaleX;
+      }
+
+      if (ist.type === 'cushion') {
+        const target = isActive ? 1 : 0;
+        const diff = target - ist.deform;
+        if (Math.abs(diff) > 0.005) ist.deform += diff * (isActive ? 0.12 : 0.06);
+        else ist.deform = target;
+        ist.sprite.width = ist.designW * (1 + ist.deform * 0.12);
+        ist.sprite.height = ist.designH * (1 - ist.deform * 0.25);
+      }
+    }
+  }
+
+  private checkInteractableActive(ist: InteractableState, agents: Map<string, Agent>): boolean {
+    for (const a of agents.values()) {
+      if (ist.type === 'stake') {
+        if (a.currentAnim !== 'attack') continue;
+        if (Math.abs(a.position.x - ist.agentX) < 30 && Math.abs(a.position.y - ist.agentY) < 30) return true;
+      }
+      if (ist.type === 'cushion') {
+        if (a.currentAnim !== 'sit') continue;
+        if (Math.abs(a.homePosition.x - ist.agentX) < 5 && Math.abs(a.homePosition.y - ist.agentY) < 5 &&
+            Math.abs(a.position.x - a.homePosition.x) < 20 && Math.abs(a.position.y - a.homePosition.y) < 20) return true;
+      }
+    }
+    return false;
+  }
+
+  private pickAutoAction() {
+    const r = Math.random();
+    // Prefer sitting on cushion (idle default per R10: "坐在蒲团上发呆")
+    if (r < 0.45) return { kind: 'sit', duration: 5000 + Math.random() * 8000, timer: 0 };
+    if (r < 0.70) return { kind: 'wander', target: randomFloorPos(), timer: 0 };
+    if (r < 0.85) return { kind: 'daydream', duration: 3000 + Math.random() * 5000, timer: 0 };
+    return { kind: 'pause', duration: 1000 + Math.random() * 2000, timer: 0 };
+  }
+
+  private animToStoreAnim(key: string): AgentAnim {
+    switch (key) {
+      case 'attack': return 'attack';
+      case 'sit': return 'sit';
+      case 'walk': return 'walk';
+      case 'chat': return 'chat';
+      case 'daydream': return 'daydream';
+      case 'shake_hand': return 'shake_hand';
+      case 'head_shake': return 'head_shake';
+      default: return 'idle';
+    }
+  }
+
+  destroy() {
+    try {
+      this.app.ticker.stop();
+      this.app.stage.removeChildren();
+      this.app.destroy(true, { children: true });
+    } catch { /* ignore cleanup errors */ }
+  }
+}