@a5c-ai/babysitter-observer-dashboard 5.0.1-staging.7a8768ec

package/src/test/setup.ts

@@ -0,0 +1,200 @@
+import { expect, afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+import React from 'react';
+
+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn(), back: vi.fn(), prefetch: vi.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+  useParams: () => ({}),
+}));
+
+// Mock next/dynamic — pass through to the real component synchronously.
+// The loader function (e.g. () => import("./agent-panel")) returns a Promise,
+// but in vitest the module is already loaded. We extract the module path from
+// the loader's toString() to resolve it synchronously. As a fallback, we use
+// async resolution with React state.
+vi.mock('next/dynamic', () => {
+  const dynamic = (loader: () => Promise<any>, _opts?: any) => {
+    // Attempt synchronous resolution: call loader and intercept the result.
+    // In vitest, the dynamic import resolves on the next microtick, so we
+    // eagerly kick it off and cache the result for subsequent renders.
+    let Resolved: React.ComponentType<any> | null = null;
+    const loadPromise = loader().then((mod: any) => {
+      Resolved = mod.default || mod;
+    });
+
+    const DynamicComponent = (props: any) => {
+      const [Comp, setComp] = React.useState<React.ComponentType<any> | null>(() => Resolved);
+
+      React.useEffect(() => {
+        if (!Comp && !Resolved) {
+          loadPromise.then(() => {
+            if (Resolved) setComp(() => Resolved);
+          });
+        } else if (!Comp && Resolved) {
+          setComp(() => Resolved);
+        }
+      }, [Comp]);
+
+      const Active = Comp || Resolved;
+      if (Active) {
+        return React.createElement(Active, props);
+      }
+      if (_opts?.loading) {
+        return React.createElement(_opts.loading, {});
+      }
+      return null;
+    };
+    DynamicComponent.displayName = 'DynamicComponent';
+    (DynamicComponent as any).preload = () => loadPromise;
+    return DynamicComponent;
+  };
+  return { __esModule: true, default: dynamic };
+});
+
+// Mock lucide-react to avoid React version mismatch in monorepo
+// (observer has React 18 locally, root has React 19)
+vi.mock('lucide-react', () => {
+  const createIconMock = (name: string) => {
+    const Icon = React.forwardRef<SVGSVGElement, any>(
+      function IconMock(props: any, ref: any) {
+        return React.createElement('svg', {
+          ...props,
+          ref,
+          'data-testid': `icon-${name}`,
+          'data-lucide': name,
+        });
+      },
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+
+  // All icon names used across the codebase
+  const iconNames = [
+    'Activity', 'AlertCircle', 'AlertTriangle', 'ArrowLeft', 'ArrowRight',
+    'ArrowUpDown', 'Bell', 'Bot',
+    'CalendarDays', 'Check', 'CheckCircle2', 'ChevronDown', 'ChevronLeft',
+    'ChevronRight', 'ChevronUp', 'Circle', 'Clock', 'Code', 'Cog', 'Copy',
+    'ExternalLink', 'Eye', 'EyeOff', 'FileJson', 'FileText', 'FolderOpen',
+    'GitBranch', 'Github',
+    'Hand', 'Hash', 'HelpCircle', 'History', 'Inbox', 'Info', 'Layers',
+    'Loader2', 'Moon', 'Palette',
+    'Pause', 'Percent', 'Pin', 'Plus', 'Puzzle', 'RefreshCw', 'Search', 'Settings',
+    'Sun', 'Tag', 'Terminal', 'Timer', 'Trash2', 'Wifi', 'WifiOff',
+    'X', 'XCircle',
+  ];
+
+  const mocks: Record<string, any> = {};
+  for (const name of iconNames) {
+    mocks[name] = createIconMock(name);
+  }
+  return mocks;
+});
+
+// Extend vitest's expect with jest-dom matchers
+expect.extend(matchers);
+
+// Clean up after each test.
+// We also re-apply the raf/caf polyfills BEFORE cleanup because some tests
+// (e.g. use-animated-number) call vi.restoreAllMocks() which removes stubs
+// including cancelAnimationFrame. React's passive-effect cleanup still needs it.
+afterEach(() => {
+  if (typeof globalThis.cancelAnimationFrame !== 'function') {
+    globalThis.cancelAnimationFrame = (id: number) => clearTimeout(id);
+  }
+  if (typeof globalThis.requestAnimationFrame !== 'function') {
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => setTimeout(cb, 0) as unknown as number;
+  }
+  cleanup();
+});
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+// Mock IntersectionObserver
+class MockIntersectionObserver implements IntersectionObserver {
+  readonly root: Element | null = null;
+  readonly rootMargin: string = '';
+  readonly thresholds: ReadonlyArray<number> = [];
+
+  constructor(
+    private callback: IntersectionObserverCallback,
+    _options?: IntersectionObserverInit,
+  ) {}
+
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+}
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  value: MockIntersectionObserver,
+});
+
+// Mock navigator.clipboard (configurable so userEvent can re-stub it)
+Object.defineProperty(navigator, 'clipboard', {
+  writable: true,
+  configurable: true,
+  value: {
+    writeText: async (_text: string) => {},
+    readText: async () => '',
+    write: async () => {},
+    read: async () => [],
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  },
+});
+
+// Mock ResizeObserver (used by Radix UI components)
+class MockResizeObserver {
+  observe(): void {}
+  unobserve(): void {}
+  disconnect(): void {}
+}
+
+Object.defineProperty(window, 'ResizeObserver', {
+  writable: true,
+  value: MockResizeObserver,
+});
+
+// Polyfill requestAnimationFrame/cancelAnimationFrame for jsdom
+// Some jsdom versions do not expose these globals — ensure they exist on both
+// window and globalThis so component cleanup callbacks can find them.
+const _raf = (cb: FrameRequestCallback) => setTimeout(cb, 0) as unknown as number;
+const _caf = (id: number) => clearTimeout(id);
+
+if (typeof globalThis.requestAnimationFrame === 'undefined') {
+  globalThis.requestAnimationFrame = _raf;
+}
+if (typeof globalThis.cancelAnimationFrame === 'undefined') {
+  globalThis.cancelAnimationFrame = _caf;
+}
+if (typeof window !== 'undefined') {
+  if (typeof window.requestAnimationFrame === 'undefined') {
+    window.requestAnimationFrame = _raf;
+  }
+  if (typeof window.cancelAnimationFrame === 'undefined') {
+    window.cancelAnimationFrame = _caf;
+  }
+}

package/src/test/test-utils.tsx

@@ -0,0 +1,36 @@
+import React, { type ReactElement } from 'react';
+import { render, type RenderOptions } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Minimal test wrapper that provides the contexts needed by most components.
+ * We avoid importing the real Providers tree because it depends on hooks that
+ * fire network requests (polling, SSE) which would interfere with tests.
+ * Individual tests that need a specific provider can compose their own wrapper.
+ */
+function TestWrapper({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+/**
+ * Custom render that wraps the component in TestWrapper.
+ * Use this instead of importing render directly from @testing-library/react.
+ */
+function customRender(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'> & { wrapper?: React.ComponentType },
+) {
+  const Wrapper = options?.wrapper ?? TestWrapper;
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+// Re-export everything from testing-library
+export * from '@testing-library/react';
+
+// Override render with our custom version
+export { customRender as render };
+
+// Export a pre-configured userEvent instance
+export function setupUser() {
+  return userEvent.setup();
+}

package/src/types/breakpoint.ts

@@ -0,0 +1,17 @@
+// Breakpoint-related types
+
+export interface BreakpointFile {
+  path: string;
+  format: string;
+  language?: string;
+}
+
+export interface BreakpointPayload {
+  question: string;
+  title: string;
+  options?: string[];
+  context?: {
+    files?: BreakpointFile[];
+  };
+}
+

package/src/types/index.ts

@@ -0,0 +1,214 @@
+// Re-export breakpoint types
+export * from "./breakpoint";
+
+// Run status
+export type RunStatus = "pending" | "waiting" | "completed" | "failed";
+
+// Task/effect kind
+export type TaskKind = "node" | "agent" | "skill" | "breakpoint" | "shell" | "sleep";
+
+// Task status
+export type TaskStatus = "requested" | "resolved" | "error";
+
+// Journal event types
+export type EventType =
+  | "RUN_CREATED"
+  | "EFFECT_REQUESTED"
+  | "EFFECT_RESOLVED"
+  | "RUN_COMPLETED"
+  | "RUN_FAILED";
+
+// Journal event
+export interface JournalEvent {
+  seq: number;
+  id: string;
+  ts: string;
+  type: EventType;
+  payload: Record<string, unknown>;
+}
+
+export interface RunCreatedPayload {
+  runId: string;
+  processId: string;
+  processRevision?: string;
+  entrypoint?: {
+    importPath: string;
+    exportName: string;
+  };
+  inputsRef?: string;
+}
+
+export interface EffectRequestedPayload {
+  effectId: string;
+  invocationKey: string;
+  stepId: string;
+  taskId: string;
+  kind: TaskKind;
+  label: string;
+  taskDefRef?: string;
+  inputsRef?: string;
+}
+
+export interface EffectResolvedPayload {
+  effectId: string;
+  status: "ok" | "error";
+  resultRef?: string;
+  stdoutRef?: string;
+  stderrRef?: string;
+  startedAt?: string;
+  finishedAt?: string;
+  error?: {
+    name: string;
+    message: string;
+    stack?: string;
+  };
+}
+
+// Parsed task/effect
+export interface TaskEffect {
+  effectId: string;
+  kind: TaskKind;
+  title: string;
+  label: string;
+  status: TaskStatus;
+  invocationKey: string;
+  stepId: string;
+  taskId: string;
+  requestedAt: string;
+  resolvedAt?: string;
+  startedAt?: string;
+  finishedAt?: string;
+  duration?: number; // ms
+  error?: {
+    name: string;
+    message: string;
+    stack?: string;
+  };
+  breakpointQuestion?: string;
+  agent?: {
+    name: string;
+    prompt?: {
+      role: string;
+      task: string;
+      instructions: string[];
+    };
+  };
+}
+
+// Full task detail (on-demand)
+export interface TaskDetail extends TaskEffect {
+  input?: Record<string, unknown>;
+  result?: Record<string, unknown>;
+  stdout?: string;
+  stderr?: string;
+  taskDef?: Record<string, unknown>;
+  breakpoint?: import("./breakpoint").BreakpointPayload;
+}
+
+// Run summary
+export interface Run {
+  runId: string;
+  processId: string;
+  status: RunStatus;
+  createdAt: string;
+  updatedAt: string;
+  completedAt?: string;
+  sessionId?: string;
+  tasks: TaskEffect[];
+  events: JournalEvent[];
+  totalTasks: number;
+  completedTasks: number;
+  failedTasks: number;
+  duration?: number; // ms
+  failedStep?: string;
+  failureError?: string;
+  failureMessage?: string;
+  breakpointQuestion?: string;
+  sourceLabel?: string;
+  projectName?: string;
+  isStale?: boolean;
+  waitingKind?: 'breakpoint' | 'task';
+}
+
+// Lightweight digest for polling
+export interface RunDigest {
+  runId: string;
+  latestSeq: number;
+  status: RunStatus;
+  taskCount: number;
+  completedTasks: number;
+  updatedAt: string;
+  pendingBreakpoints?: number;
+  breakpointQuestion?: string;
+  breakpointEffectId?: string;
+  sourceLabel?: string;
+  projectName?: string;
+  isStale?: boolean;
+  waitingKind?: 'breakpoint' | 'task';
+}
+
+// Project grouping for dashboard
+export interface ProjectGroup {
+  projectName: string;
+  runs: Run[];
+  totalRuns: number;
+  activeRuns: number;
+  completedRuns: number;
+  failedRuns: number;
+  latestUpdate: string;
+}
+
+// Breakpoint info for a single waiting run
+export interface BreakpointRunInfo {
+  runId: string;
+  effectId: string;
+  projectName: string;
+  processId: string;
+  breakpointQuestion: string;
+}
+
+// Project summary (lightweight, no run payloads)
+export interface ProjectSummary {
+  projectName: string;
+  totalRuns: number;
+  activeRuns: number;
+  completedRuns: number;
+  failedRuns: number;
+  staleRuns: number;
+  totalTasks: number;
+  completedTasksAggregate: number;
+  latestUpdate: string;
+  pendingBreakpoints: number;
+  breakpointRuns: BreakpointRunInfo[];
+}
+
+// Session info
+export interface SessionInfo {
+  sessionId: string;
+  active: boolean;
+  startedAt?: string;
+  runId?: string;
+  iteration?: number;
+}
+
+// API response types
+export interface DigestResponse {
+  runs: RunDigest[];
+}
+
+export interface RunsResponse {
+  runs: Run[];
+}
+
+export interface RunDetailResponse {
+  run: Run;
+}
+
+export interface EventsResponse {
+  events: JournalEvent[];
+  total: number;
+}
+
+export interface TaskDetailResponse {
+  task: TaskDetail;
+}

package/tsconfig.json

@@ -0,0 +1,50 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "typeRoots": [
+      "./node_modules/@types",
+      "../../node_modules/@types"
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "e2e",
+    "playwright.config.ts",
+    "src/**/__tests__/**",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ]
+}