corporateai 0.0.1

package/ui/src/components/visual-office/office-view/useOfficePixiRuntime.ts

@@ -0,0 +1,282 @@
+import { useEffect, type MutableRefObject } from "react";
+import { Application, Assets, TextureStyle, type Texture } from "pixi.js";
+import type { Agent, Department, SubAgent, Task } from "../types";
+import { buildSpriteMap } from "../AgentAvatar";
+import { type Delivery, MIN_OFFICE_W, findScrollContainer } from "./model";
+import { runOfficeTickerStep, type OfficeTickerContext } from "./officeTicker";
+
+function hashString(input: string): number {
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    hash = (hash * 31 + input.charCodeAt(i)) >>> 0;
+  }
+  return hash;
+}
+
+function pickRandomCeoSpriteNumber(spriteNums: Set<number>, agentsData: Agent[]): number {
+  const candidates = [...spriteNums].filter((num) => Number.isFinite(num) && num > 0).sort((a, b) => a - b);
+  if (candidates.length === 0) return 1;
+
+  // Stable pseudo-random pick based on the current company agent roster.
+  const seedSource = agentsData
+    .map((agent) => `${agent.id}:${agent.sprite_number ?? ""}:${agent.name ?? ""}`)
+    .sort()
+    .join("|");
+  const seed = hashString(seedSource || `${Date.now()}`);
+  return candidates[seed % candidates.length] ?? 1;
+}
+
+interface UseOfficePixiRuntimeParams {
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  appRef: MutableRefObject<Application | null>;
+  texturesRef: MutableRefObject<Record<string, Texture>>;
+  destroyedRef: MutableRefObject<boolean>;
+  initIdRef: MutableRefObject<number>;
+  initDoneRef: MutableRefObject<boolean>;
+  officeWRef: MutableRefObject<number>;
+  scrollHostXRef: MutableRefObject<HTMLElement | null>;
+  scrollHostYRef: MutableRefObject<HTMLElement | null>;
+  deliveriesRef: MutableRefObject<Delivery[]>;
+  dataRef: MutableRefObject<{ agents: Agent[] }>;
+  buildScene: () => void;
+  followCeoInView: () => void;
+  triggerDepartmentInteract: () => void;
+  allowManualCeoControl: boolean;
+  keysRef: MutableRefObject<Record<string, boolean>>;
+  tickerContext: OfficeTickerContext;
+  departments: Department[];
+  agents: Agent[];
+  tasks: Task[];
+  subAgents: SubAgent[];
+  unreadAgentIds?: Set<string>;
+  language: string;
+  activeMeetingTaskId?: string | null;
+  customDeptThemes?: Record<string, { floor1: number; floor2: number; wall: number; accent: number }>;
+  currentTheme: string;
+}
+
+export function 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,
+}: UseOfficePixiRuntimeParams): void {
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+
+    destroyedRef.current = false;
+    const currentInitId = ++initIdRef.current;
+    scrollHostXRef.current = findScrollContainer(element, "x");
+    scrollHostYRef.current = findScrollContainer(element, "y");
+
+    async function init() {
+      if (!element) return;
+      TextureStyle.defaultOptions.scaleMode = "nearest";
+
+      officeWRef.current = Math.max(MIN_OFFICE_W, element.clientWidth);
+
+      const app = new Application();
+      await app.init({
+        width: officeWRef.current,
+        height: 600,
+        backgroundAlpha: 0,
+        antialias: false,
+        resolution: Math.min(window.devicePixelRatio || 1, 2),
+        autoDensity: true,
+      });
+
+      if (initIdRef.current !== currentInitId) {
+        try {
+          app.destroy();
+        } catch {}
+        return;
+      }
+
+      appRef.current = app;
+      const canvas = app.canvas as HTMLCanvasElement;
+      canvas.style.imageRendering = "pixelated";
+      element.innerHTML = "";
+      element.appendChild(canvas);
+
+      const spriteMap = buildSpriteMap(dataRef.current.agents);
+      const textures: Record<string, Texture> = {};
+      const loads: Promise<void>[] = [];
+      const spriteNums = new Set<number>();
+
+      for (let i = 1; i <= 13; i++) spriteNums.add(i);
+      for (const num of spriteMap.values()) spriteNums.add(num);
+      const ceoSpriteNum = pickRandomCeoSpriteNumber(spriteNums, dataRef.current.agents);
+
+      for (const spriteNum of spriteNums) {
+        for (const frame of [1, 2, 3]) {
+          const key = `${spriteNum}-D-${frame}`;
+          loads.push(
+            Assets.load<Texture>(`/sprites/${key}.png`)
+              .then((texture) => {
+                textures[key] = texture;
+              })
+              .catch(() => {}),
+          );
+        }
+
+        for (const direction of ["L", "R"]) {
+          const key = `${spriteNum}-${direction}-1`;
+          loads.push(
+            Assets.load<Texture>(`/sprites/${key}.png`)
+              .then((texture) => {
+                textures[key] = texture;
+              })
+              .catch(() => {}),
+          );
+        }
+      }
+
+      await Promise.all(loads);
+
+      textures.ceo = textures[`${ceoSpriteNum}-D-1`] ?? textures["1-D-1"];
+
+      if (initIdRef.current !== currentInitId) {
+        try {
+          app.destroy();
+        } catch {}
+        return;
+      }
+
+      texturesRef.current = textures;
+      buildScene();
+      initDoneRef.current = true;
+      followCeoInView();
+
+      app.ticker.add(() => {
+        if (destroyedRef.current || appRef.current !== app) return;
+        runOfficeTickerStep(tickerContext);
+      });
+    }
+
+    const isInputFocused = () => {
+      const tag = document.activeElement?.tagName;
+      return (
+        tag === "INPUT" ||
+        tag === "TEXTAREA" ||
+        tag === "SELECT" ||
+        (document.activeElement as HTMLElement)?.isContentEditable
+      );
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isInputFocused()) return;
+      if (
+        allowManualCeoControl &&
+        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "KeyW", "KeyA", "KeyS", "KeyD"].includes(event.code)
+      ) {
+        event.preventDefault();
+        keysRef.current[event.code] = true;
+      }
+      if (event.code === "Enter" || event.code === "Space") {
+        event.preventDefault();
+        triggerDepartmentInteract();
+      }
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (isInputFocused()) return;
+      if (!allowManualCeoControl) return;
+      keysRef.current[event.code] = false;
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+
+    init();
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry || !appRef.current || destroyedRef.current || initIdRef.current !== currentInitId) return;
+      const newWidth = Math.max(MIN_OFFICE_W, Math.floor(entry.contentRect.width));
+      if (Math.abs(newWidth - officeWRef.current) > 10) {
+        officeWRef.current = newWidth;
+        buildScene();
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    return () => {
+      destroyedRef.current = true;
+      initIdRef.current++;
+      resizeObserver.disconnect();
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      deliveriesRef.current = [];
+      initDoneRef.current = false;
+      scrollHostXRef.current = null;
+      scrollHostYRef.current = null;
+
+      if (appRef.current) {
+        appRef.current.destroy(true, { children: true });
+        appRef.current = null;
+      }
+    };
+  }, [
+    containerRef,
+    appRef,
+    texturesRef,
+    destroyedRef,
+    initIdRef,
+    initDoneRef,
+    officeWRef,
+    scrollHostXRef,
+    scrollHostYRef,
+    deliveriesRef,
+    dataRef,
+    buildScene,
+    followCeoInView,
+    triggerDepartmentInteract,
+    allowManualCeoControl,
+    keysRef,
+    tickerContext,
+  ]);
+
+  useEffect(() => {
+    if (initDoneRef.current && appRef.current) {
+      buildScene();
+    }
+  }, [
+    departments,
+    agents,
+    tasks,
+    subAgents,
+    unreadAgentIds,
+    language,
+    activeMeetingTaskId,
+    customDeptThemes,
+    currentTheme,
+    buildScene,
+    initDoneRef,
+    appRef,
+  ]);
+}
+

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

@@ -0,0 +1,123 @@
+export interface Department {
+  id: string;
+  name: string;
+  name_ko: string;
+  name_ja?: string | null;
+  name_zh?: string | null;
+  icon: string;
+  color: string;
+  description: string | null;
+  prompt: string | null;
+  sort_order: number;
+  created_at: number;
+  agent_count?: number;
+}
+
+export type AgentRole = "team_leader" | "senior" | "junior" | "intern";
+export type AgentStatus = "idle" | "working" | "break" | "offline";
+export type CliProvider = "claude" | "codex" | "gemini" | "opencode" | "kimi" | "copilot" | "antigravity" | "api";
+export type MeetingReviewDecision = "reviewing" | "approved" | "hold";
+
+export interface Agent {
+  id: string;
+  name: string;
+  name_ko: string;
+  name_ja?: string | null;
+  name_zh?: string | null;
+  department_id: string | null;
+  department?: Department;
+  role: AgentRole;
+  cli_provider: CliProvider;
+  avatar_emoji: string;
+  sprite_number?: number | null;
+  personality: string | null;
+  status: AgentStatus;
+  current_task_id: string | null;
+  stats_tasks_done: number;
+  stats_xp: number;
+  created_at: number;
+}
+
+export interface MeetingPresence {
+  agent_id: string;
+  seat_index: number;
+  phase: "kickoff" | "review";
+  task_id: string | null;
+  decision?: MeetingReviewDecision | null;
+  until: number;
+}
+
+export interface SubAgent {
+  id: string;
+  parentAgentId: string;
+  task: string;
+  status: "working" | "done";
+}
+
+export interface CrossDeptDelivery {
+  id: string;
+  fromAgentId: string;
+  toAgentId: string;
+}
+
+export interface CeoOfficeCall {
+  id: string;
+  fromAgentId: string;
+  seatIndex: number;
+  phase: "kickoff" | "review";
+  action?: "arrive" | "speak" | "dismiss";
+  line?: string;
+  decision?: MeetingReviewDecision;
+  taskId?: string;
+  instant?: boolean;
+  holdUntil?: number;
+}
+
+export type TaskStatus =
+  | "inbox"
+  | "planned"
+  | "collaborating"
+  | "in_progress"
+  | "review"
+  | "done"
+  | "pending"
+  | "cancelled";
+
+export interface Task {
+  id: string;
+  title: string;
+  description: string | null;
+  department_id: string | null;
+  assigned_agent_id: string | null;
+  assigned_agent?: Agent;
+  agent_name?: string | null;
+  agent_name_ko?: string | null;
+  agent_avatar?: string | null;
+  status: TaskStatus;
+  priority: number;
+  task_type: "general" | "development" | "design" | "analysis" | "presentation" | "documentation";
+  project_path: string | null;
+  result: string | null;
+  started_at: number | null;
+  completed_at: number | null;
+  created_at: number;
+  updated_at: number;
+}
+
+export interface CliUsageWindow {
+  utilization: number;
+  resetAt: string;
+}
+
+export interface CliUsageEntry {
+  windows?: CliUsageWindow[];
+}
+
+export interface CliToolStatus {
+  installed: boolean;
+  version: string | null;
+  authenticated: boolean;
+  authHint: string;
+}
+
+export type CliStatusMap = Record<CliProvider, CliToolStatus>;

package/ui/src/context/BreadcrumbContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
+
+export interface Breadcrumb {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbContextValue {
+  breadcrumbs: Breadcrumb[];
+  setBreadcrumbs: (crumbs: Breadcrumb[]) => void;
+}
+
+const BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);
+
+export function BreadcrumbProvider({ children }: { children: ReactNode }) {
+  const [breadcrumbs, setBreadcrumbsState] = useState<Breadcrumb[]>([]);
+
+  const setBreadcrumbs = useCallback((crumbs: Breadcrumb[]) => {
+    setBreadcrumbsState(crumbs);
+  }, []);
+
+  useEffect(() => {
+    if (breadcrumbs.length === 0) {
+      document.title = "Corporate";
+    } else {
+      const parts = [...breadcrumbs].reverse().map((b) => b.label);
+      document.title = `${parts.join(" · ")} · Corporate`;
+    }
+  }, [breadcrumbs]);
+
+  return (
+    <BreadcrumbContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
+      {children}
+    </BreadcrumbContext.Provider>
+  );
+}
+
+export function useBreadcrumbs() {
+  const ctx = useContext(BreadcrumbContext);
+  if (!ctx) {
+    throw new Error("useBreadcrumbs must be used within BreadcrumbProvider");
+  }
+  return ctx;
+}

package/ui/src/context/CompanyContext.tsx

@@ -0,0 +1,151 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { Company } from "@corporateai/shared";
+import { companiesApi } from "../api/companies";
+import { ApiError } from "../api/client";
+import { queryKeys } from "../lib/queryKeys";
+import type { CompanySelectionSource } from "../lib/company-selection";
+type CompanySelectionOptions = { source?: CompanySelectionSource };
+
+interface CompanyContextValue {
+  companies: Company[];
+  selectedCompanyId: string | null;
+  selectedCompany: Company | null;
+  selectionSource: CompanySelectionSource;
+  loading: boolean;
+  error: Error | null;
+  setSelectedCompanyId: (companyId: string, options?: CompanySelectionOptions) => void;
+  reloadCompanies: () => Promise<void>;
+  createCompany: (data: {
+    name: string;
+    description?: string | null;
+    budgetMonthlyCents?: number;
+  }) => Promise<Company>;
+}
+
+const STORAGE_KEY = "paperclip.selectedCompanyId";
+
+const CompanyContext = createContext<CompanyContextValue | null>(null);
+
+export function CompanyProvider({ children }: { children: ReactNode }) {
+  const queryClient = useQueryClient();
+  const [selectionSource, setSelectionSource] = useState<CompanySelectionSource>("bootstrap");
+  const [selectedCompanyId, setSelectedCompanyIdState] = useState<string | null>(() => localStorage.getItem(STORAGE_KEY));
+
+  const { data: companies = [], isLoading, error } = useQuery({
+    queryKey: queryKeys.companies.all,
+    queryFn: async () => {
+      try {
+        return await companiesApi.list();
+      } catch (err) {
+        if (err instanceof ApiError && err.status === 401) {
+          return [];
+        }
+        throw err;
+      }
+    },
+    retry: false,
+  });
+  const sidebarCompanies = useMemo(
+    () => companies.filter((company) => company.status !== "archived"),
+    [companies],
+  );
+
+  // Auto-select first company when list loads
+  useEffect(() => {
+    if (companies.length === 0) return;
+
+    const selectableCompanies = sidebarCompanies.length > 0 ? sidebarCompanies : companies;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && selectableCompanies.some((c) => c.id === stored)) return;
+    if (selectedCompanyId && selectableCompanies.some((c) => c.id === selectedCompanyId)) return;
+
+    const next = selectableCompanies[0]!.id;
+    setSelectedCompanyIdState(next);
+    setSelectionSource("bootstrap");
+    localStorage.setItem(STORAGE_KEY, next);
+  }, [companies, selectedCompanyId, sidebarCompanies]);
+
+  const setSelectedCompanyId = useCallback((companyId: string, options?: CompanySelectionOptions) => {
+    setSelectedCompanyIdState(companyId);
+    setSelectionSource(options?.source ?? "manual");
+    localStorage.setItem(STORAGE_KEY, companyId);
+  }, []);
+
+  const reloadCompanies = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+  }, [queryClient]);
+
+  const createMutation = useMutation({
+    mutationFn: (data: {
+      name: string;
+      description?: string | null;
+      budgetMonthlyCents?: number;
+    }) =>
+      companiesApi.create(data),
+    onSuccess: (company) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+      setSelectedCompanyId(company.id);
+    },
+  });
+
+  const createCompany = useCallback(
+    async (data: {
+      name: string;
+      description?: string | null;
+      budgetMonthlyCents?: number;
+    }) => {
+      return createMutation.mutateAsync(data);
+    },
+    [createMutation],
+  );
+
+  const selectedCompany = useMemo(
+    () => companies.find((company) => company.id === selectedCompanyId) ?? null,
+    [companies, selectedCompanyId],
+  );
+
+  const value = useMemo(
+    () => ({
+      companies,
+      selectedCompanyId,
+      selectedCompany,
+      selectionSource,
+      loading: isLoading,
+      error: error as Error | null,
+      setSelectedCompanyId,
+      reloadCompanies,
+      createCompany,
+    }),
+    [
+      companies,
+      selectedCompanyId,
+      selectedCompany,
+      selectionSource,
+      isLoading,
+      error,
+      setSelectedCompanyId,
+      reloadCompanies,
+      createCompany,
+    ],
+  );
+
+  return <CompanyContext.Provider value={value}>{children}</CompanyContext.Provider>;
+}
+
+export function useCompany() {
+  const ctx = useContext(CompanyContext);
+  if (!ctx) {
+    throw new Error("useCompany must be used within CompanyProvider");
+  }
+  return ctx;
+}
+