corporateai 0.0.1

package/ui/src/components/visual-office/OfficeViewExact.tsx

@@ -0,0 +1,417 @@
+import { useEffect, useRef, useCallback, useState, useMemo } from "react";
+import {
+  type Application,
+  type Container,
+  type Graphics,
+  type Text,
+  type Sprite,
+  type Texture,
+  type AnimatedSprite,
+} from "pixi.js";
+import { useI18n } from "./i18n";
+import { useTheme } from "../../context/ThemeContext";
+import VirtualPadOverlay from "./office-view/VirtualPadOverlay";
+import {
+  type OfficeViewProps,
+  type Delivery,
+  type RoomRect,
+  type WallClockVisual,
+  canScrollOnAxis,
+  findScrollContainer,
+  MIN_OFFICE_W,
+  MOBILE_MOVE_CODES,
+  type MobileMoveDirection,
+  type SubCloneBurstParticle,
+} from "./office-view/model";
+import { type SupportedLocale } from "./office-view/themes-locale";
+import {
+  useMeetingPresenceSync,
+  useCrossDeptDeliveryAnimations,
+  useCeoOfficeCallAnimations,
+} from "./office-view/useOfficeDeliveryEffects";
+import { useOfficePixiRuntime } from "./office-view/useOfficePixiRuntime";
+import { buildOfficeScene } from "./office-view/buildScene";
+
+type ThemeMode = "light" | "dark";
+
+export default function OfficeView({
+  departments,
+  agents,
+  tasks,
+  subAgents,
+  meetingPresence,
+  activeMeetingTaskId,
+  unreadAgentIds,
+  crossDeptDeliveries,
+  onCrossDeptDeliveryProcessed,
+  ceoOfficeCalls,
+  onCeoOfficeCallProcessed,
+  onOpenActiveMeetingMinutes,
+  customDeptThemes,
+  themeHighlightTargetId,
+  allowManualCeoControl = false,
+  onSelectAgent,
+  onSelectDepartment,
+}: OfficeViewProps) {
+  const { language, t } = useI18n();
+  const { theme: currentTheme } = useTheme();
+  const themeRef = useRef<ThemeMode>(currentTheme);
+  themeRef.current = currentTheme;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const appRef = useRef<Application | null>(null);
+  const texturesRef = useRef<Record<string, Texture>>({});
+  const destroyedRef = useRef(false);
+  const initIdRef = useRef(0);
+  const initDoneRef = useRef(false);
+  const [sceneRevision, setSceneRevision] = useState(0);
+
+  // Animation state refs
+  const tickRef = useRef(0);
+  const keysRef = useRef<Record<string, boolean>>({});
+  const ceoPosRef = useRef({ x: 180, y: 60 });
+  const ceoSpriteRef = useRef<Container | null>(null);
+  const crownRef = useRef<Text | null>(null);
+  const highlightRef = useRef<Graphics | null>(null);
+  const animItemsRef = useRef<
+    Array<{
+      sprite: Container;
+      status: string;
+      baseX: number;
+      baseY: number;
+      particles: Container;
+      agentId?: string;
+      cliProvider?: string;
+      deskG?: Graphics;
+      bedG?: Graphics;
+      blanketG?: Graphics;
+    }>
+  >([]);
+  const roomRectsRef = useRef<RoomRect[]>([]);
+  const deliveriesRef = useRef<Delivery[]>([]);
+  const deliveryLayerRef = useRef<Container | null>(null);
+  const prevAssignRef = useRef<Set<string>>(new Set());
+  const agentPosRef = useRef<Map<string, { x: number; y: number }>>(new Map());
+  const processedCrossDeptRef = useRef<Set<string>>(new Set());
+  const processedCeoOfficeRef = useRef<Set<string>>(new Set());
+  const spriteMapRef = useRef<Map<string, number>>(new Map());
+  const ceoMeetingSeatsRef = useRef<Array<{ x: number; y: number }>>([]);
+  const totalHRef = useRef(600);
+  const officeWRef = useRef(MIN_OFFICE_W);
+  const ceoOfficeRectRef = useRef<{ x: number; y: number; w: number; h: number } | null>(null);
+  const breakRoomRectRef = useRef<{ x: number; y: number; w: number; h: number } | null>(null);
+  const breakAnimItemsRef = useRef<
+    Array<{
+      sprite: Container;
+      baseX: number;
+      baseY: number;
+    }>
+  >([]);
+  const subCloneAnimItemsRef = useRef<
+    Array<{
+      container: Container;
+      aura: Graphics;
+      cloneVisual: Sprite;
+      animated?: AnimatedSprite;
+      frameCount: number;
+      baseScale: number;
+      baseX: number;
+      baseY: number;
+      phase: number;
+      fireworkOffset: number;
+    }>
+  >([]);
+  const subCloneBurstParticlesRef = useRef<SubCloneBurstParticle[]>([]);
+  const subCloneSnapshotRef = useRef<Map<string, { parentAgentId: string; x: number; y: number }>>(new Map());
+  const breakSteamParticlesRef = useRef<Container | null>(null);
+  const breakBubblesRef = useRef<Container[]>([]);
+  const wallClocksRef = useRef<WallClockVisual[]>([]);
+  const wallClockSecondRef = useRef(-1);
+  const localeRef = useRef<SupportedLocale>(language);
+  localeRef.current = language;
+  const themeHighlightTargetIdRef = useRef<string | null>(themeHighlightTargetId ?? null);
+  themeHighlightTargetIdRef.current = themeHighlightTargetId ?? null;
+
+  // Latest data via refs (avoids stale closures)
+  const dataRef = useRef({ departments, agents, tasks, subAgents, unreadAgentIds, meetingPresence, customDeptThemes });
+  dataRef.current = { departments, agents, tasks, subAgents, unreadAgentIds, meetingPresence, customDeptThemes };
+  const cbRef = useRef({ onSelectAgent, onSelectDepartment });
+  cbRef.current = { onSelectAgent, onSelectDepartment };
+  const activeMeetingTaskIdRef = useRef<string | null>(activeMeetingTaskId ?? null);
+  activeMeetingTaskIdRef.current = activeMeetingTaskId ?? null;
+  const meetingMinutesOpenRef = useRef<typeof onOpenActiveMeetingMinutes>(onOpenActiveMeetingMinutes);
+  meetingMinutesOpenRef.current = onOpenActiveMeetingMinutes;
+  const [showVirtualPad, setShowVirtualPad] = useState(false);
+  const showVirtualPadRef = useRef(showVirtualPad);
+  showVirtualPadRef.current = showVirtualPad;
+  const scrollHostXRef = useRef<HTMLElement | null>(null);
+  const scrollHostYRef = useRef<HTMLElement | null>(null);
+
+  const triggerDepartmentInteract = useCallback(() => {
+    const cx = ceoPosRef.current.x;
+    const cy = ceoPosRef.current.y;
+    for (const r of roomRectsRef.current) {
+      if (cx >= r.x && cx <= r.x + r.w && cy >= r.y - 10 && cy <= r.y + r.h) {
+        cbRef.current.onSelectDepartment(r.dept);
+        break;
+      }
+    }
+  }, []);
+
+  const setMoveDirectionPressed = useCallback((direction: MobileMoveDirection, pressed: boolean) => {
+    for (const code of MOBILE_MOVE_CODES[direction]) {
+      keysRef.current[code] = pressed;
+    }
+  }, []);
+
+  const clearVirtualMovement = useCallback(() => {
+    (Object.keys(MOBILE_MOVE_CODES) as MobileMoveDirection[]).forEach((direction) => {
+      setMoveDirectionPressed(direction, false);
+    });
+  }, [setMoveDirectionPressed]);
+
+  const followCeoInView = useCallback(() => {
+    if (!showVirtualPadRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const scaleX = officeWRef.current > 0 ? container.clientWidth / officeWRef.current : 1;
+    const scaleY = totalHRef.current > 0 ? container.clientHeight / totalHRef.current : scaleX;
+
+    let hostX = scrollHostXRef.current;
+    if (!hostX || !canScrollOnAxis(hostX, "x")) {
+      hostX = findScrollContainer(container, "x") ?? (document.scrollingElement as HTMLElement | null);
+      scrollHostXRef.current = hostX;
+    }
+
+    let hostY = scrollHostYRef.current;
+    if (!hostY || !canScrollOnAxis(hostY, "y")) {
+      hostY = findScrollContainer(container, "y") ?? (document.scrollingElement as HTMLElement | null);
+      scrollHostYRef.current = hostY;
+    }
+
+    let nextLeft: number | null = null;
+    let movedX = false;
+    if (hostX) {
+      const hostRectX = hostX.getBoundingClientRect();
+      const ceoInHostX = containerRect.left - hostRectX.left + ceoPosRef.current.x * scaleX;
+      const ceoContentX = hostX.scrollLeft + ceoInHostX;
+      const targetLeft = ceoContentX - hostX.clientWidth * 0.45;
+      const maxLeft = Math.max(0, hostX.scrollWidth - hostX.clientWidth);
+      nextLeft = Math.max(0, Math.min(maxLeft, targetLeft));
+      movedX = Math.abs(hostX.scrollLeft - nextLeft) > 1;
+    }
+
+    let nextTop: number | null = null;
+    let movedY = false;
+    if (hostY) {
+      const hostRectY = hostY.getBoundingClientRect();
+      const ceoInHostY = containerRect.top - hostRectY.top + ceoPosRef.current.y * scaleY;
+      const ceoContentY = hostY.scrollTop + ceoInHostY;
+      const targetTop = ceoContentY - hostY.clientHeight * 0.45;
+      const maxTop = Math.max(0, hostY.scrollHeight - hostY.clientHeight);
+      nextTop = Math.max(0, Math.min(maxTop, targetTop));
+      movedY = Math.abs(hostY.scrollTop - nextTop) > 1;
+    }
+
+    if (hostX && hostY && hostX === hostY) {
+      if (movedX || movedY) {
+        hostX.scrollTo({
+          left: movedX && nextLeft !== null ? nextLeft : hostX.scrollLeft,
+          top: movedY && nextTop !== null ? nextTop : hostX.scrollTop,
+          behavior: "auto",
+        });
+      }
+      return;
+    }
+
+    if (hostX && movedX && nextLeft !== null) {
+      hostX.scrollTo({ left: nextLeft, top: hostX.scrollTop, behavior: "auto" });
+    }
+    if (hostY && movedY && nextTop !== null) {
+      hostY.scrollTo({ left: hostY.scrollLeft, top: nextTop, behavior: "auto" });
+    }
+  }, []);
+
+  useEffect(() => {
+    const updateVirtualPadVisibility = () => {
+      const isCoarsePointer = window.matchMedia("(pointer: coarse)").matches;
+      const isNarrowViewport = window.innerWidth <= 1024;
+      setShowVirtualPad(isCoarsePointer || isNarrowViewport);
+    };
+    updateVirtualPadVisibility();
+    window.addEventListener("resize", updateVirtualPadVisibility);
+    return () => window.removeEventListener("resize", updateVirtualPadVisibility);
+  }, []);
+
+  useEffect(() => {
+    if (!showVirtualPad) clearVirtualMovement();
+  }, [showVirtualPad, clearVirtualMovement]);
+
+  useEffect(
+    () => () => {
+      clearVirtualMovement();
+    },
+    [clearVirtualMovement],
+  );
+
+  /* ── BUILD SCENE (no app destroy, just stage clear + rebuild) ── */
+  const buildScene = useCallback(() => {
+    buildOfficeScene({
+      appRef,
+      texturesRef,
+      dataRef,
+      cbRef,
+      activeMeetingTaskIdRef,
+      meetingMinutesOpenRef,
+      localeRef,
+      themeRef,
+      animItemsRef,
+      roomRectsRef,
+      deliveriesRef,
+      deliveryLayerRef,
+      prevAssignRef,
+      agentPosRef,
+      spriteMapRef,
+      ceoMeetingSeatsRef,
+      totalHRef,
+      officeWRef,
+      ceoPosRef,
+      ceoSpriteRef,
+      crownRef,
+      highlightRef,
+      ceoOfficeRectRef,
+      breakRoomRectRef,
+      breakAnimItemsRef,
+      subCloneAnimItemsRef,
+      subCloneBurstParticlesRef,
+      subCloneSnapshotRef,
+      breakSteamParticlesRef,
+      breakBubblesRef,
+      wallClocksRef,
+      wallClockSecondRef,
+      setSceneRevision,
+    });
+  }, []);
+
+  const cliUsageRef = useRef<Record<string, { windows?: Array<{ utilization: number }> }> | null>(null);
+
+  const tickerContext = useMemo(
+    () => ({
+      tickRef,
+      keysRef,
+      allowManualCeoControl,
+      ceoPosRef,
+      ceoSpriteRef,
+      crownRef,
+      highlightRef,
+      animItemsRef,
+      cliUsageRef,
+      roomRectsRef,
+      deliveriesRef,
+      breakAnimItemsRef,
+      subCloneAnimItemsRef,
+      subCloneBurstParticlesRef,
+      breakSteamParticlesRef,
+      breakBubblesRef,
+      wallClocksRef,
+      wallClockSecondRef,
+      themeHighlightTargetIdRef,
+      ceoOfficeRectRef,
+      breakRoomRectRef,
+      officeWRef,
+      totalHRef,
+      dataRef,
+      followCeoInView,
+    }),
+    [followCeoInView, cliUsageRef, allowManualCeoControl],
+  );
+
+  useOfficePixiRuntime({
+    containerRef,
+    appRef,
+    texturesRef,
+    destroyedRef,
+    initIdRef,
+    initDoneRef,
+    officeWRef,
+    scrollHostXRef,
+    scrollHostYRef,
+    deliveriesRef,
+    dataRef,
+    buildScene,
+    followCeoInView,
+    triggerDepartmentInteract,
+    allowManualCeoControl,
+    keysRef,
+    tickerContext,
+    departments,
+    agents,
+    tasks,
+    subAgents,
+    unreadAgentIds,
+    language,
+    activeMeetingTaskId,
+    customDeptThemes,
+    currentTheme,
+  });
+
+  useMeetingPresenceSync({
+    meetingPresence,
+    language,
+    sceneRevision,
+    deliveryLayerRef,
+    texturesRef,
+    ceoMeetingSeatsRef,
+    deliveriesRef,
+    spriteMapRef,
+  });
+
+  useCrossDeptDeliveryAnimations({
+    crossDeptDeliveries,
+    language,
+    onCrossDeptDeliveryProcessed,
+    deliveryLayerRef,
+    texturesRef,
+    agentPosRef,
+    spriteMapRef,
+    processedCrossDeptRef,
+    deliveriesRef,
+  });
+
+  useCeoOfficeCallAnimations({
+    ceoOfficeCalls,
+    agents,
+    language,
+    onCeoOfficeCallProcessed,
+    deliveryLayerRef,
+    texturesRef,
+    ceoMeetingSeatsRef,
+    deliveriesRef,
+    spriteMapRef,
+    agentPosRef,
+    processedCeoOfficeRef,
+  });
+
+  return (
+    <div className="w-full overflow-auto" style={{ minHeight: "100%" }}>
+      <div className="relative mx-auto w-full">
+        <div
+          ref={containerRef}
+          className="mx-auto"
+          style={{ maxWidth: "100%", lineHeight: 0, outline: "none" }}
+          tabIndex={0}
+        />
+
+        <VirtualPadOverlay
+          showVirtualPad={showVirtualPad}
+          showMoveControls={allowManualCeoControl}
+          t={t}
+          onInteract={triggerDepartmentInteract}
+          onSetMoveDirectionPressed={setMoveDirectionPressed}
+        />
+      </div>
+    </div>
+  );
+}
+

package/ui/src/components/visual-office/i18n.ts

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+
+export type UiLanguage = "ko" | "en" | "ja" | "zh";
+
+type TranslationInput = Record<UiLanguage, string> | string;
+
+function parseLanguage(value?: string | null): UiLanguage | null {
+  const code = (value ?? "").toLowerCase().replace("_", "-");
+  if (code === "ko" || code.startsWith("ko-")) return "ko";
+  if (code === "en" || code.startsWith("en-")) return "en";
+  if (code === "ja" || code.startsWith("ja-")) return "ja";
+  if (code === "zh" || code.startsWith("zh-")) return "zh";
+  return null;
+}
+
+function detectLanguage(): UiLanguage {
+  if (typeof window === "undefined") return "en";
+  const candidates = [...(window.navigator.languages ?? []), window.navigator.language];
+  for (const lang of candidates) {
+    const parsed = parseLanguage(lang);
+    if (parsed) return parsed;
+  }
+  return "en";
+}
+
+export function localeName(
+  locale: UiLanguage | string,
+  obj: { name: string; name_ko?: string | null; name_ja?: string | null; name_zh?: string | null },
+): string {
+  const lang = (typeof locale === "string" ? locale : "en").slice(0, 2);
+  if (lang === "ko") return obj.name_ko || obj.name;
+  if (lang === "ja") return obj.name_ja || obj.name;
+  if (lang === "zh") return obj.name_zh || obj.name;
+  return obj.name;
+}
+
+export function useI18n(): {
+  language: UiLanguage;
+  locale: string;
+  t: (text: TranslationInput) => string;
+} {
+  const language = detectLanguage();
+
+  return useMemo(
+    () => ({
+      language,
+      locale: language === "ko" ? "ko-KR" : language === "ja" ? "ja-JP" : language === "zh" ? "zh-CN" : "en-US",
+      t: (text: TranslationInput) => (typeof text === "string" ? text : text[language] ?? text.en),
+    }),
+    [language],
+  );
+}