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

package/src/components/shared/__tests__/metrics-row.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { MetricsRow } from '../metrics-row';
+import { createMockRun, createMockTaskEffect } from '@/test/fixtures';
+
+describe('MetricsRow', () => {
+  it('renders without crashing', () => {
+    const run = createMockRun();
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('Total Duration')).toBeInTheDocument();
+  });
+
+  it('displays task count as completed/total', () => {
+    const run = createMockRun({ completedTasks: 5, totalTasks: 10 });
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('5/10')).toBeInTheDocument();
+  });
+
+  it('displays the "Tasks" label', () => {
+    const run = createMockRun();
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+  });
+
+  it('displays the success rate percentage', () => {
+    const run = createMockRun({ completedTasks: 3, totalTasks: 4 });
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('75%')).toBeInTheDocument();
+  });
+
+  it('displays 0% success rate when there are no tasks', () => {
+    const run = createMockRun({ completedTasks: 0, totalTasks: 0, tasks: [] });
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('0%')).toBeInTheDocument();
+  });
+
+  it('displays 100% success rate when all tasks complete', () => {
+    const run = createMockRun({ completedTasks: 5, totalTasks: 5 });
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('100%')).toBeInTheDocument();
+  });
+
+  it('displays the "Success Rate" label', () => {
+    const run = createMockRun();
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('Success Rate')).toBeInTheDocument();
+  });
+
+  it('displays the iterations count', () => {
+    const run = createMockRun();
+    render(<MetricsRow run={run} />);
+    expect(screen.getByText('Iterations')).toBeInTheDocument();
+  });
+
+  it('counts unique invocationKeys for iterations', () => {
+    const tasks = [
+      createMockTaskEffect({ invocationKey: 'inv-1' }),
+      createMockTaskEffect({ invocationKey: 'inv-1' }),
+      createMockTaskEffect({ invocationKey: 'inv-2' }),
+    ];
+    const run = createMockRun({ tasks });
+    render(<MetricsRow run={run} />);
+    // 2 unique invocationKeys
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('displays formatted duration for completed run', () => {
+    const run = createMockRun({ status: 'completed', duration: 65000 });
+    render(<MetricsRow run={run} />);
+    // 65000ms = 1m 5s
+    expect(screen.getByText('1m 5s')).toBeInTheDocument();
+  });
+});

package/src/components/shared/__tests__/outcome-banner.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import { OutcomeBanner } from '../outcome-banner';
+import { createMockRun, createMockTaskEffect } from '@/test/fixtures';
+
+describe('OutcomeBanner', () => {
+  it('renders nothing for pending status', () => {
+    const run = createMockRun({ status: 'pending' });
+    const { container } = render(<OutcomeBanner run={run} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing for waiting status', () => {
+    const run = createMockRun({ status: 'waiting' });
+    const { container } = render(<OutcomeBanner run={run} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders completed banner with duration', () => {
+    const run = createMockRun({ status: 'completed', duration: 12000 });
+    render(<OutcomeBanner run={run} />);
+    expect(screen.getByText(/Completed in/)).toBeInTheDocument();
+    expect(screen.getByText(/12s/)).toBeInTheDocument();
+  });
+
+  it('renders failed banner with step name from failed task', () => {
+    const failedTask = createMockTaskEffect({
+      status: 'error',
+      label: 'run-ingest',
+      error: { name: 'Error', message: 'Connection timeout' },
+    });
+    const run = createMockRun({ status: 'failed', tasks: [failedTask] });
+    render(<OutcomeBanner run={run} />);
+    expect(screen.getByText(/Failed at step/)).toBeInTheDocument();
+    expect(screen.getByText(/run-ingest/)).toBeInTheDocument();
+    expect(screen.getByText(/Connection timeout/)).toBeInTheDocument();
+  });
+
+  it('renders failed banner with fallback step name from failedStep', () => {
+    const run = createMockRun({ status: 'failed', failedStep: 'step-x', tasks: [] });
+    render(<OutcomeBanner run={run} />);
+    expect(screen.getByText(/step-x/)).toBeInTheDocument();
+  });
+
+  it('renders failed banner with "unknown step" fallback', () => {
+    const run = createMockRun({ status: 'failed', tasks: [] });
+    render(<OutcomeBanner run={run} />);
+    expect(screen.getByText(/unknown step/)).toBeInTheDocument();
+  });
+
+  it('renders failed banner with fallback error message', () => {
+    const run = createMockRun({ status: 'failed', tasks: [] });
+    render(<OutcomeBanner run={run} />);
+    expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
+  });
+
+  it('renders success icon for completed runs', () => {
+    const run = createMockRun({ status: 'completed', duration: 5000 });
+    const { container } = render(<OutcomeBanner run={run} />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('renders error icon for failed runs', () => {
+    const run = createMockRun({ status: 'failed', tasks: [] });
+    const { container } = render(<OutcomeBanner run={run} />);
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+});

package/src/components/shared/__tests__/progress-bar.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render } from '@/test/test-utils';
+import { ProgressBar } from '../progress-bar';
+
+describe('ProgressBar', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<ProgressBar value={50} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('renders 0% width when value is 0', () => {
+    const { container } = render(<ProgressBar value={0} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.style.width).toBe('0%');
+  });
+
+  it('renders 50% width when value is 50', () => {
+    const { container } = render(<ProgressBar value={50} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.style.width).toBe('50%');
+  });
+
+  it('renders 100% width when value is 100', () => {
+    const { container } = render(<ProgressBar value={100} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.style.width).toBe('100%');
+  });
+
+  it('clamps value above 100 to 100%', () => {
+    const { container } = render(<ProgressBar value={150} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.style.width).toBe('100%');
+  });
+
+  it('clamps negative value to 0%', () => {
+    const { container } = render(<ProgressBar value={-10} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.style.width).toBe('0%');
+  });
+
+  it('applies rounded-full class when complete (100%)', () => {
+    const { container } = render(<ProgressBar value={100} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).toContain('rounded-full');
+  });
+
+  it('applies rounded-l-full class when not complete', () => {
+    const { container } = render(<ProgressBar value={50} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).toContain('rounded-l-full');
+  });
+
+  it('applies success variant styling', () => {
+    const { container } = render(<ProgressBar value={50} variant="success" />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).toContain('bg-success');
+  });
+
+  it('applies error variant styling', () => {
+    const { container } = render(<ProgressBar value={50} variant="error" />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).toContain('bg-error');
+  });
+
+  it('applies warning variant styling', () => {
+    const { container } = render(<ProgressBar value={50} variant="warning" />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).toContain('bg-warning');
+  });
+
+  it('applies glow classes when glow is true', () => {
+    const { container } = render(<ProgressBar value={50} glow />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).toContain('shadow-progress-glow-primary');
+  });
+
+  it('does not apply glow classes when glow is false', () => {
+    const { container } = render(<ProgressBar value={50} glow={false} />);
+    const bar = container.querySelector('[style]') as HTMLElement;
+    expect(bar.className).not.toContain('shadow-progress-glow');
+  });
+
+  it('applies custom className to outer container', () => {
+    const { container } = render(<ProgressBar value={50} className="my-class" />);
+    const outer = container.firstChild as HTMLElement;
+    expect(outer.className).toContain('my-class');
+  });
+});

package/src/components/shared/__tests__/session-pill.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@/test/test-utils';
+import userEvent from '@testing-library/user-event';
+import { SessionPill } from '../session-pill';
+
+describe('SessionPill', () => {
+  it('renders nothing when sessionId is undefined', () => {
+    const { container } = render(<SessionPill />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing when sessionId is empty string', () => {
+    const { container } = render(<SessionPill sessionId="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders the truncated session ID', () => {
+    render(<SessionPill sessionId="abcdef123456" />);
+    // formatShortId with chars=4 produces "...3456"
+    expect(screen.getByText('...3456')).toBeInTheDocument();
+  });
+
+  it('renders an active state indicator dot', () => {
+    const { container } = render(<SessionPill sessionId="abcdef123456" active />);
+    // The active dot should have animate-pulse-dot class
+    const dots = container.querySelectorAll('span span');
+    const activeDot = Array.from(dots).find(el => el.className.includes('animate-pulse-dot'));
+    expect(activeDot).toBeTruthy();
+  });
+
+  it('renders an inactive state indicator dot', () => {
+    const { container } = render(<SessionPill sessionId="abcdef123456" active={false} />);
+    const dots = container.querySelectorAll('span span');
+    const inactiveDot = Array.from(dots).find(el => el.className.includes('bg-foreground-muted/40'));
+    expect(inactiveDot).toBeTruthy();
+  });
+
+  it('copies session ID to clipboard on click', async () => {
+    const user = userEvent.setup();
+    const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText');
+    render(<SessionPill sessionId="session-xyz-12345" />);
+    const pill = screen.getByText('...2345');
+    await user.click(pill);
+    expect(writeTextSpy).toHaveBeenCalledWith('session-xyz-12345');
+  });
+
+  it('shows "Copied!" feedback after click', async () => {
+    const user = userEvent.setup();
+    render(<SessionPill sessionId="session-xyz-12345" />);
+    const pill = screen.getByText('...2345');
+    await user.click(pill);
+    expect(screen.getByText('Copied!')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<SessionPill sessionId="abc123" className="extra" />);
+    // Find the main span trigger
+    const span = container.querySelector('span');
+    expect(span).toBeTruthy();
+  });
+});

package/src/components/shared/__tests__/settings-modal.test.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@/test/test-utils';
+import userEvent from '@testing-library/user-event';
+import { SettingsModal } from '../settings-modal';
+import { ThemeProvider } from '../theme-provider';
+
+const mockConfig = {
+  sources: [{ path: '/tmp/runs', depth: 2, label: 'test' }],
+  port: 4040,
+  pollInterval: 2000,
+  theme: 'dark' as const,
+  retentionDays: 30,
+  hiddenProjects: [],
+};
+
+const mockProjects = { projects: [{ projectName: 'test-project' }] };
+
+/** Create a proper Response for resilientFetch from JSON data */
+function jsonResponse(data: unknown): Response {
+  return new Response(JSON.stringify(data), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+/**
+ * Mock fetch for SettingsModal which makes 2 parallel requests:
+ *  1. GET /api/config
+ *  2. GET /api/runs?mode=projects
+ */
+function mockSettingsFetch() {
+  vi.spyOn(globalThis, 'fetch').mockImplementation((input: RequestInfo | URL) => {
+    const url = typeof input === 'string' ? input : input.toString();
+    if (url.includes('/api/config')) {
+      return Promise.resolve(jsonResponse(mockConfig));
+    }
+    if (url.includes('/api/runs')) {
+      return Promise.resolve(jsonResponse(mockProjects));
+    }
+    return Promise.resolve(new Response('Not Found', { status: 404 }));
+  });
+}
+
+function renderWithTheme(open: boolean, onClose = vi.fn()) {
+  return render(
+    <ThemeProvider>
+      <SettingsModal open={open} onClose={onClose} />
+    </ThemeProvider>,
+  );
+}
+
+describe('SettingsModal', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders nothing when open is false', () => {
+    const { container } = renderWithTheme(false);
+    expect(container.querySelector('[class*="fixed"]')).toBeNull();
+  });
+
+  it('renders modal when open is true and config loads', async () => {
+    mockSettingsFetch();
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+  });
+
+  it('shows loading indicator while fetching config', () => {
+    // Never resolve fetch
+    vi.spyOn(globalThis, 'fetch').mockReturnValue(new Promise(() => {}));
+
+    renderWithTheme(true);
+
+    expect(screen.getByText('Loading configuration...')).toBeInTheDocument();
+  });
+
+  it('shows fetch error when config load fails', async () => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation((input: RequestInfo | URL) => {
+      const url = typeof input === 'string' ? input : input.toString();
+      if (url.includes('/api/config')) {
+        return Promise.resolve(new Response('Bad request', { status: 400 }));
+      }
+      if (url.includes('/api/runs')) {
+        return Promise.resolve(jsonResponse(mockProjects));
+      }
+      return Promise.resolve(new Response('Not Found', { status: 404 }));
+    });
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to load config/)).toBeInTheDocument();
+    });
+  });
+
+  it('displays watch sources section after config loads', async () => {
+    mockSettingsFetch();
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText('Watch Sources')).toBeInTheDocument();
+    });
+  });
+
+  it('displays poll interval section after config loads', async () => {
+    mockSettingsFetch();
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText('Poll Interval')).toBeInTheDocument();
+    });
+  });
+
+  it('displays theme section after config loads', async () => {
+    mockSettingsFetch();
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText('Theme')).toBeInTheDocument();
+    });
+  });
+
+  it('calls onClose when clicking the close button', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    mockSettingsFetch();
+
+    render(
+      <ThemeProvider>
+        <SettingsModal open={true} onClose={onClose} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Click the X close button (the button adjacent to the header)
+    const closeButtons = screen.getAllByRole('button');
+    // First button should be the X close button
+    const xButton = closeButtons[0];
+    await user.click(xButton);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('calls onClose when pressing Escape', async () => {
+    const onClose = vi.fn();
+    mockSettingsFetch();
+
+    render(
+      <ThemeProvider>
+        <SettingsModal open={true} onClose={onClose} />
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Settings')).toBeInTheDocument();
+    });
+
+    // Radix Dialog listens for Escape on the document
+    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    document.dispatchEvent(event);
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('shows Add Source button and can add a new source', async () => {
+    const user = userEvent.setup();
+    mockSettingsFetch();
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText('Add Source')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('Add Source'));
+
+    // There should now be 2 source path inputs (original + new)
+    const pathInputs = screen.getAllByPlaceholderText('/path/to/projects');
+    expect(pathInputs.length).toBe(2);
+  });
+
+  it('shows config file path in footer', async () => {
+    mockSettingsFetch();
+
+    renderWithTheme(true);
+
+    await waitFor(() => {
+      expect(screen.getByText('~/.a5c/observer.json')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/shared/__tests__/shortcuts-help.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@/test/test-utils';
+import { ShortcutsHelp } from '../shortcuts-help';
+
+// Default mock returns '/' (dashboard). Override per-test for run detail.
+const mockUsePathname = vi.fn(() => '/');
+vi.mock('next/navigation', async () => {
+  const actual = await vi.importActual('next/navigation');
+  return { ...actual, usePathname: () => mockUsePathname() };
+});
+
+describe('ShortcutsHelp', () => {
+  it('renders nothing initially (modal is closed)', () => {
+    render(<ShortcutsHelp />);
+    expect(screen.queryByText('Keyboard Shortcuts')).not.toBeInTheDocument();
+  });
+
+  it('opens modal on "?" key press', () => {
+    render(<ShortcutsHelp />);
+    fireEvent.keyDown(window, { key: '?' });
+    expect(screen.getByText('Keyboard Shortcuts')).toBeInTheDocument();
+  });
+
+  it('on dashboard, shows only global and dashboard shortcuts', () => {
+    mockUsePathname.mockReturnValue('/');
+    render(<ShortcutsHelp />);
+    fireEvent.keyDown(window, { key: '?' });
+
+    // Global shortcuts
+    expect(screen.getByText('Show this help')).toBeInTheDocument();
+    expect(screen.getByText('Toggle notifications')).toBeInTheDocument();
+    // Dashboard shortcuts
+    expect(screen.getByText('Focus search')).toBeInTheDocument();
+    // Run-detail shortcuts should NOT appear
+    expect(screen.queryByText('Next item')).not.toBeInTheDocument();
+    expect(screen.queryByText('Agent tab')).not.toBeInTheDocument();
+  });
+
+  it('on run detail page, shows global and run-detail shortcuts', () => {
+    mockUsePathname.mockReturnValue('/runs/abc-123');
+    render(<ShortcutsHelp />);
+    fireEvent.keyDown(window, { key: '?' });
+
+    // Global shortcuts
+    expect(screen.getByText('Show this help')).toBeInTheDocument();
+    expect(screen.getByText('Toggle notifications')).toBeInTheDocument();
+    // Run-detail shortcuts
+    expect(screen.getByText('Next item')).toBeInTheDocument();
+    expect(screen.getByText('Previous item')).toBeInTheDocument();
+    expect(screen.getByText('Open selected')).toBeInTheDocument();
+    expect(screen.getByText('Go back / Close')).toBeInTheDocument();
+    expect(screen.getByText('Toggle event stream')).toBeInTheDocument();
+    expect(screen.getByText('Agent tab')).toBeInTheDocument();
+    expect(screen.getByText('Timing tab')).toBeInTheDocument();
+    expect(screen.getByText('Logs tab')).toBeInTheDocument();
+    expect(screen.getByText('Data tab')).toBeInTheDocument();
+    expect(screen.getByText('Approval tab')).toBeInTheDocument();
+    // Dashboard shortcuts should NOT appear
+    expect(screen.queryByText('Focus search')).not.toBeInTheDocument();
+  });
+
+  it('displays keyboard keys when open', () => {
+    mockUsePathname.mockReturnValue('/runs/abc-123');
+    render(<ShortcutsHelp />);
+    fireEvent.keyDown(window, { key: '?' });
+
+    expect(screen.getByText('j')).toBeInTheDocument();
+    expect(screen.getByText('k')).toBeInTheDocument();
+    expect(screen.getByText('Enter')).toBeInTheDocument();
+    expect(screen.getByText('Esc')).toBeInTheDocument();
+  });
+
+  it('shows section headers', () => {
+    mockUsePathname.mockReturnValue('/runs/abc-123');
+    render(<ShortcutsHelp />);
+    fireEvent.keyDown(window, { key: '?' });
+
+    expect(screen.getByText('Global')).toBeInTheDocument();
+    expect(screen.getByText('Run Detail')).toBeInTheDocument();
+  });
+
+  it('closes modal on Escape key press', () => {
+    render(<ShortcutsHelp />);
+    // Open
+    fireEvent.keyDown(window, { key: '?' });
+    expect(screen.getByText('Keyboard Shortcuts')).toBeInTheDocument();
+    // Close
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(screen.queryByText('Keyboard Shortcuts')).not.toBeInTheDocument();
+  });
+
+  it('closes modal when clicking the close button', async () => {
+    render(<ShortcutsHelp />);
+    fireEvent.keyDown(window, { key: '?' });
+    expect(screen.getByText('Keyboard Shortcuts')).toBeInTheDocument();
+
+    // Click the close button (the X button) - find it via the Dialog.Close wrapping
+    const closeButton = screen.getByTestId('icon-X').closest('button')!;
+    fireEvent.click(closeButton);
+    expect(screen.queryByText('Keyboard Shortcuts')).not.toBeInTheDocument();
+  });
+});