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

package/src/components/dashboard/run-filter-bar.tsx

@@ -0,0 +1,100 @@
+"use client";
+import { ArrowUpDown, Clock } from "lucide-react";
+import { cn } from "@/lib/cn";
+import type { DashboardSortMode, DashboardStatusFilter } from "@/hooks/use-run-dashboard";
+
+const filters: { label: string; value: DashboardStatusFilter }[] = [
+  { label: "All", value: "all" },
+  { label: "Running", value: "waiting" },
+  { label: "Stale", value: "stale" },
+  { label: "Completed", value: "completed" },
+  { label: "Failed", value: "failed" },
+];
+
+export interface RunFilterBarProps {
+  statusFilter: DashboardStatusFilter;
+  onStatusFilterChange: (value: DashboardStatusFilter) => void;
+  filterCounts: Record<DashboardStatusFilter, number>;
+  sortMode: DashboardSortMode;
+  onSortModeToggle: () => void;
+  filteredProjectCount: number;
+}
+
+export function RunFilterBar({
+  statusFilter,
+  onStatusFilterChange,
+  filterCounts,
+  sortMode,
+  onSortModeToggle,
+  filteredProjectCount,
+}: RunFilterBarProps) {
+  return (
+    <div className="mb-5">
+      <div data-testid="filter-bar" className="flex items-center gap-1">
+        {filters.map((f) => {
+          const count = filterCounts[f.value] ?? 0;
+          // Hide Stale filter pill when there are no stale runs
+          if (f.value === "stale" && count === 0) return null;
+          return (
+            <button
+              key={f.value}
+              data-testid={`filter-pill-${f.value}`}
+              aria-pressed={statusFilter === f.value}
+              onClick={() => onStatusFilterChange(f.value)}
+              className={cn(
+                "rounded-md px-3 py-1.5 min-h-[44px] text-xs font-medium transition-all inline-flex items-center gap-1.5",
+                statusFilter === f.value
+                  ? f.value === "stale"
+                    ? "bg-zinc-500/10 text-zinc-500"
+                    : "bg-primary/10 text-primary shadow-neon-glow-primary-xs"
+                  : "text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary"
+              )}
+            >
+              {f.label}
+              {count > 0 && (
+                <span className={cn(
+                  "rounded-full px-1.5 py-px text-xs leading-tight font-semibold tabular-nums",
+                  statusFilter === f.value
+                    ? f.value === "stale"
+                      ? "bg-zinc-500/20 text-zinc-500"
+                      : "bg-primary/20 text-primary"
+                    : "bg-background-secondary text-foreground-muted"
+                )}>
+                  {count}
+                </span>
+              )}
+            </button>
+          );
+        })}
+        {/* Sort toggle + Project count */}
+        <div className="ml-auto flex items-center gap-2">
+          <button
+            data-testid="sort-toggle"
+            onClick={onSortModeToggle}
+            className={cn(
+              "rounded-md px-2.5 py-1.5 min-h-[44px] text-xs font-medium inline-flex items-center gap-1.5",
+              "transition-all duration-200 ease-in-out",
+              sortMode === "status"
+                ? "bg-warning/10 border border-warning/30 text-warning hover:bg-warning/15 hover:border-warning/40 shadow-sm"
+                : "bg-primary/10 border border-primary/30 text-primary hover:bg-primary/15 hover:border-primary/40 shadow-sm"
+            )}
+            title={sortMode === "status"
+              ? "Currently sorting by status priority (active first, then failed, then completed). Click to switch to chronological activity view."
+              : "Currently sorting by most recent activity (newest updates first). Click to switch to status-grouped view."
+            }
+          >
+            {sortMode === "status" ? (
+              <ArrowUpDown className="h-3 w-3 transition-transform duration-200" />
+            ) : (
+              <Clock className="h-3 w-3 transition-transform duration-200" />
+            )}
+            {sortMode === "status" ? "By Status" : "By Activity"}
+          </button>
+          <span data-testid="project-count" className="text-xs text-foreground-muted tabular-nums">
+            {filteredProjectCount} project{filteredProjectCount !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/run-list.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { useState } from "react";
+import { RunCard } from "./run-card";
+import { VirtualizedRunList } from "./virtualized-run-list";
+import { ProjectSection } from "./project-section";
+import { EmptyState } from "@/components/shared/empty-state";
+import type { Run } from "@/types";
+
+interface RunListProps {
+  runs: Run[];
+  selectedIndex?: number;
+  groupByProject?: boolean;
+}
+
+export function RunList({ runs, selectedIndex, groupByProject = false }: RunListProps) {
+  const [pageSize] = useState(10);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  if (runs.length === 0) {
+    return <EmptyState />;
+  }
+
+  if (groupByProject) {
+    // Group runs by projectName
+    const grouped = runs.reduce((acc, run) => {
+      const project = run.projectName || "Unknown Project";
+      if (!acc[project]) {
+        acc[project] = [];
+      }
+      acc[project].push(run);
+      return acc;
+    }, {} as Record<string, Run[]>);
+
+    const projectEntries = Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b));
+
+    return (
+      <div className="flex flex-col gap-3">
+        {projectEntries.map(([projectName, projectRuns]) => {
+          const hasActiveRuns = projectRuns.some(r => r.status === "waiting" || r.status === "pending");
+          return (
+            <ProjectSection
+              key={projectName}
+              projectName={projectName}
+              runs={projectRuns}
+              defaultExpanded={hasActiveRuns}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+
+  // Flat list with pagination + virtualization
+  const _totalPages = Math.ceil(runs.length / pageSize);
+  const displayedRuns = runs.slice(0, (currentPage + 1) * pageSize);
+  const hasMore = displayedRuns.length < runs.length;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <VirtualizedRunList
+        runs={displayedRuns}
+        maxHeight={800}
+        renderItem={(run, i) => (
+          <RunCard run={run} selected={i === selectedIndex} />
+        )}
+      />
+      {hasMore && (
+        <button
+          onClick={() => setCurrentPage(currentPage + 1)}
+          className="mt-2 px-4 py-2 text-sm text-foreground-secondary hover:text-foreground hover:bg-background-secondary transition-colors rounded-md"
+        >
+          Show more ({runs.length - displayedRuns.length} remaining)
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/search-filter.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { Search, FolderOpen } from "lucide-react";
+import { cn } from "@/lib/cn";
+import type { RunStatus } from "@/types";
+
+const filters: { label: string; value: RunStatus | "all" }[] = [
+  { label: "All", value: "all" },
+  { label: "Running", value: "waiting" },
+  { label: "Completed", value: "completed" },
+  { label: "Failed", value: "failed" },
+];
+
+interface SearchFilterProps {
+  search: string;
+  onSearchChange: (value: string) => void;
+  statusFilter: RunStatus | "all";
+  onStatusFilterChange: (value: RunStatus | "all") => void;
+  searchRef?: React.RefObject<HTMLInputElement>;
+  groupByProject?: boolean;
+  onGroupByProjectChange?: (value: boolean) => void;
+}
+
+export function SearchFilter({ search, onSearchChange, statusFilter, onStatusFilterChange, searchRef, groupByProject = false, onGroupByProjectChange }: SearchFilterProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative flex-1 max-w-sm">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
+        <input
+          ref={searchRef}
+          type="text"
+          placeholder="Search runs..."
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="h-9 w-full rounded-md border border-border bg-background-secondary pl-9 pr-3 text-sm text-foreground placeholder:text-foreground-muted focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/30 focus:shadow-neon-glow-primary-focus transition-all"
+        />
+      </div>
+      <div className="flex items-center gap-1">
+        {filters.map((f) => (
+          <button
+            key={f.value}
+            onClick={() => onStatusFilterChange(f.value)}
+            className={cn(
+              "rounded-md px-3 py-1.5 min-h-[44px] text-xs font-medium transition-all",
+              statusFilter === f.value
+                ? "bg-primary/15 text-primary shadow-neon-glow-primary-ring"
+                : "text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary"
+            )}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+      {onGroupByProjectChange && (
+        <button
+          onClick={() => onGroupByProjectChange(!groupByProject)}
+          className={cn(
+            "flex items-center gap-1.5 rounded-md px-3 py-1.5 min-h-[44px] text-xs font-medium transition-all",
+            groupByProject
+              ? "bg-primary/15 text-primary shadow-neon-glow-primary-ring"
+              : "text-foreground-muted hover:text-foreground-secondary hover:bg-background-secondary"
+          )}
+        >
+          <FolderOpen className="h-3.5 w-3.5" />
+          Group
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/virtualized-run-list.tsx

@@ -0,0 +1,130 @@
+"use client";
+import { useRef, useMemo, useCallback } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { RunCard } from "./run-card";
+import type { Run } from "@/types";
+
+/** Estimated height of a single RunCard in pixels (used for initial measurement) */
+const ESTIMATED_CARD_HEIGHT = 140;
+
+/** Number of items to render outside the visible area for smooth scrolling */
+const OVERSCAN_COUNT = 3;
+
+/** Threshold below which we skip virtualization (overhead not worthwhile) */
+const VIRTUALIZATION_THRESHOLD = 15;
+
+interface VirtualizedRunListProps {
+  /** Runs to display — must be pre-sorted by caller */
+  runs: Run[];
+  /** Optional className applied to the scroll container */
+  className?: string;
+  /** Maximum height for the scroll container. Defaults to 600px. */
+  maxHeight?: number;
+  /** Optional render wrapper per-item (e.g. to add time overlays in activity mode) */
+  renderItem?: (run: Run, index: number) => React.ReactNode;
+}
+
+/**
+ * Virtualized run card list using @tanstack/react-virtual.
+ *
+ * - Only renders visible cards plus a small overscan buffer.
+ * - Uses stable sort keys (run.runId) to prevent reordering flash.
+ * - Preserves scroll position when new runs are prepended by adjusting
+ *   the scroll offset.
+ * - Falls back to a simple flat list when the item count is below the
+ *   VIRTUALIZATION_THRESHOLD to avoid unnecessary overhead.
+ */
+export function VirtualizedRunList({
+  runs,
+  className,
+  maxHeight = 600,
+  renderItem,
+}: VirtualizedRunListProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  // Memoize the runs array to prevent unnecessary virtualizer recalculations.
+  // The caller provides runs pre-sorted (by status or activity), and we use
+  // runId as the stable key (via getItemKey) to prevent reordering flash
+  // during rapid updates. This ensures React can reconcile virtual items
+  // by identity rather than by position.
+  const stableSortedRuns = useMemo(() => runs, [runs]);
+
+  // Map of runId -> index for O(1) lookup during key extraction.
+  const getItemKey = useCallback(
+    (index: number) => stableSortedRuns[index]?.runId ?? index,
+    [stableSortedRuns]
+  );
+
+  const virtualizer = useVirtualizer({
+    count: stableSortedRuns.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ESTIMATED_CARD_HEIGHT,
+    overscan: OVERSCAN_COUNT,
+    getItemKey,
+  });
+
+  // For small lists, skip virtualization entirely to avoid overhead.
+  if (stableSortedRuns.length < VIRTUALIZATION_THRESHOLD) {
+    return (
+      <div className={className} data-testid="run-list-flat">
+        <div className="flex flex-col gap-2">
+          {stableSortedRuns.map((run, index) =>
+            renderItem ? (
+              <div key={run.runId}>{renderItem(run, index)}</div>
+            ) : (
+              <RunCard key={run.runId} run={run} />
+            )
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  return (
+    <div
+      ref={parentRef}
+      className={className}
+      data-testid="run-list-virtualized"
+      style={{
+        maxHeight,
+        overflow: "auto",
+        // Contain layout for paint performance
+        contain: "strict",
+      }}
+    >
+      <div
+        style={{
+          height: `${virtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualItems.map((virtualRow) => {
+          const run = stableSortedRuns[virtualRow.index];
+          if (!run) return null;
+
+          return (
+            <div
+              key={virtualRow.key}
+              data-index={virtualRow.index}
+              ref={virtualizer.measureElement}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualRow.start}px)`,
+              }}
+            >
+              <div style={{ paddingBottom: 8 }}>
+                {renderItem ? renderItem(run, virtualRow.index) : <RunCard run={run} />}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/details/__tests__/agent-panel.test.tsx

@@ -0,0 +1,236 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, setupUser } from '@/test/test-utils';
+import { AgentPanel } from '../agent-panel';
+import { createMockTaskDetail } from '@/test/fixtures';
+
+// Mock clipboard
+beforeEach(() => {
+  Object.defineProperty(navigator, 'clipboard', {
+    writable: true,
+    configurable: true,
+    value: {
+      writeText: vi.fn().mockResolvedValue(undefined),
+      readText: vi.fn().mockResolvedValue(''),
+      write: vi.fn().mockResolvedValue(undefined),
+      read: vi.fn().mockResolvedValue([]),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn().mockReturnValue(false),
+    },
+  });
+});
+
+describe('AgentPanel', () => {
+  it('renders null task state with placeholder message', () => {
+    render(<AgentPanel task={null} />);
+    expect(screen.getByText('Select a task to view details')).toBeInTheDocument();
+  });
+
+  it('renders task title from task.title', () => {
+    const task = createMockTaskDetail({ title: 'My Cool Task' });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('My Cool Task')).toBeInTheDocument();
+  });
+
+  it('falls back to task.label when title is empty', () => {
+    const task = createMockTaskDetail({ title: '', label: 'label-fallback' });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('label-fallback')).toBeInTheDocument();
+  });
+
+  it('falls back to effectId when title and label are empty', () => {
+    const task = createMockTaskDetail({ effectId: 'eff-123', title: '', label: '' });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('eff-123')).toBeInTheDocument();
+  });
+
+  it('renders kind badge and status badge', () => {
+    const task = createMockTaskDetail({ kind: 'agent', status: 'resolved' });
+    render(<AgentPanel task={task} />);
+    // KindBadge renders the kind text uppercased
+    expect(screen.getByText('agent')).toBeInTheDocument();
+    // StatusBadge renders "Done" for resolved
+    expect(screen.getByText('Done')).toBeInTheDocument();
+  });
+
+  it('renders invocationKey via TruncatedId', () => {
+    const task = createMockTaskDetail({ invocationKey: 'inv-abcdef1234' });
+    render(<AgentPanel task={task} />);
+    // TruncatedId renders last 4 chars with "..." prefix
+    expect(screen.getByText('...1234')).toBeInTheDocument();
+  });
+
+  it('renders description from input.description when no agent prompt', () => {
+    const task = createMockTaskDetail({
+      input: { description: 'This is a task description' },
+      taskDef: {},
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('This is a task description')).toBeInTheDocument();
+  });
+
+  it('truncates long descriptions at 500 chars', () => {
+    const longDesc = 'A'.repeat(600);
+    const task = createMockTaskDetail({
+      input: { description: longDesc },
+      taskDef: {},
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    const descEl = screen.getByText(/^A+\.\.\.$/);
+    expect(descEl.textContent).toHaveLength(503); // 500 chars + "..."
+  });
+
+  it('does not render description when agent prompt is present', () => {
+    const task = createMockTaskDetail({
+      input: { description: 'hidden description' },
+      taskDef: {
+        agent: {
+          prompt: {
+            role: 'Developer',
+            task: 'Build a thing',
+            instructions: ['Step 1'],
+          },
+        },
+      },
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.queryByText('Description')).not.toBeInTheDocument();
+    expect(screen.queryByText('hidden description')).not.toBeInTheDocument();
+  });
+
+  it('renders agent prompt role, task, and instructions', () => {
+    const task = createMockTaskDetail({
+      taskDef: {
+        agent: {
+          prompt: {
+            role: 'Senior Engineer',
+            task: 'Refactor the module',
+            instructions: ['Read the code', 'Write tests', 'Submit PR'],
+          },
+        },
+      },
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Role')).toBeInTheDocument();
+    expect(screen.getByText('Senior Engineer')).toBeInTheDocument();
+    expect(screen.getByText('Task')).toBeInTheDocument();
+    expect(screen.getByText('Refactor the module')).toBeInTheDocument();
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+    expect(screen.getByText('Read the code')).toBeInTheDocument();
+    expect(screen.getByText('Write tests')).toBeInTheDocument();
+    expect(screen.getByText('Submit PR')).toBeInTheDocument();
+  });
+
+  it('renders numbered instructions', () => {
+    const task = createMockTaskDetail({
+      taskDef: {
+        agent: {
+          prompt: {
+            role: 'Dev',
+            task: 'Do work',
+            instructions: ['First', 'Second'],
+          },
+        },
+      },
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+  });
+
+  it('renders result status badge when result has status', () => {
+    const task = createMockTaskDetail({
+      result: { status: 'ok', output: 'done' },
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Result')).toBeInTheDocument();
+    // StatusBadge for "resolved" renders "Done"
+    expect(screen.getAllByText('Done').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders error section when resultError is present', () => {
+    const task = createMockTaskDetail({
+      result: { error: { name: 'TypeError', message: 'null is not an object' } },
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText('TypeError: null is not an object')).toBeInTheDocument();
+  });
+
+  it('renders error section from task.error', () => {
+    const task = createMockTaskDetail({
+      error: { name: 'RuntimeError', message: 'Something broke', stack: 'at line 42' },
+      result: undefined,
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Error')).toBeInTheDocument();
+    expect(screen.getByText('RuntimeError: Something broke')).toBeInTheDocument();
+  });
+
+  it('expands stack trace on click', async () => {
+    const user = setupUser();
+    const task = createMockTaskDetail({
+      error: { name: 'Err', message: 'Msg', stack: 'Error at file.ts:10\n  at run()' },
+      result: undefined,
+    });
+    render(<AgentPanel task={task} />);
+
+    expect(screen.queryByText('Error at file.ts:10')).not.toBeInTheDocument();
+
+    const stackBtn = screen.getByText('Stack Trace');
+    await user.click(stackBtn);
+
+    expect(screen.getByText(/Error at file\.ts:10/)).toBeInTheDocument();
+  });
+
+  it('renders result output section', () => {
+    const task = createMockTaskDetail({
+      result: { result: { value: 42 } },
+    });
+    render(<AgentPanel task={task} />);
+    expect(screen.getByText('Output')).toBeInTheDocument();
+  });
+
+  it('shows expand button for long output and expands on click', async () => {
+    const user = setupUser();
+    const longValue = 'x'.repeat(600);
+    const task = createMockTaskDetail({
+      result: { result: longValue },
+    });
+    render(<AgentPanel task={task} />);
+
+    // Should show truncated + expand button
+    const expandBtn = screen.getByText(/Expand/);
+    expect(expandBtn).toBeInTheDocument();
+
+    await user.click(expandBtn);
+
+    // After expanding, collapse button should appear
+    expect(screen.getByText('Collapse')).toBeInTheDocument();
+  });
+
+  it('renders copy button for error section', () => {
+    const task = createMockTaskDetail({
+      error: { name: 'Err', message: 'Broken' },
+      result: undefined,
+    });
+    render(<AgentPanel task={task} />);
+    const copyButtons = screen.getAllByTitle('Copy to clipboard');
+    expect(copyButtons.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders with minimal task data (no input, no result, no error)', () => {
+    const task = createMockTaskDetail({
+      input: undefined,
+      result: undefined,
+      error: undefined,
+      taskDef: undefined,
+    });
+    render(<AgentPanel task={task} />);
+    // Should still render the title
+    expect(screen.getByText(task.title)).toBeInTheDocument();
+  });
+});