corporateai 0.0.1

package/ui/src/components/visual-office/office-view/buildScene-ceo-hallway.ts

@@ -0,0 +1,345 @@
+import type { MutableRefObject } from "react";
+import { type Application, Container, Graphics, Text, TextStyle } from "pixi.js";
+import type { Agent, Task } from "../types";
+import type { Delivery, RoomTheme, WallClockVisual } from "./model";
+import { CEO_ZONE_H, HALLWAY_H, TILE } from "./model";
+import { LOCALE_TEXT, type SupportedLocale, pickLocale } from "./themes-locale";
+import {
+  blendColor,
+  drawAmbientGlow,
+  drawBandGradient,
+  drawBunting,
+  drawPictureFrame,
+  drawRoomAtmosphere,
+  drawTiledFloor,
+  drawWallClock,
+  drawWaterCooler,
+} from "./drawing-core";
+import { drawChair, drawPlant } from "./drawing-furniture-a";
+import { formatPeopleCount, formatTaskCount } from "./drawing-furniture-b";
+
+interface BuildCeoAndHallwayParams {
+  app: Application;
+  OFFICE_W: number;
+  totalH: number;
+  breakRoomY: number;
+  isDark: boolean;
+  activeLocale: SupportedLocale;
+  ceoTheme: RoomTheme;
+  activeMeetingTaskId: string | null;
+  onOpenActiveMeetingMinutes?: (taskId: string) => void;
+  agents: Agent[];
+  tasks: Task[];
+  deliveriesRef: MutableRefObject<Delivery[]>;
+  ceoMeetingSeatsRef: MutableRefObject<Array<{ x: number; y: number }>>;
+  wallClocksRef: MutableRefObject<WallClockVisual[]>;
+  ceoOfficeRectRef: MutableRefObject<{ x: number; y: number; w: number; h: number } | null>;
+}
+
+export function buildCeoAndHallway({
+  app,
+  OFFICE_W,
+  totalH,
+  breakRoomY,
+  isDark,
+  activeLocale,
+  ceoTheme,
+  activeMeetingTaskId,
+  onOpenActiveMeetingMinutes,
+  agents,
+  tasks,
+  deliveriesRef,
+  ceoMeetingSeatsRef,
+  wallClocksRef,
+  ceoOfficeRectRef,
+}: BuildCeoAndHallwayParams): void {
+  const bg = new Graphics();
+  const bgFill = isDark ? 0x0e0e1c : 0xf5f0e8;
+  const bgGradFrom = isDark ? 0x121222 : 0xf8f4ec;
+  const bgGradTo = isDark ? 0x0a0a18 : 0xf0ece4;
+  const bgStrokeInner = isDark ? 0x2a2a48 : 0xd8cfc0;
+  const bgStrokeOuter = isDark ? 0x222240 : 0xe0d8cc;
+  const bgDotColor = isDark ? 0x2a2a48 : 0xd0c8b8;
+  bg.roundRect(0, 0, OFFICE_W, totalH, 6).fill(bgFill);
+  drawBandGradient(bg, 2, 2, OFFICE_W - 4, totalH - 4, bgGradFrom, bgGradTo, 14, 0.82);
+  bg.roundRect(2, 2, OFFICE_W - 4, totalH - 4, 5).stroke({ width: 1.5, color: bgStrokeInner, alpha: 0.55 });
+  bg.roundRect(0, 0, OFFICE_W, totalH, 6).stroke({ width: 3, color: bgStrokeOuter });
+  for (let i = 0; i < 22; i++) {
+    const sx = 12 + ((i * 97) % Math.max(24, OFFICE_W - 24));
+    const sy = 12 + ((i * 131) % Math.max(24, totalH - 24));
+    bg.circle(sx, sy, i % 3 === 0 ? 1.1 : 0.8).fill({ color: bgDotColor, alpha: i % 2 === 0 ? 0.12 : 0.08 });
+  }
+  app.stage.addChild(bg);
+
+  const ceoLayer = new Container();
+  ceoOfficeRectRef.current = { x: 4, y: 4, w: OFFICE_W - 8, h: CEO_ZONE_H - 4 };
+  const ceoFloor = new Graphics();
+  drawTiledFloor(ceoFloor, 4, 4, OFFICE_W - 8, CEO_ZONE_H - 4, ceoTheme.floor1, ceoTheme.floor2);
+  ceoLayer.addChild(ceoFloor);
+  drawRoomAtmosphere(ceoLayer, 4, 4, OFFICE_W - 8, CEO_ZONE_H - 4, ceoTheme.wall, ceoTheme.accent);
+  const ceoBorder = new Graphics();
+  ceoBorder
+    .roundRect(4, 4, OFFICE_W - 8, CEO_ZONE_H - 4, 3)
+    .stroke({ width: 2, color: blendColor(ceoTheme.wall, ceoTheme.accent, 0.55) });
+  ceoBorder
+    .roundRect(3, 3, OFFICE_W - 6, CEO_ZONE_H - 2, 4)
+    .stroke({ width: 1, color: blendColor(ceoTheme.accent, 0xffffff, 0.2), alpha: 0.35 });
+  ceoLayer.addChild(ceoBorder);
+
+  const ceoLabel = new Text({
+    text: pickLocale(activeLocale, LOCALE_TEXT.ceoOffice),
+    style: new TextStyle({
+      fontSize: 10,
+      fill: 0xffffff,
+      fontWeight: "bold",
+      fontFamily: "monospace",
+      letterSpacing: 2,
+    }),
+  });
+  const ceoLabelBg = new Graphics();
+  ceoLabelBg
+    .roundRect(10, 6, ceoLabel.width + 8, 14, 3)
+    .fill({ color: blendColor(ceoTheme.accent, ceoTheme.wall, 0.35), alpha: 1 });
+  ceoLabelBg
+    .roundRect(10, 6, ceoLabel.width + 8, 14, 3)
+    .stroke({ width: 1, color: blendColor(ceoTheme.accent, 0xffffff, 0.2), alpha: 0.8 });
+  ceoLabel.position.set(12, 8);
+  ceoLayer.addChild(ceoLabelBg);
+  ceoLayer.addChild(ceoLabel);
+  drawBunting(
+    ceoLayer,
+    148,
+    11,
+    Math.max(120, OFFICE_W - 300),
+    blendColor(ceoTheme.accent, 0xffffff, 0.2),
+    blendColor(ceoTheme.wall, ceoTheme.accent, 0.45),
+    0.7,
+  );
+
+  const cdx = 50;
+  const cdy = 28;
+  const cdg = new Graphics();
+  const deskEdge = isDark ? 0x3a2a18 : 0xb8925c;
+  const deskTop = isDark ? 0x4a3828 : 0xd0a870;
+  const monitorFrame = isDark ? 0x1a1a2a : 0x2a2a3a;
+  const monitorScreen = isDark ? 0x2255aa : 0x4488cc;
+  const namePlate = isDark ? 0x5a4820 : 0xe8c060;
+  cdg.roundRect(cdx, cdy, 64, 34, 3).fill(deskEdge);
+  cdg.roundRect(cdx + 1, cdy + 1, 62, 32, 2).fill(deskTop);
+  cdg.roundRect(cdx + 19, cdy + 2, 26, 16, 2).fill(monitorFrame);
+  cdg.roundRect(cdx + 20.5, cdy + 3.5, 23, 12, 1).fill(monitorScreen);
+  cdg.roundRect(cdx + 22, cdy + 24, 20, 7, 2).fill(namePlate);
+  ceoLayer.addChild(cdg);
+  const ceoPlateText = new Text({
+    text: "CEO",
+    style: new TextStyle({ fontSize: 5, fill: 0x000000, fontWeight: "bold", fontFamily: "monospace" }),
+  });
+  ceoPlateText.anchor.set(0.5, 0.5);
+  ceoPlateText.position.set(cdx + 32, cdy + 27.5);
+  ceoLayer.addChild(ceoPlateText);
+  drawChair(ceoLayer, cdx + 32, cdy + 46, 0xd4a860);
+
+  const mtW = 220;
+  const mtH = 28;
+  const mtX = Math.floor((OFFICE_W - mtW) / 2);
+  const mtY = 48;
+  const mt = new Graphics();
+  const tableEdge = isDark ? 0x2a2018 : 0xb89060;
+  const tableTop = isDark ? 0x382818 : 0xd0a878;
+  const tableInlay = isDark ? 0x4a3828 : 0xf7e4c0;
+  mt.roundRect(mtX, mtY, mtW, mtH, 12).fill(tableEdge);
+  mt.roundRect(mtX + 3, mtY + 3, mtW - 6, mtH - 6, 10).fill(tableTop);
+  mt.roundRect(mtX + 64, mtY + 8, 92, 12, 5).fill({ color: tableInlay, alpha: isDark ? 0.3 : 0.45 });
+  if (activeMeetingTaskId && onOpenActiveMeetingMinutes) {
+    mt.eventMode = "static";
+    mt.cursor = "pointer";
+    mt.on("pointerdown", () => {
+      if (!activeMeetingTaskId) return;
+      onOpenActiveMeetingMinutes(activeMeetingTaskId);
+    });
+  }
+  ceoLayer.addChild(mt);
+
+  const meetingSeatX = [mtX + 40, mtX + 110, mtX + 180];
+  for (const sx of meetingSeatX) {
+    drawChair(ceoLayer, sx, mtY - 4, 0xc4a070);
+    drawChair(ceoLayer, sx, mtY + mtH + 10, 0xc4a070);
+  }
+
+  const meetingLabel = new Text({
+    text: pickLocale(activeLocale, LOCALE_TEXT.collabTable),
+    style: new TextStyle({
+      fontSize: 7,
+      fill: 0x7a5c2a,
+      fontWeight: "bold",
+      fontFamily: "monospace",
+      letterSpacing: 1,
+    }),
+  });
+  meetingLabel.anchor.set(0.5, 0.5);
+  meetingLabel.position.set(mtX + mtW / 2, mtY + mtH / 2);
+  ceoLayer.addChild(meetingLabel);
+
+  ceoMeetingSeatsRef.current = [
+    { x: meetingSeatX[0], y: mtY + 2 },
+    { x: meetingSeatX[1], y: mtY + 2 },
+    { x: meetingSeatX[2], y: mtY + 2 },
+    { x: meetingSeatX[0], y: mtY + mtH + 20 },
+    { x: meetingSeatX[1], y: mtY + mtH + 20 },
+    { x: meetingSeatX[2], y: mtY + mtH + 20 },
+  ];
+
+  deliveriesRef.current = deliveriesRef.current.filter((delivery) => !delivery.sprite.destroyed);
+  for (const delivery of deliveriesRef.current) {
+    if (!delivery.holdAtSeat || typeof delivery.meetingSeatIndex !== "number") continue;
+    const seat = ceoMeetingSeatsRef.current[delivery.meetingSeatIndex % ceoMeetingSeatsRef.current.length];
+    if (!seat) continue;
+    delivery.toX = seat.x;
+    delivery.toY = seat.y;
+    if (delivery.arrived) {
+      delivery.sprite.position.set(seat.x, seat.y);
+    } else {
+      delivery.fromX = delivery.sprite.position.x;
+      delivery.fromY = delivery.sprite.position.y;
+      delivery.progress = 0;
+    }
+  }
+
+  drawPictureFrame(ceoLayer, 14, 14);
+  wallClocksRef.current.push(drawWallClock(ceoLayer, OFFICE_W - 30, 18));
+
+  const workingCount = agents.filter((agent) => agent.status === "working").length;
+  const doneCount = tasks.filter((task) => task.status === "done").length;
+  const inProgress = tasks.filter((task) => task.status === "in_progress").length;
+  const stats = [
+    {
+      icon: "🤖",
+      label: pickLocale(activeLocale, LOCALE_TEXT.statsEmployees),
+      val: formatPeopleCount(agents.length, activeLocale),
+    },
+    {
+      icon: "⚡",
+      label: pickLocale(activeLocale, LOCALE_TEXT.statsWorking),
+      val: formatPeopleCount(workingCount, activeLocale),
+    },
+    {
+      icon: "📋",
+      label: pickLocale(activeLocale, LOCALE_TEXT.statsProgress),
+      val: formatTaskCount(inProgress, activeLocale),
+    },
+    {
+      icon: "✅",
+      label: pickLocale(activeLocale, LOCALE_TEXT.statsDone),
+      val: `${doneCount}/${tasks.length}`,
+    },
+  ];
+  stats.forEach((stat, index) => {
+    const sx = OFFICE_W - 340 + index * 82;
+    const sy = 12;
+    const statCard = new Graphics();
+    statCard.roundRect(sx, sy, 74, 26, 4).fill({ color: 0xfff4d8, alpha: 0.85 });
+    statCard.roundRect(sx, sy, 74, 26, 4).stroke({ width: 1, color: 0xe8c870, alpha: 0.5 });
+    ceoLayer.addChild(statCard);
+    const iconText = new Text({ text: stat.icon, style: new TextStyle({ fontSize: 10 }) });
+    iconText.position.set(sx + 4, sy + 4);
+    ceoLayer.addChild(iconText);
+    ceoLayer.addChild(
+      Object.assign(
+        new Text({
+          text: stat.label,
+          style: new TextStyle({ fontSize: 7, fill: 0x8b7040, fontFamily: "monospace" }),
+        }),
+        { x: sx + 18, y: sy + 2 },
+      ),
+    );
+    ceoLayer.addChild(
+      Object.assign(
+        new Text({
+          text: stat.val,
+          style: new TextStyle({ fontSize: 10, fill: 0x5a4020, fontWeight: "bold", fontFamily: "monospace" }),
+        }),
+        { x: sx + 18, y: sy + 13 },
+      ),
+    );
+  });
+
+  const hint = new Text({
+    text: pickLocale(activeLocale, LOCALE_TEXT.hint),
+    style: new TextStyle({
+      fontSize: 10,
+      fontWeight: "bold",
+      fill: 0x8b7040,
+      fontFamily: "monospace",
+    }),
+  });
+  hint.anchor.set(1, 1);
+  hint.position.set(OFFICE_W - 16, CEO_ZONE_H - 8);
+  ceoLayer.addChild(hint);
+  if (activeMeetingTaskId) {
+    const meetingHint = new Text({
+      text: pickLocale(activeLocale, LOCALE_TEXT.meetingTableHint),
+      style: new TextStyle({
+        fontSize: 12,
+        fill: 0x8b6b30,
+        fontWeight: "bold",
+        fontFamily: "system-ui, sans-serif",
+      }),
+    });
+    meetingHint.anchor.set(1, 1);
+    meetingHint.position.set(hint.position.x - hint.width - 18, hint.position.y);
+    ceoLayer.addChild(meetingHint);
+  }
+
+  drawAmbientGlow(ceoLayer, OFFICE_W / 2, CEO_ZONE_H / 2, OFFICE_W * 0.35, ceoTheme.accent, 0.08);
+  drawPlant(ceoLayer, 18, 62, 0);
+  drawPlant(ceoLayer, OFFICE_W - 22, 62, 2);
+  drawWaterCooler(ceoLayer, 28, 30);
+
+  ceoLayer.addChild(ceoLabelBg);
+  ceoLayer.addChild(ceoLabel);
+  app.stage.addChild(ceoLayer);
+
+  const hallY = CEO_ZONE_H;
+  const hallG = new Graphics();
+  const hallBase = isDark ? 0x252535 : 0xe8dcc8;
+  const hallTile1 = isDark ? 0x2d2d40 : 0xf0e4d0;
+  const hallTile2 = isDark ? 0x1f1f30 : 0xe8dcc8;
+  const hallDash = isDark ? 0x3a3858 : 0xc8b898;
+  const hallTrim = isDark ? 0x3a3858 : 0xd4c4a8;
+  const hallGlow = isDark ? 0x3355bb : 0xfff8e0;
+  hallG.rect(4, hallY, OFFICE_W - 8, HALLWAY_H).fill(hallBase);
+  drawBandGradient(hallG, 4, hallY, OFFICE_W - 8, HALLWAY_H, hallTile1, hallTile2, 5, 0.38);
+  for (let dx = 4; dx < OFFICE_W - 4; dx += TILE * 2) {
+    hallG.rect(dx, hallY, TILE * 2, HALLWAY_H).fill({ color: hallTile1, alpha: 0.5 });
+    hallG.rect(dx + TILE * 2, hallY, TILE * 2, HALLWAY_H).fill({ color: hallTile2, alpha: 0.3 });
+  }
+  for (let dx = 20; dx < OFFICE_W - 20; dx += 16) {
+    hallG.rect(dx, hallY + HALLWAY_H / 2, 6, 1).fill({ color: hallDash, alpha: 0.4 });
+  }
+  hallG.rect(4, hallY, OFFICE_W - 8, 1.5).fill({ color: hallTrim, alpha: 0.5 });
+  hallG.rect(4, hallY + HALLWAY_H - 1.5, OFFICE_W - 8, 1.5).fill({ color: hallTrim, alpha: 0.5 });
+  hallG
+    .ellipse(OFFICE_W / 2, hallY + HALLWAY_H / 2 + 1, Math.max(120, OFFICE_W * 0.28), 6)
+    .fill({ color: hallGlow, alpha: isDark ? 0.06 : 0.08 });
+
+  const hall2Y = breakRoomY - HALLWAY_H;
+  hallG.rect(4, hall2Y, OFFICE_W - 8, HALLWAY_H).fill(hallBase);
+  drawBandGradient(hallG, 4, hall2Y, OFFICE_W - 8, HALLWAY_H, hallTile1, hallTile2, 5, 0.38);
+  for (let dx = 4; dx < OFFICE_W - 4; dx += TILE * 2) {
+    hallG.rect(dx, hall2Y, TILE * 2, HALLWAY_H).fill({ color: hallTile1, alpha: 0.5 });
+    hallG.rect(dx + TILE * 2, hall2Y, TILE * 2, HALLWAY_H).fill({ color: hallTile2, alpha: 0.3 });
+  }
+  for (let dx = 20; dx < OFFICE_W - 20; dx += 16) {
+    hallG.rect(dx, hall2Y + HALLWAY_H / 2, 6, 1).fill({ color: hallDash, alpha: 0.4 });
+  }
+  hallG.rect(4, hall2Y, OFFICE_W - 8, 1.5).fill({ color: hallTrim, alpha: 0.5 });
+  hallG.rect(4, hall2Y + HALLWAY_H - 1.5, OFFICE_W - 8, 1.5).fill({ color: hallTrim, alpha: 0.5 });
+  hallG
+    .ellipse(OFFICE_W / 2, hall2Y + HALLWAY_H / 2 + 1, Math.max(120, OFFICE_W * 0.28), 6)
+    .fill({ color: hallGlow, alpha: isDark ? 0.06 : 0.08 });
+
+  app.stage.addChild(hallG);
+  drawPlant(app.stage as Container, 30, hallY + HALLWAY_H - 6, 2);
+  drawPlant(app.stage as Container, OFFICE_W - 30, hallY + HALLWAY_H - 6, 1);
+}
+

package/ui/src/components/visual-office/office-view/buildScene-department-agent.ts

@@ -0,0 +1,242 @@
+import type { MutableRefObject } from "react";
+import { AnimatedSprite, Container, Graphics, Sprite, Text, TextStyle, type Texture } from "pixi.js";
+import type { Agent, SubAgent, Task } from "../types";
+import type { AnimItem, CallbackSnapshot, SubCloneAnimItem } from "./buildScene-types";
+import {
+  DESK_W,
+  MAX_VISIBLE_SUB_CLONES_PER_AGENT,
+  SUB_CLONE_FIREWORK_INTERVAL,
+  TARGET_CHAR_H,
+  type SubCloneBurstParticle,
+  emitSubCloneFireworkBurst,
+  emitSubCloneSmokeBurst,
+} from "./model";
+import { hashStr } from "./drawing-core";
+import { drawDesk } from "./drawing-furniture-a";
+
+interface RenderDeskAgentAndSubClonesParams {
+  room: Container;
+  textures: Record<string, Texture>;
+  spriteMap: Map<string, number>;
+  agent: Agent;
+  tasks: Task[];
+  subAgents: SubAgent[];
+  ax: number;
+  deskY: number;
+  charFeetY: number;
+  isWorking: boolean;
+  isOffline: boolean;
+  cbRef: MutableRefObject<CallbackSnapshot>;
+  animItemsRef: MutableRefObject<AnimItem[]>;
+  subCloneAnimItemsRef: MutableRefObject<SubCloneAnimItem[]>;
+  subCloneBurstParticlesRef: MutableRefObject<SubCloneBurstParticle[]>;
+  addedWorkingSubIds: Set<string>;
+  nextSubSnapshot: Map<string, { parentAgentId: string; x: number; y: number }>;
+  themeAccent: number;
+}
+
+export function renderDeskAgentAndSubClones({
+  room,
+  textures,
+  spriteMap,
+  agent,
+  tasks,
+  subAgents,
+  ax,
+  deskY,
+  charFeetY,
+  isWorking,
+  isOffline,
+  cbRef,
+  animItemsRef,
+  subCloneAnimItemsRef,
+  subCloneBurstParticlesRef,
+  addedWorkingSubIds,
+  nextSubSnapshot,
+  themeAccent,
+}: RenderDeskAgentAndSubClonesParams): void {
+  const spriteNum = spriteMap.get(agent.id) ?? (hashStr(agent.id) % 13) + 1;
+  const charContainer = new Container();
+  charContainer.position.set(ax, charFeetY);
+  charContainer.eventMode = "static";
+  charContainer.cursor = "pointer";
+  charContainer.on("pointerdown", () => cbRef.current.onSelectAgent(agent));
+
+  const frames: Texture[] = [];
+  for (let frame = 1; frame <= 3; frame++) {
+    const key = `${spriteNum}-D-${frame}`;
+    if (textures[key]) frames.push(textures[key]);
+  }
+
+  if (frames.length > 0) {
+    const animSprite = new AnimatedSprite(frames);
+    animSprite.anchor.set(0.5, 1);
+    const scale = TARGET_CHAR_H / animSprite.texture.height;
+    animSprite.scale.set(scale);
+    animSprite.gotoAndStop(0);
+    if (isOffline) {
+      animSprite.alpha = 0.3;
+      animSprite.tint = 0x888899;
+    }
+    charContainer.addChild(animSprite);
+  } else {
+    const fallback = new Text({ text: agent.avatar_emoji || "🤖", style: new TextStyle({ fontSize: 24 }) });
+    fallback.anchor.set(0.5, 1);
+    charContainer.addChild(fallback);
+  }
+  room.addChild(charContainer);
+
+  const deskG = drawDesk(room, ax - DESK_W / 2, deskY, isWorking);
+
+  const bedW = TARGET_CHAR_H + 20;
+  const bedH = 36;
+  const bedX = ax - bedW / 2;
+  const bedY = deskY;
+
+  const bedG = new Graphics();
+  bedG.roundRect(bedX, bedY, bedW, bedH, 4).fill(0x5c3d2e);
+  bedG.roundRect(bedX + 1, bedY + 1, bedW - 2, bedH - 2, 3).fill(0x8b6347);
+  bedG.roundRect(bedX + 3, bedY + 3, bedW - 6, bedH - 6, 2).fill(0xf0e6d3);
+  bedG.roundRect(bedX - 2, bedY - 1, 6, bedH + 2, 3).fill(0x4a2e1a);
+  bedG.ellipse(bedX + 16, bedY + bedH / 2, 9, 7).fill(0xfff8ee);
+  bedG.ellipse(bedX + 16, bedY + bedH / 2, 9, 7).stroke({ width: 0.5, color: 0xd8d0c0 });
+  bedG.ellipse(bedX + 16, bedY + bedH / 2, 5, 4).fill({ color: 0xf0e8d8, alpha: 0.6 });
+  bedG.visible = false;
+  room.addChild(bedG);
+
+  const blanketG = new Graphics();
+  const blanketX = bedX + bedW * 0.35;
+  const blanketW = bedW * 0.62;
+  blanketG.roundRect(blanketX, bedY + 2, blanketW, bedH - 4, 3).fill(0xc8d8be);
+  blanketG.roundRect(blanketX, bedY + 2, blanketW, bedH - 4, 3).stroke({ width: 0.5, color: 0xa8b898 });
+  blanketG
+    .moveTo(blanketX + 2, bedY + bedH / 2)
+    .lineTo(blanketX + blanketW - 4, bedY + bedH / 2)
+    .stroke({ width: 0.4, color: 0xb0c0a0, alpha: 0.5 });
+  blanketG.visible = false;
+  room.addChild(blanketG);
+
+  const particles = new Container();
+  room.addChild(particles);
+  animItemsRef.current.push({
+    sprite: charContainer,
+    status: agent.status,
+    baseX: ax,
+    baseY: charContainer.position.y,
+    particles,
+    agentId: agent.id,
+    cliProvider: agent.cli_provider,
+    deskG,
+    bedG,
+    blanketG,
+  });
+
+  const activeTask = tasks.find((task) => task.assigned_agent_id === agent.id && task.status === "in_progress");
+  if (activeTask) {
+    const txt = activeTask.title.length > 16 ? `${activeTask.title.slice(0, 16)}...` : activeTask.title;
+    const bubbleText = new Text({
+      text: `💬 ${txt}`,
+      style: new TextStyle({
+        fontSize: 6.5,
+        fill: 0x333333,
+        fontFamily: "system-ui, sans-serif",
+        wordWrap: true,
+        wordWrapWidth: 85,
+      }),
+    });
+    bubbleText.anchor.set(0.5, 1);
+    const bw = Math.min(bubbleText.width + 8, 100);
+    const bh = bubbleText.height + 6;
+    const bubbleTop = charFeetY - TARGET_CHAR_H - bh - 6;
+    const bubbleG = new Graphics();
+    bubbleG.roundRect(ax - bw / 2, bubbleTop, bw, bh, 4).fill(0xffffff);
+    bubbleG.roundRect(ax - bw / 2, bubbleTop, bw, bh, 4).stroke({ width: 1.2, color: themeAccent, alpha: 0.4 });
+    bubbleG
+      .moveTo(ax - 3, bubbleTop + bh)
+      .lineTo(ax, bubbleTop + bh + 4)
+      .lineTo(ax + 3, bubbleTop + bh)
+      .fill(0xffffff);
+    room.addChild(bubbleG);
+    bubbleText.position.set(ax, bubbleTop + bh - 3);
+    room.addChild(bubbleText);
+  }
+
+  const workingSubs = subAgents.filter((sub) => sub.parentAgentId === agent.id && sub.status === "working");
+  if (isWorking && workingSubs.length > 0) {
+    const visibleSubs = workingSubs.slice(0, MAX_VISIBLE_SUB_CLONES_PER_AGENT);
+    visibleSubs.forEach((sub, index) => {
+      const sx = ax - 14 + index * 12;
+      const sy = charFeetY - 3.5 + (index % 2) * 0.9;
+      const cloneContainer = new Container();
+      cloneContainer.position.set(sx, sy);
+
+      const aura = new Graphics();
+      aura.ellipse(0, 2.0, 8.1, 2.7).fill({ color: 0x1f2937, alpha: 0.12 });
+      cloneContainer.addChild(aura);
+
+      const cloneSpriteNum = (hashStr(`${sub.id}:clone`) % 13) + 1;
+      const cloneFrames: Texture[] = [];
+      for (let frame = 1; frame <= 3; frame++) {
+        const key = `${cloneSpriteNum}-D-${frame}`;
+        if (textures[key]) cloneFrames.push(textures[key]);
+      }
+      const baseTexture = cloneFrames[0];
+      if (!baseTexture) return;
+      const baseScale = (TARGET_CHAR_H / baseTexture.height) * 0.76;
+
+      const cloneVisual = cloneFrames.length > 1 ? new AnimatedSprite(cloneFrames) : new Sprite(baseTexture);
+      cloneVisual.anchor.set(0.5, 1);
+      cloneVisual.scale.set(baseScale);
+      cloneVisual.tint = 0xffffff;
+      cloneVisual.alpha = 0.97;
+      if (cloneVisual instanceof AnimatedSprite) cloneVisual.gotoAndStop((index + 1) % cloneFrames.length);
+      cloneContainer.addChild(cloneVisual);
+
+      const charIdx = room.children.indexOf(charContainer);
+      if (charIdx >= 0) room.addChildAt(cloneContainer, charIdx);
+      else room.addChild(cloneContainer);
+
+      nextSubSnapshot.set(sub.id, { parentAgentId: agent.id, x: sx, y: sy });
+      if (addedWorkingSubIds.has(sub.id)) {
+        emitSubCloneSmokeBurst(room, subCloneBurstParticlesRef.current, sx, sy, "spawn");
+        emitSubCloneFireworkBurst(room, subCloneBurstParticlesRef.current, sx, sy - 24);
+        addedWorkingSubIds.delete(sub.id);
+      }
+
+      subCloneAnimItemsRef.current.push({
+        container: cloneContainer,
+        aura,
+        cloneVisual,
+        animated: cloneVisual instanceof AnimatedSprite ? cloneVisual : undefined,
+        frameCount: cloneFrames.length,
+        baseScale,
+        baseX: sx,
+        baseY: sy,
+        phase: (hashStr(sub.id) % 360) / 57.2958 + index * 0.3,
+        fireworkOffset: Math.abs(hashStr(`${sub.id}:firework`)) % SUB_CLONE_FIREWORK_INTERVAL,
+      });
+    });
+
+    if (workingSubs.length > MAX_VISIBLE_SUB_CLONES_PER_AGENT) {
+      const remain = workingSubs.length - MAX_VISIBLE_SUB_CLONES_PER_AGENT;
+      const moreBg = new Graphics();
+      moreBg.roundRect(ax + 18, deskY - 18, 18, 10, 2).fill({ color: 0x101722, alpha: 0.82 });
+      room.addChild(moreBg);
+      const moreTxt = new Text({
+        text: `+${remain}`,
+        style: new TextStyle({ fontSize: 6.5, fill: 0xe2e8f8, fontWeight: "bold", fontFamily: "monospace" }),
+      });
+      moreTxt.anchor.set(0.5, 0.5);
+      moreTxt.position.set(ax + 27, deskY - 13);
+      room.addChild(moreTxt);
+    }
+  }
+
+  if (isOffline) {
+    const zzz = new Text({ text: "💤", style: new TextStyle({ fontSize: 12 }) });
+    zzz.anchor.set(0.5, 0.5);
+    zzz.position.set(ax + 20, charFeetY - TARGET_CHAR_H / 2);
+    room.addChild(zzz);
+  }
+}
+