feat(web): #79 agent speech bubbles

- Add SpeechBubble class (dark bg, tail, float animation, auto-hide with fade)
- showSpeech() method on AgentSprite
- showSpeech() + showSpeech() on PixiApp
- Speech bubble triggered on status change (highlightAgent shows agent role)
- agentMap in PixiApp to store current agent data

Author: Ubuntu

packages/web/src/pixel/AgentSprite.ts

@@ -5,7 +5,7 @@ import {
 import type { Agent } from '../types';
 import type { PixelState } from './types';
 import { STATUS_TO_PIXEL } from './types';
-import { StatusBubble } from './SceneDecorations';
+import { StatusBubble, SpeechBubble } from './SceneDecorations';
 
 // ──────────────────────────────────────────────
 // Sprite sheet registry
@@ -103,6 +103,7 @@ export class AgentSprite {
   private label: Text;
   private errorOverlay: Graphics | null = null;
   private bubble: StatusBubble | null = null;
+  private speechBubble: SpeechBubble | null = null;
   private currentState: PixelState;
   private agentKey: string;
   private tint: number | null;
@@ -123,6 +124,16 @@ export class AgentSprite {
     return { x: this.container.x + 32, y: this.container.y + 32 };
   }
 
+  /** Show a speech bubble with the given text */
+  showSpeech(text: string, durationMs = 4000) {
+    if (!this.speechBubble) {
+      this.speechBubble = new SpeechBubble();
+      this.speechBubble.container.position.set(0, -50);
+      this.container.addChild(this.speechBubble.container);
+    }
+    this.speechBubble.show(text, durationMs);
+  }
+
   constructor(agent: Agent, onClickCallback?: (agent: Agent, screenX: number, screenY: number) => void) {
     this.agent = agent;
     this.currentState = STATUS_TO_PIXEL[agent.status];
@@ -301,6 +312,11 @@ export class AgentSprite {
     if (this.bubble) {
       this.bubble.tick(frame / 60);
     }
+
+    // Speech bubble tick
+    if (this.speechBubble) {
+      this.speechBubble.tick(frame / 60);
+    }
   }
 
   /** Flash highlight effect for event feedback */
@@ -368,6 +384,7 @@ export class AgentSprite {
   destroy() {
     this.destroyed = true;
     this.bubble?.destroy();
+    this.speechBubble?.destroy();
     this.container.destroy({ children: true });
   }
 }

packages/web/src/pixel/PixiApp.ts

@@ -16,6 +16,7 @@ export class PixiApp {
   private app: Application | null = null;
   private world: Container | null = null;   // pan/zoom container wrapping everything
   private sprites: Map<string, AgentSprite> = new Map();
+  private agentMap: Map<string, Agent> = new Map();
   private decorations: SceneDecorations | null = null;
   private initialized = false;
   private frame = 0;
@@ -203,6 +204,18 @@ export class PixiApp {
       sprite.flash(durationMs);
       const pos = sprite.getPosition();
       this.particles.spawn(pos.x, pos.y, 16, 0xffd700, 80, 0.9, 4);
+      // Speech bubble feedback
+      const agent = this.agentMap.get(agentId);
+      const roleText = agent?.role ?? '工作中';
+      sprite.showSpeech(roleText, 3500);
+    }
+  }
+
+  /** Show a speech bubble on an agent */
+  showSpeech(agentId: string, text: string, durationMs = 4000) {
+    const sprite = this.sprites.get(agentId);
+    if (sprite) {
+      sprite.showSpeech(text, durationMs);
     }
   }
 
@@ -304,6 +317,10 @@ export class PixiApp {
     const slots = assignFixedSlots(agents.length, statuses);
     const monitorSlots: { x: number; y: number; agentId: string; online: boolean }[] = [];
 
+    // Update agent map
+    this.agentMap.clear();
+    agents.forEach((agent) => this.agentMap.set(agent.id, agent));
+
     agents.forEach((agent, i) => {
       const slot = slots[i];
       if (!slot) return;

packages/web/src/pixel/SceneDecorations.ts

@@ -932,3 +932,88 @@ export class StatusBubble {
     this.container.destroy({ children: true });
   }
 }
+
+// ─── Speech Bubbles (for agent messages/activities) ─────────────────────────────
+export class SpeechBubble {
+  readonly container: Container;
+  private phase: number = 0;
+  private autoHideTimer = 0;
+  private autoHideMs = 0;
+  private graphics: Graphics;
+  private label: Text;
+
+  constructor() {
+    this.container = new Container();
+    this.graphics = new Graphics();
+    this.label = new Text({
+      text: '',
+      style: new TextStyle({
+        fontSize: 7,
+        fontFamily: 'monospace',
+        fill: 0xffffff,
+        align: 'center',
+        wordWrap: true,
+        wordWrapWidth: 80,
+      }),
+    });
+    this.label.anchor.set(0.5, 0.5);
+    this.container.addChild(this.graphics);
+    this.container.addChild(this.label);
+    this.container.visible = false;
+    this.container.zIndex = 100;
+  }
+
+  show(text: string, durationMs = 4000) {
+    this.label.text = text;
+    // Draw bubble background sized to text
+    const padding = 4;
+    const textBounds = this.label.getBounds();
+    const bw = Math.max(40, textBounds.width + padding * 2);
+    const bh = Math.max(20, textBounds.height + padding * 2);
+    this.graphics.clear();
+    // Pixel-art style rounded rect with dark bg
+    this.graphics.roundRect(-bw / 2, -bh / 2, bw, bh, 4).fill({ color: 0x1a1a2e, alpha: 0.95 });
+    this.graphics.roundRect(-bw / 2, -bh / 2, bw, bh, 4).stroke({ color: 0x4a4a6a, width: 1, alpha: 0.8 });
+    // Small tail pointing down
+    this.graphics.moveTo(-4, bh / 2 - 1);
+    this.graphics.lineTo(0, bh / 2 + 5);
+    this.graphics.lineTo(4, bh / 2 - 1);
+    this.graphics.closePath().fill({ color: 0x1a1a2e, alpha: 0.95 });
+
+    this.label.position.set(0, 0);
+    this.container.visible = true;
+    this.container.alpha = 1;
+    this.autoHideMs = durationMs;
+    this.autoHideTimer = 0;
+    this.phase = Math.random() * Math.PI * 2;
+  }
+
+  hide() {
+    this.container.visible = false;
+    this.label.text = '';
+  }
+
+  tick(elapsed: number) {
+    if (!this.container.visible) return;
+
+    // Auto-hide
+    this.autoHideTimer += 1 / 60 * 1000;
+    if (this.autoHideTimer >= this.autoHideMs) {
+      this.hide();
+      return;
+    }
+
+    // Fade out in last 20% of life
+    const fadeStart = this.autoHideMs * 0.8;
+    if (this.autoHideTimer > fadeStart) {
+      this.container.alpha = 1 - (this.autoHideTimer - fadeStart) / (this.autoHideMs - fadeStart);
+    }
+
+    // Float animation
+    this.container.y = Math.sin(elapsed * 2.8 + this.phase) * 3;
+  }
+
+  destroy() {
+    this.container.destroy({ children: true });
+  }
+}