@a5c-ai/babysitter-observer-dashboard 1.0.0

package/src/components/breakpoint/__tests__/breakpoint-approval.test.tsx

@@ -0,0 +1,212 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, setupUser } from "@/test/test-utils";
+import { BreakpointApproval } from "../breakpoint-approval";
+import { createMockTaskDetail } from "@/test/fixtures";
+import type { TaskDetail } from "@/types";
+
+// Mock the server action
+const mockApproveBreakpoint = vi.fn();
+vi.mock("@/app/actions/approve-breakpoint", () => ({
+  approveBreakpoint: (...args: unknown[]) => mockApproveBreakpoint(...args),
+}));
+
+describe("BreakpointApproval", () => {
+  const defaultRunId = "run-123";
+
+  function makeBreakpointTask(overrides: Partial<TaskDetail> = {}): TaskDetail {
+    return createMockTaskDetail({
+      kind: "breakpoint",
+      status: "requested",
+      breakpointQuestion: "Should we deploy to production?",
+      title: "Deploy Approval",
+      breakpoint: {
+        question: "Should we deploy to production?",
+        title: "Deploy Approval",
+        context: { files: [] },
+      },
+      ...overrides,
+    });
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockApproveBreakpoint.mockResolvedValue({ success: true });
+  });
+
+  // -------------------------------------------------------------------------
+  // Rendering
+  // -------------------------------------------------------------------------
+
+  it("renders for a waiting breakpoint task", () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    expect(screen.getByTestId("breakpoint-approval")).toBeInTheDocument();
+    expect(screen.getByTestId("approve-btn")).toBeInTheDocument();
+    expect(screen.getByTestId("custom-answer-input")).toBeInTheDocument();
+  });
+
+  it("does not render for a resolved task", () => {
+    const task = makeBreakpointTask({ status: "resolved" });
+    const { container } = render(
+      <BreakpointApproval task={task} runId={defaultRunId} />
+    );
+
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("does not render for an error task", () => {
+    const task = makeBreakpointTask({ status: "error" });
+    const { container } = render(
+      <BreakpointApproval task={task} runId={defaultRunId} />
+    );
+
+    expect(container.innerHTML).toBe("");
+  });
+
+  // -------------------------------------------------------------------------
+  // Option buttons
+  // -------------------------------------------------------------------------
+
+  it("renders option buttons when options are provided", () => {
+    const task = makeBreakpointTask({
+      breakpoint: {
+        question: "Choose environment",
+        title: "Deploy",
+        options: ["staging", "production"],
+        context: { files: [] },
+      },
+    });
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    expect(screen.getByTestId("breakpoint-options")).toBeInTheDocument();
+    expect(screen.getByTestId("option-btn-staging")).toBeInTheDocument();
+    expect(screen.getByTestId("option-btn-production")).toBeInTheDocument();
+  });
+
+  it("does not render option section when no options", () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    expect(screen.queryByTestId("breakpoint-options")).not.toBeInTheDocument();
+  });
+
+  it("calls server action when an option button is clicked", async () => {
+    const user = setupUser();
+    const task = makeBreakpointTask({
+      breakpoint: {
+        question: "Choose environment",
+        title: "Deploy",
+        options: ["staging", "production"],
+        context: { files: [] },
+      },
+    });
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    await user.click(screen.getByTestId("option-btn-staging"));
+
+    expect(mockApproveBreakpoint).toHaveBeenCalledWith(
+      defaultRunId,
+      task.effectId,
+      "staging"
+    );
+  });
+
+  // -------------------------------------------------------------------------
+  // Custom answer
+  // -------------------------------------------------------------------------
+
+  it("disables the approve button when input is empty", () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    expect(screen.getByTestId("approve-btn")).toBeDisabled();
+  });
+
+  it("enables the approve button when input has text", async () => {
+    const user = setupUser();
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    await user.type(screen.getByTestId("custom-answer-input"), "yes");
+
+    expect(screen.getByTestId("approve-btn")).not.toBeDisabled();
+  });
+
+  it("calls server action on form submit with custom answer", async () => {
+    const user = setupUser();
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    await user.type(screen.getByTestId("custom-answer-input"), "Deploy to staging");
+    await user.click(screen.getByTestId("approve-btn"));
+
+    expect(mockApproveBreakpoint).toHaveBeenCalledWith(
+      defaultRunId,
+      task.effectId,
+      "Deploy to staging"
+    );
+  });
+
+  // -------------------------------------------------------------------------
+  // Result feedback
+  // -------------------------------------------------------------------------
+
+  it("shows success message after approval", async () => {
+    const user = setupUser();
+    mockApproveBreakpoint.mockResolvedValue({ success: true });
+
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    await user.type(screen.getByTestId("custom-answer-input"), "yes");
+    await user.click(screen.getByTestId("approve-btn"));
+
+    const resultEl = await screen.findByTestId("approval-result");
+    expect(resultEl).toBeInTheDocument();
+    expect(resultEl.textContent).toContain("approved successfully");
+  });
+
+  it("shows error message on failure", async () => {
+    const user = setupUser();
+    mockApproveBreakpoint.mockResolvedValue({
+      success: false,
+      error: "Task directory not found",
+    });
+
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    await user.type(screen.getByTestId("custom-answer-input"), "yes");
+    await user.click(screen.getByTestId("approve-btn"));
+
+    const resultEl = await screen.findByTestId("approval-result");
+    expect(resultEl).toBeInTheDocument();
+    expect(resultEl.textContent).toContain("Task directory not found");
+  });
+
+  // -------------------------------------------------------------------------
+  // Label text
+  // -------------------------------------------------------------------------
+
+  it('shows "Or provide a custom answer" when options exist', () => {
+    const task = makeBreakpointTask({
+      breakpoint: {
+        question: "Pick",
+        title: "Pick",
+        options: ["a", "b"],
+        context: { files: [] },
+      },
+    });
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText("Or provide a custom answer")).toBeInTheDocument();
+  });
+
+  it('shows "Provide an answer" when no options exist', () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointApproval task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText("Provide an answer")).toBeInTheDocument();
+  });
+});

package/src/components/breakpoint/__tests__/breakpoint-panel.test.tsx

@@ -0,0 +1,130 @@
+import { render, screen } from '@/test/test-utils';
+import { vi } from 'vitest';
+import { BreakpointPanel } from '../breakpoint-panel';
+import { createMockTaskDetail } from '@/test/fixtures';
+import type { TaskDetail } from '@/types';
+
+// Mock the server action used by BreakpointApproval
+vi.mock('@/app/actions/approve-breakpoint', () => ({
+  approveBreakpoint: vi.fn().mockResolvedValue({ success: true }),
+}));
+
+describe('BreakpointPanel', () => {
+  const defaultRunId = 'run-123';
+
+  function makeBreakpointTask(overrides: Partial<TaskDetail> = {}): TaskDetail {
+    return createMockTaskDetail({
+      kind: 'breakpoint',
+      status: 'requested',
+      breakpointQuestion: 'Should we deploy to production?',
+      title: 'Deploy Approval',
+      breakpoint: {
+        question: 'Should we deploy to production?',
+        title: 'Deploy Approval',
+        context: { files: [] },
+      },
+      ...overrides,
+    });
+  }
+
+  // -----------------------------------------------------------------------
+  // Rendering
+  // -----------------------------------------------------------------------
+  it('renders the breakpoint title', () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Deploy Approval')).toBeInTheDocument();
+  });
+
+  it('renders the breakpoint question', () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Should we deploy to production?')).toBeInTheDocument();
+  });
+
+  it('renders the "Breakpoint" badge', () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Breakpoint')).toBeInTheDocument();
+  });
+
+  it('renders the "Awaiting decision" label', () => {
+    const task = makeBreakpointTask();
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Awaiting decision')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Approval form for pending breakpoints
+  // -----------------------------------------------------------------------
+  it('renders approval form for requested breakpoints', () => {
+    const task = makeBreakpointTask({ status: 'requested' });
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByTestId('breakpoint-approval')).toBeInTheDocument();
+    expect(screen.getByTestId('approve-btn')).toBeInTheDocument();
+    expect(screen.queryByText('Reject')).not.toBeInTheDocument();
+  });
+
+  it('does not render approval form for resolved breakpoints', () => {
+    const task = makeBreakpointTask({ status: 'resolved' });
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.queryByTestId('breakpoint-approval')).not.toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Already resolved state (task.status === 'resolved')
+  // -----------------------------------------------------------------------
+  it('shows "Already Resolved" badge when task.status is resolved', () => {
+    const task = makeBreakpointTask({ status: 'resolved' });
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Already Resolved')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Resolved state display
+  // -----------------------------------------------------------------------
+  it('shows success message when task is resolved', () => {
+    const task = makeBreakpointTask({ status: 'resolved' });
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Approved')).toBeInTheDocument();
+    expect(screen.getByText('Breakpoint has been resolved')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Fallback question text
+  // -----------------------------------------------------------------------
+  it('falls back to breakpointQuestion when breakpoint payload is missing', () => {
+    const task = createMockTaskDetail({
+      kind: 'breakpoint',
+      status: 'requested',
+      breakpointQuestion: 'Fallback question?',
+      title: 'Fallback Title',
+      breakpoint: undefined,
+    });
+
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Fallback question?')).toBeInTheDocument();
+  });
+
+  it('falls back to "Approval required" when no question is provided', () => {
+    const task = createMockTaskDetail({
+      kind: 'breakpoint',
+      status: 'requested',
+      breakpointQuestion: undefined,
+      breakpoint: undefined,
+    });
+
+    render(<BreakpointPanel task={task} runId={defaultRunId} />);
+
+    expect(screen.getByText('Approval required')).toBeInTheDocument();
+  });
+});

package/src/components/breakpoint/__tests__/file-preview.test.tsx

@@ -0,0 +1,313 @@
+import { render, screen, setupUser } from '@/test/test-utils';
+import { FilePreview } from '../file-preview';
+import type { BreakpointFile } from '@/types';
+
+describe('FilePreview', () => {
+  const defaultProps = {
+    runId: 'run-1',
+    effectId: 'eff-1',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset global fetch mock
+    vi.stubGlobal('fetch', vi.fn());
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // -----------------------------------------------------------------------
+  // Null rendering
+  // -----------------------------------------------------------------------
+  it('returns null when files array is empty', () => {
+    const { container } = render(
+      <FilePreview files={[]} {...defaultProps} />,
+    );
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  // -----------------------------------------------------------------------
+  // Renders file list
+  // -----------------------------------------------------------------------
+  it('renders "Attached Files" heading', () => {
+    const files: BreakpointFile[] = [
+      { path: 'src/index.ts', format: 'code', language: 'typescript' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByText('Attached Files')).toBeInTheDocument();
+  });
+
+  it('renders file paths in the list', () => {
+    const files: BreakpointFile[] = [
+      { path: 'src/main.ts', format: 'code' },
+      { path: 'README.md', format: 'markdown' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByText('src/main.ts')).toBeInTheDocument();
+    expect(screen.getByText('README.md')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Format badges
+  // -----------------------------------------------------------------------
+  it('displays format badges for each file', () => {
+    const files: BreakpointFile[] = [
+      { path: 'config.json', format: 'json' },
+      { path: 'notes.md', format: 'markdown' },
+      { path: 'script.sh', format: 'code' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByText('json')).toBeInTheDocument();
+    expect(screen.getByText('markdown')).toBeInTheDocument();
+    expect(screen.getByText('code')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Language badge
+  // -----------------------------------------------------------------------
+  it('displays language badge when language is specified', () => {
+    const files: BreakpointFile[] = [
+      { path: 'app.py', format: 'code', language: 'python' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByText('python')).toBeInTheDocument();
+  });
+
+  it('does not display language badge when language is not specified', () => {
+    const files: BreakpointFile[] = [
+      { path: 'data.json', format: 'json' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    // Only the format badge should be present
+    expect(screen.getByText('json')).toBeInTheDocument();
+    // No language badge -- check there's only one badge-like element for this file
+    expect(screen.queryByText('python')).not.toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Icons by format
+  // -----------------------------------------------------------------------
+  it('renders markdown icon for markdown files', () => {
+    const files: BreakpointFile[] = [
+      { path: 'README.md', format: 'markdown' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByTestId('icon-FileText')).toBeInTheDocument();
+  });
+
+  it('renders json icon for json files', () => {
+    const files: BreakpointFile[] = [
+      { path: 'config.json', format: 'json' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByTestId('icon-FileJson')).toBeInTheDocument();
+  });
+
+  it('renders code icon for code files', () => {
+    const files: BreakpointFile[] = [
+      { path: 'main.ts', format: 'code' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByTestId('icon-Code')).toBeInTheDocument();
+  });
+
+  it('renders fallback icon for unknown format', () => {
+    const files: BreakpointFile[] = [
+      { path: 'file.xyz', format: 'unknown' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    // Fallback uses FileText icon
+    expect(screen.getByTestId('icon-FileText')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // File content loading via accordion expand
+  // -----------------------------------------------------------------------
+  it('fetches and displays file content when accordion item is expanded', async () => {
+    const user = setupUser();
+    const mockContent = 'const x = 42;';
+    vi.stubGlobal('fetch', vi.fn().mockImplementation(() =>
+      Promise.resolve(new Response(JSON.stringify({ content: mockContent }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })),
+    ));
+
+    const files: BreakpointFile[] = [
+      { path: 'src/index.ts', format: 'code', language: 'typescript' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    // Click the accordion trigger to expand
+    await user.click(screen.getByText('src/index.ts'));
+
+    // Wait for the content to appear
+    expect(await screen.findByText('const x = 42;')).toBeInTheDocument();
+
+    // Verify fetch was called with the correct URL
+    expect(fetch).toHaveBeenCalledWith(
+      '/api/runs/run-1/tasks/eff-1?file=src%2Findex.ts',
+      expect.anything(),
+    );
+  });
+
+  it('shows fallback text when content fetch fails', async () => {
+    const user = setupUser();
+    vi.stubGlobal('fetch', vi.fn().mockImplementation(() =>
+      Promise.resolve(new Response('Unprocessable Entity', {
+        status: 422,
+        headers: { 'Content-Type': 'text/plain' },
+      })),
+    ));
+
+    const files: BreakpointFile[] = [
+      { path: 'broken.ts', format: 'code' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    await user.click(screen.getByText('broken.ts'));
+
+    expect(await screen.findByText('// Failed to load file content')).toBeInTheDocument();
+  });
+
+  it('shows "No content available" when API returns empty content', async () => {
+    const user = setupUser();
+    vi.stubGlobal('fetch', vi.fn().mockImplementation(() =>
+      Promise.resolve(new Response(JSON.stringify({}), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })),
+    ));
+
+    const files: BreakpointFile[] = [
+      { path: 'empty.ts', format: 'code' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    await user.click(screen.getByText('empty.ts'));
+
+    expect(await screen.findByText('// No content available')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // JSON formatting
+  // -----------------------------------------------------------------------
+  it('pretty-prints JSON content', async () => {
+    const user = setupUser();
+    const jsonContent = '{"key":"value","num":42}';
+    vi.stubGlobal('fetch', vi.fn().mockImplementation(() =>
+      Promise.resolve(new Response(JSON.stringify({ content: jsonContent }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })),
+    ));
+
+    const files: BreakpointFile[] = [
+      { path: 'data.json', format: 'json' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    await user.click(screen.getByText('data.json'));
+
+    // Pretty-printed JSON includes the key on a separate line
+    expect(await screen.findByText(/"key": "value",/)).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Markdown rendering
+  // -----------------------------------------------------------------------
+  it('renders markdown content as preformatted text', async () => {
+    const user = setupUser();
+    const mdContent = '# Hello World\nSome paragraph text';
+    vi.stubGlobal('fetch', vi.fn().mockImplementation(() =>
+      Promise.resolve(new Response(JSON.stringify({ content: mdContent }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })),
+    ));
+
+    const files: BreakpointFile[] = [
+      { path: 'notes.md', format: 'markdown' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    await user.click(screen.getByText('notes.md'));
+
+    expect(await screen.findByText(/# Hello World/)).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Code content with line numbers
+  // -----------------------------------------------------------------------
+  it('renders code content with line numbers', async () => {
+    const user = setupUser();
+    const codeContent = 'line one\nline two\nline three';
+    vi.stubGlobal('fetch', vi.fn().mockImplementation(() =>
+      Promise.resolve(new Response(JSON.stringify({ content: codeContent }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })),
+    ));
+
+    const files: BreakpointFile[] = [
+      { path: 'main.ts', format: 'code' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    await user.click(screen.getByText('main.ts'));
+
+    // Line numbers should be rendered
+    expect(await screen.findByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+
+    // Content should be rendered
+    expect(screen.getByText('line one')).toBeInTheDocument();
+    expect(screen.getByText('line two')).toBeInTheDocument();
+    expect(screen.getByText('line three')).toBeInTheDocument();
+  });
+
+  // -----------------------------------------------------------------------
+  // Multiple files
+  // -----------------------------------------------------------------------
+  it('renders multiple files in the accordion', () => {
+    const files: BreakpointFile[] = [
+      { path: 'file1.ts', format: 'code' },
+      { path: 'file2.json', format: 'json' },
+      { path: 'file3.md', format: 'markdown' },
+    ];
+
+    render(<FilePreview files={files} {...defaultProps} />);
+
+    expect(screen.getByText('file1.ts')).toBeInTheDocument();
+    expect(screen.getByText('file2.json')).toBeInTheDocument();
+    expect(screen.getByText('file3.md')).toBeInTheDocument();
+  });
+});