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

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { cn } from "@/lib/cn";
+import { Button } from "@/components/ui/button";
+import { CheckCircle2, Loader2, AlertCircle } from "lucide-react";
+import { approveBreakpoint } from "@/app/actions/approve-breakpoint";
+import type { TaskDetail } from "@/types";
+
+interface BreakpointApprovalProps {
+  task: TaskDetail;
+  runId: string;
+}
+
+export function BreakpointApproval({ task, runId }: BreakpointApprovalProps) {
+  const [customAnswer, setCustomAnswer] = useState("");
+  const [isPending, startTransition] = useTransition();
+  const [result, setResult] = useState<{
+    success: boolean;
+    error?: string;
+  } | null>(null);
+
+  const options = task.breakpoint?.options || [];
+  const isWaiting = task.status === "requested";
+
+  // Don't render for non-waiting breakpoints
+  if (!isWaiting) return null;
+
+  function handleApprove(answer: string) {
+    if (!answer.trim()) return;
+
+    setResult(null);
+    startTransition(async () => {
+      const res = await approveBreakpoint(runId, task.effectId, answer);
+      setResult(res);
+    });
+  }
+
+  function handleCustomSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    handleApprove(customAnswer);
+  }
+
+  return (
+    <div data-testid="breakpoint-approval" className="space-y-4">
+      {/* Option buttons */}
+      {options.length > 0 && (
+        <div data-testid="breakpoint-options" className="space-y-2">
+          <label className="text-xs font-medium text-foreground-muted uppercase tracking-wider">
+            Choose an option
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {options.map((option) => (
+              <Button
+                key={option}
+                variant="neon"
+                size="sm"
+                disabled={isPending}
+                onClick={() => handleApprove(option)}
+                data-testid={`option-btn-${option}`}
+              >
+                {option}
+              </Button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Free-text input */}
+      <form onSubmit={handleCustomSubmit} className="space-y-2">
+        <label
+          htmlFor="custom-answer"
+          className="text-xs font-medium text-foreground-muted uppercase tracking-wider"
+        >
+          {options.length > 0 ? "Or provide a custom answer" : "Provide an answer"}
+        </label>
+        <div className="flex gap-2">
+          <input
+            id="custom-answer"
+            data-testid="custom-answer-input"
+            type="text"
+            value={customAnswer}
+            onChange={(e) => setCustomAnswer(e.target.value)}
+            placeholder="Type your answer..."
+            disabled={isPending}
+            className={cn(
+              "flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm",
+              "placeholder:text-foreground-muted/50",
+              "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          />
+          <Button
+            type="submit"
+            variant="default"
+            size="sm"
+            disabled={isPending || !customAnswer.trim()}
+            data-testid="approve-btn"
+          >
+            {isPending ? (
+              <>
+                <Loader2 className="h-3 w-3 animate-spin" />
+                Approving...
+              </>
+            ) : (
+              "Approve"
+            )}
+          </Button>
+        </div>
+      </form>
+
+      {/* Result feedback */}
+      {result && (
+        <div
+          data-testid="approval-result"
+          className={cn(
+            "rounded-lg border p-3 flex items-center gap-2 text-sm",
+            result.success
+              ? "border-success/30 bg-success-muted text-success"
+              : "border-error/30 bg-error-muted text-error"
+          )}
+        >
+          {result.success ? (
+            <>
+              <CheckCircle2 className="h-4 w-4 shrink-0" />
+              <span>Breakpoint approved successfully. The dashboard will update automatically.</span>
+            </>
+          ) : (
+            <>
+              <AlertCircle className="h-4 w-4 shrink-0" />
+              <span>{result.error || "An unknown error occurred"}</span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,95 @@
+"use client";
+import { cn } from "@/lib/cn";
+import { Badge } from "@/components/ui/badge";
+import { FilePreview } from "./file-preview";
+import { BreakpointApproval } from "./breakpoint-approval";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Hand, CheckCircle2 } from "lucide-react";
+import { TruncatedId } from "@/components/shared/truncated-id";
+import type { TaskDetail } from "@/types";
+
+interface BreakpointPanelProps {
+  task: TaskDetail;
+  runId: string;
+}
+
+export function BreakpointPanel({ task, runId }: BreakpointPanelProps) {
+  const breakpoint = task.breakpoint;
+  const question = breakpoint?.question || task.breakpointQuestion || "Approval required";
+  const title = breakpoint?.title || task.title || "Breakpoint";
+  const files = breakpoint?.context?.files || [];
+  const isWaiting = task.status === "requested";
+
+  return (
+    <ScrollArea className="h-full">
+      <div data-testid="breakpoint-panel" className="space-y-5 p-4">
+        {/* Header */}
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Hand className={cn("h-4 w-4 text-warning", isWaiting && "animate-pulse-dot")} />
+            <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="warning">Breakpoint</Badge>
+            {task.status === "resolved" && (
+              <Badge variant="success">Already Resolved</Badge>
+            )}
+          </div>
+          <TruncatedId id={task.effectId} chars={4} className="text-foreground-muted" />
+        </div>
+
+        {/* Question callout — sun yellow border with warm glow */}
+        <div
+          className={cn(
+            "rounded-lg border-2 p-5",
+            "bg-warning-muted border-warning/40",
+            isWaiting && "animate-breakpoint-glow"
+          )}
+          style={isWaiting ? { boxShadow: "var(--breakpoint-glow)" } : undefined}
+        >
+          <div className="flex items-start gap-3">
+            <Hand className="h-6 w-6 text-warning shrink-0 mt-0.5 animate-pulse-dot" />
+            <div className="min-w-0">
+              <h4 className={cn(
+                "text-xs leading-tight font-medium uppercase tracking-widest mb-2",
+                isWaiting ? "text-warning" : "text-success"
+              )}>
+                {isWaiting ? "Awaiting decision" : "Decision made"}
+              </h4>
+              <p data-testid="breakpoint-question" className="text-base text-foreground font-medium leading-relaxed whitespace-pre-wrap break-words">
+                {question}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Local approval form — only for pending breakpoints */}
+        {isWaiting && (
+          <BreakpointApproval task={task} runId={runId} />
+        )}
+
+        {/* Attached files */}
+        {files.length > 0 && (
+          <FilePreview files={files} runId={runId} effectId={task.effectId} />
+        )}
+
+        {/* Resolved state — neon green success glow */}
+        {task.status === "resolved" && (
+          <div className="rounded-lg bg-success-muted border border-success/30 p-4 flex items-center gap-3 shadow-glow-success">
+            <div className="flex items-center justify-center h-8 w-8 rounded-full bg-success/15">
+              <CheckCircle2 className="h-5 w-5 text-success" />
+            </div>
+            <div>
+              <span className="text-sm text-success font-semibold block">
+                Approved
+              </span>
+              <span className="text-xs leading-tight text-foreground-muted">
+                Breakpoint has been resolved
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}

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

@@ -0,0 +1,215 @@
+"use client";
+import { useState, useMemo, useRef, useEffect } from "react";
+import { cn } from "@/lib/cn";
+import { resilientFetch } from "@/lib/fetcher";
+import { Badge } from "@/components/ui/badge";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/ui/accordion";
+import { FileText, Code, FileJson, Loader2 } from "lucide-react";
+import type { BreakpointFile } from "@/types";
+
+interface FilePreviewProps {
+  files: BreakpointFile[];
+  runId: string;
+  effectId: string;
+}
+
+const formatIcon: Record<string, React.ReactNode> = {
+  markdown: <FileText className="h-3.5 w-3.5 text-info" />,
+  json: <FileJson className="h-3.5 w-3.5 text-warning" />,
+  code: <Code className="h-3.5 w-3.5 text-success" />,
+};
+
+function getIcon(format: string) {
+  return formatIcon[format] || <FileText className="h-3.5 w-3.5 text-foreground-muted" />;
+}
+
+function formatBadgeVariant(format: string): "info" | "warning" | "success" | "pending" {
+  switch (format) {
+    case "markdown":
+      return "info";
+    case "json":
+      return "warning";
+    case "code":
+      return "success";
+    default:
+      return "pending";
+  }
+}
+
+/** Try to pretty-print JSON content */
+function formatJson(content: string): string {
+  try {
+    return JSON.stringify(JSON.parse(content), null, 2);
+  } catch {
+    return content;
+  }
+}
+
+/** Render content based on format — night-black background with subtle border */
+function FileContent({ content, format }: { content: string; format: string }) {
+  const rendered = useMemo(() => {
+    if (format === "json") {
+      return formatJson(content);
+    }
+    return content;
+  }, [content, format]);
+
+  if (format === "markdown") {
+    return (
+      <div
+        className={cn(
+          "rounded-md bg-background border border-border/50 p-4",
+          "text-sm text-foreground-secondary leading-relaxed",
+          "overflow-x-auto max-h-80 overflow-y-auto",
+          "prose-sm prose-invert",
+          "[&_h1]:text-base [&_h1]:font-bold [&_h1]:mb-2 [&_h1]:text-foreground",
+          "[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mb-1.5 [&_h2]:text-foreground",
+          "[&_h3]:text-xs [&_h3]:font-medium [&_h3]:mb-1 [&_h3]:text-foreground",
+          "[&_code]:bg-background-secondary [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono",
+          "[&_pre]:bg-background-secondary [&_pre]:p-2 [&_pre]:rounded [&_pre]:text-xs [&_pre]:font-mono [&_pre]:overflow-x-auto",
+          "[&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4",
+          "[&_li]:mb-0.5",
+          "[&_strong]:font-semibold [&_strong]:text-foreground",
+          "[&_a]:text-primary [&_a]:underline"
+        )}
+      >
+        <pre className="whitespace-pre-wrap break-words font-sans">{content}</pre>
+      </div>
+    );
+  }
+
+  // Code and JSON: monospace with line numbers — night-black background
+  const lines = rendered.split("\n");
+  const gutterWidth = String(lines.length).length;
+
+  return (
+    <div
+      className={cn(
+        "rounded-md bg-background border border-border/50",
+        "text-xs font-mono overflow-x-auto max-h-80 overflow-y-auto"
+      )}
+    >
+      <table className="w-full border-collapse">
+        <tbody>
+          {lines.map((line, i) => (
+            <tr key={i} className="hover:bg-background-secondary/50">
+              <td
+                className="select-none text-right pr-3 pl-2 text-foreground-muted/40 border-r border-border/30 align-top font-mono"
+                style={{ width: `${gutterWidth + 2}ch` }}
+              >
+                {i + 1}
+              </td>
+              <td className="pl-3 pr-3 text-foreground-secondary whitespace-pre-wrap break-words">
+                {line || "\u00A0"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function FilePreview({ files, runId, effectId }: FilePreviewProps) {
+  const [loadedContent, setLoadedContent] = useState<Record<string, string>>({});
+  const [loadingFiles, setLoadingFiles] = useState<Record<string, boolean>>({});
+  const abortRefs = useRef<Record<string, AbortController>>({});
+
+  // Abort all in-flight file requests on unmount
+  useEffect(() => {
+    const refs = abortRefs.current;
+    return () => {
+      for (const controller of Object.values(refs)) {
+        controller.abort();
+      }
+    };
+  }, []);
+
+  async function loadFileContent(filePath: string) {
+    if (loadedContent[filePath] || loadingFiles[filePath]) return;
+    setLoadingFiles((prev) => ({ ...prev, [filePath]: true }));
+
+    // Abort any previous in-flight request for this file
+    abortRefs.current[filePath]?.abort();
+    abortRefs.current[filePath] = new AbortController();
+
+    const result = await resilientFetch<{ content?: string }>(
+      `/api/runs/${runId}/tasks/${effectId}?file=${encodeURIComponent(filePath)}`,
+      { signal: abortRefs.current[filePath].signal }
+    );
+
+    if (!result.ok) {
+      if (result.error.isAborted) return;
+      setLoadedContent((prev) => ({
+        ...prev,
+        [filePath]: "// Failed to load file content",
+      }));
+    } else {
+      setLoadedContent((prev) => ({
+        ...prev,
+        [filePath]: result.data.content || "// No content available",
+      }));
+    }
+    setLoadingFiles((prev) => ({ ...prev, [filePath]: false }));
+  }
+
+  if (!files.length) return null;
+
+  return (
+    <div data-testid="file-preview" className="space-y-1">
+      <h4 className="text-xs font-medium text-foreground-muted uppercase tracking-wider mb-2 pl-2 border-l-2 border-primary">
+        Attached Files
+      </h4>
+      <Accordion
+        type="single"
+        collapsible
+        onValueChange={(value: string | string[]) => {
+          const v = typeof value === "string" ? value : value[0];
+          if (v) {
+            const file = files.find((f) => f.path === v);
+            if (file) loadFileContent(file.path);
+          }
+        }}
+      >
+        {files.map((file) => (
+          <AccordionItem key={file.path} value={file.path} className="border-border/50">
+            <AccordionTrigger className="py-2 text-xs">
+              <div className="flex items-center gap-2 min-w-0">
+                {getIcon(file.format)}
+                <span className="font-mono text-foreground-secondary truncate">
+                  {file.path}
+                </span>
+                <Badge variant={formatBadgeVariant(file.format)} className="text-xs leading-tight px-1.5 py-0">
+                  {file.format}
+                </Badge>
+                {file.language && (
+                  <Badge variant="pending" className="text-xs leading-tight px-1.5 py-0">
+                    {file.language}
+                  </Badge>
+                )}
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="px-1">
+              {loadingFiles[file.path] ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="h-4 w-4 animate-spin text-foreground-muted" />
+                </div>
+              ) : loadedContent[file.path] ? (
+                <FileContent content={loadedContent[file.path]} format={file.format} />
+              ) : (
+                <div className="py-4 text-xs text-foreground-muted text-center">
+                  Expand to load content
+                </div>
+              )}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  );
+}

package/src/components/dashboard/__tests__/breakpoint-banner.test.tsx

@@ -0,0 +1,177 @@
+import { render, screen, act } from '@/test/test-utils';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import type { BreakpointRunInfo } from '@/types';
+import { BreakpointBanner } from '../breakpoint-banner';
+
+// Mock next/link to render a plain anchor (same pattern as run-card.test.tsx)
+vi.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) => (
+    <a href={href} className={className} data-testid="next-link">
+      {children}
+    </a>
+  ),
+}));
+
+function makeBp(overrides: Partial<BreakpointRunInfo> = {}): BreakpointRunInfo {
+  return {
+    runId: 'run-001',
+    projectName: 'my-project',
+    processId: 'data-pipeline',
+    breakpointQuestion: 'Approve deployment?',
+    ...overrides,
+  };
+}
+
+describe('BreakpointBanner', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // --- Returns null when empty ---
+  it('returns null when no breakpoint runs and no resolved entries', () => {
+    const { container } = render(<BreakpointBanner breakpointRuns={[]} />);
+    expect(container.innerHTML).toBe('');
+    expect(screen.queryByTestId('breakpoint-banner')).not.toBeInTheDocument();
+  });
+
+  // --- Renders breakpoint entries ---
+  it('renders breakpoint entries with correct content', () => {
+    const bps = [
+      makeBp({ runId: 'run-001', projectName: 'proj-a', breakpointQuestion: 'Deploy to prod?' }),
+      makeBp({ runId: 'run-002', projectName: 'proj-b', breakpointQuestion: 'Run migrations?' }),
+    ];
+
+    render(<BreakpointBanner breakpointRuns={bps} />);
+
+    expect(screen.getByTestId('breakpoint-banner')).toBeInTheDocument();
+    expect(screen.getByText('Deploy to prod?')).toBeInTheDocument();
+    expect(screen.getByText('Run migrations?')).toBeInTheDocument();
+    expect(screen.getByText('proj-a')).toBeInTheDocument();
+    expect(screen.getByText('proj-b')).toBeInTheDocument();
+  });
+
+  it('renders "Approval Needed" label for each breakpoint', () => {
+    render(<BreakpointBanner breakpointRuns={[makeBp()]} />);
+    expect(screen.getByText('Approval Needed')).toBeInTheDocument();
+  });
+
+  it('renders truncated run ID', () => {
+    render(<BreakpointBanner breakpointRuns={[makeBp({ runId: 'run-abcdef-12345678' })]} />);
+    // runId.slice(0, 8) = "run-abcd"
+    expect(screen.getByText('run-abcd')).toBeInTheDocument();
+  });
+
+  it('shows summary count when multiple breakpoints are pending', () => {
+    const bps = [
+      makeBp({ runId: 'run-001' }),
+      makeBp({ runId: 'run-002' }),
+      makeBp({ runId: 'run-003' }),
+    ];
+    render(<BreakpointBanner breakpointRuns={bps} />);
+    expect(screen.getByText('3 approvals pending')).toBeInTheDocument();
+  });
+
+  it('does not show summary count for a single breakpoint', () => {
+    render(<BreakpointBanner breakpointRuns={[makeBp()]} />);
+    expect(screen.queryByText(/approvals pending/)).not.toBeInTheDocument();
+  });
+
+  // --- Staleness indicator ---
+  it('shows staleness indicator after STALENESS_THRESHOLD_MS (2 minutes)', () => {
+    const bp = makeBp({ runId: 'stale-run' });
+
+    const { rerender } = render(<BreakpointBanner breakpointRuns={[bp]} />);
+
+    // Initially no staleness indicator
+    expect(screen.queryByTestId('staleness-indicator')).not.toBeInTheDocument();
+
+    // Advance past the staleness threshold (120s) + a tick interval (10s)
+    act(() => {
+      vi.advanceTimersByTime(130000);
+    });
+
+    // Re-render with the same props to keep the breakpoint active
+    // (the staleness tick interval triggers state update internally)
+    rerender(<BreakpointBanner breakpointRuns={[bp]} />);
+
+    expect(screen.getByTestId('staleness-indicator')).toBeInTheDocument();
+    expect(screen.getByText('(checking...)')).toBeInTheDocument();
+  });
+
+  it('does not show staleness indicator before threshold', () => {
+    const bp = makeBp({ runId: 'fresh-run' });
+
+    const { rerender } = render(<BreakpointBanner breakpointRuns={[bp]} />);
+
+    // Advance only 60s (below 120s threshold)
+    act(() => {
+      vi.advanceTimersByTime(60000);
+    });
+
+    rerender(<BreakpointBanner breakpointRuns={[bp]} />);
+
+    expect(screen.queryByTestId('staleness-indicator')).not.toBeInTheDocument();
+  });
+
+  // --- Resolved entry detection ---
+  it('shows resolved entry when a breakpoint disappears from the list', () => {
+    const bp = makeBp({ runId: 'resolved-run', breakpointQuestion: 'Deploy?' });
+
+    // First render with the breakpoint active
+    const { rerender } = render(<BreakpointBanner breakpointRuns={[bp]} />);
+
+    expect(screen.getByText('Deploy?')).toBeInTheDocument();
+
+    // Re-render without the breakpoint (it was resolved)
+    act(() => {
+      rerender(<BreakpointBanner breakpointRuns={[]} />);
+    });
+
+    // Should show "Approved" label for the resolved entry
+    expect(screen.getByText('Approved')).toBeInTheDocument();
+    // The resolved entry should still display the breakpoint question
+    expect(screen.getByText('Deploy?')).toBeInTheDocument();
+  });
+
+  it('auto-removes resolved entries after RESOLVED_DISPLAY_MS (20s)', () => {
+    const bp = makeBp({ runId: 'auto-clear-run', breakpointQuestion: 'Deploy now?' });
+
+    const { rerender } = render(<BreakpointBanner breakpointRuns={[bp]} />);
+
+    // Remove the breakpoint to trigger resolved state
+    act(() => {
+      rerender(<BreakpointBanner breakpointRuns={[]} />);
+    });
+
+    expect(screen.getByText('Approved')).toBeInTheDocument();
+
+    // Advance past the RESOLVED_DISPLAY_MS (20s) + cleanup interval (1s)
+    act(() => {
+      vi.advanceTimersByTime(22000);
+    });
+
+    // The banner should now return null (no waiting and no resolved)
+    expect(screen.queryByText('Approved')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('breakpoint-banner')).not.toBeInTheDocument();
+  });
+
+  // --- Accessibility ---
+  it('has role="alert" and aria-live="assertive"', () => {
+    render(<BreakpointBanner breakpointRuns={[makeBp()]} />);
+    const banner = screen.getByTestId('breakpoint-banner');
+    expect(banner).toHaveAttribute('role', 'alert');
+    expect(banner).toHaveAttribute('aria-live', 'assertive');
+  });
+
+  // --- Links ---
+  it('renders links to run detail pages', () => {
+    render(<BreakpointBanner breakpointRuns={[makeBp({ runId: 'link-run' })]} />);
+    const links = screen.getAllByTestId('next-link');
+    expect(links[0]).toHaveAttribute('href', '/runs/link-run');
+  });
+});