corporateai 0.0.1

package/ui/src/pages/RunTranscriptUxLab.tsx

@@ -0,0 +1,334 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn, formatDateTime } from "../lib/utils";
+import { Identity } from "../components/Identity";
+import { StatusBadge } from "../components/StatusBadge";
+import { RunTranscriptView, type TranscriptDensity, type TranscriptMode } from "../components/transcript/RunTranscriptView";
+import { runTranscriptFixtureEntries, runTranscriptFixtureMeta } from "../fixtures/runTranscriptFixtures";
+import { ExternalLink, FlaskConical, LayoutPanelLeft, MonitorCog, PanelsTopLeft, RadioTower } from "lucide-react";
+
+type SurfaceId = "detail" | "live" | "dashboard";
+
+const surfaceOptions: Array<{
+  id: SurfaceId;
+  label: string;
+  eyebrow: string;
+  description: string;
+  icon: typeof LayoutPanelLeft;
+}> = [
+  {
+    id: "detail",
+    label: "Run Detail",
+    eyebrow: "Full transcript",
+    description: "The long-form run page with the `Nice | Raw` toggle and the most inspectable transcript view.",
+    icon: MonitorCog,
+  },
+  {
+    id: "live",
+    label: "Issue Widget",
+    eyebrow: "Live stream",
+    description: "The issue-detail live run widget, optimized for following an active run without leaving the task page.",
+    icon: RadioTower,
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard Card",
+    eyebrow: "Dense card",
+    description: "The active-agents dashboard card, tuned for compact scanning while keeping the same transcript language.",
+    icon: PanelsTopLeft,
+  },
+];
+
+function previewEntries(surface: SurfaceId) {
+  if (surface === "dashboard") {
+    return runTranscriptFixtureEntries.slice(-9);
+  }
+  if (surface === "live") {
+    return runTranscriptFixtureEntries.slice(-14);
+  }
+  return runTranscriptFixtureEntries;
+}
+
+function RunDetailPreview({
+  mode,
+  streaming,
+  density,
+}: {
+  mode: TranscriptMode;
+  streaming: boolean;
+  density: TranscriptDensity;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-border/70 bg-background/80 shadow-[0_24px_60px_rgba(15,23,42,0.08)]">
+      <div className="border-b border-border/60 bg-background/90 px-5 py-4">
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge variant="outline" className="uppercase tracking-[0.18em] text-[10px]">
+            Run Detail
+          </Badge>
+          <StatusBadge status={streaming ? "running" : "succeeded"} />
+          <span className="text-xs text-muted-foreground">
+            {formatDateTime(runTranscriptFixtureMeta.startedAt)}
+          </span>
+        </div>
+        <div className="mt-2 text-sm font-medium">
+          Transcript ({runTranscriptFixtureEntries.length})
+        </div>
+      </div>
+      <div className="max-h-[720px] overflow-y-auto bg-[radial-gradient(circle_at_top_left,rgba(8,145,178,0.08),transparent_36%),radial-gradient(circle_at_bottom_right,rgba(245,158,11,0.10),transparent_28%)] p-5">
+        <RunTranscriptView
+          entries={runTranscriptFixtureEntries}
+          mode={mode}
+          density={density}
+          streaming={streaming}
+        />
+      </div>
+    </div>
+  );
+}
+
+function LiveWidgetPreview({
+  streaming,
+  mode,
+  density,
+}: {
+  streaming: boolean;
+  mode: TranscriptMode;
+  density: TranscriptDensity;
+}) {
+  return (
+    <div className="overflow-hidden rounded-xl border border-cyan-500/25 bg-background/85 shadow-[0_20px_50px_rgba(6,182,212,0.10)]">
+      <div className="border-b border-border/60 bg-cyan-500/[0.05] px-5 py-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.2em] text-cyan-700 dark:text-cyan-300">
+          Live Runs
+        </div>
+        <div className="mt-1 text-xs text-muted-foreground">
+          Compact live transcript stream for the issue detail page.
+        </div>
+      </div>
+      <div className="px-5 py-4">
+        <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0">
+            <Identity name={runTranscriptFixtureMeta.agentName} size="sm" />
+            <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              <span className="rounded-full border border-border/70 bg-background/70 px-2 py-1 font-mono">
+                {runTranscriptFixtureMeta.sourceRunId.slice(0, 8)}
+              </span>
+              <StatusBadge status={streaming ? "running" : "succeeded"} />
+              <span>{formatDateTime(runTranscriptFixtureMeta.startedAt)}</span>
+            </div>
+          </div>
+          <span className="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/70 px-2.5 py-1 text-[11px] text-muted-foreground">
+            Open run
+            <ExternalLink className="h-3 w-3" />
+          </span>
+        </div>
+        <div className="max-h-[460px] overflow-y-auto pr-1">
+          <RunTranscriptView
+            entries={previewEntries("live")}
+            mode={mode}
+            density={density}
+            limit={density === "compact" ? 10 : 12}
+            streaming={streaming}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function DashboardPreview({
+  streaming,
+  mode,
+  density,
+}: {
+  streaming: boolean;
+  mode: TranscriptMode;
+  density: TranscriptDensity;
+}) {
+  return (
+    <div className="max-w-md">
+      <div className={cn(
+        "flex h-[320px] flex-col overflow-hidden rounded-xl border shadow-[0_20px_40px_rgba(15,23,42,0.10)]",
+        streaming
+          ? "border-cyan-500/25 bg-cyan-500/[0.04]"
+          : "border-border bg-background/75",
+      )}>
+        <div className="border-b border-border/60 px-4 py-4">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <span className={cn(
+                  "inline-flex h-2.5 w-2.5 rounded-full",
+                  streaming ? "bg-cyan-500 shadow-[0_0_0_6px_rgba(34,211,238,0.12)]" : "bg-muted-foreground/35",
+                )} />
+                <Identity name={runTranscriptFixtureMeta.agentName} size="sm" />
+              </div>
+              <div className="mt-2 text-[11px] text-muted-foreground">
+                {streaming ? "Live now" : "Finished 2m ago"}
+              </div>
+            </div>
+            <span className="rounded-full border border-border/70 bg-background/70 px-2 py-1 text-[10px] text-muted-foreground">
+              <ExternalLink className="h-2.5 w-2.5" />
+            </span>
+          </div>
+          <div className="mt-3 rounded-lg border border-border/60 bg-background/60 px-3 py-2 text-xs text-cyan-700 dark:text-cyan-300">
+            {runTranscriptFixtureMeta.issueIdentifier} - {runTranscriptFixtureMeta.issueTitle}
+          </div>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">
+          <RunTranscriptView
+            entries={previewEntries("dashboard")}
+            mode={mode}
+            density={density}
+            limit={density === "compact" ? 6 : 8}
+            streaming={streaming}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function RunTranscriptUxLab() {
+  const [selectedSurface, setSelectedSurface] = useState<SurfaceId>("detail");
+  const [detailMode, setDetailMode] = useState<TranscriptMode>("nice");
+  const [streaming, setStreaming] = useState(true);
+  const [density, setDensity] = useState<TranscriptDensity>("comfortable");
+
+  const selected = surfaceOptions.find((option) => option.id === selectedSurface) ?? surfaceOptions[0];
+
+  return (
+    <div className="space-y-6">
+      <div className="overflow-hidden rounded-2xl border border-border/70 bg-[linear-gradient(135deg,rgba(8,145,178,0.08),transparent_28%),linear-gradient(180deg,rgba(245,158,11,0.08),transparent_40%),var(--background)] shadow-[0_28px_70px_rgba(15,23,42,0.10)]">
+        <div className="grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)]">
+          <aside className="border-b border-border/60 bg-background/75 p-5 lg:border-b-0 lg:border-r">
+            <div className="mb-5">
+              <div className="inline-flex items-center gap-2 rounded-full border border-cyan-500/25 bg-cyan-500/[0.08] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.24em] text-cyan-700 dark:text-cyan-300">
+                <FlaskConical className="h-3.5 w-3.5" />
+                UX Lab
+              </div>
+              <h1 className="mt-4 text-2xl font-semibold tracking-tight">Run Transcript Fixtures</h1>
+              <p className="mt-2 text-sm text-muted-foreground">
+                Built from a real Corporate development run, then sanitized so no secrets, local paths, or environment details survive into the fixture.
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              {surfaceOptions.map((option) => {
+                const Icon = option.icon;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => setSelectedSurface(option.id)}
+                    className={cn(
+                      "w-full rounded-xl border px-4 py-3 text-left transition-all",
+                      selectedSurface === option.id
+                        ? "border-cyan-500/35 bg-cyan-500/[0.10] shadow-[0_12px_24px_rgba(6,182,212,0.12)]"
+                        : "border-border/70 bg-background/70 hover:border-cyan-500/20 hover:bg-cyan-500/[0.04]",
+                    )}
+                  >
+                    <div className="flex items-start gap-3">
+                      <span className="rounded-lg border border-current/15 p-2 text-cyan-700 dark:text-cyan-300">
+                        <Icon className="h-4 w-4" />
+                      </span>
+                      <span className="min-w-0">
+                        <span className="block text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                          {option.eyebrow}
+                        </span>
+                        <span className="mt-1 block text-sm font-medium">{option.label}</span>
+                        <span className="mt-1 block text-xs text-muted-foreground">
+                          {option.description}
+                        </span>
+                      </span>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </aside>
+
+          <main className="min-w-0 p-5">
+            <div className="mb-5 flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
+              <div>
+                <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+                  {selected.eyebrow}
+                </div>
+                <h2 className="mt-1 text-2xl font-semibold">{selected.label}</h2>
+                <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
+                  {selected.description}
+                </p>
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="outline" className="rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.18em]">
+                  Source run {runTranscriptFixtureMeta.sourceRunId.slice(0, 8)}
+                </Badge>
+                <Badge variant="outline" className="rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.18em]">
+                  {runTranscriptFixtureMeta.issueIdentifier}
+                </Badge>
+              </div>
+            </div>
+
+            <div className="mb-5 flex flex-wrap items-center gap-2">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+                Controls
+              </span>
+              <div className="inline-flex rounded-full border border-border/70 bg-background/80 p-1">
+                {(["nice", "raw"] as const).map((mode) => (
+                  <button
+                    key={mode}
+                    type="button"
+                    className={cn(
+                      "rounded-full px-3 py-1 text-xs font-medium capitalize transition-colors",
+                      detailMode === mode ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground",
+                    )}
+                    onClick={() => setDetailMode(mode)}
+                  >
+                    {mode}
+                  </button>
+                ))}
+              </div>
+              <div className="inline-flex rounded-full border border-border/70 bg-background/80 p-1">
+                {(["comfortable", "compact"] as const).map((nextDensity) => (
+                  <button
+                    key={nextDensity}
+                    type="button"
+                    className={cn(
+                      "rounded-full px-3 py-1 text-xs font-medium capitalize transition-colors",
+                      density === nextDensity ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground",
+                    )}
+                    onClick={() => setDensity(nextDensity)}
+                  >
+                    {nextDensity}
+                  </button>
+                ))}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                className="rounded-full"
+                onClick={() => setStreaming((value) => !value)}
+              >
+                {streaming ? "Show settled state" : "Show streaming state"}
+              </Button>
+            </div>
+
+            {selectedSurface === "detail" ? (
+              <div className={cn(density === "compact" && "max-w-5xl")}>
+                <RunDetailPreview mode={detailMode} streaming={streaming} density={density} />
+              </div>
+            ) : selectedSurface === "live" ? (
+              <div className={cn(density === "compact" && "max-w-4xl")}>
+                <LiveWidgetPreview streaming={streaming} mode={detailMode} density={density} />
+              </div>
+            ) : (
+              <DashboardPreview streaming={streaming} mode={detailMode} density={density} />
+            )}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/src/pages/VisualOffice.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Building2 } from "lucide-react";
+import { agentsApi } from "../api/agents";
+import { issuesApi } from "../api/issues";
+import { EmptyState } from "../components/EmptyState";
+import { PageSkeleton } from "../components/PageSkeleton";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { useCompany } from "../context/CompanyContext";
+import { queryKeys } from "../lib/queryKeys";
+import OfficeViewExact from "../components/visual-office/OfficeViewExact";
+import type { Agent, Department, Task } from "../components/visual-office/types";
+
+const DEPARTMENTS: Department[] = [
+  {
+    id: "planning",
+    name: "Planning",
+    name_ko: "기획",
+    name_ja: "企画",
+    name_zh: "规划",
+    icon: "🧭",
+    color: "#72A2D7",
+    description: "Planning department",
+    prompt: null,
+    sort_order: 1,
+    created_at: 0,
+  },
+  {
+    id: "dev",
+    name: "Development",
+    name_ko: "개발",
+    name_ja: "開発",
+    name_zh: "开发",
+    icon: "💻",
+    color: "#6BBA9F",
+    description: "Development department",
+    prompt: null,
+    sort_order: 2,
+    created_at: 0,
+  },
+  {
+    id: "design",
+    name: "Design",
+    name_ko: "디자인",
+    name_ja: "デザイン",
+    name_zh: "设计",
+    icon: "🎨",
+    color: "#B38AD8",
+    description: "Design department",
+    prompt: null,
+    sort_order: 3,
+    created_at: 0,
+  },
+  {
+    id: "qa",
+    name: "QA",
+    name_ko: "QA",
+    name_ja: "QA",
+    name_zh: "测试",
+    icon: "🧪",
+    color: "#D5847D",
+    description: "QA department",
+    prompt: null,
+    sort_order: 4,
+    created_at: 0,
+  },
+  {
+    id: "ops",
+    name: "Operations",
+    name_ko: "운영",
+    name_ja: "運用",
+    name_zh: "运维",
+    icon: "⚙️",
+    color: "#79B99B",
+    description: "Operations department",
+    prompt: null,
+    sort_order: 5,
+    created_at: 0,
+  },
+  {
+    id: "strategy",
+    name: "Strategy",
+    name_ko: "전략",
+    name_ja: "戦略",
+    name_zh: "战略",
+    icon: "📈",
+    color: "#D8A15E",
+    description: "Strategy department",
+    prompt: null,
+    sort_order: 6,
+    created_at: 0,
+  },
+];
+
+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 normalizeRole(raw: unknown): Agent["role"] {
+  const value = String(raw ?? "").toLowerCase();
+  if (value.includes("lead")) return "team_leader";
+  if (value.includes("senior")) return "senior";
+  if (value.includes("intern")) return "intern";
+  return "junior";
+}
+
+function normalizeStatus(raw: unknown, seed: number): Agent["status"] {
+  const value = String(raw ?? "").toLowerCase();
+  if (value === "error" || value === "terminated" || value === "offline") return "offline";
+  if (value === "running" || value === "active" || value === "working") return "working";
+  if (value === "paused") return "idle";
+  if (seed % 9 === 0) return "break";
+  return "idle";
+}
+
+function normalizeTaskStatus(raw: unknown): Task["status"] {
+  const value = String(raw ?? "").toLowerCase();
+  if (value === "done" || value === "resolved" || value === "closed" || value === "canceled") return "done";
+  if (value === "review" || value === "blocked") return "review";
+  if (value === "planned" || value === "backlog") return "planned";
+  return "in_progress";
+}
+
+export function VisualOffice() {
+  const { selectedCompanyId } = useCompany();
+  const { setBreadcrumbs } = useBreadcrumbs();
+
+  useEffect(() => {
+    setBreadcrumbs([{ label: "Visual Office" }]);
+  }, [setBreadcrumbs]);
+
+  const { data: agentsRaw, isLoading: agentsLoading } = useQuery({
+    queryKey: queryKeys.agents.list(selectedCompanyId!),
+    queryFn: () => agentsApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const { data: issuesRaw, isLoading: issuesLoading } = useQuery({
+    queryKey: queryKeys.issues.list(selectedCompanyId!),
+    queryFn: () => issuesApi.list(selectedCompanyId!),
+    enabled: !!selectedCompanyId,
+  });
+
+  const isLoading = agentsLoading || issuesLoading;
+
+  const officeAgents = useMemo(() => {
+    const rows = (agentsRaw ?? []) as unknown as Array<Record<string, unknown>>;
+    return rows.map((row, index) => {
+      const id = String(row.id ?? `agent-${index + 1}`);
+      const seed = hashString(id);
+      const dept = DEPARTMENTS[seed % DEPARTMENTS.length];
+      return {
+        id,
+        name: String(row.name ?? `Agent ${index + 1}`),
+        name_ko: String(row.name ?? `에이전트 ${index + 1}`),
+        name_ja: String(row.name ?? `エージェント ${index + 1}`),
+        name_zh: String(row.name ?? `智能体 ${index + 1}`),
+        department_id: dept.id,
+        role: normalizeRole(row.role),
+        cli_provider: "codex",
+        avatar_emoji: String(row.avatarEmoji ?? row.avatar_emoji ?? "🤖"),
+        sprite_number:
+          typeof row.sprite_number === "number"
+            ? row.sprite_number
+            : typeof row.spriteNumber === "number"
+              ? row.spriteNumber
+              : null,
+        personality: null,
+        status: normalizeStatus(row.status, seed),
+        current_task_id: null,
+        stats_tasks_done: 0,
+        stats_xp: 0,
+        created_at: Date.now(),
+      } satisfies Agent;
+    });
+  }, [agentsRaw]);
+
+  const agentById = useMemo(
+    () => new Map(officeAgents.map((agent: Agent) => [agent.id, agent] as const)),
+    [officeAgents],
+  );
+
+  const officeTasks = useMemo(() => {
+    const rows = (issuesRaw ?? []) as unknown as Array<Record<string, unknown>>;
+    return rows.map((row, index) => {
+      const id = String(row.id ?? `issue-${index + 1}`);
+      const assignedAgentId =
+        (typeof row.assigneeAgentId === "string" && row.assigneeAgentId) ||
+        (typeof row.assignedAgentId === "string" && row.assignedAgentId) ||
+        null;
+      const assignedAgent = assignedAgentId ? agentById.get(assignedAgentId) : undefined;
+      return {
+        id,
+        title: String(row.title ?? row.summary ?? `Task ${index + 1}`),
+        description: typeof row.description === "string" ? row.description : null,
+        department_id: assignedAgent?.department_id ?? DEPARTMENTS[index % DEPARTMENTS.length].id,
+        assigned_agent_id: assignedAgentId,
+        assigned_agent: assignedAgent,
+        status: normalizeTaskStatus(row.status),
+        priority: 2,
+        task_type: "general",
+        project_path: null,
+        result: null,
+        started_at: null,
+        completed_at: null,
+        created_at: Date.now(),
+        updated_at: Date.now(),
+      } satisfies Task;
+    });
+  }, [issuesRaw, agentById]);
+
+  if (!selectedCompanyId) {
+    return <EmptyState icon={Building2} message="Select a company to open the visual office." />;
+  }
+
+  if (isLoading) {
+    return <PageSkeleton variant="dashboard" />;
+  }
+
+  return (
+    <OfficeViewExact
+      departments={DEPARTMENTS}
+      agents={officeAgents}
+      tasks={officeTasks}
+      subAgents={[]}
+      meetingPresence={[]}
+      activeMeetingTaskId={null}
+      unreadAgentIds={new Set()}
+      crossDeptDeliveries={[]}
+      ceoOfficeCalls={[]}
+      themeHighlightTargetId={null}
+      onCrossDeptDeliveryProcessed={() => {}}
+      onCeoOfficeCallProcessed={() => {}}
+      onOpenActiveMeetingMinutes={() => {}}
+      onSelectAgent={() => {}}
+      onSelectDepartment={() => {}}
+    />
+  );
+}

package/ui/src/plugins/bridge-init.ts

@@ -0,0 +1,69 @@
+/**
+ * Plugin bridge initialization.
+ *
+ * Registers the host's React instances and bridge hook implementations
+ * on a global object so that the plugin module loader can inject them
+ * into plugin UI bundles at load time.
+ *
+ * Call `initPluginBridge()` once during app startup (in `main.tsx`), before
+ * any plugin UI modules are loaded.
+ *
+ * @see PLUGIN_SPEC.md §19.0.1 — Plugin UI SDK
+ * @see PLUGIN_SPEC.md §19.0.2 — Bundle Isolation
+ */
+
+import {
+  usePluginData,
+  usePluginAction,
+  useHostContext,
+  usePluginStream,
+  usePluginToast,
+} from "./bridge.js";
+
+// ---------------------------------------------------------------------------
+// Global bridge registry
+// ---------------------------------------------------------------------------
+
+/**
+ * The global bridge registry shape.
+ *
+ * This is placed on `globalThis.__paperclipPluginBridge__` and consumed by
+ * the plugin module loader to provide implementations for external imports.
+ */
+export interface PluginBridgeRegistry {
+  react: unknown;
+  reactDom: unknown;
+  sdkUi: Record<string, unknown>;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __paperclipPluginBridge__: PluginBridgeRegistry | undefined;
+}
+
+/**
+ * Initialize the plugin bridge global registry.
+ *
+ * Registers the host's React, ReactDOM, and SDK UI bridge implementations
+ * on `globalThis.__paperclipPluginBridge__` so the plugin module loader
+ * can provide them to plugin bundles.
+ *
+ * @param react - The host's React module
+ * @param reactDom - The host's ReactDOM module
+ */
+export function initPluginBridge(
+  react: typeof import("react"),
+  reactDom: typeof import("react-dom"),
+): void {
+  globalThis.__paperclipPluginBridge__ = {
+    react,
+    reactDom,
+    sdkUi: {
+      usePluginData,
+      usePluginAction,
+      useHostContext,
+      usePluginStream,
+      usePluginToast,
+    },
+  };
+}