corporateai 0.0.1

package/ui/src/context/PanelContext.tsx

@@ -0,0 +1,73 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+const STORAGE_KEY = "paperclip:panel-visible";
+
+interface PanelContextValue {
+  panelContent: ReactNode | null;
+  panelVisible: boolean;
+  openPanel: (content: ReactNode) => void;
+  closePanel: () => void;
+  setPanelVisible: (visible: boolean) => void;
+  togglePanelVisible: () => void;
+}
+
+const PanelContext = createContext<PanelContextValue | null>(null);
+
+function readPreference(): boolean {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw === null ? true : raw === "true";
+  } catch {
+    return true;
+  }
+}
+
+function writePreference(visible: boolean) {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(visible));
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
+export function PanelProvider({ children }: { children: ReactNode }) {
+  const [panelContent, setPanelContent] = useState<ReactNode | null>(null);
+  const [panelVisible, setPanelVisibleState] = useState(readPreference);
+
+  const openPanel = useCallback((content: ReactNode) => {
+    setPanelContent(content);
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setPanelContent(null);
+  }, []);
+
+  const setPanelVisible = useCallback((visible: boolean) => {
+    setPanelVisibleState(visible);
+    writePreference(visible);
+  }, []);
+
+  const togglePanelVisible = useCallback(() => {
+    setPanelVisibleState((prev) => {
+      const next = !prev;
+      writePreference(next);
+      return next;
+    });
+  }, []);
+
+  return (
+    <PanelContext.Provider
+      value={{ panelContent, panelVisible, openPanel, closePanel, setPanelVisible, togglePanelVisible }}
+    >
+      {children}
+    </PanelContext.Provider>
+  );
+}
+
+export function usePanel() {
+  const ctx = useContext(PanelContext);
+  if (!ctx) {
+    throw new Error("usePanel must be used within PanelProvider");
+  }
+  return ctx;
+}

package/ui/src/context/SidebarContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, useCallback, useContext, useState, useEffect, type ReactNode } from "react";
+
+interface SidebarContextValue {
+  sidebarOpen: boolean;
+  setSidebarOpen: (open: boolean) => void;
+  toggleSidebar: () => void;
+  isMobile: boolean;
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+const MOBILE_BREAKPOINT = 768;
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < MOBILE_BREAKPOINT);
+  const [sidebarOpen, setSidebarOpen] = useState(() => window.innerWidth >= MOBILE_BREAKPOINT);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = (e: MediaQueryListEvent) => {
+      setIsMobile(e.matches);
+      setSidebarOpen(!e.matches);
+    };
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
+
+  return (
+    <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen, toggleSidebar, isMobile }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error("useSidebar must be used within SidebarProvider");
+  }
+  return ctx;
+}

package/ui/src/context/ThemeContext.tsx

@@ -0,0 +1,83 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const THEME_STORAGE_KEY = "paperclip.theme";
+const DARK_THEME_COLOR = "#18181b";
+const LIGHT_THEME_COLOR = "#ffffff";
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+function resolveThemeFromDocument(): Theme {
+  if (typeof document === "undefined") return "dark";
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+
+function applyTheme(theme: Theme) {
+  if (typeof document === "undefined") return;
+  const isDark = theme === "dark";
+  const root = document.documentElement;
+  root.classList.toggle("dark", isDark);
+  root.style.colorScheme = isDark ? "dark" : "light";
+  const themeColorMeta = document.querySelector('meta[name="theme-color"]');
+  if (themeColorMeta instanceof HTMLMetaElement) {
+    themeColorMeta.setAttribute("content", isDark ? DARK_THEME_COLOR : LIGHT_THEME_COLOR);
+  }
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => resolveThemeFromDocument());
+
+  const setTheme = useCallback((nextTheme: Theme) => {
+    setThemeState(nextTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((current) => (current === "dark" ? "light" : "dark"));
+  }, []);
+
+  useEffect(() => {
+    applyTheme(theme);
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch {
+      // Ignore local storage write failures in restricted environments.
+    }
+  }, [theme]);
+
+  const value = useMemo(
+    () => ({
+      theme,
+      setTheme,
+      toggleTheme,
+    }),
+    [theme, setTheme, toggleTheme],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}

package/ui/src/context/ToastContext.tsx

@@ -0,0 +1,172 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type ToastTone = "info" | "success" | "warn" | "error";
+
+export interface ToastAction {
+  label: string;
+  href: string;
+}
+
+export interface ToastInput {
+  id?: string;
+  dedupeKey?: string;
+  title: string;
+  body?: string;
+  tone?: ToastTone;
+  ttlMs?: number;
+  action?: ToastAction;
+}
+
+export interface ToastItem {
+  id: string;
+  title: string;
+  body?: string;
+  tone: ToastTone;
+  ttlMs: number;
+  action?: ToastAction;
+  createdAt: number;
+}
+
+interface ToastContextValue {
+  toasts: ToastItem[];
+  pushToast: (input: ToastInput) => string | null;
+  dismissToast: (id: string) => void;
+  clearToasts: () => void;
+}
+
+const DEFAULT_TTL_BY_TONE: Record<ToastTone, number> = {
+  info: 4000,
+  success: 3500,
+  warn: 8000,
+  error: 10000,
+};
+const MIN_TTL_MS = 1500;
+const MAX_TTL_MS = 15000;
+const MAX_TOASTS = 5;
+const DEDUPE_WINDOW_MS = 3500;
+const DEDUPE_MAX_AGE_MS = 20000;
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+function normalizeTtl(value: number | undefined, tone: ToastTone) {
+  const fallback = DEFAULT_TTL_BY_TONE[tone];
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  return Math.max(MIN_TTL_MS, Math.min(MAX_TTL_MS, Math.floor(value)));
+}
+
+function generateToastId() {
+  return `toast_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const timersRef = useRef(new Map<string, number>());
+  const dedupeRef = useRef(new Map<string, number>());
+
+  const clearTimer = useCallback((id: string) => {
+    const handle = timersRef.current.get(id);
+    if (handle !== undefined) {
+      window.clearTimeout(handle);
+      timersRef.current.delete(id);
+    }
+  }, []);
+
+  const dismissToast = useCallback(
+    (id: string) => {
+      clearTimer(id);
+      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    },
+    [clearTimer],
+  );
+
+  const clearToasts = useCallback(() => {
+    for (const handle of timersRef.current.values()) {
+      window.clearTimeout(handle);
+    }
+    timersRef.current.clear();
+    setToasts([]);
+  }, []);
+
+  const pushToast = useCallback(
+    (input: ToastInput) => {
+      const now = Date.now();
+      const tone = input.tone ?? "info";
+      const ttlMs = normalizeTtl(input.ttlMs, tone);
+      const dedupeKey =
+        input.dedupeKey ?? input.id ?? `${tone}|${input.title}|${input.body ?? ""}|${input.action?.href ?? ""}`;
+
+      for (const [key, ts] of dedupeRef.current.entries()) {
+        if (now - ts > DEDUPE_MAX_AGE_MS) {
+          dedupeRef.current.delete(key);
+        }
+      }
+
+      const lastSeen = dedupeRef.current.get(dedupeKey);
+      if (lastSeen && now - lastSeen < DEDUPE_WINDOW_MS) {
+        return null;
+      }
+      dedupeRef.current.set(dedupeKey, now);
+
+      const id = input.id ?? generateToastId();
+      clearTimer(id);
+
+      setToasts((prev) => {
+        const nextToast: ToastItem = {
+          id,
+          title: input.title,
+          body: input.body,
+          tone,
+          ttlMs,
+          action: input.action,
+          createdAt: now,
+        };
+
+        const withoutCurrent = prev.filter((toast) => toast.id !== id);
+        return [nextToast, ...withoutCurrent].slice(0, MAX_TOASTS);
+      });
+
+      const timeout = window.setTimeout(() => {
+        dismissToast(id);
+      }, ttlMs);
+      timersRef.current.set(id, timeout);
+      return id;
+    },
+    [clearTimer, dismissToast],
+  );
+
+  useEffect(() => () => {
+    for (const handle of timersRef.current.values()) {
+      window.clearTimeout(handle);
+    }
+    timersRef.current.clear();
+  }, []);
+
+  const value = useMemo<ToastContextValue>(
+    () => ({
+      toasts,
+      pushToast,
+      dismissToast,
+      clearToasts,
+    }),
+    [toasts, pushToast, dismissToast, clearToasts],
+  );
+
+  return <ToastContext.Provider value={value}>{children}</ToastContext.Provider>;
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}

package/ui/src/fixtures/runTranscriptFixtures.ts

@@ -0,0 +1,226 @@
+import type { TranscriptEntry } from "../adapters";
+
+export interface RunTranscriptFixtureMeta {
+  sourceRunId: string;
+  fixtureLabel: string;
+  agentName: string;
+  agentId: string;
+  issueIdentifier: string;
+  issueTitle: string;
+  startedAt: string;
+  finishedAt: string | null;
+}
+
+export const runTranscriptFixtureMeta: RunTranscriptFixtureMeta = {
+  sourceRunId: "65a79d5d-5f85-4392-a5cc-8fb48beb9e71",
+  fixtureLabel: "Sanitized development fixture",
+  agentName: "CodexCoder",
+  agentId: "codexcoder-fixture",
+  issueIdentifier: "PAP-473",
+  issueTitle: "Humanize run transcripts across run detail and live surfaces",
+  startedAt: "2026-03-11T15:21:05.948Z",
+  finishedAt: null,
+};
+
+// Sanitized from a real development run. Paths, secrets, env vars, and user-local identifiers
+// are replaced with safe placeholders while preserving the interaction shape.
+export const runTranscriptFixtureEntries: TranscriptEntry[] = [
+  {
+    kind: "stderr",
+    ts: "2026-03-11T15:21:05.594Z",
+    text: "[paperclip] Skipping saved session resume for task \"PAP-473\" because wake reason is issue_assigned.",
+  },
+  {
+    kind: "init",
+    ts: "2026-03-11T15:21:05.948Z",
+    model: "codex",
+    sessionId: "sess_fixture_01",
+  },
+  {
+    kind: "system",
+    ts: "2026-03-11T15:21:07.249Z",
+    text: "turn started",
+  },
+  {
+    kind: "assistant",
+    ts: "2026-03-11T15:21:18.851Z",
+    text: "I’m starting with the Paperclip heartbeat procedure and the repo-required docs so I can see what task is actually assigned and then work only on that scope.",
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:21:19.026Z",
+    name: "command_execution",
+    toolUseId: "item_1",
+    input: {
+      command: "sed -n '1,220p' doc/GOAL.md",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:21:19.026Z",
+    name: "command_execution",
+    toolUseId: "item_2",
+    input: {
+      command: "sed -n '1,320p' doc/SPEC-implementation.md",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:21:19.034Z",
+    toolUseId: "item_1",
+    content: "command: sed -n '1,220p' doc/GOAL.md\nstatus: completed\nexit_code: 0\n\n# Paperclip\n\nPaperclip is the backbone of the autonomous economy.",
+    isError: false,
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:21:19.035Z",
+    toolUseId: "item_2",
+    content: "command: sed -n '1,320p' doc/SPEC-implementation.md\nstatus: completed\nexit_code: 0\n\n# Paperclip V1 Implementation Spec\n\nPaperclip V1 must provide a full control-plane loop for autonomous agents.",
+    isError: false,
+  },
+  {
+    kind: "assistant",
+    ts: "2026-03-11T15:22:08.806Z",
+    text: "I’ve got the rendering entry points. I’m reading the existing transcript parser and the three UI surfaces together so I can collapse them onto one renderer instead of layering another one-off view.",
+  },
+  {
+    kind: "thinking",
+    ts: "2026-03-11T15:22:12.044Z",
+    text: "The current transcript UX duplicates parsing logic in multiple surfaces. A shared presentation layer will make the detail page and live surfaces behave the same way while keeping raw fallback available.",
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:22:15.401Z",
+    name: "command_execution",
+    toolUseId: "item_3",
+    input: {
+      command: "rg -n \"LiveRunWidget|ActiveAgentsPanel|buildTranscript|TranscriptEntry|transcript\" ui/src server/src packages",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:22:15.982Z",
+    toolUseId: "item_3",
+    content: "command: rg -n ...\nstatus: completed\nexit_code: 0\n\nui/src/components/ActiveAgentsPanel.tsx\nui/src/components/LiveRunWidget.tsx\nui/src/pages/AgentDetail.tsx",
+    isError: false,
+  },
+  {
+    kind: "system",
+    ts: "2026-03-11T15:22:21.617Z",
+    text: "item started: web_search (id=ws_fixture_reasoning_ui)",
+  },
+  {
+    kind: "system",
+    ts: "2026-03-11T15:22:24.806Z",
+    text: "item completed: web_search (id=ws_fixture_reasoning_ui)",
+  },
+  {
+    kind: "assistant",
+    ts: "2026-03-11T15:22:29.214Z",
+    text: "I’ve confirmed the duplication: the run page has the only full transcript renderer, while live surfaces still collapse output into feed strings. I’m pulling markdown utilities and adapter shapes now so the new renderer can stay shared.",
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:23:04.251Z",
+    name: "command_execution",
+    toolUseId: "item_4",
+    input: {
+      command: "pnpm -r typecheck",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:23:26.903Z",
+    toolUseId: "item_4",
+    content: "command: pnpm -r typecheck\nstatus: completed\nexit_code: 0\n\npackages/adapter-utils typecheck: Done\nserver typecheck: Done\nui typecheck: Done\ncli typecheck: Done",
+    isError: false,
+  },
+  {
+    kind: "assistant",
+    ts: "2026-03-11T15:23:34.102Z",
+    text: "Typecheck is clean. I’m running the remaining repo checks now so the transcript work is verified under the full workspace build, not just the UI package.",
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:23:40.511Z",
+    name: "command_execution",
+    toolUseId: "item_5",
+    input: {
+      command: "pnpm test:run",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:23:56.944Z",
+    toolUseId: "item_5",
+    content: "command: pnpm test:run\nstatus: failed\nexit_code: 1\n\nFAIL packages/db/src/runtime-config.test.ts\nFAIL src/__tests__/worktree.test.ts\n\nAll transcript-adapter tests passed after snapshot updates.",
+    isError: true,
+  },
+  {
+    kind: "thinking",
+    ts: "2026-03-11T15:24:02.188Z",
+    text: "The remaining failures are unrelated to transcript rendering, so I should isolate them in the handoff and keep the UI change set focused.",
+  },
+  {
+    kind: "assistant",
+    ts: "2026-03-11T15:24:08.490Z",
+    text: "The new parser metadata changed a few adapter test snapshots exactly where expected, and the remaining red tests are outside this change set. I’m keeping the transcript patch focused and shipping with that caveat called out.",
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:24:21.327Z",
+    name: "command_execution",
+    toolUseId: "item_6",
+    input: {
+      command: "pnpm build",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:24:44.030Z",
+    toolUseId: "item_6",
+    content: "command: pnpm build\nstatus: completed\nexit_code: 0\n\nui build: built successfully\ncli build: Done",
+    isError: false,
+  },
+  {
+    kind: "tool_call",
+    ts: "2026-03-11T15:24:52.504Z",
+    name: "command_execution",
+    toolUseId: "item_7",
+    input: {
+      command: "git commit -m \"Humanize run transcripts across run detail and live surfaces\"",
+      cwd: "/workspace/paperclip",
+    },
+  },
+  {
+    kind: "tool_result",
+    ts: "2026-03-11T15:24:53.104Z",
+    toolUseId: "item_7",
+    content: "command: git commit ...\nstatus: completed\nexit_code: 0\n\n87b8e21 Humanize run transcripts across run detail and live surfaces",
+    isError: false,
+  },
+  {
+    kind: "assistant",
+    ts: "2026-03-11T15:25:00.908Z",
+    text: "Implemented the transcript UI refactor and switched the run detail page, issue live widget, and dashboard agent card onto the same rendering language.",
+  },
+  {
+    kind: "result",
+    ts: "2026-03-11T15:25:05.440Z",
+    text: "Transcript rollout complete with shared nice/raw rendering and compact live variants.",
+    inputTokens: 11240,
+    outputTokens: 3460,
+    cachedTokens: 520,
+    costUsd: 0.048121,
+    subtype: "success",
+    isError: false,
+    errors: [],
+  },
+];
+

package/ui/src/hooks/useAgentOrder.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { Agent } from "@corporateai/shared";
+import {
+  AGENT_ORDER_UPDATED_EVENT,
+  getAgentOrderStorageKey,
+  readAgentOrder,
+  sortAgentsByStoredOrder,
+  writeAgentOrder,
+} from "../lib/agent-order";
+
+type UseAgentOrderParams = {
+  agents: Agent[];
+  companyId: string | null | undefined;
+  userId: string | null | undefined;
+};
+
+type AgentOrderUpdatedDetail = {
+  storageKey: string;
+  orderedIds: string[];
+};
+
+function areEqual(a: string[], b: string[]) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+function buildOrderIds(agents: Agent[], orderedIds: string[]) {
+  return sortAgentsByStoredOrder(agents, orderedIds).map((agent) => agent.id);
+}
+
+export function useAgentOrder({ agents, companyId, userId }: UseAgentOrderParams) {
+  const storageKey = useMemo(() => {
+    if (!companyId) return null;
+    return getAgentOrderStorageKey(companyId, userId);
+  }, [companyId, userId]);
+
+  const [orderedIds, setOrderedIds] = useState<string[]>(() => {
+    if (!storageKey) return agents.map((agent) => agent.id);
+    return buildOrderIds(agents, readAgentOrder(storageKey));
+  });
+
+  useEffect(() => {
+    const nextIds = storageKey
+      ? buildOrderIds(agents, readAgentOrder(storageKey))
+      : agents.map((agent) => agent.id);
+    setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
+  }, [agents, storageKey]);
+
+  useEffect(() => {
+    if (!storageKey) return;
+
+    const syncFromIds = (ids: string[]) => {
+      const nextIds = buildOrderIds(agents, ids);
+      setOrderedIds((current) => (areEqual(current, nextIds) ? current : nextIds));
+    };
+
+    const onStorage = (event: StorageEvent) => {
+      if (event.key !== storageKey) return;
+      syncFromIds(readAgentOrder(storageKey));
+    };
+    const onCustomEvent = (event: Event) => {
+      const detail = (event as CustomEvent<AgentOrderUpdatedDetail>).detail;
+      if (!detail || detail.storageKey !== storageKey) return;
+      syncFromIds(detail.orderedIds);
+    };
+
+    window.addEventListener("storage", onStorage);
+    window.addEventListener(AGENT_ORDER_UPDATED_EVENT, onCustomEvent);
+    return () => {
+      window.removeEventListener("storage", onStorage);
+      window.removeEventListener(AGENT_ORDER_UPDATED_EVENT, onCustomEvent);
+    };
+  }, [agents, storageKey]);
+
+  const orderedAgents = useMemo(
+    () => sortAgentsByStoredOrder(agents, orderedIds),
+    [agents, orderedIds],
+  );
+
+  const persistOrder = useCallback(
+    (ids: string[]) => {
+      const idSet = new Set(agents.map((agent) => agent.id));
+      const filtered = ids.filter((id) => idSet.has(id));
+      for (const agent of sortAgentsByStoredOrder(agents, [])) {
+        if (!filtered.includes(agent.id)) filtered.push(agent.id);
+      }
+
+      setOrderedIds((current) => (areEqual(current, filtered) ? current : filtered));
+      if (storageKey) {
+        writeAgentOrder(storageKey, filtered);
+      }
+    },
+    [agents, storageKey],
+  );
+
+  return {
+    orderedAgents,
+    orderedIds,
+    persistOrder,
+  };
+}
+